スマホUIデザイン七の掟

ご無沙汰しております。関根です。

スマートフォンというモノが世に出て久しい昨今、今日も巷では星の数ほどのタッチパネルがグリグリシャカシャカされておりますが、一口にスマートデバイスと申しましても中身は様々、技術者泣かせの時代がやって参りました。まだまだ発展途上のスマートデバイスはこれから新しい要素が登場する度どんどん便利に、そして開発はどんどん複雑になっていく事でしょう。しかし、じゃあ私たちにとって一体どんなアプリが使い易いのかという問題は、デバイス側ではなく私たち人間側に依るところが大きいものですから、今後どんな新OSが登場した所でなかなか揺らぐものではありません。今回はそんなスマートデバイス開発における鉄板要素である「ユーザーインターフェースデザイン」について、中身の違いを問わず絶対に押さえておくべき七つの掟をピックアップしましたので、以下に紹介したいと思います。

■タッチ可能な領域を確保する事。

まず第一に、スマートデバイスで見る事を想定した画面では、ボタンやリンクなどのクリック領域を大きめに確保する必要があります。マウスポインターで操作するPCとは異なり、指の腹による操作ではクリックの精度に限界があるため、画面がゴミゴミしていると必ず誤操作を招くからです。
iOSヒューマンインターフェースガイドラインでは、タッチ操作を行う上で性別や年齢を問わず最も多くの人の指に対応できる大きさとして、44 × 44 point以上のサイズが推奨されていますので、この大きさを目安とすると良いでしょう。

※44pointはiPhone 3G以前の解像度における44ピクセルを表し、実寸では約7mmにあたります。

■ハイコントラストな配色である事。

スマートデバイスは屋外で操作する場合が非常に多いという点にも注意が必要です。日差しの強い屋外では、屋内と比べて画面が非常に見づらくなります。その対策として、画面の配色にコントラストの高いビビッドカラーを採用するケースが近年非常に増えています。色使いは画面の印象を大きく左右するので、意にそぐわない場合は無理にそうする必要はありませんが、重要度の高いオブジェクトにハイコントラストな色付けを行うと、屋内外を問わず安定した操作性を確保する事ができます。

■シンプルである事。

PCとスマートデバイスのUIを見比べるとまずわかるのが、スマートデバイスの方が絶対的に画面の要素数が少ないという事です。スマートデバイスの画面構成がシンプルでなければならない理由はいくつかありますが、スマートデバイスは基本的にモバイル端末であるという事自体が最も大きな理由の一つだと言えるでしょう。

PCでは多くの場合、デスクに構えて画面をしっかり直視しながら操作を行わなければならないのに対して、モバイル端末は食卓や寝室で、職場や学校で、あるいは電車の中などで、場所や時間を問わず『気軽に』利用できる事が最大の利点です。画面の要素というのは一つ置かれるだけで少なからずユーザーの注意力を摩耗させるものですから、より心理的負担の少ないシンプルな画面の方がデバイスの特徴に適しているのです。

■端末の持ち方を意識する事。

ボタンを配置するにあたって、使用頻度の高いボタンは押しやすい位置に配置することで操作がよりスムーズに、また使用頻度の低いボタンは敢えて押しづらい位置に配置すると誤操作を防止する事ができます。そんな「押したいボタンを押しやすく」というのはUIデザインにおいてとても基本的な考え方ですが、スマートフォンの場合は端末を右手で持つのか左手で持つのか、はたまた左手で持って右手の人差し指で操作するのかといった持ち方によって「押しやすい位置」が変化します。画面レイアウトを考える際には必ず実機で色々な持ち方を検証しながら最適な位置を探しましょう。と言っても持ち方や端末の大きさはそれぞれ違って当然なのでなかなか難しい部分ではありますが…。

その点、スマートフォンをいじっているとよく見かける画面の左右いっぱいに広がったリスト系のタップ領域は、左右どちらの手で持つ人にも一定の距離感を提供できるので、スマートフォンをターゲットとする場合は非常に重宝します。

■使用方法をアフォードする事。

デザインにおいてアフォーダンスというのは「モノに備わった行動の可能性」を意味する言葉です。例えば椅子を見た時同時に「座れる」だとか「上に乗れる」だとかそのモノに対して自分が実現可能なアクションも同時を連想してしまうような事を言います。つまりアフォーダンスに優れたデザインというのはパッと見ただけでなんとなく使い方がわかるというものなのですが、マウスポインターではなく自分の指で画面を直接こねくり回すスマートデバイスにおいては、PC以上にこのコンセプトが重要視されています。

現実の道具に見立てたコントロールやガイドアイコン等を利用して、誰でもマニュアル無しで直観的に操作できるアプリケーションを目指しましょう。

■コンテンツファーストである事。

UIのことばかり考えて肝心のコンテンツが埋もれてしまっては元も子もありません。大切なのはあくまでも中身である事を忘れないようにしましょう。

■技術を積み上げ、センスを研ぎ澄ます事。

「技術」と「センス」はまったくの別物です。その最も大きな違いは、技術は積み上げるものであり、センスはその反対に研ぎ澄ましていくものだという事です。何か芸術分野に携わった経験のある方には言わずもがなかもしれませんが、デザインとして最終的な完成度を決めるのは、いかに積み上げたかではなく、いかに研ぎ澄ましたかという所だったりします。つまりオブジェクトの位置を1ピクセル単位で調節したり、カラーコードのわずかな違いを追求したり、そういった他人が見ても気付かないような細かい部分にどれだけ命を掛けられるかが勝負を決めたりするのです。PC版のアプリケーションが小説ならスマートデバイス版は俳句や詩であり、限られた画面リソースにどんなオブジェクトを配置するかは非常にセンスが問われます。最後までこだわりを捨てず刀を研ぎ澄ますように研鑽された画面を作りましょう。