• ホーム
  • キャラクター制作
  • マンションサイト
  • 雑貨ECサイト

雑貨ECサイト「Macky」Webサイト制作

実際のWebサイトはこちら♪ (ロゴクリックで戻れます)

課題3:ECサイト

初めてレイアウトのデザインからコーディングまで一通り制作した思い出深い作品です。
ラフの段階で、サイト全体の趣旨や特集バナーの内容を考えたりと悩む時間も多かったですが、
その分やりたかった事が表現できたと思っています。
制作を通して苦手意識の強かったコーディングを少し克服できた気がします。

課題名 雑貨ECサイト「Macky」Webサイト制作
サイト概要・目的
  • 一般消費者を対象としたネットショッピングサイト
  • 贈答品から気軽に使える雑貨まで幅広い商品を取り揃えている
  • サイトを通じて商品が売れること、サイト自体の認知度アップが目的
クライアント要望
  • 整理されて見やすいレイアウト
  • 特集やキャンペーンにお客様を誘導できるように目立たせる
  • カテゴリー一覧は文字ばかりにならないようにする
  • 商品の豊富さを印象付けられるようなトップページにする
  • サイズ:幅 950px 縦 任意
    (※ブラウザウィンドウサイズ1000~1200pxを想定)
ターゲット 忙しくてなかなか買い物に行けない大人の女性(社会人・主婦)
構成要素 サイトロゴ(ショップ名「Macky」) / 特集の告知(季節柄やサイトの性格を想定して4つ考える) / 各種バナー(特集以外のキャンペーン・サービス紹介など) / 人気商品の紹介 / スタッフのおすすめ(3点程度) / 新着アイテム / ショップからのお知らせ / ショッピングガイド / 商品カテゴリー一覧 / ヘッダー、グローバルナビ、フッター / メインビジュアル
コンセプト サイト全体のデザインは見やすく分かりやすいようにグレーやベージュなどの落ち着いた色合いでまとめ、 反対に各種バナーは思わずクリックしたくなるようなカラフルで楽しいデザインにしました。
背景色を白にすることでごちゃごちゃし過ぎないようにしています。
他のECサイトに埋もれないように差別化として猫をテーマにし、そこから雑貨が好きなスタッフの遊び心が伝わるように イラストを多く取り入れました。
ユーザビリティを考え、クリックできる場所にはカーソルを合わせると変化が起きるようにしてあります。
四角ばかりのレイアウトで単調にならないように、新入荷アイテムは円形にして並べました。
制作環境 Illustrator CS5 CS6・Photoshop CS5 CS6
copyright © 2015 Webマーケティングデザイナー養成科 第9期生 生徒作品.All rights reserved.