📘️ Book Club ＃デザイン #プロセス #レスポンシブ #ワークフロー #ツール － コンテンツファーストという考え方

コンテンツファーストとは？

コンテンツファーストとはウェブサイトのコンテンツを見せることを重視し、デザインをすることをいいます。

現在はスマホやタブレットの普及により、ラップトップや、デスクトップのアクセスよりモバイルからのアクセスの比率が高まっています、またテレビ、ゲーム機からアクセスする人もいます。そのため、どのようなデバイスからみてもページ内のコンテンツが正しく一覧できるというのが現在では重要とされています。そのためのデザインの考え方を「コンテンツファースト」と呼びます。

今回は、「Priority Guides: A Content-First Alternative to Wireframes」優先ガイド：ワイヤーフレームのコンテンツファーストの代替案
という記事を読んで、まとめて見ました。

Priority Guides: A Content-First Alternative to Wireframes

デジタル・デザイン・プロジェクトに携わったことがある方々は、ワイヤーフレームに精通しているかと思います。ワイヤーフレームはWebサイト、アプリ、ダッシュボード、その他のデジタル・ユーザーインターフェースをデザインする際に広く使用されているツールの1つです。

しかし、ワイヤーフレームは多くの欠点を考慮されていないために、多くの問題点があります。ツールの欠点がユーザー中心性を著しく損なう可能性があるため、これはとても残念なことです。

そのため、ワイヤーフレームの落とし穴を回避する代替手段であるプライオリティー・ガイドを使用します。 プロセスをユーザー中心に保ち、ユーザーにとってより価値のあるデザインを作成するだけでなく、チームエンゲージメント、コラボレーション、およびデザインワークフローも改善されます。

ワイヤーフレームの問題について

ウィキペディアでは、ワイヤーフレームを「ウェブサイトの骨格フレームワークを表す視覚的なガイド」として適切に定義しています。それはインターフェース要素やナビゲーションシステムを含む、ウェブサイトのコンテンツのページレイアウトや配置を表しています。 言い換えると、ワイヤーフレームは、インターフェイス要素の配置や形状など、潜在的なWebサイト、またはアプリを簡略化して表すスケッチです。 それらは、紙の忠実度の低いラフスケッチから、デジタル形式の忠実度の高い色付きのテキスト画面まで多岐にわたります。

ワイヤーフレームは視覚的な性質があるため、デザイン・アイデアをスケッチし、リサーチしたり、それらのアイデアを他のデザイナー、またクライアント、および利害関係者に伝えやすくするための優れたツールです。 また、SketchやBalsamiqなどのツールを使用して簡単に作成および適応できるため、デザイン・プロセスの早い段階でユーザーがテストできるものがあり、使いやすさの問題に他の方法よりも早く対処できます。

これらはすべてワイヤーフレームの貴重な特性ですが、いくつかの重大な欠点もあります。

最終的デザインの幻想をさせる
ワイヤーフレームは、デザインが最終的なものである、または少なくとも完成の後半段階にあるような錯覚を与える可能性があります。 これらの最初のコンセプトは初期のリサーチであり、最終的なものではないことをクライアントや利害関係者にどれほど注意深く説明しても、最終的なデザインの幻想をさせることをストップすることはできません。

創造性をなくさせる可能性がある
インタラクション・デザイナーがワイヤーフレームを作成すると、多くのビジュアル・デザイナーは、そのワイヤーフレームによって設定された境界の中でデザインを進めようとします。その結果、最終的なデザインはほとんどの場合ワイヤーフレームに似ています。 

ユーザー中心性を理解できなくなる
デザイナーとして、私たちは潜在的に、何かがどのように見え、ディスプレイされるかを最初から気にしています。 内部使用のみを目的とした粗いワイヤーフレームであっても、位置合わせ、サイズ設定、色付けなどの細部で創造性、またユーザーにとって価値のあるものに集中できなくなる可能性が出てきてしまいます。

スタティックでレスポンシブでない
ワイヤーフレームは、最新のWebデザインに不可欠なレスポンシブ動作をキャプチャできていません。 デジタル・デザイン・ツールが増えてきていますが、結果として得られる各ワイヤーフレームは依然として静止画像です。

デベロパーやQAテスターにとって不便
デベロパーとQAテスターはコードを操作します。ワイヤーフレームのスケッチや画像は機能情報をほとんど提供していません。デザインがどのように動作するかについてのこの明確さの欠如は、デベロパーとQAテスターがデザイナーからの入力なしに機能や応答性について決定を下したり、機能が正しく機能しているかどうかをデザイナーに頻繁に確認しなければならないことにつながる可能性があります。 プロダクトに関する豊富な経験と知識がある成熟したチームやプロジェクトにとっては、おそらく問題は少ないでしょうが、多くの場合は、開発作業が増え、プロセスが遅くなり、時間が無駄になることを意味します。

