ゲーム制作時の UI に関する自分ルール
- ファミコンカラーのみを使う。迷いをなくすため。色の選択肢はいくらでもあるので、迷い出すと永遠に時間がかかってしまう。おしゃれな色使いにしたい場合はファミコンカラーは適していないけど、レトロゲー感を出したいのでこれで OK ということにしている。
- 「重要ではないが、一度は見てほしい、たまに思い出してほしい」という情報については 10px + normal という小さなフォントを使う。
- ボタン等、押せるものには黒枠を付けている。押せないものには原則付けない。メッセージウィンドウ等の枠は別扱い。
- 迷ったら角丸を付ける。親しみをもたせた感じにしたいので。
- 可読性が重要じゃない場合はファミコン系の 8bit フォントを使う。レトロゲー感を出したいので。可読性が重要なテキスト主体のゲームについては別。
- 背景色は緑。メインカラーは黄色。危険なボタンは赤。キャンセルボタンは枠のみ。使用不可ボタンは灰色。リストボタンは白。その他「青」「アクア」「緑」「赤紫」「青紫」「オレンジ」の色を用意しているが、こちらの使い道は決まっていないので、どこかで考える。
- 英語は極力使わない。子供にも遊んでほしいので。漢字も同じ理由であまり使いたくない。可能であればひらがな・カタカナだけにしたい。
- 最初の時点で使わない要素はすべて非表示にしておく。必要になったときに初めて表示する。
- 一度に出すメッセージは 3 行以内に収める。
- イラストはドット絵で描く
- 画面上のオブジェクトは基本アニメーション（トランジション）させる。煩雑すぎると感じたら削る。
- トランジションのデフォルト値は 200ms に設定。違和感を感じたらその部分だけ微調整する。
- 一時的なモード（「はい」「いいえ」の選択モードとか）を設けたくなった場合は全画面を覆うモーダルウィンドウを使うことで対応。こうすることでモードを増やさずに済む。全画面を覆わなくても、モーダルウィンドウ以外の部分を押せなくすることで（半透明してぼかす、とかの方法で）対応も可能だけど、とりあえずは全画面を覆う形にする。迷いどころではあるけど、どちらかに統一することで分かりやすくする。
- デフォルトのボタンサイズは margin, padding 含めて 60px * 60px にする。スマホで言うと横 6 ボタン。これ以上小さいと雑に押すのが難しくなる。縦の解像度はスマホによって大きく変わってくるので何枠になるかは一概に言えないけど、iPhone SE あたりの解像度の低いスマホを基準にすると縦 8 ボタンくらい。6枠 * 8枠 という制限の中で UI を作る。
- UI は iPhone SE あたりの解像度を基準に考える。モバイルファーストにして、PC の優先順位は下げる。モバイル解像度のものを PC に持っていくことは可能だけど、その逆は無理なので。
- 美咲フォントを使う場合、基本的にはサイズを 16px にしておく。フォントが細めのため、可読性を高めるにはある程度のサイズが必要なため。あと、ある程度大きいフォントを使うことで嫌でもシンプルな作りにする必要が出てきて、結果、分かりやすさと開発工数の削減を得られる。
