EmDashでつくるWebサイト制作の、解説と検証ノート記事一覧

記事から問い合わせにつなぐ設計:読者の段階ごとに案内を変え、EmDash で出し分ける

記事は読まれるのに、問い合わせにつながらない。最初に見直したいのは、どの記事の最後にも同じ「お問い合わせはこちら」しか置いていないかどうかです。読者の段階に合わせて案内を変える考え方と計測の仕方を整理し、EmDash 1.2.0 でカテゴリ別に案内を出し分ける構成を実際に作って、コードを変えずにできる範囲を確かめました。

この記事の目次

オウンドメディアを続けていると、「記事は読まれているのに、問い合わせが来ない」という段階がよく訪れます。そのとき最初に見直したいのは、記事の最後に何を置いているかです。どの記事にも同じ「お問い合わせはこちら」だけを置いていると、まだ調べ始めたばかりの読者には早すぎ、比べている読者には材料が足りません。

この記事では、CMS(ホームページの更新システム)の種類に関係なく使える導線の考え方を先に整理します。そのうえで、EmDash 1.2.0 で「カテゴリごとに記事の最後の案内を変える」構成を実際に作り、どこまでコードを変えずにできて、どこからテンプレート(ページの見た目を決めるプログラム)の作業が要るかを確かめました。Nowever には、導線の改善で問い合わせが何件増えたという数字はまだありません。そのため効果は約束せず、作り方と確かめた事実だけを書きます。

読者の 3 つの段階と置く案内:知る段階には関連記事とメール登録、比べる段階には事例・料金の目安・比較記事、決める段階には相談の窓口と相談前に用意するもの
一つの「お問い合わせはこちら」を全記事に置くより、段階に合った次の一歩を置く

読者は段階ごとに、求める「次の一歩」が違う

記事にたどり着く読者は、おおまかに 3 つの段階のどこかにいます。

  • 知る段階。 課題をまだ言葉にできず、調べている。たとえば「WordPress の保守とは何をするのか」を検索した人です。この人に相談フォームを見せても、まだ押す理由がありません。次に読む記事や、用語の解説、新着を受け取るメール登録が合っています。
  • 比べる段階。 選択肢が見えて、比べている。「CMS の乗り換え 費用」を調べている人です。事例、料金の目安、比較の記事や資料が次の一歩になります。
  • 決める段階。 相談先を探している。会社名や「〜 制作 相談」で来た人です。ここでは相談の窓口を迷わず見つけられること、相談の前に何を用意すればよいかが分かることが大事です。

ここで言いたいのは、案内を増やすことではありません。記事ごとに、その読者がいちばん取りやすい次の一歩を 1 つ置くことです。案内が 5 つも並ぶと、どれも押されにくくなります。

記事の最後の案内は、カテゴリ単位で変えると回る

段階に合わせると言っても、記事 1 本ずつ案内を考えるのは続きません。現実的な出発点は、カテゴリごとに既定の案内を決め、特に大事な記事だけ個別に差し替えるやり方です。カテゴリは記事の主題で分けたものなので、読者の段階とおおむね重なります。

カテゴリの例

読者の段階

記事の最後に置く案内

基礎の解説

知る

次に読む記事、メールで新着を受け取る

比較・検証

比べる

事例、料金の目安、比較の資料

進め方・費用

決める

相談の窓口と、相談前に用意するもの

関連する記事とサービスへのリンクを、本文の中にも置く

記事の最後の案内とは別に、本文の中で話題が出た箇所に、関連する記事やサービスのページへのリンクを置きます。最後まで読まずに離れる読者もいるので、末尾の案内だけに頼らないためです。リンクの文言は「こちら」ではなく、行き先が分かる言葉にします。

フォームは、記事から近く、項目は少なく

相談のフォームに行き着いても、項目が多いと手が止まります。最初の相談で答えられる項目(会社名、連絡先、相談したいこと)に絞り、予算や時期は「分かれば」の扱いにします。記事から 1 回の移動でフォームに届くこと、スマホで入力しやすいことも確かめておきます。フォームの機能を EmDash でどう用意するかは、メディアでよく使う機能の確認表で扱っています。

