webサイト制作例｜ライフスタイルショップ

○前提条件

　サイトの企画から完成まで全て1人で取り組む

　ページ数 ： 全6ページ

　サイト幅 ： 960px～　※今回は1280pxで作成

　テーマ ： アパレルからインテリアまで取り扱うライフスタイルショップ

○使用言語

　HTML5  /  CSS3  /  javascript・jQuery

○制作環境

　Windows / Illustrator CS6 /  Photoshop CS6 / Dreamweaver CS6

○制作期間

　9日間　（ 約54時間 ）

▼TOPページ

▼コンセプト

20代後半～50代の女性をメインターゲットとし「日常生活をラクにする情報メディアサイト」と「いいなと思った時はすぐ購入できるショップ機能」を融合させたライフスタイルショップを企画しました。実店舗からスタートし、のちに通信販売をスタート、モールの紋切り型ではなく自社から情報をもっと発信したい、という思いに基づきオリジナルサイトの立ち上げに至った、という設定です。

▼デザイン

全編通し「忙しい女性が片手間に見て楽しく・有益で・出来るだけ疲れないサイト」を目指しました。

彩度を抑えた目に優しい配色と背景を角丸で統一することで優しい印象を持たせています。コンテンツ量が多いため、閲覧時のストレスを軽減するため必要以上の動きは付けていません。その分、各コンテンツが浮き立って見えるような影を施すことで、立体的に目に迫ってくるような印象を付けました。

▼ユーザビリティ

TOPページの情報量の多さと、サイト内を回遊したくなる仕組みに注力しました。TOPページの各コンテンツ一つ一つからそれ以外の下層ページに飛べるようになっており、下層ページに表示されるメニューやバナーからもまたほかのページに飛べる、といった構成になっています。

画面左側のグローバルナビゲーションとハンバーガーメニューの内容は同じものですが、これはメインコンテンツが下に向かって長くなった時も、いちいち上まで戻らなくてもすぐ他のページに移動できるようにするためです。

▼ショッピングページ

ショッピングページにはjavascriptによる商品カテゴリの絞り込み機能を搭載しました。

▼全ページレスポンシブ対応

▼サイトを開く