サプリLPのCVR改善レビュー｜キユーピー「飲むヒアルロン酸」の意味あるアニメーションを徹底解説

キユーピーのサプリLPのCVR改善｜レビューの概要

この動画では、キユーピーのヒアルロン酸サプリ（飲むヒアルロン酸）のランディングページ（LP）を題材に、UI/UX と CVR（コンバージョン率）改善の観点からレビューしている。

結論として、構成は一般的な健康食品のLPと同じでも、商品の「ぷるぷる感」を表す意味のあるアニメーションで見せ方を磨けば、まだ改善の余地があるLPだと評価されている。一方で、購入CTAの動きや2つのコースの並べ方、工場や機能性表示食品の訴求には検証の余地があるとされた。

・ファーストビューのアニメーションと落ち着いたトーン
・自社ブランド（IP）の活かし方と権威性の配置
・比較グラフやお悩みセクションの作り込み
・クーポンボタンの動きと2つの購入コースの並べ方
・機能性表示食品・自社工場の訴求の是非

を、ファーストビューから注文フォームまで順に検証している。

この動画の重要ポイント5つ

・文字や背景が「ぷるぷる」動くファーストビューは、派手な色に頼らず丁寧に作り込まれている
・下からふわっと出すだけでなく、方向や意味を持たせたアニメーションが飽きさせない体験を作っている
・権威性は「売れている」と「メディアに取り上げられた」に分け、悩みのセクションを挟む構成になっている
・クーポンボタンにまで同じ「ぷるぷる」の動きを付けると、押せる要素としては違和感がある
・機能性表示食品や自社工場の訴求は、知名度のあるブランドでは削ってABテストする余地がある

ファーストビューのUI/UX評価｜ヒアルロン酸らしい「ぷるぷる」の表現

ファーストビューでは、キャッチコピーの文字だけでなく背景のグラデーションまでが「ぷるぷる」と動き、ヒアルロン酸による潤いを直感的に伝えている。綺麗めのファーストビューでありながら、うるさすぎない丁寧な仕事だと評価された。

動画内では、訴求を強めようとするとビビッドな色でガチャガチャした見た目になりがちだが、落ち着いたトーンでも見せ方次第で十分に訴求できる好例だと議論されている。マヨネーズのイメージが強いブランドだからこそ、自社のIP（キャラクターやブランド資産）を使って「キユーピーが作っている」ことを伝えるのは有効だとされた。販売実績のカウントアップなど、数字の見せ方にも動きが付けられている。

アニメーションの作り込み｜意味を持たせた動きが飽きさせない

LP全体の構成は、いわゆる健康食品のLPと大きく変わらない。違いは見せ方で、要素が出てくる方向に変化を付けるなど、単調な動きになっていない点が評価ポイントとして挙げられている。とりあえず下からふわっと出すだけのアニメーションではなく、意味を持たせた動きになっているため、最後まで飽きずに読み進められる。

一般的なヒアルロン酸と、商品に使われているヒアルロン酸を比べる立方体のグラフでは、片方が水のように、もう片方がゼリーのようにぷるぷる揺れる。よくあるお悩みのセクションでは、背中に波紋が広がり、その位置も変わっていく。こうした素材は作り手の負担が大きいが、ChatGPTやGeminiなどの生成AIで部品ごとに作れるようになってきており、AIを使うべきところだと議論されている。どこまで読まれているかはヒートマップの熟読エリアや離脱率で確認できる。

権威性とお客様の声の配置｜目的ごとに分けて悩みを挟む

権威性は1か所にまとめず、「売れている」ことを示すブロックと、雑誌などに取り上げられた評判を示すブロックに分けて配置している。動画内では、権威性で悩みのセクションを挟む構成になっており、目的に応じた分け方は良いと評価されている。

お客様の声は「生のお声」という見出しで、前半では畳んだカルーセル、終盤ではリッチな見せ方に変えている。一般的なサプリのLPのようにインフルエンサーの画像を多用していない点も特徴として挙げられた。一方で、メカニズムの説明（体内で吸収されて肌に届くことと、体内でヒアルロン酸をつくる働きを弱めないこと）は科学的な内容で分かりにくく、言い回しを変える余地があるとされている。

