モバイル向け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にアクセスする状況を3つのカテゴリーに分類しています。

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

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

画面の小ささ

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

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

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

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

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

操作をシンプルにする

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

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

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

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

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

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

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

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

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

著作権者:Subhashish Panigrahi。 著作権条項およびライセンス:CC BY-SA 3.0

モバイル接続は安定していない

モバイル接続が安定していない状況は、ユーザーをとても苛立たせます。ですから、ユーザーにあまり負担をかけないようにしましょう。次のことを試してください。

  • 接続が途切れてもデータが失われないように、データを保持しましょう。
  • 読み込む速度を上げるために、ページサイズをできる限り小さくしましょう。
  • アドネットワークなどの、膨大な情報量とデータを必要とするモバイルサイトの要素を除外してください。
  • 画像を最小限に抑え、画像のサイズを小さくしましょう。
  • 読み込む時間を速くするために、埋め込む画像の数を最小限に抑えてください。

著作権者:Stefano De Sabbata and Mark Graham. 著作権条項およびライセンス:CC BY-SA 3.0

継続的に統合された体験

ユーザーはモバイルとデスクトップを行き来すると、両者で似た体験を期待するようになります。次のことを忘れないでください。

  • 継続性を維持しましょう。モバイルデバイスでWebストアにログインしても、デスクトップと同じように注文し、購入できることが重要です。
  • 一貫性を維持しましょう。必要に応じてモバイルとデスクトップを切り替えられるオプションを用意しましょう。
  • ブランドを維持しましょう。各バージョンのルックアンドフィール(Look and feel)を似せてください。

まとめ

モバイルは従来のデスクトップの環境とは異なります。モバイル環境では、標準的なUXとユーザビリティにも配慮したうえで、デザインの新しい考慮事項も必要です。できるだけ良いUXを提供するためには、モバイルデザイナーは細部にまで注意を払うことが重要です。

参考文献

Creative Bloqが提案する、モバイルのためのインタラクティブデザインの10原則

http://www.creativebloq.com/mobile/10-principles-mobile-interface-design-4122910

Give Good UXが提供する、モバイルデザインのための5つの簡単なヒント

http://www.givegoodux.com/5-crucial-principles-great-mobile-design/

Smashing Magazineが提供する、モバイルにおけるUXデザインの7原則

http://www.smashingmagazine.com/2011/07/seven-guidelines-for-designing-high-performance-mobile-user-experiences/

InfoWorldが提案する、正しくモバイルアプリを制作するための10のヒント

http://www.infoworld.com/article/2612190/mobile-apps/heed-these-10-expert-tips-for-mobile-app-design.html


イベント

2017/10/06(金)
UX School(全10回)