Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Upcoming SlideShare
心地よいUIの温度 - 言葉と気遣いで高めるUI -
Next
Download to read offline and view in fullscreen.

Share

企画が考えるスマホUIデザイン

Download to read offline

企画が考えるスマホUIデザイン

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

    Aug. 9, 2020
  • YOXOLAAOGIRI

    May. 4, 2020
  • ssuser70602c

    Nov. 25, 2019
  • MihoAkagawa

    Nov. 7, 2019
  • NobYamamoto

    Sep. 24, 2019
  • ssuser41f6f4

    Jun. 16, 2019
  • keiyoshida4

    Feb. 24, 2019
  • kiryoku0

    Nov. 30, 2018
  • rinaonuki1

    Oct. 7, 2018
  • KojiroMiyamoto3

    May. 14, 2018
  • HosokawaRyunosuke

    Apr. 4, 2018
  • MikiMedoruma

    Apr. 3, 2018
  • ssuser160795

    Feb. 16, 2018
  • ssusere3b7b7

    Feb. 13, 2018
  • kmikami

    Feb. 8, 2018
  • nyoshitaka

    Jan. 20, 2018
  • ssuser1f7f93

    Jan. 2, 2018
  • DesignApril

    Jan. 1, 2018
  • YusukeHanaki

    Dec. 24, 2017
  • AoiIwasaki

    Dec. 14, 2017

Views

Total views

366,408

On Slideshare

0

From embeds

0

Number of embeds

222,463

Actions

Downloads

1,288

Shares

0

Comments

0

Likes

398

×