サイト導線設計とオンページSEOの両立｜実装手順と判断基準

この記事の対象: 制作会社・インハウスのWeb担当者で、CVを取る導線とオンページSEOの設計がぶつかって手が止まっている人
読了時間: 約13分

導線とオンページSEOがぶつかる場所は3つです。ファーストビュー、見出し、ページ内リンク。この3つの優先順位を先に決めてしまえば、残りは実装の作業になります。答えから書きます。ファーストビューはh1をテキストで残してCVを追従バーへ、見出しは「検索語｜読み手への語り」で役割を割る、リンクは補強・回遊・出口で置き場所を分ける。この記事はその3つをコピペできるコードまで降ろしたうえで、Soreiine!!ギャラリーの掲載サイトで実際にどう処理されているかを見ていきます。

---

結論｜導線設計とオンページSEOの優先順位はこの3行で決まる

迷ったときに見る表を先に置きます。衝突は毎回同じ3か所で起きるので、判断は3行で足ります。

衝突する場所	優先するもの	逃がす先
ファーストビュー	h1のテキスト	CVは下部の追従バー
見出し	前半に検索語	後半で読み手に語る
ページ内リンク	CV直前は空ける	回遊はH2の終わりへ

「どちらも満点にする」配置は存在しません。どちらを何%取るかを決めるのが設計です。h1を捨ててCVを取ったページは順位が安定せず、CVを捨ててh1を取ったページは順位が付いても問い合わせが来ない。上の表は、片方を完全に殺さずに済む落としどころを3つ並べたものです。

1. 見出し構造h1は1つ、h2から順に下げる

2. 内部リンク置き場所を役割で3分割する

3. 構造化データJSON-LDで見た目に影響させない

4. 実機確認スマホで全段落を目で読む

1と2を先にやる理由は、どちらもHTMLの構造そのもので、後から直すとデザイン全体に波及するからです。3の構造化データは見た目に一切影響しないので最後で問題ありません。

---

ファーストビュー｜h1を主、CVを従にする実装

ファーストビューにCVボタンを大きく置くと、h1が押し出されて画面外か装飾扱いになります。オンページSEOの観点ではここがいちばん痛い。h1はページの主題を名乗る唯一の枠で、ここが弱いページは順位が安定しません。

実装の答えは単純です。h1はテキストのまま残し、CVは追従バーに逃がす。

<!-- ファーストビュー: h1はテキスト、CVは下部固定へ -->
<section class="hero">
  <h1 class="hero__title">採用サイト制作<wbr>｜母集団を増やす構成から作ります</h1>
  <p class="hero__lead">応募が来ない原因は、デザインより先に<wbr>職種ごとの入口が足りていないことです。</p>
  <a class="hero__sub-cta" href="#contact">構成案を見る</a>
</section>

<!-- 下部追従バー。スマホだけ出す -->
<div class="sticky-cta" role="complementary" aria-label="お問い合わせ">
  <a class="sticky-cta__btn" href="#contact">無料で相談する</a>
</div>

.hero__title {
  font-size: clamp(1.5rem, 4.5vw, 2.5rem);
  line-height: 1.4;
  word-break: keep-all;
  overflow-wrap: anywhere;
}

.sticky-cta {
  position: fixed;
  inset: auto 0 0 0;
  padding: 0.75rem 1rem;
  background: #fff;
  box-shadow: 0 -2px 12px rgb(0 0 0 / 8%);
  /* iOS のホームバー分を足す */
  padding-bottom: calc(0.75rem + env(safe-area-inset-bottom));
  z-index: 50;
}

/* 追従バーの高さぶん本文の末尾を空ける */
body {
  padding-bottom: 5rem;
}

@media (min-width: 768px) {
  .sticky-cta { display: none; }
  body { padding-bottom: 0; }
}

なぜこう書くのか: h1を画像にしたりCVの下へ押し込むと、ページの主題を名乗る枠が実質なくなります。一方でCVボタンは位置を変えてもクリック率をそれほど落としません。むしろ追従バーのほうがスクロール中ずっと見えるので、ファーストビューに固定で置くより押される機会が増えます。奪い合いに見えて、実は片方だけ動かせば済む衝突です。

