UXデザイン 03 わかりやすさと新鮮さ(Splatoon の事例)
更新日:
登壇: 橘磨理子 氏(任天堂 UI/UX デザイナー。Splatoon、Splatoon 2、ピクミン3 などを担当)
方針: 「UI としてわかりやすく、アートとして新鮮に」
新規タイトルとして、パッと見て Splatoon と分かる新鮮なデザインを求められた。一方で UI としてのストレスは与えない。
進め方
1. 言語化から始める
- 「イカ」「スポーツ」などキーワードから連想語を書き出す → それを形(シェイプ)に落とす
- 目標: 色がなくても「らしさ」が伝わる形
2. フォントを自作(通称「イカフォント」)
- スポーツブランドを意識した骨太さ + 液体のような有機的な線
- 可読性を確保するため修正を重ねた(漢字以外の必要な文字をすべて制作)
3. 配色の工夫
- 影色に黒を使わない(鮮やかさを損なわないため)
- 影は色相をずらした色: 黄色の影はオレンジ、ピンクの影は紫
- 目立たせたいアイコンは彩度を高く、それ以外は低く
4. 検証方法(すぐ真似できる)
- 画面を白黒(グレースケール)にして見やすさを確認 → 色に頼らず明暗で情報が伝わるか
- 目を細めて画面を見る → 一番目立つものが意図通りか
- 完成された既存のデザイン(マリオなど)と並べて比較 → 新規性と品質の指標になる
5. 周りと協力して優先度を調整
- 3D デザイナーと協力(背景をぼかす、ポスターを減らす等)
- バトル画面ではキャラクターと地面を目立たせる。シーンごとに情報の優先度を変える
6. 早めに共有
- ぼんやりしたイメージでも、方向性が合っているかを早めに共有する
成果
- 新規タイトルとして一定の認知を獲得、フォントが独立して知られるように、UI がグッズ化
Web 制作への翻訳
| Splatoon の工夫 | Web での実践 |
|---|---|
| 言語化 → 形 | ブランドのキーワード(「信頼」「軽快」など)を3〜5個決め、色・形・フォント・角丸・余白に落とす → デザイントークン |
| 色なしでもらしさ | ロゴや UI が白黒でも成立するか確認 |
| 影に黒を使わない | 影・暗い色は純粋な黒ではなく、ブランド色寄りの濃い色に。ダークモードの背景も真っ黒にしない |
| 白黒で検証 | ブラウザの開発者ツール(レンダリング → 色覚のエミュレーション)やスクリーンショットをグレースケールに |
| 目を細める | 一番目立つのが主要ボタン・見出しか確認([[デザインの4原則_01_近接・整列・反復・対比(詳細) |
| 既存デザインと比較 | 競合・参考サイトと並べて、品質と差別化を確認 |
| シーンごとに優先度 | ページの目的ごとに主役を1つ決める(一覧は検索、詳細は購入ボタン) |
| 早めに共有 | ラフ・ワイヤーの段階で見せる。AI でモックを素早く作って方向性を確認 |