Adobe XDを使ってレスポンシブデザインを効率的につくるヒント | アドビUX道場 #UXDojo
エクスペリエンスデザインの基礎知識
レスポンシブデザインはごく一般的に使われるテクニックなりました。しかし、画面は次々と増え続けており、デザインを対応させるのが時には大きな挑戦になります。
ワークフローも、デザインする体験に合わせて変えなければならない場合がよくあります。では、マルチスクリーンに向けたデザインをどのように進めるのが良いのでしょうか？
この記事では、Adobe XDリード製品デザイナーのタリン・ワズワース、SunTrust BankのUXディレクターのアンディ・ヴィターレ、マイクロソフトのUXデザイナーのジェシー・チャンの3名から聞いた、この問いに対するそれぞれの考えを紹介します。
Adobe XDでは、アートボードのサイズを変更して、画面ごとにデザインがどのように変わるかを素早くテストできる
「モバイルファースト」は常に有効か？
マルチスクリーンの検討を始めるときは、それを使うことになる人々から思考を始めるのが良いようです。
「私はまず自分の顧客が誰で、その人たちがサイトやアプリのコンテンツをどのように体験するかを考えることから始めます」とタリンは説明します。
アンディもこれには同意見です。「私たちがデザインするものはすべて、『いつどこでこの機能が使われるのか、彼らのニーズは何でどんな結果が望ましいのか』の理解に基づいています。主要なタスクと振る舞いを特定してから、彼らのワークフローや使い方のデータに基づいて、どの画面にどの機能があるべきかを決定します」
タリンは多くの場合モバイルファーストのアプローチを使っています。少なくとも、早期に制限を乗り越えておいて、後で時間をとられることのないアプローチを選択しています。
アンディは、理想的には常にモバイルファーストの戦略を採用することが望ましいとしながらも、プロジェクトによっては異なるアプローチが必要な場合もあることを指摘しました。例えば、いくつかのSunTrustの機能はWebアプリにのみ存在します。そうした機能はいつかモバイルアプリにも提供されることになるかもしれないという状況です。一方、『モバイル小切手預金』のような機能は、モバイルアプリ以外に実装されることはありません。
アンディは次のようにアドバイスします。「モバイルファーストが有効になるケースは、モバイル向けに必要とされる主要機能がまだ把握できておらず、Webやデスクトップ向けをその拡張としてデザインできる場合です。企業向けのアプリなどでは、まず最大量のデータと機能から構築を開始して、その後にモバイル向けに機能やスコープを絞る方が向いている場合もあります」
ジェシーもこれには同意します。「モバイルファーストの一般的なガイドラインに従うとしても、多くの場合に、コンセプトをレイアウトするため、大きめのカンバスにコンテンツを一通り並べなければなりません。その後に、重要性の低いコンテンツから一つひとつ隠すか削除して、小さな画面にフィットさせることになります」
ジェシーはこの作業を始める前に、ターゲットのユーザーを定義して、最もコンテンツが見られることになるであろう画面サイズを判断します。また、3つの主要なブレークポイントを開発チームに伝え、彼らが必要な基本フレームワークについての検討を始められるようにします。
モバイル画面の要素を、レスポンシブリサイズを使ってより広い画面に拡大
複数の画面向けに提供する必要のある機能に関して、アンディは一貫性のための特徴を探すことを推奨しています。
「デバイス間ですべてが完全に一貫性を持つべきと言っているわけではありません」と彼は説明します。「しかし、情報アーキテクチャ、コンテンツや機能の見つけ方の類は共通であるべきです。私は常に共通の要素や基本機能から始め、画面固有の要件があればその後に作業します」
タリンの好きなやり方は、コンテンツとナビゲーションの確実な基礎を構築して、それからレイアウトを他の画面サイズに合わせるというものです。
「最初に調整するのは、階層、レイアウト、ナビゲーションです」と彼は話します。「小さな画面では、ナビゲーションを折りたたんだり、コンテンツを縦に長くレイアウトする必要があるかもしれません。大きな画面では、より多くの情報を表示できるでしょう。多くの場合、劇的に変わることはありませんが、レイアウトの見直しを行うと、サイトやアプリのユーザー体験に貢献できます」
タリンが次に行うのは、個々の要素のサイズ変更とスタイル設定です。特にタイポグラフィには力を入れます。彼はティム・ブラウンの最新の書籍Flexible Typesettingを推薦し、レスポンシブデザインにおける文字の扱いのベストプラクティスに従うことで、デザインを明確にし、アクセシビリティを向上できると説明しました。
「グリッドとブレークポイントを追加する」が、異なる画面間のデザインの調整に対するアンディの回答です。かなりの繰り返し作業が発生することを彼は認めていますが、そうした時間を節約するために使えるツールも存在すると言います。
レスポンシブリサイズを利用しているところ
レスポンシブリサイズとリピートグリッドを活用する
「Adobe XDのレスポンシブリサイズは、異なる画面に対して、要素がどのようにフィットするかを理解するための素晴らしい指針になります」とアンディは語ります。「ボタン、カード、ナビゲーション要素、画像などには特に有効です。もちろん多少の調整作業は必要ですが、レスポンシブリサイズは私が行うべき作業のおよそ8割を済ませてくれます」
彼は設定にも気を使うようアドバイスします。「テキストボックスや画像が意図したとおりにスケールしない場合は、要素の固定や大きさの変化を手動で設定することです」
タリンはこれにさらに追加して、アセットパネルと組み合わせて使用すると、より素早く作業できるようになると言います。アセットを変更すれば、すべてのレイアウト内の要素を一度に変更することができるためです。
「レスポンシブリサイズはデザインプロセスの早期に繰り返し使うのが最適だと思います」とタリンは述べています。「最初の段階から、UIがどのようにスケールするのかについてルールの策定を始めることが、一貫性の維持や、様々な画面への適応性の確認を行うための役に立つでしょう」
レスポンシブリサイズを最大限に活用するため、グループ化による要素の整理をタリンは薦めています。下の画像が示すように、オブジェクト間の関係を定義しやすくなるためです。
ところで、XDにはリピートグリッドというたくさんのコンテンツをデザインする時に一貫性を保つのに優れた手段があります。簡単な操作でアイデアを形にして、様々なレイアウトやスタイルを探ることを可能にする機能です。
「配置の必要なコンテンツが多いレイアウトを実現する際の基盤として使うと、シングルカラムからマルチカラムへの切り替えなどを素早く行えます。その際、コンテンツの設定は自動的に行われます」とタリンは説明し、Google Sheetsのようなプラグインと組み合わせることで、他のメンバーとのコラボレーションもできるとアドバイスします。
ジェシーは、リスト、テーブル、メニューのデザインにリピートグリッドをよく使用しています。要素が繰り返し表示されメタデータを持つ限り、彼女は基本レイアウトのデザインにリピートグリッドを使用し、その後に必要に応じた変更を行います。画面サイズの変更に対応する際は、グリッドの外枠を変更してから間隔や文字サイズなどが画面に合うように調整します。
リピートグリッドは複数のフィールドをつくる作業を単純化する
何回も繰り返しテストする
タリンとアンディが強調するのは、どんな場合でもデザインの徹底的なプレビューとテストを行うことの重要性です。これは、主要な問題点を洗い出すには最も簡単で効果的な方法です。
「意図した画面サイズやブレークポイントのすべてでテストを行い、どのように見えてどのように機能するかを確認しましょう」とアンディはアドバイスします。
デザインプロセスを通じてタリンは繰り返しテストを行います。ほんの小さな調整でも、XDのプレビュー画面で確認したり、XDのモバイルアプリを使い実際の画面でプレビューします。「テキストサイズの12pxへの変更がiPhone Xでどのように見えるかは、実際にテストするまで分かりません」と彼は警告します。
結果に納得できたら、デザインをデザイナー以外の誰かに見せてみましょう。
「これにより、自分の持つ偏りや、詳細まで知っているためにかえって見えなくなっていたために見逃していた基本的な過ち、そして一貫性の欠如を明らかにできます」とアンディは説明します。
その次に、より多くの関係者にテストしてもらえるようにデザインを公開します。「XDを使うと、チームメンバーや外部のパートナーが画面にコメントをつけられます」とアンディは指摘します。「これは素晴らしいことです。実際に製品を使うことになる人々にデザインを見せる前に、様々な人々がデザインを確認して、どんな発見や見解でもデザイナーに伝えられるのです」
「さらには、課題解決のために不足している点が見つかるかもしれません。これは画面デザイン以上に大切なことです」
冒頭の問いに戻りましょう。常に答えは「状況次第」です。デザインプロセスはプロジェクトごとに異なるでしょう。しかし、少なくとも複数画面への対応の時間を節約できるツールを手にすることはできます。デザイン調整の助けとなり、自分の代わりに多くの必要な仕事をこなしてくれるツールです。それにより、チーム内部や外部の人とテストしたり、デザインを修正するための時間を増やせます。それは、ユーザにとってより良い製品をデザインすることにつながります。たとえ彼らがどんなデバイスを使っていようとも。
この記事はBest Practices for Responsive, Multi-Screen Designs（著者:Oliver Lindberg）の抄訳です