Facebook 【デザイン〜実装一貫】乾燥肌向け化粧水LP
Logo

【デザイン〜実装一貫】乾燥肌向け化粧水LP

クレジット
Avatar
Web Designer
【デザイン〜実装一貫】乾燥肌向け化粧水LP-1
シェア

【デザイン〜実装一貫】乾燥肌向け化粧水LP

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

あなたのforiioを無料で作成

fori.io/
【デザイン〜実装一貫】乾燥肌向け化粧水LP-1

【デザイン〜実装一貫】乾燥肌向け化粧水LP

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

あなたのforiioを無料で作成

fori.io/