フィンランド発の高品質なログハウス

ログハウス建築メーカーのサイト新規制作 自社の商品を広め販売に繋げたいが、サイトを通じてまずはログハウスの良さを知ってもらいたい お問い合わせなどに繋がるのが望ましい

30代～40代夫婦
従来は50代以降のシニア世代が興味を持つ傾向が多かったが もう少し若い層に興味を持ってもらいたい

ログハウスが持つ温もりや優しさが伝わるようなデザイン 明るく清潔感のある雰囲気も欲しい

pcの構想ではなくモバイル端末のデザインから考えて作成。 pcからモバイル端末時に変わるとハンバーガーメニューになるようにしました。

pcの構想ではなくモバイル端末のデザインから考えて作成。 pcからモバイル端末時に変わるとハンバーガーメニューになるようにしました。

モバイル端末使用時にタッチしやすい位置にfixでリンクを固定。 補色を使用して目につくように設定

フィンランドのログハウスメーカーなので北欧のイメージが伝わる配色を使用 ログハウスの温もりを伝えるベージュ系をベースカラー 北欧イメージのブルー系をメインカラー 申し込みフォームのカラーに補色でアクセントカラーを指定 フォントは顧客ターゲットを広げたい観点から親しみやすいサンセリフを使用

前作の反省を活かして、クラス指定の命名規則にBEMを使用して作成しました。 CSSコーディング時にどこのコーディングを行なっているか分かりやすくなったので、前回より成長しましたが。改善すべき点が生まれました。

BEMでの命名を使用した際、例えば class="header--main__logo” に指定した内容をfooterにも使用したいとき、footerにそぐわない命名をしてしまうことになりました。今回は同じCSSの指定をfooterのクラスに行い回避したのですが、統一して指定したいCSSが存在する場合、そのCSS記述がわかるクラス指定を行うことで無駄のない記述をしていけると思いました（clear fixと同じ要領）。そのためには制作前のカンプ作りの時点でイメージを固めておくことが重要だと思います。制作会社で勤める場合は既にデザインカンプに従い製作できるのかもしれませんがクラス指定の応用を学ぶことができました。