KUSABI 楔建築舎【デザイン見本】
弊社で制作する工務店・設計事務所のデザイン見本です。
クライアント
KUSABI 楔建築舎様（仮名）
完成
2026.10
業務
新規制作
クライアント
KUSABI 楔建築舎様（仮名）
完成
2026.10
業務
新規制作
課題と背景
※本件はBSP Design によるホームページデザイン見本です。ブランド名・施工事例・スタッフ名・実績数値・連絡先等はすべてサンプルです。
設計事務所の考え方と、工務店の施工力をあわせ持つ建築会社を想定したデザイン案です。注文住宅・リノベーション・店舗の設計施工を手がけ、装飾を足すのではなく、光や素材、寸法で空間をつくることを大切にしている会社様に合うデザインを作成いたしました。注文住宅を検討する方の多くは、複数の会社の施工事例を見比べたうえで相談先を決めます。そのため、施工事例の写真をどう見せるかがサイトの印象を大きく左右します。デザインへのこだわりと、自社大工による施工の確かさの両方が伝わるサイトにする必要がありました。
解決策
サイトは、考え方（Philosophy）・作品集（Works）・手がける領域（Service）・スタッフブログ（Journal）・ご相談（Contact）で構成しました。Philosophyでは「土地を読む」「寸法の美学」「自社施工」の3つに分けて、家づくりの姿勢を言葉にしています。Worksは黒を背景にした作品集の形式とし、注目の1件を大きく紹介したうえで、6件の施工事例を所在地と種別を添えて並べました。Serviceでは注文住宅・リノベーション・店舗/オフィスの3つの領域を一覧にし、創業年・施工棟数・自社大工の人数・受賞数といった実績の数字もまとめています。ページ下部には「設計相談の予約」と「コンセプトブックの請求」の2つの導線を用意し、検討の段階に合わせて問い合わせ方法を選べるようにしました。
デザインと機能の工夫
墨に近い黒と温かみのある白を基調に、差し色には真鍮のような落ち着いた金色を使った配色です。ファーストビューは施工事例の写真を画面いっぱいに使い、「Building the Essential.」という大きな英字の見出しで、引き算を大切にする会社の姿勢を印象づけています。ヘッダーは、ファーストビューでは白で表示し、スクロール後は背景の明るさに応じて文字色が反転する仕様とし、写真の上でも白い背景の上でもロゴとメニューが読めるようにしました。施工事例の写真はスクロールに合わせて黒い幕が上がるように表示され、作品集をめくるような見せ方にしています。各セクションの見出しには英字と番号を添え、細い罫線で情報を区切ることで、設計事務所らしい端正な印象に仕上げました。
「工務店・設計事務所様におすすめのデザイン例です。 「設計や素材へのこだわりを、写真で伝えたい」 「施工事例を作品集のように見せたい」 といったお客様のご要望を伺い、家づくりの考え方や得意とする建築のテイストを踏まえた上で細かく設計していきます。 「こんな感じのホームページにしたい」等のご要望でも、ぜひお気軽にご相談ください」
