一歩先に進むためのレスポンシブデザインのガイドライン

Post on:2013年1月31日

はじめに

レスポンシブデザインが誕生した時、ウェブ制作のコミュニティではそれを解決するための方法をすぐに考えだしました。多くのウェブサイトがレスポンシブに対応した今、そこから一歩先に進む時です。コーディングに注意を払うことは簡単ですが、いくつかのスクリーンサイズのためにデザインが犠牲になることがあります。

レスポンシブデザインの多くのリソースは基本をカバーするだけで、デスクトップだと広いスペースを利用し、スマフォだとよりシンプルにします。ほとんどはこの基本を超えるものはありません。日々新しいサイズのスクリーンがリリースされている今日、私たちはデザインについて考え、ユーザエクスペリエンスを進化させる必要があります。

デスクトップ

デスクトップ用のウェブサイトの場合、ユーザーインターフェイスの原則に注意を払ってデザインします。ユーザーはキーボードとマウス/タッチパッドで操作しており、一定のユーザエクスペリエンスを維持しながら多くのデザインの可能性があります。もちろん、いくつかのガイドラインには従わなくてはなりません。また、将来レスポンシブ対応に備えているのであれば、異なるサイズのスクリーンでどのように見えるか確認することが必要です。

考慮すべきポイント

デスクトップのデザインの可能性とアドバンテージ

ユーザーが容易に情報を走査することが可能な広範囲に渡るグリッドレイアウト。
コンテンツを容易にフィルタリングできる水平型のナビゲーション、サブメニュー、メガドロップダウンなど。
もっと多くのインタラクティブなページ。
広告の場所、サイドバーのコンテンツ、追加の広告、アクションボタン。
スマフォのような小さいスクリーンでは有用ではないパンくずのようなユーザーを誘導するクリックできるエリア。
もっと多くのデザインとユーザエクスペリエンスに影響を与えるテクノロジー。
フッタやサイドバーの情報も多めに。

ウェブサイトはユーザーにもっと多くの選択肢を与えるようにデスクトップのデザインを活用するべきです。
デスクトップを利用するユーザ-は、スマフォやタブレットでチェックしてアクセスするユーザーもいるでしょう。ユーザエクスペリエンスの見地から、容易で有用なデスクトップのデザインをしてください。

タブレット

タブレットは日々、人気が高くなっています。価格も下がり、多くのメーカーから発売され、これからも増えていくと予想できます。これは一時的なブームではなく、場合によってはウェブ閲覧の定番になるかもしれません。タブレットをデスクトップに次ぐ2番目のものとして扱わないことを学ぶ必要があります。

タブレットの特徴の一つは、タッチスクリーンであるということです。このことはウェブサイトを設計する際、まったく新しい方法へアプローチする必要が生じることがあります。タブレットが初めて登場した頃は、ウェブサイトをスタティックに表示されるだけで、ユーザーはデスクトップと同じインタラクションを体験しただけでした。デスクトップと同等のインタラクションを提供できるのであればそれもよいでしょう、しかし今日タブレットでしか得られないユーザエクスペリエンスを提供する責任があります。

考慮すべきポイント

最近のレスポンシブの傾向は、機能性と同様にインターフェイス、デザインがアプリケーションを模したものになっています。タブレットのためにデザインする時は、タブレット用のアプリケーションからインスピレーションを受け取り、インターフェイスをデザインしてください。

タッチ可能なエリアは大きめに、特にナビゲーション。マウス無しで指でタッチするので大きいエリアにするのは基本中の基本です。
タブやアコーディオンはタッチスクリーンのデザインに有用です、特により小さいスクリーンエリアのスペースを救います。サイドバーはデスクトップではなく、むしろウェブサイト全体のインタラクションとしてユーザーがどのように使用するか考えてください。例えば、ユーザーがそれを利用する時にセクション間を行き来するようであればタブが容易です。
タブレットでのデザインが単にデスクトップと同じか似たレイアウトにするのはベストな方法ではありません。スクリーンにフィットするように縮めたものは見苦しいだけで、多くのユーザビリティを犠牲にしていることがあります。
リンクなどのシンプルなアクションにはボタンやボタンのようなデザインを使用してください。
戻る・進むのようなボタンのナビゲーションは、そういったボタンを備えていないブラウザを使っているかもしれないタッチスクリーンでは有用です。ユーザーがあなたが持っているタブレットと同じ機種を持っているとは考えないでください。
タブレットのデザインは当然、Retinaディスプレイの最適化もしてください。現在はiPadだけですが、技術が進歩するのは早いです。もちろん現時点でもiPadユーザーの数は多いということも考慮に入れてください。

スマートフォン

スペースを節約することは、ユーザエクスペリエンスを引き起こすことに加え、スマフォのデザインで考慮すべき最も重要なポイントです。ユーザエクスペリエンスを考慮したスマフォのデザインをする上で、なぜユーザーがスマフォでウェブサイトに訪れるのか知ることは重要です。デスクトップのユーザーがウェブサイトで検索やインタラクションをすると同じように、スマフォのユーザーが単にコンテンツを求めるというシンプルなアクションを好む傾向があります。

考慮すべきポイント

タブレットのタッチスクリーンと同様に、より大きなタッチできるボタンやアイコン、そしてスマフォアプリのようなデザインを考慮します。

シンプルな形でインタラクションを保ってください。余分なものは省き、ユーザーの最も重要なアクションにフォーカスすることができるようにします。
多くのコンテンツがあるウェブサイトはソートやフィルターができるようにしてください。アイテムを検索するためのフォーム、有用なカテゴリー、ナビゲーションの検索フィルタなど。
ブランドを損なわず、ユーザビリティに影響を与えないように、ミニマルなデザインを利用してください。
フォントはより大きい方がよいでしょう、全てのユーザーがズームするわけではありません。
スペースを確保するために、コンテンツにテキストで要約を加えてください、またユーザーが必要としないコンテンツを無視できるようにしておくとよいでしょう。
スペースを確保する方法として、タブやアコーディオンやナビゲーションを活用してください。
ポップアップ、通知パネル、広告などはそれがユーザーに絶対必要であるか、ユーザフレンドリーであるか確認してください。
可能であればスマフォ用にページを分断することを考えてください。ウェブサイトによって常に可能ではありませんが、長いページのロードを避けるために取り入れてください。

おわりに

タブレットとスマフォの利用者は、早ければ2015年にはデスクトップの利用者を超えると予想されています。このことを考えるとレスポンシブ対応というのが単にコード化するだけででなく、デザインでも最善の方法を学ぶ必要があります。デスクトップ・タブレット・スマフォと3つの異なるデバイス間のデザインは、別のコンセプトとして考えた方がよいでしょう。Retina用に画像を最適化する、タッチデバイスにやさしいUIにすることは常に忘れないでください。さまざまなスクリーンサイズでの取り組むべき問題点は整理されていると思います、ユーザエクスペリエンスを考慮した相対的なナビゲーションです。

あなたはこれらの相違を考慮してデザインする時、それ以上の引き出しを持っていますか？　あなたのデザインは最善の方法を提供しつつ、さまざまなスクリーンサイズに対応できていますか？