埼玉県建築士事務所協会のホームページをリニューアル|LP化・ユーザビリティを支えるワイヤーフレーム設計【実績レポート】Vol.2
【実績紹介】 2025.07.04

こんにちは、関谷です。
埼玉県建築士事務所協会のホームページリニューアルプロジェクトの裏側をご紹介している本シリーズ。
前回(Vol.1はこちら)では、プロジェクトがスタートした背景や、初期設計時に重視した考え方をお伝えしました。
今回はその続きとして、ホームページリニューアルの中でも特に重要なワイヤーフレーム(設計図)作りにどんな工夫を凝らしたのかをご紹介します。
デザインに入る前、この設計段階でどれだけ意図を詰めておくかが、サイトのユーザビリティや成果を大きく左右します。
リニューアルを考えている方にもきっと参考になるポイントがあると思います。
目次
リニューアル前の課題とは? ホームページ改善の出発点
今回のリニューアルは、単に見た目をきれいにするのが目的ではありませんでした。
まずは現状のサイトでどんな課題が生じていたのか、その「なぜ?」を丁寧に整理するところからスタートしました。
ユーザーの目的が混ざっていた
協会サイトには「一般の方(建築士を探したい)」と「建築士事務所の方(手続きや入会をしたい)」という異なる目的のユーザーが訪れています。
リニューアル前は、こうしたユーザーが同じトップページから同じメニュー構造に誘導されていたため、どこに何があるのか直感的に分からない状態になっていました。
たとえば、一般の方が「建築士を探す方法」を探しているのに、会員向けの事務連絡が目についたり、逆に建築士事務所の方が急ぎの手続きをしようとしても一般向けのPRコンテンツが目に入って動線が乱れるといった場面が多々ありました。
また、メニューの分類自体があいまいだったため、「これは自分向けの情報なのか?」という迷いが発生しやすかったのも課題でした。
こうした構造はユーザーにとってのストレスになるだけでなく、協会サイトとしての信頼感や分かりやすさを損なう原因にもなっていました。
信頼感を損なうデザインや情報構成
ストックフォト中心の構成になっていたため、文章との整合性に欠け、協会としての信頼性や品格が十分に伝わっていませんでした。
画像が持つ「顔」としての印象は意外に大きな影響を持つもの。
写真と実際の活動イメージのギャップが「実態がわかりにくい」「少し安っぽい」という印象につながり、協会の強みがうまく表現できていませんでした。
入会案内ページが機能していなかった
協会にとって会員拡大は大きな目的のひとつですが、入会案内ページは申請書類が置いてあるだけの状態で、「なぜ入会するべきなのか」「入会すると何が得られるのか」といった情報が十分に伝わっていませんでした。
特に、「入会後の継続率は非常に高い」という事実や、協会が提供できる具体的なメリットが表に出ていなかったため、入会を検討している方の背中を押せる構成になっていなかったのです。
ホームインスペクションページが粗かった
ホームインスペクション(住宅診断)ページは、現行では「とりあえず作りました」という印象が強く、情報も整理されておらず導線も弱い状態でした。
今回、協会として特に事業強化を打ち出すものではありませんが、マーケティング視点ではこうしたサービスページをしっかり整備しておくことで、一般ユーザーからの問い合わせが生まれ、それを会員事務所に紹介できる流れを作ることが期待できます。
これは結果的に、会員メリットを高める一助になると考えた取り組みです。
ワイヤーフレーム設計で意識したこと ユーザビリティ向上と成果を生む構造へ
こうした課題を踏まえて、ワイヤーフレーム(ホームページの設計図)作りでは次のような工夫を行いました。
ユーザーの目的別に導線を明確化
公共性の高いサイトでは、単一のターゲットに絞れないケースも多いものです。
今回もユーザーの訪問意図を大きく2つに整理しました。
- 一般の方 → 信頼できる建築士を探したい
- 建築士事務所の方 → 手続きや申請をしたい/協会に入会したい
この分類に基づき、トップページからそれぞれ専用のサブトップページへ明確に誘導する構造に変更しました。
さらに、ヘッダーやハンバーガーメニューの出し分けにもこだわりました。
一般ユーザーと建築士事務所ユーザーでは、求める情報も、重視する順番もまったく異なります。
今回のリニューアルでは、
- 一般ユーザー向けページでは、「建築士とは何か」「どう探せるか」「協会の役割」を上位に配置
- 建築士事務所向けページでは、「手続き・申請」や「会員向け情報」を最上位に配置
というように、メニュー項目そのものだけでなく、表示順序・見た目上の優先順位もそれぞれのユーザー意図に合わせてチューニングしています。
また、ハンバーガーメニューはモーダル表示形式を採用し、情報量が多い場合でも見たい情報だけを素早く展開できる構造にしました。
これにより、ユーザーごとの目的達成までの導線が大きくスムーズになっています。
LP化で成果につながるページ設計を実現
特に意識したのが、入会案内ページとホームインスペクションページのLP化(ランディングページ型構成)です。
ここで言うLP化とは、単なる情報提供にとどまらず、ユーザーの行動を促すストーリー性を持たせたページにすることです。
入会案内ページの改善ポイント
- 共感パート:「忙しい中で制度改正に追いつくのは大変」「支え合える仕組みが安心につながる」
- 入会メリット:
- 法改正情報のネットワーク
- 同業者とのつながり
- 講習・セミナー特典
- 事務所運営サポート
- 信頼性の証明:”会員継続率(約98〜99%)”を提示し「入った人は辞めない」安心感を強調
- やわらかな行動喚起:「今このタイミングがチャンスかもしれません」
ホームインスペクションページの改善ポイント
ホームインスペクションページは、マーケティング視点で整備したいと考えたページのひとつです。
会員紹介につながる問い合わせの入口として機能させることを狙いとしています。
具体的な改善ポイントとしては、
- ユーザーの不安に共感:「この家、本当に大丈夫?」という問いかけからスタート
- サービスの簡潔な説明
- 協会に依頼する意義:
- 資格を持つ技術者による対応
- 中立性と苦情解決制度の整備
- 地域密着型の強み
- SEO対策として適切な情報量とキーワードを盛り込み、検索流入を強化
ホームページリニューアル時にワイヤーフレームで必ず確認すべきポイント
今回のプロジェクトを通じて、ワイヤーフレーム段階で確認すべきポイントは改めて次の4つに整理できます。
- 情報に過不足がないか
掲載したい情報が漏れていないか、不要な情報が混ざっていないか確認する。- 情報の順序と優先順位が適切か
ユーザーが自然な流れで読み進められるか、重要な情報がきちんと上位に配置されているか確認する。- 細かいデザインや仮テキストは気にしすぎない
この段階では設計図としての構造が重要。見た目や細部の表現はデザインフェーズで整える。- ディレクターに意図を確認する
「なぜこの順番にしたのか」「なぜこの見せ方なのか」をしっかり質問することで、成果につながる意図がしっかり込められているか確認する。
私は普段から「全ページはLPであるべき」という考え方を持っています。
どのページから流入しても違和感なく、ユーザーが目的を達成できるサイト構造を目指すことが重要だと考えています。
デザインフェーズへ進行中! 次回はホームページデザイン案をご紹介予定
現在は、ワイヤーフレームが承認され、デザインフェーズに進行中です。
- トップページは2案作成予定。そこから選定に入ります。
次回(Vol.3)では、デザイン案がどのように仕上がったか、デザイン段階での意図や工夫、デザイン確認時にどこに注目すべきかという視点もお届けする予定です。
引き続きどうぞご期待ください。