core-path method_html/css_WEB-ITnose を使用してページをデザインする

英語原文: http://boxesandarrows.com/designing-screens-using-cores-and-paths/

訳者注: 記事の原題は Designing Screens using Cores and Paths 。この記事の著者は、都市計画における「交通需要線」にインスピレーションを得て、Webサイトデザインの「コアパス法」を提案しました。 「コアパス方式」は、フレームからホームページ、ナビゲーションに至るまでの一般的な方式とは異なり、コアコンテンツからスタートして徹底的にデザインすることを可能にします。この型破りなアプローチにより、サイト内の最も直接的なパスが作成され、ユーザーが主要なコンテンツを見つけることができます。

想像してみてください。芝生を越えてバス停に行きたいとき、芝生の周りの歩道を迂回しますか、それとも真ん中を通りますか?芝生が乾いていて立ち入り禁止ではないと仮定すると、おそらく最短ルート、つまり芝生を横切ってバス停まで真っすぐに行くことになるでしょう。多くの人がこれまでにこれを行ったことがある場合は、「解決策」があるでしょう。

このような計画外の道路は二点間の最短距離を結びますが、その例は私たちの周りにもあります。都市計画では、これらは「欲望パス」と呼ばれ、人間の自然な行動と人工的に計画されたルートとの違いを意味します。

建築家のクリストファー・アレクサンダーは、著書『パターン・ランゲージ』（1976年）の中で「交通需要線」を定義しました。 「交通需要線」の建築への応用については、

「道路計画の手法は、まず自然景勝地に目標点を設定し、それを結んで道を作るのが基本である。」と具体的に指示した。

??Christopher Alexander

原則として、アレクサンダーのアプローチは、目標指向、つまり人々が最終的に望むものを重視し、それらを最も有益な方法で結び付けることです。

しかし、Web デザインでは通常、その逆のアプローチが取られます。デザイナーはホームページから始めます。次に、適切かどうかにかかわらず、サイトの構造階層に基づいてナビゲーション プランを作成します。しかし、目標 (ユーザーが探している主なもの、またはユーザーがやりたいこと) は、デザイン プロセスで最後に考慮されるものになります。

「トラフィック需要線」からインスピレーションを得て、Web ページをデザインするこの方法を改良することができます。 core-path メソッドを使用すると、Web サイト内に最も直接的なパスを作成して、ユーザーがコア コンテンツに直接アクセスできるようにすることができます。

Core-Path Model

「ホームページと全体的なナビゲーション計画から始めるのではなく、コアコンテンツとデザインを徹底的に始めましょう。」

「目標志向」 情報アーキテクトはこれを提案しています。彼の講演「Core-Path Method: Designing for Findability」の中で。彼は、Web デザインへの別のアプローチについて概説しました。それは、ホームページと全体的なナビゲーション プランから始めるのではなく、中核となるコンテンツとデザインを徹底的に始めることです。あれは直接的なんです。

この方法は 3 つの重要な要素に基づいています:

１．コアコンテンツ

コアコンテンツとは、ユーザーをウェブサイトに引き付けるものです。開発者の観点から見ると、中心となるのは Web サイトが提供するものです。コアコンテンツは必ずしもページであるわけではないことに注意することが重要です。 YouTube の場合、コア コンテンツはビデオであり、www.youtube.com のページではありません。これにより、他の Web サイトにあるビデオ コンテンツを YouTube に含めることが可能になります。

核心的な内容には補助的な情報も含まれる場合があります。たとえば、技術的な詳細は、コアコンテンツの拡張と考えることができます。 Flickr のような Web サイトでは、写真の説明とユーザーがそれに付けたタグがコア コンテンツ、つまり写真の補助情報になります。

2．内向きの経路

ユーザーはどのようにしてコアコンテンツを見つけるべきでしょうか？訪問者がメインのナビゲーションや検索を通じてコアコンテンツを見つける場合があります。ただし、Google から直接提供される可能性もあります。または、他の Web サイト、広告、ブラウザに直接入力された URL リンク、さらには RSS やニュースレター経由などの他のパス。人々がどのようなキーワードで検索しているかなど、SEOの観点から参入までの経路も考慮する必要があります。

