サイト構成の作り方【サイトをゼロから作りながら徹底解説】

目的・ゴールをセットする

「あなたのサイトのそもそもの目的は何なのか？」
「ユーザーが最終的に到達して欲しいページはどこなのか？」

サイト構造図の作成は、このような「サイトの目的」を定義することから始まります。

これらを構造図に含めておくと、構成に筋が通って、目的を見失わないようになります。

目的・ゴールとは、
「eコマースであれば購入ページ」、
「ブログであればアフィリエイトページ」です。
「NoteやBrain」などの
「情報商材の購入ページ」でもいいですね。

「サイト構成ドットコム」の目的は、
サイト構成図の作り方がわからない方のために、プロがサイトを公開する時のノウハウを記した「サイト構成テンプレート（情報教材）」を販売すること、
その教材は１個だけという設定です。

ただし、便宜上、企業サイトなどで、複数のテンプレートを販売する場合のケースも想定して解説しています。

画像クリックで拡大

ペルソナの喚起を構造図にセットする

ペルソナとはあなたのサイトに実際に訪れる人物像。映画に例えれば登場人物のことです。

世の中には長年培われた「AIDA、ACCA、4C」などの様々なマーケッティング法則があります。これらを使って「サイト構造図」を組み立てます。次は世界で最もよく使われる法則「AIDA」の例です。

• 興味を持たせる（アテンション：Attention）
• 必要性を示す（インタレスト：Interest）
• 信頼させる（デザイアー：Desire）
• 行動させる（アクション：Action）

この４つのステップと、それがどんなページなのかは次の通りです。

上記の「各ステップを逆順に」構造図に追加します。

画像クリックで拡大

ターゲットキーワードを検索意図でグループ化

次は構造図にキーワードを入れ込む作業です。

まずはキーワードプランナーやサーチコンソールの情報から、あなたのサイトがターゲットとするキーワードを定義します。

これらのキーワードを検索意図毎にグループ化していきます。

「いかがでしょうか？」

「ここで、グループ化の前後を比べて、なぜ３つに分けたのか？について理解できますでしょうか？」

実はこのグループ化、「ペルソナ毎」に分けています。つまり「検索意図のキーワードを使う人物像を想定しながらグループ化」しています。

そして「検索意図１」の人物がAIDAのステップをたどるときの「仮説」を構造図に加えると次のようになります。

画像クリックで拡大

「どうでしょうか？」

あくまで仮説ですが「その人物に対してどのような解決方法で最終的なゴールへ導いているのか」を、この構造図から汲み取れますでしょうか？

「サイト構造 とは」や「サイト構造 定義」、「サイト構造 意味」などのキーワードを使う人なので、「この人物は初心者ではないか？」との仮説を立て、その人に示す解決方法をAIDAに当てはめています。

続いて「検索意図２」のグループをみてみます。

画像クリックで拡大

この人物像は、「サイト構成についてをある程度理解しており、最適な構成にするにはどうするかを探している人ではないか？」、という仮説です。「seo」、「設計」や「最適化」などのキーワードを使う人なので「初心者ではない」と想定しています。

この人物に対しては、「サイト構成についての初歩的な情報は必要なく、より具体的な方法を示し、さらに、その方法が信頼できるかどうかが焦点」となります。そのためプロフィールや実績なども必要となるはずです。

そして「検索意図３」のグループです。

画像クリックで拡大

この人物像の仮説は簡単ですね。「サイト構造を作ってくれるツールを探している人」です。使われているキーワードも具体的なので、示すべきは「アプリのまとめ記事」です。

以上のように、サイト構成図には、「キーワード」、「人物像」、そしてAIDAに沿った「仮説」から作り始めます。

「Googleアナリティクス」の中には、年齢、性別、場所、時間帯など、「仮説を助けるデータ」が数多くあります。そして実際にそのキーワードで検索してみることです。「事実、検索結果はデータの宝庫」です。

また、「【図解】キーワードと検索結果からユーザーニーズを把握する逸なコツ」の記事も仮説を立てる一助になるかと思います。

