出典：bakstadconstruction.com ↗ 確認日 2026.10.19
Editor's note
編集部の視点
「経験に裏打ちされ、施主を中心に考える建設パートナー」と一文で名乗り、施工事例を地区名つきで1件ずつ見せるシアトルの住宅建設会社。
シアトルを拠点に住宅の建設とリノベーションを手がける Bakstad Construction のサイト。ファーストビューは淡いグレーの地に、薄い色の社名「Bakstad Construction」と「An experience driven, client centered build partner based in the Pacific Northwest.（経験に裏打ちされ、施主を中心に考える、太平洋岸北西部の建設パートナー）」の一文、「Explore」「About」の2つのリンクだけ。PC では左端に縦長のロゴと「Menu」の帯。下へ進むと、施工事例（地区名と年つき）、掲載誌の紹介、施工の考え方（Conscientious Construction）が1件ずつ現れ（SP では1枚ずつ重なるように表示）、代表者名・住所・電話・メールと「Get in Touch」で締める。
- 01 誰のための、どんな会社かを一文で名乗り、ファーストビューにはそれ以外を置かない
- 02 施工事例を地区名と年つきで1件ずつ大きく見せ、地元の実績だと伝える
- 03 掲載誌と施工の考え方を事例の間にはさみ、写真だけでは伝わらない信用を足す
Conversion
集客の工夫
- 事業を一文で （あり） 「施主を中心に考える、太平洋岸北西部の建設パートナー」
- 施工事例 （あり） 4件を地区名（West Seattle・Capitol Hill）つきで
- 掲載実績 （あり） 「Selected Press」で掲載誌を紹介
- 施工の考え方 （あり） 「Conscientious Construction」から会社紹介へ
- 代表者の名前 （あり） フッターに「Dalen Bakstad, Principal」
- 第三者の声 （あり） 会社紹介ページに建築家の推薦文
- 問い合わせ （あり） メニューとフッターに「Get in Touch」
- 電話・メール （なし） 文字で記載（tel:・mailto: のリンクなし）
ファーストビューには、一文だけ
ファーストビューにあるのは、薄い色の社名「Bakstad Construction」と「An experience driven, client centered build partner based in the Pacific Northwest.（経験に裏打ちされ、施主を中心に考える、太平洋岸北西部の建設パートナー）」の一文、そして「Explore」「About」の2つのリンクだけです。誰のために（施主）、どこで（太平洋岸北西部）、どんな姿勢で（経験と施主中心）建てる会社かが、この一文で伝わります。
施工事例を、地区名つきで1件ずつ
下へ進むと、施工事例が1件ずつ大きく現れます。「Arroyo Beach／West Seattle／2024」「Harvard／Capitol Hill」のように、事例名に地区名と年が添えられています。シアトルで家を建てたい人にとって、知っている地区の名前は「近くで実績がある会社」という安心につながります。「Beach Drive」では、1990年代のイタリア風の邸宅を改修した内容を一文で説明しています。
掲載誌と考え方で、信用を足す
事例の間には「Selected Press」として掲載誌の紹介が入り、「Conscientious Construction」では現場への向き合い方を会社紹介ページで読めます。会社紹介ページには、三代目の建設業者である代表の経歴と建築家からの推薦文もあります。フッターには代表者名・住所・電話・メールが並び、問い合わせは「Get in Touch」から。ただし電話番号とメールは文字だけで、スマホから押せる tel: と mailto: のリンクにはなっていません。
チェック項目は 2026.10.19 に実ブラウザで描画したトップページ（PC 1440px・SP 375px）を確認したものです。
Colour
配色
- #F3F3F3 背景
- #2A312E 見出し・本文・ロゴ
- #B6BAAF 社名などの薄い文字
背景は面積、文字は文字数で重み付けして実測した色から、役割ごとに整理しています。
Typography
フォント
| 用途 | 使用フォント | 無料で近いもの |
|---|---|---|
| 見出し・本文・ボタン（すべて） | Suisse BP Int’l | Inter |
| 要素 | PC サイズ / 太さ | PC 行間 | SP サイズ / 太さ |
|---|---|---|---|
| h1 | 30px / 400 | 1.00 | 30px / 400 |
| h2 | 30px / 400 | 1.00 | 30px / 400 |
| 本文（p） | 30px / 400 | 1.00 | 30px / 400 |
| ボタン | 15px / 400 | 1.33 | 15px / 400 |
実測値（PC 1440px・SP 375px、2026.10.19 計測）。同じ要素で最も多く使われている指定を表示しています。h1 をロゴや小さな見出しに使っているサイトでは、h1 の値が小さく出ます。
Structure
ページ構成（上から順に）
- 01 ナビ PC は左端に縦長のロゴと「Menu」の帯。開くとホーム・事例一覧・会社紹介・問い合わせ。SP は上部にロゴとメニュー。 ヘッダー／ロゴ＋メニューボタン型
- 02 ファーストビュー 薄い色の社名と、会社を言い表す一文、「Explore」「About」。 ファーストビュー／大きな文字型
- 03 施工事例 事例名・地区名・年と写真を1件ずつ大きく。「View Project」。 事例・実績／大きな写真の切り替え型
- 04 掲載誌 「Selected Press」。事例が載った雑誌と記事へのリンク。 信頼／ロゴ帯型
- 05 施工事例（続き） Casa Bonita、Harvard（Capitol Hill）など。 事例・実績／大きな写真の切り替え型
- 06 施工の考え方 「Conscientious Construction」。現場への向き合い方を会社紹介ページで。 コンセプト／写真＋メッセージ型
- 07 フッター 社名・代表者名・メール・電話・住所、Instagram、「Get in Touch」。 フッター／ナビ＋会社情報型
Download
ワイヤーフレームをダウンロード
この構成を、Figmaで編集できるワイヤーに
上のページ構成を、DevNJ のワイヤーフレーム部品で組み直したものです。元サイトの文章・画像・コードは含みません。
Figmaでの使い方
- SVGをダウンロードする
- Figmaのキャンバスにファイルをドラッグ＆ドロップする
- セクションごとにレイヤーが分かれた状態で開くので、順番の入れ替えや文言の差し替えから始める
文字はテキストレイヤーとして入ります（フォントは Noto Sans JP）。
Reproduce
このサイトを参考にするときのポイント
- 01 工務店・建設会社は、対象（誰の家を建てるか）と地域を一文に入れて名乗る
- 02 施工事例には地区名と年を添え、地元での実績として見せる
- 03 雑誌やメディアへの掲載、建築家などからの推薦は、事例のすぐそばに置く
- 04 電話番号とメールは、スマホで押せる tel: と mailto: のリンクにする
FAQ
よくある質問
Bakstad Construction のサイトで使われているフォントは？
見出し・本文・ボタンまで Suisse BP Int’l 1書体で、サイズもほぼ揃えています。有料書体なので、無料で近づけるなら Inter が候補です。ロゴのステンシル風の文字は画像です。
工務店のサイトで、施工事例はどう見せればいいですか？
Bakstad は1画面に1件ずつ、写真・事例名・地区名・年を大きく見せています。件数を詰め込むより、地元の地区名が見えることで「近くで建てている会社だ」と伝わります。事例の間に掲載誌の紹介をはさみ、第三者の評価も添えています。
どんな業種の参考になりますか？
工務店・リフォーム会社・設計事務所・造園会社など、施工事例が営業の中心になる地域密着の事業に向きます。
スクリーンショットは、解説に添える引用として縮小して掲載しています。デザイン・文章・画像の権利はBakstad Constructionおよび各権利者に帰属します。ワイヤーフレームは元サイトを写したものではなく、構成を DevNJ の部品で組み直したものです。権利者・制作者の方からの掲載の取り下げ・修正のご依頼はお問い合わせから承り、原則2営業日以内に対応します。 掲載ギャラリー: Httpster
