ウェブサイト構造のベストプラクティス

公開: 2020-12-17

ウェブサイトは本質的に人々が使用するために公開された情報リソースです。 本と同様に、それらはそのボリュームが小さいか、または広範囲である可能性があります。 しかし、本とは異なり、ウェブサイトのコンテンツは、表現とデザインの自由を利用して、さまざまな方法で構成することができます。

同時に、ウェブサイトは業界のUXのベストプラクティスとユーザーの習慣や期待に従う必要があるため、自由はかなり制限されています。 Webサイトの構造は、ターゲットオーディエンスが情報にアクセスして使用する方法の鍵となります。 したがって、多数のルールに従って構築する必要があります。

ウェブサイトの構造が重要なのはなぜですか?

Webサイトの構造とは、サイトの構築方法、サイト内のすべての単一サブページが相互にリンクされている方法、およびどの階層に従うかを指します。 優れた構造により、情報を直感的かつ使いやすく見つけることができます。

デザイナーがサイト構造を作成するとき、訪問者がWebサイトをどのように使用し、そのコンテンツをナビゲートするかを考える必要があります。 焦点は、を公​​開するから、どのように、そしてなぜ公開するかに移ります。

ウェブサイトの構造は、ビジネスオーナーの目標、サイトの訪問者のエクスペリエンス、ウェブサイトのメリット、コンテンツをクロール、ランク付け、適切なユーザーに提供する検索エンジンという3つの主要な観点からの基本的な概念です。

優れたウェブサイト構造の仕組み

ウェブサイトの情報が適切に構成され、関連するデザインによってサポートされている場合、サイトの所有者、ユーザー、検索エンジンなど、誰もが満足しています。

優れた構造の仕組みは次のとおりです。

事業主の目標をサポートし、期待される結果を後押しします

あなたがウェブサイトに投資するとき、あなたはそのパフォーマンスのために明確な目標を設定するべきです。 これらの目標は、サイトの構造によって統合および表現される必要があります。

たとえば、公開されているブログやリソースに焦点を当てたい場合は、ホームページに最高の記事を含め、メニューでリソースセクションを目立たせる必要があります。 また、最新のブログ投稿で開くようにホームページを設定することもできます。これは、デジタル出版社やブロガーが使用する典型的なWordPressオプションです。

WordPress管理パネルの読み取り設定

WordPress管理パネル、読み取り設定–静的ページおよびブログページとしてのホームページの選択

ユーザーエクスペリエンスを向上させます

Webサイトの構造は、Webサイトのユーザーエクスペリエンスに密接に影響します。 情報が論理的な方法で構造化され、すべてに直感的にアクセスできる場合、ユーザーはコンテンツ内をシームレスに移動して、探しているものを見つけて使用します。

ロボットのクロールを最適化することでSEOを強化します

検索エンジン(Google)は、サイトのコンテンツをクロールしてユーザー向けに並べ替えるツールで動作します。 クローラーに適したWebサイトは構造が優れているため、エンジンによって上位にランク付けされます。

XXWebサイト構造のベストプラクティス

ウェブサイトをどのように計画し、その構造を構築するかについての明確なビジョンがなければ、ウェブのデザインと開発を行うことはできません。

次のグッドプラクティスには、Webサイトの計画に取り組む際の上記の視点と利点が含まれています。

ウェブサイトのデザインのヒント:ウェブデザインでゲームをステップアップする方法

1.ビジネス目標とターゲットオーディエンスを設定します

あなたのウェブサイトはあなたのビジネスに役立つ道具です。 どのような情報を公開し、どのくらいの頻度で更新するかを計画することは、そのWebサイト構造の基本です。 サイトで提示および販売する製品またはサービスを決定する必要があります。

目標とコミュニケーションの目的に基づいて、次の2つの基本的なアプローチから選択できます。

  • ユーザー中心設計–すべての情報がターゲットユーザーグループに分類および構造化されています。 このアプローチは、ユーザーが自分のニーズに合わせて独自のカテゴリと情報を見つける必要がある何百万もの人々にサービスを提供する、電気通信や機関などの大企業にとって必須です。
エンタープライズセクション

ATT.comは「個人」セクションで直接開きますが、中小企業や企業向けのセクションもあります。 この画像では– [エンタープライズ]セクションが選択されています

