デザイナーの川原田です。主にWebデザイン・スマフォアプリのUIやインターフェイスのデザインをしています。スマートフォンが当たり前になってきた今、さぁスマフォ媒体の制作に入ろう！と思っても、何気なく使っていて、見落としがちなことってありますよね。コンテンツを制作する際に、ちょっと気をつけるだけでぐんとUXがあがる方法をご紹介したいと思います！
UIとは？
UIとは“ユーザーインターフェース”の略です。インターフェースのグラフィックのデザインのことです。
グラフィックはもちろんですが、アクションや画面遷移などもふまえた設計のことを言います。
コンテンツ作成時に重要な5W1H
コンテンツを制作する前に、ユーザーはそのコンテンツを、どのように使用するかを、5W1Hにそって具体的に想像してみましょう！
【5W1H】
・いつ（When）
・どこで（Where）
・誰が（Who）
・なにを（What）
・なぜ（Why）
・どうやって（How）
ユーザーの使用状況が導き出す”コト”
想像をしてみると、様々な使用状況が浮かび上がってくるかと思います。浮かび上がったことを更に掘り下げてみて、じゃあこんなふうかな？と思うことを、ユーザー目線で具体的に考えてみます。使用状況のストーリーを、脳内で再生させてみて下さい。
■いつ
■どこで
■だれが
■なにを
■なぜ
■どうやって
これらをふまえると、どんなUIであるべきかわかってきます。ユーザーの使用状況が洗い出されてきたら、これらのヒントをふまえて制作に入ってみましょう。
一つのボタンがコンテンツを変える
■ボタン
使用状況は片手？両手？どう持つのか？押し間違えのないボタン配置にしなくてはいけません。
・指の大きさを考え、サイズは最低88pxでつくる。（iPhone3Gの場合は44px）
・送信・削除ボタンが隣り合わせだと誤タップがある
・隣のボタンとの間隔にも注意
・手が大きい男性や、なにかをしながらの使用だと、片手でも押しやすいボタン配置にする
・押し間違いを避けたいボタンは、指から遠くに配置
例：ターゲットがオシャレな女性の場合→ネイルアートをしている可能性があるので、ボタンの高さは高めにとってあげる
ゲームや読み物系のコンテンツの場合は注意が必要です。思っているよりも手や指は大きく、隠れてしまう範囲が大きいです。
2009年にFirefoxで実験がありました。ブラウザをダウンロードするボタンを、紫・黄色・青・緑の4パターンで作り、どの色が一番ダウンロードされるか統計をとったようです。
すると、おもしろいことに、色が違うだけで断トツで緑のボタンが押されていました。
・緑(930,752DL)
・青 (256,344DL)
・紫 (255,894DL)
・橙 (255,811DL)
こういったデータがあり、現在もなお、緑のボタンが使われています。ボタンひとつにしても、とても重要だということが言えます。
説明がいらない画面設計
■画面について
目指すは、ヘルプがなくても使い方がわかる設計です。
・文字をやめてピクトグラムを使用（こども、各国のローカライズにも◎）
・リンクは青で表示する（スマフォサイト）
・ヘッダーのロゴをタップするとHomeに戻る
・次の動作を予測させるデザイン
全体的にユニバーサルデザインとも密接に関係があるのがわかりますね。ユニバーサルデザインとは、車椅子の人や老人に特化、ではなく、“誰もが平等に使える“というデザインのことをさします。
ローカライズとは？
■ローカライズについて
ローカライズとは、言語だけの対応ではなく、メニュー表示やその言語特有の処理を追加することを言います。身近なところでいうと、英語には変換がないですが、日本語にはカタカナや漢字の変換があります。あるスマフォアプリを例にあげてみましょう。
上が英語版・下が日本語版にローカライズされたアプリです。見比べてみると、日本語版には、英語版にはないmixiボタンがありますね。また、日本語には変換があります。
多言語にするのがローカライズではありません。しっかりローカライズ対応をしないと、使い勝手が悪くなってしまいます。
当たり前を当たり前だと思ってはいけない
■まとめ
・感覚に反すると違和感が出て不満に思ってしまうので、
感覚の構造に素直に合わせて設計することが大切。
・ひとつひとつが、しっかりと計算されているので意識する。
当たり前のことを、当たり前だと思ってはいけない。
・必要な要素を「目的」に合わせて最良な方法で配置、装飾すること。
いかがでしたでしょうか？スマフォ媒体のコンテンツを制作する際、ほんのちょっと意識するだけで、見え方が変わったり、使い勝手が良くなるかもしれません。
SlideShare → 当たり前を当たり前だと思ってはいけない！スマートフォンUIデザイン
