絹の華様 洗顔筆「美肌筆」プロモーション用LP制作
公開可能な範囲で、業種・相談内容・対応範囲・成果概要を掲載しています。個人情報や非公開情報は、許可なく掲載していません。
MAO工房の担当範囲
情報設計、デザイン、ライティング構成、Next.jsによる実装、アニメーション、モバイル表示、Cloudflare Pagesへの公開を担当。
成果物
- ・プロモーションLP
- ・モバイル対応UI
- ・Cloudflare Pagesの公開構成
今回の対応範囲について
LPの制作・公開までを掲載対象とし、広告運用、購入率、売上、顧客評価など確認方法を提示できない成果は掲載していません。
📋 プロジェクト概要
伝統素材と製品の特徴を伝えるため、Next.js App RouterによるSPA構成とアニメーションを用いたプロモーションLPを制作。Cloudflare Pagesで公開できる構成まで担当。
🔍 課題・問題点
既存のページでは伝統工芸の「凄み」や美容製品としての「洗練さ」が伝えきれておらず、ターゲット層に響くビジュアルとUX（ユーザー体験）への刷新が必要だった。また、表示速度やモバイルでの操作性も改善の余地があった。
💡 実施内容・担当範囲
Next.jsを用いたSPA構成を採用。Framer Motionによるスクロール連動アニメーションと、製品情報を順に理解できるストーリー構成を実装し、Cloudflare Pagesで公開。
🎯 確認できる成果
伝統素材の説明、製品の特徴、使い方、購入導線を一つのLPに整理。スマートフォンでの表示と操作、公開環境でのページ表示を確認。
対応概要
伝統素材を使った洗顔筆のプロモーションLPを制作。製品情報と使い方を順に確認できる構成と、スマートフォンで操作しやすい表示を実装しました。
課題
- 伝統工芸品としての格式を維持しつつ、現代の美容トレンドに即した洗練されたデザインへの刷新
- スマホユーザーが多いため、スクロールを止めさせない、かつ情報の入ってきやすいリッチなUIの実現
- 製品の背景、特徴、使い方、購入導線を順に理解できるストーリー構成
- 広告やSNSからの閲覧も想定したモバイル表示と読み込みへの配慮
方針と取り組み
- SPA構成とアニメーション：Next.jsとFramer Motionを組み合わせ、要素が滑らかに浮き上がるインタラクションを実装。高級ブランドに相応しい「ゆとり」と「心地よさ」を演出
- 情報設計：提供された製品情報とブランドストーリーを、特徴・使い方・購入導線の順に整理
- モバイルファースト設計：3ステップの使い方解説や、製品ラインナップ比較など、スマホの片手操作でも直感的に理解できるUI/UXを構築
- 配信基盤の整備：Cloudflare Pagesによる配信と画像表示を調整し、公開環境での表示を確認
成果
- 製品情報の整理：伝統素材の説明、特徴、使い方、購入導線を一つのページに統合
- モバイル表示：小さい画面でも情報を追いやすいセクション構成と操作を実装
- 公開基盤：Cloudflare Pagesで閲覧できる状態まで構築
こだわりポイント
- タイポグラフィ：見出しにセリフ体、本文にサンセリフ体を採用し、製品の雰囲気と可読性を調整
- シズル感の演出：極細の泡が立つ様子やシルクの質感を、言葉と動きの両面から想起させる細部の調整
- エンジニアリング：AIエージェントを高度にディレクションしつつ、最終的な挙動やデプロイ設定をエンジニアの視点で緻密にチューニング
使用環境
- 開発：Next.js (App Router), Tailwind CSS, Framer Motion
- ホスティング：Cloudflare Pages
- ツール：Lucide React, Figma
🔗 公開サイト
実際のサイトを見る関連する実績
この実績に近い相談先
ホームページ制作・改善
スマホ対応、問い合わせ導線、地域SEO、既存サイト改善まで相談できます。
同じような課題でお困りではありませんか？
このプロジェクトと近い相談内容は、関連サービスと料金の目安を確認してからお問い合わせいただけます。 まずは作業前ヒアリング・概算見積もりの範囲で状況をお聞かせください。