商品詳細ページです。
お世話になっております。相川です。
先日は質問にご回答いただき、ありがとうございました。
本件のご提案いたします。
▼デザインプレビュー
https://www.figma.com/proto/p1NkHUV9EReUsU4h4PBjaj/crowdworks?type=design&node-id=142-58&t=uNAToZ1YhTwaceVn-1&scaling=contain&page-id=62%3A2&mode=design
※figmaの仕様上、PCの枠も一緒に表示されるため、実際より小さく見えてしまいます。
▼コンセプト(MALAIKAらしさ)
御社の商品・サイトを拝見し、MALAIKAらしさは以下の点であると考えました。
・”多種多様な商品”を有している。アメリカ大陸から東南アジア、アフリカまで世界中から商品が集まっている。
・現地の職人が作っており”本物”である。
これらの商品の魅力を伝えるためには、華美なあしらいや、らしさを全面に出すデザインよりも、
商品画像をシンプルに見せることで、「多種多様」で「本物」であることが伝わると考えました。
したがって、商品画像が霞んでしまうデザインではなく、
シンプルで見やすく、何より商品画像を中心に閲覧できるデザインコンセプトとしました。
▼利便性の改善
リニューアルの目的である利便性の改善について、ポイントを記載します。
ヘッダー)
・初めに流入するユーザーは大カテゴリを選べるようにしつつ、
商品を閲覧しやすいように、追従するヘッダーは最低限の要素のみとしました。
・小カテゴリを含むカテゴリやガイドはハンバーガーメニュー内に入れ込みました。
商品エリア)
・キービジュアルのサイズも落とし、ファーストビューで必ず商品が見えるようにしています。
・コンセプトに従い、文字よりも写真が目立つようにしています。
・商品に関する情報も絞り、まず興味ある商品を探し、気になった商品は詳細画面で詳しく見るような設計にしています。
※細かくは面談の際にお話させてください。
現状のECの仕様を考慮してデザインしているため、
別カラーを示すアイコンや商品そのものにいいねをする機能は入れていなかったりと、
内容についてはまだ議論の余地があると考えております。
(この辺りはSKUの扱いをシステム側でどう処理しているかに直結するため)
まずはこちらでご検討いただけますと幸いです。
どうぞよろしくお願いいたします。
メンバーからのコメント
ハンバーガーメニューにマウスオンした時の画面です。
先ほど、お送りしたプレビューがわかりづらかったので、整理してお送りいたします。
▼TOP
https://www.figma.com/proto/p1NkHUV9EReUsU4h4PBjaj/crowdworks?type=design&node-id=68-15&t=upb4E0bq0SH3mCGV-0&scaling=contain&page-id=62%3A2
▼TOPのヘッダー別案
https://www.figma.com/proto/p1NkHUV9EReUsU4h4PBjaj/crowdworks?type=design&node-id=229-2&t=upb4E0bq0SH3mCGV-0&scaling=contain&page-id=62%3A2
▼商品詳細ページ
https://www.figma.com/proto/p1NkHUV9EReUsU4h4PBjaj/crowdworks?type=design&node-id=142-58&t=upb4E0bq0SH3mCGV-0&scaling=contain&page-id=62%3A2
▼メニューにマウスオンした時の挙動
https://www.figma.com/proto/p1NkHUV9EReUsU4h4PBjaj/crowdworks?type=design&node-id=103-610&t=upb4E0bq0SH3mCGV-0&scaling=contain&page-id=62%3A2
以上です!ご検討のほど、よろしくお願いいたします。
相川