設計事務所のホームページ制作 依頼につながる作品の見せ方と7つのポイント

「設計事務所のホームページを作り直したいが、作品をどう並べれば依頼につながるのかわからない」

「竣工写真はあるものの、どこまで載せてよいのか整理できていない」

この記事は、そうした悩みを持ちながら制作の発注を考えている、設計事務所の代表やご担当の方に向けて書きました。

先に結論をお伝えすると、最初に決めるのはデザインではありません。

「だれに、どの実績を、どの順番で見せるか」と「増えていく実績を、だれが更新し続けるか」の2つです。

ここが決まると、作品の分類も、写真の準備も、問い合わせフォームの形も自然に決まります。

実例として、GAMADASが制作した有限会社EOSplus様のコーポレートサイトの設計を紹介します。

なお、EOSplus様は建築の設備設計を手がける会社で、意匠設計の事務所ではありません。

そのため、実際に行った設計は「EOSplus様では」と明記し、それ以外は制作会社としての考えとして書き分けます。

設計事務所のホームページは、依頼先を確かめる人のための場所

工務店のホームページは、地域で家を建てたい人に見つけてもらう集客の役割が大きくなります。工務店の場合は工務店のホームページ集客の記事で整理しています。

設計事務所の場合は、集客に加えて、依頼先として確かめに来た人に判断材料を渡す役割が大きくなりやすいです。

たとえば、紹介で名前を聞いた人や、雑誌やSNSで作品を見た人が、名前で検索して訪れる場面です。

その人が知りたいのは、美しい作品かどうかだけではありません。

「自分の案件に近い仕事をしているか」「頼むとどう進むのか」「だれが担当するのか」を確かめに来ています。

事務所のタイプで、見る人と見せるものが変わる

同じ設計事務所でも、主な仕事によって読み手は変わります。

次の表は、制作会社として考える一般的な整理です。実際の割合は事務所ごとに違います。

発注前におすすめしたいのは、ここ数年の依頼がどこから来たかを書き出すことです。

個人の施主が多いのか、同業からの紹介が多いのかで、トップページに置くべきものが変わります。

設計事務所のホームページ制作で押さえる7つのポイント

ここからは、制作会社の立場で設計の前に決めておきたいことを、順番に説明します。

1. 作品の分類は、探す人の言葉で決める
2. 物件ページに、設計の判断と担当範囲を書く
3. 写真は、撮影の予定と使える範囲まで決める
4. 掲載の許可は、後回しにしない
5. 増える情報は、社内で更新できる形にする
6. 設計の考え方、経歴、掲載実績、人で信頼を積む
7. 問い合わせは目的で分け、採用は別の流れにする

ポイント1：作品の分類は、探す人の言葉で決める

作品ページでよく見かけるのが、竣工の新しい順に写真が並んでいるだけの形です。

件数が少ないうちは問題ありません。ただ、数が増えるほど、見に来た人は自分に近い事例を探しきれなくなります。

入口は、作り手の分類より用途で作る

EOSplus様のサイトでは、実績を用途カテゴリで整理しました。

カテゴリは「住宅、公共、学校、医療福祉、商業宿泊、工場・生産施設」です。

実績が多い会社ほど、見る人は全部を読めません。そこで「見せたい実績」ではなく「探したい実績」を基準に、最短で関心のある案件へたどり着ける入口にしました。

設計事務所の場合、作り手の中では作風や構法で分けたくなることがあります。

しかし、発注を考える人の多くは「平屋の住宅」「クリニック」「店舗」のように、自分の計画の言葉で探すはずです。

まず用途で入口を作り、作風や構法は物件ページの中で語るほうが迷わせません。

カテゴリの数は、今の件数で決める

カテゴリを細かく分けすぎると、1件しか入っていない分類が並び、かえって実績が少なく見えます。

目安として、各カテゴリに数件ずつ入る粒度から始めます。

