架空の住宅ブランドサイトを作成しました。

こんにちは、kanaです。

住宅系のサイトを作ってみたいと思い、とあるサイトを参考にデザインしてみました。

作ってみて、気づいたことや思ったことを記録していこうと思います。
 

🏠作品を作る前に

田舎に特化した、住宅会社のブランドサイトを作ります。

ページ数：4ページ

デザインの目的：お問い合わせ数増加、私たちと実現できる新たな暮らしをイメージしてもらう

ターゲット：田舎暮らしにあこがれがある20代後半～30代夫婦

使用ソフト：Figma

🏠TOPページ

田舎の自然を表現するため、自然のイメージの緑、土のイメージから茶色を使用し、全体を優しい雰囲気にするため、クリーム色を背景色に使用しました。

🔹参考サイトから気づいたこと

・ナビゲーションの項目名を「TOP」「CONCEPT」と英語表記にしているが、「お問い合わせ」だけ日本語にすることで、自然と目が行くようになっている

・思ったよりカーニングが広い

・コピーライトを縦に入れる方法もある

・暮らしをイメージしてもらうために画像がたくさん置かれている

・写真をバラバラに置き、間に一言を入れることで、ふわっと脳内で思い浮かべてる雰囲気が出ている

・ページ数が少ないから、CONTENTSでイメージを大きく置き、ページへの誘導ができている

・ページ内で押せるボタンがすべてフッターでまとめられている

🏠CONCEPTページ

家を建てる際のコンセプト等を掲載しています。お客様へ安心感を与えるためのページだと考えます。

🔹参考サイトから気づいたこと

・パンくずリストや、メニューの現在いるページの表示の仕方がシンプルで◎

・ページの3分の1ほどをページ内メニューとしているので、ページ全体のどの辺にいるかが分かりやすい

・「イントロダクション」「ミッション」の色を黒でなく緑にすることで、重すぎないような感じがする

・背景の色を変えているので、切り替えが分かりやすい

🏠LIFE STYLEページ

ライフスタイルのページ。自社で家を建ててもらった際の具体的な暮らしをイメージしてもらってワクワクしてもらうためのページです。

🔹参考サイトから気づいたこと

・3分の1がメニューのため、画像等を画面の右端や左端に置き、見切れさせることで、ページに窮屈さを生まないようにしている

・家族のプロフィールも載せることで、共通点のある家族はより親近感が湧く

🏠CASEページ

CASEページ。家の中を細かく見ることが出来ます。

🔹参考サイトから気づいたこと

・写真をたくさん置いてイメージしやすくしている

・項目名を横に並べたり、横スクロールできるようにしたりして、ページが長くならないようになっている
・写真の中に文字を入れることで、より多くの情報を丁寧に伝えられる

・横スクロールの下に線を入れることで、どのくらいスクロール可能かが視覚的に分かる

最後に

サイトを眺めるよりも、実際に手を動かすことで気づける点がたくさんあることが分かりました。

見つけたことを次に生かせるように、頭の引き出しに入れておけたらと思います。

1つ反省することとしては、画像の色味も真似たら良かったと文章を書きながら思いました。フリー画像をそのまま突っ込んでいるだけなので。

最後まで読んでいただき、ありがとうございました！

引き続き、Webデザインの勉強頑張ります。