こんにちは、かがみ（ @cony_tas ）です！
昨今のWebデザインといえばフラットやマテリアルデザインが多く採用されていますが、たまにはゲームっぽい立体感のあるボタンを作ってみませんか？
本記事ではゲームの中でもファンタジーっぽいボタンの作り方をご紹介しようと思います！
記事でわかること
- ・ファンタジーっぽいボタンの作り方
記事の信頼性
筆者のかがみ（ @cony_tas ）はWeb/UIデザイナー歴8年になります。
ゲーム会社でさまざまなWebサイトやゲームUIを制作しています。
ファンタジーっぽいボタンの作り方
それでは早速ファンタジーっぽいボタンの制作工程を、画像を交えて説明していきます！
装飾デザインやディテールに時間をかければかけるほど良いものはできますが、今回は割とさくっとできる作り方なので画像の通りに一緒に作ってみましょう♪
ボタンのベースを作る
Photoshopで新規ドキュメントを作り、ボタンのベースになる角丸のシェイプを作成してください。
ベースの色は後で変更できるので、とりあえず適当で大丈夫です。
次にボタンのベースの上部からグラデーションで色を重ねて少し発光させます。
この時、描画モードは「覆い焼きカラー」にします。発光具合は色や透明度で調整してみてください。
ボタンのベースシェイプを選択し、レイヤースタイルで「光彩（内側）」を適用して下の画像のようにオーバーレイで光彩をいれます。
続けてボタンのベースの上からグラデーションをオーバーレイで重ね、ボタンの中央でカラーの彩度や明度が切り替わるような感じにします。
さらにボタンの下からグラデーションを覆い焼きで重ねます。笑
これはまだまだ少ない方で、本格的に作るならボタンの質感をアップするためにさらに何枚もレイヤーを重ねていきますね。
でも今回は一旦このくらいにしておきます。笑
装飾を加える
ボタンのベースができたら、次に装飾を作っていきましょう。
まずは、ボタンの中にオーバーレイやソフトライトで装飾をうっすら重ねます。
ここで使う装飾はフリー素材を使ってもいいですし、自前で制作する場合は下記の記事もご覧ください。
次にボタンの外側にボーダーを加えます。
ボーダーを加える方法はいくつかありますが、簡単なのはレイヤースタイルの境界線です。ボタンのベースに境界線を3～4px加えましょう。
その際、塗りつぶしタイプを金色のグラデーションにすると下の画像のようなボーダーになります。
そろそろ完成も近づいてきました。
今度はボーダーの上に重ねるように、装飾を加えます。装飾の配置で見た目がけっこう変わりますが、今回はボタンを囲むように4墨に配置します。
最後に質感アップのためにテクスチャや色をうっすら追加して、キラキラのエフェクトも入れてみます。
ファンタジーっぽいボタンの完成です！
短時間で作りましたが、なかなか良い感じに出来上がりました。笑
完成
せっかくなので、ファンタジーっぽい背景にボタンを配置してみます♪
ブログの中で使うにはちょっと違和感があるかもしれませんが……ファンタジーっぽいボタンを作りたいなと思った時に、参考にしていただければ幸いです。
最後に：ファンタジーっぽいボタンの作り方
今回は、ファンタジーっぽいボタンの作り方をご紹介しました！
普通のWebサイト制作ではなかなかこういったボタンは作らないかもしれませんが、ゲーム系サイトならマッチするかもしれませんので、もし制作することがあれば参考にしてみてください♪
今後もUI制作シリーズとして、色々なUIパーツの作り方をご紹介しようと思っています。
以上になります。また次の記事でお会いしましょう。
