【要約】桜井政博のゲーム作るには「UI」｜画面表示と操作の親切設計を全15テーマで網羅

『星のカービィ』や『大乱闘スマッシュブラザーズ』シリーズの生みの親・桜井政博さんは、YouTubeチャンネル「桜井政博のゲーム作るには」でゲーム開発のノウハウを数多く公開しています。この記事は、そのチャンネルの内容をテーマごとに要約・再構成したものです。

ただし、要約はあくまで入り口にすぎません。桜井さんご本人の言葉・実例・テンポ、そして映像そのものからしか得られないものが本当に多いので、記事を読んで終わりにせず、ぜひ各テーマに埋め込んだ元動画もあわせてご覧いただくことを強くおすすめします。

分かりやすさと様式性の両立から、必ず飛ばせる・誰でも分かるヘルプまで語られるカテゴリです。ここでは「UI」カテゴリの全2本（個別動画15テーマ）の要点を、元動画2本に沿った2部構成でまとめていきます。各部の冒頭に解説動画を置いているので、あわせてどうぞ。

第1部　分かりやすさと様式性・文字の大きさ・色分け・大事なものを大きく（#01〜#08）

UIとはユーザーインターフェイスのこと。ゲームでは主にメニューや画面に出る数字など、表示系のことを指します。分かりやすさと様式性をどう両立させるか、そのデザインの勘所が語られます。

1. わかりやすさと様式性

分かりやすいUIと様式性の高いUIは、相反するものかもしれません。桜井さんが様式性の高いUIの一番手に挙げるのは『ペルソナ』シリーズ。非常にスタイリッシュなUI構成ですが、正直に言えば整頓されているとは言いがたく、パッと見で面食らうかも。

とはいえ、便利だからとペルソナ5が球体以前としたメニュー……いや無味乾燥なメニューで構成されるのは嫌すぎますよね。UIはいわば引き出しで、整頓されているに越したことはありませんが、ゲームによって詰めるものの大きさはかなり異なります。単純に分かりやすければ良いUI、分かりにくければ悪いUIとは言い切れないのです。

桜井さん自身の作品は、サービスしすぎで引き出しや詰めるものが多すぎ、いつでも宿題を抱えているそう。ビルド系も荷物整理に迷う（マイクラの倉庫作りは自分でフォルダを作る行為に近い）。それでも、視線の誘導、表示の大小、ウインドウ化による関連付け、輝度や明度、適切なフォント選択など、工夫すべきところはあります。利便性と様式性に正解はないので、ゲームの世界に合うようデザインし、その上でより親切にできれば言うことはありません。

2. 文字の大きさ

海外のゲームを日本語でプレイしていて、文字が小さいと思ったことはありませんか。適切な文字の大きさは言語によって変わります。特に日本語や中国語の漢字はスペースを大きめに使う。日本語は1文字に情報が詰まって1文字が大きく行が短くなり、英語のアルファベットは小さくても視認でき行が長くなる。フランス語はさらに長くなりがちです。

英語のみを前提にレイアウトを組み、テキスト変更に柔軟性がないと、文字が小さすぎて困ることになります。昔よりは減っていて、解像度向上やフォントサイズを選べる丁寧な対応も増えました。携帯モードのあるスイッチでは比較的大きく組むことが多い（携帯機で確認すればすぐ気づく）。ただ文字が大きいとクールさは減るかも。ファミコンでは8×8ドットで感情を描いていましたが、脳が補完してくれるのが面白い、とのことです。

3. いまどきの親切設計

大きなタイトルなら設定はしっかり親切に作るべき。桜井さんは『The Last of Us Part I』（PS5）の設定を、ゲーム実況風に見ていきます。このシリーズはアクセシビリティ（利用のしやすさ・ハンデを持つ人も操作できる設計）が目を見張るほど丁寧で、非常に参考になります。

まずアクセシビリティの項目数が膨大。HUD（画面に直接書かれるUI情報）の大きさを変えられ、プレビューで結果が見られる。色彩調整やハイコントラスト表示は色弱対応にもなり、敵味方やアイテムを際立たせられます。カメラと酔い対策では、演出を抑えて画面の動きを減らし酔いを軽減。ナビゲーションは移動方向の矢印や、崖で振動、敵位置を知る聞き耳モードの拡張など、難度にも影響します。

さらにテキスト読み上げはセリフ以外もすべて音声化、ムービーの音声ガイド、移動・戦闘の音供給、音声振動まで。戦闘アクセシビリティは掴んだ敵が逃げない等、難度を下げる項目をあえて一旦ロックして1手間かけさせるのも1つのアイデア。発見されなくなる「視認負荷」を制限なしにすれば実質無敵モードにもなります。多数の項目をプリセットでまとめて設定できるのも親切です。