今後増やしたい分野がある場合は、その分野を先に切り出す判断もあります。「これから受けたい仕事」の入口を早めに作っておくという考え方です。

ポイント2：物件ページに、設計の判断と担当範囲を書く

写真だけの物件ページは、見た目の印象は伝わります。

ただ、それだけでは「どう考えて設計する事務所なのか」が伝わらず、依頼する理由を作りにくくなります。

各物件で書く項目を、最初に型として決めておくことをおすすめします。

• 用途と規模（住宅、クリニックなど。延床面積は出せる場合のみ）
• 地域（公開してよい粒度で。市区町村までなど）
• 竣工年
• 担当範囲（設計のみ、監理まで、設備設計のみなど）
• 依頼時の条件や課題
• 設計での判断（なぜその形にしたのか）

担当範囲は、はっきり書く

設計事務所では、共同で手がけた案件や一部の領域だけを担当した案件もあります。

どこからどこまでを担当したのかを書いておくと、関係者への配慮にもなり、見る人にも仕事の中身が正しく伝わります。

長い文章より、判断を2〜3個

全物件に長い解説文を書こうとすると、更新が止まります。

「条件は何で、何を優先し、何を選ばなかったか」を短く書くだけでも、考え方は十分に伝わります。

見せたい物件だけを厚く書き、ほかは型の項目だけで公開する、という濃淡をつけても構いません。

ポイント3：写真は、撮影の予定と使える範囲まで決める

設計事務所のサイトでは、写真が第一印象をほぼ決めます。

EOSplus様のサイトでも、設備設計は文章で説明すると難しくなりやすいため、トップページと実績の写真を主役にしました。

どんな建築に関わっている会社かを、まず写真で伝えるためです。

撮影は「竣工したら」ではなく、計画に入れる

写真が足りない物件が多い場合は、制作を始める前に棚卸しをします。

• プロが撮った写真がある物件
• 自社で撮った写真しかない物件
• 写真がなく、これから撮影できる物件
• 写真がなく、もう撮影できない物件

すべてを撮り直す必要はありません。

トップページや主力の用途に出す数件だけプロの撮影を入れ、ほかは手持ちの写真で公開する形でも始められます。

写真の使える範囲を確かめる

写真の著作権は、原則として撮影した人にあります。

カメラマンに依頼した写真でも、ホームページやSNSで使ってよいかは、撮影時の取り決めによって変わります。

過去の写真を使うときは、依頼先に確認しておくと安心です。

雑誌に載った写真や誌面をそのまま使う場合も、掲載元への確認が必要になることがあります。

比率をそろえると、一覧の質が保たれる

EOSplus様の実績一覧では、画像の比率をそろえ、追加しても見た目が崩れないように設計しました。

横長と縦長の写真が混ざる場合は、物件ごとに一覧用の1枚を選ぶルールにしておくと、あとから入れる人が迷いません。

ポイント4：掲載の許可は、後回しにしない

制作の終盤で問題になりやすいのが、竣工物件の掲載許可です。

載せたい物件を決めたあとで確認を始めると、返事を待つ間に公開が遅れたり、主力の物件が出せなくなったりします。

制作を依頼する前に、物件ごとの許可の状況を一覧にしておくことをおすすめします。

確認する項目は、建物の種類によって変わります。

案件によっては、施主のほかに元請けや共同設計者の確認が必要なこともあります。

写真データに位置情報が残っていないかも、住宅では確かめておきたい点です。

許可が取れない物件の出し方

許可が取れない物件を、すべて諦める必要はありません。

許可の範囲に応じて、たとえば次のような出し方を相談できます。

• 建物名を伏せ、「都内の医院」のように用途と地域で書く
• 外観を避け、特定できない部分の写真だけを使う
• 写真を出さず、用途と規模を実績一覧の文字情報として載せる

これからの案件は、契約時や竣工時に掲載の可否を確かめる流れにしておくと、サイトの更新が楽になります。

なお、この記事は法律の助言ではありません。契約の文言は、必要に応じて専門家にご確認ください。

