こんにちは、クリエイターのTです。
突然ですが私は暑いのが本当に苦手です…ちょっと暑いだけでぐでっとしてしまうので、なるべく朝か夜に行動するなどして体力温存しています。
（室内にこもりがちの仕事なのでこれに関しては本当助かっています…）
先日の始業前、まだ朝のエアコンが生ぬるい時間帯にWebデザインギャラリー巡りをぼんやりしていて、ふと「涼しげなサイトを巡ったらちょうどいいのでは？！」ということに気づきました。
我ながらいいアイデアだなと思いました（？笑）
と、いうことで今回は「“水”を感じるサイト」というテーマに絞ってサイトを収集・観察していきます！
（数を絞ろうとしたのですが収集した８つのサイトがどれも素敵なため、前後編に分けてお送りします！）
目次
水滴のあしらいが美しいサイト
【公式】8 THE THALASSO（エイトザタラソ）
まずはこちら、ヘアケア用品のブランドサイトです。
最初に目に飛び込んでくるスライド画像、ビジュアルが美しいですね…！
随所にあしらわれている水滴や水モチーフの流線が、こちらの製品がもたらすクリアな潤いを連想させてくれます。
メインビジュアル以下のセクションでは背景に水滴の画像が配置されていますが、
①パララックス（視差効果）
②慣性スクロール（少し遅れてスクロールされる）
③水滴の距離感（奥行き）を出すために「ぼかし」調整をした水滴画像をミックス
これらの表現方法が相まって、比較的シンプルなデザインとのメリハリがあり本サイトのスパイスとなっている感じが魅力的です。
余談ですが、①＋②＋③を効果的に使ったサイトは他所でもよく見るような気がするので、この使われ方に注目してサイトを見ていくのも面白そうですね。
水滴以外にも、スクロールにより商品画像が表示されるたびに画像の表面に水紋が発生したかのように一定時間ゆらめくエフェクトがついていて、自然と目が留まるなと感じました。
エフェクトは読み込み後１回に制限し、商品画像をしっかり見せることも意識されています。
O³ MIST by Bollina
続いては衛生関連用品のPRサイトです。
「携帯できるオゾン水生成器」という比較的ニッチな製品ジャンルになるのですが、
メインビジュアル直下のリード部分にしっかり２ビュー分のスペースをとって読みやすい文字サイズ・情報量でレイアウトされているため、リード終わりまでで製品概要がしっかり理解できます。
また、
①白ベースの背景＋青みがかったグレー系の文字色のコントラスト
②ニューモーフィズム（スムースなエンボス加工のような装飾）を取り入れたボタンなどのUI
（そしてこの）③水滴モチーフ
このあたりのデザイン要素が「上質かつ安全で健やか・安心感ある」イメージを演出しているかなと思うのですが、このプロダクトにピッタリはまっている感じがして、見ていて心地がいいです！
こちらのサイトでも前出の慣性スクロールが適用されていて、大きな数字のあしらいが動いたりするたびに視線誘導されますね。
写真や映像がみずみずしいサイト
Aquall（アクオル）公式サイト
こちらも１つ目のサイトに続き、ヘアケア用品のブランドサイトです。
コンセプトページのパッケージデザインについての説明で『水面のような 光のゆらめきを 感じられるデザイン』とあるのですが、まさしくそのコンセプトに寄り添ったデザインのサイトだなぁと感じました。
メインビジュアルの画像が一定間隔でゆらめいたり、イメージビデオのプレビューが緩やかな流線でトリミングされているところなど、まさに“水面のゆらめき”を感じます。
リード部分に浮かぶ製品画像だけとっても、パッケージ表面の変則的な凹凸をよく見せるような光の加減だったり、液体の入ったボトルから落ちる影だったり、計算されたかっこいいビジュアルに思わず目を奪われます。癒される…
ヘッダーの背景帯に“擦りガラス風”のぼかしを適用していたり、スクロールで上がってくる文章がだんだん不透明度を下げながら表示されていくようにスタイリングされているところなど、細部にまで世界観を表現する要素があるなと感じました。
【公式】BLANC HONEY（ブランハニー）
最後もスキンケア用品のブランドサイトです。
自由に選んだら美容系に偏りましたね…というか、“水”を感じるサイト、美容系が圧倒的に多い気がしています。
こちらもメインビジュアルに各製品をスライドで写し出しているのですが、製品とそれに紐づく青果やハーブなどのイメージが１画面の中でふわっと動くアニメーションになっていて、下に続くサイトへのワクワク感が高まります。
“水”を感じるのは実はこのメインビジュアル１枚目のみとなるのですが、フレッシュフルーツとの組み合わせで「パシャッ」と水が弾けるようなシズル感がでていて、製品使用感のスッキリ爽快なイメージが連想できるなと思いました。
メインビジュアルはページ全体の背景として固定表示となっており、パララックスを用いてビジュアルの上にコンテンツが重なってきます。
コンテンツは“擦りガラス風”のぼかしをスタイリングした白い背景となっていて、そこに背景のビジュアルの色味がぼんやり写し出されるため、シンプルなデザインのコンテンツにほんのりとした色がのって気持ちがいいです。
“水”を感じるデザインד擦りガラス風”、この掛け合わせも相性がよいですね！
おわりに
いかがでしたでしょうか？
８つもサイト収集してしまったので後半４つは次回の記事とさせていただくのですが…１つのテーマでとことん観察するのもデザインインプットの目を養う練習になりそうです。
とのことで次回もお付き合いいただけたら嬉しいです…！
最後までお読みいただき、ありがとうございました！
