海外建築の印象から設計者へ
建築 / 写真中心
KONONENKO
建築を大きく見せた後に設計者の顔と用途別実績を置き、空間の好みと相談相手の両方を確認できる構成。
設計の見どころ
冒頭は建築・空間のビジュアルを画面いっぱいに置き、次の白い区画で代表者の肖像と事務所の説明に切り替わる。その下に住宅・商業・公共空間などの実績分類が続く。建築の雰囲気で関心を作ってから、人と対応範囲を確かめる順序を採用している。
詳しい解説を読む →公式サイトを見る ↗← サイト事例に戻る
01 02 03 04 05 海外 
海外
国内
DESIGN NOTES
このサイトの設計を読み解く。
外観から暮らしの考え方へ
一画面目は住宅と周辺の木々を大きく見せ、左下に設計方針、近くに作品一覧の入口を置く。次の黒い区画では落ち着きや長く暮らすことへの考えを二列で説明する。建物の見た目から生活の方針へ話題を移す順序は住宅サービスの説明に応用できる。
二列の短文が黒い余白を支える
冒頭のナビは小さく、写真に重なる説明も左下の狭い幅へ収めている。次の区画は黒地に白い短文を二列で置き、残りを大きく空ける。文章量を増やして埋めるのではなく、二つの論点だけを並べることで読み手が設計の姿勢を区別しやすくしている。
作品を見る操作を案内する
黒い区画には作品を見るためのホバーとクリックの案内があり、通常の一覧とは異なる探索を促している。画面上では浮かぶ面と小さな操作説明が確認できた。特殊な見せ方を使う時も、何をすると作品に進めるかを言葉で補う必要があると分かる事例だ。
相談前に計画の輪郭を集める
ページの終盤には会話を始める呼びかけに続き、名前、メール、計画種別、所在地、時期、詳しい内容のフォームがある。作品を眺めた人にいきなり長い自由記述だけを求めず、計画の輪郭を項目で整理する構成だ。入力や送信の動作までは今回確認していない。
住宅の思想と相談項目を揃える
穏やかな住まいという見せ方を応用するなら、写真の色だけでなく説明と受付項目も一致させたい。改修、住宅、内装のどこを相談できるかを先に示し、その分類をフォームにも使う。見た目に惹かれた後、自分の計画が対象かどうか確認できることが重要だ。
APPLY TO YOUR PROJECT
自分の制作に取り入れるなら
代表住宅の写真に短い方針と作品リンクを添え、最後のフォームで種別・所在地・時期を聞く。閲覧から相談へ移る際に、依頼者が計画を整理できる設計を学べる。
そのまま真似する前に
ホバーを前提にした作品探索は、操作方法が伝わらないと入口を見落とされる。タッチ操作やキーボードでも作品一覧へ進める経路を用意することが転用時の課題になる。
次に見ておきたい参考
一覧へ →海外海外OH Architecture
建築 / タイポグラフィ
一つの住宅を入口にする
建築 / タイポグラフィ
OH Architecture
住宅写真に作品名・年・詳細リンクを横一列に重ね、次の巨大見出しと細い本文列で設計姿勢を伝える。
設計の見どころ
最初の画面では住宅の写真を背景に、作品名と年、詳細リンクを横に並べる。続く区画は設計思想、さらに注目作品、工程への入口、相談へ進む。事務所の沿革を先に語らず、具体的な住宅で作風を伝えてから依頼の判断材料を増やす情報順である。
詳しい解説を読む →公式サイトを見る ↗国内EIGHT DESIGN
建築 / タイポグラフィ
黒い大文字にオレンジの手書きを重ねる
建築 / タイポグラフィ
EIGHT DESIGN
大きな英字と手描きの表情で、暮らしを楽しむ姿勢を伝える建築・デザイン会社。
設計の見どころ
冒頭ではDELIGHT LIFESTYLE DESIGNという大きく太い黒い文字に、オレンジの筆記体を重ねる。整った大文字と走り書きのような線の差が、設計の力強さと遊び心を同時に見せる。理念の文章を小さく置くのでなく、文字そのものを画面の主役にしている。
詳しい解説を読む →公式サイトを見る ↗