デザイナーズブランドを多く取り扱うセレクトショップ「Elle」のECサイトを制作。フリー画像は使用せず自らブランド様へお声がけし、頂いたものを使用しています。取り扱いブランドのイメージを伝えるため、コレクションやルックの写真を多く使用しています。各アイテムの色味が見やすくなるよう、サイト全体をモノトーンでまとめました。
ブランドコンセプト
「彼女のように大切な存在、神様のように見守ってくれるお守りのようなアイテムと出会える場所」洋服だけでなく、Vintageのバッグやアクセサリーなどの小物なども取り扱っています。 日本発祥のブランドやまだ発掘されていない若手のデザイナーのブランドが多く取り扱われています。 主にデザイナーズブランドが好きな方や、個性的なアイテムを求められる方など、感度の高い方々から注目をあつめています。
総作業時間
60.5時間
担当
コンセプト立案（5時間）、ペルソナ設定（1時間）、サイトマップ制作（1時間）、ワイヤーフレーム制作（11時間）、デザイン（20時間）ライティング（2時間）、コーディング（133時間）、素材編集（3時間）、バナー作成（3時間）ロゴ（0.5時間）
使用ソフト
XD、Photoshop、Illustrator、Visual Sutudio Code
URL
https://adjustacademy.com/d231200/d231203-120702/three/
サイトの目的
商品購入、客単価を上げる、ショップの知名度向上、ブランドの認知、顧客データの管理
ターゲット
既存の顧客、服好きの社会人、ファッション業界人、新規顧客
デザインについて
メインのフォントはDidotというセリフ体を使用し、高級感がありながらも少し個性的なフォントを使用しています。 線幅の太い部分と細い部分の差が大きいのが特徴のフォントです。掲載アイテムがデザイン性の高いものが多かったため、こちらのフォントを使用。表示する画像は全てルック写真を使用することで取扱いブランドの雰囲気の伝わるサイトに仕上げました。 ルック写真は各ブランドやシーズンごとに雰囲気が異なるため、サイト全体をモノトーンにすることで視覚的な混乱を減らす効果を持たせています。モノトーンとセリフ対の組み合わせはモダンさを表現するのに適しており、魅力的な印象を与えることができます。セレクトショップはメンズとウィメンズで取扱いブランドが大きく異なります。 その点からトップページの段階でユーザーの求める情報に辿りつきやすくなるよう、シンプルで情報量の少ない構成を取り入れました。 最新の情報やアイテムを求めるユーザー向けにコレクション情報もトップページに入れています。 ウィメンズスページは情報が多くなりがちなページですが、デザインの繰り返しを用いることで、ウェブサイト全体が統一された印象を与えます。 アイテムページはユーザーの知りたい情報だけを入れるように努めました。余白を多めに使い、フォントの色使いを最小限に抑えることで、必要な情報をユーザーへ効率良く伝えられます。
コーディングについて
タグに細かくクラス名をつけることで無駄なコーディングを省くように意識しました。 系統の違う画像が多く入るとシンプルなデザインイメージからかけ離れてしまうので、スリック要素でスライドできる仕様にしまとめました。 レスポンシブ対応モバイルデバイスやタブレットなどの異なる画面サイズに対応するため、メディアクエリを使用してレスポンシブデザインを実装しています。 デスクトップ、タブレット、スマートフォンなどの様々なデバイスでウェブサイトを閲覧が可能です。 スリックスライダー（Slick Slider）とハンバーガーメニューはJavaScriptを用いて実装しました。