ECサイト

※画像クリックで全体像が表示されます※

→実際のWebページはこちらから←

課題名 ECサイトデザイン・コーディング
案件仕様 一般消費者を対象にしたネットショッピングサイト
贈答品から気軽に使える雑貨まで取り揃える
案件目的 サイトを通じて商品が売れること
サイト自体の認知度度アップが目的
デザイン要望
  • 整理されて見やすいレイアウト
  • 特集やキャンペーンは、バナーを配置して目立つようにする
  • カテゴリー一覧は、文字ばかりにならないよう工夫する
  • 商品の豊富さを印象付けられるような、情報量の多いトップページにする
必須要素
  • サイトロゴ（ショップ名「Macky」）
  • 特集の告知
  • 各種バナー（特集以外のキャンペーン、サービス など）
  • 人気商品（3位まで）
  • スタッフのおすすめ（3点程度）
  • 新着アイテム
  • ショップからのお知らせ
  • ショッピングガイド
  • カテゴリー覧
  • ヘッダー、グローバルナビ、フッター
  • メインビジュアル
制作意図 サイトの主要購買層を20代～40代の男女と想定し、 扱うアイテムからポップでありつつも全体としては落ち着いた印象を与えられるようデザインした。　
スマートフォンやタブレット等のポータブルデバイスでの閲覧も視野に入れ、 「スマートフォン用」「タブレット用」「PC用」の三段階のウィンドウサイズによって レイアウトを自動で変更できるレスポンシブデザインを採用した。　
メインビジュアルを特集バナーとして構成することで、最も目立つ場所に特集を配置できるようにした。 また、更に目を引くデザインにするため、JavaScriptによるカルーセルを実装した。
次に目立たせたいものは新着アイテムであると考え、ファーストビューとして目に入る位置とした。 それを含め、情報の重要度を精査したうえで順にコンテンツを配置した。
制作規格 横幅： 960px程度（高さは任意）
キーカラー：明るい雰囲気のサイトになるような色を提案
ターゲット： 商品写真から想定できる主要購買層
制作日 2015年8月
制作環境 OS/Windows7　使用ソフト/illustrator CS5・photoshopCS5
感想 ウィンドウ幅に応じてレイアウトを変えるレスポンシブサイトに初挑戦しました。
ラフ段階からレスポンシブ対応を頭の片隅で考えていたものの、 PC用の幅960のレイアウトでの課題提出を再優先としたため、 レイアウトの整合性がなかなかとれずかなり苦労しました。 最初期の段階で全レイアウトを想定し、 行程の全貌を概ね把握した上でのコーディングが重要であると痛感しました。

copyright © 2015 Webマーケティングデザイナー科 第9期生 生徒作品．All rights reserved.