![見出し画像](https://assets.st-note.com/production/uploads/images/22836114/rectangle_large_type_2_af17baf708e81834a7de88ec3d6f0512.jpg?width=1200)
#23 エレガントなヘアドライヤーのWebサイト
こんにちは!
今日もWebサイト研究していきます!
今日は「muuuu.org」さん https://muuuuu.org/ から選びました。
「FUKUGEN CALEA」
https://calea.jp/
今日も「高級感」「エレガント」を研究したいと思ってこちらを選びました。
写真や配色、動きなどから、高級感が感じられますね。
やっぱ黒背景の白文字は高級感でますね。
パアッと光るような、ドライヤーの風に吹かれたかのような動きが珍しくて、このjQueryすごい〜〜なんだろう〜!
見ていて、パンテーンのCMとかで使われているような壮大なオーケストラっぽい音楽が、頭の中で流れてきました(笑)
でもそういう風に世界観を作れるのって本当素晴らしいです!
では装飾の研究していきます〜!
☆リンク要素のルール
・ナビは、マウスオーバーで下線が横から出てくる
・ボタンリンクはマウスオーバーで塗りの色が変わる
☆王道サイズ、形のセオリー
・ナビは16px、大見出しは28px
・最小で12px
・セクション間の余白256px
→余白たっぷり!
☆薄い色は何色あるかをつかむ
・薄い色がない!珍しい〜
☆コンテンツの横幅、グリッドのルール
・2カラム→1カラム→2カラムの繰り返し
・2カラムの部分は、写真が6割、見出しや文章が4割くらいの比率、写真は左右交互になるレイアウト
☆写真や図や比率のルール
・2カラムの部分には正方形の写真
・1カラムの部分にはサイドの余白なしで横長の写真
・うすーーく背景として光沢っぽいドットの柄がある!見えないくらいの薄さ!
・1カラム写真の1枚に動画あり
・写真はどれもブロンドの外人モデルさん。薄ピンクの服。
→ベージュやゴールド、薄ピンクが主な色
☆レスポンシブの変化のセオリー
・基本は左が上、右が下
・でも見出しは、pc版でどこにあろうとレスポンシブでは上に来る
☆配色のルール
・黒背景、白文字
・トップのビジュアルは+ローズピンクぽい色
☆読みやすい文字量
・商品の説明文章は左寄せ
・キャッチコピー的なのは中央寄せ
・キャッチコピーは20文字くらいまでで、ぱっと目に入りやすい
前回研究したホテルのサイトもそうでしたが、「高級感」というのは、飾りをつけたりするのではなく、何もしない方が出るのかなーと感じました。
そして、今日のサイトも、ゴリゴリのブロークングリッドとかではなく、レイアウトのルールが分かりやすいと思いました。
トップの部分が印象的で、それ以下はシンプルな構成になっていると思いました。
あとは余白のとり方も勉強になりました。
でも、
・黒背景白文字
・シンプルなレイアウト
・余白たっぷり
って、一歩間違えるとかなり質素な感じになりそうですが、こちらのサイトの場合は背景に使われてるうすーいドット柄や、写真の統一感と女優さんの美しさ(!)で高級感出てるのかなあと思いました!
最後までお読みいただきありがとうございました!
#webデザイナー #webサイト #webサイト研究