続きを読む:インフォグラフィック:ユーザー中心のWordPressコンセプトを開発する方法

  • 会社または製品中心のデザイン–これらのWebサイトは、会社の所有者自身および/またはその製品を紹介するように構築されています。 また、特定のユーザーグループを対象としたセクションやページが含まれる場合もありますが、それでもブランドが主な焦点です。
IMDB.comのWebサイトの構造

IMDB.comのWebサイトの構造は、映画、テレビ番組、有名人などの制作に重点を置いています。

2.競合他社の調査を行う

あなたのウェブサイトを設計するとき、競合他社を調査するいくつかの理由があります。 それらの1つは、サイトがどのように構成されているかを調べることです。

サイト構造に焦点を当てる場合、競合他社のホームページレイアウト、競合他社がサービスをグループ化して提示する方法、内部ページの階層、ナビゲーションの編成方法、およびユーザーの行動フローを調査することをお勧めします。

SEOの観点から、競合他社の調査は、自分のサイトのメインページの名前とURL、カテゴリ、セクション、およびナビゲーションに使用する業界関連のキーワードを見つけるのに役立ちます。

競合他社の調査を使用してマーケティング戦略を磨く方法

3.すべてのコンテンツのインベントリを作成します

コンテンツを構成できるようにするには、最初にサイトで公開する内容を説明する必要があります。 すべてが揃ったら、それをカテゴリにグループ化し、適切なラベルを選択するだけです。

これが新しいWebサイトの場合は、公開する必要があるもののリストを作成できます。 コンテンツ制作の責任者と、コンテンツの作成および更新の頻度をメモすることを忘れないでください。

サイトを再設計する場合、コンテンツの監査も最初のステップの1つです。

コンテンツファーストのアプローチでウェブサイトの再設計を実行する方法

4.投稿タイプを決定します

投稿タイプは、さまざまなタイプのWordPressサイトコンテンツを指すために使用される用語です。 各投稿タイプは通常、異なるページデザイン、カスタムフィールド、および機能に関連付けられています。

DevriXポートフォリオ投稿タイプ

DevriXは、ポートフォリオ投稿タイプを使用して、クライアントのケーススタディを公開しています

デフォルトでは、WordPressには2つの主要な投稿タイプ(ページと投稿)があります。これは、CMSがブログプラットフォームのみであったときに発生します。ブログには、より永続的なコンテンツ用の複数の「静的」ページと、ニュースや更新用のブログ投稿が必要でした。

あなたのウェブサイトの目的が何であれ、あなたはこれらの2つの基本的な投稿タイプを利用する必要があります。 したがって、サイトで公開する必要のあるすべてのコンテンツを収集して説明したら、次の2つのタイプに分けます。

  • ページの場合–何をするか、コアサービスは何か、ビジネスを行う理由などの情報が定期的に変更されない、より永続的、保守的、または常緑の部分–ほとんどの場合時間に敏感ではありません。
  • 投稿の場合–ニュース、ブログ投稿、ホワイトペーパー、調査などの動的な部分、または現在の情報を含み、将来も継続的に作成されるコンテンツ。

ポートフォリオ、紹介文、プロジェクトなどより多くの投稿タイプが必要な場合があります。 良いニュースは、WordPressでカスタム投稿タイプを作成するための複数のプラグインがあり、いくつかのテーマにはさまざまなものが含まれていることです。 また、それ以降のバージョンでは、WordPressはカスタム投稿タイプの登録を有効にしました。

必要な投稿タイプの選択が完了すると、それらを含めるようにサイトを構成するのがはるかに簡単になります。

WordPressページとWordPress投稿、常識、SEO

5.バイヤージャーニーとユースケースを作成する

Webサイトでの購入者の旅は、ユーザーが最初にアクセスしてからサイトで製品やサービスを購入するまでのプロセスです。 ウェブサイトの構造はこの購入プロセスに基づいている必要があり、ユーザーが必要なものを見つけて次の段階に進むのを容易にします。

コンバージョンパス:ウェブサイトでユーザージャーニーを定義する

ユースケースは、ユーザビリティの基本的な概念です。 それらは訪問者があなたのウェブサイトをどのように使用するかについて書かれた説明です。 各ユースケースを説明するには、ユーザーの意図に基づいて、目標に到達したときに終了する一連の簡単な手順をリストする必要があります。

