- 実案件
- コーディング
ポートフォリオサイト
自身のポートフォリオサイト制作をおこないました。
Works
制作実績
職業訓練校制作課題PremiumBath
職業訓練校「Webデザイン科」でおこなった実務を想定した制作課題。 ヒアリングシートをもとに情報整理、ワイヤーフレームの作成、コーディングの一連の流れを学びました。 要望をしっかりと反映しながら店舗の特徴や雰囲気が伝わるよう意識しながら取り組みました。
About
制作概要
- クライアント(架空)
- バスグッズ専門店「PremiumBath」様
- 制作背景
-
2026年9月店舗オープンにともない、Webサイト制作を依頼。
Webサイトを通じて、取扱商品や店舗の雰囲気を伝えつつ、認知拡大、来店率向上をはかることが目的。
- 強み・特徴
-
自然由来100%の肌に優しいバスグッズを豊富に取り揃えている点が最大の特徴。
店頭では肌の状態に合わせて、お客様に合った商品を提案するサービスもおこなっている。
- ターゲット
- 20~40代の女性
- クライアントの要望
-
- ブランド、商品やお店の特徴を知ってもらいたい
- オープンキャンペーンの告知
- 季節商品やおすすめ商品の掲載
- 来店時、お客様の肌に合わせた提案がしたい
- ラッピング可能な点も掲載したい
Point
制作のポイント
実務を想定した制作プロセス
お客様情報が記載されたヒアリングシートをもとに要望などサイト構成に重要となる情報を整理し、デザインコンセプトや主要カラーを設定。
その後、ワイヤーフレームを作成したうえでコーディングをおこないました。
また、Webサイトの訴求力を高められるようペルソナをしっかりと設定し、ターゲットに合わせて制作に取り組みました。
制作では、クライアント要望をしっかりと反映しつつ、店舗の特徴などが伝わるような設計を意識しました。
ユーザー視点の情報設計
トップページでは店舗の想いやコンセプトを中心に構成し、初めて訪れたユーザーにもPremiumBathの魅力が伝わるよう意識しました。
一方で、お知らせや商品詳細など情報量が多くなりやすいコンテンツについては下層ページへ整理することで、必要な情報へ迷わずアクセスできるサイト構成を目指しています。
情報を詰め込み過ぎるのではなく、ユーザーがストレスなく閲覧できる導線設計と情報設計を意識して制作をおこないました。
清潔感と落ち着きある配色
お風呂のイメージから清潔感を感じられるグリーンブルーと白をメインカラーに設定しました。
また、「PremiumBathの商品を通じて1日の疲れを癒してほしい」というコンセプトから、ベースカラーには落ち着きのある薄いベージュを採用しています。
さらに、メインターゲットを20代後半〜30代の女性に設定していることから、アクセントカラーには淡いピンクを使用し、女性らしさや親しみやすさを表現しました。
ターゲット層やブランドイメージに合わせて、配色全体に統一感を持たせることを意識しています。
