当たり前を当たり前だと思ってはいけない！スマートフォンUIデザイン

by admin
in Design · Mobile · UX
— 2012/12/13

デザイナーの川原田です。主に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ボタンがありますね。また、日本語には変換があります。

多言語にするのがローカライズではありません。しっかりローカライズ対応をしないと、使い勝手が悪くなってしまいます。