ポイント5：増える情報は、社内で更新できる形にする

設計事務所のサイトは、公開した日が完成ではありません。

新しい物件や雑誌の掲載が増えるほど、価値が上がっていくサイトです。

逆に言えば、更新が止まると、最新の竣工が何年も前のままのサイトになってしまいます。

どの情報が増えるかを、先に整理する

EOSplus様のサイトでは、制作の前に「どの情報が増えるか、どの頻度で更新するか、だれが触るか」を整理しました。

そのうえで、News、Works、Press、Recruitの4つを増える情報として、更新しやすい構造にしています。

追加しても崩れないルールを作る

更新が止まる理由の1つは、1件追加するたびにレイアウトが崩れることです。

EOSplus様のサイトでは、次のルールで崩れにくくしました。

• 一覧はカード型に統一する
• 文字量に上限を持たせ、タイトルと補足の2階層に収める
• 画像の比率をそろえる
• 視線の流れを「画像、カテゴリ、タイトル」の順に固定する

この実例は、サイトの構築に使ったStudioのCMS（記事や実績を追加できる管理機能）の設計として、StudioのCMSで作れるものと設計の勘所でも詳しく書いています。

更新する人に、手順を渡す

更新の仕組みがあっても、やり方がわからなければ使われません。

EOSplus様には、納品後に基本的な操作手順をまとめた資料をお渡しし、社内で更新できる体制を整えました。

発注するときは、更新の練習や手順書が制作の範囲に入っているかを確かめてください。

ツールは、実績の探し方から選ぶ

使うツールは、更新する人と、実績の探し方の両方で考えます。

コードを書かない方が更新し、用途別の一覧で十分なら、GAMADASがStudio制作代行で手がけているようなノーコードの構築が合います。

一方、「用途、規模、地域、年」のように条件を掛け合わせて絞り込みたい場合は、ツールごとにできる範囲が変わります。

こうした要望があるときは、見積もりの前に制作会社へ伝えてください。

ポイント6：設計の考え方、経歴、掲載実績、人で信頼を積む

設計の依頼は、金額も期間も大きな判断です。

作品が気に入っても、頼む前には「この人たちに任せて大丈夫か」を確かめたくなります。

設計の考え方と代表の経歴を書く

「どんな建物でも設計します」という書き方では、ほかの事務所との違いが伝わりません。

何を大切に設計するのかを、自分たちの言葉で書くと、考え方の合う人からの相談につながりやすくなります。

代表や担当者の経歴、独立前の仕事も、依頼を考える人にとっては判断材料です。

EOSplus様のサイトでは、ABOUTページに理念と会社の根拠情報（沿革、実績、有資格者など）をまとめて載せました。

建築士事務所の登録情報や保有資格も、会社情報にまとめておくと確かめやすくなります。

掲載実績は、読ませるより一覧で見せる

雑誌やWebメディアへの掲載、受賞歴は、第三者からの評価を示す材料です。

EOSplus様のサイトでは、Pressページを「表紙、媒体名、号数、年」のシンプルな一覧にしました。

丁寧に説明するより、量と幅が一目で伝わるほうが信頼につながると考えたためです。

表紙の画像を載せるときは、掲載元の決まりも確かめておくと安心です。

チームは、顔と役割を見せる

専門的なサービスは、最終的に「だれが担当するか」で判断されることがあります。

EOSplus様のTeamページでは、ポートレートを主役にし、肩書、名前、役割の順に読ませるようにしました。

写真のトーンをそろえ、ページ全体を暗い色調に切り替えて、人の印象が残るようにしています。

このページは採用だけでなく、依頼を考える人の安心材料にもなります。

少人数の事務所であれば、代表1人の紹介でも構いません。写真と言葉で、人柄が伝わることを優先します。

ポイント7：問い合わせは目的で分け、採用は別の流れにする

設計事務所への連絡は、新規の依頼だけではありません。

