こちら - Eri Nakamura Portfolio

UI / UX
デザインクラス
中世カードゲーム画面作成（ブラッシュアップ）
※こちらの課題は、1 度提出した後に企業のデザイン部門の方からフィードバックをいただき、その内容
を踏まえた上でブラッシュアップをしました。本資料は、修正後の変更点等についての説明資料です。
（一番最後のページに、初回提出時の各画面を掲載しております。）
2014/07/02 提出
中村英里
UI/UX とは？
■ UI/UX はなぜ必要？
デザインを見直すにあたり、「なぜ UI/UX を踏まえてデザインをする必要があるのか？」を自分の
中に落としこんだ上で制作を進めたかったので、まずは改めて UI/UX について考えました。
・説明がなくても、感覚的に操作できる。
・ユーザーの行動を、言葉を使わずに誘導する。
（かつ、制作者側の意図をユーザーに感じさせない。「自分は自発的にこのボタンを押している」
と思ってもらえるように、自然に誘導する。）「次に何をすればいい？」というユーザーのストレスをなくすことで、ゲームの
世界観に入り込めるようにするために、UI/UX を踏まえた画面設計をする必要がある。
■ 上記を踏まえての主な変更点
・文字のみで表現するのではなく、アイコン画像を使い、ぱっと見たときにわかりやすく。
・画面の中にある情報の優先度を考え、ボタンの大きさや色で優先順位が高いものがより
目立つよう意識。
・ゲームの世界観に入り込めるよう、ビジュアル部分（画面上半分）を広く取る。
（スクロールあり想定に変更）
※前回提出時点では、スクロールなしの一画面（ネイティブアプリ想定）で制作しましたが、
改めて見た時に詰まった印象があったので、スクロールありの Web アプリ想定で制作する
ことにしました。・中世の雰囲気を出すために、全体の色味をくすんだトーンに統一し、飾り彫り風のモチーフ
（
びた金属のような質感）を画面内で使用。
■ ターゲット想定（ユーザーを想定した上で、ユーザビリティを再考）
・20 代後半（30 歳寄り）∼ 30 代全般
・男性：女性 = 7：3
・リアルな絵柄（世界観に入り込める）
・ストーリー性がある
単に戦ってレベルアップするのではなく、中世という設定や人物相関なども含めた上で
作りこまれたストーリーがあり、ゲームを進めていくにつれてストーリーが進行していく。
（侵略者によって奪われた領地を探索し、道中で出会った敵と戦って領地を奪い返していく、
というような設定をイメージしています）
タイトル画面
【全画面】
【ファーストビュー】
・中世の雰囲気を出すために、飾り彫り風の
モチーフを全体に配置。
・ボタンの中にイラスト（メニューバーと
同じもの）を入れました。
マイページ
【全画面】
１
１
◆ボタンの大きさ・デザイン
・マイページ内で最も優先度が高い（もっとも遊ばせたい）のは
「探索（クエスト）」なので、そこが一番目立つようにデザイン、
配置を考えました。
・ボタンの中にイラスト
ぱっと見たときに何ができるのかをわかりやすく表現しました。
（メニューバーと同じモチーフ使用）
・お知らせボタン
他のボタンとデザイン統一。
３
２
◆メニューバー
・シンプルなデザイン
画面の中での優先順位を考えた時に、他の要素より目立たせる
必要はないと考えた。前回のデザインでは目立ちすぎてしまう
ため、シンプルな黒背景に変更。
２
・ボタンを大きく
男性が主なターゲットなので、ボタンの個数を 6→5
に減らし、押しやすく。（減らした「メニュー」の
【ファーストビュー】
ボタンは右上へ）
・イラスト + 文字
文字を読む前にぱっと見たときに何ができるのかが
イメージしやすいように。
３
◆バナー画像を小さく
課金につながるのでアピールしたい部分ではあるが、
ユーザーがマイページで一番やりたいことは
「ゲームを進めること」
→探索、コロシアムなど画面上側がより目立つように。
※補足：左上のステータスエリア
タップすると詳細が見られるということを示すために「詳細▼」
という部分はありますが、枠の中なら「詳細▼」以外の部分でも
タップすればステータスの詳細ウインドウが出る仕様になっています。
クエスト画面
【全画面】
１
１
◆戦利品エリア
・「戦利品」の文字を削除。ゲットしたものが順次右に表示される
ので、記載不要と判断しました。
・表示されるアイテム画像を大きくしました。
（以前のサイズだと実機で見た時にカードの柄等わかり
にくかったため。
２
◆探索ボタンには装飾なし
２
マイページ探索ボタンには、周りに装飾を施していましたが、
３
クエスト画面では装飾をなしにしています。
これには下記 2 点の意図があります。
1. 画面の中での優先度
クエスト画面でもっとも協調したいのは、戦利品の欄やアイテム
３
ゲットの時の画像（画面上半分）なので、探索ボタンをそこまで
目立たせる必要はないと判断しました。
（とはいえ統一感を持たせるために、装飾以外のデザインは継承。）
2. デザイン面での考慮
【ファーストビュー】
クエストページは探索するステージによって背景が異なったり、
道中でゲットしたアイテムがアニメーションで出てきたりと、
画面上半分のビジュアル部分にデザインの幅があるので、
探索ボタンには装飾を付けず、すっきりさせた方がいいと
考えました。
３
◆ 画像リンク・テキストリンクのルール付け
・白い半透明の背景（※）の上にあるリンク：テキストリンク
・画面の中のリンク：ボタン（画像リンク）
※枠で囲まれているものも、囲まれていないものも両方とも、白い
半透明の背景の場合はテキストリンクです。
◆リンクの位置
「デッキ再編成」とメニューバーの位置が近すぎたので、
押しやすいよう位置を離しました。
バトル画面
【全画面】
１
◆ボタンのデザイン
・ボタンの中に画像を入れ、ぱっと見たときにそのボタンで何が
できるかがわかりやすいように。
・画面上のカード（自分の手持ちカード）のサイズ
以前のサイズだと実機で見た時にカードの絵柄がわかりにくかった
ため、サイズを大きくしました。
１
・ボタンの優先順位を考え、デザインに反映しました。
「攻撃」を 1 番に、「回復」「援護依頼」を 2 番目に目立たせ、
２
目立たせる必要のない「SKIP（バトルアニメーションの SKIP ボタン）」
「退避」は、ボタンのテイストは統一しつつも、上記 3 つのボタンより
目立たないようなデザインにしました。
２
２
◆ リンクのルールづけ
クエスト画面同様、下記ルールにてテキストリンク・画像リンクの
区別をしました。
（以前は「退避」と「SKIP」をテキストリンクにしていましたが、
【ファーストビュー】
修正しました。）
・白い半透明の背景（※）の上にあるリンク：テキストリンク
・画面の中のリンク：ボタン（画像リンク）
※枠で囲まれているものも、囲まれていないものも両方とも、白い
半透明の背景の場合はテキストリンクです。
※こちらのバトル画面で TIPS が表示されている欄については、
体力が不足してきた場合にはクエスト画面同様、回復アイテム
への誘導リンク（テキストリンク）が表示されます。
参考：初回作成時の画面
※初回作成時は、タイトル画面以外はスクロールなしの 1 画面想定にて作成。

Download Report