これらのワイヤーフレームの落とし穴を克服するためにプライオリティー・ガイドを採用してみてはいかがでしょうか？

プライオリティー・ガイドとは？

簡単に言うと、プライオリティー・ガイドには、モバイル画面のコンテンツと要素が含まれており、階層で上から下に並べ替えられ、レイアウトの指定はありません。 階層はユーザーとの関連性に基づいており、コンテンツはユーザーのニーズを満たし、ユーザーのゴールを上位にサポートするために最も重要です。

プライオリティー・ガイドの形式は固定されていません。デジタルにすることも、紙とポストイットで作成した物理的なものにすることもできます。 最も重要なことは、プライオリティー・ガイドは自動的にコンテンツファーストであり、ユーザーに最高の価値を提供することに重点を置いています。

もう少し深く掘り下げて、次の例は、この記事の前半で示したワイヤーフレーム画像に示されているのとまったく同じページを示しています。 これは、「フライトを予約する」というタイトル、実際のコンテンツ、情報が得られるセクション、およびコンポーネントと機能を説明する注釈で構成されています。

航空会社のフライト概要ページの詳細なデジタルプライオリティー・ガイド

コンテンツを忠実度の高いワイヤーフレームと比較すると、セクションの順序が同じではないことがわかります。 たとえば、ステップ・インジケーターは、プライオリティー・ガイドの下部に表示されます。これは、デザイナーがページ上で最も重要な情報ではないと判断したためです。 逆に、最も重要な情報であるフライト情報と価格は、現在、上部近くに配置されています。

プライオリティー・ガイドの利点

ここでプライオリティー・ガイドがワイヤーフレームよりも優れている主な利点を挙げましょう。

レスポンシブデザインに適しています。
ワイヤーフレームは静止画像であり、モバイルからデスクトップまでの全範囲をカバーするために複数のスクリーンショットが必要です。一方、プライオリティー・ガイドでは、画面サイズに関係なくコンテンツ階層の概要を説明します。

問題の解決とニーズへの対応に焦点を当てることができます。
プライオリティー・ガイドを作成するときは、ユーザーの問題を解決し、ニーズに対応し、ゴールを達成するためにユーザーをサポートすることに自動的に焦点を合わせます。インターフェイスは常に、メッセージを伝達したり、ユーザーを支援したりするコンテンツで満たされています。コンテンツファーストを設計することで、常にユーザーへのサービスに集中できます。

レイアウトに時間を無駄にすることはありません。
インタラクションデザイナーは、デザイン・プロセスの初期段階でデザインとレイアウトに時間を浪費する必要はありません。プライオリティー・ガイドは、焦点がコンテンツやユーザーから特定のレイアウト要素に早すぎる方向にシフトするのを防ぎ、視覚的な完璧主義の「デザイナーの罠」に陥らないようにするのに役立ちます。

ビジュアルデザイナーの創造性を促進する
プライオリティー・ガイドは、インタラクション・デザイナーが視覚的な境界を設定せずに、ユーザーを最適にサポートして喜ばせる方法について、デザイナーが贅沢なアイデアを探求する機会を提供します。 チームで唯一のデザイナーであり、インタラクション・デザイナーとビジュアル・デザイナーの両方を務めている場合でも、新しいコンテンツに直面した場合でも、最初のワイヤーフレームの外観を超えることは困難です。

デベロパーとテスターは、プロセスの早い段階で「HTML」を取得することができます。
プライオリティー・ガイドの構造はHTMLと非常によく似ており、開発者は早い段階で将来の開発の基礎を築き始めることができます。 同様に、テスターはテスト用のチェックリストを取得し、それらのテストの作成をすぐに開始できます。

プライオリティー・ガイドの作成方法

プライオリティー・ガイドを作成する際に役立つと思われるベースラインと手順がいくつかあります。

ベースライン
プライオリティー・ガイドには、ユーザーに関連する実際のコンテンツのみを含む必要があります。 Lorem ipsumやその他の種類のプレースホルダーテキストは、ページがユーザーの目標達成をどのようにサポートしているかを伝えません。さらに、優先ガイドを作成するときは、レイアウト要素を含めないでください。代わりに、コンテンツと機能のみを含めてください。プライオリティー・ガイドは決して成果物ではないことを忘れないでください。これは、プロジェクトに関与するデザイナー、デベロパー、テスター、および利害関係者の間での議論を促進するための単なるツールです。