設計の相談、同業からの協業の打診、採用の応募、営業の連絡などが、同じ入口に集まりがちです。

フォームの最初で、目的を選んでもらう

EOSplus様のお問い合わせフォームでは、種別を「依頼、相談、採用、その他」に分けました。

事前の整理で、想定する読み手を「依頼を検討する人、協業を検討する人、採用に応募する人」と置いたことが背景にあります。

目的が先にわかれば、だれが返事をするかもすぐに決まります。

依頼の相談で聞く項目は絞る

個人の施主は、相談の時点で計画が固まっていないことも多いはずです。

聞きたいことをすべて必須にすると、書けずに離脱する人が出ます。

必須は連絡先と相談内容程度にとどめ、用途、地域、時期、土地の有無は任意にする形が考えられます。

費用や土地探しのように不安が出やすい話題は、よくある質問に先に答えを書いておくと、相談のハードルが下がります。

採用ページは「判断材料、募集要項、応募」の順に

募集要項を並べるだけでは、応募を決める材料が足りません。

EOSplus様のRecruitページは、仕事内容、魅力、人物像、体制、応募方法の順に組み立てました。

募集要項は開閉式などで整理し、情報が多くても疲れないようにしています。

採用に重点を置く場合の外注の考え方は、採用サイトを外注するときの依頼先の選び方も参考にしてください。

ページ構成と読まれる順番を決める

7つのポイントが決まったら、ページの構成に落とし込みます。

EOSplus様のサイトは、次の7つの導線で整理しました。

流れとしては「実績、掲載、人、相談や応募」の順に、自然に進めるようにしています。

何をしている会社か（実績）、外からどう見られているか（掲載）、だれがやるか（人）の順に疑問に答えるためです。

この構成をそのまま使う必要はありません。

個人の施主が中心の事務所なら、掲載実績より「設計の流れ」や「費用のかかり方」のページを優先するほうが合うこともあります。

コーポレートサイト全般の組み立て方は、コーポレートサイト制作の進め方で解説しています。

デザインは、作品の邪魔をしない

建築や設備の領域では、派手さよりも精度や誠実さが信頼につながると、GAMADASは考えています。

EOSplus様のサイトでは、装飾を増やさず、余白と整列で仕事の丁寧さが伝わるように設計しました。

ただし、雰囲気を優先して文字を小さく薄くしすぎると、スマホで読めなくなります。

EOSplus様の制作でも、スマホでの画像の比率、列の落ち方、タップする範囲を画面幅ごとに調整しました。

設計事務所のホームページでよくある失敗

ここまでの内容を、裏返して確認します。自社のサイトに当てはまるものがないか、見直してみてください。

写真だけが並び、考え方が伝わらない

作品集としては美しくても、依頼する理由が残りません。

代表的な物件だけでも、条件と設計の判断を書き足します。

更新の手間が重く、最新の物件が載っていない

更新を制作会社に頼む形だと、依頼の手間と費用のために、更新が後回しになりやすくなります。

自分たちで更新できるようにするか、更新を頼む費用も含めて計画します。

公開の直前に、掲載の許可で止まる

主力の物件が出せないとわかると、構成から見直しになることがあります。

許可の確認は、デザインより先に始めます。

費用や進め方が書かれていない

個人の施主にとって、設計の費用や進め方は大きな不安の1つです。

金額を載せにくい場合でも、費用の決まり方と、相談から竣工までの流れは書けます。

連絡先が見つからない

スマホのメニューの奥に連絡先が隠れていると、せっかく興味を持った人が離れます。

どのページからも、問い合わせへ進めるようにします。

費用と期間は何で決まるか

設計事務所のサイトの費用は、ページ数だけでは決まりません。

見積もりに差が出やすいのは、次の項目です。

• 実績の登録を、制作会社と自社のどちらが行うか（件数が多いほど差が出ます）
• 実績の分類や絞り込みの複雑さ
• 撮影を手配するか、手持ちの写真を使うか
• 物件の説明文や会社紹介の文章を、どちらが書くか
• 採用ページの作り込み
• 公開後の更新や保守を頼むか

