#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サイト研究