【制作物】
乾燥肌向け化粧水のLPを、デザインからコーディングまで一貫して制作しました🫧✨
デザイン制作にとどまらず、画像コーディングによる実装まで行い、Web上で実際に閲覧できる形に落とし込んでいます。
▶ デモサイト
https://chiaki0925.github.io/lp-sample-demo/
■ ターゲット
・ 30~40代女性
・乾燥肌に悩みがあり、スキンケア選びに慎重な方
・肌に合うか不安があるため、まずはお試しから始めたい方
■ 目的
・商品の魅力を分かりやすく伝え、購入・申込といったアクションにつなげること
■ デザインコンセプト
【潤い・安心感・清潔感】
乾燥肌向け商品であることから、
「水分量」「やさしさ」「信頼感」が直感的に伝わるトーンを意識。
ブルーを基調に、みずみずしく落ち着いた世界観を設計しました。
■ デザイン・設計で意識したポイント
【ストーリー設計(悩み → 解決)】
冒頭ではあえて落ち着いたトーンで悩みに共感し、
商品紹介パートで一気に明るさとインパクトを出すことで、心理的な「変化」を感じられる構成に。
【ビジュアルによる訴求力強化】
水滴や丸いモチーフを全体に使用し、視覚的にも「うるおい」「やわらかさ」を想起させるデザインに設計。
【写真選定と余白設計】
全体が重くならないよう、写真のトーンや余白バランスにこだわり、安心感・清潔感のある印象を重視。
【CTAの視認性と行動喚起】
CTAボタンは落ち着いた配色をベースに、ポリゴン柄でアクセントを加えることで視線を集め、行動につながりやすい設計を意識。
■ 実装面での工夫
・デザインをもとに画像コーディングでLPを実装
・デザインの再現性だけでなく、スクロール時の視認性や表示バランスを考慮
・実装を前提としたレイアウト設計により、デザインとコーディングの乖離が起きないよう工夫
■ 使用ツール
Photoshop / HTML / CSS / GitHub Pages
■ 制作期間
約3週間
※本制作物はサンプルです。
------------------------------------------------------
ご覧いただきありがとうございました
Webデザイン・コーディングのご相談やお見積りは無料です。
各SNSよりお気軽にお問い合わせください。