VK FullSite Installer「製造業デモサイト」を作ってわかった!サイトの信頼は「構成・導線」で作りやすくなる


  1. Staff Blog
  2. WordPress
  3. VK FullSite Installer「製造業デモサイト」を作ってわかった!サイトの信頼は「構成・導線」で作りやすくなる

アドベントカレンダー参加中!

この記事は「Vektor WordPress Solution Advent Calendar 2025」の12月16日の記事です。

こんにちは、スタッフの松田です。
昨日の対馬 俊彦さんによる「アコーディオンブロックの比較 – VK Blocks Pro vs WordPress コア」はご覧いただけましたか?
それぞれの特徴が整理されていて、選び方の参考になるのでおすすめですので、ぜひご覧ください!

今回は、VK FullSite Installerについての記事です。
VK FullSite Installerはササキさんの記事でも登場しておりますが、こちらはWordPress管理画面のデモサイト一覧から選んだデモサイトをインポートして、同じ構成のサイトをすぐ再現できるプラグインです。 デモサイト一覧はこちらからでも確認できます。

そのデモサイトのひとつ「製造業」を制作した側として、「なぜこうしたのか」「何を解決したかったのか」をまとめます!

なぜ製造業のデモサイトを作ったのか

理由はシンプルで、毎年弊社で取っているユーザーアンケートの中で「製造業に関わっている」人の回答が多かったからです。
制作会社さん・製造業の担当者さんのどちらにも使える、汎用的な形を狙いました。

このデモで意識したのは、信頼につながる情報が揃っていることです。
製造業サイトでは、対応範囲や実績、体制などの情報が積み重なることで「相談してもよさそうか」を判断しやすくなると感じています。

製造業サイトの構成要素を最初に洗い出し

製造業サイトを作るとき、最初に必要なのって「いきなりページを作ること」より、何を載せれば信頼につながるかを整理することだと思っています。
製造業は会社ごとに強みや見せたい内容が違うので、まずは「よく見かける構成や導線」を集めて、参考にできる形に整理しました。

洗い出すときに見ていたのは、だいたいこの3つです。

  • 何を載せるか(ページ構成)
  • どう辿らせるか(導線)
  • どう増やせる形にするか(情報の粒度・運用)

この洗い出しを踏まえて、製造業デモでは「信頼獲得」に寄与しそうな要素を中心に、実際のデモのページ構成に落とし込んでいきました。

次は、その結果としてデモにどんな要素を入れたか(どんなメニュー構成にしたか)をまとめます。

今回のデモで「信頼」を作るために入れた要素

会社ごとに強みも見せたいものも違うので、「これさえ入れればOK」みたいな話ではないかなというのは前置きで書いておきます。

なので今回は、いろんな製造業サイトを見て回って、「こういう情報があると安心しやすそうだな」「これはだいたい置いてあるな」と感じたものを、デモにまとめて入れました。

デモに入れたのは、ざっくり言うとこのあたりです。

  1. 事業内容:まず何をしている会社かが分かる
  2. 技術・設備:できること/裏付けになる情報が見える
  3. 導入事例:実際にやってきたことが見える
  4. 品質保証:安心材料になる情報がまとまっている
  5. 会社案内:会社の素性が分かる(概要・沿革・工場案内など)
  6. お知らせ:会社の活動が見える
  7. 資料請求・お問い合わせ:次に進む入口がある

最初からこのへんが揃っていると、インポートした人が「うちはここを残す/これは削る」「この順番は変える」と判断しやすいと思います。
白紙から悩む時間を減らして、必要なところに手を入れるための土台、みたいなイメージです。

次は、この要素を置いただけで終わらせないために、意識した見せ方(特にトップページと導線)に移ります。

デモサイトの見せ方で意識したこと

トップページ

今回のデモでいちばん意識したのは、コンテンツの量そのものより「どう見せるか」でした。製造業サイトって、細かい説明を全部読んでもらう前に、ぱっと見で「ちゃんとしてそう」「相談しても大丈夫そう」って空気が伝わるかが大事だと思っていて。

なのでトップページは、情報を詰め込みすぎないようにしつつ、

  • 何をしている会社か(事業の輪郭がすぐ分かる)
  • 何ができるか(技術・設備に迷わず辿れる)
  • どんな実績があるか(導入事例に自然に流れる)
  • 安心材料があるか(品質保証や会社情報への入口がある)

これらが順番に目に入るように組み立ててみました。
「全部を完璧に載せる」より、まずは見たい情報に迷わず辿り着けることを優先したイメージです。

デモサイトとしては、インポートした人が自社用に差し替えたときも、この見せ方のまま使いやすいのが理想なので、要素は入れつつも、並びと密度のバランスはかなり気をつけました。

問い合わせ導線

問い合わせ導線は押す直前の迷いを減らす流れを作るのが大事だと思っています。
このデモでは、主に次の4点を意識しました。

入口を分ける

ヘッダーで 「資料請求」と「お問合せ」 を分けています。
いきなり相談はハードル高い人もいるので、「まずは資料」も選べる状態にして、最初の一歩を軽くしました。

押したくなった瞬間に押せる位置を作る

本文中に 「見積依頼・ご相談はこちら」 を差し込んでいます。
CTAがページ末尾にしかないと、気持ちが固まった瞬間に探しに戻る必要が出て、勢いが落ちがちなので。