計測しないと、どの案内が効いたか分からない

導線は、一度作って終わりではありません。どの記事のどの案内から問い合わせが来たかが分からないと、直す場所も決められません。最低限、次の 2 つを用意します。

  1. 案内のリンクに、出どころの印を付ける。 例: /contact?from=cta-compare のように、リンク先の URL に「どの枠から来たか」を付けます。アクセス解析では、この印ごとに移動の数を数えられます。
  2. 問い合わせの記録に、どの記事から来たかを残す。 フォームの送信内容に、直前に読んでいた記事の URL を自動で入れる項目を持たせます。問い合わせの件数が少ないうちは、割合を見るより、1 件ずつ出どころが分かるほうが役に立ちます。

数字は、少なくとも数か月分をためてから比べます。案内の文言を毎週変えると、何が効いたのか分からなくなります。

EmDash の場合、公式ドキュメントの管理画面の機能一覧にアクセス解析は含まれていません。解析用のタグ(計測のための短いプログラム)は、テンプレートに直接書くか、ページにタグを差し込む追加機能(WordPress のプラグインにあたるもの)を使って入れます。後者は、サイト本体と同じ場所で動く「ネイティブプラグイン」の形式でだけ作れる、と公式ドキュメントに書かれています。

EmDash で試した:コードを変えずにできたこと、テンプレートが要ったこと

ここからは、上の「カテゴリごとに案内を変え、大事な記事だけ個別に差し替える」構成を、EmDash で実際に作った記録です。

検証の条件

  • EmDash 1.2.0(2026年10月15日に npm create emdash@latest で作成したブログテンプレート、Node.js 実行、ローカルの開発サーバー)
  • テンプレートに付いている公開済みのサンプル記事 7 本(カテゴリ「Development」4 本、「Design」1 本、「Notes」2 本)
  • 操作は、管理画面と同じ API(管理画面が内部で使っている窓口)から行い、記事の編集画面は画面で確認しました。手順と、テンプレートに加えた変更は再現できる形で残しています。

手順と結果

  1. 既にある枠に案内を足す(コードの変更なし)。 ブログテンプレートには、記事ページの右側に「サイドバー」という枠が最初からあります。管理画面と同じ API で、ここに「ご相談はこちら」の文章とリンクを足すと、すぐに全記事に出ました。ただし、このテンプレートでは画面の幅が 1100px 以下になるとサイドバーごと表示されません。スマホの読者には届かない位置です。
  2. 記事に案内用の項目を足す(コードの変更なし)。 管理画面と同じ API で、記事の種類(コレクション)に「記事末の案内(文言)」と「記事末の案内(リンク先)」の 2 項目を足しました。項目は、管理画面の記事の編集画面で、本文と抜粋の下にすぐ現れました。値を入れて公開もできました。ただし、公開ページには何も出ません。足した項目をどこにどう表示するかは、テンプレートが決めるからです。
  3. カテゴリ別の枠を作る(コードの変更なし)。 管理画面と同じ API で、ウィジェットの枠として「cta-development」「cta-design」と既定用の「cta-default」という 3 つの枠を作り、それぞれに案内の文章を入れました。これも、テンプレートが読みにいかない限り、公開ページには出ません。
  4. テンプレートで表示の決まりを作る(作業が要る)。 記事ページのテンプレートに、「記事ごとの指定があればそれを出す。なければ、記事のカテゴリの枠を出す。カテゴリの枠が空なら既定の枠を出す」という決まりを足しました。追加は 12 行です。これで、Development の記事には開発向けの案内、Notes の記事には既定の案内、個別に指定した Design の記事にはその記事専用の案内が、本文のすぐ下に出ました。
  5. その後の変更(コードの変更なし)。 テンプレートを変えたあと、管理画面と同じ API で「cta-notes」の枠を足すと、Notes の記事の案内が既定から Notes 用に切り替わりました。
