こんにちは。ディレクターの竹根です。
梅雨が終われば、もうすぐ夏ですね。「おっ！」と思わせるデザインや、旬のデザイン、参考にしやすいデザインであれば、時間を忘れて見てしまいます。
今回は、夏目前ということで、夏らしいデザインをスマホ版も含めてご紹介します。
ALLIE（カネボウ化粧品）
白い肌の北川景子さんと、みずみずしさを表現した日焼け止め。
トップの動画で伸びの良い使用感、ウォータープルーフなど、訴求したい内容がすべて表現されています。
動画は人の目を引くことが出来ると同時に、画面遷移せずにアピールできるため、多くのWebサイトで使用されている手法ですね。
長く使われている「絶対焼かない人に」というメッセージ性の強いキャッチコピーが、白い肌にあこがれる女性としては魅力的。
アクエリアス/AQUARIUS（日本コカ・コーラ株式会社）
太陽の光を背景に、水しぶきをあげた、夏らしさ・すっきり感・爽快感が伝わってくるビジュアル。
アクエリアスを飲めば、夏をさわやかに過ごせそうな気がします。
メインビジュアルにはスライドショーを使用していますが、切り替えの速さやタイミングが気持ち良く、視覚での訴求がうまくできています。
スマホで使い回しが出来るよう、最低限のコピーでバナーが構成されており、更新負荷を下げる工夫がされています。
サイト全体で水色など青系で統一されており、ユーザーも気分さわやかに閲覧できますね！
星のや軽井沢 HOSHINOYA Karuizawa
写真が主役のサイトです。
画像が美しく栄えるよう、白背景でコントラストを高めています。
四季折々、また様々な時間帯の様子を描いた風景写真を使用しているので、これだけで、どの季節、どの時間でも楽しめそう。
画面の小さいスマートフォンでも、全面に画像を表示させることにより雰囲気を十分に伝えられています。
機能的、デザイン的にも良いと思ったところが、メニューと予約ボタンの固定です。
幅いっぱい、グローバルナビゲーションを上部固定でスクロールするサイトはよく見かけますが、左右それぞれにボタンを一つずつ配置し、画面は広く見せつつユーザビリティやコンバージョンを考慮したデザインになっています。
写真を大きく見せるための工夫でもあり、シンプルですがとてもいいデザインです。
もっと野菜を。もっと食卓に。（キユーピー株式会社）
野菜だけに、まさにビタミンカラーで構成されたサイト。掲載されている野菜もみずみずしく、もっと野菜を食べたい！ と気持ちが高まります。
また、トップページだけでなく、すべての写真がおいしそうに撮影されています。
こちらのサイトは春夏秋冬の野菜を紹介していますが、カラフルでみずみずしく、元気な夏らしいサイトです。
ポカリスエット イオンウォーター（大塚製薬株式会社）
商品と背景を同系色とすることで一体感を持たせ、爽やかなイメージを作り出しています。
また、白くて透き通った肌に白シャツを着用した女性（森川葵さん）の清楚なイメージが涼しげな印象です。
ページ中程には水流のイメージ画像もあり、イオンと潤いが感じられる「健康によさげ」なデザインとなっています。
SWIM INC.
サイトデザインはシンプルですが、メインビジュアルの水着のカラー、モデルのポーズに強烈なインパクトがあります。
サイト名が「SWIM INC.」であることと、水着を着用した女性をメインに表示しているので最初はスイムウェアのブランドかと思いましたが、制作会社のサイトです。ギャップがあって、かなり印象に残りました。
右上のNavigationボタンをクリックし、各項目にマウスを乗せるとアニメーションが背景に流れるなど、サイト内でかなり凝った部分が見受けられます。いろいろ参考にできそうです！
チチカカ
第一印象は賑やかで楽しい！
- カラフル
- メイン画像に笑顔の人がたくさん
- グローバルナビゲーション下にちょこちょこ動くキャラクター
楽しくなるポイントがぎゅっと詰まっています。
ブランドのコンセプトである「Play COLORFUL! Share HAPPINESS!」が、うまくサイトに反映されており、見ているこちらも楽しくなります。
ANA鳥取美人物語
一番良いなと思ったところが、ローディング。
サイトが表示されるまでのローディングのあいだ、ただ「LOADING」テキストが表示されるだけでなく、物語のプロローグのようなイメージをスライド表示しています。
こうすることにより、ローディング時間の長さも気にならないですし、サイトからの離脱を防ぐことも期待できます。何より、わくわく感を誘発できますね。ローディングを少し工夫するだけで、サイトが大きく改善されるかもしれません。
旅行サイトの目的は「そこに行きたいと思わせる」こと。
このANA鳥取美人物語は、風景だけでなく、人の笑顔や優しさ、その場所に行けば元気が出る、ほっとする、気持ちよくなれることまで伝わってきます。
ユニーお中元
ファーストビューからかなりインパクトのあるサイトで、何かおもしろそうなものがあるかも？ とわくわくします。
画像をマウスオーバーすることにより、効果音がマンガの「書き文字」で表示され、画像によって出てくるものが違います。さらに、マウスに追従するので、ついついいろんな箇所をマウスオーバーしたくなります。
カラーはブルーを使用して、背景の和柄も涼しげ。
そうめんやアイスなどの商品がとても合い、スイカやお肉などの赤い色も映えています！
今までお中元というと堅苦しいイメージがありましたが、マンガを使うことで身近に感じられ、今年はおとりよせ王子をお手本に、「大切な人にお中元を贈ってみようかな」という気持ちになりました。
さいごに
夏は暑いから涼しくなりたい！ という考えからでしょうか、全体的に涼しさを感じられるホワイトやブルー系のサイトが多いですね。
水しぶきを用いたり、風でなびいている様子を映したり、涼しさを演出する工夫が多く取り入れられています。
夏だからこそ、元気にパワフルになれる！ カラフルなサイトも夏らしく、とても素敵です。
動きをアクセントに、見ているこちらもウキウキ元気になります。
また、どのサイトもPCはもちろん、スマホでも共通して写真が美しく、大きく表示されています。
写真は「そこへ行ってみたい」「食べてみたい」「贈りたい」というユーザーの意欲をかき立てるのに、最適なツールです。
せっかく使用するのであれば、綺麗な写真が良いですね。
ご紹介したサイトはどれも季節に合わせて美しくデザインされており、私の気持ちは涼やかに、元気に、心高まりました。美しいサイトは目の保養になります！
以上、PCもスマホも美しい、夏のWebサイトデザインでした。
参考になれば幸いです。
