夜のしずく アロマオイルの定期便　ブランドサイト （課題制作） サイトURL http://hara.bake-neko.net/website/index.html レスポンシブ対応 制作期間 １ヶ月 使用ツール Photoshop Dreamweaver（HTML/CSS/Javascript) 担当範囲 ・企画 ・コンセプト設計 ・情報設計 ・UIデザイン ・ビジュアルデザイン ・プロトタイプ制作 ・ロゴ制作 ・コーディング 概要 「夜の時間に寄り添うアロマブランド」をテーマにした架空サイトです。 ユーザーがその日の気分に合わせて香りを選べる「香り診断」を中心に設計し、ブランドの世界観を楽しみながら購入まで進める導線を意識して制作しました。 目的 ・来訪者の10％を定期便申込に導く ・診断を通して自分に合った商品を提案することで 申込しやすくする ・診断から購入まで迷わずに進める導線を設計する ターゲット 20〜30代の働いている女性 仕事で疲れて帰ってきた夜、自分だけのリラックスタイムを大切にしたい方を想定しました。 デザインのポイント ・淡い紫とベージュを基調に、夜の静けさを感じられる配色で統一 ・写真・余白・タイポグラフィを活かし、落ち着いた世界観を演出 ・診断ページではラジオボタンを用いたシンプルなUIを採用し、迷わず操作できるよう設計 ・FAQ・購入・お問合せページは共通レイアウトを採用し、サイト全体の統一感を意識 ・CTAの配置やナビゲーションを整理し、香り診断から購入まで自然に遷移できる導線を設計 制作ページ ・TOP ・５つの香り ・香り診断 ・FAQ ・定期便お申し込み ・お問合せ （全6ページ） 工夫した点 診断結果ページと「５つの香り」ページの役割を明確に分けました。 診断ページではユーザーにおすすめの香りをシンプルに提示し、詳しい香りの特徴は「５つの香り」ページで紹介することで、情報量を」整理しながらブランド体験を損なわない構成を意識しました。 また、購入・お問合せ・FAQは共通したレイアウトルールを採用し、ページが変わっても違和感なく操作できるようデザインしています。