検証の結果:コードを変えずにできたのは、既存のサイドバー枠への案内の追加、記事への案内用の項目の追加と入力、カテゴリ別の枠の作成。テンプレートの作業が要ったのは、記事末への表示、カテゴリに応じた枠の選び分け、記事ごとの指定を優先する決まり
最初に一度テンプレートを作れば、その後のカテゴリの枠の追加はコードを変えずにできる

公式ドキュメントにも「管理画面でメニューやウィジェットを足しても、Astro のページがそれを読みにいかない限り公開サイトは変わらない」と書かれています。今回の結果は、その説明どおりでした。

EmDash でやりやすかった点

  • 項目の追加にコードの変更が要らず、すぐ使える。 記事の種類に項目を足すと、その場で編集画面に現れました。開発環境では、テンプレートから項目を読むための型の定義も自動で更新されていました。
  • 「枠」と「枠の中身」が分かれている。 枠の場所はテンプレート、中身は管理画面、という分担が最初から決まっています。担当者は、案内の文言やリンク先を自分で直せます。
  • 案内の型を「セクション」として用意できる。 本文の途中に入れる定型の案内(たとえば比較資料の紹介)は、管理画面の「セクション」に登録しておくと、本文の編集中に呼び出して挿入できます。挿入したものは記事ごとの複製になるので、元を直しても既存の記事は変わりません。全記事で同じ文言をそろえたい場合はウィジェットの枠、記事ごとに書き換えたい場合はセクション、と使い分けます。

このラボ自身の導線と、正直に書くと

この EmDashラボの記事ページにも導線があります。画面上部の「制作のご相談」、右側のサービス紹介の枠、本文の下の相談の案内、同じカテゴリの記事を 3 本まで並べる「あわせて読みたい記事」、そして本文の最後の 1 文です。どれもテンプレートに直接書いた固定の案内で、カテゴリによる出し分けはまだしていません。右側の枠は画面の幅が 1000px 以下では表示しない作りなので、スマホでは本文の下の案内と最後の 1 文が主な導線になります。問い合わせへの効果は、まだ数字で示せる段階にありません。

そのうえで、正直に書いておきたいことが 3 つあります。

  • 導線より、記事の中身が先です。 読者の疑問に答えていない記事の最後に、どれだけ良い案内を置いても押されません。案内を作り込む前に、記事が「読んでよかった」と思える内容になっているかを確かめます。
  • 計測がないと、改善はできません。 案内を変えた前後で、どの枠から何件の移動と問い合わせがあったかを比べられないと、勘で直し続けることになります。導線の作業は、計測の準備とセットで見積もります。
  • この構成は、EmDash でなければ作れないものではありません。 WordPress でも、項目を足す仕組みやウィジェットを使えば、同じ考え方の構成は組めます(この記事では WordPress 側は試していません)。EmDash の利点は、項目と枠の追加にコードの変更が要らず、追加機能を入れずに組める点です。今の CMS で導線の改善ができているなら、それだけを理由に移る必要はありません。

次に何をするか

まず、今の記事をカテゴリごとに並べ、それぞれの記事の最後に何が置いてあるかを書き出してみてください。全部が同じ案内なら、カテゴリごとに「読者の次の一歩」を 1 つずつ決めるところから始められます。そのうえで、案内のリンクに出どころの印を付け、数か月分の記録をためます。

オウンドメディアの立ち上げや、記事から問い合わせへの導線の作り直しを検討している場合は、EmDashでつくるWebサイト制作からご相談ください。

参考(一次情報)

WRITTEN BY

EmDash制作チーム

Noweverの「EmDashでつくるWebサイト制作」の制作チームです。Cloudflareの基盤で動くCMS「EmDash」によるサイト設計、更新機能、セキュリティ、WordPressからの移行について、制作の現場で確認したことを記録しています。

EmDash制作チームについて →
← すべての記事を見る