![見出し画像](https://assets.st-note.com/production/uploads/images/25401989/rectangle_large_type_2_932ea1a9959b0ee6e325d3ffdd6da449.jpg?width=1200)
#31 爽やかな色合いと、思わず惹かれるキャッチコピーを見習いたい!シャワーヘッドのWebサイト
こんにちは!Webサイト研究です!
GWも明け、直後の週末も明け、ゆるゆるモードを切り替えて仕事するためにも、いけてるWebサイトを見てモチベーションを上げようと思います(^ ^)
今日もギャラリーサイト「SANKOU!」 https://sankoudesign.com/ さんからです。
「Bollina」
https://www.bollina.jp/
暑くなってきた5月中頃(特に今日は30度!)、爽やかなこちらのWebサイトに惹かれて選びました。
さっそく装飾の研究していきます。
☆リンク要素のルール
・文字リンクはマウスオーバーでopacity
・写真はマウスオーバーで水色がかったopacity
・商品写真はマウスオーバーで商品名が出てくる
☆王道サイズ、形のセオリー
・ヘッダーは130px
・文章は15〜18px
・見出しは50pxくらいありそうだけどimgが使われてる
☆薄い色は何色あるかをつかむ
・よくあるグレーの線はないが、キーカラーが薄い緑であり、見出し・小見出しに使われているため、全体がうるさくならない印象。
☆コンテンツの横幅、グリッドのルール
・最大3カラム。3つの特徴を説明
☆レスポンシブの変化のセオリー
・左が上、右が下の基本ルール
・全て1カラムへ
☆配色のルール
・グラデーションが綺麗!!
・写真も含め、使われている色は白、薄いグレー、薄い緑や水色のグラデ。
→かなりクリーンな爽やかな印象!
・見出しなど大きい文字にキーカラーの薄い色が使われている
☆読みやすい文字量
・「浴びる全身美顔器」ってキャッチコピー、超イイ・・・
・見出しは英語なのでシャレてます!でも薄い色なのでアピールしすぎず、ちゃんと日本語の文章に目が行くので、ちょうどいい感じ
商品の特徴を図と写真で分かりやすく伝えていると思いました。
商品の売りである気泡が、ころころさせた文字や写真から遊び心から伝わってきますし、綺麗なグラデーションも加わって、
これからの季節に気持ち良さそうな、爽やかフレッシュな世界観が出ているなあと思いました!
つまり、シャワー浴びたくなりました(笑)
今日も最後までお読みいただきありがとうございました(*^^*)
#webデザイナー #webサイト #webサイト研究