コントローラー設定も豊富で、操作方法に名前を付けられ（スマブラでも採用）、横持ち・逆さ持ち、左右スティック入れ替え、十字キーの長押しコンフィグ、デュアルセンスのアダプティブトリガー（弓の抵抗）まで。字幕は大きさ・背景・名前表示・色・声の方向まで調整可能。昔の任天堂作品はキーコンフィグがない価値もありましたが、多様な人が遊ぶ以上、好みに設定を変えられることは必要。必要な部分を探るだけでも有効なので、参考にすると良いとのことです。

4. ローディング画面

データの読み込みは必ず発生し、ローディングの待ち時間はあまり歓迎されません。ロード時間を演出で補うこともあり、初代『バイオハザード』の扉を開く演出は、内部でローディングしている間のもの（その長さでゾンビのいる部屋が予測できたりも）。必要な読み込み時間と必然的な演出がマッチした好例で、ここにロードマークを入れたら興ざめかもしれません。

ただしこれは何十年も前の話。現在はスピード感が求められ、読み込みが高速化しても単なる待ち時間はほとんど許されません。少なくともローディング中だと表示されれば納得しやすい。開発時と完成時では最適化でロード時間が変わることが多いので、演出に依存しすぎない方が良い。シンプルなマークでどこでも表示できるようにしておくのが無難、とのことです。

5. 文字強調

テキストで読み進める作品では、文字の制御ができることがあります。大きさ・色・アニメーション・フォントを変えたり、画面振動やフラッシングを起こしたり。文字演出でキャラクターの感情を伝え、無機質な展開に彩りを加えるのは必要そうです。シリアスな作品には合わないかもしれませんが。

ポイントは、これらを設定できるようにしておき、各国語に翻訳される時は翻訳者がスクリプト（演出設定データ）を直接調整できるようにすること。言語によって適切な強調方法は違うからです。日本はコミック文化が盛んで、書き文字（背景に描かれる擬音）やマンプ（顔に出る汗や青筋マーク）、フォントや吹き出しの使い分けなど、限られた情報量で多彩な表現を行ってきました。同じサイズのテキストを淡々と送るだけではもったいない。その演出が生きる尺度も国・言語で異なるので、ネイティブが演出ごと考えられるようにした方が良い、というお話です。

6. メニューは世界を語る

同じゲーム性・同じ内容でも、UIやフォントの使い方1つでターゲット層を変えられます。同じ機能でも、クールにすれば大人向け、可愛い系、ホラーっぽく、明るく派手に、電脳世界風、和風・西洋風・中華風・アジアンと、印象は様変わり。

キャラクターや背景をデザインするのに比べ、フォントを変えるだけで世界観を構成できるなら楽（実際はフォントごと1から作ることもあるので楽とは言いがたいですが）。背景の壁紙や枠・アイコンもセットで考えるものですが、それでも世界の雰囲気を形づくる効果は絶大。フォントもUIも、その世界を「パッケージング」するものに近い。見やすさを維持しつつ、積極的にデザインすべきだということでした。

7. 色による区分

桜井さんがディレクションする企画では、メニューの色分けを行うことが多いそうです。スマブラスペシャルではトップ画面がいくつかの色に分かれ、「大乱闘」系のメニューは赤ベース、「スピリッツ」は緑ベース、というように。結構前からの対応です。

ただし色分けは必ずしも良いとは限りません。色をベタベタ付けると年少向けに感じることもある。桜井さんの企画ではメリットがあるのでそうしていますが、ゲームに合ったトーン＆マナーがあり、雰囲気に合わせて自由に設定すればよい、と。どんなゲームでも推奨したいのは、同じ画面に色を混ぜこぜにしないこと。ごちゃごちゃしがちだからです。

スマブラ4ではメニュー内に大きくキャラクターの絵があり、色が混ざっているとも言えますが、そこまで気になりません。むしろキャラクターが前面に出ると、続けるうちに絵が刷り込まれる効果がある。文字を探すより絵を見つける方が圧倒的に早く直感的だからです。文字を読んで理解するより、絵や色でイメージ的に理解できる方が良い。それでもメニューはゲームのトーン＆マナーを優先すべき、とも添えています。

8. 大事なものをより大きく

桜井さんのメニューUIで最も風変わりなのが、重要度に応じてアイコンの大きさを変えていること。通常メニューは上から下に並ぶものが多いですが、桜井さんは『メテオス』以降、メニューをアイコン化して大小を変えています。大きいほどよく使うもの、小さいものはあまり使わないもの。アクセスを促しているのです。

