• CREATIVE

July 03.2019

【WEBデザイン】夏っぽいデザイン作成の参考になる色・モチーフのポイント紹介

banner

こんにちはデザイナーのしろくまです。

7月になり、毎日暑い日が続いていますね。いけないと思いつつも、ついアイスや冷たいドリンクに手が伸びてしまいます。

そう、「季節」は消費行動を喚起する上でとても重要な要素です。

夏に「涼しそう」「楽しそう」と感じさせるデザイン多くないでしょうか? そしてそのイメージに惹かれて何かを購入する。そんな経験に思い当たる方は多いと思います。

そこで、今回は「夏を感じさせるデザインのポイント」をご紹介したいと思います。

ポイント1:色

■青色

夏を感じさせるカラーの代表といえば、「青色」ではないでしょうか?

カラッとした青い空、透き通る青い海、涼しさをイメージさせる水色、プールや氷など「水」をイメージさせる青など、様々な青色があります。

summer_color01

■黄色

夏の代表カラー、「青」と合わせて使われるのが「黄色」です。

青色との相性も良い黄色は、夏の強い日差しや夏の代表の花、ひまわりを連想させます。

summer_color02

さらには、「夏を感じさせる色」は特定の色だけでなく、色の組み合わせ方でも感じさせることが出来ます。

色の組み合わせ    
ビビットな色、対比がはっきりした色、エスニックな色などを意識すると、夏らしさが出ます。

ポイント2:モチーフ

夏を象徴するモチーフを使うのも、季節感を表すための需要ポイントです。

■水・空

umi

海、プール、波、水しぶき、汗、青空、入道雲などは、夏のテーマ全般で使用しやすいモチーフの代表例。

背景として、全面に写真を使用したり、イラストなどを配したりできますね。

■猛暑

猛暑

うちわ、扇風機、風鈴、氷、ペンギン、しろくまなどが代表例。

ECサイトなどでは、猛暑関連商品の販売が賑わいます。

その場合、猛暑だから「暑い」イメージではなく、「涼しい」を通り越して「キンキンに冷えた、冷たいイメージ」を演出するのに、氷、ペンギンなどがよく使われます。

■夏休み

夏休み

セミ、金魚、蚊取り線香、浮き輪 浴衣、麦わら帽子、花火などが代表例。

子供用の商品・サービス訴求の場合は、このようなモチーフを使用するのが王道です。

可愛らしくポップなフォントと合わせて使うことで、ウキウキしたデザインになります!

■植物

植物

ひまわり、あさがお、ハイビスカス、ヤシの木、南国植物などが代表例。

ひまわり、あさがおは、身近にある夏を代表する植物です。

ハイビスカスなど南国の植物は、旅行や海外のイメージを表すときに使うことが多いです。

■食べ物

食べ物

スイカ、アイス、ソーダ、ビール、かき氷などが代表例。

夏らしい食べ物も、演出として使えます。スイカの赤と緑は補色関係にあるため、インパクト大! そのため、広告などでパッと目を引く効果が狙えます。

ただし、気を付けなければならない点があります。それは「赤×緑」と聞くと一番に挙がりやすい「クリスマス」のイメージ。

そのため、クリスマス風のイメージにならないように、「赤と緑の間に白を入れる」「種にあたる黒のドットをアクセントに入れる」など、他色をバランスよく入れて「スイカ」イメージをアップさせ、夏らしさを高めましょう。

■イベント

フェス

夏祭り、夏フェス、キャンプ、お盆、帰省などが代表例。

少し話は逸れますが、具体的なイベントの写真を使用する場合、ここ数年で特に気になるのが「写っている人の肖像権の問題」

そのため近年は、顔が写っていない写真や写真をイラスト化して使用することが増えてきています。

そのような時は、上画像のように、色や光の具合を駆使した「空気感」をイメージとして残し、使用するのもおすすめ手法のひとつです!

夏らしいデザインサイト実例

ではここからは夏らしさが素敵なデザインのサイト実例をご紹介します。

大塚製薬株式会社 ポカリスエット公式サイト

ポカリスエット
https://pocarisweat.jp/