また、プライオリティー・ガイドは常にモバイル形式である必要があります。このように自分自身を制約することにより、自動的にモバイル・ファーストを考え、どの情報が最も重要であるかを検討します（したがって、画面の上部に表示する必要があります）。また、メニューは通常、ウェブサイトやアプリのすべての画面でほぼ同じであるため、プライオリティー・ガイドからメニューを除外することをお勧めします。

プライオリティー・ガイドのステップ

ステップ1：目標を決定する
ソリューションにジャンプする前に、一歩下がって、このプライオリティー・ガイドを作成する理由を検討することが重要です。
→　このページの目的は何ですか？
→　ユーザーにはどのような目標がありますか？
→　そして、ビジネスにはどのような目標がありますか？
これらの質問への回答は、ユーザー調査の指針となり、どのコンテンツがユーザーとビジネスにより多くの価値をもたらすかを判断するため、優先度が高くなります。

ステップ2：ユーザーを調査して理解する
ユーザー調査には多くの方法があり、選択する方法は状況やプロジェクトによって大きく異なります。ただし、プライオリティー・ガイドを作成する場合は、ペルソナ、アフィニティ・ダイアグラム、エクスペリエンス・マップを生成して、調査結果の視覚的な要約を作成するのに役立つことが確実にわかりました。

ステップ3：コンテンツトピックを決定する
この段階の目的は、ユーザーとビジネスに関する知識を使用して、カスタマージャーニーの各フェーズでの目標を最もよくサポートする特定のコンテンツとトピックを決定することです。

ステップ4：高レベルの優先ガイドを作成する
トピックのリストを使用して、高レベルのプライオリティー・ガイドを作成します。
最も重要なトピックはどれですか？それを上に置きます。
2番目に重要なトピックはどれですか？それはもっとも重要なトピックの下にきます。これは単純な優先順位付けプロセスであり、すべてのトピックが優先順位リストで場所を見つけるまで継続する必要があります。他のトピックと比較するだけでなく、トピックが本当にページ上にあるべきかどうかについても、各トピックの重要性を疑問視することが重要です。また、紙から始めることで、デジタル・デザイン・ツールを使用した場合に発生する可能性のある、視覚的な細部に焦点を合わせすぎないようにすることができます。

架空の会社であるFreeBeesのハイレベルプライオリティー・ガイド

ステップ5：詳細なプライオリティー・ガイドを作成する
次に、詳細の追加をし始めます。 トピックごとに、ページに表示される詳細なコンテンツを決定します。 また、ページに必要な機能について考え始めます。 

ステップ6：ユーザーテストと反復
最後、また継続的なステップには、プライオリティー・ガイドのテストと反復が含まれます。プライオリティー・ガイドに示されている情報についてユーザーにどう思うかをユーザビリティテストしてみましょう。また利害関係者からフィードバックを収集します。これらのセッションから得られた入力を使用して、情報の検証と優先順位付けを行い、機能を追加または適合させた後、必要に応じてさらにテストを行うことができます。

上記のプロセスには多くのバリエーションがあります。完全に紙とポストイットを使用する設計者もいれば、デジタル・デザイン・ツールでプライオリティー・ガイドを最初から作成することを好むデザイナーもいます。高レベルの優先度ガイドに過ぎないものもあれば、プロジェクト全体のガイドラインとして詳細な優先度ガイドを使用するものもあります。

重要なのは、実験して、時間をかけて自分とチームに最適なアプローチを見つけることです。ただし、プロセスに関係なく重要なのは、ユーザーとビジネスの目標に常に焦点を合わせ、コンテンツや機能の各部分がこれらの目標に何を追加するかを継続的に自問する必要があることです。

まとめ

プライオリティー・ガイドは、ユーザーファースト、コンテンツファースト、モバイルファーストをデザインするための非常に効率的なツールになり、ワイヤーフレームのみに依存することから生じる重大な落とし穴の多くを克服できます。 ワイヤーフレームには用途があり、多くの場合、アイデアを視覚化して、チームメンバー、クライアント、または利害関係者と話し合うことができることは価値があります。 アイデアをテストするためのワイヤーフレームとして概念をスケッチすることも役立ちます。また、優先ガイドを改善する方法についての新しい洞察を得るためにワイヤーフレームを生成することもあります。

全体として、プライオリティー・ガイドは、プロジェクトの開始時、画面の目的とコンテンツを定義する段階でより役立つことがわかりました。 一方、ワイヤーフレームは、アイデアや視覚的概念をスケッチして伝達するのに役立ちます。 ワイヤーフレームから始めるのではなく、常に重要なことに集中するようにしてください。

私も、色々勉強中なので、皆さまの、ご意見・ご感想をお聞かせください。
お読み頂きまして、ありがとうございました。

メルボルンを拠点にプロダクト・デザイナーとして働いています。 主にデジタル・プロダクトの制作に携わっています。