SEOに効果的なサイト設計方法

WEBサイトはユーザーとの接点を持つ場になります。そのためWEBサイトに掲載されているコンテンツの良し悪しで訪問してくれたユーザーが顧客になるのか否かが決まってきます。良いサイトは総じて事前の設計がしっかりしているため、何となく必要なコンテンツを作っていくのではなくサイトの全体像を把握して、どういったサイト構造にしていくのか整理していきます。
また、どんなに良質なWEBサイトを作成してもユーザーに訪問してもらわなければ宝の持ち腐れになってしまいます。ユーザーにサイトへ訪問してもらう方法はいくつかありますが、サイト設計時に配慮しないといけない領域はSEOの部分です。SEOに配慮したWEBサイトの設計方法についてこちらでは紹介いたします。

SEOを意識したサイト設計が必要な理由

WEBサイトはターゲットとなるユーザーに訪問してもらって初めて価値を生みます。そのためターゲットにサイトに訪問していただく必要がありますが、手段は様々あります。その中でも検索からの流入は能動的に情報を探しているユーザーのためサイトとの相性は良いです。
また、博報堂が実施した調査では商品を買いたいと思った時に情報収集手段として検索を利用しているユーザーは6割もいることが明らかになっています。

ユーザーが情報を探している時に、自社のWEBサイトが検索上位にランキングされるようにSEOを意識したサイト設計ができることで、検索エンジンに自社のサイト情報をしっかりと伝えることができるようになります。

サイト・コンテンツの種類

WEBサイトと言っても様々な目的があり、目的毎に作成しなければいけないサイトやコンテンツは異なってきます。まずはサイトを立ち上げる目的から「どんなサイトにすべきなのか」「どんなコンテンツを用意すべきか」を把握する必要があります。

サイトの種類

サイトの種類は全部で10種類あります。WEBサイトを立ち上げる目的によって作成が必要なWEBサイトも変わってきます。10種類の中で、「会員サイト」と「イントラネット」だけは限定された範囲での公開になるため検索からの流入は不要になります。検索流入が不要のコンテンツに限ってはSEOの意識は不要ですが設計手法としては大きく差異はありません。

項目	目的
コーポレートサイト	・企業情報発信 ・会社のイメージ向上 ・信頼の獲得
ブランドサイト	・ブランド認知
リクルートサイト	・採用促進
ECサイト	・商品(サービス)販売
メディアサイト	・ブランド認知 ・ナーチャリング
プロモーションサイト	・ブランド認知 ・商品(サービス)販売
会員サイト	・LTVの向上
ランディングページ	・商品(サービス)販売
イントラネット	・社員向け情報
ウェブアプリケーション	・特定の目的を達成するツール

コンテンツの種類

コンテンツの種類は全部で16種類あります。サイトの運用目的によって必要なコンテンツは変わってくるため、サイト設計時に目的と照らし合わせて取捨選択を行なっていきます。

項目	内容
会社概要	・企業情報
最新情報	・お知らせ
事業内容	・展開している事業内容
サービス・商品説明	・商品やサービス情報
実績紹介	・事例紹介 ・お客様の声
よくある質問	・顧客から問い合わせが多い質問に対しての回答集
コラム	・ブランドに関連する記事
キャンペーン	・プロモーション情報 ・商品やサービス情報
採用情報	・求める人物像 ・社員紹介 ・採用情報・フロー ・募集職種 ・福利厚生
代表メッセージ	・会社の立ち上げストーリー
アクセス	・所在地 ・所在地までのアクセス方法
免責事項	・プライバシーポリシー
IR	・業績・財務 ・ライブラリー ・株式情報 ・コーポレートガバナンス
CSR	・活動内容
お問い合わせ(エントリー)フォーム	・顧客情報入力項目
購入フォーム	・顧客情報入力項目 ・決済情報入力項目

SEOを考慮したサイト設計方法

サイトやコンテンツの種類を把握できたらサイトの設計に入っていきます。サイト設計は「サイト・リンク構造設計」「画面設計」「ビジュアルガイドライン設計」「マークアップガイドライン設計」「システム設計」の大きく分けて5STEPで設計していきます。

サイト・リンク構造設計

ステップのまず最初に行うのはサイト構造とサイト内を柔軟に回遊できるようにリンク構造の設計を行なっていきます。ここで整理した構造がこの後の工程の基準になるため最も重要なステップと言っても過言ではありません。

