LP
ネムノキ習慣 LPサイト
ネムノキ習慣LP
サイトを見る
→
| サイト種別 | 1ページ完結型 縦長セールスLP(静的HTML/CSS/JavaScript) |
| 目的 | ①Meta広告・LINE広告からの流入に対し、定期コース初回980円オファーの申込を獲得すること ②機能性表示食品としての誠実さを伝え、薬機法・景表法上のリスクを排除すること |
| ターゲットユーザー | 睡眠改善薬やハーブティーで対策済みだが、続けられず挫折した経験を持つ層(30〜50代) |
| 制作環境 | Local by Flywheel(ローカル開発環境)/Claude Code(実装) |
| 対応デバイス | スマートフォン優先(SP/PC レスポンシブ対応、768pxブレークポイント) |
| 製作期間 | 約4日間(仕様策定〜実装完了/要確認) |
コンセプト
夜、眠れないまま朝を迎えてしまう人に向けた、機能性表示食品「ネムノキ習慣」の販売LPです。架空の商品ながら、「夜の静謐」という一つの世界観を、コピーからモーションの一挙手まで貫くことを目指しました。縦長セールスLPという型そのものは崩さず、その中にどれだけ品位を保てるかを試した案件です。
ターゲット
睡眠改善薬やハーブティーをすでに試し、続けられずに挫折した経験を持つ層を想定しています。だからこそ、煽る言葉ではなく、静かに寄り添う言葉を選びました。
デザイン
軸にしたのは「目的→表現」という考え方です。ネイビー×月白×生成りの配色と、しっぽり明朝×Zen角ゴシックのタイポグラフィで「夜の静謐」を統一。スクロールに応じて夜が更けていくという一つの物語に、FVの登場演出から終盤CTAの日没演出まで、すべてのモーションを従わせました。煽りではなく、品位で信頼をつくることを意図しています。
担当箇所
仕様策定からデザインカンプ、コピーライティング、薬機法・景表法チェック、実装引き継ぎ資料の作成までを一貫して担当しました。実装はClaude Codeが担当し、画像差し込みや表示確認までを含めて仕上げています。
使用技術・ツール
静的HTML/CSS/JavaScript/オリジナルSVG(図版)/Local by Flywheel(ローカル開発環境)/Claude Code(実装)
制作物一覧
- ヒアリングシート
- 制作仕様書
- デザインカンプ
- コピー原稿(薬機法・景表法チェックリスト付き)
- 実装引き継ぎ書
- レスポンシブLP本体
- OGP画像