なぜそうしたかは想像できるでしょう。これはゲームキューブのコントローラーにも近い思想——Aボタンが大きく、X・Yボタンは小さい。見た目だけでなく、触った時に最低限押すべきボタンが分かります。ただし全ゲームに合うわけではなく、選択肢の価値を変えることは汎用性を捨てることでもある。4ボタンでメニューを上下左右に動かす時などは、完全に同じ価値の方が操作しやすいのです。アイコン化は他言語へのローカライズで文字が溢れる困りごともある。リスト状のメニューに対し、見せ方を変える方法もある、というご紹介でした。

第2部　高速に選ぶ・必ず飛ばせる・ボタン設定・ヘルプ・言語不問・HUD（#09〜#15）

前半が見せ方・デザインの話だったのに対し、後半は操作の快適さと親切さがテーマ。高速に選ぶ、必ず飛ばせる、誰でも分かるヘルプなど、プレイヤーへの配慮が語られます。

9. 高速に選びたい

任天堂の新機種開発時、桜井さんは機能の提案を求められることがありました。ゲームキューブやスマブラDXの頃から度々していた要望の1つが「コントローラーにホイールが欲しい」。昔風に言えばジョグダイヤルです。マウスのホイールの便利さを知っていれば分かるように、メニュー選択がものすごく便利になる。

ゲーム内では多くの選択肢から1つを指定する場面が頻繁にあるので、ホイールは万能で便利だと思ったのです。クリック感があれば、カリカリと手応えが出てより実態感が増すとも。ホイールは大きく、ハードに収めるのが難しいので見送られるのも当然ですが、アナログスティックをコンコンと倒す感触に満足しているわけではない（十字ボタンの方がクリック感があって良いかも）。便利にショートカットできるほど、慣れた人しか触れない一般性の低いUIになりうるのが難しいところ。新デバイスが導入されたらUIに適用できないか、常に考えているそうです。

10. 必ず飛ばせるように、止められるように

会社ロゴ、オープニング、ムービー、イベントなど、ゲームをしていない瞬間は必ずスキップできるようにしましょう、とのこと。気合いの入ったデモを見てほしい気持ちは分かりますが、その人が初めて見るとは限りません。映像作品で早送りやスキップができないのは不便そのもの。ロゴがガイドラインで飛ばせない可能性もありますが、そんなのは今時流行りません。ガイドラインを決める人も飛ばせる前提で設定すべきだと言います。

さらにムービーは必ず止められるように。未だにスキップしかできない場合がありますが、電話・来客・食事など手を止める事情は山ほどあるので、デモやムービーの最中でも自由に止められるようにしましょう（オンラインの進行だけは仕方ない場合も）。「私がここで押しておけば、飛ばせないゲームが将来的に少しは減るかもしれない」と桜井さん。実機でセリフ単位で飛ばせるのが主流ですが、ムービーにも適用できると良い、とのことです。

11. ボタン設定

シンプルな作品でも、必ずボタン設定（キーコンフィグ）はできるようにすべきだ、とのことです。ただしボタン設定画面は仕様が重く、各制作者が個々に作ると手間がかかりすぎる。ゲーム機の機能でカスタマイズできれば助かるのですが、なかなかそうはなりません。桜井さんの作品はWii以降、対応コントローラーが数種類あり、いろんな人が寄り合うのでゲスト分も楽に設定できる必要があります。

工夫として、コントローラーはグラフィカルに表現。縦に項目を並べる方が簡単ですが、実物を確認して設定できるようにしています。設定方法はカーソルで対象ボタンを選んでから該当ボタンを押す方式。「変えるボタン→入れ替えるボタン」を押す方式だと、メニューを抜けるボタンが設定対象になってしまう問題があるからです。操作の重複も許容（スマブラはジャンプボタンが2つ）。設定はお名前に記録され、選ぶだけで反映されるのでゲストにも対応できます。

なお日本ではPS5から×ボタンが決定になりました（世界では標準）。スイッチだけ逆のままで、標準で配置を変えられますが全アプリで入れ替わるため、ゲーム内にボタン配置の設定がないと対応できなくなる。ボタン設定画面を作るのは本当にややこしいですが、それが必要なお客さんがいる。可能な限り対応をプッシュしたい、と語ります。

12. テキストの読み進め

人は普通、テロップ（字幕）を読む方が早いものです。桜井さんもゲームのテキストはポンポン読めると気持ちいい。ですがちゃんとした演技がついているデモは、スピーディに進められません。本をめくるように見るのと、映画を見るのの差です。プレイヤーとしては、こういう時こそ早送りできると嬉しい。

