ウェブサイト / 工務店・木造住宅
柚木野工務店
三十年後の住まいから、
逆算して伝えるサイト。
埼玉県川越市の架空の工務店を題材にした、木造住宅のウェブサイトです。新築とリフォームの二つの入口から、性能の考え方、施工事例、お客様の声をたどり、相談へ進むところまでを13ページにまとめました。
作品を開く架空の事業者を題材にした自主制作です。
誰が建てるのかを、
先に見せる。
想定したのは、埼玉県中西部で土地を探しはじめた子育て世帯と、築25年を過ぎた自宅の改修を考える世代です。トップページで新築とリフォームの二つの入口に分け、それぞれの検討順に並べました。
冒頭はスクロールに合わせて映像が進む導入にし、線が住まいに変わる過程を四つの章でたどります。その先に考え方、標準仕様、施工事例、価格の目安、相談の案内を置きました。
図面のように、
寸法線で組む。
生成りの地に濃い茶の文字、相談ボタンと価格には深い緑を使いました。見出しは明朝体、本文はゴシック体です。ヘッダーは図面の表題欄のような罫線の枠に組み、今いるページを「図面名称」の欄に示して、主なページを2段の欄に収めました。
本文は方眼の地に、写真の上へ寸法線を引いてキャプションを置き、写真から見出しへ引き出し線を伸ばして組んでいます。トップでは家の線画が描かれてから実写の写真に切り替わり、6つの標準仕様が引き出し線で家の各部を指します。お客様の声では、住まいの写真と家族の写真を左右に並べ、8件の見出しを先に一覧にしました。
条件を選んで、
近い事例を探せる。
施工事例はキーワード・エリア・階数の三つで絞り込めます。条件を変えるたびに該当件数が書き換わり、すべて表示のボタンで解除できます。
相談フォームは種類・氏名・連絡先を入れると確認画面に切り替わり、入力に戻ることもできます。内容は送信も保存もしないデモです。
縦の画面でも、
写真を画面いっぱいに。
スマートフォンでは写真を画面いっぱいに敷き、下から濃紺が濃くなる地にコピーと相談ボタンを重ねます。表題欄はロゴとメニューの段、図面名称の段の2段になり、メニューには13ページすべてが図面のリストのように並びます。
制作情報
- 種別
- 自主制作・架空サイト
- 制作範囲
- 構成・文章・デザイン・実装
- 使用技術
- HTML / CSS / JavaScript
Vite / GSAP - 対応画面
- PC・タブレット・スマートフォン