ウェブサイトデザイン分析: コアの使用

翻訳者注: この記事の元のタイトルは「コアとパスを使用した画面の設計」です。この記事の著者は、都市計画における「交通需要線」に着想を得て、ウェブサイト設計の「コアパス方式」を提案しました。フレームワークからホームページやナビゲーションに至るまでの一般的なアプローチとは異なり、「コアパス方式」では、デザイナーはコアコンテンツから始めて、内側から外側へとデザインを進めることができます。この型破りなアプローチにより、ユーザーがサイト内でコアコンテンツを見つけるための最も直接的なパスが作成されます。

オリジナルリンク: http://boxesandarrows.com/designing-screens-using-cores-and-paths/--------------------------------------------------

芝生を横切ってバス停に行きたいとき、芝生の周りの歩道を歩きますか、それとも真ん中を横切りますか? 芝生が乾いていて立ち入り禁止になっていなければ、おそらく最短ルート、つまり芝生を横切ってバス停まで歩くことを選択するでしょう。多くの人が以前にこれをやったことがあるなら、「抜け道」が現れるでしょう。 2 点間の最短距離を結ぶこのような計画外の道路の例は、私たちの周りにたくさんあります。 都市計画では、これらは「欲望の道\欲望の線」と呼ばれ、人々の自然な行動と人工的に計画された経路の違いを指します。 建築家クリストファー・アレキサンダーは、著書『パターン・ランゲージ』（1976 年）の中で「交通需要線」を定義しました。 彼は、建築における「交通需要線」の応用について、具体的に説明しました。「道路を計画する方法は、まず自然の魅力の中に目標点を設定し、次にこれらの点を結んで道を形成することです。」 - クリストファー・アレクサンダー 原則として、アレクサンダーのアプローチは目標、つまり人々が最終的に何を望んでいるかによって導かれ、それらを最も有用な方法で結び付けます。 しかし、Web デザインでは、通常、その逆のアプローチが取られます。つまり、デザイナーはホームページから始めます。次に、適合するかどうかにかかわらず、サイトの構造階層に基づいてナビゲーション スキームを開発します。しかし、目標（ユーザーが探している主なもの、またはユーザーがやりたいこと）は、設計プロセス中に最後に考慮されることが多いです。 「トラフィック需要ライン」にヒントを得て、Web ページの設計に対するこのアプローチを改善できます。コアパス アプローチを使用すると、Web サイト内で最も直接的なパスを作成し、ユーザーがコア コンテンツに直接アクセスできるようになります。

コアパスモデル

「ホームページや全体的なナビゲーション スキームから始めないでください。代わりに、コア コンテンツから始め、内側から外側へとデザインしてください。」 「目標指向になりましょう。」 情報アーキテクトの Are Halland 氏は、講演「コア パス メソッド: 見つけやすさを考慮したデザイン」でアドバイスしています。彼は、Web デザインに対する別のアプローチを概説しました。ホームページや全体的なナビゲーション スキームから始めるのではなく、コア コンテンツから始めて、内側から外側へとデザインするべきだというものです。それは直接的です。 このアプローチは3つの重要な要素に基づいています。1. コアコンテンツ

コアコンテンツは、ユーザーをウェブサイトに引き付けるものです。開発者の観点から見ると、コアとなるのは Web サイトによって提供されるコンテンツです。 コアコンテンツは必ずしも 1 ページだけではないことに注意することが重要です。 YouTube の場合、コアコンテンツは www.youtube.com のページではなく、動画です。これにより、YouTube は他のサイトでも見つけられる動画コンテンツを持つことが可能となります。 コアコンテンツには補助情報が付随する場合もあります。たとえば、技術的な詳細はコアコンテンツの拡張と見なすことができます。 Flickr のようなサイトでは、写真の説明とユーザーが付けるタグが中心となるコンテンツ、つまり写真の補助情報となります。 2. 内向きの道

ユーザーはどのようにしてコアコンテンツを見つけるのでしょうか? 訪問者が主要なナビゲーションや検索を通じてコアコンテンツを見つける場合もあります。 ただし、Google から直接提供される場合もあります。 または、他の Web サイト、広告、ブラウザへの URL の直接入力、RSS やニュースレターなど、他のパスからアクセスすることもできます。エントリ パスでは、ユーザーがどのようなキーワードを検索しているかなど、SEO も考慮する必要があります。 3. 外への道

ユーザーが探しているものを見つけたと仮定すると、次に何ができるでしょうか、また、何をするでしょうか? 基本的に、その後の各インタラクションは、ビジネスに何らかの価値をもたらします。ここで変革が起こります。アウトバウンド パスは、「ショッピング カートに商品を追加する」から「友人に商品を推奨する」まで、あらゆるものになります。内向きのパスと同様に、サイトから出るリンクなど、外向きのパスについても考慮すべきオプションが多数あります。 これら 3 つの要素はそれぞれ異なる機能を持っています。 コアコンテンツは、ユーザーとビジネスの両方にとって価値が生み出される場所です。ここでは、外向きのパスのガイダンスが大きな役割を果たします。Web サイトは最終的に、ユーザーが購入などの特定のアクションを実行することを期待しています。 内向きのパスは検索可能性を確保し、ユーザーがオンラインで希望する製品やサービスを見つけられるようにします。ビジネスの観点から見ると、アウトバウンド パスは Web サイトに ROI をもたらすものです。 以下は、Amazon を例にしたコアパス方式の図解です (図 1)。コアコンテンツは製品であり、ここでは本の表紙や主要な詳細など、赤いボックス内のコンテンツによって表されます。左側には、ユーザーが本を見つけるためのさまざまな方法がリストされています。これらは内向きのパスです。コアコンテンツでユーザーに対して投資収益を生み出す可能性があると Amazon が考える行動を、右側の可能な外部パスとしてリストします。

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

