Premium Bath

サイト名

Premium Bath（プレミアムバス）

制作期間

約2週間（2025年12月〜2026年1月）

制作タイプ

高級バスグッズ店の架空Webサイト（職業訓練課題）

対応デバイス

PC

使用ツール

• Adobe Illustrator
• Adobe Photoshop / Adobe Firefly（生成AI）
• HTML5 / CSS3
• Visual Studio Code

担当範囲

企画・デザイン・コーディング（すべて個人制作）

課題

高級感を演出しながらも商品の魅力が伝わるバスグッズ販売店のWebサイトを制作する。
「日常にちょっとした贅沢を」をコンセプトに、上質なバスタイムを提案するビジュアルを目指した。

コンセプト

優しいトーンの配色と自然素材を連想させるビジュアルで落ち着いたサイトデザインを意識。
「自分を雑に扱わない夜に。」というキャッチコピーのもと、忙しい日々の中でも自分自身をいたわる時間の大切さが伝わるサイトを目指した。

ペルソナ設定

・30代の働く女性
・品質と成分にこだわり、価格より効果を重視する
・バスタイムをリラックスタイムとして大切にしている

ユーザーニーズ

・商品の高級感・成分・効果をひと目で確認したい
・ブランドのストーリーや世界観に共感したい
・落ち着いた雰囲気のサイトで安心感を得たい

配色

ベージュカラーを基調とし、自然派・ナチュラルなイメージを視覚的に表現。
刺激の強い色を避け、目に優しく長時間見ていても疲れない配色にした。

余白の設計

各セクションに十分な余白を設け、情報が詰め込まれた印象を排除。
「ゆとり」の視覚体験が高級ブランドとしての印象を強化する。

視覚的導線

2カラムレイアウトを採用し「ファーストビュー コンセプト プロダクト」の順でユーザーの視線が自然に流れるよう設計した。

1. 企画・リサーチ

高級コスメ・バスグッズブランドのサイトをリサーチし、配色・レイアウトのトレンドを調査。

2. デザイン制作

ワイヤーフレーム作成後、Photoshop で素材を加工。

3. コーディング

HTML5 / CSS3 でコーディング。CSS Flexbox とホバーエフェクトを実装。

4. 検証・調整

PC での表示確認後、フォントサイズと余白を細かく調整して完成。

・2カラムレイアウトに苦戦したが、何度も微調整を重ねることで納得のいく仕上がりにすることができた
・ターゲット層を明確にすることでデザインの方向性が定まり、一貫性のあるサイトが作れることを実感した
・高級感を出すためには「足し算ではなく引き算のデザイン」が大切だと実感した

・JavaScript でスクロールアニメーション（フェードイン・スライドイン）を実装したい
・コントラスト比などのアクセシビリティ対応を強化したい
・スマートフォン対応のレスポンシブデザインにも取り組みたい