夏らしい青と白で構成されている画面がとても美しいサイトです。

2本のペットボトルに合わせて弾けるような水しぶきが活き活きとした躍動感があります。

色数やモチーフを徹底して統一しながらもメリハリがあり、視認性が高く、「青」の使い方のお手本となるような素敵なデザインです。

西日本旅客鉄道株式会社(JR西日本)「夏列車 いっしょに見る夏 帰る夏」

JR
https://jr-natsuressha.jp/

ブルーのグラデーションと水彩のタッチが印象的なデザインです。

ギラっと光る真夏の太陽というよりは、記憶の中にある「夏の思い出」を喚起させるような、やさしく、ノスタルジックな雰囲気になっています。

水彩画の夏空を背景に夏のモチーフである麦わら帽子やひまわり、ハイビスカス、貝殻を配置するなど随所で夏を感じさせてくれます。写真と水彩画の合わせ方が美しいサイトです。

ハーゲンダッツジャパン株式会社「JuciyBAR マンゴー&ブラッドオレンジ」

ハーゲンダッツ
https://www.haagen-dazs.co.jp/mango_and_bloodorange/

トロピカルな色使いが素敵なサイトです。

主に「青×オレンジ」の組み合わせですが、重くなりすぎないように「青~白」へと計算されたグラデーションを使い、とても爽やかで心地良い印象になっています。

そのグラーションと対照的なのが、FV直下の「オレンジ~黄色~グリーン」のグラデーションです。

1方向からの色の変化ではなく、いろいろなところから光がふんわりと輝いているような、絵画的な色の変化が素敵です。

株式会社エフティ資生堂 「シーブリーズ 連続WEBドラマ『Pool side Destiny』」

シーブリーズ
https://matching.seabreezeweb.com/poolside_destiny

プールの水面が美しいデザイン。

メインタイトルの「Pool side Destiny」の文字が水面に映ったかのように歪ませてあったり、画面下半分の水面では写真が揺れ動くアニメーション効果が掛けられていたりします。

株式会社ルミネ ルミネ夏の手土産2019

ルミネ
https://www.ozmall.co.jp/especial/gourmet/19690/

青と黄色を基調にしたサイトです。色調は絵本を思わせるような、優しいトーンで統一されています。

下部分は3色の青の曲線が組み合わされており、波を表していることが端的に分かります。

さらには、のっぺりとした平面の色が続かないように、波の上にさりげなく青のドットが重ねられ、画面構成が軽やかになる工夫がされています。

シンプルながらも遊び心があるデザインです。

株式会社Oz link &STYLE VINTORTE

vintorte
https://www.vintorte.com/fs/vintorte/v-uvmk

影の使い方で、夏の強い日差しを連想させるビジュアル。

(南国系の植物も夏を連想させるモチーフと紹介しましたが、)この画像の中では植物そのものは登場しませんが、植物の影をうっすらと見せるさりげない工夫がされています。

夏を前面に押し出す色やモチーフを避けることで商品の世界観を際立たせながらも、同時に季節の空気感が込められています。 

株式会社テレビ朝日 「六本木ヒルズ夏祭り SUMMER STATION」

テレビ朝日夏祭り
https://www.tv-asahi.co.jp/summerstation/

三角形のデザインも、夏の光を抽象的に表現するデザインモチーフの一つです。

万華鏡のように華やかに形を変える、様々な色の三角モチーフで、キラキラした夏の楽しさが表現されています。

季節感が「今」の消費行動を促す!

実例を見ても、やはり「青」を主体としつつ、「水」や「光」をデザインに落とし込むことで、夏らしさを醸し出しているデザインが多かったように思います。

WEBの世界は、人と直接対面することがないからこそ、「今」を画面上で伝えることが「生きている情報」を伝えることになります。そのため、「今」をダイレクトに伝えるために非常に有効な「季節感」は、消費行動の喚起にも繋がります。

夏はいろんなイベントやモチーフがあるので、期間限定のサイトを見ているだけでも楽しいですよね。みなさんも季節感をうまく捉えたデザインを、ぜひ発見してみてください!