1. Android information navi design
F’s Garage えふしん

2. はじめに
• 本書は、AndroidのUIデザインに慣れていないえふしんが、
Androidを触って感じたことを文章化しています。
• ターゲットユーザーは、いわゆるガラパロイドと言われる
スマホを使う、多くの日本人です。
• ここで書いてあることは正しいとかそういう意図ではなく、
広く反対意見が出てくることで、広い視野を得られるようになることを
期待して公開しています。
• 是非、はてブコメントや、@fshin2000までツイートでご連絡
いただけますと幸いです。
• UIの話なのに文字しか書いてなくてすいません。
あと、元データ、パワポですいません。

3. ナビゲーションメニューは上か下か
• iPhoneは、ナビゲーションバーが上、メニューバーがフッター部にある。
下にメニューを配置しても、iPhoneのハードウエアデザインとの
組み合わせで押しやすいようにできている。
• AndroidはWeb的なイメージ。
同一レベルのメニュー切り替えを、画面上段に置くことが推奨されている。
なお、Xperia arcは、下のハードキーを含めた面積が狭いため
下メニューはかなり下に表示されてしまい、ハードキーを押す時に
誤動作もしやすいです。
• モバゲーのメニューは下にあります。GREEはまんま専用ブラウザです。
GREEもモバゲーも、Webkit内蔵型のブラウザアプリのようです。
日本人の多くのユーザーが、GREEとモバゲーに慣れるという
ことは意識しておいてもよいかもしれません。
（どっちでも良いという可能性もあるし、下の方が主流になる可能性も）

4. 「戻る」「メニュー」ボタンの功罪
• Androidの「戻る」、「メニュー」ボタン、本資料ではXperiaにちなんで、ハードキーと
表現します。
⇒ハードキーはアプリの世界（ユーザー思考）の範囲外なので、
UIナビゲーションは、ハードキーに頼らず作りましょう
⇒インテントの統一感実現にはこのキーは必要です。
機能ありきのUI？ （いわゆる「エンジニア的」ＵＩ?）
⇒「戻る」は、アプリ間ナビゲーションの意味合いに近いかも。
画面内に戻る要素が提供されるに越したことはない。
⇒ユーザーが「戻る」をうっかり押しすぎた時に、アプリが
終了するのはダサい。
（モバゲーには、文字通り「戻る」ボタンがついています。）
⇒サーチキーは、Xperiaにはついてません。
⇒IMEおよび入力窓を閉じるのに戻るボタンは押したくない。

5. 長押し、右スライドは上級者向け機能
• 長押し、右スライドは、Windowsで言うコンテキストニュー
⇒長押しのメタファは、今のところ一般的ではない
⇒Windowsで言うコンテキストメニュー。ショートカット。
同一の機能が冗長な手段で用意されている
時に、上級者用途で提供するもの。
⇒長押しだけでしか操作できない機能は
「隠しメニュー」以外、提供すべきではない。
（同じ話はUIデザインガイドラインにも存在する）

6. ハードのメニューボタンに何を提供すべきか
• あまり使わないものを設置する。
いわゆる「設定」のシステム的な機能
• メニューに慣れたAndroid上級者へのナビゲーションを
置いておくと気が利く。
• ここにしかないメニューは使われない可能性が高い。
情報ナビゲーションについては、アプリケーション内にも
同様の機能への動線を設けておく。

7. 情報量vsボタン
• スマホは解像度が高くて大画面だがタッチインターフェース、
ガラケーのカーソルナビゲーション(CUI)よりも 実用面積は狭い。
• タッチインターフェースを意識しすぎて、全てのテキスト情報をボタンに
しようしようとすると、ボタンの実用面積に気を取られすぎて、情報量が
少なくなって、まるでらくらくホンのようなデザインになってしまう。
ガラケーサイトより作りにくいのが、この辺。
• 対策として、情報階層を設計する。
メニューボタンと、ハイパーリンク的なリンクオブジェクトとを分けて考える。
メニューボタンは、いわゆるメニュー切り替えと、アクションに紐付ける。
文章内のリンクなどは、ハイパーリンクのままにして、あえてボタンにしない。
そのかわり、できるだけクリックしやすくするよう努力する。
⇒参考：iPhoneの公式twitterクライアントの個別つぶやきページ

8. 文脈設計を意識しよう！
• ボタンと画面遷移をバラバラに考えてはいけない。ユーザーは、
何故その情報でクリックしたくなるのか？何故メニューとして分かれて
いるのか？を「文脈」の視点から考えること。
（この部分を画面単位で設計しない事、Webの動線設計と同じ）
• クリックして画面が切り替わると、思考は途切れる。
章の切り替え、節の切り替えであれば、ページ切り替えは
自然に許容される。
操作間でストーリーが繋がっているのであれば、できる限り
同一画面で操作させたい。
しかし、スマホのUIには、実用面積に限りがあるので、
アプリケーション設計における戦い所。

9. そのアイコンはクリックできますか？
• 何故、そのアイコンがユーザーに理解されると思えるのでしょうか？
押すまで機能がわからないボタンはボタンとは言いません。
• ピクトグラムが理解されるコンセンサスは、なんだかんだと
その国の常識や感覚に依存します。
• アイコンが画像だけではクリックできないものと考えましょう。
ユーザーが理解するのは、そこに書いてあるテキストラベルです。
• 例えばWindowsでアイコン画像だけでユーザー認知が
得られているアイコンは、「新規作成」「開く」「印刷」ボタン
ぐらいだと思います。

10. 参考情報
• ANDROiD PATTERNS
http://www.androidpatterns.com/
• Android UI ガイドライン（勝手翻訳版）
https://sites.google.com/a/techdoctranslator.co
m/jp/android/practices/ui_guidelines