企画が考えるスマホUIデザイン
Upcoming SlideShare
Loading in...5
×

Like this? Share it with your network

Share
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
No Downloads

Views

Total Views
113,119
On Slideshare
69,160
From Embeds
43,959
Number of Embeds
51

Actions

Shares
Downloads
1,067
Comments
1
Likes
270

Embeds 43,959

http://creive.me 34,073
http://ke-tai.org 5,660
http://bikkuri.me 1,963
http://developer.aiming-inc.com 1,115
http://cloud.feedly.com 228
http://w3q.jp 208
http://s.deeeki.com 119
https://twitter.com 109
http://bato-kan.blogspot.jp 90
http://parubou.blog.fc2.com 46
http://us-w1.rockmelt.com 42
http://bato-kan.blogspot.com 40
http://admin.blog.fc2.com 33
http://be-de.tumblr.com 32
https://fronter.com 25
http://nuevospowerpoints.blogspot.com 18
http://www.feedspot.com 16
http://rss.ameba.jp 14
http://fsol00071798v07 13
https://si0.twimg.com 11
http://www.pinterest.com 11
https://www.chatwork.com 10
https://twimg0-a.akamaihd.net 9
http://reader.aol.com 8
http://digg.com 6
https://www.google.co.jp 5
http://localhost 5
http://tweetedtimes.com 4
http://192.168.12.31 4
http://mundo-powerpoints.blogspot.com 4
http://paper.li 3
http://192.168.11.161 3
http://b.hatena.ne.jp 3
http://webcache.googleusercontent.com 3
http://local.eventdots.jp 3
http://www.google.co.jp 2
http://10.79.173.227 2
https://kcw.kddi.ne.jp 2
http://twitter.com 2
http://pinterest.com 2
http://hatebutv.com 2
http://slide.yoshiday.net 2
http://192.168.33.10 1
http://feedly.com 1
http://www.tumblr.com 1
http://www.linkedin.com 1
http://www.hanrss.com 1
http://www.inoreader.com 1
http://static.ak.facebook.com 1
https://www.google.nl 1

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

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