【動画あり】ヘアケアブランドNAMIDAのLPと購入ページを制作しました（デモ）

こんにちは。篠原です。

ヘアケアブランド「NAMIDA（ナミダ）」のLPと購入ページを、架空のデモとして制作しました。

実在のブランド・商品ではなく、価格・成分・効果の記載はすべて仮置きです。

サイトの紹介動画（約6分）もあります。

■目次

1. このLPで目指したこと

2. 設計のポイント

3. 購入ページについて

4. 制作について

5. 動画でご覧いただけます

6. こんな方におすすめ

7. ご相談について

■1. このLPで目指したこと

想定したのは、乾燥やパサつき、湿気での広がりが気になる方です。

そうした方は「オイルでコーティング」という訴求をすでに見慣れていて、それでも悩みが残っているのでは、と考えました。

そこで軸にしたのが、「乾いた髪に足りないのは、油分ではなく水分」という一言です。

キャッチコピーは「洗うたびに、髪が水を思い出す」。水分をテーマにしたブランドとして、名前もコピーも、うるおいを連想させる言葉でそろえています。

■2. 設計のポイント

【ファーストビューは、画像が開く動き】

最初の画面は、ロゴとキャッチコピーを大きく重ねた全画面のビジュアルです。スクロールすると画像が開いて、本編が始まります。文字は画像に重なる部分だけ白、それ以外は茶色に切り替わるので、どちらの画像の上でも読めます。

【コンセプトは、最初に言い切る】

「乾いた髪に足りないのは、油分ではなく水分でした。」と、冒頭で結論を伝えました。機能の説明はそのあとに回しています。「うるおす」が何を指すのかは、※の注釈で補いました。

【こだわりは3つに絞って、写真つきで】

「泡で、髪をこすらない」「洗ったあとに、水分を残す」「香りは、主張しすぎない」。一度に伝えすぎないよう、1つずつ写真と短い文章で見せています。

【成分は4つだけ、一言で】

海洋由来の保湿成分、植物オイル、アミノ酸系の洗浄成分、コンディショニング成分。名前を並べるだけにせず、それぞれ何の役に立つのかを一文で添えました。

【Before / After は、仕上がりを順に見せる】

使用前、使用後、仕上がりのワイドカットの順に見せています。画像はAIで作った仕上がりイメージで、使用試験の結果ではありません。その旨を画面にも注記しています。

【使い方は4ステップ】

予洗い、泡立てる、洗う、すすぐ。初めての方でも迷わないよう、手順ごとに写真を入れました。

【商品は2つ、購入への道筋は各所に】

シャンプーとトリートメントを並べ、それぞれに購入ページへのボタンを置きました。画面上部のメニューにも「購入する」を常に表示しています。

【よくある質問は4つ】

「どんな髪質に合うか」「香りは強いか」「トリートメントも必要か」「定期便はあるか」。購入前に迷いやすい点に、開閉式で答えています。

【色と書体】

クリーム、ブラウン、ゴールド、ローズを基調に、見出しは明朝体にしました。上品さと、やわらかさの両方が出るようにしています。

■3. 購入ページについて

LPからつながる、ご購入のお申し込みページも作りました。

・商品と数量の選択

・お届け先の入力（必須項目にラベル、入力例を表示）

・お支払い方法の選択（クレジットカード、コンビニ払い、代金引換）

・ご注文内容の確認

これらを1ページにまとめ、迷わず進めるようにしています。デモのため、「購入する」を押すと、実際には購入できない旨のメッセージが出ます。

■4. 制作について

・商品写真、ビジュアル、ロゴはAI（画像生成）で作成したもので、実在の人物・商品ではありません。

・コピー、構成、配色、動き、レイアウトは私が設計し、AIツールを使いながら制作しました。

・価格・成分・効果は、すべて架空の仮置きです。

・PC、タブレット、スマホの画面幅に合わせて表示が切り替わります。

■5. 動画でご覧いただけます

画面の動きは、文章だけでは伝わりにくいので、サイトツアー動画（約6分）にまとめました。ファーストビューが開く動きや、購入ページまでの流れをご覧いただけます。

■6. こんな方におすすめ

・化粧品、ヘアケア、ボディケアなど、商品の世界観を伝えたいブランドの方

・動きのあるファーストビューで、第一印象を強くしたい方

・LPから購入ページまで、ひとつながりで作りたい方

■7. ご相談について

LP制作のご相談をお待ちしています。商品の特長と、想定するお客様をうかがったうえで、構成の考え方からご提案します。コピーや画像づくりのご相談も可能です。

（デモ）