ECサイト制作

プロジェクト概要

春のデイリー服をテーマに、スマホ向けECサイトのトップページデザインを制作しました。
情報が多くなりがちなECサイトでも、見やすく操作しやすいページになるように、
ワイヤーフレームからデザインカンプ、バナー、ピクトグラムまで一連の流れを作りました。

課題

スマホで見るECサイトは、情報が詰まりすぎて
「どこを見ればいいのかわからない」「目的の商品に行きつきにくい」
という課題があると感じました。
特に、
・新着情報とカテゴリが分かれすぎて探しにくい
・ファーストビューでテーマが伝わりにくい
・世界観が統一されず印象に残らない
この3つが大きな問題だと思い、改善を目的に制作を進めました。

目的

・スマホで迷わず操作できる導線をつくる
・トップページだけで「春の新作がある」と直感でわかるようにする
・ブランドの世界観を淡く整えて、見やすく記憶に残るページにする
・新着・カテゴリ・SNSへの導線を自然に配置し、回遊しやすくする

ターゲット

２0〜30代の女性で、淡色やナチュラルな雰囲気のデイリー服が好きな人。
ZOZOや楽天で普段からスマホで買い物をしていて、
「着回しやすさ」「自然体の可愛さ」を重視するユーザーを想定しています

コンセプト

「日常に溶け込む、軽やかな春コーデ」
春らしい淡い色を軸にして、自然光の写真が映えるよう余白を多く取りました。
見た瞬間に“やわらかい雰囲気”が伝わるように、文字も装飾を抑え、
シンプルで呼吸しやすいレイアウトにしています。

デザインのポイント

● ファーストビュー

• 情報を詰め込みすぎず、1画面でテーマが伝わるように構成
• 春の色味（ミント・ベージュ・アイボリー）を使用
• キャッチコピーは短くし、写真の印象を邪魔しない配置に

● 新着エリア

• 画像の余白を揃えて、視線が流れるよう3カラムで統一
• 商品名・価格は最小限にして、写真が主役になるように調整

● カテゴリエリア

• ピクトグラムを自作
• 服種が直感でわかるように、線の太さや形をシンプルに統一
• 迷わずタップできる大きさに設定

● フッター

• SNS導線（公式SNS・Instagram・LINE）をまとめて配置
• ユーザーがブランドをフォローしやすいように、目に入りやすい位置へ

制作範囲・制作時間

下書き・構成・画像素材準備：３時間
ワイヤーフレーム：1時間
デザインカンプ：2時間
ピクトグラム：30分
ロゴ配置：10分（既存のものを調整）
バナー制作：3〜4時間
使用ツール：Illustrator、Photoshop

結果（想定）

報が整理され、スマホでの視認性が向上
カテゴリ導線がわかりやすくなり、ユーザーが回遊しやすいページに
世界観を統一したことで、ブランドの印象がやわらかく伝わる構成になった

制作工程・準備

制作物一覧

モックアップ

ワイヤーフレーム・デザインカンプ

制作時間
ワイヤーフレーム：１時間
デザインカンプ：２時間
サイズ：430×1100px（スマートフォンサイズを想定）
使用ツール：Illustrator

【変更点】
ワイヤーフレームのフッター部分と新着情報を「新着商品」にデザインカンプで変更
ファーストビューバナーの下にスライダーを埋め込めるように変更
SNSの文言追加

バナー

制作時間
バナー：３時間
ファーストビューバナー：１時間30分
使用ツール：Illustrator・Photoshop

ロゴ・ピクトグラム

制作時間
ピクトグラム：30分
ロゴ：10分（制作済のものを使用）
使用ツール：Illustrator

ロゴ名の意味
フランスで6月の月という意味。私が6月生まれなのと自分の名前を合わせて使いたいと思い、生成AIと考えました。上のロゴは月をイメージして作成しました。

工夫したところ

・ファーストビューと新作商品がスワイプできるように作成しました。
・春先の商品なので、色使いは春をイメージしました。
・見やすさと、どこに何があるのか明確にわかるように意識しました。
・デザインカンプにバナーやサイトのサイズを合わせられるよう調整しました。
・ピクトグラムを制作し目で見てわかるようにしました。

今後の流れ

実際にHTML/CSSを使用し、ブラウザで動くように制作していきたいです。

使用した画像サイト

オーダン：https://o-dan.net/ja
生成AI：Illustrator・Photoshop（生成拡張で使用）