CTAと購入コースの課題｜クーポンにぷるぷる感は要らない

本文のアニメーションの完成度が高いぶん、CTA（クーポンボタン）の動きが気になったと指摘されている。押せる要素にまで「ぷるぷる」の動きを付けると違和感があり、クーポンであれば一定間隔で光らせるほうがよいのではないかという意見が出た。説明部分で凝ったアニメーションを使っているのに、CTAで急に見せ方が落ちる印象がある点も挙げられている。

購入エリアには、1袋の単品購入と2袋の定期購入の2つのコースが縦に並んでいる。デザインの構成がほぼ同じため違いが分かりにくく、上下を行き来して見比べる必要がある。「1袋コース／2袋コース」が一目で分かるよう上部で示す、タブで切り替える、2カラムで並べるといった改善案が挙げられた。まずお得さを見せたうえで「もっとお得に」と続ける意図の構成である可能性もあり、ABテストで検証してほしいポイントだとされている。

機能性表示食品と自社工場の訴求｜知名度のあるブランドでは削って検証

選ばれる理由のセクションでは、こだわりの1つとして機能性表示食品であることを訴求している。動画内では、伝えたい側としては訴求したくなるものの、それを見て購入を決める人は少ないのではないかと議論された。LPで大きな面積を割くほど本当に刺さっているのかは、一度立ち止まって振り返る価値があるとされている。

開発者の紹介や自社工場、安心・安全の訴求についても同様で、無名のブランドであれば工場を見せることが信頼性の担保になるが、キユーピーほど知名度があれば前提として伝わっている可能性が高い。LPの制作過程で「長くしなければならない」という固定観念がありそうだとして、削ったパターンをABテストしてみてほしいと提案されている。

表示速度の評価｜アニメーションが多くても重くない

このLPはecforceで構築されており、動画やアニメーションをecforceのサーバーで配信している。それでも表示速度が落ちていない点は、細かいが注目すべきポイントとして挙げられた。アニメーションを多用するLPでは、表示速度の低下がそのまま離脱率の悪化につながるため、リッチな表現と速度の両立は重要だ。

よくある質問（FAQ）

Q. LPにアニメーションを入れるとCVRは上がる？

A. 動画内では、アニメーションの数ではなく「意味を持たせているか」が重要だと解説されている。キユーピーのLPのように商品特性（ぷるぷる感）を表す動きや、出てくる方向に変化を付けた動きは飽きさせない体験につながる。一方、押せるボタンにまで同じ動きを付けると違和感が出るため、要素ごとに使い分けたい。

Q. サプリのLPで権威性はどう配置すべき？

A. 1か所にまとめるより、「売れている」ことと「メディアに取り上げられた」ことのように目的ごとに分け、悩みのセクションなどを挟んで配置する構成が紹介されている。ブランド自体の知名度が高い場合は、自社工場などの訴求を削ってもCVRが落ちないかをABテストで確かめるとよい。

Q. 単品と定期の購入コースはどう見せるべき？

A. 同じデザインで縦に並べると違いが分かりにくく、ユーザーが行き来して見比べることになる。コースの違いを上部で示す、タブで切り替える、2カラムで並べるといった見せ方が改善案として挙がっている。どれが効くかは商品や顧客層によって変わるため、ABテストでの検証が前提になる。

まとめ｜一般的なサプリLPも見せ方次第でCVR改善の余地がある

キユーピーのヒアルロン酸サプリのLPは、構成こそ一般的な健康食品のLPと同じだが、商品特性を表す意味のあるアニメーションと落ち着いたトーンで、リッチで飽きさせない体験を作っていた。派手さに頼らない見せ方は、多くのLPが見習うべき点だとされている。

一方で、クーポンボタンの動き、2つの購入コースの並べ方、機能性表示食品や自社工場の訴求の面積など、検証の余地も見えた。こうした仮説はABテストやヒートマップで確かめながら改善するのが近道だ。サプリや健康食品のLPでCVR改善に取り組むマーケターは、キユーピーのLPの見せ方を参考にしてみてほしい。