🏮

より良いレスポンシブWebデザインのために

2021/05/06に公開

プロトタイピング

(原文) A Better Responsive Web Design Process for the Future
By Jeremy Girard

固定幅でのデザインを長年続けてきましたが、レスポンシブWebサイトに対応するためには、固定幅でのデザインには限界があります。

レスポンシブWebサイトをデザインしたいなら、新年を迎えるにあたり、そのワークフローを最新のものにするために必要な変更点をご紹介します。このアドバイスは、ウェブデザイナー、エージェンシーのクリエイティブディレクター、ロードアイランド大学のデザイン講師としての私の15年間の経験に基づいています。

ウェブデザインプロセスの再考

レスポンシブWebデザインのためにワークフローを更新するには、まずデザインプロセスを見直す必要があります。

デスクトップを中心とした静的なカンプをPhotoshopで作成し、Lorem Ipsumのテキストを入れて、クライアントに提示してレビューしてもらうという方法は、レスポンシブ環境ではうまく機能しません。なぜなら、そのような静的なデザインでは、インタラクティブ性や異なるスクリーンでのユーザーエクスペリエンスの変化を示すことができないからです。

Photo credit: UXPin

無料ガイド「Responsive Design Best Practices」で説明されているように、より良いレスポンシブデザインには、以下のようなモダンなプロセスが必要です。

コンテンツを優先し、モバイルを優先すること
プロセスの早い段階で低フィデリティのデザインオプションを提示する
静的なカンプではなく、レスポンシブなプロトタイプを提示する
デザインが対応しなければならない最も極端なケースでの作業

コンテンツ・ファーストのデザイン

デザイナーが有形製品のパッケージを制作する場合、多くの場合、完全に開発されたプロトタイプ（または実際の製品）を使ってデザインの背景を作ります。

製品の形状、重量、使用例などは、デザイナーがデザインプロセスの中で考慮する要素のほんの一部に過ぎません。しかし、ウェブデザイナーは長年、この作業を行ってきました。

コンテンツのないWebサイトのデザインを始めることは、商品のないパッケージデザインを作るようなものです。頑張っても、最終的なコンテンツや商品が本当に自分の作ったものに合うかどうかはわかりません。

*Photo credit: SOCIALisbetter. Creative Commons. *

Webサイトのデザインは、単にクライアントがコンテンツを流し込むためのテンプレートではありません。コンテンツから始めれば、それをどのようにユーザーに見せるかを決めることができます。レスポンシブな環境では、コンテンツから始めることで、何が最も重要なのかを優先することができます。このようなコンテンツの階層化は、レスポンシブWebサイトのさまざまなブレイクポイントのレイアウトを決定する上で重要となります。

Webサイトのデザインプロセスの最初にコンテンツを要求することは素晴らしいことですが、現実には、クライアントがプロジェクトの最初に最終的なコンテンツを持っていることはほとんどありません。これでいいのです。本番さながらの最終原稿は必要ありません。必要なのは、コンテンツのイメージと、実際の第一稿のサンプルだけです。これは、パッケージデザイナーがプロトタイプを使って作業するのと同じです。

プロジェクトの最初の段階でコンテンツについてクライアントと話し合い、コンテンツ戦略に協力してくれる人を連れてきてください。代理店がそのサービスを提供している場合でも、他のチームが担当している場合でも、すぐにプロセスの一部に組み入れます。最初のドラフトの代わりに、競合サイトのコピーを使って、スペースの制約を見積もることもできます。

モバイルファーストのデザイン

考え抜かれた実際のコンテンツを手にした後は、そのコンテンツをどのように表示し、優先順位をつけるべきかを考えます。これには、モバイルファーストのアプローチが最適です。

モバイルファーストとは、デスクトップを中心としたデザインレイアウトからスタートする従来のウェブデザインプロセスとは異なるものです。使える画面領域が限られているため、小さな画面から始めることで、どの要素やコンテンツが最も重要なのかを判断することができます。また、必要のないコンテンツも見えてくるので、すべてのバージョンのデザインから排除することができます。

その結果、小さい画面サイズに合わせて体験を劣化させるのではなく、100％の感覚で体験を拡大することができるのです。

モバイルファーストのプロセスでは、まずサイトのコンテンツのワイヤーフレームを作成します。そして、ワイヤーフレーム内の各セクション／コンテンツに優先順位を設定します。セクションの優先順位は、異なるブレイクポイントでどのように、どこに表示するかを決定するのに役立ちます。

スタイルタイルの使い方

デザイナーは従来、Photoshopのような画像編集ソフトを使って、ウェブエレメントのルック＆フィールを確立してきました。この方法の問題点は、プロセスの初期段階では、書体や色、ボタンやメニュー、入力コントロールなどのインターフェース要素など、より大局的な決定事項に焦点を当てるべきなのに、Photoshopでは非常に忠実なデザイン例を作成してしまうことです。

スタイルタイルを使うことは、これらのデザイン要素を提示し、決定するためのより良い方法です。Samantha Warrenによって作られた「スタイルタイル」は、レイアウトを定義することなく、実際のインターフェース要素との直接的なつながりを確立する」。

このタイルを使用するプロセスはシンプルです。

