「何をしてくれる会社か」が伝わるサイトへ。不動産コンサルティング会社のHP開発事例

概要
会社案内としてのサイトはあるものの、読んでも何を依頼できる会社なのか分からず、問い合わせは紹介と電話に依存していました。まず提供しているサービスを言語化するところから入り、「誰の、どういう場面の相談を受ける会社か」が最初の画面で伝わる構成に再設計。Next.jsで実装し、更新は社内で回せるようにしたうえで、構造化データと表示速度まで含めて公開しました。
この事例の要点
- デザインではなく「何をしている会社か」の言語化から着手した
- 扱う案件を場面ごとに整理し、読み手が自分の状況から該当ページに辿れる導線にした
- コンサルティングという無形商材を、進め方・関わる期間・成果物の形で説明する構成にした
- 更新頻度の高い箇所はCMSに寄せ、社内で更新を回せる状態で引き渡した
- 構造化データをサーバー側で出力し、検索エンジンとAIの双方から読める状態にした
案件の概要
- 業種
- 不動産コンサルティング
- 規模
- 少人数のコンサルティング会社
- ご支援内容
- サービスの言語化/情報設計/デザイン/実装/公開
- 対象
- コーポレートサイト(新規構築)
- 引き渡し後
- 更新頻度の高い箇所は社内で運用
主な技術
- Next.js
- TypeScript
- Tailwind CSS
- ヘッドレスCMS
- Vercel
相談時の状況
ご相談の入口は「サイトを新しくしたい」でしたが、話をうかがっていくと、本当の課題はデザインの古さではありませんでした。
- 問い合わせのほとんどが紹介か電話で、サイトは名刺代わりにしかなっていない
- サイトを見ても、何を依頼できる会社なのかが分からない
- 初回の商談で、毎回ゼロから事業説明をしている
- 更新に制作会社への依頼が必要で、実質的に何年も止まっていた
特に大きかったのが3つ目です。コンサルティングは形のない商材なので、サイトが説明を肩代わりできていない分、その負担がすべて商談の場に乗っていました。見た目を新しくしても、ここは解決しません。
つくったもの
① サービスの言語化から始める
最初にやったのは、実際に受けてきた案件をひととおり洗い出すことでした。どういう相談で始まり、何を調べ、何を出し、どこまで関わったのか。それを並べると、これまで「不動産コンサルティング」の一語にまとめられていた仕事が、いくつかの明確な型に分かれることが見えてきます。
この整理をお客様と一緒に行い、サービスの名前と説明を先に確定させてから、ページ構成に落としました。サイト制作の工程としては地味ですが、無形商材ではここが成果を分けます。
② 読み手の状況から辿れる構成にする
サービスを会社側の分類で並べても、読む側は自分がどれに当てはまるか分かりません。そこで、読み手が置かれている場面を入口にし、そこから該当のサービス説明へ辿れる導線にしました。
各サービスのページでは、次の順で説明しています。コンサルティングの見積は依頼内容によって変わるため、金額を並べるのではなく、何にどれだけの手間がかかるのかが分かる構成にしています。
- どういう状況の相談を受けているか
- 実際にどう進めるか(段階と、それぞれで何が決まるか)
- どれくらいの期間、どういう関わり方になるか
- 最終的に何が手元に残るか(成果物の形)
- よくある質問
③ 更新が社内で回る状態にする
前のサイトが止まっていた原因は、更新のたびに外部への依頼が必要だったことでした。同じ状態で引き渡しても、また止まります。
そこで、更新頻度で置き場所を分けました。実績やお知らせのように増えていくものはCMSに寄せて社内で追加できるようにし、構成そのものに関わる部分は実装側に持たせています。すべてをCMS化すると、今度は編集画面が複雑になって誰も触らなくなるためです。
④ 読まれる前提を整える
- 構造化データをサーバー側で出力する。 検索エンジンとAIアシスタントの双方から、会社情報とサービス内容が正しく読める状態にしました。JavaScriptの実行後に挿入する方式では読まれないことがあるため、最初からサーバー側で出力しています。
- 表示速度を最初から設計に入れる。 画像の扱いとフォントの読み込みを含めて、あとから改善するのではなく実装時点で織り込みました。
- スマートフォンでの読みやすさを基準にする。 BtoBでも、最初に開かれるのはスマートフォンです。文字サイズと行間はそちらを基準に決めました。
- 問い合わせフォームを用途で分ける。 相談内容の種類が分かる状態で届くようにし、返信の初動を速くしました。
結果
商談の前にサイトを読んでもらえる状態になりました。何を依頼できる会社なのか、どう進むのか、何が手元に残るのかがページ上で説明されているため、初回の打ち合わせを事業説明からではなく、相手の具体的な状況の話から始められます。問い合わせフォームも用途で分けたため、相談の種類が分かった状態で届きます。
また、サービスを言語化する工程そのものが、社内で「自社は何を売っているのか」を揃える機会になりました。サイトという成果物とは別に、この整理が残ります。
同じ進め方が向いている会社
- 無形商材(コンサルティング・士業・専門サービス)を扱っている
- 問い合わせが紹介と既存の人脈に依存している
- 初回商談で毎回ゼロから事業説明をしている
- サイトの更新が止まっており、実質的に放置されている
Webサイトの制作は、システム・ソフトウェア開発の一環としてお受けしています。公開後の集客や改善の進め方についてはコラムもあわせてご覧ください。
よくあるご質問
- デザインだけ、あるいは実装だけの依頼もできますか。
- 可能ですが、この事例のように「何を載せるか」が定まっていない場合は、そこから一緒に整理することをおすすめしています。デザインと実装だけを切り出すと、内容が決まらないまま工程が止まりやすいためです。すでに原稿と構成が確定している場合は、実装からのご依頼で問題ありません。
- 公開後の更新は自分たちでできますか。
- できます。この事例では、実績やお知らせのように増えていくものをCMSに寄せ、社内で追加・修正できる状態で引き渡しました。あえて全ページをCMS化していないのは、編集画面が複雑になると結局使われなくなるためです。更新したい箇所をうかがったうえで線引きします。
- WordPressではないのはなぜですか。
- この事例では表示速度と保守性を優先してNext.jsを採用しました。既存資産がWordPressにある場合や、社内の運用体制上そちらが適している場合は、無理に置き換えません。どちらが適しているかは要件を聞いたうえでご提案します。
- SEOやAI検索への対応も含まれますか。
- 構造をつくる部分は制作に含めています。この事例でも、構造化データのサーバー側出力、表示速度、内部リンクの設計は最初から織り込みました。公開後の継続的なコンテンツ運用については、別途ご相談を承っています。
- 写真や原稿がなくても進められますか。
- 進められます。この事例も、既存の原稿がほぼない状態からの着手でした。過去の案件をうかがい、こちらで文章の骨組みを作り、内容をご確認いただきながら固めていく進め方をしています。
「サイトを見ても何の会社か分からない」を、先に解きませんか。
現在のサイトと、これまで実際に受けてきた案件をうかがって、何をどう伝えるべきかを整理したうえでご提案します。作り直しが不要なケースはその旨をお伝えします。初回のご相談は無料です。
無料で相談する