実装のポイント: position: fixed の追従バーは本文の末尾を隠します。body に padding-bottom を足しておかないと、フッターのリンクが永久に押せないページができます。上のCSSに入れてあるのはそのためで、スマホの実機でしか気づけない不具合です。

つまずきやすい点: env(safe-area-inset-bottom) は <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover"> を書いていないと常に0になります。viewport-fit=cover の指定漏れで「iPhoneだけボタンが切れる」のはこれが原因です。

対応ブラウザ: env() と clamp() はいずれも主要なモダンブラウザ（Chrome・Safari・Firefox・Edge）で対応しています。実務では無条件に使えますが、対応状況は変わるため導入前に一度確認してください。

h1の文字サイズをスマホからPCまで1行で成立させる書き方は、こちらで詳しく扱っています。

---

見出し｜検索語と読み手への語りを全角記号で割る

h2に検索語を入れろ、という指示はよく見ます。言われたとおりにやると「採用サイト制作のメリット」のような、誰の心も動かさない見出しが並びます。

分けて書く

• 前半に検索語を置く
• ｜の後ろで読み手に語る
• 両方の役割が立つ

混ぜて書く

• 検索語を文に埋める
• 語順が不自然になる
• どちらも弱くなる

図の左のように「検索語｜読み手への語り」で割ると、前半がオンページSEOの仕事、後半が導線の仕事になります。1つの文で両方を背負わせるから不自然になるわけです。

具体例を並べます。

• 悪い例: <h2>応募が増える理由について</h2> — 検索語が無く、言っていることも曖昧
• 悪い例: <h2>採用サイト 制作 費用 相場 解説</h2> — 検索語だけで、読み手に話していない
• 良い例: <h2>採用サイトの制作費用｜何にいくらかかるかを分解する</h2>

なぜこう書くのか: 検索エンジンは見出しの前半をそのページの主題として強く受け取ります。一方、読み手は目次と見出しを流し読みして「自分に関係あるか」を判断します。前半を検索語、後半を便益にすると、2種類の読者に別々の情報を渡せます。

何個のh2に検索語を入れるか

全部に入れる必要はありません。h2が5つあるなら、狙う語を含むものが1〜2つ、関連語を含むものが1〜2つ、残りは読み手の言葉で書く。この比率で足ります。全部に詰めると日本語の不自然さが前に出て、読み手が見出しを読み飛ばすようになります。

見出しレベルを見た目の大きさで決めない

よくある壊し方が、デザイン上小さく見せたいからh2をh4にする、という対応です。見出しレベルは文書構造の申告で、文字サイズとは無関係です。

<!-- 悪い: 見た目のためにレベルを飛ばす -->
<h2>サービス一覧</h2>
<h4>Webサイト制作</h4>

<!-- 良い: レベルは構造、サイズはCSS -->
<h2>サービス一覧</h2>
<h3 class="heading--sm">Webサイト制作</h3>

/* 見出しのサイズはクラスで決める。タグに紐付けない */
.heading--sm {
  font-size: 1rem;
  font-weight: 700;
}

なぜこう書くのか: 見出しレベルはスクリーンリーダーの目次としても使われます。レベルを飛ばすと読み上げの階層が壊れ、「次の章へ」の移動ができなくなります。SEOのためだけの話ではありません。

---

ページ内リンク｜出口と補強を同じ場所に置かない

関連ページへのリンクは内部リンクとして評価を流す役割がありますが、導線の観点では離脱の出口でもあります。この2つを同じ場所に置くと、CVの直前で読者を別ページへ送り出すページになります。

置き場所で分けます。

リンクの役割	置く場所	形
補強（根拠の提示）	本文の途中	文中リンク
回遊（関連テーマへ）	H2セクションの終わり	ブログカード
出口（CVへ）	ページ下部とファーストビュー	ボタン

CVボタンの直前にはリンクを置かない。 これだけ守れば、関連リンクを増やしてもCVは落ちません。実装上は、CVブロックの上に1段余白を作って「この区間にはアンカーを置かない」と決めてしまうのが確実です。テンプレートで区間を切っておけば、記事を書く人が毎回判断する必要がなくなります。