サイト構造設計

サイトの構造設計では、必要なコンテンツを洗い出し、それをサイトマップとしてまとめる作業になります。

リンク構造設計

検索エンジンにコンテンツがインデックスされるには、コンテンツがクローラーに認識される必要があります。クローラーにコンテンツを認識してもらうサポートをするのに内部リンクは非常に有効です。またサイト内の回遊が行いやすいリンク設計はユーザーにとっても利便性が高くなります。

トップ階層との縦リンク	どのコンテンツからもTOPページに戻るリンクを用意する
上下階層間の縦リンク	現在いるコンテンツの上階層・下階層へのリンクをコンテンツ内に設置する
同一カテゴリ間の横リンク	同一のカテゴリ間のコンテンツを横でつなぐリンクを設置する

内部リンクは縦横に網羅的に設置することが重要です。網羅的に設置する手助けをするリンクの設定方法として大きく4種類あります。

ナビゲーションリンク	ナビゲーションは、グローバルナビゲーション、ローカルナビゲーションの大きく分けて2種類のナビゲーションがあります。ページを縦横無尽に回遊するための手助けを行うリンクのため、上下階層間の縦リンクと同一カテゴリ間の横リンクが設置できます。
パンくずリスト	トップページから現在表示しているページまでの階層を表すリンクの集まりになるため、上下階層間の縦リンクを設置できます。
コンテンツリンク	ページのメインの役割を表すコンテンツに設置されるリンクは文章の自然の流れの中に設置されます。リンク先は参考コンテンツや関連コンテンツになるため、同一もしくは異なるカテゴリやコンテンツ間で自由にリンクが設置されます。
HTMLサイトマップ	WEBサイト内のコンテンツもしくはカテゴリのリンクをMECEに網羅したマップページになります。コンテンツの一覧性があるため、ページ内の回遊を促進するリンク集になります。

ナビゲーションリンク

グローバルナビゲーションは、Webサイトの全ページに共通で設置されているナビゲーションです。トップページや最上位のカテゴリにリンクを貼ることが多くなります。グローバルナビゲーションは、ヘッダーナビゲーションやフッターナビゲーションが利用されることが多いです。ヘッダーナビゲーションは、ページの最上部に設置されナビゲーションのため、第2階層のカテゴリなどそのサイトの最も主要となるリンクを設置することをおすすめします。フッターナビゲーションは、ページの最下部に設置されるナビゲーションです。ページ最下部でユーザーからは見にくい位置にリンクが貼られるため重要度はそこまで高くないリンクを設置することがおすすめです。
ローカルナビゲーションは特定のページにだけ表示されるナビゲーションリンクになります。ページ内のサイドナビゲーションとして使われる機会が多く、特定のカテゴリ内の遷移を促すリンクが貼られることが多くなります。
ナビゲーションリンクは、ピラミット型リンクの設置を行うことでSEOに効果のある内部リンクが設置しやすくなります。ピラミット型は、TOPページを頂点として階層構造にページを設置する方法になります。上階層に行けば行くほど、サイト内リンクが集中するためリンクジュースが渡りやすくなります。下の階層からリンクジュースを上げていくことで、上階層でビックワード、下階層でロングテールワードを拾えるような構造になります。

コンテンツリンク

コンテンツリンクは、ページの主要コンテンツの中に設置されるリンクになります。コンテンツリンクは、トピッククラスター型のリンク設置を行うことでSEOに効果のある内部リンクが設置しやすくなります。トピッククラスター型は、ピラーページとクラスターページで構成されます。個別のクラスターページとその内容を一元的にまとめたピラーページを作成することで、ピラーページにリンクが集中しやすくなり、リンクジュースが渡りやすくなることでピラーページの評価をあげやすくなります。クラスターページではロングテールワードを拾い、ピラーページでビックワードやミドルワードを狙っていくことで、多岐にわたる検索意図を拾うことができトピッククラスター全体でユーザーニーズを充たすことが出来るようになります。

画面設計

作成するコンテンツやリンク設計ができたらそれをベースに各コンテンツのUIを設計していきます。設計したUIはワイヤーフレームやプロトタイプに落とし込むことでイメージを共有できる状態にします。画面設計には「Atomic Design」を採用することでこの後のガイドライン設計やシステム設計などに一貫性を持たせることができます。