コアパス法の適用プロセス

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

あなたのコア製品は何ですか? 自転車、アクセサリー、サービスなどの候補リストを作成することから始めましょう。このリストはブレインストーミングから生まれたもので、正しいとか間違っているとかいう概念はありません。完全なリストをコンパイルした後、コアコンテンツとその補足情報を決定します。大規模なチームでは、チームメンバーや関係者との合意を形成することを意味します。 上記のシナリオでは、コア製品は自転車です。バイクの写真は、コアコンテンツを紹介するための重要な要素です。この場合、自転車の特徴、ブランド、製品ラインは、コアコンテンツに従属する情報です。サポート情報には、価格と追加の技術的詳細が含まれます。 これらの詳細に優先順位を付けて確定したら、コアコンテンツを手書きでスケッチします (図 2)。ナビゲーションやロゴを含むページ全体を描画するのではなく、コアコンテンツだけに焦点を当てます。 顧客は製品の詳細を詳しく見たいと考えるかもしれないので、この段階では 2 つの点を考慮する必要があります。まず、顧客は製品コンテンツとどのようにやり取りするのでしょうか。 2 番目: ユーザーがコアコンテンツを見つけた後の使用シナリオについて考えます。

図2 手描きのコアコンテンツと補助情報

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

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

ここから、コアコンテンツと補助情報がさまざまなシナリオでどのように提示されるかを確認できます。更新するには、バージョンの反復を何度も実行する必要がある場合があります。ステップ2: 考えられるすべての内向きのパスをリストする

ユーザーがあなたのサイトにアクセスする方法は何でしょうか? 最初に思い浮かぶのは、サイト検索、メインナビゲーション、Google、他のサイトからのリンクです。しかし、ブレインストーミングを通じて、ショッピング比較サイトからのリンクや、印刷された製品カタログなどのオフライン メディアからのリンクなど、さらに多くのパスを見つけることができます。 リスト内の各内向きパスについて、設計要件とそれを満たす方法を書き留めます。たとえば、Google やその他の検索エンジンからアクセスする訪問者には、SEO とランディング ページの最適化が必要です (図 4)。

図4 入線経路と対応する主要要件のリスト ステップ3: 考えられるすべての出線経路をリストする

コアコンテンツからパスを推測します。ステップ 2 と同様に、外向きのパスも設計要件を満たす必要があります。ビジネスの重要度に応じて外部パスを並べ替えて、その後の設計を明確にします。外向きのパスは最終的にビジネス価値を生み出すため、ビジネス目標に応じてランク付けする必要があります。この例では、明確なオンボーディング ボタンによって顧客がチェックアウト プロセスに進みます。顧客がすぐに決断できない場合、2 番目の優先事項は、顧客にウィッシュ リストへのリンク、または製品を他の人に推奨するためのリンクを提供することです。

図5: 往路の順序

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

コアコンテンツを設計し、内向きと外向きのパスをレイアウトしたら、ホームページとナビゲーションに重点を置きます。この段階の目標は、ユーザーが最もシンプルかつ直接的な方法でコアコンテンツを見つけられるようにすることです。 ウェブサイトのホームページ、ナビゲーション ページ、検索結果ページをデザインします。いくつかの代替案をスケッチします。設計する際には、コンテンツとパスの要素を念頭に置いてください。コンテンツとは何か、ユーザーはどのようにしてコンテンツにアクセスするのか、ビジネスはどのように変換するのか。

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

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

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

以下は、すべての重要なポイントを捉え、記事の手順を説明するテンプレートです (図 8)。この記事の最後にあるテンプレートをダウンロードして、Core-Path メソッドを実際に試してみてください。

図8 コアパスメソッドテンプレート

要約する

このアプローチによってデザインが改善される方法をいくつか紹介します。ギャップを特定します。

最初に、メインコンテンツの目的を疑問視すると、ギャップが明らかになることがあります。デザイン要素を優先します。

主要な要素を細分化することで、デザイン全体でそれらをどのように表示するかを優先順位付けできます。デザインに焦点を当てます。

コアパス アプローチは、設計チーム全体に明確な方向性を提供します。 コアパス方式と他の方式との違いは、初期段階では小さいです。しかし、その影響は大きく、コアコンテンツがデザインの中で際立つようになりました。 Web デザインにおける他のすべての要素は、ユーザーとビジネスの完璧な組み合わせという 1 つの目標に役立ちます。

元のタイトル: ウェブサイトのデザイン分析: コアの使用

キーワード: ウェブサイト、コア、パス方式、ページカウント、翻訳者、記事、オリジナル名、デザイン、ウェブマスター、ウェブサイトのプロモーション、収益化