こだわり

ーターゲット

20代～40代の丁寧な暮らしをしたい女性

ー配色

希望する「爽やかで落ち着きのある大人の女性」というイメージを表現するため、白をベースに、彩度を抑えたオリーブ系の色やベージュを組み合わせました。白を広く使うことで爽やかさと清潔感を出し、落ち着いた色合いをアクセントに加えることで、大人っぽい印象に仕上げています。
また、自然を思わせる色を取り入れることで、自然由来の素材を使った商品や、優しいお店の雰囲気が伝わる配色を目指しました。

ーロゴマーク

Premium Bathの頭文字である「P」と「B」を組み合わせ、シンプルなロゴにしました。「B」に切れ目を入れることで、木々の間から光が差し込む「木漏れ日」を表現しています。
さらに、泡とバスタブをシンプルな線で描き、ロゴマークとしても文章中の文字としても使いやすい形に仕上げました。バスタブの線をあえて半分にすることで、店名の中でも目を引く「B」とロゴ全体に一体感を持たせ、柔らかく優雅な印象を目指しました。

ーキャッチコピー

「木漏れ日に、浸かる。」

ヒーローイメージを使い、お店のコンセプトや自然を感じさせる雰囲気、お知らせがひと目で伝わるようにしました。そのすぐ下には季節のおすすめ商品を掲載し、取り扱っている商品のイメージを具体的につかめるよう工夫しました。
また、画像をクリックすると商品ページへ移動できるようにし、ほかの商品にも関心を持ってもらえる導線を意識しました。

ー工夫

自然を身近に感じさせ、穏やかで明るい印象を与える「木漏れ日」という言葉に着目しました。そこに、バスグッズを扱うお店であることが伝わる「浸かる」をダイレクトに組み合わせています。お風呂でほっと一息つくひとときを表現し、温かみのあるキャッチコピーにしました。

商品ページでは、ナビゲーションリストを設け、見たい項目へすぐに移動できるようにしました。色違いの商品を並べる際は、全体の見栄えに配慮し、画像をポップアップ表示したときの矢印も、商品画像を邪魔せず見やすい色や大きさに調整しました。また、タオルは素材感が伝わるよう、ポップアップ画像を2枚ずつ用意しました。

お問い合わせフォームでは、自由に内容を記入する欄に加えて、問い合わせの種類を選べるチェックリストを設けました。お客様が問い合わせの目的を伝えやすく、受け取る側にも内容が分かりやすいフォームを目指しました。

ーまとめ

Premium Bathは概要があらかじめ決められていたものの、私が初めて一から制作したウェブサイトです。
ターゲットやコンセプト、キャッチコピー、配色、ロゴのデザイン、使用するフレームワークは、比較的スムーズに決めることができました。一方で、技術的な知識が十分でなかったため制作を始めてから直面する課題も多くありました。

制作を進める中で、文字の背景に少しずらした色を重ねる表現や、ウェブサイトらしさを出すヒーローイメージなど、その時点では授業では習っていない方法にも挑戦しました。また、実在する企業のウェブサイトを参考にしながら、アイデアを広げていくことができました。

特にこだわったのは画像選びです。画像は見る人の目を引く要素の一つだと考え、トップ画面や商品画像に統一感を持たせた色選びを意識し、ベースカラーの白に映える鮮やかな写真にしました。

ー感想

Webサイトを作る大変さとともに、ユーザーを意識したレイアウトとはどんなものかを深く考える制作となりました。与えられたテーマをもとに、一から形にすることには難しさもありましたが、「これだ！」と思えるアイデアが閃いたときの達成感は、大きな喜びの一つだったと感じています。その閃きを今後は自在に形にできるよう、技術を磨いていきたいです。

ー反省

課題はレスポンシブの技術不足、そしてデザインの引き出しが少なく配色を十分に生かせなかった点、同じようなレイアウトの繰り返しである点です。全体にまとまりはあるものの、「自然派のお風呂用品店」というテーマに対して、ややシンプルすぎる印象になったと感じています。
また、商品カテゴリーのメニューリストの見やすさに欠けていると感じました。
今後はさまざまなデザインに触れ、装飾や写真の配置、レイアウト、色の効果的な使い方、を学び、ユーザビリティに根差したデザインの幅を広げていきたいです。