スマートフォン向けのサイトデザインでとっても大切な5つのポイント

Post on:2012年1月23日

有意義なナビゲーション

スマートフォンにおいて、スクリーン上のクリック（つまりタップ）無しに使うことは考えられません。ナビゲーションはユーザーが必要とすることが得られるように、明確な進路を与えるべきです。

ナビゲーションで重要なことは二つ。
まず、ナビゲーションが視覚的にタップ可能に見えるか確認してください。見た目をボタンやリストのようにしたり、矢印などを加えてもよいでしょう。ただし、スマートフォンではtitleのテキストをホバーで表示したり、ホバー時のエフェクトを適用できないので、それ無しでも押すことができるように見えることが大切なポイントです。

もう一つの重要なことは、ラベルです。
「戻る」というラベルがあれば、ユーザーは戻ることを期待します。これは当たり前のようですが、ユーザーにとってラベルが何を意味するか分かることを確認してください。
ラベルを有意義にするポイントは、シンプルにすることです。しかしより少ないナビゲーションが容易になることを意味するものではありません。例えば「プロフィール」と「パスワード」のナビゲーションを「設定」に内包するのは必ずしもシンプルで分かりやすいということではない、ということです。
ボタンの意味を伝えるのに、アイコンを使用するのも非常に効果的です。これはテキストを読む時間より素早くユーザーにその意味を伝えることもできます。十分に作り上げられたアイコンは、より素晴らしいユーザエクスペリエンスを提供するでしょう。
そして、このアイコンと明確なラベルを組み合わせると、より多くの意味を作りだし、ユーザーに明確なナビゲーションを与えることができます。

コンテンツ

Yasalam

スマートフォン向けのサイトでもウェブサイトと同様に、コンテンツにフォーカスを合わせる必要があります。これは重要ではないコンテンツを取り除き、フォーカスを合わせるということです。

スマートフォンの画面はデスクトップの画面より小さいため、大量のテキストがあると理解するのが非常に困難になります。これはパラグラフをより小さくまとめたり、リストを使用してより簡単に読みやすくすることができるでしょう。
また、デザインエレメントを使用してテキストエリアを分断させるのも効果的です。

視覚エレメントでテキストエレメントを分断

ヘッダテキストと並んで、タイトルアイコンを使う。
日付をリストする代わりに、日付をグラフィックにする。
重要な情報に小さいインフォーメーショングラフィックを使う。
テキストや見出しはサイズを変えるのではなく、カラーを変える。
異なるエレメントを定義するために、明るい背景カラーを使う。
重要なエリアを強調するために、ハイライトを使う。
ホワイトスペース（余白）で、テキストエリアを強調したり分断する。

あなたのユーザーはあなたのすべてのコンテンツを欲します。あなたは視覚のメカニズムを利用してアクセスがより容易になるよう、コンテンツを与えてください。

[ad#ad-2]

フィードバック

Ride Snowboards

ユーザーフィードバックはスマートフォン向けのサイトでは非常に重要です。また、ホバーやアニメーションといったブラウザフィードバックはスマートフォンのよなデバイスでは有効ではありません。スマートフォンでは機器に触らないと、それは単にそこに置かれているだけのものです。触れられているときに、明確なフィードバックを提供することは非常に重要なポイントとなります。

視覚のフィードバックでユーザーにアクションを伝達

セレクトあるいはアクティブな時に、そのエリアをハイライトします。
エレメントに触れる時に、フェードインやアウトを使用します。
触れた時に、それに反応する繊細なボーダーカラーやボタンにグラデーションを使用します。
ステータスの変化をあらわすために、ボタンやテキストには異なるカラーを使用します。
ドロップダウンが選択させる時に、回転するアローを使用します。
ステータスが変わる時に、スライドやフェードのアニメーションを使用します。

明確なブランディング

Dr Pepper

どんなデザインででも最も重要なエレメントの一つがブランディングです。スマートフォンのデバイスには常にブランドを忘れることができません -会社のロゴのためのスペースがあります。

ブランディングには会社やアプリケーションなどたくさんのスタイルがありますが、ブランドを構成する明確な方法は二つです。
その二つの鍵となるデザインエレメントは、ロゴとカラースキームです。特にスマートフォン向けのサイトでは、この二つのエレメントが存在していることを確認することは大切です。

もう一つ小さいことですが、重要なポイントがあります。
スマートフォンのブラウザでは、ファビコンを含んだタイトルバーやURLバーが無いということです。このことは、デスクトップのブラウザに比べてユーザーがどこにいるか（またはどこにいたか）ということがひと目で分かる便利さを欠くことになります。
ファビコンを含んだタイトルバーやURLバーがないため、スマートフォン向けのデザインではブランディングはよりいっそう重要だということです。

たくさんのスペース

Burton Snowboards

小さいサイズの画面にだまされないでください、スマートフォン向けのデザインでもホワイトスペース（余白）は必要とします。ホワイトスペースはあらゆるデザインにおいて、デザインのキーエレメントとなります。
スマートフォン向けのデザインでは扱うべきスペースはそれほど多くないため、ホワイトスペースがデスクトップのデザインよりいっそう重大になります。効果的で有用で読みやすいために、ボタンやナビゲーションやアイコンやテキストなどのデザインは、すべてのエレメントがはっきりと離れた状態で、適切に設計する必要があります。

より良いユーザエクスペリエンスを与えるために、ホワイトスペースのためにコンテンツを制限する必要はありません。読みやすくするために、単に文字のサイズを大きくすることを意味しません。
スマートフォン向けのサイトでは、デスクトップ向けのサイトより多くのUI設計を必要とします。より効果的なユーザエクスペリエンスを設計するために、ホワイトスペースは大きな役割を担うでしょう。