サイト名

Premium Bath（プレミアムバス）

制作期間

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

制作タイプ

架空サイト制作（職業訓練課題）

対象デバイス

PC

使用ツール

• Adobe Photoshop（画像編集）
• Adobe Illustrator（ロゴデザイン）
• HTML5 / CSS3（コーディング）
• Visual Studio Code（エディタ）

担当範囲

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

課題

自然派バスグッズを販売する店舗の架空Webサイトを制作する。
ターゲットは「忙しい日々を過ごす30代の女性で、バスタイムを大切にしたいと考えている方」を想定。

コンセプト

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

ペルソナ設定

・30代の働く女性
・仕事が忙しく、ストレスを感じやすい
・自然派・オーガニック志向
・自分へのご褒美として質の良いものを選びたい

ユーザーニーズ

・どんな商品があるのか一目で分かる
・商品の素材や効能が詳しく知りたい
・落ち着いた雰囲気のサイトで安心感を得たい

1. 配色とトーンの統一

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

2. 余白を活かしたレイアウト

情報を詰め込みすぎず、適度な余白を設けることで落ち着いた雰囲気と洗練された印象を演出し、ゆとりあるデザインを目指しました。

3. 視覚的な導線設計

トップページからConceptセクション、Productセクションへと自然に視線が流れるよう、2カラムのレイアウトを採用。
ユーザーが迷わず情報を得られるよう配慮しました。

4. ホバーエフェクトの実装

ボタンやリンクに適度なホバーエフェクトを加え、ユーザーがクリック可能な要素を直感的に理解できるよう工夫しました。

1. 企画・リサーチ

・ターゲット設定とペルソナ作成
・キャッチコピーとサイトコンセプト、サイトIDの検討

2. デザイン制作

・ワイヤーフレーム作成（手書きラフ）
・配色検討

3. コーディング

・CSS3でのスタイリング（Flexbox、Gridレイアウト活用）
・Hover Effect/Transitionの実装

4. 検証・調整

・HTML/CSSのバリデーションチェック
・最終調整と完成

・2カラムレイアウトに苦戦しましたが、何度も微調整を重ねることで納得のいく仕上がりにすることができた
・ターゲット層を明確にすることでデザインの方向性が定まり、一貫性のあるサイトが作れることを実感した
・実際にコーディングすることで、デザインカンプ段階では気づかなかった細かな調整点を発見でき、制作スキルが向上した

・JavaScriptを学習し、動的な要素を追加したい
・アクセシビリティをさらに向上させ、すべての人が使いやすいサイトを目指したい
・レスポンシブ対応をしていきたい

実際のサイトを見る →
※こちらは職業訓練の課題として制作した架空のサイトです。