制作の流れ
しまいの一杯「ナイトブレンド」

1. だれに、何を売るか

主な買い手は、仕事や家のことで夜遅くまで気持ちが「オン」のままの30〜40代と、2,000〜4,000円で気をつかわせない贈り物を探す人。体への効き目は食品の表示のルール上うたえないので、効き目ではなく「場面」を売ることにしました。

一日の終わりに「今日はここまで」と区切るための一杯キャッチコピー：今日を、そっと閉じる一杯。

キャッチコピーは3案から選びました。「おやすみ前の…」「ほどける夜の…」は、眠りや体がほぐれる効き目と読まれるおそれがあるため外しています。

2. AIに任せたこと・自分でしたこと

3. AIの出力をそのまま使わなかったところ

• 画像の中身が本文と食い違っていた「4種のハーブ」の画像に、ブレンドに入っていない柑橘のかけらが写っていました。指示文に「4種だけ・柑橘なし」を足して作り直し、作り直し後も左手前のボウルに前の中身が残っていたので、そのボウルだけを直す指示で修正しました（計3回生成）。
• スマホで、キャッチコピーや短い文が変なところで折れていた「そっと閉じる一 / 杯。」「区 / 切り」のように折れていたため、言葉のまとまりで折り返す指定に変更。Safariでは効かない指定だったので、どのブラウザでも効く書き方に直しました。
• 動きの演出が、文字を読む邪魔になっていたスマホで確認して指摘文字までスクロールに合わせて動き続けていたので、「写真は動いてよいが、文字は注視するので動かない」方針に変更。文字は見える範囲に入ったら0.4秒で濃くなるだけにしました。
• Amazonのメイン画像の決まりに合っていなかった生成した白背景が、外周の46.7%しか真っ白ではなく、商品の大きさも画像の77%でした。背景を真っ白にそろえ、商品の長辺が88%になるよう切り出して、数値で確かめ直しています。

4. 売れているページの型をなぞってから、足したこと

まず、いま売れているハーブティーのページに共通する「型」を調べ、それに合わせました。調べたのは、Amazonの売れ筋（フルーツ・ハーブティー）の上位5件と、楽天の「ハーブティー」デイリーランキングの上位5件です（2026年10月11日。文章や画像は写さず、何が載っているかと数だけを記録。楽天の数字は読み取りの参考値）。

入れなかったものもあります。順位・受賞の表示（楽天5/5）は、架空の商品では「実績の作り話」になるため。割引・送料無料は実在しない条件になるため。体への効き目は、食品の表示のルールに触れるためです。

型の上に、ひとつ足したこと

別に調べた楽天・自社サイトのハーブティーの販売ページ5件では、文字で確認できた範囲で、いれ方の手順を見せているページはありませんでした（0/5）。ハーブティーに慣れていない人ほど「どう飲めばおいしいのか」で迷うと考え、手順を4つの図にした画像とLPの区画を足しています。

ネットで売るために欠かせない表示

通販の会社は、特定商取引法・景品表示法・食品の表示の決まりを、事業のリスクとして挙げることが多い分野です。見た目の型とは別に、次の3つをLPに入れました。

• 商品情報の表名称・原材料名・原料原産地・内容量・賞味期限・保存方法を、ラインナップのすぐ下に。EC商品画像の「商品情報」と同じ中身です。
• 特定商取引法に基づく表記送料・支払い・お届けの時期・返品の決まりを1ページに。食品なのでお客様都合の返品は受けない、と書いておかないと、届いてから8日以内の返品を受けることになります。架空のお店なので、送料などは「例」と分かるようにしています。
• プライバシーポリシー集める情報と使いみち、配送・決済の会社に渡す範囲を、短い言葉で。

お客様の声は「サンプル」と明記し、順位や受賞、体への効き目は書いていません（景品表示法・食品の表示の決まり）。

実際に売るなら、次に試したいこと

正解は売ってみないと分からないので、「試すなら」の候補として、確かめ方と一緒に書いておきます。

• 楽天でも「1包あたりの価格」を見せるAmazonでは上位5件とも1包あたりの価格が出ていますが、楽天で出していたのは1/5でした。30包入りなら1包あたり約166円（10包入りは198円）。まとめ買いの段が選ばれる割合を、見せる・見せないで比べる。
• 定期便を用意する毎晩飲む前提の商品で、Amazonの上位は4/5、楽天は2/5が定期購入を用意していました。2回目の購入率で効き目を見る。用意するなら、注文を確定する画面に、届く回数・支払う総額・解約の方法をはっきり出す（特定商取引法の決まり）。
• 広告の言葉とLPの最初の画面をそろえる悩みから入るフィード広告から来た人には、LPも悩みの区画から見せる形を試す。広告からの購入ボタンのクリック率で比べる。

5. 2つの考え方で作り分けて、数値で比べた

LP制作の考え方の違う2人（川端康介さん、Unbounce の Oli Gardner さん）の物差しで最初のLPを点検し、それぞれの考え方で1本ずつ作り分けました。実際のお客さんの数字は無いので、測れる値で比べています（スマホ375px幅）。

最終版は、最初の版の見た目と情報量を残したまま、Gardner版の「途中の購入ボタン」だけを取り入れました。ボタンの無い区間が画面約10枚分から約3枚分になっています。

6. 広告からLPまで、見た目と言葉をそろえる

SNS広告から来た人が「さっき見たものだ」と分かるように、LPと同じ写真・色・書体で広告を2種類作りました。役目を分けています。

7. 構成（ワイヤー）と完成の対応

区画の順番と、それぞれの役目を決めてから作っています。構成案を図にしたものと完成画面を、同じ高さの位置で並べました。

構成と完成を並べた図を見る

作ったもの

使ったもの：Claude Code（構成・コード）、Gemini（画像生成）。購入ボタンは押しても購入や決済は起きません。お客様の声は制作実績用のサンプルです。