Works

Night Tea
-
担当範囲
企画
WF・デザイン
コーディング
-
使用ツール
Figma
VS Code
ChatGPT
-
制作期間
デザイン:3日
コーディング:2日
-
URL
情報設計
-
概要
夜のリラックスタイムに寄り添う「ナイトティー」のLP。
HSP気質のある社会人を主なターゲットとし、
商品だけでなく“夜の過ごし方”まで含めた体験価値を訴求。
ローディングアニメーションやふわっとした切り替えを通じて、
静かで心地よい世界観を演出しています。
実案件であれば10〜12万円程度の制作を想定した内容です。 -
コンセプト
“情報が多すぎて疲れた日常を、そっと癒す存在に”という想いを込めて、
やわらかな色合いと余白を活かしたシンプルな構成に。
ネイビー×ラベンダーのカラーリングや、
やさしく切り替わるアニメーションで
「静寂」「安心」「癒し」を視覚的に表現しています。 -
目的
ナイトティーの魅力を伝え、購入につなげること。
商品の紹介だけでなく、疲れた夜に寄り添うブランドの世界観を
丁寧に表現することで、ユーザーに「自分のための商品」
と感じてもらえるよう設計しています。
一度きりの購入ではなく、長く愛用したくなるような
共感や信頼感の醸成も意識しました。 -
ターゲット
性別問わず、20代後半〜40代前半の社会人。
HSP傾向があり、日中に情報や人間関係で疲れやすいと感じている人。
美容や健康への意識が高く、心と身体を整える習慣を大切にしている人。
サイト構成
-
ローディングアニメーション+ファーストビュー
ページ読み込み時には、ネイビー背景にテキストがゆるやかにフェードインする
ローディングアニメーションを実装。
ユーザーを一瞬だけ立ち止まらせ、夜の世界観に静かに入り込めるような“間”を意識しました。
その後に表示されるスマホ版ファーストビューでは、
ふわっと切り替わるアニメーションと余白を活かしたデザインにより、
“夜の静けさとやさしさ”を直感的に伝える導入セクションに。 -
診断セクション
自分に当てはまる症状をチェック形式で確認できる設計にすることで、
ユーザー自身が「今の自分に必要なケア」に気づけるようにしました。
チェック結果に応じて、おすすめのティーを自然に提案する流れを組むことで、
押しつけ感なく商品と出会える仕掛けになっています。
あくまでユーザー主体で選べるスタイルを重視し、“共感”と“納得感”のある導線を意識しました。 -
レビュー
「みんなのナイトティー習慣」と題し、実際に商品を手に取ったユーザーのリアルな声を紹介しています。
“眠る前にやっと一息つけた”“心がふっと軽くなった”といったエピソードを通じて、
読んだ人が「私にも必要かもしれない」と感じられるように。
「ただのレビューではなく、“夜の自分時間”の温度感が伝わるような設計を心がけました。