Zenn
Open5

零細企業の自社コーポレートサイトを制作した話

HiraiKyoHiraiKyo

「Next.jsでブログ作成」を実務水準で行うには？　をまとめます。
公開できる水準になったら、実際に作成したコーポレートサイトURLをここに貼り付けます。

執筆目的

  • 「Next.jsでサクっとブログ作成！」は情報あるけど、本格的なコーポレートサイト・ランディングページの作り方は情報がない
  • フィードバック欲しい
  • ウェブ制作者としてのLP制作の視点ではなく、企業方針を考慮した社内の人間の視点は新しい
HiraiKyoHiraiKyo

委託制作の場合には、見た目やアクセス数が重要視されます。
ですが、今回は自社サイトの制作なので、一般的なウェブ制作の仕方とは異なり、自社サイトを作る目的を考えるフェーズからサイト制作をしていく必要があります。
そこで、当記事では企画 -> 設計 -> 実装 の3ステップで執筆します。

HiraiKyoHiraiKyo

企画

小さな会社ですが、事業を拡げていきたいとなり、コーポレートサイトを作ろうとなりました。
そこで、一度話し合って大体こんな感じで作りたいよねと企画しました。

LP作成経緯

  • 弊社(BtoB)の顧客獲得チャネルを増やしたい
  • コーポレートサイトを作成し、お問い合わせを顧客獲得の導線にする
  • 営業支援のために、弊社製品の資料やソフトウェアダウンロードリンクを提供しやすくする

戦略

ゴールは、「お問い合わせ数の増加」にしました。

「検索キーワード」→「お問い合わせ」のカスタマージャーニー

  • 想定される検索キーワードに対して、どのページにアクセスされて、そこからお問い合わせに至るまでの経路を用意する。
  • 検索キーワードは初めは想像で進めるが、ヒアリングを通して実際の検索キーワードに調整する。

ドメインパワー向上

  • 顧客獲得の導線とは別に、SEO対策としてドメインパワー向上のみを目的とする投稿群の作成

要求定義

  • コーポレートサイトなので、投稿頻度は高くない
  • どういう製品紹介を書くか？（=カスタマージャーニー）が定まってない。トライアンドエラーしたい
  • 新しい顧客獲得の導線を作るので、そもそも顧客像が定かでない。ユーザーペルソナを想定する必要がある
  • 執筆者は複数、製品・ドメインごとに執筆者が異なる

要件定義

  • ページ数の量産よりも、1ページのデザイン変更・文章推敲に強くしたい
  • 最初から完璧なページの作成ではなく、とりあえず見れるレベルで出す -> 推敲 の流れ
  • トライアンドエラーのために変更を追跡可能にしたい
  • 誰でも執筆可能な環境
  • (当たり前体操) SEO, フォーム, レスポンシブ

特殊要件

  • 弊社全員エンジニアなので、生 HTML + CSS 程度なら誰でも書ける & Github使える
HiraiKyoHiraiKyo

設計

話し合った内容を元にどのようなサイトを制作するかを考えました。
やはり一番大きな課題は、以下の要求をどうサイトに反映させるかでした。

  • どういう製品紹介を書くか？（=カスタマージャーニー）が定まってない。トライアンドエラーしたい
  • 新しい顧客獲得の導線を作るので、そもそも顧客像が定かでない。ユーザーペルソナを想定する必要がある

そこで、なぜ顧客像が定まらないのかを明らかにし、顧客像を明らかにする手段を用意することにします。
顧客像を明らかにする手段があれば、弊社メンバーで記事を作成していけそうです。

事業分析

まず、営業スタイルは以下の4つがあります。

  • 御用聞き営業
  • プロダクト営業
  • ソリューション営業
  • インサイト営業

弊社には自社製品はありますが、主業務はシステムインテグレーションであり、収益モデルはプロジェクト型です。
そのプロジェクトは、既存のお客様とのやり取りから始まります。
つまり御用聞き営業を行っており、「問い合わせを増やしたい」という要求は御用聞きの相手を増やしたいというのが実際の目的だと分かりました。