ブログカードの形で置く回遊リンクは、1つのH2セクションに1枚までが上限です。2枚並べると選択肢が増えて、どちらも押されなくなります。

---

ギャラリー掲載サイトでの処理のしかた

Soreiine!!のギャラリーには、この両立を素直に処理しているサイトが揃っています。掲載サイトを業種で分類していくと、「どちらに寄せているか」の傾向がはっきり出ます。自分の案件に近いジャンルから見るのが早い。

採用サイトは「職種」が導線とSEOの共通単位になる

採用サイトは両立がいちばんきれいに決まるジャンルです。理由は、ユーザーが探す単位と検索語の単位が一致しているから。「エンジニア 採用」「施工管理 求人」のように、職種がそのまま検索語になります。

採用トップ

• 職種一覧
• 社員インタビュー
• 福利厚生

職種詳細（職種ごとに1ページ）

• 仕事内容
• 募集要項
• 応募フォーム

応募フォーム

職種詳細を1ページずつ持たせると、検索の受け皿と応募の入口が同じページになる。

職種詳細ページが検索の着地点と応募の入口を兼ねます。ここが1ページにまとまっていれば、追加のCV導線を設計しなくても成立する。逆に職種を1ページに全部まとめたサイトは、検索でも拾われず、応募ボタンまでのスクロールも長くなります。

ギャラリーの採用サイトを並べて見ると、応募までの距離が短いものは職種単位でページを割っている傾向が強く出ます。構成の実例はこちらにまとめました。

WordPressで職種をカスタム投稿タイプとして持たせる書き方は別記事で解説しています。カスタム投稿タイプにするとパーマリンクが /recruit/engineer/ の形で揃うので、オンページSEOの観点でも都合がいい。実装側の手順はWordPress採用サイトの作り方｜求人カスタム投稿タイプの実装手順を参照してください。

コーポレートサイトは事例ページが導線のハブになる

コーポレートサイトはCVが曖昧になりやすいジャンルです。問い合わせしかCVが無く、トップから問い合わせまでの距離が遠い。

ギャラリーの掲載サイトを分類していくと、問い合わせが取れている構成には共通点があります。事例ページが導線のハブになっている。 検索から事例ページに着地し、そこから問い合わせへ流れる。会社概要やサービス紹介ではなく、事例が入口です。

事例ページがハブとして機能する理由は3つあります。

1. 検索語が具体的（「オフィス移転 事例」「ECサイト リニューアル 事例」）で、検索意図が「発注を検討している」に寄っている
2. 本文に業種・課題・施策が自然に入るので、関連語がキーワード詰め込みなしで揃う
3. 読み終わった直後が、問い合わせの動機がいちばん高い瞬間になる

ギャラリーのコーポレートサイト・事務所カテゴリを見ていくと、「トップで世界観を見せて事例へ送る型」と「トップから直接サービス説明へ入る型」に分かれます。前者のほうが事例ページ側に検索の受け皿を作れている傾向があります。傾向の分類はこちらです。

事例ページを量産できる形で作っておくと、オンページSEOの受け皿が自動で増えます。実装はカスタム投稿タイプ＋タクソノミーで、業種と課題を軸に絞り込めるようにしておく。手順はWordPress事例ページの作り方と見せ方｜実装コード付き解説にコード付きでまとめています。

ECサイトは回遊とSEOが同じ方向を向く

ECは例外的に、導線設計とオンページSEOがぶつかりません。カテゴリページを増やせば検索の受け皿が増え、同時に回遊導線も増える。構造が両方に効きます。

ただし罠が1つあります。色やサイズのバリエーションでページを分けると、中身が同じページが大量にできる。 検索エンジンから見ると、どのページを主にすべきか判断できなくなります。

<!-- バリエーション違いのページ。主のページを1つ名乗らせる -->
<link rel="canonical" href="https://example.com/products/tote-bag/">

なぜこう書くのか: canonical は「評価をこのURLに寄せてください」という申告です。色違い5ページがそれぞれ自分をcanonicalにしていると、評価が5分割されて全部が中途半端な順位になります。