サイト構造を決定するときは、すべてのターゲットグループのユースケースを書き留める必要があります。 これにより、サイトでのユーザーの行動を明確に把握できるため、サイトの構造でサポートできるようになります。 これは、サイトの機能を計画するための最良の方法でもあります。

MVPウェブサイト:あなたが知る必要があるすべて+インフォグラフィック

6.主要なキーワード調査を行います

あなたがウェブサイトを構築した後、あなたはあなたが望むだけそれに多くのコンテンツを追加することができるでしょう。

しかし、サイトを計画する、またはサイトを再設計するプロセスでは、ランク付けしたい最も重要で関連性のあるキーワードを使用してWebサイト構造を構築することが最も重要です。

サービスを「製品」または「ソリューション」と呼びますか? オンラインストアに「ブランド」セクションが必要ですか?

あなたがしていることに関連する最も人気のある用語を含めるようにしてください。 今後数年間でSEOマーケティング戦略の中核となる言葉や表現を使用してください。

無料と有料の両方の多くのツール、およびWebサイトの主要なキーワード調査を行う方法に関するチュートリアルがあります。 それらを賢く組み合わせて、最も常識的な選択から始めてください。

正しく行われたSEOのキーワード研究

7.分類法を利用する

タクソノミーは、公開されたコンテンツを分類するために使用されるシステムです。 公開するものにラベルと説明用語を追加するのが戦略です。 分類法は、類似したタイプのコンテンツをグループ化し、これらのグループ間の関係と類似性を定義するために使用されます。

WordPressでは、分類法が投稿タイプに追加されます。 階層化できるカテゴリと、スタンドアロンのラベルであるタグがあります。 投稿タイプの分類システムを作成し、ユーザーが探しているコンテンツを簡単に見つけられるようにします。

DevriXサイトにカテゴリを投稿する

DevriXサイトにカテゴリを投稿する

検索エンジンは、関連する方法でコンテンツを並べ替えてランク付けするのに役立つため、分類法も使用します。 ランク付けするキーワードとそれらを使用する投稿タイプを確定したら、選択したキーワードを分類法(カテゴリとタグ)として追加するだけです。

WordPressでは、分類法は必須ではありません。 ただし、サイトメニューに追加できるため、サイト構造と密接に関連しています。 たとえば、DevriXブログには、ビジネス、マーケティング、開発の3つの主要なカテゴリに基づいた記事のサブメニューがあります。

8.シンプルで論理的なナビゲーションを作成する

ウェブサイトの構造は、主にメニューによってそのデザインで視覚化されます。 あなたのビジネスの優先事項はメニュー構造に実装され、あなたの最高のコンテンツを特徴とするべきです。

メニューに含まれるページとカテゴリは、階層がなくても、従属するか、同じように作成できます。 各レベルのリンクの数はメニューの幅と呼ばれ、レベルの数はメニューの深さと呼ばれます。

メニューの幅と深さに関しては、従うべきいくつかの簡単なルールがあります。

  • 多くの水平カテゴリを使用しないでください–最大7〜8を選択してください。
  • 深くしすぎないでください–従属は3レベルを超えて下がってはいけません
  • 対称性とバランスを保ちます。1つのセクションにサブページが多すぎて、別のセクションに2つしかない場合は、構造全体が間違っている可能性があります。

一般的なビジネスWebサイトでは、標準的な場所にあるシンプルで予測可能なナビゲーションを使用する必要があります。 WordPress Webサイトでは、一部のテーマで2つ以上のメニューの場所が許可されており、それぞれに異なるページとリンクを選択するオプションがあります。 サイトのフッターにメニューを追加し、サイドバーのナビゲーションを分離しておくことをお勧めします。

WP編集メニュー

WordPressの編集メニューオプションには、ページ、投稿、その他の投稿タイプ、カスタムリンク、カテゴリが含まれる場合があります

9.WebサイトのURL構造とパーマリンクを決定します

WordPressのURL構造は、設定で事前定義されています。

キーワードの調査を正しく行い、分類法を作成し、メニュー階層を決定すると、パーマリンクを簡単に完成させることができます。 あなたの最も重要なキーワードと分類法は、SEOのためにそれらをより強くするためにURLに入る必要があります。

