03 LP / 自主制作 2026

RESET BITE
サプリメントLP

架空のサプリメント商品を題材に、Figmaで設計してからコーディングしたスマートフォン向けランディングページです。

制作の意図

LPは「きれいに見せる」より「読み進めてもらう」ことが役目だと考えて、共感 → 納得 → 行動 の順に並べました。最初に7項目のチェックリストで自分ごとにしてもらい、そのあとで成分の説明に入ります。成分を先に置くと、興味を持つ前に読むのをやめられてしまうためです。

担当した範囲

商品コンセプトの設定、構成案、Figmaでのデザイン、HTML/CSSでのコーディングまで。JavaScriptは使わず、CSSだけで組んでいます。

ことわり

掲載しているのは架空の商品です。実在する商品・効能ではありません。実案件では、こうした表現に薬機法上の確認が必要になることを理解したうえで制作しています。

制作年2026年
種別ランディングページ(自主制作)
担当企画・構成・デザイン・コーディング
使用ツールFigma / Visual Studio Code
技術HTML / CSS(JavaScript不使用)
想定端末スマートフォン(幅393px基準)

Live

実物

下の枠の中で、実際のページがそのまま動きます。

別のタブで開く →