クライアントのニーズとブランド・アイデンティティの要件に耳を傾ける。
ニーズを解釈して、プロジェクトで使える判断材料にする。
Webサイトのビジュアル言語を決定する。
決めたことを繰り返していく。スタイルタイルを使えば、忠実なPhotoshopのファイルを使って作業するよりもはるかに早く作業ができる。

このようなハイレベルなデザイン要素は、アートディレクションやデザインを決定する際に、より多くの情報を提供してくれます。スタイルタイルの作成は、ワイヤーフレーム作成と並行して行うことができます。なぜなら、どちらのプロセスもプロトタイプや後のハイファイデザインに反映されるからです。

レスポンシブ・プロトタイプ

レスポンシブWebサイトでは、静的なデザインカンプを提示することはできません。静的なカンプでは、実際のウェブサイトのように画面サイズに応じてレイアウトを変更することができないため、デザインの真のユーザーエクスペリエンスを示すことができません。

この問題に対処するために、多くのデザイナーは、さまざまなブレークポイントを示す一連のカンプを作成します。しかし、これではデザインプロセスに費やす時間が大幅に増え、サイトの完全なレスポンシブ性やインタラクティブ性を示すことはできません。

レスポンシブWebサイトでは、実際にレスポンシブ対応した例を提示して、クライアントのレビューを受けるべきです。そのためには、レスポンシブ対応のプロトタイプを作成することが重要です。

レスポンシブ・プロトタイプを使用することは、ブラウザ上でデザインすることとは異なります。多くのウェブデザイナーは、ブラウザ上でデザインすることは創造性を妨げると感じています。グラフィックスプログラムを使用して、視覚的な方向性やレイアウトを決めることはできますが、それらの選択をインタラクティブなプレゼンテーションに変換する必要があります。

それでは、モバイルファーストのレスポンシブプロトタイピングを取り入れたワークフローを見てみましょう。

大まかなコンテンツがあれば（プレースホルダーテキストでなければ）、それをもとにサイト全体のコンテンツをマッピングします。ページごとにリストアップしてもいいですし、Moadmobが提供しているスプレッドシートを使ってもいいでしょう。

さて、「素材」ができたところで、各ページのコンテンツの優先順位をモバイルビューポート用に決めていきます。視覚的な階層はどのようなものになるでしょうか？Luke Wroblewski氏が提唱する5つの一般的なレスポンシブレイアウトについて考えてみましょう。
コンテンツの階層を念頭に置いて、コンテンツのワイヤーフレームでデザインのレイアウトを始めます。UXPinを使用している場合は、単純に320のビューポートを選択することから始めます。下図のように、まずコンテンツのブロックをマッピングすることが目的です。次に、ディテール（標準的なボックスや矢印）を追加して、ローファイなワイヤーフレームに仕上げます。

基本的なインタラクションを追加して、レスポンシブ・プロトタイプにコア・ユーザー・フローを反映させることができます。ボタンやメニューは、それぞれのページにリンクさせる必要があります。基本的なインタラクションでページをつなぐことで、最低でも5人のユーザーですぐにテストできるローファイなプロトタイプができあがりました。
プロトタイプをテストするには、UXPinが提供する組み込みツールを使用するか、UserTestingのような外部サービスを使用することができます。
より大きなビューポートにスケールアップするために、ステップ1～5を繰り返します。ユーザーからのフィードバックをもとに繰り返します。
スタイルタイルに基づいてビジュアルデザインを作成し、SketchやPhotoshopなどのツールを使ってビジュアルデザインを修正します。

極限状態での作業

Webページをデザインする際には、関係者に見せるための成果物を用意するために、簡単なページを最初に手がけたいと思うことがあります。しかし、デザインプロセスでは、最も困難で極端なシナリオに焦点を当てるべきです。

よくある例として、記事（ブログ、プレスリリース、ケーススタディなど）を表示するページのデザインを考えてみましょう。そのページには、必ずトップ付近にタイトルが表示されます。そのタイトルが、デザインしたものよりも2倍、3倍と長くなると、デザインはどうなるでしょうか。

タイトルにはこう書かれています。

"レスポンシブWebデザインのヒント" というタイトルと、*"絶対に必要な10のヒントとコツ "*というタイトルでは、レイアウトテンプレートでの表示の仕方が大きく異なります。

すべてのスクリーンサイズにおいて、このような極端なケースを想定してください。スペースに余裕のある大画面ディスプレイで極端なケースがうまく動作するようにするだけでは不十分です。また、小さな画面のデバイスやその中間のものでも適切に動作しなければなりません。

次のステップ

今日、人々はウェブサイトが多くのデバイスで動作することを期待しています。レスポンシブWebデザインは、「もし」から「どのように」すべきかという問題になり、そのプロセスが成功したサイトを他のサイトと差別化する要因となっています。

このプロセスの重要な部分は、固定幅の静的なサイトを作成するために使用していたワークフローを見直し、レスポンシブでマルチデバイス対応のウェブのニーズに沿ったプロジェクト成果物を提示するために、プラクティスを更新することです。

このガイドがお役に立ちましたら、UXPinの無料トライアルをご利用いただき、レスポンシブプロトタイピングに磨きをかけてみてはいかがでしょうか。