「かわいいは、毎日つくれる。」
架空のコスメブランド「mimi. COSMETICS」を想定したECサイトの制作実績です。原宿にあるコスメセレクトショップという設定で、オリジナルコスメとセレクトコスメを扱うオンラインショップをつくりました。
パステルカラーを基調とした世界観の中で、商品一覧・検索・絞り込み・お気に入り・カート・購入手続きまで、一連のショッピング体験を再現しました。PC・スマートフォンに対応したレスポンシブデザインを採用しています。
パステルカラーの世界観
ピンクを中心としたパステルカラーと、手書き風の英字やハートのモチーフで、コスメ選びのときめきが伝わるデザインにしました。
検索・絞り込みで探しやすい商品一覧
24アイテムをキーワード検索、カテゴリ・ブランドでの絞り込み、並び替えで探せる商品一覧にしました。
お気に入り・カート
商品カードのハートでお気に入りに保存でき、商品詳細からカートに入れて数量を変えられます。内容はブラウザの中だけに保存され、外部には送信されません。
購入手続きまでの一連の流れ
カート・購入手続き・注文完了の3ステップで、オンラインショップの購入の流れを体験できます。デモのため、入力内容の送信や決済は行いません。
ブランド・店舗・ランキングなどのコンテンツ
オリジナルコスメとセレクトコスメの紹介、人気ランキング、特集、店舗・スタッフ紹介、よくある質問など、ECサイトに必要なページを一通り用意しました。
制作概要
- サイト名
- mimi. COSMETICS
- 制作区分
- ECサイト・デモサイト（架空ブランド）
- 業種
- コスメ・美容（ECサイト）
- ページ数
- 44ページ（商品詳細24ページを含む）
- デザイン
- Pastel / Pop / Cute
- 対応端末
- PC・タブレット・スマートフォン
- 主な制作内容
- 企画・構成・デザイン・HTML/CSS/JavaScript実装・商品データ管理・レスポンシブ対応・SEO基本設定・画像最適化
※架空ブランドのデモサイトであり、実際の商品販売・決済は行っていません。