Facebook 制作について
Logo

【Hertech架空案件】リップ LP

クレジット
Avatar
WEBデザイナー
【Hertech架空案件】リップ LP-1
シェア
制作ノート
制作について

制作の流れ

01|情報整理・ターゲット設定

商品特徴や訴求内容を整理し、LPを閲覧するユーザー像を設定。

「自然体でありながら、華やかさも楽しみたい女性」をターゲットとし、商品の持つ自然なツヤ・発色・うるおいを魅力として伝える方向性を決定しました。

02|コンセプト・デザイン設計

「自然体 × 上品 × やわらかな華やかさ」をデザインコンセプトに設定。

コスメブランドらしい清潔感と女性らしさを表現するため、淡いピンクとホワイトを基調としたカラー設計にしました。

03|構成・レイアウト設計

ファーストビューで商品の世界観を伝え、POINTセクションで3つの特徴を紹介し、最後に商品情報とCTAへつなげる構成にしています。

04|デザイン制作

余白を十分に確保し、情報量が多くなりすぎないよう注意しながら、スクロールすることで自然に内容を理解できるレイアウトを意識しました。

05|全体調整

ページ全体の色味や文字サイズ、余白、各セクションの統一感を確認。

【ビジュアルイメージ】

「自然体 × 上品 × やわらかな華やかさ」をコンセプトにデザイン。

モデル写真やリップの使用イメージを取り入れることで、ユーザーが商品を使用するシーンをイメージしやすい構成にしました。

また、POINTセクションでは写真とテキストを交互に配置し、スクロールした際に視線が単調にならないよう工夫しています。

淡いテクスチャや余白も取り入れ、コスメブランドらしい清潔感と上質感を表現しました。

【カラー】

ピンクを基調とすることで、リップ商品の女性らしさや華やかさを表現。

鮮やかなピンクを多用せず、淡く落ち着いた色味を中心にすることで、甘くなりすぎない大人っぽく上品な印象に仕上げました。

また、ホワイトをベースにすることで商品写真やピンクの装飾が引き立つようにしています。

【タイポグラフィ】

メインコピーには細めの明朝体を使用し、コスメブランドらしい繊細さと上品さを表現。

「華やぎとうるおい、唇の贅沢な日常」というコピーを大きく配置し、ファーストビューで商品の世界観が伝わるようにしました。

一方で、商品説明などの本文は可読性を優先し、見出し・本文・商品情報で文字サイズやウェイトに差をつけています。

デザイン性と読みやすさを両立するタイポグラフィを意識しました。

【レイアウト】

LP全体を通して、「世界観の訴求 → 商品特徴の理解 → 購入への誘導」という流れを意識。

POINTセクションでは写真と説明を左右交互に配置することで、スクロールするごとに視線の変化が生まれるよう設計しています。

最後の商品紹介では商品画像を大きく見せ、価格とCTAをまとめて配置することで、購入に必要な情報を分かりやすく整理しました。

シェア
制作について

制作の流れ

01|情報整理・ターゲット設定

商品特徴や訴求内容を整理し、LPを閲覧するユーザー像を設定。

「自然体でありながら、華やかさも楽しみたい女性」をターゲットとし、商品の持つ自然なツヤ・発色・うるおいを魅力として伝える方向性を決定しました。

02|コンセプト・デザイン設計

「自然体 × 上品 × やわらかな華やかさ」をデザインコンセプトに設定。

コスメブランドらしい清潔感と女性らしさを表現するため、淡いピンクとホワイトを基調としたカラー設計にしました。

03|構成・レイアウト設計

ファーストビューで商品の世界観を伝え、POINTセクションで3つの特徴を紹介し、最後に商品情報とCTAへつなげる構成にしています。

04|デザイン制作

余白を十分に確保し、情報量が多くなりすぎないよう注意しながら、スクロールすることで自然に内容を理解できるレイアウトを意識しました。

05|全体調整

ページ全体の色味や文字サイズ、余白、各セクションの統一感を確認。

【ビジュアルイメージ】

「自然体 × 上品 × やわらかな華やかさ」をコンセプトにデザイン。

モデル写真やリップの使用イメージを取り入れることで、ユーザーが商品を使用するシーンをイメージしやすい構成にしました。

また、POINTセクションでは写真とテキストを交互に配置し、スクロールした際に視線が単調にならないよう工夫しています。

