商品数の多い EC には、共通の悩みがあります。新商品が出るたびに LP が要る。
味違い、サイズ違い、期間限定。1 つ出すたびに制作会社へ見積もりを取り、数週間待つ。その間に販売のタイミングは過ぎていきます。かといって LP なしで出せば、商品ページだけで売ることになり、新商品の勢いを作れません。
プロテインメーカーのアルプロンは、新商品のサイクルが速い会社でした。その速度を落とさないために、LP を 1 枚ずつ作るのをやめて、型を作りました。
この記事は事例の一部です国内のプロテイン/サプリメントメーカー、株式会社アルプロンの EC 事業再建(2021〜2022 年)のうち、商品 LP の作り方を書いています。humbulls がオンライン事業部の統括を受託していた時期の仕事です。広告費を 8 割削って EC 売上を前年比 130% にした案件で、この LP はその中の制作まわりの話です。 アルプロン 導入事例の本編を読む →
型にするために決めたこと
1. 色を変数にする
デザインの指定書には、6 色のカラースキームが並んでいます。メインカラー、プレーンカラー、ポイントカラー、背景色 2 種、シャドウカラー。そして赤字でこう書かれています。
カラースキームの色変更ができるよう構築お願いいたします。
苺味ならピンク、抹茶なら緑、チョコならブラウン。商品が変われば色が変わる。ここを変数として切り出しておけば、次の商品は色の指定だけで見た目が切り替わります。
デザインを作り込むときに一緒に決めるのは、色そのものではなく色の役割です。どこがメインで、どこがアクセントで、どこが背景か。役割さえ決まっていれば、値は差し替えられます。
2. PC とスマホを 1 枚で設計する
指定書では、PC 表示とスマホ表示が同じ 1 枚の中に並べて設計されています。別々のデザインを 2 つ作るのではなく、同じ構造の見え方違いとして扱う設計です。
商品 LP は、流入の大半がスマホです。それでも PC を捨てられない。両方を別々に作れば、更新のたびに 2 か所直すことになります。1 枚で設計しておけば、テキストを直せば両方に反映されます。
3. 差し替える場所を、最初から決めておく
指定書の中には、こういう注記が入っています。
バナー1 → 内容は随時差し替え
バナー2 → 内容は随時差し替え
どこが固定で、どこが可変かを、作る時点で明示してあります。ここが曖昧だと、運用に入ってから「この部分は触っていいのか」と毎回確認が発生します。
商品説明のブロックも、見出し + 画像 + テキストの組み合わせを繰り返す構造にしてあります。成分の訴求が 2 つの商品と 4 つの商品があっても、ブロックを増減するだけで対応できます。
当時の指定書。配色を6つの役割に分けて定義し、「カラースキームの色変更ができるよう構築お願いいたします。」と赤字で書いています。1枚のLPを作るのではなく、差し替えで展開できる型として発注していました。
出典: 2022年8月の LP デザインファイル
型にしなかったもの
すべてをテンプレート化したわけではありません。
商品ごとの世界観の作り込みは、毎回やっています。苺味の LP なら、フリーズドライの苺の質感、イチゴミルクの色、「サクサクした食感」という言葉。ここを共通化すると、どの商品も同じ顔になり、LP を作る意味がなくなります。
型にしたのは構造で、差し替えるのは中身です。この線引きを間違えると、テンプレートは「安っぽい量産ページ」になります。
PC と SP を一体で組んだレイアウト。バナー枠には「随時差し替え」と注記があり、運用で触る場所と触らない場所を最初から分けています。
何が変わったか
新商品を出すときの工程が、ゼロからの制作ではなく差し替えになりました。
型なしの場合: 要件整理 → 見積もり → デザイン → 実装 → 確認。この工程を毎回通して、体感で 1 か月ほど。
型ありの場合: 色を決める → 商品写真と説明テキストを差し替える → 訴求ブロックの数を調整する。この 3 手順で、2 週間ほどになりました。
この短縮が効いて、月に 1 本のペースで新フレーバーをリリースできるようになりました。制作が追いつかないから新商品を出せない、という詰まりが消えたということです。
展開したのは苺だけではありません。チョコチップ、バナナチップ。さらにチップとフレーバーを別々に組み合わせることで、掛け算で商品が増えていきます。杏仁豆腐フレーバーに苺チップという組み合わせは、その中でも人気がありました。
組み合わせで商品が増える商材ほど、1 枚ずつ作っていては追いつきません。型があると、商品企画の自由度がそのまま出せるようになります。
ちなみに、この掛け算で生まれた組み合わせのいくつかは、いまも定番として残っています。杏仁豆腐風味にイチゴチップという組み合わせも、4 年経った現在の商品ラインナップに並んでいます。
この考え方が向くとき
- SKU が多く、味違い・サイズ違いで商品が増える
- 新商品のサイクルが速い
- LP の制作待ちが、販売タイミングのボトルネックになっている
逆に、商品数が少なく 1 つ 1 つの単価が高い商材なら、毎回作り込むほうが合っています。型が効くのは、同じことを繰り返す回数が多いときだけです。
なお、同じ時期に BtoB 向けのサービス LP も作っていますが、そちらは作り方がまったく違います。市場と顧客を切り分けるところから始めて、1 枚だけを設計しました(工場の設備が、そのまま売り物になった)。
この LP は、アルプロンの EC 事業再建の一部として制作したものです。広告費を 8 割削りながら売上を前年比 130% にした全体の流れは、本編の事例記事で書いています。
これは AI 活用が本格化する前、2021〜2022 年の仕事です。当時は 1 か月が 2 週間になるだけでも大きな変化でした。いまは AI との共創で、さらに短い期間で回しています。ただし、型にする部分と作り込む部分を分ける判断は、AI があっても変わりません。
- 商品 LP の制作が追いつかない方へ: 型にできる部分とできない部分の切り分けを、30 分の無料相談でお話しします
同じ構造で悩んでいるなら、まず現状を見せてください。
広告を削れるかどうかは、データを見れば60分で見当がつきます。無料オンライン相談会では、いまの数字をその場で一緒に整理して、次の30日で何をするかまで決めて持ち帰ってもらいます。売り込みはしません。