相場の考え方はホームページ制作の相場の記事にまとめています。

期間は、写真と許可の準備状況に大きく左右されます。

EOSplus様の場合は約5か月で、トップページの実例画像の見せ方や実績ページの詳細を、メールで確認しながら繰り返し調整しました。

この期間はあくまで1つの例で、ページ数や準備の状況によって変わります。

制作会社に依頼する前に確認したいこと

依頼する前に用意しておくもの

• 載せたい物件の一覧（用途、竣工年、写真の有無、許可の状況）
• ここ数年の依頼がどこから来たかのメモ
• 今のサイトで困っていること
• だれが更新するか、どのくらいの頻度か

物件の一覧は、表計算ソフトで作っておくと、そのまま制作の資料になります。

制作会社に聞いておきたいこと

• 実績を1件追加するとき、社内でどこまでできるか
• 分類を後から増やせるか
• 文字量が違う物件を入れても、一覧が崩れないか
• 更新の手順書や練習は、制作の範囲に入っているか
• 撮影の手配を頼めるか、写真の権利の確認はどちらが行うか
• ドメインや管理画面の権利は、自社で持てるか

建築系の実績の有無も参考になりますが、それだけで判断しないことをおすすめします。

「増える実績をどう更新するか」を具体的に説明できるかどうかで、公開後の使いやすさが変わるからです。

今のサイトを作り直すか迷っている場合は、コーポレートサイトのリニューアルの判断基準も確認してみてください。

設計事務所のホームページ制作でよくある質問

作品が少なくても、ホームページを作る意味はありますか。

あります。件数が少ない間は、分類を増やさず、1件ずつの物件ページを厚くするほうが効果的です。

独立前に担当した仕事は、前の勤務先や施主の了解を確かめたうえで、担当範囲を明記して載せる方法があります。

写真はプロに頼まないといけませんか。

すべての物件で必須ではありません。

ただ、トップページや主力の物件は第一印象を決めるので、優先して予算を割く価値があります。

住宅の施主名や住所を出さなくても、実績になりますか。

なります。用途、地域の大まかな範囲、規模、設計の判断があれば、読み手は自分の計画と比べられます。

個人の住宅では、むしろ特定されないように配慮している姿勢が安心につながることもあります。

検索から依頼を増やすには、何をすればよいですか。

まず、地域名と事務所の種類をタイトルや本文に自然に入れます。

次に、「用途と地域」で探す人に向けて、物件ページに文字の情報を入れます。写真だけのページは、検索エンジンにも内容が伝わりにくいためです。

Googleビジネスプロフィールの名前、住所、電話番号をサイトとそろえることも基本になります。

ただ、検索での順位は競合や地域にも左右されるため、すぐに結果が出るとは限りません。

公開した後も、制作会社に更新を頼めますか。

頼めるかどうかは制作会社によります。契約の前に確かめてください。

EOSplus様の場合は、社内で更新できる体制を整えたうえで、必要に応じてGAMADASが更新などをサポートする形にしています。

まとめ

設計事務所のホームページで最初に決めるのは、「だれに、どの実績を、どの順番で見せるか」と「増えていく実績を、だれが更新し続けるか」です。

そのうえで、次の7つを順に決めていきます。

• 作品の分類は、探す人の言葉で決める
• 物件ページに、設計の判断と担当範囲を書く
• 写真は、撮影の予定と使える範囲まで決める
• 掲載の許可は、後回しにしない
• 増える情報は、社内で更新できる形にする
• 設計の考え方、経歴、掲載実績、人で信頼を積む
• 問い合わせは目的で分け、採用は別の流れにする

発注の前にできることとして、まず載せたい物件の一覧を作るところから始めてみてください。

その一覧が、分類、写真、許可、更新のすべてを考える出発点になります。