Shopifyで構築した、ドライフラワーのECサイトです。
※スクール課題のデモストアとなります。
■ストアURL
URL:https://fleur-sereine-nako.myshopify.com/
(パスワード:demo)
■使用テーマ:Dawn
▼ターゲット
・20〜40代の女性
▼イメージ
・洗練
▼デザイン意図や考えたこと、設計で工夫した点など
【ストア全体】
・ドライフラワーが左右対称な形であることからシンメトリーを意識した要素を取り入れたいと考え、見出しや商品テキストなどは基本的に中央寄せとしています。ECストアでありながらギャラリー的な美しさも表現することを目指してデザインしました。
・カラーは基本的にメインカラー(グリーン)とテキストカラー(黒)のみを使用し、最も重要な購入ボタンにのみアクセントカラー(ゴールド)を使用することでCTAボタンを効果的に目立たせています。
・洗練された印象を与えられるように、画像やバリエーションボタンなどの角の半径は0としています。
・見出し〜コンテンツ間やセクション間の余白について、近づけるところは近づける、離すところは離すようにしてメリハリをつけました。
【ヘッダー・フッター】
・シンメトリーを意識、かつ洗練された印象を与えるため、ヘッダーはロゴが中央配置のレイアウトとしました。
・新商品のアピールのため、「New」は別出しにしてヘッダーの左端に配置することで目に留まりやすくしました。
・「FAQ」や「Contact」はストア内の優先度としては低めなので、フッターのみに表示しました。
【TOPページ】
・ブランド紹介
ブランドの背景が気になったユーザに向けて、テキストの下に「About Us」ページに繋がるボタンを配置しました。悪目立ちしないよう、黒のアウトラインボタンで控えめにしています。
・新商品
リピーターに向けるとともに、ちゃんと更新されているストアということを印象づけるため、商品コンテンツとしては一番上に配置しました。
・おすすめ商品
「冬におすすめ」「白基調」と定義することで、何のおすすめでどんな商品が載っているのかがすぐにわかり、ユーザに疑問や迷いを生じさせないようしました。
・ベストセラー
売り上げ上位の商品を紹介するためのセクションという位置付けとし、「すべてを表示」ボタンは非表示としました。
・セクションの表示順について
まず「新商品→おすすめ→ベストセラー」と一通りの商品一覧を出すことで、商品を選ぶ手助けになるようにしました。
その後「カテゴリー」で自分で辿って検索できるようにし、最後に「ブログ」と続いていくことで自然な流れでストアを回れるように設計しています。
・各見出しに日本語も併記することで何のセクションか一目でわかりやすくしました。
・商品画像を正方形、カテゴリー画像を長方形とあえて違う形にすることで、それぞれ意味の違うリンクであることが視覚的にわかるようにしました。
【商品一覧ページ】
・メインで表示している商品一覧と混在しないよう、他のコレクションなどの表示はなしとしました。
【商品詳細ページ】
・おすすめ商品には同カテゴリの商品(スワッグならスワッグ、リースならリースなど)を設定して統一し、おすすめとして違和感のないようにしました。
・「定番人気商品と一緒に、新作の商品も購入してほしい」という要件から、ベストセラーの商品には付属商品として同カテゴリの新商品を設定し、クロスセルを促せるようにしました。
【About Usページ】
・セクションの合間にパララックス画像を入れることで、説明内容が切り替わることがわかるようにしました。
・アクセス情報はブランド説明とはまた性質の異なる情報のため、背景色をグリーンにするなどしてデザインに差をつけました。
【FAQページ・お問い合わせページ】
・疑問の解決やお問い合わせに集中できるよう、画像の装飾は入れずにシンプルなデザインとしました。
作業範囲:デザイン・構築
制作時間:約15時間
制作時期:2025年12月