ビジュアルガイドライン設計

ビジュアルガイドラインにはサイトにて共通で使用するビジュアルのルールを定義します。画面設計で整理した項目に対して、使用する際のルールをガイドラインにまとめていきます。
ビジュアルガイドラインに入れる要素は全部で3種類になります。商品やサービスのブランド構築のフェーズでビジュアルアイデンティティを構築している場合は、そこで定義しているロゴやブランドカラーを引き継いで使用します。

カラーパレット	メインカラー・アクセントカラー・バックグラウンドカラーの3種類は最低限定義します。またWEBサイトの場合、カラーの指定はRGBで設定することが多いため、RGBで設定しておくことを推奨します。
タイポグラフィ・フォント	タイトル・サブタイトル・見出し・本文に対して、フォントやサイズを定義します。
UI	画面設計で整理したUIに対して、サイト内で使用する際のルールを定義します。

マークアップガイドライン設計

マークアップガイドラインにはサイトにて共通して使用するUIパーツのマークアップルールを定義します。画面設計で整理した項目とSEOの観点も考慮して、セマンティックなマークアップルールを作成します。また、ページの表示速度はSEOの評価観点の1つになるためページに使用するリソースのパフォーマンスバジェットも定義します。

セマンティックなマークアップ

セマンティックなマークアップをすることで検索エンジンに認識してもらいやすくなります。方法としては文章構造を明示化する「構造化タグ」と文章の意味を明文化する「構造化マークアップ」の2種類があります。

構造化タグ	HTML文書の本体となるbody要素内のコンテンツに対して、適切なアウトライン(文章構造)を明示的に検索エンジンに伝える
構造化マークアップ	HTML文章の意味を明示的に検索エンジンに伝える

構造化タグ

構造化タグはコンテンツのレイアウトに対して記述を行います。
全ての基本となるのが<section>タグになります。<section>は見出しをつけられる文章のまとまりを表します。見出しをつけられる文書のまとまりを「セクション」と呼び、セクションを区分するタグを「セクショニングタグ」と呼びます。セクショニングコンテンツの中で、特別の役割を持つもの(記事/補足情報/ナビゲーション)として<article><aside><nav>の3つのタグが定義されています。
<header>と<footer>は、単体で成り立つまとまりではなく、セクションに付随する1要素になります。

<header>	ヘッダーであることを示す。また導入やナビゲーションの補助であることを示す。<header>は文書のヘッダ情報を示す<head>タグとは違い、コンテンツの中のヘッダー情報である。
<section>	見出しをつけられる文章のまとまりであることを示す。1つの見出し(h要素)+本文+補足情報で構成される
<article>	独立した記事やコンテンツであることを示す。ブログでは記事全体がニュースサイトではそれぞれのニュース情報が、独立した記事に該当する
<aside>	補足情報を示す。本文と関連しているが、区別して掲載するべき補足情報。本文とは直接関係ないサイドバーにも使用される。
<nav>	ナビゲーションであることを示す。グローバルナビゲーションやパンくずリストなどサイト内の主要なページへのリンクに使用される。
<footer>	フッターであることを示す。コンテンツ作成者や著作権に関する記述(Copyright)を記載。その他にも関連文書へのリンクなどの情報を記載できる。

構造化マークアップ

文章の意味を検索エンジンに伝えるのが構造化マークアップですが、マークアップ方法は3種類の方法があります。

Microdata	HTML5から追加され、各検索エンジンで仕様統一を図った最初の形式になります。 構造化データと実際のHTMLデータが一致しやすく、多くのWebサイトで活用されています。しかしソースが煩雑になってしまうのがデメリットです。
RDFaLite	W3Cによって規格化されたRDFをXHTMLに埋め込む技術としてRDFaが開発され、それを簡素化してMicrodata形式に近づけたものになります。 Micodataと同じく構造化データと実際のHTMLデータが一致しやすくXHTMLでも使える一方、Microdataと同じくソースが煩雑になるのがデメリットです。
JSON-LD	JSON形式に意味付け機能を付与したもので、あらゆるデータをコンピュータが解釈しやすいような形にしています。 ソースと分離でき、不可視のデータは記述が少なくて済みます。しかし可視データは内容を2箇所に記述しなければいけません。

