竜崎薫ちゃん

（9歳 / 多分小学3年生）に

説明する為の

ユーザーが

気持ちよく遊べる

メニューを作ろう！

の話

竜崎薫ちゃん

（9歳 / 多分小学3年生）に

説明する為の

ユーザーが

気持ちよく遊べる

メニューを作ろう！

の話

■2016年7月5日作成

■本文に出てくるゲーム画面は

自身でキャプチャー、

スクリーンショットを保存したものです。

問題がありましたら取り下げます。

■もくじ

はじめに

気づいた点と直しの案■ボタンのアイコンの話■ボタンの配置の話■ボタンの中身のえらびかたの話■細かい話

実際のくらべっこ■シンデレラガールズ■ミリオンライブ■ガールフレンド（仮）■グランブルーファンタジー■SAOエンドワールド■ワンピースアドベンチャーログ

やりなおしの例

某ドラマチックアイドル育成カードゲームのメニューが

扱いずらくて気持ちよく遊べないので、

どこを直すと気持ちよく遊べるかを考えてみたよ！

直すポイントを探すために他のゲームとくらべっこしたけど、

まずは気づいた点と直しの案を

そのあとで実際のくらべっこを説明するよ！

はじめに

気づいた点と直しの案■ボタンのアイコンの話

　　文字がアイコンにかかっている

　　→せっかくのアイコンが見えない、わからない

　　　→アイコンに文字をかけない

　　アイコンの色がうすい

　　→アイコンをひとめ見ただけで認識する事が出来ない

　　　→アイコンの色を変える、 ふちを付ける

気づいた点と直しの案■ボタンの配置の話

　　スマホの画面に収まっていない

　　→スクロールしないと全部が見れない

　　　　スクロールなしで全部が見れるようにする

☟スマホの画面でみえる範囲

☜実際に存在する画面メニュー全部

気づいた点と直しの案■ボタンの中身のえらびかたの話

　　ヘッダーメニューとかぶってる内容がある

　　→同じ内容が二つあるのはむだ

　　　→ポップアップメニューから消す

　　ボタンの数が多い

　　→直接アクセスできなくていい内容もある

　　　→ポップアップメニューから消す

気づいた点と直しの案■細かい話

　　フォントのサイズをそろえたい

　　開発中はこの縦に長い画面で開発、

　　デバッグチェックをするから、使いずらいって

　　きづかないのかなーって

実際のくらべっこ■シンデレラガールズ

　メニューがスマホ画面に収まっている

　若干はみ出ているものは頻繁にアクセスしない内容

　アイコンが大きくて視覚的にわかりやすい

　ミニキャラコンテンツを別アイコンで行き来するようにしておくことでメニューが増えるのを回避している

実際のくらべっこ■ミリオンライブ

　メニューは若干はみ出ている

　バナーを除けばどうにか収まる

　はみ出る内容が人によっては頻度が高いものがありストレスになりかねない

　アイコンに文字がかかっているものの、色合いなどもありそこそこ見やすい

　正直に言うとSideMの元ですよね

実際のくらべっこ■グランブルーファンタジー

　メニューは画面内で収まっている

　よくアクセスするものを上に、 かつ形を変えてわかりやすくしてある

　細かなメニューはアクセスが多いもの、わかりやすい名称など吟味され整理されている

　アイコンが無くても数が少ない、 形が違うため使いやすい

　頻度が少ない機能はそれぞれから改めてアクセスするようになっている

実際のくらべっこ■ガールフレンド（仮）

　メニューはだいたい画面内で収まっている

　独特な色使いを守っている

　ゲージ表示もあり優しさがある

　アイコンと文字が被らず見やすい

　ただ、 大前提として、

「クエスト」「ガチャ」「育成」

が独特の言い回しであり、

その他もこのゲーム独特の名称であるため、

何が何かわからない

　かろうじてアイコンで判断できる

実際のくらべっこ■SAOエンドワールド

　メニューは画面内で収まっている

　アイコンの意味が分かりにくい

　メニューの名称の方がわかりやすい

　段ごとに色分けしてあるので視覚判別はしやすい

　そもそもやることが多いゲームなんだなっていうことはわかる

実際のくらべっこ■ワンピースアドベンチャーログ

　バナーが無ければメニューは画面内で収まっている

　カラフルでわかりやすいアイコン　ただしカラフルってことは容量重いですよね

　メニューがしっかり区分されていつつ、アイコンがわかりやすいので、何ができるか、何が関連があ

るのか想像がつく

やりなおしの例メニューの配置入れ替えだけです。

これでだいたい1画面に収まります。

色はひとまずで見やすい色に。

本当はアイコンと文字が被らないようにしたかったけど

時間切れなので。

おわりに

制作日　2016年 7月5日 （火）

制作時間

　調査 1時間半

　スクリーンショット回収1時間弱

　まとめ＆ラフスケッチ3時間

　illustrator 配置作業 1時間強

　やり直しサンプル作成　20分