３．外向きのパス

ユーザーが探しているものを見つけたと仮定すると、次に何ができるでしょうか?基本的に、その後のすべてのやり取りはビジネスに何らかの価値をもたらします。ここで変革が起こります。アウトバウンド パスには、「ショッピング カートに何かを入れる」から「友人に商品を勧める」まで、あらゆるものが含まれます。内向きのパスと同様に、サイトから出るリンクなど、外向きのパスについても考慮すべきオプションが多数あります。

これら3つの要素はそれぞれ異なる機能を持っています。コアコンテンツはまさに、ユーザーとビジネスの両方にとって価値が生み出される場所です。ここでは、外向きの経路のガイダンスが大きな役割を果たします。Web サイトは最終的に、ユーザーが購入などの特定の行動を起こすことを望んでいます。内向きのパスにより、ユーザーがオンラインで必要な製品やサービスを見つける方法である検索可能性が保証されます。ビジネスの観点から見ると、外向きの経路が Web サイトに ROI をもたらします。

Amazonを例にcore-path方式を説明すると以下になります（図1）。コア コンテンツは製品であり、ここでは本の表紙や主要な詳細など、赤いボックス内のコンテンツによって表されます。左側にリストされているのは、ユーザーが書籍を見つけるためのさまざまな方法です。これらは内部パスです。ユーザーがコアコンテンツに対して投資収益率を生み出すことができると Amazon が考える行動を、右側に考えられる外向き経路としてリストします。

図 1 www.amazon.com のコア パス モデル

コア パス メソッドの適用プロセス

次のシナリオを想像してください: あなたは小さな設計会社で働いており、自転車を改良する注文を受けました。 Webサイト。この店には現在、住所と営業時間を記載した初歩的な「パンフレット」のようなウェブサイトがあるだけだ。彼らは電子商取引を導入してオンラインで販売できるようにしたいと考えています。製品には、ハイエンドのレーシング バイクやマウンテン バイク、およびそれらのアクセサリの一部が含まれます。同店は約1,000点の商品をオンラインで販売したいと考えており、主なターゲット顧客はプロのサイクリストとアマチュア愛好家である。販売される自転車は主に高級ブランドのものであるため、Web サイトのデザインは自転車製品の高品質を強調する必要があります。 core-path メソッドに従って、この Web サイトをデザインする方法の完全な手順を次に示します。

ステップ 1: コアコンテンツを定義する

コアプロダクトとは何ですか？まずは自転車、アクセサリー、サービスなどの候補リストを作成します。このリストはブレインストーミングから作成されたものであり、正しいか間違っているかという概念はありません。完全なリストを作成した後、コンテンツの中核部分とそのサポート情報を特定します。大規模なチームの場合、これはチームメンバーや関係者との合意に達することを意味します。

上記のシナリオでは、中核となる製品は自転車です。バイクの写真は、コアコンテンツを紹介するための重要な要素です。この場合、自転車の機能、ブランド、製品範囲は、コアコンテンツに従属する情報です。サポート情報には、価格や追加の技術的な詳細が含まれます。

これらの詳細を優先順位付けして決定した後、核となるコンテンツを手書きします（図 2）。ナビゲーションやロゴを含むページ全体を描画せず、核となるコンテンツだけに焦点を当てます。

顧客は製品の詳細を詳細に表示したい場合があるため、この段階では 2 つの点を考慮する必要があります。まず、製品コンテンツとどのように対話するかです。 2 番目: ユーザーがコア コンテンツを見つけたら、使用シナリオを考えます。

図 2 手書きのコアコンテンツとサポート情報

ユーザーはスマートフォンやタブレットからも Web サイトにアクセスしていることを忘れないでください。 Facebook や Pinterest に写真を投稿することもあります。これは分散コアの例です。そこで、コア コンテンツをさまざまなシナリオに配置する方法を手書きで描きました (図 3)。同様に、ページの装飾やナビゲーションを描画せず、核となるコンテンツだけに焦点を当てます。

