企画が考えるスマホUIデザイン
- 11. 企画者 UIデザイナ プログラマ
仕様書 デザイン 実装
- 12. 企画者 UIデザイナ プログラマ
仕様書 デザイン 実装
ここに「実装時のイメージ」を
精査するプロセスが欠落
- 15. 複雑なスマートフォン専用ゲームのUI要素例
ショップ アイテム強化
パラメータ スキル管理
チャット ガチャ スキルツリー
アイテム合成
オプション アイテム詳細 ギルド パーティー
掲示板 メール
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
ガチャ ミニマップ
* ワールドマップ エリア詳細
- 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点入ります
- 26. 冷静に振り返ってみる
全てのボタンが同じ大きさで Lv99 経験値 999
体力99/99 攻撃99/99
どれが重要か分からない ショップ 防御99/99
課金ガチャ 戦歴
無料ガチャ クエスト
進化合成
ヘルプ
カードのイラストが小さくて パワーアップ合成
仲間
練習対戦
欲しいもの
本気対戦
見た目が寂しい お宝 メダル屋
モンスター
カード図鑑
パラメータこの大きさ必要? アイテム図鑑
今、何の画面か分からない
- 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
よく使う項目をメインメニューへ ホーム クエスト 対戦 カード ガチャ
ガチャだけは別の文字色で目立たせる
- 43. “Zen Bound 2”
“木細工を縛っていく”変態っぽい
コンセプトの美しいゲーム
前作と同じフォントの使用ルールを維持
見出し=セリフ、その他=サンセリフ
というルールでゲーム全篇を統一
ルールはゲーム中の表示系でも同じ
- 44. “Puzzle & Dragon”
パズルをすることでモンスターを操り
ダンジョンを攻略するパズルRPG
見出し=ポップな文字(くろかね)
その他=普通のゴシック(ヒラギノ)
というルールでゲーム全篇を統一
見出し文字が読みづらいところも
- 45. “Magic & Monster”
モンスターを育ててバトルさせる、
スマホ用ソーシャルRPGゲーム
ポップでノリの良いUIデザインは
うまく世界観を表現
丸ゴシックをメインで使ってはいるが
フォントの使用方法が気まぐれ
- 54. 同じ書体でも使い方で全然違ってくる
THE
NORTH BMW
FENDI
FACE
貫禄の重み
スラリと優雅に ニュートラルな定番感
Microsoft
シャープに力強く
evian
Lufthansa
細身でナチュラル どっしり安心感
- 57. ゲーム世界は色にあふれている
属性例:火 / 風 / 木 / 水 / 雷 / 土
レアリティ例:N / R / SR / UR / L
ゲージ例:HP / MP / EXP
数値系例:回復値 / ダメージ値
スキル系:近物 / 遠物 / 近魔 / 遠魔
クラス系:ヒール / タンク / アタック
- 66. ホーム ホーム
自分 仲間 コレクション --- --- ---
[!]ホーム画面ではあなたについての情報を
管理することができます。
Lv 99 経験値 999
体力 99/99 攻撃 99/99 防御 99/99
ホーム クエスト 対戦 カード ガチャ ホーム クエスト 対戦 カード ガチャ
ベースデザイン フレームは維持
- 68. “Angry Birds”
世界的なヒット作もUI遷移的には問題が…
戻る/閉じるボタンが3種類ある上、
それぞれ位置が異なり、プレイヤーを混乱させる
全然違う位置に
左端に戻るボタン
若干右にズレた閉じるボタン ゲームに戻るボタン
- 69. “Cut the Rope”
“Angry Birds”と同じく物理演算パズルゲーム
「戻る」の位置が常に同じで迷いにくい
ステージセレクト コレクション オプションまでボタンが統一
- 86. 1 ゲームへの理解を深める
ゲームの構成を把握する 要素の重要度を決める
2 デザインのルールを決める
フォント選びを慎重に フォントは用途別に統一
見出し+本文の組み合わせ 色にルールを与える
1ゲームに3書体で十分 必要な色だけ目立たせる
装飾は最小限に
- 87. 3 スマホの特徴を考える
UIをフローで考える スマホに転送して確認する
フォーマットを崩さない 手書きでレイアウトする
遷移ボタンは同じ位置に ワンタップ操作が基本
サイズは等倍で考える 操作の手間より分かりやすさ
指の可動範囲を考慮する アスペクト比を考慮する