御用聞き営業とは、すでに取引をしていているお客様のところに定期的に伺って、その時点で必要なものがないかを聞き、必要なものを販売するというスタイルです。その際に新しい製品・サービスを紹介して勧めることもあります。また、お客様から必要になった時に電話がかかってきて、要望に応じた製品・サービスを提供することもあります。

どちらにしても、営業側から積極的にアプローチするというよりも、お客様の要望を聞いて販売するスタイルとなります。ルート型営業に近いタイプで、新規見込み顧客を得ることはあまり考えずに、既存のお客様に注力し、良い関係性を保っていく中で営業するというのが主な考え方です。一部の業界では今でも踏襲されている営業スタイルですし、お客様との関係性が強い状況では効率の良い手段です。

しかし、このやり方では新規に開拓して事業を広げていくことは難しいですし、ライバル企業にリピーターが奪われてしまうようなことがあると大きなダメージを受けます。また、お客様が欲しいと言ってこなければ販売しづらいので、売り上げが不安定になってしまい、予測が難しいという側面もあります。

https://sherpaworks.jp/sherpa/solutionsalesisold/#ソリューション営業が古いと言われる理由

どうやら、この営業スタイルが顧客像を明らかにするのを難しくさせているようです。

営業スタイルの転換

そもそも既存の営業スタイルの延長線上にサイトを作る事が難しいのですから、サイトでは営業スタイルの転換をしなくてはなりません。
とはいえ手元に収集したデータもありませんし、どのようなデータが今必要なのかもわかっていません。

そこで、現在対応中の取引先企業について弊社メンバーにヒアリングを行い、いま弊社に来ている相談内容（=顕在ニーズ）の根本にはどんな問題が潜んでいるのか（=潜在ニーズ）を仮定することにしました。
なんちゃってインサイトですね！　とりあえずChatGPTに教えてもらましょう。

現在対応中の取引先企業について弊社メンバーにヒアリングを行い、いま弊社に来ている相談内容（=顕在ニーズ）の根本にはどんな問題が潜んでいるのか（=潜在ニーズ）を仮定することにしました。

以下の表の潜在ニーズを埋めて

| 顕在ニーズ | 潜在ニーズ |
| --- | --- |
| ... | |


## 共通する潜在的課題

### 人材関連
1. 労働力不足
   - 若手人材の確保困難
   - 熟練工の高齢化
   - 技能伝承の課題

2. 労働環境改善
   - 作業負荷の軽減
   - 危険作業からの解放
   - 働き方改革への対応

### 品質管理
1. 品質保証の高度化
   - 検査精度の向上
   - トレーサビリティの確保
   - 品質データの活用

2. コスト最適化
   - 検査工程の効率化
   - 不良品発生の低減
   - クレーム対応コストの削減

### 生産性向上
1. 設備稼働率の向上
   - 24時間運転の実現
   - 段取り時間の短縮
   - メンテナンス性の向上

2. プロセス改善
   - ボトルネックの解消
   - 工程間連携の最適化
   - データに基づく改善

ChatGPTが候補に挙げてくれた共通する潜在的課題のなかで、弊社メンバーとのヒアリング時に多く予想されたのは「人材不足」でした。
よし、弊社サイトに何らかの検索ワードで辿り着く人は、根本原因に「人材不足」を抱えていると仮定することにしましょう。

HiraiKyoHiraiKyo

ページ構成

.
├── ホーム
├── 製品情報
│ └── 製品個別ページ
├── 事例紹介
│ └── 事例個別ページ
├── ニュース
│ └── ニュース個別ページ
├── 会社情報
└── お問い合わせ

技術選定

  • ソースをGithubで管理
  • Next.js SSG で Webサイト作成
  • Github Pages でサイト公開