fbpx

As Best Creative, Do Everything For a Goal…

Blog 社員ブログ

BLOG

社員ブログ

Web制作
春を感じるwebサイトデザイン・配色の実例
2020/03/13

春をイメージしたデザイン(桜)
集客、ブランディング、情報発信、さまざまな目的があってWebサイトを制作していると思いますが、ずっと同じデザインではユーザーに飽きられてしまって思うような効果が得られないこともあります。

頻繁にリニューアルする必要はありませんが、たとえばシーズンごとに配色だけでも変更するなど変化を見せるといいかもしれません。今回は、春を感じるサイトデザインについて考察したいと思います。

目次

イメージどおりのサイトデザインは集客力につながる

季節を感じる要素の多くは、色の効果です。たとえば春を感じさせる色の組み合わせが分かれば、だれでも春らしいWebサイトデザインを作ることができるのです。

思いどおりのデザインが作れるということは、ターゲット層の好みに近いサイトを構築できるともいえるので、つまり見込み客を増やすことにも繋がります。ですから色の効果は、Webサイトを作るうえでとても大切なものなのです。

苺の赤が際立つ「Essence of Haagen-Datz」

Essence of Haagen-Datz

淡いピンク色の背景が、春を思わせるサイトデザインです。随所に置かれたイチゴの鮮やかな赤が、ページに彩りを添えています。文字にはえんじ色が使われており、白っぽい背景にコントラストが際立ち読みやすくなっています。赤やえんじ色は、背景のピンク色と同一色相のため、色同士がぶつからずになじんでいます。

また、サイトの上部に描かれた淡い黄色の曲線は、ピンクのアナロガス配色のため、差し色でありながら全体と調和し、柔らかい印象を与えています。透明な器や白いミルクも、デザインを邪魔せずに違和感なく溶け込んでいます。全体的に色の性質が統一されているため、まとまりのある仕上がりになっていますね。

背景の青と桜のコントラストが美しい「お~いお茶 2020年春特設サイト」

お~いお茶 2020年春特設サイト

青空のような水色の背景とピンクが全面に使われたWebサイトです。桜の花びらが画面にちりばめられており、春らしい華やかな見た目を演出しています。サイト上部に設置されている動画の最後には、淡い色の画面に濃いピンクの文字が現れ、視認性を高めています。

黄緑色の商品をこの配色の中に溶け込ませる必要があるため、空ははっきりした青ではなく徐々に緑色にグラデーションしているのがわかります。色が氾濫しないように色数は少なく、ですが使わなくてはいけない色味を上手くリンクさせることで世界観を損なわないまま必要な情報を表現しています。

大人っぽい雰囲気の「ワインショップ オルニス」

ワインショップ オルニス

チェリーピンクの背景が春らしい雰囲気を醸し出すWebサイトです。同一色相で明度の異なるワインボトルが幾つも描かれており、統一性を持たせながらも飽きのこないデザインです。

画面を下にスクロールすると、黒いワインボトルのシルエットが現れ、背景色とのコントラストの美しさが目を引きます。さらに、黒いボトルの中には明度の高い白い文字で新着情報などのおしらせが書かれており、色の対比で読みやすくなっています。全体的に同系色でまとめられているため統一感があり、また、明度の違いをうまく活かすことでシンプルで洗練された大人っぽいデザインに仕上がっています。

白い背景にカラーが映える「オンリーミネラル カラーパーティー」

オンリーミネラル カラーパーティー

白い背景にピンクやオレンジなどの明るい色彩が映え、春らしい華やかな印象を与えています。モデルの服や背景も、明度が高い白やベージュが使われており、統一感があって調和しています。

サイト下方の白黒写真には、ピンク色のリップとオレンジ色のチークが重ねられており、商品の鮮やかな色彩をより際立たせています。また、キャッチコピーなどの文章には明度が低くグレーに近い黒が使われており、対比により視認性が高まっています。化粧品がカラフルなため、それ以外の背景や文字の彩度を抑えることでバランスが保たれ、見やすく上品なサイトデザインに仕上がっています。

温かみのある色彩の「ロッテ ピンクバレンタイン」

ロッテ ピンクバレンタイン

ピンク色の背景に、赤、オレンジ、黄色などの暖色系が多く用いられており、春らしい温かみのあるデザインになっています。3人の少女の髪色や服装には、明度の低い黒系の色味が使われており、カラフルな背景と対照的で目立ちやすくなっています。

