Blog スタッフブログ
【WEBデザイン】涼やかさ全開!夏を表現するサイトデザインまとめ

こんにちは、Webデザイナーのそいです。
8月もお盆を過ぎ後半戦!にも拘わらずまだまだ暑い夏。今回は、そんな暑い夏を涼しげに演出されているサイトを大調査!勉強にしたいポイントを解説していますのでぜひご覧ください。
水滴をつける【KIRIN 一番搾り®糖質0】

まずはキリンビール、一番搾り®糖質0の特設サイトです。

写真の色合いやカラーなど、青や淡い水色が使われており爽やかな印象の色使いになっています。
その中で、特に注目してもらいたいのが背景に水滴のテクスチャを使われていること。さりげなくあしらいとして使われているので、涼やか+爽やかさが組み合わさった表現になっていました。
水滴をつける❷【ポカリスエット】

次はポカリスエットのサイトです。シンプルなボリュームのページになっていますが勉強になるポイントはいっぱい詰まっています。

製品のコーポレートカラーのブルーと白の2色をメインとした色合いで、シンプルに配色バランスが整っているサイトですね。光沢感や水滴の表現がリアルとイラストの間をとったような質感が世界観とマッチしているように感じました。また、水滴の背景はパララックス効果を使われているのも印象的です。
丸いモチーフ【スターバックス ヘブンリー ピーチ&フラペチーノ®︎】

次はスターバックスの期間限定メニューの特設サイトです。モバイルファーストの作りになっています。

ところどころで丸いモチーフ+商品写真がちりばめられていてポップな印象を受けました。
淡いピンクのグラデーションの色合いとコロッと丸いモチーフの組み合わせと、レイアウトのバランスが素晴らしく、商品とのリンクや爽やかさが上手く演出されているのではないかと思いました。
スターバックスコーヒー ヘブンリー ピーチ&フラペチーノ®︎
影のシルエット【丸亀製麺 旨塩うどん】

次に丸亀製麺から、旨塩うどんのサイトです。

ボタニカルな商品サイトなどでよく使われる表現、影のシルエットを背景に使われています。カーテンからうっすら光が漏れ出るような淡く爽やかな世界観のデザインです。
夏のあっさりしたうどんの味が、デザインで想像できるような仕上がりで素晴らしく感じました。
エキゾチックなグラデーション【YOLU モクテルナイトシリーズ】

最後にヘアケア商品、YOLUのモクテルナイトシリーズのサイトを紹介します。

ノンアルコールカクテルから着想、企画開発されたモクテルナイトシリーズ、ということで製品の色合いはまるでカクテルのよう。サイトでは、そんな商品を魅力的に演出されておりとても美しいデザインに仕上がっています。
特にこのサイトのデザインは、グラデーションが効果的に使われており緑や青、紫やオレンジなどエキゾチックな雰囲気がガツンと心を打たれました。淀みそうな色の組み合わせなのに綺麗なグラデーションとなっており衝撃ですね。
まとめ
いかがでしょうか。今回は夏を涼しげに、爽やかに彩るサイト紹介しました。水滴などのあしらい・グラデーション・丸のモチーフ・テクスチャーの使い方と、特に気になったアイデアを独自の視点で考察してみました。組み合わせ方や塩梅、バランス感などぜひサイトをご覧になってアイデアとしてストックしてみてはいかがでしょうか。
今回もご一読いただきありがとうございました。