ワンクリックに命がけのWEB・ホームページ制作会社「エムハンド」

インバウンドサイトを作るときに知っておきたいこと

【WEBデザイン10選】季節感の表現いろいろ!参考になる2015「夏」サイトまとめ

  • WEBデザイン

梅雨も開け、いよいよ夏真っ盛りという感じの今日この頃。WEBの世界でも、夏の商品やサービスのために作られた特設サイトや、夏をテーマにしたキャンペーンページなどが次々とオープン!今、まさに夏サイトが出揃ったという感じです。季節感に溢れる表現には「今だけ」の特別感があって、私たちの心を浮き立たせてくれますよね。

そこで、今回のWEBデザイン10選では「夏」をテーマにした、季節限定のクオリティの高いサイトを厳選してご紹介したいと思います。ビジュアル表現だけではなく、切り口の参考になるサイトもピックアップしていきますので、ぜひ参考にしてください。

夏向け商品やサービスの季節限定サイト

夏はメークでスイッチオン!キャンペーン

01http://www.shiseido.co.jp/cms/wp/cp/

業種:化粧品メーカー
サイトの特徴:1カラムデザイン

「1パーツだけ変えて、夏メークにスイッチオンしよう」という、資生堂の夏のキャンペーンサイトです。背景に敷かれた水色と白の太めのボーダーが爽やかな夏らしさを表現。差し色として使われているビビッドなピンクと黄色が、とてもよく効いています。メークのビフォー・アフターを矢印のスライドで徐々に切り替えていけるようになっていたり、動画コンテンツもたくさん使われていたり…と、縦長の1ページの中に楽しく見ることができる仕掛けがたくさん盛り込まれています。メーク提案から商品紹介、キャンペーン応募まで、1カラムでうまくストーリーが構成されたサイトです。

なつ古典(AEON YUKATA2015)

002http://www.aeonretail.jp/yukata/

業種:小売
サイトの特徴:背景全面画像

夏の思い出をつくってくれるおしゃれアイテム、イオンの浴衣のキャンペーンサイトです。モデル着用の大きな写真を並べて、ファッションショーのように商品を訴求。それを着た時の自分がどう見えるかが、しっかりとイメージできるつくりになっており、「手頃な値段で、でも可愛く見せたい」という、ターゲットの気持ちを上手く受け止めたデザインがなされています。詳細ページではその浴衣に合う帯や下駄、手提げ、髪飾りなどのコーディネートアイテムも提案。見ているうちにセット買いしたくなりそうな、購買意欲が高まるサイトに仕上がっています。

MIZUGI 2015(イオンの水着)

003fashion.aeonsquare.net/mizugi

業種:小売
サイトの特徴:SNSと連携

こちらはイオンの水着のサイト。同じ夏のアイテムのキャンペーンサイトでありながら、企画もデザインも浴衣のサイトとはまたひと味違う仕上がりになっています。今年のイチオシ商品、バンドゥビキニを着た12人のモデルの写真をインスタグラム(写真SNS)に投稿。その投稿と連動させたサイトになっています。モデルをファッショニスタとして紹介することで、トレンド感を演出。それぞれのインスタグラムにもリンクさせるなど、ソーシャルを上手く活用した展開になっており、今っぽいつくりのキャンペーンサイトとしても参考になります。

ユニーお中元「夏の贈りもの」

004http://www.uny.co.jp/sp/summergift/

業種:小売
サイトの特徴:漫画・イラスト

実際に連載中の漫画の主人公、美味しいご飯とお取り寄せを愛する「おとりよせ王子」をキャラクターに使い、特選グルメアイテムを紹介するお中元のキャンペーンページです。ページ全体を漫画風にデザインし、それぞれのコマにマウスを乗せると、「ゴクン」「ワクワク」「どーん!!」などのいかにも漫画らしい文字がマウスに追従。夏っぽく、爽やかで美味しそうなグルメ商品も、漫画のコマ割りの中にレイアウトされることで、単に四角く並べられたのとは違う躍動感のある仕上がりになっています。背景に薄く使われた麻の葉模様のパターンや、ポイントに使われた水色が涼しささを感じさせてくれます。

夏季限定醸造生ビール「夏いちばん」オリオンビール

005http://www.orionbeer.co.jp/brand/natsuichiban/

業種:飲料メーカー
サイトの特徴:グリッドデザイン

