2017/6/7更新

モバイル向けWebデザインのための基本的なガイドライン

Interaction Design Foundation

Interaction Design Foundationはグローバルにデザインレベルの向上を目指す、デンマーク発の非営利団体です。

この記事はInteraction Design Foundationからの翻訳転載です。配信元または著者の許可を得て配信しています。

Designing for the Mobile Environment – Some Simple Guidelines

モバイル向けにデザインをするなら、そのデバイスの使われ方とデバイスそのものの特性に配慮する必要があります。モバイルデザインを始める際に役立つ原則はいくつかありますが、これらはユーザーリサーチに取って代わるものではありません。絶対に厳守するべきガイドラインではないのです。

モバイルデザインでは、たくさんのことを考慮する必要があります。その多くは標準的なUXデザインでも踏まえる事項ですが、同時にモバイルデザイン特有のものも考慮しなければなりません。モバイルで提供するサービスを既存のものと統合する予定ですか？　そうであれば、レスポンシブデザインとアダプティブデザインのどちらを採用しますか？

編注：レスポンシブデザインとは、デバイスに関係なく画面サイズに応じて表示を変えられるデザイン。一方アダプティブデザインとは、最初に読み込まれたあとは応答しないブレークポイントに基づいた、静的なレイアウトのデザイン。

これら多くの考慮事項は、突き詰めればコンテキストに関わっています。たとえば、モバイルデバイスが使用される状況を考えましょう。ユーザーがデスクでモバイルWebにアクセスしているとすれば素晴らしいことですが、実際多くのユーザーは違います。スーパーマーケットやコーヒーショップに行く途中または毎日の通勤など、さまざまな状況でモバイルデバイスを使用するでしょう。

ですから、注意を散らすものを減らし、どうすればユーザーが目の前の作業に自然に集中できるのか検討する必要があるのです。

『Tapworthy – Designing Great iPhone Apps』の著者であるJosh Clark氏は、モバイルWebにアクセスする状況を３つのカテゴリーに分類しています。

マイクロタスク：ユーザーが短期間、集中的にデバイスを使用するとき
ローカル：ユーザーが身の回りのことを知りたいとき
退屈：ユーザーが退屈で何か楽しみたいとき、または気を紛らわせたいとき

基本的なモバイルWebデザインのガイドライン

画面の小ささ

モバイルデバイスは、デスクトップやノートパソコンほど画面スペースがありません。つまり通常、複数の画面サイズをデザインすることになります。そして、レスポンシブデザインまたはアダプティブデザインのどちらを使用するか、早めに決定する必要があります。

そして「モバイルファースト」を重視しましょう。これは、もっとも小さいモバイルプラットフォーム向けにデザインし、そこからデザインを複雑にしていくものです。次のプロセスに従ってください。

似た画面サイズでデバイスを分類し、管理しやすいグループ数にまとめましょう。
どのデバイスグループでもうまく表示できるように、コンテンツのルールとデザインを適合する際のルールを定義しましょう。
柔軟なレイアウトを実装する場合は、できるだけWeb標準（W3）に忠実にするべきです。

モバイルWebやより幅広いインターネットにも、多種多様なブラウザがあることを忘れないでください。すでに出回っていないもの（BlackBerryやNokia WebKitなど）も含め、可能な限り多くのものにサポートしましょう。

著作権者：PhilipJägenstedt　著作権条項およびライセンス：CC0 1.0

操作をシンプルにする

キーパッドやタッチスクリーンは、マウスのように正確な操作には向いていません。したがって、次のことを試してください。

ユーザーがどう機能を使うかに基づいて、操作の優先順位をつけましょう。もっとも頻繁に使われるものを一番上にしてください。
操作はなるべく簡単にしましょう。
操作のラベルが明確かつ簡潔であるよう徹底してください。
機能毎にショートキーアクセスを提供しましょう。
タッチスクリーンのタップポイントには、30 × 30ピクセルのスペースを確保しましょう。
リンクを視覚的に区別できるようにしましょう。また、リンクが有効化されたときはわかりやすく表示しましょう。
モバイルとPCで別のバージョンを使用する場合、モバイルサイトとフルサイトを簡単に行き来できるようにしましょう。

コンテンツを最小限に抑える

ユーザーを圧倒しないように、画面スペースの小ささを考慮して、コンテンツを最小限に抑えましょう。

コンテンツがすべてのデバイスで例外なくサポートされていることを確認し、サポートされていないコンテンツは使用しないでください。たとえば、Flashはサポートされていないことがあるので、使用しないようにしましょう。

また、ページの説明は短く要点をまとめたものにしましょう。

ユーザーに課す入力を減らす

ユーザーは、携帯電話で時間を無駄にすることが少ないほど、モバイルWebサービスをより使いたくなります。次のことを考慮してください。

URLは短くしましょう。
いくつかの入力システム（動画、音声など）を提供しましょう。
フォームへの入力をなるべく少なくしてください。必要な情報はユーザーがPCからアクセスして来たときに求めましょう。
ログイン状態を保持することを許可しましょう。ほとんどのスマートフォンは、パスワードや指紋でロックされています。ですからログインを継続することによるリスクは、デスクトップよりも低いでしょう。
スクロールを最小限にして、一方向にのみスクロールするようにしましょう。