つまずきやすい点: canonical を設定しても、内部リンクが分散先を向いていれば効き方が弱まります。canonicalの指定と内部リンクの向き先を揃えること。カートシステムによっては ?variant= のようなパラメータ付きURLを自動生成するものがあるので、テンプレート側で明示的にパラメータなしのURLをcanonicalに出す必要があります。

ギャラリーのECサイトを分類していくと、商品点数が少ないブランドは1カテゴリで縦に並べ、点数が多いショップは絞り込みを前に出す傾向が見えます。この分かれ方が、そのまま検索の受け皿の作り方の違いになっています。

情報量が多いサイトは一覧のレイアウトが導線を決める

ポータルやメディアのように項目数が多いサイトでは、一覧ページの組み方がそのまま導線になります。グリッドで並べると全体を俯瞰させる導線に、縦リストで並べると上から順に読ませる導線になる。どちらを選ぶかで、検索から着地した人が次にどこを押すかが変わります。

グリッドが向くレイアウトとCSSの実装はグリッドレイアウトのWebデザイン実例9選｜向いているレイアウトの作り方にまとめています。

---

構造化データと日本語の改行｜導線を壊さずに足す

構造化データは見た目をいっさい変えない

JSON-LDで書けば、デザインに手を入れずにオンページSEOの要素を足せます。導線を壊さない唯一の追加要素です。

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "BreadcrumbList",
  "itemListElement": [
    {
      "@type": "ListItem",
      "position": 1,
      "name": "ホーム",
      "item": "https://example.com/"
    },
    {
      "@type": "ListItem",
      "position": 2,
      "name": "採用情報",
      "item": "https://example.com/recruit/"
    },
    {
      "@type": "ListItem",
      "position": 3,
      "name": "エンジニア"
    }
  ]
}
</script>

実装のポイント: 最後の階層（今いるページ）には item を書きません。自分自身を指すURLを書くとエラー扱いになる実装があります。

つまずきやすい点: JSON-LDの中身は画面に出ているパンくずと一致させること。画面に無い階層をJSON-LDだけに書くと、構造化データのガイドライン違反になります。「見えないところにだけ書く」が通用しない領域です。

対応状況: JSON-LD は Google / Bing の両方が公式にサポートしています。microdata より JSON-LD が推奨で、HTMLの構造から独立しているため後から足しやすい。

日本語の改行を自分で決める

これはSEOの項目ではありませんが、導線に直接効きます。見出しやリード文がおかしな位置で折れていると、読み手は次の行に進む前に離脱します。

/* 日本語は文節で折る。ブラウザ任せにしない */
.lead, h1, h2, h3 {
  word-break: keep-all;
  overflow-wrap: anywhere;
}

<h2>採用サイトの制作費用｜<wbr>何にいくらかかるかを分解する</h2>
<p class="lead">応募が来ない原因は、<wbr>デザインより先に職種ごとの入口が<wbr>足りていないことです。</p>

なぜこう書くのか: word-break: keep-all で単語の途中での改行を止め、<wbr> で折ってよい位置を自分で指定します。この組み合わせだと、ブラウザは <wbr> の位置でしか折りません。overflow-wrap: anywhere は、器より長い英単語やURLがあふれるのを防ぐ保険です。

つまずきやすい点: <wbr> を文節ごとに細かく入れすぎると、広い画面で不自然な位置で折れます。入れるのは意味の切れ目だけ。入れたらPCとスマホの両方で全段落を目で読んで確認します。文字数の計算では判断できません。

対応ブラウザ: word-break: keep-all・overflow-wrap: anywhere・<wbr> のいずれも主要なモダンブラウザで広く対応しています。

---

20位台で止まっているページの直し方

複合クエリ（「サイト導線設計」と「オンページSEO」のように2つのテーマを掛け合わせた検索語）では、表示回数はあっても順位が2ページ目あたりで足踏みし、クリックがほぼ出ない状態がよく起きます。

典型的な例を挙げます。表示回数は一定数あるのにクリック数がほぼ0で、平均掲載順位が20位台で固定されている状態です。検索結果の2ページ目はほぼクリックされないので、この状態は「タイトルが悪い」のサインではなく「順位が足りていない」のサインです。ここでタイトルだけ書き直しても数字は動きません。

優先順位はこうなります。