ページ下方に配置された商品のラインアップでは、帯状の白い背景がカラフルなチョコレートのパッケージを際立たせています。また、スタッフの紹介文は、白や薄いピンク色で構成された枠内に黒い文字で書かれており、明度の差によって文字を読みやすくしています。さらに、差し色の黄色や青は赤のトライアド配色になるため、変化を持たせつつも主張しすぎず、全体とうまく調和しています。

ピンクの同系色が華やかな「福岡ソフトバンクホークス タカガールサイト」

福岡ソフトバンクホークス タカガールサイト

福岡ソフトバンクホークスを応援する女性に向けた特設サイトということで、春らしさと女性らしさが感じられるサイトデザインです。ページには濃淡さまざまなピンクがふんだんに使われており、優しい印象を与えます。

主にピンク以外に使われているのはネイビーとグレー。単独だと暗いイメージやかっちりしたイメージを持った色味をピンクと合わせることでスタイリッシュに仕上げています。また、ピンク色に関しても彩度に変化を持たせることでマンネリ化を防ぎ、メリハリのあるデザインになっています。

シンプルで見やすい「桜十字看護部」

桜十字看護部

白い背景にピンク色の文字や枠がすっきりとしたデザインのサイトです。白地に書かれた黒い文字が見やすいことに加え、ピンク色の枠で囲むことにより、春らしく柔らかい印象を与えています。

ロゴについても、2枚の花びらを重ねたピンク色のシンボルが黒字で書かれた病院名と対照的でよく映えています。さらに「桜」の漢字の一部分をピンク色にすることで、実際の桜とイメージが重なり、名前を印象づけることにも繋がっています。白と黒のシンプルなデザインに、ピンク色の差し色に加えることにより、見やすさと華やかさを兼ね備えたデザインに仕上がっています。

カラフルで華やかな「プランプピンク」

コスメ

プランプピンク

薄いピンク色の背景に、黄、緑、青、紫といったペンタード配色が使われており、春らしい華やかな印象を持たせています。また、赤系のリップを、薄いピンク色の背景やモデルの肌色と合わせることにより、彩度の対比で目立たせています。

商品名やキャッチコピーには白や黒を取り入れることで、全体のカラーを引き締めています。中央のギャラリーの映像では、2色のリップの色と縞模様のカラーを合わせ、統一感を出しながら商品の色を印象づけています。カラフルな背景と動きのある画像を取り入れることで、豊富なカラーバリエーションを記憶させ、またターゲット層に興味をもたせたり、個性的に仕上げたりすることに成功しています。

ピンクと白が爽やかな「ファイブミニ」

ファイブミニ

背景には薄いピンク色と白、グレーが順番に配置され、全体的に爽やかな春らしい印象を与えています。商品の横に立つ仲里依紗さんの服にはピンクとオレンジが使われているため商品とうまく調和し、靴色はその商品の蓋と同じ色でアクセントになっています。

薄いピンク色の背景には明度の近い白でキャッチコピーが書かれているため、女性らしい柔らかな印象を感じさせます。それに、食物繊維とビタミンCといった成分が書かれたふきだしは、それぞれ濃いピンクと白の組み合わせを反転して使用しており、双方の視認性を高めています。ページ下方の2枚の写真にはうっすらとピンクのグラデーションをかけ、ドリンクのイメージや背景色のイメージと調和しています。

虹色のシャボン玉が浮遊する「マッチングエージェント」

マッチングエージェント

浮遊する淡い虹色のシャボン玉のようなモチーフが春らしい優しさを持ったWebサイトです。シャボン玉の色は変化し続けるため色が定まりませんが、背景が白いため、どの色とも違和感なく調和しています。また、キャッチコピーなどの文章は明度の低い黒色で統一されているため、背景のカラフルな色と混ざり合わずにくっきりと浮かび上がっています。それに、丸く切り取られた写真には縁取りがされていないため、白い背景や虹色のシャボンの色合いともなじみやすく、うまく溶け込んでいます。全体的に色数が多いですが、淡い色彩を使うことで背景の白と調和させており、上品な仕上がりになっています。

春のイメージは色の組み合わせ方次第

サイトデザイン企画

このように、基本的にピンク色、暖色系、淡い色合いなどが使われたデザインだと、春らしさを感じるWebサイトに仕上がります。同系色と合わせて調和を図ったり、差し色を使って変化を持たせたり、色の組み合わせ方によってさまざまな効果を得ることができるので、なにを使ってなにを強調させたいかを考えながら作成するといいでしょう。

SHARE

PLEASE CONTACT US

サングローブのサービスにご関心のある方は、
いつでも下記のボタンからお問い合わせください。

Go to TOP
Go to TOP