SOKA Architects
余白に、構造を。
作品写真だけでは仕事の依頼につながらない設計事務所のために、設計の姿勢・進め方・費用の見え方を言語化し、竣工写真と同じ強さで「考え方」を伝えるポートフォリオサイトの設計例です。
想定クライアント住宅から公共建築までを手がける小規模な建築設計事務所（スタッフ数名規模）
※ 掲載しているのはAIを活用した制作サンプルです。サンプルサイトの企業・人物・内容はすべて架空（フィクション）であり、実在のものではありません。
よくある課題
- 作品写真は美しいが、どんな考えで設計しているかが伝わらず、共感を軸にした引き合いが生まれにくい
- 「設計事務所は敷居が高い・高そう」という先入観から、検討初期の相談に至らない
- 住宅・公共・リノベーションなど幅の広さが、かえって「何が専門か」を分かりにくくしている
この設計の狙い
作品の見栄えではなく、設計の姿勢で選ばれる状態をつくること。何を大切に設計し、どんな段取りで進むのかを先に開示して、土地が決まっていない段階の相談も受け取れる入口にしました。
この構成にした理由
オフホワイトの紙面に近黒、差し色はテラコッタ一色
背景 #F6F5F2 と文字 #14150F で建築誌のような紙面感をつくり、テラコッタ #9C5B3B を見出し罫とリンクだけに限定。色数を絞ることで、写真の中の素材の色が濁らないようにしています。
角丸ゼロと等幅フォントのキャプション
ボタンや画像の角丸を一切使わず、キャプションや数字には Space Mono を採用。図面やインデックスの表記法を借りることで、事務所の設計言語と画面のふるまいを一致させています。
思想 → 作品 → 業務 → 進め方の順に読ませる
トップは声明文と3つの理念から始め、そのあとに作品一覧を置く構成。写真の巧拙で比較される土俵を避け、価値観が合うかどうかを先に判断してもらう順序にしています。
設計の進め方を6ステップで公開する
初回相談から竣工・引き渡しまでを段階ごとに明示し、初回相談が無料であることも記載。プロセスと費用の輪郭が見えないことが問い合わせの最大の障壁になるという前提での設計です。
用途で絞り込めるプロジェクト一覧
住宅・公共・商業・リノベーションで絞り込めるようにし、幅広さを「軸のなさ」ではなく「対応領域」として読ませます。訪問者が自分の案件に近い事例へ最短で到達できることを優先しました。
ページ構成
- トップ
- プロジェクト（用途で絞り込み）
- 業務内容（4領域・設計の進め方）
- 事務所について（理念・チーム・沿革・事務所概要）
- お問い合わせ
実装している機能
- スマホ・タブレット・パソコンの画面に合わせた表示
- 検索対策（検索結果やSNSで正しく表示される設定）
- トップの大きな動画（再生できない時は写真を表示）
- プロジェクトの用途別の絞り込み
- 設計の進め方を順に見せる表示
- お問い合わせフォーム（相談の種類を選ぶ形／迷惑な送信を防ぐ対策・入力内容の確認つき）
- チーム紹介・沿革・事務所概要
- スクロールに合わせた表示の演出（動きを減らす設定の端末では止まる）
狙っている効果
- 設計の姿勢と進め方が事前に伝わることで、価値観の合う相談の比率を高めることを狙っています
- 初回相談の位置づけを明示することで、土地・予算が固まる前の早い段階での接点を増やすことを想定しています
- 用途別に事例へ到達できることで、自分の計画に近い事例を見つけたうえで問い合わせに進んでもらうことを狙っています
※ 上記は本設計が狙う効果であり、成果を保証するものではありません。
このサイトを作るなら
この構成は、スタンダードプラン相当です（動画ヒーローなどビジュアル主体で、写真素材・編集サポートを要する構成）。
写真や文章から一緒に整え、世界観で選ばれる状態をつくりたい方へ。
￥588,000〜（税別）
- 表示価格はすべて税別です。「〜」は最低価格を示し、最終金額はページ数・機能・素材の有無により変動します。
- サーバー・ドメインの管理費（￥5,000 / 月・税別）が別途必要です。
- 正式なお見積もりは、ご要望をうかがったうえでご提示します。
Let's talk
この構成で、あなたのサイトをつくれます。
・作品写真は充実しているが、設計思想を言語化できていない設計事務所・検討初期の相談を増やしたいアトリエ系事務所・住宅と公共・商業の両方を扱い、対応領域を整理して見せたい事務所
この内容で相談する（無料）