どの形式にもメリット・デメリットは存在しますが、コンピュータが認識しやすいJSON-LDの形式をGoogleは推奨しています。JSON-LDは通常のHTMLコードと分離して構造化マークアップもできることからメンテナンス性も高くなります。
Googleは構造化データを利用して認識したコンテンツをリッチな機能を使って検索結果に表示します。リッチな検索結果を表示できる項目は6分類31項目あります。

分類	項目名	内容
eコマース,エンターテインメント	Book	検索で見つけた書籍を検索結果から直接購入できる書籍アクション
eコマース,組織	よくある質問	特定のトピックスに関する質問と回答の一覧を掲載したページ
eコマース	Product	商品に関する情報(価格、在庫状況、クチコミの評価など)
eコマース,組織,エンターテインメント	クチコミ抜粋	クチコミサイトでのクチコミや評価からの抜粋。通常は、クチコミ投稿者による総合評価スコアの平均です
組織,求人	EmployerAggregateRating	Google の求人検索機能で表示される、多数のユーザーから収集した採用側組織に対する評価
組織	家でのアクティビティ	ユーザーが自宅でできるオンライン アクティビティを見つけることができるインタラクティブなリッチリザルト。
組織	ハウツー	あるタスクを正しく完了するための一連のステップを、順を追ってユーザーに説明するもの。動画、画像、テキストを利用できます。
組織	ローカル ビジネス	Google ナレッジパネルに表示されるビジネスの詳細情報。営業時間、評価、経路に加え、予約や注文のアクションも表示できます。
組織,求人	Logo	検索結果と Google ナレッジパネルに表示される組織のロゴ
スポーツ	Article	サムネイルより大きな画像を添えた見出しテキストなど、トップニュース カルーセルやリッチリザルトの機能で表示されるニュース、スポーツ、ブログ記事
スポーツ,エンターテインメント	カルーセル	1 つのサイトからの情報を順次リストまたはギャラリーの形式で表示するリッチリザルト。
スポーツ	Video	検索結果に表示される動画情報。動画の再生、動画セグメントの指定、コンテンツのライブ ストリームも可能です。
求人	JobPosting	求職者が仕事を見つけるためのインタラクティブなリッチリザルト。Google の求人検索結果に、ロゴ、クチコミ、評価、仕事の詳細を表示できます。
求人	職業訓練	求職者や学生が、職業訓練プログラムを見つけるためのインタラクティブなリッチリザルト。
求人	給与推定額	Google の求人検索機能で表示される給与推定額情報。特定の職種における給与額の範囲や地域別の平均給与などが表示されます。
エンターテインメント	Event	参加できる時間と場所が決められたイベント（コンサートや芸術祭など）のリストを表示するインタラクティブなリッチリザルト。
エンターテインメント	Movie	映画カルーセルは、ユーザーが Google 検索で映画のリストを探すのに役立ちます。各映画のタイトル、監督情報、画像など、詳細情報も表示できます。
エンターテインメント	ポッドキャスト	ポッドキャストを、再生可能なリンクと一緒に Google 検索に表示できます。また、その他の Google Podcasts プラットフォーム（Google Podcasts アプリや Google アシスタントなど）に表示することもできます。
その他	パンくずリスト	そのページがサイト階層内のどこに位置するかを示すリスト。
その他	Course	プロバイダ固有のリストに表示される教育コース。コースには、コースのタイトル、プロバイダ、簡単な説明を掲載できます。
その他	Dataset	Google データセット検索で表示される大規模なデータセット。
その他	ファクト チェック	信用できるサイトが他者の主張を評価した結果の要約。
その他	画像のライセンス	Google 画像検索で、画像にライセンス情報が存在することを示す「ライセンス可」バッジを表示できます。画像ビューアにライセンス情報へのリンクが表示され、その画像の使用に関する詳細を知ることができます。
その他	数学の解法	数学の問題のタイプと特定の数学の問題に関する詳細なチュートリアルを示す構造化データを追加することで、数学の問題について生徒や教師などをサポートできます。
その他	練習問題	数学や科学の練習問題に構造化データを追加することで、教育について生徒、教師、保護者をサポートできます。
その他	Q&A	Q&A ページとは、1 つの質問の後にその質問に対する回答が続く、質問と回答の形式のデータが含まれているウェブページです。
その他	Recipe	個別のリッチリザルトとして、またはホスト カルーセルの一部として表示されるレシピ。
その他	サイトリンク検索ボックス	個別のリッチリザルトとして、またはホスト カルーセルの一部として表示されるレシピ。検索結果に表示されたウェブサイトを対象とする検索ボックス。
その他	ソフトウェア アプリ	ソフトウェア アプリに関する情報（評価情報、説明文、アプリへのリンクなど）。
その他	Speakable	テキスト読み上げ（TTS）を使用する Google アシスタント搭載デバイスで読み上げ可能なニュース コンテンツを、検索エンジンやその他のアプリケーションが識別できるようにします。
その他	定期購入とペイウォール コンテンツ	サイトのコンテンツをペイウォール コンテンツとして明示することにより、そのコンテンツが Google のガイドラインに違反するクローキングを行っていないことを Google が容易に識別できるようにします。