1. 検索意図に正面から答える本文が前半にあるか — 導線だけ、SEOだけの記事は、両方を知りたい検索に半分しか答えていない
2. そのクエリ専用のページがあるか — 近いテーマの既存記事で受けていると、どのページも主役になれない
3. タイトルとディスクリプション — 1ページ目に入ってから直す

役割を分ける

• 基礎は既存記事に任せる
• 固有論点だけを前に出す
• 相互に内部リンク

同じ内容を足す

• どちらも基礎から書く
• 重複が増える
• どちらも順位が上がらない

左の形にすると、基礎を扱う記事は基礎の検索語で、こちらは複合の検索語で、それぞれ別のクエリを受けられます。右の形は共食いです。新しいURLを増やすより、既存ページの答えを前に出すほうが先。URLを増やすと、自分のページ同士で順位を取り合う側に回ります。

本文側でやることは3つ

• 狙うクエリを含む見出しを前半に置く — ページの主題として名乗る。詰め込みではなく1〜2か所
• クエリの構成語を本文で定義する — 「導線設計」と「オンページSEO」の両方に触れて、どちらのテーマも扱っているページだと示す
• 具体のコードを入れる — 「実装手順」を探しているクエリなら、コピペできるコードが無いページは答えになっていない

テクニック系の記事では3番が差になります。概念だけの説明は検索結果に溢れているので、コードが書いてあるページが残りやすい傾向があります。

---

よくある質問

導線設計とオンページSEOは、どちらを先に決めるべきですか

オンページSEOの見出し構造を先に決めて、その上に導線を載せます。見出し構造はHTMLの骨格なので後から変えるとデザイン全体に波及しますが、CVボタンの配置や追従バーはCSSの範囲で動かせます。壊しにくい順に決めるのが実務的です。

ファーストビューにCVボタンを置くとSEOに悪影響がありますか

ボタンそのものは問題になりません。問題はh1が押し出されて画面外に出たり、画像化されてテキストで読めなくなることです。h1をテキストで残したまま、CVを下部の追従バーに逃がせば両立します。追従バーはスクロール中ずっと見えるので、クリックの機会はむしろ増えます。

h2に狙うキーワードをいくつ入れるべきですか

全部のh2に入れる必要はありません。h2が5つあるなら、狙う語を含むものが1〜2つ、関連語を含むものが1〜2つ、残りは読み手の言葉で書く。この比率で十分です。全部に入れると日本語が不自然になり、読み手が見出しを読み飛ばします。

内部リンクを増やすと離脱率が上がりませんか

置き場所で変わります。CVボタンの直前にリンクを置くと離脱の出口になりますが、H2セクションの終わりに置けば回遊導線として働きます。本文の途中に置く文中リンクは根拠の提示なので、離脱にはあまり繋がりません。

20位台で表示だけあってクリックが0のページは、タイトルを直せば改善しますか

2ページ目にいる間はタイトルを直しても数字はほとんど動きません。先に本文を直して順位を上げるほうが効きます。検索意図への答えをページの前半へ移し、クエリの構成語を両方とも本文で扱っている状態にしてから、1ページ目に入った時点でタイトルとディスクリプションを調整してください。

---

まとめ

導線設計とオンページSEOがぶつかるのは3か所だけです。

• ファーストビューは h1をテキストで残し、CVは追従バーへ（body の padding-bottom を忘れない）
• 見出しは 「検索語｜読み手への語り」で役割を割る（全部に詰めない）
• リンクは 補強・回遊・出口の3つに置き場所を分ける（CV直前は空ける）
• 構造化データは 見た目を変えないので最後に足す（画面のパンくずと一致させる）

近いテーマの記事が既にある場合は、同じ内容を書き足さずに役割を分けてください。基礎は既存記事、こちらのページはクエリ固有の論点に絞る。この整理をしないと、自分のページ同士で順位を取り合います。

ギャラリーの掲載サイトを業種別に見ていくと、導線が成立しているサイトは「検索される単位」と「行動する単位」が一致しています。採用なら職種、コーポレートなら事例、ECならカテゴリ。この単位でページを割ることが、導線設計とオンページSEOの両立そのものです。

---