--- title: 色とテキストの差し替えで展開できる商品 LP の型をつくる description: 味違いの新商品が出るたびにLPを一から作っていては追いつかない。1枚を作り込む代わりに、配色とテキストの差し替えで展開できる型を作った記録です。 image: https://humbulls.com/hubfs/blog-covers/cover-alpron-lp-template-2.png --- [Skip to content](https://humbulls.com/knowledge/product-lp-template#main-content) [POST](https://humbulls.com/knowledge?hsLang=ja) [サービスサイト](https://humbulls.com/?hsLang=ja) [ナレッジ](https://humbulls.com/knowledge?hsLang=ja) [セミナー](https://humbulls.com/event?hsLang=ja) [資料DL](https://humbulls.com/download?hsLang=ja) [無料相談](https://humbulls.com/consult?hsLang=ja) [ALL](https://humbulls.com/knowledge?hsLang=ja) [KNOWLEDGE](https://humbulls.com/knowledge/tag/knowledge?hsLang=ja) [CASE STUDIES](https://humbulls.com/knowledge/tag/case-studies?hsLang=ja) [セミナー](https://humbulls.com/event?hsLang=ja) [無料相談を予約](https://humbulls.com/consult?hsLang=ja) [資料ダウンロード](https://humbulls.com/download?hsLang=ja) [← サービスサイトへ戻る](https://humbulls.com/?hsLang=ja) 1. [ホーム](https://humbulls.com/knowledge) 2. 色とテキストの差し替えで展開できる商品 LP の型をつくる ![色とテキストの差し替えで展開できる商品 LP の型をつくる](https://humbulls.com/hubfs/blog-covers/cover-alpron-lp-template-2.png) 支援事例[実績一覧へ](https://humbulls.com/case-studies?hsLang=ja) # 色とテキストの差し替えで展開できる商品 LP の型をつくる 最終更新日:2026.8.3 / 公開日:2026.7.31 最終更新日:2026.8.3 / 公開日:2026.7.31 商品数の多い EC には、共通の悩みがあります。**新商品が出るたびに LP が要る**。 味違い、サイズ違い、期間限定。1 つ出すたびに制作会社へ見積もりを取り、数週間待つ。その間に販売のタイミングは過ぎていきます。かといって LP なしで出せば、商品ページだけで売ることになり、新商品の勢いを作れません。 プロテインメーカーのアルプロンは、新商品のサイクルが速い会社でした。その速度を落とさないために、**LP を 1 枚ずつ作るのをやめて、型を作りました**。 この記事は事例の一部です国内のプロテイン/サプリメントメーカー、株式会社アルプロンの EC 事業再建（2021〜2022 年）のうち、商品 LP の作り方を書いています。humbulls がオンライン事業部の統括を受託していた時期の仕事です。広告費を 8 割削って EC 売上を前年比 130% にした案件で、この LP はその中の制作まわりの話です。 [アルプロン 導入事例の本編を読む →](https://humbulls.com/knowledge/case-alpron-ec-turnaround?hsLang=ja) ## 型にするために決めたこと ### 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色を定義し、「カラースキームの色変更ができるよう構築お願いいたします。」と赤字で指示している](https://humbulls.com/hubfs/raw_assets/public/humbulls-theme-v3/images/cases/alpron-lp-colorscheme-2.jpg) 当時の指定書。配色を6つの役割に分けて定義し、**「カラースキームの色変更ができるよう構築お願いいたします。」**と赤字で書いています。1枚のLPを作るのではなく、差し替えで展開できる型として発注していました。 出典: 2022年8月の LP デザインファイル ## 型にしなかったもの すべてをテンプレート化したわけではありません。 商品ごとの**世界観の作り込み**は、毎回やっています。苺味の LP なら、フリーズドライの苺の質感、イチゴミルクの色、「サクサクした食感」という言葉。ここを共通化すると、どの商品も同じ顔になり、LP を作る意味がなくなります。 型にしたのは**構造**で、差し替えるのは中身です。この線引きを間違えると、テンプレートは「安っぽい量産ページ」になります。 ![PC/SP一体レイアウトのデザインカンプ。中央にコンテンツ幅を固定し、見出しカードや余白に13px・60pxの赤字指定がある](https://humbulls.com/hubfs/raw_assets/public/humbulls-theme-v3/images/cases/alpron-lp-layout-2.jpg) PC と SP を一体で組んだレイアウト。余白や文字サイズの指定が済んでいて、運用で触る場所と触らない場所を最初から分けています。 ## 何が変わったか 新商品を出すときの工程が、ゼロからの制作ではなく差し替えになりました。 **型なしの場合**: 要件整理 → 見積もり → デザイン → 実装 → 確認。この工程を毎回通して、体感で 1 か月ほど。 **型ありの場合**: 色を決める → 商品写真と説明テキストを差し替える → 訴求ブロックの数を調整する。この 3 手順で、2 週間ほどになりました。 この短縮が効いて、**月に 1 本のペースで新フレーバーをリリース**できるようになりました。制作が追いつかないから新商品を出せない、という詰まりが消えたということです。 展開したのは苺だけではありません。チョコチップ、バナナチップ。さらに**チップとフレーバーを別々に組み合わせる**ことで、掛け算で商品が増えていきます。杏仁豆腐フレーバーに苺チップという組み合わせは、その中でも人気がありました。 組み合わせで商品が増える商材ほど、1 枚ずつ作っていては追いつきません。型があると、**商品企画の自由度がそのまま出せる**ようになります。 ちなみに、この掛け算で生まれた組み合わせのいくつかは、いまも定番として残っています。杏仁豆腐風味にイチゴチップという組み合わせも、[4 年経った現在の商品ラインナップ](https://shop.alpron.co.jp/products/alpron-wpc-chip-900g-3kg)に並んでいます。 ## この考え方が向くとき - SKU が多く、味違い・サイズ違いで商品が増える - 新商品のサイクルが速い - LP の制作待ちが、販売タイミングのボトルネックになっている 逆に、商品数が少なく 1 つ 1 つの単価が高い商材なら、毎回作り込むほうが合っています。型が効くのは、**同じことを繰り返す回数が多いとき**だけです。 なお、同じ時期に BtoB 向けのサービス LP も作っていますが、そちらは作り方がまったく違います。市場と顧客を切り分けるところから始めて、1 枚だけを設計しました([工場の設備が、そのまま売り物になった](https://humbulls.com/knowledge/oem-service-launch?hsLang=ja))。 --- この LP は、アルプロンの EC 事業再建の一部として制作したものです。広告費を 8 割削りながら売上を前年比 130% にした全体の流れは、[本編の事例記事](https://humbulls.com/knowledge/case-alpron-ec-turnaround?hsLang=ja)で書いています。 これは AI 活用が本格化する前、2021〜2022 年の仕事です。当時は 1 か月が 2 週間になるだけでも大きな変化でした。いまは AI との共創で、さらに短い期間で回しています。**ただし、型にする部分と作り込む部分を分ける判断は、AI があっても変わりません**。 - 商品 LP の制作が追いつかない方へ: 型にできる部分とできない部分の切り分けを、30 分の無料相談でお話しします ### 同じような課題でお悩みではありませんか？ オンライン相談会は無料です。60分でいまの数字をうかがい、課題を整理します。30日で何をするかをまとめた PDF は、その日のうちにお渡しします。無理な勧誘はしませんので、お気軽にお申し込みください。 [無料オンライン相談会に申し込む →](https://humbulls.com/consult?hsLang=ja) [支援プランの資料を見る →](https://humbulls.com/download?hsLang=ja) ![栗田一輝](https://humbulls.com/hs-fs/hubfs/square_humbulls-kazukikurita-profile-pics.jpg?width=216&name=square_humbulls-kazukikurita-profile-pics.jpg) Author 栗田一輝 humbulls 代表 / B2B マーケ × AI 活用の 設計・実装・運用支援。 [![AI × BtoBマーケティング完全ガイドをダウンロードする（無料）](https://hubspot-no-cache-na2-prod.s3.amazonaws.com/cta/default/22817028/interactive-375238103746.png)](https://cta-na2.hubspot.com/web-interactives/public/v1/track/redirect?encryptedPayload=AVxigLIMhaUO2JQVVs58hAgG6EsuOfdd9hwLFHdC3ozLH9m%2Fzg3b%2BJOPlB328AGLWKzWs5WNNcgL1A%2B2RJcGeu%2Bw3%2BfycdFvYvXSEOs3WOdgtwBTU7l2HYh%2F5wfmtyXTBen4EoU%2BVW6RZARNqh9b69Cyf4ljsS8%2Fzu1jt3NmIsnpxp7B&webInteractiveContentId=375238103746&portalId=22817028) [![運営会社 humbulls — サービスサイトへ](https://hubspot-no-cache-na2-prod.s3.amazonaws.com/cta/default/22817028/interactive-375237823210.png)](https://cta-na2.hubspot.com/web-interactives/public/v1/track/redirect?encryptedPayload=AVxigLKYg6hR5LiZFPsrbBca%2FLFTvPAkaTn1qlM8rxRiYIg7%2F1CM12t5O08MhzH6MfV03yw3hEzanzjJtyPBLX24i9vRj9xtGx6w%2BiSUY3Ml5IZVuKzAQ0Q%2BfvMMpxxqd%2BU3x%2BhaYc%2BIBFPsEYEdy0JsxSIxDBzhYdV6&webInteractiveContentId=375237823210&portalId=22817028) ## ほかの支援事例 - ### [![「言うだけ」のコンサルに疲れた会社が、AI 伴走で変わるまで — 株式会社NBS 導入事例](https://humbulls.com/hubfs/blog-covers/cover-nbs-case-temp.png) CASE STUDY 2026.9.6 「言うだけ」のコンサルに疲れた会社が、AI 伴走で変わるまで — 株式会社NBS 導入事例](https://humbulls.com/knowledge/case-nbs-growth-partner?hsLang=ja) - ### [![文字メインの誠実な広告でLINE登録CPAを3ヶ月で1/3に — LA CLEF CLINIC 導入事例](https://humbulls.com/hubfs/blog-covers/cover-laclef-case.png) CASE STUDY 2026.8.3 文字メインの誠実な広告でLINE登録CPAを3ヶ月で1/3に — LA CLEF CLINIC …](https://humbulls.com/knowledge/case-laclef-clinic?hsLang=ja) - ### [![ゼロから月70件のリード供給体制を1年で — 医療系SaaS 導入事例](https://humbulls.com/hubfs/blog-covers/cover-medical-saas-case-2.png) CASE STUDY 2026.8.3 ゼロから月70件のリード供給体制を1年で — 医療系SaaS 導入事例](https://humbulls.com/knowledge/case-medical-saas-leads?hsLang=ja) - ### [![月25件のリードが初月で42件に — スパルタ英会話 導入事例](https://humbulls.com/hubfs/blog-covers/cover-spartan-case.png) CASE STUDY 2026.8.3 月25件のリードが初月で42件に — スパルタ英会話 導入事例](https://humbulls.com/knowledge/case-spartan-eikaiwa?hsLang=ja) - ### [![工場の設備が、そのまま売り物になった — 小ロット OEM をサービスとして立ち上げる](https://humbulls.com/hubfs/blog-covers/cover-alpron-oem-launch.png) CASE STUDY 2026.7.31 工場の設備が、そのまま売り物になった — 小ロット OEM をサービスとして立ち上げる](https://humbulls.com/knowledge/oem-service-launch?hsLang=ja) - ### [![EC を作り替えても、現場の運用は変えない — Shopify 移行と在庫連携の設計](https://humbulls.com/hubfs/blog-covers/cover-alpron-shopify-migration.png) CASE STUDY 2026.7.31 EC を作り替えても、現場の運用は変えない — Shopify 移行と在庫連携の設計](https://humbulls.com/knowledge/shopify-migration-inventory?hsLang=ja) [humbulls](https://humbulls.com/?hsLang=ja) マーケティングの「実務」を、毎週 humbulls から。 [サービスサイト](https://humbulls.com/?hsLang=ja) [ナレッジ](https://humbulls.com/knowledge?hsLang=ja) [セミナー](https://humbulls.com/event?hsLang=ja) [資料DL](https://humbulls.com/download?hsLang=ja) [お問い合わせ](https://humbulls.com/contact?hsLang=ja) © 2026 humbulls — [Legal & Privacy](https://humbulls.com/legal?hsLang=ja) ```json { "@context" : "https://schema.org", "@type" : "BlogPosting", "author" : { "@type" : "Person", "name" : "栗田一輝", "url" : "https://humbulls.com/knowledge/author/kazukikurita" }, "dateModified" : "2026-07-31T22:48:48.381Z", "datePublished" : "2026-07-31T22:48:48.000Z", "headline" : "色とテキストの差し替えで展開できる商品 LP の型をつくる", "image" : [ "https://humbulls.com/hubfs/blog-covers/cover-alpron-lp-template-2.png" ], "mainEntityOfPage" : { "@id" : "https://humbulls.com/knowledge/product-lp-template", "@type" : "WebPage" }, "publisher" : { "@type" : "Organization", "logo" : { "@type" : "ImageObject", "url" : "https://humbulls.com/hubfs/brand/logo-black-lockup.png" }, "name" : "株式会社humbulls" } } ```