見よ、このカッコイイメニュー画面を。これだけで一体これからどんな冒険が待ち構えているのか、ワクワクしてしまう。
……はずがない。
メニュー画面をいかにかっこよくするか、というのはアマチュアゲーム製作者にとって大きな課題の一つである。この記事ではそこまで大したことがないテクニックをかき集め、何とかこの残念なUIをマシなものにしてみる。
（オペレーションブラックってなんだよ！！って突っ込みはナシで）
なにがダメなのか。
ご覧の通りである。つまり、全てダメである。
必要なもの
必須である。PictBearやGimp等、フリーソフトでもそこそこ良いペイントソフトはあるが、やはりフォトショと比べると差はでかい。特にフォントのアンチエイリアスや、フィルタ効果になってくるとその差は歴然である。
ちなみにカピカピ感溢れる残念な画像達はPhotoshopがあればまずお世話になることがないと思われる。
- 客観的な視点
それは、とても難しいものだ。が、作りこんでいるときは素晴らしくイカしたデザインに見えていても、翌朝目覚めて作業の続き始めたとたん、あまりのダサさに眼球が腐り落ちるほどのショックを受けることがある。たまに遠くから見たり逆立ちして見たり、主観に囚われないことが重要だ。
- 根気
最初から上手くいくことは滅多に無い。出来上がったデザインを何度もレビューし、直していく根気が必要である。
タイトル
何を血迷ったかＭＳ Ｐゴシックで描かれたタイトル。とりあえずフォントだけでも変更すればもうちょっと良い感じになるんじゃなかろうか。
ちょっとマシになった気がする。位置を動かしたり頭文字を大きくしたりもう一工夫加えてみよう。
大分マシになった。もうちょっと光り輝く感じが欲しいので、フォトショに付いているレイヤースタイル機能を使う。文字自体を真っ黒にして、回りを光らせてみよう。
どうだろう。タイトルとしては及第点といったところである。実際はこれをロゴとして色々使いまわしたりするのでもうちょっと凝ったり装飾したりと時間をかけたりする。
ちなみに、レイヤースタイルの内訳はこのような感じになっている（他のパラメータは割愛）。
テキストの周りに色を塗る手段は境界線・光彩（外側）・ドロップシャドウと三種類あるので、上手く使い分けてあげることで複雑な効果を出すことができる。
メニュー
フォントをネットで沢山探してきたりすると、特徴的なフォントを色々と使ってみたくなるが、これはあまり良くない。街中のポスターなどを見てみれば分かるが、一つの面に使われているフォントは精々2〜3種類である。これを越えてしまうと、統一感がなくなってしまい見難くなるのだ。
ということでフォントはタイトルと同じものを使う（ただしタイトルとメニューに限っては違うフォントを使っても良い。読みにくくならないように）。そしてタイトル同様に光らせてみる。ちょっと控えめに。
ちょっと大人しすぎたので、光らせてみる。グローという技術を使う。詳しくはググれば出てくるが、レイヤーを複製→描画モードをスクリーンにし、ガウスぼかしをかけるという簡単なものだ。
お分かりいただけただろうか。微妙にボケた感じになり、輝きも増している。これでメニューは完成である。あくまで控えめに。
背景
真っ黒だと味気ないので、ちょっと既存のテクスチャを上手く使って何か表示させてみる。テクスチャ素材は探せば見つかる（商用フリーも）ので、根気良く探してみるべし。日本にはあまりなく、基本的に海外のサイトばかりである。
ぺたっと（ブラシ）。
自己主張しすぎなので、レイヤースタイル。黒くフェードアウトするような色を塗り、青く光らせる。背景あくまで控えめに、暗めに作ると前面の項目を邪魔しないので良い。
これで背景完成。単純である。実際の作業ではメニュー画面やタイトルとの兼ね合いを見ながら、ちまちまと修正を加えるべし。
ちなみにもう1ランク上のメニュー画面を作りたいなら、背景はアニメーションさせるとカッコイイ。面倒くさいし、素材作りも静止画よりぐっと難しくなるが。
仕上げ
カーソルは色々作り方があるので一概には言えないが、メニュー項目を覆う一番シンプルなものにする。端をフェードアウトさせることで、立体感のようなものが出る。CopyRight表示もタイトルと同じフォントを使い、下の方に配置。完成品が以下である。
どうだろうか。最初と比べると、大分マシになった気がする。
このようにそれぞれ一工夫してあげることで、大分メニュー画面のワクワク感は増してくれるのである。メニュー画面なんてどうせゲーム部分とは関係ないし……と思ってる人は多いかもしれないが、たまにはちょっと拘ってみるのも面白い。