構造マークアップにはJSON-LD形式の知見が必要になってきます。直で書くことも可能ですが、作成を支援してくれるツールもあります。「構造化データマークアップ支援ツール」を活用することで、マークアップの記述をツール側で作成することができます。出力されたHTMLをサイトへコピー&ペーストのみで構造化マークアップに対応することが可能になります。

またJSON-LDの形式で記述した構造化マークアップが実際にちゃんと記述できているかを確認するツールとして「リッチリザルトテスト」が存在します。実際にこのツールを使うことで記述エラーが無いか確認できます。

パフォーマンスバジェットの作成

Webサイトを作成する際にはHTML・CSS・JavaScript・画像など様々なリソースを使用します。リソースが多ければ多いほどページを表示するスピードは遅くなり、検索エンジンからの評価は下がってしまいます。そのため各リソース毎に利用できる容量に上限を設けて、Webサイトを作成することでページ毎に差異が無くなりどのページでも一定数の表示速度を担保することができるようになります。

項目	バジェット
HTML	10KB
画像	30KB
CSS	10KB
JS	100KB
フォント	20KB
合計	170KB

各ページでどれだけのリソースを読み込んで良いかの上限ライン(バジェット)は、3Gの遅い回線でもストレスなくページが表示できるようにweb.devが推奨している合計170KBに収まる内訳になっています。しかしページによって画像が多いページやJSプログラムが多く必要なページなど様々なため、170KBに収めるための配分はページ個々に調整します。

マークアップガイドライン作成

マークアップガイドラインはビジュアルガイドラインに記載した項目のコード部分を標準化するために整理を行います。整理を行う際には前述したセマンティックなマークアップを考慮してガイドラインを作成していきます。

システム設計

どういった形でWEBサイトを世の中に公開していくかをシステム設計を通して情報を整理して行きます。システム設計は開発手段によって設計する内容も異なってきます。ゼロから作るスクラッチ開発の場合、自由度が高い反面、費用が膨らんでいきます。一方でパッケージやオープンソースとして用意されているシステムを使って構築する場合は自由度が下がる反面、費用も抑えられます。また既にサービスとして提供されているシステムを使用する方法もあります。

スクラッチ開発	必要な機能を独自に一から構築する方法
パッケージ開発	標準的な機能が搭載されたパッケージを使って構築する方法
オープンソース開発	標準的な機能が搭載されたオープンソースを使って構築する方法
クラウドサービス利用	サービスとして提供されている機能を利用する方法

WEBサイトを構築する上で使用するシステムは主にCMSになってきます。CMSはContents Management Systemの略で、WEBサイトに掲載されている情報を簡単に作成・編集・更新できるシステムになります。CMSを構築する際は、CMSの選定と各種CMSに合わせた設計が必要になります。

まとめ

WEBサイトに掲載されている情報を通してユーザーと接点を持つことができるため、自社や自社サービスを周知するのにWEBサイトは非常に重要なコンテンツになります。またWEBサイトにユーザーを呼び込むための集客方法はいくつかありますが、検索エンジンからの集客はサイト設計方法の良し悪しで大きく変わってきます。つまりユーザーにも検索エンジンにもフレンドリーなサイトを作成するには事前の設計が要になってきます。
サイト構造の全体像から細かなデティール、そしてシステム設計までを一気通貫で設計できることで、部分的な対応では成しえなかったSEO効果やUXが向上するサイト作りができるでしょう。

参考文献

• 現場のプロから学ぶ SEO技術バイブル
• Atomic Design ~堅牢で使いやすいUIを効率よく設計する