ページ構造図を作成する

ここからが「よくあるツリー図＝ページ構造図」の作成です。

簡単です。それにはAIDAの各仮説を３〜５つ位のカテゴリーにグループ化してホームページの直下に配置します。

画像クリックで拡大

「テンプレートの紹介ページ」が「信頼させる」ページ。
「サイト構成の作り方を示す」ことと
「サイト構成の最適化方法を示す」ことは同じページにできそうなので、
「必要性を示す」ページとして「サイト構成の作り方ページ」を定義しました。

そして、「学ぶ・知るための集客用のページ群」を「サイト構成の基礎知識カテゴリー」として定義してみました。

仮に、企業サイトで多くのテンプレート商品を販売する場合は、集客用ページとして「テンプレートを探す」というカテゴリーが定義できそうです。

サブカテゴリーに「目的別と業界別」とありますが、あくまで説明用です。「サブカテゴリーを決める際も新たに仮説を立てること」から始めます。

URLを構造図に含める

次はURLです。
ここからやや専門的になってきます。でもここを越えればかなりのスキルがつくはずです。頑張ってください。

URLは検索エンジンがページをインデックスするときの単位となるため、変更するには「301リダイレクト」などのめんどくさい作業をしないといけません。

正直できるだけ変更したくないのです。

そのためページ構造図は、URLを加えて、できるだけ変更できないような状態になって初めて骨格ができるのです。

公開当初のブログサイトのような簡単なフラット構造（トップページ直下に全ての記事がぶら下がる）であれば、ページ構造図にURLを足すだけでいいのですが、URLをつけるにもルールがあり、階層を考慮しつつURLをフレンドリーにするにはちょっとしたノウハウが必要です。

それが「重複ページへの対処」です。
先の構造図で仮に定義した集客用カテゴリー「テンプレートを探す」を例にとって考えてみます。

例えば「商品A」という商品を「目的別に探す」ことと「業界別に探す」ことができるページ構造があるとします。

そのときのURLとして最適なのは

https://sample.site-architecture.com/template/purpose/blog/product-a

https://sample.site-architecture.com/template/industries/tech/product-a

となります。

ですが「product-a」のページは、「２つのURL」を持ってしまい、「重複ページ」ができてしまいます。

このようなURLのジレンマを回避するには、構造を「目的別に探す」、「業界別に探す」、「テンプレート商品」の３つに分けることです。

https://sample.site-architecture.com/find-template/purpose/blog

https://sample.site-architecture.com/find-template/industries/tech

https://sample.site-architecture.com/template/product-a

３番目のURLはユーザーから見れば不親切に思われるかもしれません。とはいえ、Googleから「重複ページ」としてチェックされるのも嫌ですし。

URLに基づいてサイトを開発するエンジニアの視点からみても、重複ページは避けたいところ。

以上に基づき、「URL」、「リンク名」、「ページのタイトル」を定めつつ、ページ構造図を組み立てます。

画像クリックで拡大

「角丸長方形がリンク名」
「黒い長方形がURL」
「白い長方形がページのタイトル」
「点線枠は説明用の仮定義」です。

「現実的なページ構造ができあがってきました。」

ページのタイトルを構成図に加えることで、サイトの全容が把握しやすくなりますね。ちなみにタイトル付けは「クリック」されるための大事なSEOファクター。こちらの「【2020年版】SEOのためのタイトルタグとは【サンプル付】」の記事が詳しいです。

ナビゲーションメニューを作成する

先の図中で「リンク名」を定めた理由は承知の通り、ナビゲーションを作るためです。

例えば「グローバルナビゲーションメニュー」は定番リンクを加えてこうなります。

ブログサイトの「サイドナビゲーションメニュー」はこうなります。

「サイト構成ドットコム」はサンプルサイトであり解説用に仮に作っただけですが、実際のサイトでも考え方は同じです。

例えばよくあるナビゲーションを「AIDA」に例えたら、

のように分けることができますね。

内部リンクを構造図に追加する

次は「内部リンク」です。次の項目を必要に応じて構造図に加えます。

