Skip to content
色とテキストの差し替えで展開できる商品 LP の型をつくる

支援事例実績一覧へ

色とテキストの差し替えで展開できる商品 LP の型をつくる

最終更新日: / 公開日:

最終更新日: / 公開日:

商品数の多い 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 つの商品があっても、ブロックを増減するだけで対応できます。

当時のLPデザイン指定。main / plane / point / bg 01 / bg 02 / shadow の6色を定義し、「カラースキームの色変更ができるよう構築お願いいたします。」と赤字で指示している
当時の指定書。配色を6つの役割に分けて定義し、「カラースキームの色変更ができるよう構築お願いいたします。」と赤字で書いています。1枚のLPを作るのではなく、差し替えで展開できる型として発注していました。
出典: 2022年8月の LP デザインファイル

型にしなかったもの

すべてをテンプレート化したわけではありません。

商品ごとの世界観の作り込みは、毎回やっています。苺味の LP なら、フリーズドライの苺の質感、イチゴミルクの色、「サクサクした食感」という言葉。ここを共通化すると、どの商品も同じ顔になり、LP を作る意味がなくなります。

型にしたのは構造で、差し替えるのは中身です。この線引きを間違えると、テンプレートは「安っぽい量産ページ」になります。

PC/SP一体レイアウトのデザインカンプ。中央にコンテンツ幅を固定し、バナー枠に「内容は随時差し替え」の赤字注記がある
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日で何をするかまで決めて持ち帰ってもらいます。売り込みはしません。

こんな記事も読まれています