国内色面の建築写真に白いロゴを置く
建築 / 写真中心
FIGARO
色面や建築の細部を大きく映し、店舗・内装の設計へ関心をつなぐスタジオサイト。
設計の見どころ
冒頭はピンクや青の建築的な色面を画面いっぱいに見せ、大きな白いFIGAROの文字を重ねる。確認中には縦に並ぶ色付きの部材へ写真が切り替わり、細部の形と配色が印象に残る。完成空間を説明し切るより、設計の感覚にまず触れてもらう見せ方になっている。
詳しい解説を読む →公式サイトを見る ↗← サイト事例に戻る
01 02 03 04 05 国内 
海外
海外
DESIGN NOTES
このサイトの設計を読み解く。
建築の印象から設計者へ
冒頭は建築・空間のビジュアルを画面いっぱいに置き、次の白い区画で代表者の肖像と事務所の説明に切り替わる。その下に住宅・商業・公共空間などの実績分類が続く。建築の雰囲気で関心を作ってから、人と対応範囲を確かめる順序を採用している。
写真と説明で密度を変える
ヒーローでは大きな写真と小さなナビゲーション、下部では白地に黒い説明文という対比がある。代表紹介には上下の余白を大きく取り、左右に肖像と文章を分ける。説明を写真の上に重ね続けず、読む場所の背景を安定させる方法が参考になる。
用途分類を写真で伝える
最初の実績入口は大きな二列の建築画像として現れる。形状や素材が異なる空間を同じ幅で並べ、文章を読む前にも対応する建築の幅を示す。案件の数だけ増やすより、住宅と商業など依頼者が自分の用途を選べる分類を先に決めると応用しやすい。
相談と実績閲覧を分ける
上部にはプロジェクト相談と電話番号があり、実績側には詳細や一覧へ進むリンクがある。興味を持った作品を確認する行動と、すでに相談先を決めた人の行動を同じ入口に押し込めていない。制作会社でも作品の詳細導線と連絡手段を分けて設計できる。
代表写真にも役割を与える
空間写真だけでなく設計者の顔を早い段階に置く点は、依頼者が担当者との相性も気にする業種に合う。住宅設計や内装相談で応用するなら、顔写真の隣に対応範囲と考え方を短く置き、その直後の実例と内容がつながるように編集したい。
APPLY TO YOUR PROJECT
自分の制作に取り入れるなら
代表作を一枚で見せ、次の区画で担当者と対応範囲を示す。作品への好感を相談相手への理解につなぐ順序を、内装や住宅のサイトづくりに取り入れられる。
そのまま真似する前に
大きな写真は対応地域や依頼条件をすぐには伝えない。写真だけに任せず、用途別実績と相談先を近くに用意する必要がある。写真が実写か完成予想図かも明記したい。
次に見ておきたい参考
一覧へ →国内海外OH Architecture
建築 / タイポグラフィ
一つの住宅を入口にする
建築 / タイポグラフィ
OH Architecture
住宅写真に作品名・年・詳細リンクを横一列に重ね、次の巨大見出しと細い本文列で設計姿勢を伝える。
設計の見どころ
最初の画面では住宅の写真を背景に、作品名と年、詳細リンクを横に並べる。続く区画は設計思想、さらに注目作品、工程への入口、相談へ進む。事務所の沿革を先に語らず、具体的な住宅で作風を伝えてから依頼の判断材料を増やす情報順である。
詳しい解説を読む →公式サイトを見る ↗海外Storey Architecture
建築 / ミニマル
外観から暮らしの考え方へ
建築 / ミニマル
Storey Architecture
住宅写真の下に黒い思想紹介と作品探索を置き、最後は計画種別・所在地・時期を聞く相談フォームへつなぐ。
設計の見どころ
一画面目は住宅と周辺の木々を大きく見せ、左下に設計方針、近くに作品一覧の入口を置く。次の黒い区画では落ち着きや長く暮らすことへの考えを二列で説明する。建物の見た目から生活の方針へ話題を移す順序は住宅サービスの説明に応用できる。
詳しい解説を読む →公式サイトを見る ↗