フッターで出口を作る

ページ下部に 「資料請求・お問い合わせ」 を置いて、最後に出口を用意しています。
回遊したあとほど「で、どこから連絡するんだっけ?」が起きやすいので、最後に必ず次の一手が見えるようにしています。

フォーム直前の不安を逃がす

問い合わせページからでも FAQに移動できる導線を残しています。
フォーム直前って不安が出やすいので、「一回戻って確認できる」道があると離脱が減る感覚があります。

更新される情報は「カスタム投稿タイプ」に

サイトは公開して終わりではなく、運用の中で更新され続けることで完成度が上がります。製造業サイトの場合、信頼に寄与する情報の多くが「増えていく情報」であるため、固定ページで抱え込むよりも、更新しやすい構造に寄せることを優先しました。

このデモで「更新される前提」として扱ったのは、主に次の2つです。

  • 導入事例:継続的に増える可能性が高く、一覧・詳細の両方で見せたい
  • 生産設備:追加・入れ替えが発生しやすく、分類して探せる形が必要になりやすい

生産設備については、ユーザーの声もきっかけで追加しました。設備は会社の強みの裏付けになりやすい一方で、情報が増えるほど整理が必要になるので、カテゴリで辿れるようにしておくと運用面でも見せ方の面でもラクになるかと思いました。

検討したが採用しなかった構成(資料請求まわり)

製造業サイトを調べた際、資料請求ページにカタログ表紙を一覧表示し、クリックすると「その資料だけ請求できるフォーム」へ遷移する構成をよく見かけました。
今回のデモでも検討しましたが、最終的には採用しませんでした。

理由は、これを再現するなら資料をカスタム投稿タイプで管理しつつ、個別資料のダウンロード(または送付)まで含めて体験として成立させる必要があると考えたためです。
今回は「まず立ち上がることや差し替えに集中できること」を優先し、資料請求の導線は用意しつつも仕組み自体は入れない判断にしました。

ただし、デモはブロックテーマで構成しており、WordPress標準の機能を制限していないため、必要に応じてカスタム投稿タイプやテンプレート、導線を追加して拡張できます。

インポート後にどこから差し替えると進めやすいか

VK FullSite Installer は、まずデモと同じ状態を入れてから「自社用に差し替える」ことで最短で形にしやすいのが利点です。製造業のデモサイトを使う場合、私は次の順で手を入れるのが進めやすいと思います。

  • 会社情報・連絡先まわり
  • トップの写真・キャッチコピー(第一印象)
  • 事業内容・強みの文章
  • カテゴリ/ターム(分類の言葉)
  • 更新される部分(お知らせ・導入事例・設備)の中身

なお、メニューやリンク付きのボタンや固定導線は、最初から大きく動かすよりも、まず中身を差し替えて成立させてから必要に応じて調整するほうが手戻りが少なくなります。

以上、製造業デモの制作メモとして、設計の考え方と実装の判断点をまとめました。

製造業に限らず、他のデモも同じように「まず形にして差し替える」ための土台として作られているので、用途に近いデモから試してみると進めやすいはずです!

アドベントカレンダーへのご参加をお待ちしております!

ベクトルスタッフ以外のユーザーの皆様の参加大歓迎です!参加特典もあります。

みなさまのご参加を心よりお待ちしております!

この記事を書いた人

MatsudaKei
MatsudaKei
WordPressでは主にブロックエディターを活用したデザインのカスタマイズをしています。2024年からは開発も行うようになりました。他にも絵の制作を行っています。
 Vektor Passport

を購入して

特典をゲットしよう!

X-T9 工務店
( ナチュラル )

19,800円 (税込)

0に!

Lightning ビジネス(Evergreen)

9,900円 (税込)

0に!

Lightning 工務店
( ナチュラル )

19,800円 (税込)

0に!

今なら!

Vektor Passport の
有効期間中、上記の
デモサイトデータを
何度でも素早くまるごと
インポートできます!

爆速!!1分デモサイトと同じ
ホームページができる

VK FullSite Installer のロゴ

選んだデモサイトと同じ状態の WordPress サイトを、わずか数ステップで再現できるインポート専用プラグインです。数クリックで、プロ品質のサイトがすぐに起動します。

フルサイト編集に対応したブロックテーマ X-T9

フルサイト編集対応ブロックテーマ

WordPress テーマ X-T9 は、WordPress 5.9 から実装されたフルサイト編集機能に対応した「ブロックテーマ」と呼ばれる新しい形式のテーマです。
ヘッダーやフッターなど、今までのテーマではカスタマイズが難しかったエリアもノーコードで簡単・柔軟にカスタマイズする事ができます。

パターンを使って

よりクオリティの高いサイトに

パターンとは、WordPressのブロックを組み合わせて作ったデザインテンプレートのようなもの。プロのデザイナーが制作したパターンを300以上公開中!コピペしながら高品質なサイトを簡単に作れます。

VK AB Testing は、ABテストを実施するための WordPress 用プラグインです。ブロックエディターでテストパターンを自由に作成でき、ランダム表示とクリック計測が可能です。Webサイトや広告などの施策の改善にぜひご活用ください。


このデモサイトは Vektor,Inc. のテーマとプラグインで構築されています。ご購入や詳細情報は下記のリンクもご参考ください。

PAGE TOP