Works — Renovation

暮らし工房
ひだまり

間取り図を写したトレーシングペーパーを、大きな建築写真に重ねる。木と白と緑の落ち着いた色で、「家の真ん中に陽だまりの席をつくる」リノベーションの考え方を伝えるサイトです。

パソコンの画面（1920×1080）で、トップページを上から下までスクロールした様子です。

Design Pointsデザインのポイント

Point 01
写真に「間取り図」を重ねる
ファーストビューの写真に、半透明の間取り図を重ねました。どんな暮らしに変わるのかを、一枚の画面で伝えています。
Point 02
できることを、光る間取り図で
キッチン、リビング、水まわりなど、スクロールに合わせて間取り図の部屋が順番に光り、工事できる場所がひと目でわかります。
Point 03
費用を寸法線で見せる
工事の種類ごとの費用の幅を、図面の寸法線のような横棒で表しました。「だいたいいくらかかるか」を直感的に比べられます。
Point 04
相談しやすい入口
流れ、対応エリア、よくある質問のあとに、間取り図や写真がなくても送れる相談フォームを置いて、最初の一歩を軽くしています。

カラー

#F3EFE7背景（リネン）#FAF7F1面の色（ペーパー）#B48A5Aアクセント（オーク）#6E7F5Cモス#2F2F2F文字（チャコール）

フォント

Zen Old Mincho（見出し）／Zen Kaku Gothic New（本文）

ページの構成

動き

図面の線が描かれ、部屋が順番に明るくなる動き。住まいの設計図を一緒に見ているような、落ち着いたテンポにしています。

※自主制作：架空の店舗を想定して、当社が制作したオリジナルデザインです。店舗名は架空のもので、住所・電話番号は仮の表記です。写真はイメージです（Unsplashの写真を使用）。