オリオンビールの夏季限定醸造ビール、その名も「夏いちばん」を訴求するための特設ページです。商品パッケージ(缶)のデザインを、そのままWEBページのデザインにしたような表現は、印象に残りやすく、店頭やCMとの連動性が計算されたつくりになっています。夜空に浮かぶ花火とCMに出演している女優さんをメインビジュアルに、全体が濃紺の色味でまとめられており、実際に花火を見ているようなシズル感たっぷり。コンパクトながら見飽きることがない完成度の高いページです。巧みなグリッドデザインで、動画コンテンツもデザインの中に違和感なく組み込みまれており、1ページでスッキリと夏っぽさを伝えています。

夏のイベントやキャンペーンの訴求サイト

サントリー オールフリー「夏は昼からトート」キャンペーン

006http://www.suntory.co.jp/beer/allfree/campaign2015/

業種:食料品
サイトの特徴:1カラムデザイン

ノンアルコールビール、オールフリーを買ってシールを集めるとトートバックが当たる、というキャンペーンのサイトです。「夏は昼からトート」という、かわいらしい手書き文字のキャッチコピーやイラストなど、サイト全体が夏の昼のビーチでのんびりと自由に過ごすイメージでデザインされています。「昼から」という言葉が戦略的に使用されており、キャンペーンそのものが、ノンアルコールビールだから楽しめる季節ならではの飲み方、楽しみ方の提案になっています。30種類もあるトートバックのデザインも、クリックによる詳細情報表示だけでなく、スライダーやタブを使った切り替えなど様々な見方を提供しており、1ページ内でうまく見せる工夫がなされています。ワンカラムデザインで明確にキャンペーン内容を伝えている、完成度の高いページです。

オリックス・バファローズ Bs夏の陣2015

07http://www.buffaloes.co.jp/expansion/natsunojin2015/

業種:スポーツ
サイトの特徴:レスポンシブWebデザイン

オリックス・バファローズ夏のビッグイベント「Bs夏の陣」のキャンペーンサイトです。オリジナリティーのあるロゴを取り巻くように選手たちをレイアウトしたファーストビューからは、ダイナミックでハイテンションな夏の戦いの熱いイメージが伝わってきます。盛り沢山なコンテンツがあるサイトですが、滑らで美しいレスポンシブWEBデザインになっているところも秀逸。他にも、参加型のソーシャル連動コンテンツとしてインスタグラムを活用したイベント写真集を展開するなど、企画面でも参考にしたい要素が盛り沢山のサイトです。

フジテレビ「FNSうたの夏まつり」

007http://www.fujitv.co.jp/FNS/2015s/

業種:情報・通信
サイトの特徴:ポリゴンデザイン

フジテレビの夏の特番のサイトです。ゴールドのロゴがシンボリック。夏を象徴する「ひまわり」とト音記号をモチーフあしらったデザインは、「うたの夏まつり」を表現しています。コンテンツ内容は情報をシンプルにまとめたものですが、ロゴを大きく入れるだけでイベント感を漂わせることに成功しています。ファーストビューの上部には光を受けた水面を感じさせる背景、その下のコンテンツ部分には氷のように見える涼しげなブルーのポリゴンデザインの背景が使われており、夏の雰囲気をページ全体に演出しています。

東京ディズニーランド「ディズニー夏祭り」
東京ディズニーシー「ディズニー・サマーフェスティバル」

008http://www.tokyodisneyresort.jp/special/summer2015/top.html

業種:アミューズメントパーク
サイトの特徴:グリッドデザイン

東京ディズニーランド、東京ディズニーシーの夏のイベント紹介ページです。上部のタブでそれぞれを切り替えられるようになっており、楽しさを比べて選ぶこともできる構成。同じ夏というテーマでも、ディズニーランドの「ディズニー夏祭り」ではフォントや背景画像、あしらいを和風なものにして家族で楽しめるお祭り感を演出。一方、ディズニーシーの「ディズニー・サマーフェスティバル」ではトロピカルなモチーフで南国の陽気な雰囲気。それぞれのイベントコンセプトに合わせて、テーマパークらしい臨場感のあるページデザインを行っています。

MF文庫J 夏の学園祭2015

009http://bc.mediafactory.jp/bunkoj/fes2015/

業種:出版社
サイトの特徴:イラスト(アニメキャラクター)

ライトノベル系文庫レーベル「MF文庫J」の夏のイベントサイトです。トップページいっぱいに配置されたキャラクターたちのインパクトが、イベントへの期待感を高めてくれます。ページの読み込み時に最初に表示される揺れる波紋のビジュアルが夏を感じさせ、下層ページにも共通して使われています。その色味に合うビビッドな幾何学模様やストライプ、ドット柄などが、随所にうまく使われており、細かな部分まで計算されたデザイン性の高いサイトに仕上がっています。

