8.　アサヒ飲料株式会社　「カルピス」ブランドLPサイト #1日1サイトレビュー

こんにちわ、ayakaです。

今回は、アサヒ飲料株式会社の「カルピス」ブランドLPサイト「放課後カルピス🄬」をレビューさせていただきます！

放課後カルピス®

サイト選びは下記から行いました。

LPデザインに参考になるランディングページ集｜LP advance

レビュー

⓪このサイトを選んだ理由: 

・オリジナルドラマを通じてブランドを宣伝する形式を初めて拝見し、新鮮味を感じたため。

・この宣伝形式を取ると、どういうLPサイトを作成することになるのかを知りたくなったから。

・動画を用いたサイトデザインの引き出しを増やすため。

① サイト概要:

・カルピスブランドのオリジナルドラマの概要紹介

　ーエピソード紹介

　ー登場人物とキャスト紹介

　ースタッフ紹介

・カルピス商品の紹介

・Twitter・Instagramアカウントの紹介

② 目的:

・YouTubeやTwitterでドラマの存在を知った人に対し、ドラマの詳細情報とカルピス商品を紹介するため。

・上記を通じて、10代・20代女性の熱いカルピスファンを増やし、日常的にカルピス商品を購入する人を増やすため。

③予想ターゲット層:

・YouTubeやTwitterでドラマの存在を知り、その詳細情報を知りたいと思っている、恋愛・短編ドラマ好きの10代・20代の女性

ーペルソナ例

〇年齢/性別/職業:

16歳/女性/高校生

〇最近はまっていること:

AbemaTVやYouTubeで恋愛ドラマを見ること

〇カルピスのドラマのHPを見つけたきっかけ:

YouTubeで「恋愛ドラマ」と検索すると、カルピスのドラマが上位３番目に出てきたので、１話分見てみると興奮が止まらず夢中になった。ドラマのキャストやテーマ曲などの詳細情報を知りたくなり、HPにアクセスした。

④全体の印象:

・「カルピス＝白と青」というベースの印象を維持しつつ、画像においてベースの色と自然に馴染む色(ベースの色と同じ明度・彩度でかつ、異なる色相)を選択して加えているので、「カルピス＋青春」が心に定着するデザインであると感じた。

・コンテンツの掲載の順番がエピソード動画、あらすじ、キャスト・スタッフ紹介、カルピス商品紹介となっていて、閲覧者が行いそうな思考を先読みして作られているサイトだと感じた。

・iOS版で上下にスクロールするごとに、キャスト写真やカルピス商品写真、装飾のサッカーボール等のサイト内の画像が上下に弾むように動く演出にワクワクした。特にサッカーボールが上下に弾む演出に鳥肌が立った。青春を感じた。

⑤配色/フォント/余白:

配色:

白・青・緑・黄色・オレンジ・ピンク

・背景: 白

・ファーストビュー: 青・緑・黄色・オレンジ・ピンクのグラデーション

・その他エピソード・キャスト・商品紹介の画像: 白以外の５色のうち単色又は２色のグラデーション

フォント:

・ファーストビューから商品紹介コンテンツまでにおける英文字部分: Roboto

・フッダー: Arial

・上記以外全て: Noto Sans JP

余白:

・サイトの長さをコンパクトにするために、各コンテンツ間の余白が狭く設定されている。

・上記に伴い、各コンテンツ内で余白が広いと、どの部分が１まとまりかが分からなくなるリスクが生じたと考えられる。

・そのリスクを解消するために、コンテンツタイトルとその下の概要文との間や、エピソード紹介の各動画とその下の概要文の間を狭くするなど、１まとまりとなる部分は余白を狭く設定されている。

・各コンテンツの間の余白が狭い状態で、ページ内での各コンテンツの範囲がすぐに分かるように、各コンテンツの内容を連想させる画像(キャスト紹介は出演者の写真、商品紹介はカルピスウオーターの写真など)を大きく表示し、手書き風キャッチコピーを大きく出している。

⑥競合サイト: 

ポカリ、あげなきゃ。｜ポカリスエット公式サイト｜大塚製薬

ビタミン炭酸MATCH（マッチ）公式サイト

⑦今回のサイトレビューから学べる事:

カラー:

・ブランドのイメージを維持しつつ、プラスαのイメージをサイトで表現するには、背景色やナビゲーション、フッダー等の基本的な要素をブランドのイメージカラーに設定し、それ以外の部分でブランドカラーと同じ明度や彩度であり、かつ色相が異なるカラーに設定する方法があること。

今回のサイトだと、カルピスのカラーである白と青について、白が背景に利用、青系の色がフォントやナビゲーション・SNSリンクボタン等に利用されいる。つまり、カルピスのカラーがサイトの基本要素に用いられている。

それに加え、キャストやカルピス商品の画像で、ベースである白・青と同じ明度・彩度で緑・黄色・オレンジ・ピンクも利用されている。

・ブランドカラー(青)と恋愛を連想させるピンクを用いることで、「カルピス×恋愛」というように、ブランドと恋愛のイメージが組み合わさった雰囲気をサイトで演出できること。

・グラデーションで赤・黄色・青系を用いるとき、左から青・黄色・赤という形で用いると、色を左から見て青から赤に近づくごとに、色の効果で自然と穏やかな状態から興奮状態にさせることができ、ワクワクしてサイトをもっと見たいと思ってもらえること。

・ファーストビューの大きな存在感を演出するには、ファーストビューで３色以上の色のグラデーションを表現し、その後の画像などはグラデーションを２色までにすることが有用。

レイアウト:

・コンテンツの掲載の順番を考えるときは、閲覧者が行いそうな思考を予想した上で、それに沿った順番でコンテンツを配置することが、サイトをスクロールした多く見てもらうために重要であること。

・PC版・iOS版のサイトにおいて、文章の色と画像の色が類似しているとき、文章が隣の画像に食い込んた場合に、文章の一部が読めないという問題が生じる可能性がある。

それを防ぐために、画像と文章の色を似た色にしないこと、又は文章が画像に食い込まないようにテキストを設定する等の工夫が必要であること。

フォント:

・Arialは入力フォームだけでなく、フッダーとして用いられるケースもあること。

・Robotoは英文字に用いられやすいこと。

UX要素:

・サッカーボール等の部活動で用いそうな小道具をただ静止画で表示するだけでなく、動かす演出もすると更に学生の青春を強く表現できること。

・商品画像が弾むように動く演出をすることで、商品に対するワクワク感が増し、商品の印象付けを促進できること。

その他:

・検索エンジンからの流入者に向けたLPだけでなく、TwitterやYouTubeからの流入者を想定したLPサイトも存在するということ。

PC版サイトの外観

iOS版の外観

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