牛久工務店

牛久工務店
https://asmo-e.co.jp/

携わった業務
Webデザイン・ディレクション

Concept

ファーストビューではメインコピーと写真エリアを重ねず、広々と写真を見せようにして、
開放的な建築を想起させるデザインにしました。
事例紹介では具体的な施工写真も掲載し、サムネイルのメインには人物の写真を使用しています。
「工務店」のサイトですが、住宅それ自体ではなく“お客様と設計士の笑顔”を主役にした写真からは
堅苦しさを感じさせず、お客様に寄り添う姿勢が伝わるようにデザイン制作しました。

Features

風格を見せるために見出しには「見出ミンMA31(明朝体)」を使用、その効果として、しっかりとした工務店としての信頼を感じていただけるようにしました。
Webサイトの整然とした印象を強めるために、文字間隔(letter-spacing)を設定しています。
本文にはクセがなく読みやすいフォントの「Noto Sans JP(ゴシック体)」を採用し、文字の懐の広さからどこかおおらかな印象も受けていただけるようにしました。

PC・SPともに、スクロール固定でお問い合わせ導線を設置しています。
アクセントカラーの青で目立たせ、
イラストアイコンを用いてユーザーが迷うことなく直感的に選択できる仕様にしています。
各下層ページの末には大きくお問い合わせへの誘導エリアを設け、
UI/UX的にも「ユーザーが興味のあるコンテンツを閲覧→興味を持つ→お問い合わせ」まで
余分なラグを生まないスムーズな動線が設計しました。