淡いテクスチャや余白も取り入れ、コスメブランドらしい清潔感と上質感を表現しました。

【カラー】

ピンクを基調とすることで、リップ商品の女性らしさや華やかさを表現。

鮮やかなピンクを多用せず、淡く落ち着いた色味を中心にすることで、甘くなりすぎない大人っぽく上品な印象に仕上げました。

また、ホワイトをベースにすることで商品写真やピンクの装飾が引き立つようにしています。

【タイポグラフィ】

メインコピーには細めの明朝体を使用し、コスメブランドらしい繊細さと上品さを表現。

「華やぎとうるおい、唇の贅沢な日常」というコピーを大きく配置し、ファーストビューで商品の世界観が伝わるようにしました。

一方で、商品説明などの本文は可読性を優先し、見出し・本文・商品情報で文字サイズやウェイトに差をつけています。

デザイン性と読みやすさを両立するタイポグラフィを意識しました。

【レイアウト】

LP全体を通して、「世界観の訴求 → 商品特徴の理解 → 購入への誘導」という流れを意識。

POINTセクションでは写真と説明を左右交互に配置することで、スクロールするごとに視線の変化が生まれるよう設計しています。

最後の商品紹介では商品画像を大きく見せ、価格とCTAをまとめて配置することで、購入に必要な情報を分かりやすく整理しました。

シェア
高安の他の作品
foriio

あなたのforiioを無料で作成

fori.io/
【Hertech架空案件】リップ LP-1
制作について

制作の流れ

01|情報整理・ターゲット設定

商品特徴や訴求内容を整理し、LPを閲覧するユーザー像を設定。

「自然体でありながら、華やかさも楽しみたい女性」をターゲットとし、商品の持つ自然なツヤ・発色・うるおいを魅力として伝える方向性を決定しました。

02|コンセプト・デザイン設計

「自然体 × 上品 × やわらかな華やかさ」をデザインコンセプトに設定。

コスメブランドらしい清潔感と女性らしさを表現するため、淡いピンクとホワイトを基調としたカラー設計にしました。

03|構成・レイアウト設計

ファーストビューで商品の世界観を伝え、POINTセクションで3つの特徴を紹介し、最後に商品情報とCTAへつなげる構成にしています。

04|デザイン制作

余白を十分に確保し、情報量が多くなりすぎないよう注意しながら、スクロールすることで自然に内容を理解できるレイアウトを意識しました。

05|全体調整

ページ全体の色味や文字サイズ、余白、各セクションの統一感を確認。

【ビジュアルイメージ】

「自然体 × 上品 × やわらかな華やかさ」をコンセプトにデザイン。

モデル写真やリップの使用イメージを取り入れることで、ユーザーが商品を使用するシーンをイメージしやすい構成にしました。

また、POINTセクションでは写真とテキストを交互に配置し、スクロールした際に視線が単調にならないよう工夫しています。

淡いテクスチャや余白も取り入れ、コスメブランドらしい清潔感と上質感を表現しました。

【カラー】

ピンクを基調とすることで、リップ商品の女性らしさや華やかさを表現。

鮮やかなピンクを多用せず、淡く落ち着いた色味を中心にすることで、甘くなりすぎない大人っぽく上品な印象に仕上げました。

また、ホワイトをベースにすることで商品写真やピンクの装飾が引き立つようにしています。

【タイポグラフィ】

メインコピーには細めの明朝体を使用し、コスメブランドらしい繊細さと上品さを表現。

「華やぎとうるおい、唇の贅沢な日常」というコピーを大きく配置し、ファーストビューで商品の世界観が伝わるようにしました。

一方で、商品説明などの本文は可読性を優先し、見出し・本文・商品情報で文字サイズやウェイトに差をつけています。

デザイン性と読みやすさを両立するタイポグラフィを意識しました。

【レイアウト】

LP全体を通して、「世界観の訴求 → 商品特徴の理解 → 購入への誘導」という流れを意識。

POINTセクションでは写真と説明を左右交互に配置することで、スクロールするごとに視線の変化が生まれるよう設計しています。

最後の商品紹介では商品画像を大きく見せ、価格とCTAをまとめて配置することで、購入に必要な情報を分かりやすく整理しました。

シェア
高安の他の作品
foriio

あなたのforiioを無料で作成

fori.io/