• 導入文
• h2タグ（必要ならh3タグ）

これらは全てのページに加える必要はありません。このステップは、「メインとなるユーザーの導線を引く」ためです。

「h2やh3」タグは「ヘディングタグ」と呼ばれ、そのページを章立てする「見出し」のことであり、「通常はコンテンツの区切り」として使われます。

「h2やh3タグ」などのHTMLタグについては「SEOに重要な全てのHTMLタグのテンプレート」にも詳しく解説しています。

これはブログで言えば「もくじ」のようなものですが、目次そのものを作って加えるわけではありません。ページの内容が理解できればOKです。

実際、Googleのジョン・ミューラー氏はYoutube動画で次のように述べています。

【日本語訳】HTMLの中にあるこれらのヘディングタグは、ページの構造を私たちが理解するのに役立ちます。

【原文】These heading tags in HTML help us to understand the structure of the page.

リンク権威を可視化する

「h2やh3タグ」から目標ページへの内部リンクを繋げていくことで「リンク権威」が見えてきます。

「リンク権威」とは、１つ１つのページの強さを表す指標です。「より多くのページからリンクがあるほど、そのページの権威は強力」になります。

リンク権威は関連性が重要であり、「関連性は記事の本文内からのリンクによって生まれます。」サイドメニューやグローバルナビゲーションではありません。それらも少なからずあるかもしれませんが、強力なのは「本文内」からのリンクです。

さらに言えば「ページの上部にある導入文からのリンクは、ページの関連性を強力にもたらす」可能性があります。ただしそれは、そのページの内容全てが関連していることが前提です。関連のない記事からのリンクは返って逆効果です。

以上を加味してページ構造図の最後の掘り下げです。

画像クリックで拡大

図中の「赤い色」で表現しているのが内部リンクです。

「サイト構成とは何か？」のページは、「ペルソナA」さんのための記事ですが、内容的に「制作会社が隠し続けるサイト構成図の作り方」の記事に含めてもよさそうです。

ですが、リンク権威を構築するためにも「意味や定義」を解説するページを「敢えて」作り、「導入文」にそれらについて言及しつつ、そこから間髪入れずにリンクを飛ばす構造にしてみました。「ペルソナA」さんの最終的な検索意図は「作り方を知りたい」ことだと思うので。

「ペルソナB」さんのために、プロフィールページの中の「ポートフォリオの紹介」から商品ページにリンクを貼ってあげると親切ですね。

以上でサイト構成の作り方を終わります。

まとめ

いかがだったでしょうか？

「サイト構造ドットコム」は、あくまで説明用として仮に作ったサイトですが、実際のサイトでも基本的な流れは同じです。

とはいえ、情報を加える余地はまだまだあります。サイト構成の本質はユーザーの導線にあります。その導線を紐解く鍵となるのが「AIDA」です。

先に「理想的なサイト構成にするための考え方は視覚で見ながら更新することです」と述べました。このようにしながらサイト構成の設計を進めていけば、その過程で様々な気づきがでてきます。

そもそもウェブサイトというのは「小さく始めて大きく育てる」ことが基本です。運営の途中で他のサイトを調べたり、本を買って読んだりすることもあるでしょう。そんな日々の学びをサイト構成に含めてください。きっと成果が得られるはずです。

これまでの解説はいわば「サイト全体の作り方について」です。全体の次は「個別ページの作り方」です。

今や人工知能は当たり前の時代になりました。

そこで次の記事では「人工知能を実装した検索エンジンに向けて、どうやってひとつの記事を書いていけばいいのかを、テンプレートに基づいて網羅的に解説」した記事です。

興味がある方はぜひ読んでみてください。

人工知能時代の稼げるブログ記事の書き方完全ガイド【テンプレ付】

「ブログの収益化を図りたい、検索順位をあげたい」それには上手な文章を書けばいい。残念ながらそれだけでは足りません。大切なのは人工知能の仕組みを理解して書くことです。そこで本記事では「AI時代に稼げる記事を書くにはどうすれば？」こんな疑問に答えます。