今回のまとめ

以上、今回は、「夏」に関連した切り口のサイトを集めてみました。いかがでしたでしょうか。同じ夏をテーマにしたサイトであっても、デザインやトンマナはさまざま。「夏っぽさ」と一口に言っても、ターゲットや企画によって表現の仕方はいろいろあることや、キャンペーンの組み立てや、コンセプトを考えて制作することで、より効果的な季節サイトが作れるということをあらためて感じました。今回ご紹介したサイトが、みなさんのご参考になればうれしく思います!

<関連記事>

【WEBデザイン10選】コンバージョンUPにも!パララックスを効果的に使ったLPまとめ

【【WEBデザイン10選】シンプルでわかりやすい「1カラム」サイトまとめ

【WEBデザイン10選】背景に動画を大胆に使った日本のサイトまとめ

この記事に関連する記事

カテゴリー

アクセスランキング

月間

  1. 1

    いまさら聞けない!フリック、スワイプ…スマホ操作の基本用語まとめ

  2. 2

    今どきの幼稚園・保育園ホームページ研究。32サイトに見る傾向と課題とは?

  3. 3

    【WEBデザイン10選】これぞ進化系!今どきのレスポンシブWEBデザインサイトまとめ

  4. 4

    「プッシュ通知はアプリのもの」は過去の話。簡単にできるブラウザでプッシュ通知する方法

  5. 5

    【WEBデザイン10選】シンプルでわかりやすい「1カラム」サイトまとめ

  6. 6

    【保存版】アツイ視線が集まる激戦区!女性向けWEBメディア50選

  7. 7

    【WEBデザイン10選】雑誌風デザインを上手く取り入れたWEBサイトまとめ

  8. 8

    結果につなげるLINE@活用。最新集客事例に学ぶ成功の6つのポイントとは?

  9. 9

    【WEBデザイン10選】効果的に動画を使ったキャンペーン、プロモーションサイトまとめ

  10. 10

    【WEBデザイン10選】背景に動画を大胆に使った日本のサイトまとめ

総合

  1. 1

    いまさら聞けない!フリック、スワイプ…スマホ操作の基本用語まとめ

  2. 2

    【保存版】アツイ視線が集まる激戦区!女性向けWEBメディア50選

  3. 3

    【WEBデザイン10選】これぞ進化系!今どきのレスポンシブWEBデザインサイトまとめ

  4. 4

    初めてでもできる!iPhone動画編集アプリ【厳選4つ】

  5. 5

    【WEBデザイン10選】コンバージョンUPにも!パララックスを効果的に使ったLPまとめ

  6. 6

    【WEBデザイン10選】シンプルでわかりやすい「1カラム」サイトまとめ

  7. 7

    【事例に学ぶ】話題の新興SNS、Instagramを集客に使うコツ

  8. 8

    今どきの幼稚園・保育園ホームページ研究。32サイトに見る傾向と課題とは?

  9. 9

    【WEBデザイン10選】背景に動画を大胆に使った日本のサイトまとめ

  10. 10

    【WEBデザイン10選】雑誌風デザインを上手く取り入れたWEBサイトまとめ

エムハンドブログ編集部

  • 編集長みつむね

    得意分野はWEBマーケティング/コンテンツ編集。「インバウンドブログ」立ち上げから編集に参加。

  • 伊藤 高啓

    SNS運営からWEB広告/マーケティング業界を経て、鳴り物入りでエムハンドブログ編集長に就任。

  • 新棚幹太

    雑誌出版社を経てフリー編集者に。東京生まれ、京都暮らし4年目のオールラウンドライター。

  • 島田

    某グルメ雑誌の編集長を経て、業界違いのWEBへ転身。独自の視点で個性的な記事を手がける。

  • ヨネクラ

    WEBメディアの立ち上げに参加したくエムハンドライティングチームに参加。早稲田大学出身。

  • キクチ

    京都大学卒業後、京都大学院工学研究科に進学。研究を続けながらライター業に従事。

  • 池田仮名

    週末Webプランナー。情報システムの発展によって変化していく人の心や共同体のありかたに興味。

最新記事

  • M-HAND 士業
  • M-HAND 歯科
  • Logonic
  • M-HAND TechnicalBlog

ワンクリックに命がけのホームページ制作会社「エムハンド」