コンテンツマネジメントシステム

WEBサイトはユーザーとの接点を持つ場になります。そのためWEBサイトに掲載されているコンテンツの良し悪しで訪問してくれたユーザーが顧客になるのか否かが決まってきます。良いサイトは総じて事前の設計がしっかりしているため、何となく必要なコンテンツを作っていくのではなくサイトの全体像を把握して、どういったサイト構造にしていくのか整理していきます。また、どんなに良質なWEBサイトを作成してもユーザーに訪問してもらわなければ宝の持ち腐れになってしまいます。ユーザーにサイトへ訪問してもらう方法はいくつかありますが、サイト設計時に配慮しないといけない領域はSEOの部分です。SEOに配慮したWEBサイトの設計方法についてこちらでは紹介いたします。 SEOを意識したサイト設計が必要な理由 WEBサイトはターゲットとなるユーザーに訪問してもらって初めて価値を生みます。そのためターゲットにサイトに訪問していただく必要がありますが、手段は様々あります。その中でも検索からの流入は能動的に情報を探しているユーザーのためサイトとの相性は良いです。また、博報堂が実施した調査では商品を買いたいと思った時に情報収集手段として検索を利用しているユーザーは6割もいることが明らかになっています。 購買に関する情報収集手段画像引用元：従来の購買行動はもう当てはまらない、情報探索行動を分析してわかったこと：バタフライ・サーキットと 8 つの動機 ユーザーが情報を探している時に、自社のWEBサイトが検索上位にランキングされるようにSEOを意識したサイト設計ができることで、検索エンジンに自社のサイト情報をしっかりと伝えることができるようになります。 サイト・コンテンツの種類 WEBサイトと言っても様々な目的があり、目的毎に作成しなければいけないサイトやコンテンツは異なってきます。まずはサイトを立ち上げる目的から「どんなサイトにすべきなのか」「どんなコンテンツを用意すべきか」を把握する必要があります。 サイトの種類 サイトの種類は全部で10種類あります。WEBサイトを立ち上げる目的によって作成が必要なWEBサイトも変わってきます。10種類の中で、「会員サイト」と「イントラネット」だけは限定された範囲での公開になるため検索からの流入は不要になります。検索流入が不要のコンテンツに限ってはSEOの意識は不要ですが設計手法としては大きく差異はありません。 項目目的コーポレートサイト・企業情報発信・会社のイメージ向上・信頼の獲得ブランドサイト・ブランド認知リクルートサイト・採用促進ECサイト・商品(サービス)販売メディアサイト・ブランド認知・ナーチャリングプロモーションサイト・ブランド認知・商品(サービス)販売会員サイト・LTVの向上ランディングページ・商品(サービス)販売イントラネット・社員向け情報ウェブアプリケーション・特定の目的を達成するツールサイトの種類一覧 コンテンツの種類 コンテンツの種類は全部で16種類あります。サイトの運用目的によって必要なコンテンツは変わってくるため、サイト設計時に目的と照らし合わせて取捨選択を行なっていきます。 項目内容会社概要・企業情報最新情報・お知らせ事業内容・展開している事業内容サービス・商品説明・商品やサービス情報実績紹介・事例紹介・お客様の声よくある質問・顧客から問い合わせが多い質問に対しての回答集コラム・ブランドに関連する記事キャンペーン・プロモーション情報・商品やサービス情報採用情報・求める人物像・社員紹介・採用情報・フロー・募集職種・福利厚生代表メッセージ・会社の立ち上げストーリーアクセス・所在地・所在地までのアクセス方法免責事項・プライバシーポリシーIR・業績・財務・ライブラリー・株式情報・コーポレートガバナンスCSR・活動内容お問い合わせ(エントリー)フォーム・顧客情報入力項目購入フォーム・顧客情報入力項目・決済情報入力項目コンテンツの種類一覧 SEOを考慮したサイト設計方法 サイトやコンテンツの種類を把握できたらサイトの設計に入っていきます。サイト設計は「サイト・リンク構造設計」「画面設計」「ビジュアルガイドライン設計」「マークアップガイドライン設計」「システム設計」の大きく分けて5STEPで設計していきます。 1 サイト・リンク構造設計 サイトに必要なコンテンツをMECEで洗い出して、サイトマップとして一覧化します。また洗い出したサイトマップに対してのコンテンツ間を回遊できるように内部リンクの設計を行います 2 画面設計 作成するコンテンツそれぞれに対してUIを整理し、プロトタイプに落とし込みます 3 ビジュアルガイドライン設計 利用するカラーやフォントなどビジュアルに関わるルール(ガイドライン)を整理します 4 マークアップガイドライン設計 設計した画面をWEB上に表示できるようにフロントエンドでのマークアップルールを定義します 5 システム設計 設計した画面をWEB上に表示できるようにバックエンドでのシステム設計書を作成します サイト・リンク構造設計 ステップのまず最初に行うのはサイト構造とサイト内を柔軟に回遊できるようにリンク構造の設計を行なっていきます。ここで整理した構造がこの後の工程の基準になるため最も重要なステップと言っても過言ではありません。 サイト構造設計 サイトの構造設計では、必要なコンテンツを洗い出し、それをサイトマップとしてまとめる作業になります。 1 コンテンツの洗い出し コンテンツのTOPページを起点に必要なコンテンツをロジックツリーを使って分解していきます。ロジックツリーを使って分解する際には、上下の階層関係と同一階層を漏れなくダブりが無いようにMECEで設定することがポイントです。分解するためにはWEBサイトがユーザーに提供できる価値から考えます。ユーザーに提供できる価値をWHAT・WHY・HOWの3軸のいずれかもしくは複数を組み合わせて整理することで必要なコンテンツの洗い出しができます。 WHAT頂点に置いたカテゴリーに対して、その中に何があるかを分解していく。どのサイトにも適用できるパターン。WHY解決したい問題や課題を頂点に配置して、その問題が起きている要因を分解していく。問題が顕在化しているユーザーを集客する課題解決型メディアに適しているHOW目的や目標を頂点に配置しその手段やプロセスを分解していく。ユーザーが目的を達成するための解決策を提示する「よくある質問」や「ヘルプ」の構成を検討する際に有効。コンテンツ分解方法 ポイント ロジックツリーを分解していく際にMECEになっているのか不安な場合は関連語を調べるとそのカテゴリーに対して漏れがないか確認しやすくなります。関連語キーワードの取得ツールとしては、「ラッコキーワード」を使うのがおすすめです。 2 コンテンツの整理 洗い出したコンテンツを整理しサイトマップにまとめていきます。サイトマップはサイトの骨組みになるため、この後の工程のベースとなります。コンテンツの整理を行う際に参考となるフレームワークが「LATCH」と「カードソーティング」になります。LATCHは5つの分類方法である「Location:場所」「Alphabet:アルファベティカル」「Time:時間」「Category:カテゴリ」「Hierarchy:階層」の頭文字を取っています。カードソーティングはLATCHなどを使って分類した方法がユーザーに取って有効な分類かをユーザー調査をして検証する方法になります。 3 URLのラベリング サイトマップができたら各コンテンツに対してURLをラベリングしていきます。URLはユーザーにも見える文字列になります。また検索エンジンにとっても認識しやすいURL構造にすることは大切です。URLを設定する際に最低限チェックするポイントは下記4つになります。 ページ内容と関連するキーワードを含める極力短くする複数の単語の組み合わせはハイフンで区切る英単語は小文字に統一する リンク構造設計 検索エンジンにコンテンツがインデックスされるには、コンテンツがクローラーに認識される必要があります。クローラーにコンテンツを認識してもらうサポートをするのに内部リンクは非常に有効です。またサイト内の回遊が行いやすいリンク設計はユーザーにとっても利便性が高くなります。 トップ階層との縦リンクどのコンテンツからもTOPページに戻るリンクを用意する上下階層間の縦リンク現在いるコンテンツの上階層・下階層へのリンクをコンテンツ内に設置する同一カテゴリ間の横リンク同一のカテゴリ間のコンテンツを横でつなぐリンクを設置する内部リンクパターン 内部リンクは縦横に網羅的に設置することが重要です。網羅的に設置する手助けをするリンクの設定方法として大きく4種類あります。 ナビゲーションリンクナビゲーションは、グローバルナビゲーション、ローカルナビゲーションの大きく分けて2種類のナビゲーションがあります。ページを縦横無尽に回遊するための手助けを行うリンクのため、上下階層間の縦リンクと同一カテゴリ間の横リンクが設置できます。パンくずリストトップページから現在表示しているページまでの階層を表すリンクの集まりになるため、上下階層間の縦リンクを設置できます。コンテンツリンクページのメインの役割を表すコンテンツに設置されるリンクは文章の自然の流れの中に設置されます。リンク先は参考コンテンツや関連コンテンツになるため、同一もしくは異なるカテゴリやコンテンツ間で自由にリンクが設置されます。HTMLサイトマップWEBサイト内のコンテンツもしくはカテゴリのリンクをMECEに網羅したマップページになります。コンテンツの一覧性があるため、ページ内の回遊を促進するリンク集になります。内部リンク設定手法 ナビゲーションリンク グローバルナビゲーションは、Webサイトの全ページに共通で設置されているナビゲーションです。トップページや最上位のカテゴリにリンクを貼ることが多くなります。グローバルナビゲーションは、ヘッダーナビゲーションやフッターナビゲーションが利用されることが多いです。ヘッダーナビゲーションは、ページの最上部に設置されナビゲーションのため、第2階層のカテゴリなどそのサイトの最も主要となるリンクを設置することをおすすめします。フッターナビゲーションは、ページの最下部に設置されるナビゲーションです。ページ最下部でユーザーからは見にくい位置にリンクが貼られるため重要度はそこまで高くないリンクを設置することがおすすめです。ローカルナビゲーションは特定のページにだけ表示されるナビゲーションリンクになります。ページ内のサイドナビゲーションとして使われる機会が多く、特定のカテゴリ内の遷移を促すリンクが貼られることが多くなります。ナビゲーションリンクは、ピラミット型リンクの設置を行うことでSEOに効果のある内部リンクが設置しやすくなります。ピラミット型は、TOPページを頂点として階層構造にページを設置する方法になります。上階層に行けば行くほど、サイト内リンクが集中するためリンクジュースが渡りやすくなります。下の階層からリンクジュースを上げていくことで、上階層でビックワード、下階層でロングテールワードを拾えるような構造になります。 コンテンツリンク コンテンツリンクは、ページの主要コンテンツの中に設置されるリンクになります。コンテンツリンクは、トピッククラスター型のリンク設置を行うことでSEOに効果のある内部リンクが設置しやすくなります。トピッククラスター型は、ピラーページとクラスターページで構成されます。個別のクラスターページとその内容を一元的にまとめたピラーページを作成することで、ピラーページにリンクが集中しやすくなり、リンクジュースが渡りやすくなることでピラーページの評価をあげやすくなります。クラスターページではロングテールワードを拾い、ピラーページでビックワードやミドルワードを狙っていくことで、多岐にわたる検索意図を拾うことができトピッククラスター全体でユーザーニーズを充たすことが出来るようになります。 画面設計 作成するコンテンツやリンク設計ができたらそれをベースに各コンテンツのUIを設計していきます。設計したUIはワイヤーフレームやプロトタイプに落とし込むことでイメージを共有できる状態にします。画面設計には「Atomic Design」を採用することでこの後のガイドライン設計やシステム設計などに一貫性を持たせることができます。 1 UI要素の整理 Atomic Designは小さいUIコンポーネントを組み合わせてより大きなコンポーネントを作っていくためのフレームワークです。UIのコンポーネントを5つの階層に分類することでUIを設計していきます。 Atoms (原子)それ以上UIとしての機能性を破壊しない最小要素です。「プラットフォームのデフォルトUI」「プラットフォームのデファクト・スタンダードなUI」「レイアウト・パターン」「セマンティックなデザイン要素」の4つをコンポーネント化します。Atomsを設計することでデザインの統一性が図れます。Molecules (分子)2つ以上の原子が組み合わさって分子になるようにAtom層のUIコンポーネントを組み合わせて作ります。Atom層は単体の機能ですが、その機能を組み合わせてユーザーの具体的な動機に応える機能の単位でコンポーネント化します。Moleculesを設計することで、行動を阻害しない操作性を実現します。Organisms (有機体)AtomやMoleculesの組み合わせによりコンテンツを提供します。コンテンツは独立して提供できるため、コンテンツ単位で切り取って画面に配置することができます。Organismsを設計することでユーザーの行動を促すコンテンツを設計できます。Templates (テンプレート)Otganisms、Molecules、Atomsを組み合わせてページの雛形を作成したものがTemplatesになります。Templatesを設計することで、画面全体のレイアウト設計が完了します。Pages (ページ)Templatesを活用してユーザーが触れるコンテンツとして提供されるものです。Atomic Design 5つの階層 Atoms (原子) Atomsは「プラットフォームのデフォルトUI」「プラットフォームのデファクト・スタンダードのUI」「レイアウト・パターン」「セマンティックなデザイン要素」の大きく分けて4つに分類されます。 プラットフォームのデフォルトUI プラットフォームがデフォルトで提供しているUIになります。HTMLが提供している要素は特定のサイトやアプリケーションに依存した要素を提供していないためAtom層のコンポーネントとして扱えます。 テキスト任意の情報(コンテキスト)を表示する最小コンポーネントです。テキスト・インプットテキストデータの入力を開始するためのトリガー機能と入力したテキストデータをユーザーにフィードバックする最小コンポーネントです。ボタンクリック可能なことを視覚的に表現し、クリック時に処理を開始する機能をユーザーに提供する最小コンポーネントです。プラットフォームのデフォルトUIの項目一覧 プラットフォームのデファクト・スタンダードのUI プラットフォーム自体が提供していないUIでも、多くのアプリケーションで使用されていてデファクト・スタンダードとなっているUIです。いろいろなUIで見ているためユーザーは既にUIの機能や意味を瞬時に理解できます。 バルーンテキストをマウスオーバーすることで、そのテキストを捕捉する内容を表示する機能を提供する最小コンポーネントです。バッジ新着情報があることをユーザーに伝える最小コンポーネントです。カードコンテンツのひとまとまりであることをユーザーに表示する最小コンポーネントです。プラットフォームのデファクト・スタンダードのUIの項目一覧 レイアウト・パターン レイアウト・パターンは特定のコンテンツに依存しない機能を提供するUIです。 グリッドカード形式のUIを隙間なくレイアウトするパターンです。聖杯レイアウトヘッダー・コンテンツ・サイドナビゲーション・フッターで構成されているレイアウトパターンです。メディア・オブジェクトメディアとそれに関連するテキストで構成されているレイアウトです。レイアウト・パターンの項目一覧 セマンティックなデザイン要素 画面上のコンテンツに意味を付加するデザイン要素です。同じ意味を持つコンテンツに常に同じ見た目をデザインすると、ユーザーは見た目を通してすぐに意味を理解できます。 見出しそのコンテンツが興味があるものかどうかをユーザーに順次に判断してもらうために、画面上ですぐに見出しだとわかる見た目を表示する最小コンポーネントです。本文長い文章をユーザーに苦痛なく読ませるために行間や行送りの幅、文字色やフォントなどの要素を表示する最小コンポーネントです。コンテンツ画像画像そのものや画像が表示されるまでの間をつなぐ機能を表示する最小コンポーネントです。アイコンアイコンはテキストの代わりに機能を説明する記号であり、ユーザーに直感的にメッセージを提供する最小コンポーネントです。デコレーション枠や区切り線テキストの周りにデコレーション枠や区切り線など決まったルールに従って見た目を表示する最小コンポーネントです。アニメーションあるUIの状態から次の状態に遷移する際のコンテキストをユーザーに説明する最小コンポーネントです。セマンティックなデザイン要素の項目一覧 Molecules (分子) Atomでは非常に抽象的な機能がMolecules層を構成する部品として使われると、具体的な役割を担うようになります。 検索フォーム何かキーワードで検索したいというユーザーの動機に対して、「テキスト・インプット」と「ボタン」のAtomコンポーネントの組み合わせで作成メッセージフォーム何かメッセージを投稿したいというユーザーの動機に対して、「テキスト」「テキスト・インプット」「ボタン」のAtomコンポーネントの組み合わせで作成Molecules (分子)の項目一覧 Organisms (有機体) Moleculesで具体的な役割となっているコンポーネントですが、それ単体では独立したコンテンツにはなりません。他のコンポーネントの機能を助けるヘルパー的な役割を担いますが、それ自体でユーザーにコンテンツとして提供はできません。しかしOrganismsで提供するコンポーネントはAtomやMoleculesを組み合わせることで、それ自体でコンテンツとして形成されるものになります。 Templates (テンプレート) Atoms、Molecules、Organismsのコンポーネントを組み合わせて、ページ上に正しくレイアウトさせるのが目的です。ここで作成されたTemplatesをベースにユーザーにコンテンツが提供されるため、それぞれの目的に沿ったTemplatesを漏れなく用意する必要があります。 2 プロトタイプ(ワイヤーフレーム)作成 UI要素の整理ができたら、それをプロトタイプとしてアウトプットします。プロトタイプを作成するツールは様々あり、各ツールが提供しているテンプレートも豊富にあります。 ツール名テンプレート名内容Adobe XDUIキット各プラットフォームに合わせてUIキットが用意されています。その中でも「Wires jp」はサイト設計に必要な要素が十分に用意されています。プロトタイプ(ワイヤフレーム)作成に役立つツール ビジュアルガイドライン設計 ビジュアルガイドラインにはサイトにて共通で使用するビジュアルのルールを定義します。画面設計で整理した項目に対して、使用する際のルールをガイドラインにまとめていきます。ビジュアルガイドラインに入れる要素は全部で3種類になります。商品やサービスのブランド構築のフェーズでビジュアルアイデンティティを構築している場合は、そこで定義しているロゴやブランドカラーを引き継いで使用します。 カラーパレットメインカラー・アクセントカラー・バックグラウンドカラーの3種類は最低限定義します。またWEBサイトの場合、カラーの指定はRGBで設定することが多いため、RGBで設定しておくことを推奨します。タイポグラフィ・フォントタイトル・サブタイトル・見出し・本文に対して、フォントやサイズを定義します。UI画面設計で整理したUIに対して、サイト内で使用する際のルールを定義します。ガイドラインの項目一覧 マークアップガイドライン設計 マークアップガイドラインにはサイトにて共通して使用するUIパーツのマークアップルールを定義します。画面設計で整理した項目とSEOの観点も考慮して、セマンティックなマークアップルールを作成します。また、ページの表示速度はSEOの評価観点の1つになるためページに使用するリソースのパフォーマンスバジェットも定義します。 セマンティックなマークアップ セマンティックなマークアップをすることで検索エンジンに認識してもらいやすくなります。方法としては文章構造を明示化する「構造化タグ」と文章の意味を明文化する「構造化マークアップ」の2種類があります。 構造化タグHTML文書の本体となるbody要素内のコンテンツに対して、適切なアウトライン(文章構造)を明示的に検索エンジンに伝える構造化マークアップHTML文章の意味を明示的に検索エンジンに伝えるセマンティックなマークアップ手法 構造化タグ 構造化タグはコンテンツのレイアウトに対して記述を行います。全ての基本となるのが&lt;section&gt;タグになります。&lt;section&gt;は見出しをつけられる文章のまとまりを表します。見出しをつけられる文書のまとまりを「セクション」と呼び、セクションを区分するタグを「セクショニングタグ」と呼びます。セクショニングコンテンツの中で、特別の役割を持つもの(記事/補足情報/ナビゲーション)として&lt;article&gt;&lt;aside&gt;&lt;nav&gt;の3つのタグが定義されています。&lt;header&gt;と&lt;footer&gt;は、単体で成り立つまとまりではなく、セクションに付随する1要素になります。 &lt;header&gt;ヘッダーであることを示す。また導入やナビゲーションの補助であることを示す。&lt;header&gt;は文書のヘッダ情報を示す&lt;head&gt;タグとは違い、コンテンツの中のヘッダー情報である。&lt;section&gt;見出しをつけられる文章のまとまりであることを示す。1つの見出し(h要素)+本文+補足情報で構成される&lt;article&gt;独立した記事やコンテンツであることを示す。ブログでは記事全体がニュースサイトではそれぞれのニュース情報が、独立した記事に該当する&lt;aside&gt;補足情報を示す。本文と関連しているが、区別して掲載するべき補足情報。本文とは直接関係ないサイドバーにも使用される。&lt;nav&gt;ナビゲーションであることを示す。グローバルナビゲーションやパンくずリストなどサイト内の主要なページへのリンクに使用される。&lt;footer&gt;フッターであることを示す。コンテンツ作成者や著作権に関する記述(Copyright)を記載。その他にも関連文書へのリンクなどの情報を記載できる。構造化タグ一覧 ポイント HTMLタグに&lt;div&gt;タグがありますが、こちらは構造タグではなく、CSSなどで見栄えを変更するためにHTMLを区切るためのものでしかありません。&lt;div&gt;タグは要素内のコンテンツに意味のまとまりを表す見出しをつけれない場合のみ使用します。意味のまとまりを作ることが可能な場合は、&lt;article&gt;か&lt;section&gt;を利用します。他のセクションから独立しても成り立つ場合は&lt;article&gt;、成り立たない場合は&lt;section&gt;を利用します。 構造化マークアップ 文章の意味を検索エンジンに伝えるのが構造化マークアップですが、マークアップ方法は3種類の方法があります。 MicrodataHTML5から追加され、各検索エンジンで仕様統一を図った最初の形式になります。構造化データと実際のHTMLデータが一致しやすく、多くのWebサイトで活用されています。しかしソースが煩雑になってしまうのがデメリットです。RDFaLiteW3Cによって規格化されたRDFをXHTMLに埋め込む技術としてRDFaが開発され、それを簡素化してMicrodata形式に近づけたものになります。Micodataと同じく構造化データと実際のHTMLデータが一致しやすくXHTMLでも使える一方、Microdataと同じくソースが煩雑になるのがデメリットです。JSON-LDJSON形式に意味付け機能を付与したもので、あらゆるデータをコンピュータが解釈しやすいような形にしています。ソースと分離でき、不可視のデータは記述が少なくて済みます。しかし可視データは内容を2箇所に記述しなければいけません。構造化マークアップ方法 どの形式にもメリット・デメリットは存在しますが、コンピュータが認識しやすいJSON-LDの形式をGoogleは推奨しています。JSON-LDは通常のHTMLコードと分離して構造化マークアップもできることからメンテナンス性も高くなります。Googleは構造化データを利用して認識したコンテンツをリッチな機能を使って検索結果に表示します。リッチな検索結果を表示できる項目は6分類31項目あります。 分類項目名内容eコマース,エンターテインメントBook検索で見つけた書籍を検索結果から直接購入できる書籍アクションeコマース,組織よくある質問特定のトピックスに関する質問と回答の一覧を掲載したページeコマースProduct商品に関する情報(価格、在庫状況、クチコミの評価など)eコマース,組織,エンターテインメントクチコミ抜粋クチコミサイトでのクチコミや評価からの抜粋。通常は、クチコミ投稿者による総合評価スコアの平均です組織,求人EmployerAggregateRatingGoogle の求人検索機能で表示される、多数のユーザーから収集した採用側組織に対する評価組織家でのアクティビティユーザーが自宅でできるオンライン アクティビティを見つけることができるインタラクティブなリッチリザルト。組織ハウツーあるタスクを正しく完了するための一連のステップを、順を追ってユーザーに説明するもの。動画、画像、テキストを利用できます。組織ローカル ビジネスGoogle ナレッジパネルに表示されるビジネスの詳細情報。営業時間、評価、経路に加え、予約や注文のアクションも表示できます。組織,求人Logo検索結果と Google ナレッジパネルに表示される組織のロゴスポーツArticleサムネイルより大きな画像を添えた見出しテキストなど、トップニュース カルーセルやリッチリザルトの機能で表示されるニュース、スポーツ、ブログ記事スポーツ,エンターテインメントカルーセル1 つのサイトからの情報を順次リストまたはギャラリーの形式で表示するリッチリザルト。スポーツVideo検索結果に表示される動画情報。動画の再生、動画セグメントの指定、コンテンツのライブ ストリームも可能です。求人JobPosting求職者が仕事を見つけるためのインタラクティブなリッチリザルト。Google の求人検索結果に、ロゴ、クチコミ、評価、仕事の詳細を表示できます。求人職業訓練求職者や学生が、職業訓練プログラムを見つけるためのインタラクティブなリッチリザルト。求人給与推定額Google の求人検索機能で表示される給与推定額情報。特定の職種における給与額の範囲や地域別の平均給与などが表示されます。エンターテインメントEvent参加できる時間と場所が決められたイベント（コンサートや芸術祭など）のリストを表示するインタラクティブなリッチリザルト。エンターテインメントMovie映画カルーセルは、ユーザーが Google 検索で映画のリストを探すのに役立ちます。各映画のタイトル、監督情報、画像など、詳細情報も表示できます。エンターテインメントポッドキャストポッドキャストを、再生可能なリンクと一緒に Google 検索に表示できます。また、その他の Google Podcasts プラットフォーム（Google Podcasts アプリや Google アシスタントなど）に表示することもできます。その他パンくずリストそのページがサイト階層内のどこに位置するかを示すリスト。その他Courseプロバイダ固有のリストに表示される教育コース。コースには、コースのタイトル、プロバイダ、簡単な説明を掲載できます。その他DatasetGoogle データセット検索で表示される大規模なデータセット。その他ファクト チェック信用できるサイトが他者の主張を評価した結果の要約。その他画像のライセンスGoogle 画像検索で、画像にライセンス情報が存在することを示す「ライセンス可」バッジを表示できます。画像ビューアにライセンス情報へのリンクが表示され、その画像の使用に関する詳細を知ることができます。その他数学の解法数学の問題のタイプと特定の数学の問題に関する詳細なチュートリアルを示す構造化データを追加することで、数学の問題について生徒や教師などをサポートできます。その他練習問題数学や科学の練習問題に構造化データを追加することで、教育について生徒、教師、保護者をサポートできます。その他Q&amp;AQ&amp;A ページとは、1 つの質問の後にその質問に対する回答が続く、質問と回答の形式のデータが含まれているウェブページです。その他Recipe個別のリッチリザルトとして、またはホスト カルーセルの一部として表示されるレシピ。その他サイトリンク検索ボックス個別のリッチリザルトとして、またはホスト カルーセルの一部として表示されるレシピ。検索結果に表示されたウェブサイトを対象とする検索ボックス。その他ソフトウェア アプリソフトウェア アプリに関する情報（評価情報、説明文、アプリへのリンクなど）。その他Speakableテキスト読み上げ（TTS）を使用する Google アシスタント搭載デバイスで読み上げ可能なニュース コンテンツを、検索エンジンやその他のアプリケーションが識別できるようにします。その他定期購入とペイウォール コンテンツサイトのコンテンツをペイウォール コンテンツとして明示することにより、そのコンテンツが Google のガイドラインに違反するクローキングを行っていないことを Google が容易に識別できるようにします。リッチな検索結果一覧 構造マークアップにはJSON-LD形式の知見が必要になってきます。直で書くことも可能ですが、作成を支援してくれるツールもあります。「構造化データマークアップ支援ツール」を活用することで、マークアップの記述をツール側で作成することができます。出力されたHTMLをサイトへコピー&amp;ペーストのみで構造化マークアップに対応することが可能になります。 またJSON-LDの形式で記述した構造化マークアップが実際にちゃんと記述できているかを確認するツールとして「リッチリザルトテスト」が存在します。実際にこのツールを使うことで記述エラーが無いか確認できます。 パフォーマンスバジェットの作成 Webサイトを作成する際にはHTML・CSS・JavaScript・画像など様々なリソースを使用します。リソースが多ければ多いほどページを表示するスピードは遅くなり、検索エンジンからの評価は下がってしまいます。そのため各リソース毎に利用できる容量に上限を設けて、Webサイトを作成することでページ毎に差異が無くなりどのページでも一定数の表示速度を担保することができるようになります。 項目バジェットHTML10KB画像30KBCSS10KBJS100KBフォント20KB合計170KB推奨パフォーマンスバジェットの内訳 各ページでどれだけのリソースを読み込んで良いかの上限ライン(バジェット)は、3Gの遅い回線でもストレスなくページが表示できるようにweb.devが推奨している合計170KBに収まる内訳になっています。しかしページによって画像が多いページやJSプログラムが多く必要なページなど様々なため、170KBに収めるための配分はページ個々に調整します。 マークアップガイドライン作成 マークアップガイドラインはビジュアルガイドラインに記載した項目のコード部分を標準化するために整理を行います。整理を行う際には前述したセマンティックなマークアップを考慮してガイドラインを作成していきます。 システム設計 どういった形でWEBサイトを世の中に公開していくかをシステム設計を通して情報を整理して行きます。システム設計は開発手段によって設計する内容も異なってきます。ゼロから作るスクラッチ開発の場合、自由度が高い反面、費用が膨らんでいきます。一方でパッケージやオープンソースとして用意されているシステムを使って構築する場合は自由度が下がる反面、費用も抑えられます。また既にサービスとして提供されているシステムを使用する方法もあります。 スクラッチ開発必要な機能を独自に一から構築する方法パッケージ開発標準的な機能が搭載されたパッケージを使って構築する方法オープンソース開発標準的な機能が搭載されたオープンソースを使って構築する方法クラウドサービス利用サービスとして提供されている機能を利用する方法システム開発手法 WEBサイトを構築する上で使用するシステムは主にCMSになってきます。CMSはContents Management Systemの略で、WEBサイトに掲載されている情報を簡単に作成・編集・更新できるシステムになります。CMSを構築する際は、CMSの選定と各種CMSに合わせた設計が必要になります。 1 CMS選定 CMSには様々な種類があります。スクラッチで開発する場合は選定のステップは不要ですが、パッケージやオープンソース、クラウドサービスを使う場合はどのCMSを利用するのか選定を行います。CMSのシェアはWordPressが最も高く、次いでShopifyが多いというのが実情です。日本国内だけに絞ってみると8割以上がWordPressと圧倒的に多く、2番目にはAdobe Systemsがランクインしています。 順位(国内順位)CMS名タイプ1位 (1位)WordPressオープンソース/クラウドサービス2位 (3位)Shopifyクラウドサービス3位 (14位)Wixクラウドサービス4位 (圏外)Squarespaceクラウドサービス5位 (圏外)Joomlaオープンソース6位 (11位)Drupalオープンソース7位 (2位)Adobe Systemsパッケージ/オープンソース/クラウドサービス8位 (圏外)Google Systemsクラウドサービス9位 (圏外)Bitrixクラウドサービス10位 (圏外)WebflowクラウドサービスCMS世界シェアランキング(2022年2月時点)引用1:Usage statistics of content management systems引用2:Distribution of content management systems among websites that use Japanese 2 CMS設計 CMSの選定が終わったらそのCMSの特徴に併せてどう構築していくかの設計書を作成します。設計書の中にはデータの保持方法やテンプレートをどう構築するのか、コンテンツ更新時のワークフローをどうするのかなど整理します。 基本事項選定したCMSやインフラ情報などCMS構築に置いての基本事項テンプレート設計CMSが用意しているテンプレートの設計データベース設計CMS内で保持するデータの種類やテーブル情報などの設計ワークフロー設計コンテンツの承認方法などの運用時のワークフロー設計アカウント設計アカウントに付与するロールやアカウント管理方法の設計付随機能設計CMSと連携する機能の設計CMS設計項目 まとめ WEBサイトに掲載されている情報を通してユーザーと接点を持つことができるため、自社や自社サービスを周知するのにWEBサイトは非常に重要なコンテンツになります。またWEBサイトにユーザーを呼び込むための集客方法はいくつかありますが、検索エンジンからの集客はサイト設計方法の良し悪しで大きく変わってきます。つまりユーザーにも検索エンジンにもフレンドリーなサイトを作成するには事前の設計が要になってきます。サイト構造の全体像から細かなデティール、そしてシステム設計までを一気通貫で設計できることで、部分的な対応では成しえなかったSEO効果やUXが向上するサイト作りができるでしょう。 参考文献 現場のプロから学ぶ SEO技術バイブルAtomic Design ~堅牢で使いやすいUIを効率よく設計する

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