WordPressウェブサイトのURL構造に関するいくつかの良い習慣は次のとおりです。

  • https://yourwebsite.com/ post-nameのように、投稿名とドメインを組み合わせたパーマリンク構造を使用します。
  • デフォルトでは、WordPressは、タイトルのすべての単語を含む、ページと投稿のパーマリンクを作成します。 ただし、それらは長すぎて重要でない単語が含まれている可能性があるため、編集してください。
  • Googleでページを最高にランク付けするには、パーマリンクの長さを約60文字に保ちます。
  • 可能な限り、タイトルから最も重要なキーワードを保持することにより、より短いURLを作成します。これは、検索エンジンがページのインデックスを作成するのにも役立ちます。
  • 接続詞や代名詞などのストップワードをすべて削除します。
  • ハイフンを使用してパーマリンク内の単語を区切り、ユーザーと検索エンジンの両方がページの内容を確認できるようにします。
WordPressのパーマリンク設定

WordPressオプションのパーマリンク/ URL構造–ポストネームタイプは、キーワードが含まれているため、通常最も好ましいタイプです。

10.Webサイトのサイトマップを追加します

サイトのサイトマップは、Webサイトのすべてのページと公開されたメディアを含み、それらがどのように相互に関連しているかを示すファイルです。 Googleやその他の検索エンジンをコンテンツのロードマップとして提供し、コンテンツをより速く、よりインテリジェントにクロールして分類するのに役立ちます。

サイトマップは必須ではありませんが、特に複雑なサイトの場合は強くお勧めします。 また、ファイルは自動的に生成および更新される必要があります。

プラグインなど、WordPressサイトにサイトマップを作成して追加するのに役立つツールはたくさんあります。 ただし、最新リリースのWordPress5.5では。 XMLサイトマップはデフォルトで有効になっており、ユーザーにも表示される場合があります。

サイトの構造や、検索エンジンとユーザーの両方がサイトをナビゲートしているときに何が表示されるかについて疑問がある場合は、サイトマップを確認してください。

ATTサイトマップページ

ATT.comサイトマップ–デザインに合わせて内部ページとして作成

あなたのウェブサイトの階層を計画する

上記のすべてのタスクを完了すると、サイトの構造を簡単かつ迅速に完成させることができます。 最終的な選択を行う際に考慮すべき一般的なタイプのサイト構造は次のとおりです。

階層的なWebサイトとは、一部のページが他のページに従属し、構造がツリーに似ていることを意味します。 一般的なWebサイトでは、ホームページが上部にあります。 そこから、メインメニューの他のページに移動します。このページにはさらにサブページを含めることができます。

非階層的なWebサイト構造は、下位ページがないことを意味します。 コンテンツが少なく、ページ数が少ない場合は、すべて同じように作成して、メインメニューに水平に表示することができます。

ニカエージェンシー階層サイトなし

階層のないWebサイトの例– Nika Agency –このサイトにはポートフォリオセクションがありますが、プロジェクトページはサブページではありません(例:https: //nika.agency/ a​​pothe-pure-details .html)。

単一ページのWebサイトは、非階層構造のもう1つの良い例です。 すべてが1つのページに公開されているという理由だけで、親/子ページはありません。 単一ページのデザインは、寿命の短いイベントやプロモーションのWebサイト、ティーザーページ、または名刺のような非常に短い表現が必要なビジネスに適したソリューションです。

GlobeKitシングルページシングルサービスウェブサイト

GlobeKitは、開発者がアニメーション化されたインタラクティブな地球儀をWebにすばやく提供できるようにする単一サービスのWebサイトです。 6つのセクションで構成されており、すべてがインタラクティブなアニメーションナビゲーション(スクロール)を備えたホームページにあります。

シーケンシャル、マトリックス、データベースなど、あまり人気のないタイプのWebサイト構造があります。 あなたが彼らの名前から推測したかもしれないように

  • シーケンシャルモデルは、一連のステップでユーザーを関与させます
  • マトリックスを使用すると、ユーザーはサイトのコンテンツをナビゲートする方法を独自に選択できます。
  • データベースデータベース上に構築されており、その属性を使用してユーザーエクスペリエンスを検索および生成します。

最終的な考え

ビジネスウェブサイトの一般的な構造は、クリーンでシンプルかつ論理的でなければなりません。 構造の設計は、ウェブサイトの設計と開発における基本的なプロセスです。 上記のグッドプラクティスに従うことで、サイトの構造をビジネス目標やターゲットグループに関連させるためのすべての重要な要素を考慮に入れることが保証されます。