図 3 異なるシナリオで表示されるコア コンテンツの異なるバージョン

ここから、コア コンテンツと補助情報がさまざまなシナリオでどのように表現されるかを確認できます。バージョンを更新するには、バージョンを繰り返し行ったり来たりする必要がある場合があります。

ステップ 2: 考えられるすべての内部経路をリストアップする

ユーザーがあなたの Web サイトにアクセスできるすべての方法は何ですか?明らかに最初に思い浮かぶのは、サイト検索、メイン ナビゲーション、Google およびその他のサイトへのリンクです。しかし、ブレインストーミングを通じて、ショッピング比較 Web サイトへのリンクや、印刷された製品カタログなどのオフライン メディアからのリンクなど、より多くの道を見つけることができます。

リスト内の各内向きパスについて、設計要件を書き留め、それらの要件を満たします。たとえば、Google やその他の検索エンジンからの訪問者には、SEO とランディング ページの最適化が必要です (図 4)。

図 4 内向きパスと対応する主要な要件のリスト

ステップ 3: 考えられるすべての外向きパスをリストする

コア コンテンツからパスを推測します。ステップ 2 と同様に、往路も設計要件を満たしている必要があります。ビジネスの重要性に応じて往路を分類し、その後の設計を明確にします。外向きのパスは最終的にビジネス価値を生み出すため、そのランキングはビジネス目標に基づく必要があります。この例では、明確なオンボーディング ボタンが顧客をチェックアウト プロセスに導きます。顧客がすぐに決断できない場合、2 番目に優先すべきことは、欲しいものリストへのリンク、または製品を他の人に勧めるためのリンクを顧客に提供することです。

図 5 往路のシーケンス

これまで、ホームページを見る必要も、ナビゲーションについて考える必要もありません。ただし、コア製品のモバイル バージョンがどのようなものになるか、ユーザーがサイトのメイン コンテンツをどのように操作するかなど、重要な設計上の決定をすでに行っています。忠実度の高いモックアップが作成されると、これらの初期インターフェイスをユーザーがテストできます。

ステップ 4: すべてのコンテンツを統合する

コアコンテンツを設計し、内向きと外向きのパスをリストした後、ホームページとナビゲーションに焦点を当てます。この段階の目標は、ユーザーが最もシンプルかつ直接的な方法でコア コンテンツを見つけられるようにすることです。

ウェブサイトのホームページ、ナビゲーション ページ、検索結果ページをデザインします。いくつかの選択肢を手書きで描きます。設計するときは、コア コンテンツとパスの要素を覚えておいてください。コア コンテンツとは何か、ユーザーはどのようにしてそこに到達するのか、ビジネスはどのように変換されるのかなどです。

図 6 手描きのホームページ? 初稿

このシナリオでは、顧客をホームページからコア コンテンツ領域に移動させるために、自転車店の 3 つの主要な製品ラインがメイン ナビゲーションに表示されます。 、マウンテンバイクとアクセサリー。ブランドもターゲット顧客にとって重要な考慮事項であるため、含まれます。明らかなリンク - ショッピング カートとチェックアウト プロセスもナビゲーション エリアにあります。

図 7 フィルタリングおよび並べ替えオプションを備えた手書きのガイド ページ

以下は、記事で捉えたすべての重要なポイントと説明されている手順に関するテンプレートです (図 8)。

図 8 Core-Path メソッド テンプレート

概要

次の側面は、このメソッドの設計に対する改良点です:

ギャップの特定

最初に、その目的を疑問視するのは問題ありません。 main content ギャップを見つけます。

デザイン要素の優先順位

主要な要素を細分化し、デザイン全体でどのように表現するか優先順位を付けることができます。

デザインに集中

コアパス手法は、デザインチーム全体に明確な方向性を与えます。

コアパス方式と他の方式との直接的な違いは、初期段階では非常に小さいです。しかし、その影響は非常に大きく、コア コンテンツがデザインの中で堂々と存在するようになりました。 Web デザインの他のすべての要素は、ユーザーとビジネスを完全に統合するという 1 つの目標を達成します。