見出し画像

#039 あたたかみのある住宅メーカーのwebサイト

こんにちは、webデザイナーのKIRIKOです。
一ヶ月ぶりのwebサイト研究、今日も張り切っていきます!

今日もこちらの記事を参考に研究していきます。


今日はMUUUUU.ORGさんからです!



「千里殖産株式会社」


レイヤー 1


あたたかみのある印象が素敵だなと思い選びました。結構はっきりとした原色が使われているのにどうしてだろう!と思いながら。。
角丸の写真を使うと雰囲気が変わるなと思いました!

では研究していきます。

☆リンク要素のルール
マウスオーバーすると、
・写真画像:拡大(多くが家の写真)
・ロゴなどの画像:フチが出る
・新着記事:各列に色がつく
・グロナビ:下層が出てくるタイプ…(名前が出てこない汗)、スクロールで固定
・フッターナビ:矢印が動く

☆王道サイズ、形のセオリー
・セクションごとのタイトルは30px
・ニュースの記事などの文章は14px

☆コンテンツの横幅、グリッドのルール
・最大4カラム
・背景に色をつけてあるセクションは角丸(border-radius: 0 40px 40px 0;)

☆写真や図や比率のルール
・写真のリンクは角丸写真
・カルーセルは、dotとスライドする棒の2種類を使用


☆レスポンシブの変化のセオリー
・最大2カラム
・写真(物件)を横スワイプする仕様。(pc時はスライドする棒やdotsが出て来る)

☆配色のルール
・背景白色、黒文字(#000)
・フッター、ハンバーガー、ヘッダーのマウスオーバー、矢印ボタンが緑色

☆読みやすい文字量
・テキストは最長40字
・下層ページ「へのリンク


横スワイプがよく使われているのが特徴的でした。
写真が全体的に彩度が低めなので、彩度高めな緑が多く使われてはいますが、落ち着いた印象が出ているのかなと思います。

あとは角丸なのも、ツンツンし過ぎない雰囲気を出しているなと感じました。


不動産系のサイトを作ることが多いのでぜひ参考にしたいと思います!!!


今日も最後までお読みいただきありがとうございました✨