【自主制作】ハーブティーショップHPデザイン

■要件定義

【コンセプト】

日々の暮らしにやさしく寄り添い、心と体を整えるハーブティーとの出会いを提供するショップサイト。 季節感・香り・温度といった感覚的価値を大切にしながら、「自分に合った一杯が見つかる」体験設計をコンセプトとしています。

【ビジュアル要件】

・ハーブティーの色味や透明感、素材感が伝わる写真表現 ・季節感（秋）を感じさせる温かみのあるトーン ・自然・オーガニックを想起させる配色とモチーフ ・スマートフォン閲覧を前提とした縦スクロール設計

【ターゲット】

20代後半〜40代の男女 ・忙しい日常の中でリラックスする時間を大切にしたい ・体調や気分に合わせたセルフケアに関心がある ・オーガニック・ナチュラル志向のライフスタイル層

【トンマナ】

ナチュラル／やさしい／上質 情報を押し付けず、余白と写真で「落ち着き」「信頼感」を伝えるトーンを意識しています。

■情報設計

【デザインについて】

ファーストビューには、ハーブティーの香りや温度が想起できるビジュアルを大胆に配置し、視覚的に世界観へ引き込む設計としました。 全体を通してベージュ・グリーン系を基調とし、ボタニカルモチーフを随所に取り入れることで、自然由来ブランドとしての一貫性を持たせています。 また、写真とテキストのバランスを調整し、情報量が多くなりがちなECサイトでも、視線が疲れないレイアウトを意識しています。

【情報設計について】

トップページでは、

1. 季節のおすすめ訴求（FV）
2. ブランド理解（ABOUT）
3. 商品探索（カテゴリ・悩み別導線）
4. 信頼醸成（NEWS・FAQ・実店舗案内）

という流れで、ユーザーの心理段階に沿った構成としています。

特に「カテゴリーから探す」「お悩みから探す」を並列で配置することで、 ・目的が明確なユーザー ・なんとなく探したいユーザー どちらにも対応できる導線設計としました。

スマートフォンではスクロールだけで完結できる構成とし、タップ操作のしやすさ・視認性を重視しています。