企画が考えるスマホ鲍滨デザイン
- 1. 企画が考える スマホUIのデザイン 水島 克?2012.2.28 Aiming Inc.
- 2. 昨今のゲームUIの傾向 AAAタイトルのUIの２つの方向性 １ ほとんど見えないほどシンプル化 ２ 完全に３D空間にUIを埋め込んでしまう 世界観にUIを溶け込ませる工夫
- 3. “Dead Space” キャラの背中にライフゲージを 埋め込むびっくりアイデア ほとんどのUIを３D空間の中に構築 “Fall Out 3” プレイヤーキャラの腕についた デバイス（Pip-Boy）をそのままUI化 それ以外のUIは極力シンプルにまとめる
- 4. スマートフォンUIの傾向 初期はPCやコンソールゲームのUIを 移し替えたUIがほとんどで使いにくい 最近はスマートフォンに最適化されてきた 使いやすさを優先してiOSの標準UIを 模したものが増加
- 5. “Order&Chaos” “WoW”を模したUIで、マップや キャラの顔絵など、てんこ盛り PCゲームの要素を無理に詰め込んでいて使いにくい “Infinity Blade Cross” メニューバーなどのレイアウトは iOS標準UIを模している システマティックなUIと ゲームの世界観を混ぜたスタイル
- 8. 本日のメニュー Chapter 1 ゲームへの理解を深める Chapter 2 デザインのルールを決める Chapter 3 スマホの特徴を考える
- 10. 一貫性の無いUIの原因 ワークフローの問題 企画者は機能だけを考えて仕様書を書く しかも各企画者が独自のルールで書く UIデザイナは仕様書のレイアウトが正しい ものとしてデザインを進める
- 11. 企画者 UIデザイナ プログラマ 仕様書??デザイン??実装
- 12. 企画者 UIデザイナ プログラマ 仕様書??デザイン??実装 ここに「実装時のイメージ」を 精査するプロセスが欠落
- 14. 1.1 ゲームの構成を 把握しよう
- 15. 复雑なスマートフォン専用ゲームの鲍滨要素例 ショップ アイテム強化 パラメータ スキル管理 チャット ガチャ スキルツリー アイテム合成 オプション アイテム詳細 ギルド パーティー 掲示板 メール PvP戦歴 クエスト詳細 スキル詳細 フレンドリスト レイド オークション ステータスゲージ クエスト インベントリ 戦闘コマンド クエストボード キャラ管理 エリア詳細 ミニマップ ワールドマップ
- 17. カテゴリを整理して重要/复雑な项目を定める ショップ アイテム強化 パラメータ パーティー クエストボード インベントリ スキル管理 メール アイテム合成 スキルツリー フレンドリスト オークション アイテム詳細 スキル詳細 チャット クエスト 掲示板 クエスト詳細 レイド キャラ管理 ステータスゲージ PvP戦歴 ギルド オプション 戦闘コマンド ガチャ ミニマップ ワールドマップ エリア詳細
- 18. カテゴリを整理して重要/复雑な项目を定める NPC UI Item Character Community ショップ アイテム強化 パラメータ パーティー クエストボード インベントリ スキル管理 メール アイテム合成 スキルツリー フレンドリスト オークション アイテム詳細 スキル詳細 チャット クエスト 掲示板 System Basic UI クエスト詳細 レイド キャラ管理 ステータスゲージ PvP戦歴 ギルド オプション 戦闘コマンド Map ガチャ ミニマップ ワールドマップ エリア詳細
- 19. カテゴリを整理して重要/复雑な项目を定める NPC UI Item Character Community * ショップ アイテム強化 * パラメータ パーティー クエストボード * インベントリ スキル管理 メール オークション アイテム合成 スキルツリー * フレンドリスト アイテム詳細 スキル詳細 チャット クエスト 掲示板 System Basic UI * * クエスト詳細 レイド キャラ管理 ステータスゲージ PvP戦歴 ギルド オプション 戦闘コマンド Map ガチャ ミニマップ * ワールドマップ エリア詳細
- 21. 1.2 要素の重要度を 决めよう
- 22. あるソーシャルゲームの鲍滨仕様书 ホーム画面仕様 ■パラメータ類 Lv99 経験値 999 体力99/99 攻撃99/99 防御99/99 ■ボタン類 ショップ 戦歴 課金ガチャ クエスト 無料ガチャ ヘルプ 進化合成 仲間 パワーアップ合成 欲しいもの 練習対戦 メダル屋 本気対戦 アバターのイラスト お宝 モンスター ■その他 カード図鑑 ※リーダーカードのイラスト アイテム図鑑 ?１点入ります
- 23. そのままレイアウトしてみる ホーム画面仕様 Lv99 経験値 999 ■パラメータ類 体力99/99 攻撃99/99 Lv99 経験値 999 体力99/99 攻撃99/99 防御99/99 ショップ 防御99/99 課金ガチャ 戦歴 ■ボタン類 無料ガチャ クエスト ショップ 戦歴 進化合成 課金ガチャ クエスト ヘルプ パワーアップ合成 無料ガチャ ヘルプ 仲間 練習対戦 進化合成 仲間 欲しいもの パワーアップ合成 欲しいもの 本気対戦 練習対戦 メダル屋 お宝 メダル屋 本気対戦 アバターのイラスト モンスター お宝 カード図鑑 モンスター ■その他 アイテム図鑑 カード図鑑 ※リーダーカードのイラスト アイテム図鑑 ?１点入ります
- 26. 冷静に振り返ってみる 全てのボタンが同じ大きさで Lv99 経験値 999 体力99/99 攻撃99/99 どれが重要か分からない ショップ 防御99/99 課金ガチャ 戦歴 無料ガチャ クエスト 進化合成 ヘルプ カードのイラストが小さくて パワーアップ合成 仲間 練習対戦 欲しいもの 本気対戦 見た目が寂しい お宝 メダル屋 モンスター カード図鑑 パラメータこの大きさ必要？ アイテム図鑑 今、何の画面か分からない
- 27. 要素の重要度を把握する 要素の取捨選択をするためには、 ゲームの企画内容を知る必要がある 基本的に何をするゲームなのか？ プレイヤーは何に価値を置くのか？ どういう情报が最も重要なのか？
- 28. Lv99 経験値 999 体力99/99 攻撃99/99 ショップ 防御99/99 課金ガチャ 戦歴 無料ガチャ クエスト 進化合成 ヘルプ パワーアップ合成 仲間 練習対戦 欲しいもの 本気対戦 お宝 メダル屋 モンスター カード図鑑 アイテム図鑑 仕様書どおり
- 29. ホーム Lv99 経験値 999 自分 仲間 コレクション 体力99/99 攻撃99/99 [！］ホーム画面ではあなたについての情報を 管理することができます。 ショップ 防御99/99 課金ガチャ 戦歴 無料ガチャ クエスト 進化合成 ヘルプ パワーアップ合成 仲間 練習対戦 欲しいもの 本気対戦 お宝 メダル屋 Lv 99?経験値 ????999 モンスター 体力 99/99 攻撃 99/99 防御 99/99 カード図鑑 アイテム図鑑 ホーム クエスト 対戦 カード ガチャ 仕様書どおり 考えてみた
- 30. 考えてレイアウトしてみる ホーム 自分 仲間 コレクション 合成して強いカードを [！］ホーム画面ではあなたについての情報を 管理することができます。 育てるゲーム 日々のクエストでカード入手 Lv 99?経験値 ????999 体力 99/99 攻撃 99/99 防御 99/99 対戦では合成費用を稼ぐ ホーム クエスト 対戦 カード ガチャ ガチャで課金している
- 31. 考えてレイアウトしてみる 選択中のカテゴリの見出し ホーム 自分 仲間 コレクション [！］ホーム画面ではあなたについての情報を 重要度が高い順にタブを並べる 管理することができます。 ヘルプ代わりの説明文 リーダーカードは大きく見やすく！ Lv 99?経験値 ????999 パラメータはスッキリまとめる 体力 99/99 攻撃 99/99 防御 99/99 よく使う項目をメインメニューへ ホーム クエスト 対戦 カード ガチャ ガチャだけは別の文字色で目立たせる
- 32. 重要度の把握ができれば レイアウトに優先度のメリハリが付けられる よく使う機能は使いやすい場所に配置できる 使いやすいデザインのために UIデザイナーと企画者が議論し、 ゲームへの理解を深めることが必須
- 35. 楽天市場で見るデザイン 楽天のサイトは現代版スーパーのチラシ 消費者の目に飛び込ませるためのデザイン 色使いを派手に フォントを多様に とにかくデカく
- 38. 強烈に目立たせて商品の印象を焼き付ける ?→スーパーのチラシのデザイン その商品にまつわる世界観を消費者に提示 ?→ブランディングのデザイン ゲームUIは後者に近い 世界観を表現するにはルールが必要
- 39. 2.1 フォント選びを 慎重に
- 41. フォントの種類 セリフ体とサンセリフ体 / 明朝体とゴシック体 ウロコ セリフ
- 43. “Zen Bound 2” “木細工を縛っていく”変態っぽい コンセプトの美しいゲーム 前作と同じフォントの使用ルールを維持 見出し＝セリフ、その他＝サンセリフ というルールでゲーム全篇を統一 ルールはゲーム中の表示系でも同じ
- 44. “Puzzle & Dragon” パズルをすることでモンスターを操り ダンジョンを攻略するパズルRPG 見出し＝ポップな文字（くろかね） その他＝普通のゴシック（ヒラギノ） というルールでゲーム全篇を統一 見出し文字が読みづらいところも
- 45. “Magic & Monster” モンスターを育ててバトルさせる、 スマホ用ソーシャルRPGゲーム ポップでノリの良いUIデザインは うまく世界観を表現 丸ゴシックをメインで使ってはいるが フォントの使用方法が気まぐれ
- 49. 2.2 フォント使いを 慎重に
- 50. 読みやすく組む フォントの装飾が多すぎることで、 ゲーム体験が阻害される場合がある ドロップシャドウ/袋文字/グラデーション などの装飾は最小限にとどめる ３行以上の長文には装飾しない
- 51. 用途によって統一する 同じ用途の文字は、同一のフォント、同じ色、 同じ大きさ、同じ装飾、同じ寄せに統一する 同階層のメニュー名の統一 UI名の見出しの統一 ダメージ値などの数値表示の統一
- 52. 長体/平体は一貫させる 場面によって長体/平体が入り交じらないように コンデンス体、エクステンド体を使うのも良い 和文を長体/平体にするときは 倍率を統一させる スペースに合わせて長体を X かけるとチープに見える O
- 53. 字間/行間を調整する 字間や行間の調整にこだわってみる 字間をあける ?ゆったりとエレガントなイメージ 字間を詰める ?フォーマルで実務的なイメージ 微調整でフォントの表情が変わる
- 54. 同じ书体でも使い方で全然违ってくる THE NORTH BMW FENDI FACE 貫禄の重み スラリと優雅に ニュートラルな定番感 Microsoft シャープに力強く evian Lufthansa 細身でナチュラル どっしり安心感
- 55. 2.3 機能から考える 色づかい
- 56. 色にルールを与える 配色は内容を識別させるための重要な手段 システム的に意味のある要素に色を使う DELETEは赤/CANCELは黒などの用法 属性/レアリティ/敵味方の区分など ボタン階層：メイン/サブカテゴリなど
- 57. ゲーム世界は色にあふれている 属性例：火 / 風 / 木 / 水 / 雷 / 土 レアリティ例：Ｎ / Ｒ / ＳＲ / ＵＲ / L ゲージ例：HP / MP / EXP 数値系例：回復値 / ダメージ値 スキル系：近物 / 遠物 / 近魔 / 遠魔 クラス系：ヒール / タンク / アタック
- 58. 無計画にフレームやボタンに色を使うと プレイヤーが混乱する 押せない場所や装飾に強い色を使わない 基本的には彩度の低い色を色数少なく使う ゲームプレイに本当に必要な 色だけを目立たせる
- 61. + = ?
- 63. なぜならスマートフォンのUIは プレイヤーと物理的に直接つながる 重要な要素 ゲーム体験全体を支配するパート
- 64. 3.1 UIをフローで 考える
- 65. マージンとフレーム設計 個別のデザインはよくても、流れで見ると 統一感に欠ける場合が多い マージンやフレームが統一されているだけで ある程度の統一性が担保される フレームのフォーマットを崩さない
- 66. ホーム ホーム 自分 仲間 コレクション --- --- --- [！］ホーム画面ではあなたについての情報を 管理することができます。 Lv 99?経験値 ????999 体力 99/99 攻撃 99/99 防御 99/99 ホーム クエスト 対戦 カード ガチャ ホーム クエスト 対戦 カード ガチャ ベースデザイン フレームは維持
- 67. ボタン配置のルール 遷移に関するボタンは最大限、共通化する 戻るボタンは必ず同じ位置に 閉じる/戻るボタンは１画面に１個だけ 同様の機能のボタンは同じ位置に
- 68. “Angry Birds” 世界的なヒット作もUI遷移的には問題が… 戻る/閉じるボタンが３種類ある上、 それぞれ位置が異なり、プレイヤーを混乱させる 全然違う位置に 左端に戻るボタン 若干右にズレた閉じるボタン ゲームに戻るボタン
- 69. “Cut the Rope” “Angry Birds”と同じく物理演算パズルゲーム 「戻る」の位置が常に同じで迷いにくい ステージセレクト コレクション オプションまでボタンが統一
- 70. アニメーションを考える UIのアニメーションで構造を暗示する 画面が左にスクロールして次の画面が登場 階層化していることを示す 小さいウィンドウが出て画面の半分を覆う 一時的なウィンドウであることを示す
- 71. 3.2 サイズは等倍で 考えよう
- 72. 解像度の割に小さい！ 触るボタンを大きく、見るだけの情報は小さく ボタンは想像以上に大きくないと押せない 見るだけの情報は意外に小さくても読める PCの画面とはかなりのギャップがある
- 73. 指の可動範囲を考虑する 親指が届きやすいところにUIを配置 両手持ち前提でも片側に操作を集中させる工夫を 片手で タテ持ちの 可動範囲 両手でヨコ持ちの稼働范囲
- 74. スマホに転送して確認 大きい画面でデザインするのと、 小さい実機でみるのと、かなりイメージが違う 実際の体験に近いイメージが得られる 画面遷移のイメージをつかみやすい 素材を実装する前に確認する習慣づけを
- 75. 手書きでレイアウト レイアウトは等倍手描きで考えるのがオススメ ツールでいじってると時間ばかりかかる 速く描けばチーム内でたくさん議論できる 等倍で描くと、画面上のサイズと実際の サイズのギャップが脳内補完できる
- 77. 3.3 操作をなるべく シンプルに
- 78. 操作はワンタップが基本 視覚的に分かりやすくタップだけで操作可能に スワイプ/ピンチイン/ドラッグなどの スマートフォン的操作はまだ直感的でない 一度操作を忘れると袋小路に 現時点ではスマートフォン的な操作は 補助的な機能という位置づけ
- 79. 一覧化 vs 階層化 各要素が１ページで一覧できるのが理想 １ページに収まらない場合に、 スクロール機能、階層化などを検討する 階層化は操作が増えるが、「戻る」などの ページ遷移が明確な場合は分かりやすい 操作の手間より「分かりやすさ」を重視
- 80. 対話型のUI ページ上のボタンが８個を越えるあたりで 対話型のUIを検討する 選択した対象に対し 実行可能な操作を提示する （iOSで言うAction Sheet） タップ数が増えるので連続する操作には不向き
- 81. 3.4 アスペクト比を 考虑する
- 82. 複数のアスペクト比 ポピュラーな端末のアスペクト比を考虑する iPhone4/4S＆iPod Touch（第４世代）：960 x 640 pixel（3:2） Xperia arc SO-01C：854 × 480 pixel（16:9） iPad＆iPad2：1024 × 768 pixel（4:3） GALAXY Tab SC-01C：1024 x 600 pixel（約16:10） メインとなる端末を選定する 単体の普及率で考えるとiPhone
- 83. 画面の一部を覆うUI ゲージ類やボタン類など ９個のアンカーポイントからの オフセット指定をしておく 左上のアンカー 比が変わっても左上を維持
- 84. 画面の全体を覆うUI フレームやメニューバーなど端まで覆うもの 縦か横の短いほうに合わせて全体を拡縮 左右が余っても違和感の少ないデザイン 全画面のUI 余り 余り
- 85. まとめ
- 86. 1 ゲームへの理解を深める ゲームの構成を把握する 要素の重要度を決める 2 デザインのルールを決める フォント選びを慎重に フォントは用途別に統一 見出し＋本文の組み合わせ 色にルールを与える １ゲームに３書体で十分 必要な色だけ目立たせる 装飾は最小限に
- 87. 3 スマホの特徴を考える UIをフローで考える スマホに転送して確認する フォーマットを崩さない 手書きでレイアウトする 遷移ボタンは同じ位置に ワンタップ操作が基本 サイズは等倍で考える 操作の手間より分かりやすさ 指の可動範囲を考虑する アスペクト比を考虑する