セリフ単位で飛ばせる作品（セリフの頭出しをしてくれるイメージ）はありがたい。各種サブスクやYouTubeに速度を上げて見る機能があり活用している人も多いように、限られた時間でより多くを楽しむのはもう文化と言ってもいいレベル。作った演技はゆっくり見てほしいでしょうが、システムで対応していればゆっくりもテンポよくも選べます。なるべくセリフ飛ばし対応をしておく方が、多くの人が幸せになれるのではないか、と。海外作品はテロップなしが初期設定のことも多く感覚が異なるかもしれませんが、「演出がゆっくりしすぎて今の時代に合っていないのでは」と、この場を借りて疑問を投げかけています。

13. メニューにヘルプを

メニュー項目は多くが単語で表現されますが、単語だけでは機能がさっぱり分からないことがあります。そこで役立つのがヘルプ（画面下などの機能説明文）。これは積極的に入れるべきで、桜井さんの作品ではほぼ確実に入っている重要視する機能です。

ヘルプを設定する際、特に気を配ることが1つ。それは、メニューと同じ言葉で説明しないこと。大事なので繰り返しますが、メニューと同じ言葉で説明しない。冗談のようですが実際に多いのが、「オプション」の説明が「オプションに行く」になっているケース。その意味が分からない人のためのヘルプなのに意味がありません。この場合「ゲーム内の様々な設定をする」などと、違う言葉で説明するとよい、ということでした。

理想は頭にすっと入ること。1度ヘルプを考えたらさらに噛み砕くのが大事で、意味を客観視し、より簡単に伝えられるよう推敲を続ける。直訳風ではなく意訳風にするのがポイントです。モード名も「シングルモード」より「1人で遊ぶ」が分かりやすい。「コンフィグ」「キーリピート」のような専門用語は避け、日本語ならひらがなを開くことも考えましょう（「1人用」など、開いた方がすっと入ってくる）、とのことです。

14. 言語がなくてもわかるように

桜井さんのゲームでは、言葉が分からなくてもゲームができるように検討しています。例えば、可能な範囲でアイコンに絵やキャラクターを入れる。見て楽しい効果もありますが、絵を見て何ができるか分かれば良い。試しに韓国語にすると、ハングルが分からなくても絵があればなんとなく理解できそうな気がします。

もう1つ、ボタンを連打すると基本的なメインゲームに入るようにしています。スマブラスペシャルはトップから連打で大乱闘のファイターセレクトまで、カービィのエアライドは最初のステージで開始、スーパーデラックスはチュートリアル付きのシナリオが始まる。普通に設定していてもそうなる印象もありますが、意図的にそう作っている。最悪、文字が読めなくてもゲームができるのが理想なのですね。あまり意識されないことなので話題に加えた、とのことです。

15. HUD

画面上に表示するインフォメーションをHUD（ヘッドアップディスプレイ）と呼びます。戦闘機や近年の車にもあり、前方から目を離さず情報を得られるもの。ゲームでは画面にくっついている表示全般を指しますが、キャラクターに追従するものの方がよりHUDらしいかもしれません。

傾向として、日本作品は情報が多くなりがち、海外作品は没入感を重視して情報を抑えがち（インフォを随時消せるゲームも多い）。桜井さんは機能重視でフルに出す方ですが、あると便利でもごちゃごちゃする。効果的な表現を各ゲームで模索しています。スマブラの工夫の例は次のとおりです。

• スマブラX以降、ファイターの顔を表示（小さくなるキャラクター性を高め、観戦にも向く）
• 背景に模様があり上にUVスクロール（闘志に燃えている雰囲気を出す）
• ファイターが重なると半透明に
• 頭上のプレーヤーカーソルは、常時だとうるさいので距離や状況で見え隠れ
• エアライドはコピー能力でメーター表示が変わり、マシンが壊れるとメーターも壊れる
• 攻撃・撃破した相手をアイコンで表示（3D空間で誰にダメージが入ったか分かりやすく）
• メテオスでは宇宙人くんの頭が回り、タイムアクセルで回転数が上がって楽しくスピードアップ

他のゲームを見てもいろんな発見がありますが、ゲームがやりやすく、あるいは面白くなるという前提で設定する必要がある、と締めくくられます。

まとめ

ここまで「UI」カテゴリの全2本・15テーマを見てきました。最後に、各部（＝元のまとめ動画）の要点を、個別テーマごとに振り返っておきます。

第1部　分かりやすさと様式性・文字の大きさ・色分け・大事なものを大きく（#01〜#08）

第2部　高速に選ぶ・必ず飛ばせる・ボタン設定・ヘルプ・言語不問・HUD（#09〜#15）

ボリュームはありますが、気になった部から読み返してもらえればと思います。関連するカテゴリもあわせてどうぞ。