Awwwards ·アメリカ（カリフォルニア州） ·Picked 2026.10.18
LPAS
建築・インテリア設計のサイトデザイン参考 — ベージュ・建築・社名の意味づけ・市場別の入口
出典：lpas.com ↗ 確認日 2026.10.18
Editor's note
編集部の視点
社名の4文字をそのまま仕事の進め方（Listen / Plan / Analyze / Shape）に展開した建築事務所サイト。
サクラメントとオークランドに拠点を置く建築・インテリア設計事務所のサイト。全画面の映像のあと、「プロセス主導の設計事務所」という一文で名乗り、続けて住宅・インテリア・高等教育・公共・商業の5つの市場を、それぞれ色の違う大きなパネルでスクロールしながら見せる。作品一覧は市場ごとの件数つきで絞り込め、最後は2つの拠点の住所・電話・メールで受け止める。
- 01 社名の L・P・A・S を Listen・Plan・Analyze・Shape に展開し、仕事の進め方そのものを社名で覚えさせる
- 02 入口を「業種」ではなく「市場（案件のタイプ）」で5つに分け、市場ごとに色を変えている
- 03 作品一覧の絞り込みに件数を出し（Housing 31、Interiors 17 など）、実績の厚みを数で見せる
Conversion
集客の工夫
- 市場別の入口 （あり） 住宅・インテリア・高等教育・公共・商業の5つ
- 実績の件数つき絞り込み （あり） 市場ごとの件数をタブに表示
- 電話番号の掲載 （あり） tel:リンク 4か所（PC・SPとも）
- 拠点ごとの連絡先 （あり） サクラメント・オークランドの住所・電話・メール
- 最新の活動を表示 （あり） Instagram の投稿6件を日付つきで
- 全画面メニュー （あり） PC・SP とも右上の Menu から
- ヘッダーに問い合わせボタン （なし） なし（Menu ボタンのみ）
- 言語の切り替え （なし） なし（英語のみ）
社名の4文字で、仕事の進め方を覚えさせる
ロゴ自体が Listen / Plan / Analyze / Shape の頭文字で組まれていて、ページの中盤でも同じ4語が「進め方」として出てきます。「丁寧にヒアリングします」と書く代わりに、社名を見るたびに手順を思い出させる作りです。営業資料や提案書にもそのまま転用できます。
入口を「市場」で分け、色で区別する
5つの市場は、それぞれ背景色の違う大きなパネルで1つずつ現れます。設計事務所に来る人がまず確かめたいのは「自分の案件タイプに実績があるか」です。作品の一覧より先に案件タイプの一覧を出すことで、合う相手ほど早く次に進めます。
実績の数を、絞り込みの件数で見せる
作品一覧のタブには市場ごとの件数（住宅 31、インテリア 17 など）が表示されます。「豊富な実績」と書かなくても、数が多い分野がそのまま強みとして伝わります。最後は2つの拠点の電話番号（tel:リンク 4か所）とメールで受け止めます。
チェック項目は 2026.10.18 に実ブラウザで描画したトップページ（PC 1440px・SP 375px）を確認したものです。
Colour
配色
- #FFFFFF 背景
- #262626 見出し・フッター背景
- #E3C1AA 市場パネルの背景（ベージュ）
- #707569 市場パネルの背景（グレーグリーン）
- #C9D3DF 市場パネルの背景（淡いブルー）
- #925434 市場パネルの背景（ブラウン）
- #747474 補足テキスト
背景は面積、文字は文字数で重み付けして実測した色から、役割ごとに整理しています。
Typography
フォント
| 用途 | 使用フォント | 無料で近いもの |
|---|---|---|
| 見出し・本文・メニュー（すべて） | Aeonik | Manrope |
| 要素 | PC サイズ / 太さ | PC 行間 | SP サイズ / 太さ |
|---|---|---|---|
| h1 | 75px / 400 | 1.00 | 46px / 400 |
| h2 | 56px / 400 | 1.10 | 44px / 400 |
| h3 | 16px / 400 | 1.35 | 16px / 400 |
| 本文（p） | 14px / 400 | 1.35 | 14px / 400 |
| ボタン | 16px / 400 | 1.35 | 16px / 400 |
実測値（PC 1440px・SP 375px、2026.10.18 計測）。同じ要素で最も多く使われている指定を表示しています。h1 をロゴや小さな見出しに使っているサイトでは、h1 の値が小さく出ます。
Structure
ページ構成（上から順に）
- 01 ヘッダー 左にロゴ、右に Menu ボタンだけ。メニューは全画面で開く。 ヘッダー／ロゴ＋メニューボタン型
- 02 ファーストビュー 事務所の内観を全画面の映像で。「建築＋インテリア」「市場に焦点を当てたアプローチ」の短い文字だけを重ねる。 ファーストビュー／全面動画＋コピー型
- 03 自己紹介 「プロセス主導の建築・インテリア設計事務所です」の一文。 メッセージ／大きな一文型
- 04 5つの市場 住宅・インテリア・高等教育・公共・商業を、色の違う大きなパネルで1つずつスクロールして見せる。 入口／カテゴリ別スライド型
- 05 進め方 「Listen. Plan. Analyze. Shape.」と社名の4文字に対応した4つの手順。 進め方／番号つきステップ型
- 06 実績 市場ごとの件数つきタブで絞り込める作品一覧。 一覧／種類で絞るタブ型
- 07 最新の活動 Instagram の投稿を日付つきのリストで6件。 お知らせ／ニュース一覧型
- 08 拠点 大きな写真と、サクラメント・オークランドそれぞれの住所・電話・メール。 コンセプト／写真＋メッセージ型
- 09 フッター 市場別の入口と作品一覧へのリンク、SNS。 フッター／ナビ＋会社情報型
Download
ワイヤーフレームをダウンロード
この構成を、Figmaで編集できるワイヤーに
上のページ構成を、DevNJ のワイヤーフレーム部品で組み直したものです。元サイトの文章・画像・コードは含みません。
Figmaでの使い方
- SVGをダウンロードする
- Figmaのキャンバスにファイルをドラッグ＆ドロップする
- セクションごとにレイヤーが分かれた状態で開くので、順番の入れ替えや文言の差し替えから始める
文字はテキストレイヤーとして入ります（フォントは Noto Sans JP）。
Reproduce
このサイトを参考にするときのポイント
- 01 社名や屋号に意味を持たせられるなら、それを仕事の手順の説明にそのまま使う
- 02 入口は業種名ではなく、相手が「自分の案件はどれか」で選べる分け方にする
- 03 実績の絞り込みに件数を出すと、数が多い分野がそのまま強みとして伝わる
- 04 拠点が複数あるなら、拠点ごとに電話とメールを分けて並べる
FAQ
よくある質問
LPAS のサイトで使われているフォントは？
見出しから本文、メニューまで Aeonik 1書体で組んでいます。Aeonik は有料書体のため、無料で近い雰囲気にするなら Manrope などの幾何学的なサンセリフが候補です。
ヘッダーに問い合わせボタンが無くても大丈夫ですか？
LPAS は Menu ボタンだけですが、ページの最後に2つの拠点の電話・メールを大きく置いています。設計事務所のように「実績を見てから連絡する」業種では成り立ちます。来店や予約が主な目的の業種では、ヘッダーにも入口を置いたほうが確実です。
どんな業種の参考になりますか？
設計事務所・工務店・建設会社のほか、扱う案件のタイプがはっきり分かれている BtoB 企業全般に向きます。「市場別の入口」と「件数つきの実績」は、業種を問わず使える型です。
スクリーンショットは、解説に添える引用として縮小して掲載しています。デザイン・文章・画像の権利はLPASおよび各権利者に帰属します。ワイヤーフレームは元サイトを写したものではなく、構成を DevNJ の部品で組み直したものです。権利者・制作者の方からの掲載の取り下げ・修正のご依頼はお問い合わせから承り、原則2営業日以内に対応します。 掲載ギャラリー: Awwwards — Site of the Day
