ワイヤーフレームを、写真や色の入っていないデザイン案として見てしまうと、余白や配置の好みの話になりがちです。けれど、この段階で確かめたいのは、誰が何を理解し、次にどこへ進めるかです。

埼玉県建築士事務所協会のサイト設計で検討した内容を例に、デザインの前に合意しておきたいことを整理します。この記事は制作途中の記録をもとに、設計の考え方として再編集したものです。

利用する人が違えば、必要な入口も違う

協会サイトには、建築士事務所を探したい一般の方と、入会や手続きを確認したい建築士事務所側の方が訪れます。同じ情報を、同じ優先順位で見せればよいわけではありません。

検討では、一般の方向けと建築士事務所向けの入口を分け、それぞれの目的に沿って情報をたどれる構成を考えました。単にメニューを2つに増やすのではなく、訪問者が自分に関係する情報を判断できるようにするためです。

利用者を分けるときは、名称が相手に通じるかも確かめます。内部の組織名や業務分類が、そのまま利用者にとって分かりやすい分類とは限りません。

各ページの役割を、先に短く書く

ページを描き始める前に、そのページで助けたい判断を1文にします。入会ページなら、制度を紹介するだけでなく、自分に関係があるか、条件は何か、どのように手続きを進めるかが分かることを目指します。

資料や申請書を並べるだけでは、すでに入会を決めた人には使えても、検討中の人には説明が不足する可能性があります。目的に応じて、得られること、条件、手順、問い合わせ先を整理します。

一方、既存会員が書類を取りに来るページでは、長い説明より、必要な資料へすぐ進めることが大切です。すべてのページを長いランディングページのようにする必要はありません。

情報の順番は、相手の疑問の順番で考える

たとえば住宅に関する相談を検討する一般の方なら、何を相談できるのか、誰が対応するのか、どう申し込むのかが気になります。協会側の事業区分から説明を始めるより、利用者の疑問に沿って並べた方が理解しやすい場合があります。

設計では、一般の方がサービスを理解して相談へ進む入口と、会員側の関わりが混ざらないように考えました。これは導線の意図であり、この構成だけで問い合わせが増えたと断定するものではありません。

ワイヤーフレーム上で、情報が足りない場所、説明が重複する場所、次の行動が途切れる場所を見つけます。見出しやボタンの言葉も、役割が判断できる程度には具体化しておきます。

仮の文章でもよい部分と、先に決めたい部分

すべての原稿や写真を完成させる必要はありません。ただし、内容によってページの長さや順番が変わる場合は、仮置きのまま進めると後で設計から戻ることになります。

  • 見出し:この部分で何が分かるのかを、具体的に書く。
  • 条件や手順:誤解を生まないよう、担当者に確認する。
  • ボタン:押した先と、行えることが分かる言葉にする。
  • 実績や利用者の声:掲載できる根拠と素材を確かめる。
  • 写真:何を説明する写真が必要かを決めておく。

装飾を後から整えることはできますが、説明すべき内容が未確定だと、デザインだけでは解決できません。未決事項を明示し、誰がいつ確認するかを決めます。

トップページ以外からも、目的を達成できるか

利用者は、必ずトップページから訪れるわけではありません。検索や共有されたリンクから途中のページに入り、スマートフォンで必要な情報だけを探すこともあります。

その前提で、初めて見るページでも内容が理解できるか、関連する条件や手続きに進めるか、問い合わせ先を見つけられるかを確認します。代表的な利用目的を決め、実際にページをたどると、不足が見つかりやすくなります。

ワイヤーフレームの合意は、配置の承認だけではありません。誰の判断をどう助けるかについて、制作側と運用側の認識をそろえることです。その土台があると、デザインの良し悪しも、目的に照らして話し合えます。

埼玉県建築士事務所協会の支援事例を見る

Webサイトリニューアルの戦略は、何から決めるか

初出:2025.07.04/再編集:2026.09.15