#Webデザイン
【デザインの観察】雨がテーマのWebサイト

皆さんこんにちは。

春はあれっ!と言う間もなく過ぎ、雨の多い季節になってきました。
この時期になると、私は大好きな「言の葉の庭」というアニメーション作品をいつも思い出します。
この作品は新宿御苑が主な舞台として描かれているのですが、弊社は新宿御苑にほど近い「新宿三丁目」に位置しているため、梅雨の時期にはひとりでに新宿御苑へ思いを馳せてしまいます…。

少し話が逸れましたが、今回は「雨」をテーマにデザインの観察をしていきたいと思います。

雨というとジメジメどんよりしたイメージで、後ろ向きな気持ちになってしまう方が多いと思います。かくいう私も雨は大の苦手なんです…。

ですがデザインとして雨を取り入れる際は、もう少しポップで爽やかな印象のものが多いように思います。

 グレー模様のお天気が多い毎日ですが、デザインを通して「雨」を捉え、明るい気持ちをチャージしましょう♪

映画「雨を告げる漂流団地」公式サイト

https://www.hyoryu-danchi.com/

早速雨テーマのアニメーション繋がりでご紹介するのは「雨を告げる漂流団地」の公式サイトです。

作品自体のビジュアルで大きくサイトの印象を裏付けていますが、こちらのWebサイトとしての見どころは動きの部分です。

カーソルは矢印マークではなく水の波紋のようなものになっているのが印象的です。また、スクロールしていった時も円形の波紋が広がります。地面に雨のしずくが落ちる瞬間を上から眺めている感じです♪

また、一つ一つのコンテンツは曇りガラスがぼわっとクリアになるような見た目でスライドインします。

この動きがまた、雨を取り巻く世界観にうまくマッチしていると感じます♪

RAINY DAY STYLE -雨の日にこそ、着たい服-|パル公式通販サイト|PAL CLOSET

https://www.palcloset.jp/shared/pc_pal/event/otonacloset/2023/rainyday/

こちらは「雨の日にこそ、着たい服。」がテーマのブランドサイトです。

雨がモチーフとは言っても、イラストやモチーフ、テクスチャを多用しているわけではないのですが、ところどころにさりげなく水滴を散らしているのがなんともオシャレです。

色味も、ほんの少し彩度が低くなっていてどこか落ち着いた雰囲気です。

全体的なシンプルさ、線の細さが、雨が持つクールな雰囲気を美しく引き出しているように思います。

布製品には撥水(はっ水)・防水スプレー「レインガード」|ライオン株式会社

https://guard.lion.co.jp/rainguard/

こちらは撥水・防水スプレー商品の紹介サイトです。写真が多く分かりやすいサイトですね。

テクスチャ素材が背景に多く使われているので質感が効いて、画面にメリハリが付きます。全体的にふわっとしたシャドウや、グラデーションなどを各所に使用しており、柔らかい印象を持ちます。

明るめの背景が多いこともあり、全体的にどこか楽しげなハツラツな印象を受けます。

このスプレーがあれば、雨の日のお出掛けもへっちゃら!と思わせてくれますね♪

まとめ

いかがでしたか?

あしらいだったり、動きだったり、テクスチャだったり…色々な「雨」の表現がありましたね。

今回、雨テーマで全体が青系以外の色味でまとまっているものはあるかなー?というのも一つの視点として探していたのですがやはり中々ありませんでした。梅雨の時期に咲く紫陽花が使われていると、紫~ピンクっぽい色味になっていたりしますが…!

また別の機会には、違う視点でサイトを観察してみるのも楽しそうだなと思いました♪

最後までお読みいただきありがとうございます。

CONTACT

この度は当社へご興味お持ちいただき
ありがとうございます。
Webに関するお悩みございましたら、
是非一度お気軽にご相談ください。
平日10:00~19:00