雑貨 ECサイト(トップページ)デザイン

→ web版はこちら (新しいウィンドウが開きます)

雑貨ECサイト「Macky」のWebサイトデザイン

マンションサイトのデザイン制作をしながら出された次の課題。
時間が足りない!アイディアが出ない!自分がコーディングすることを前提のデザインとは?
ラフデザインの段階でやりなし、デザイン提出でやりなおし、コーディング最終チェックでやり直し・・・。
徹夜続きで何度も心が折れそうになりながらも、なんとか完成することができました。
コーディング後の作品は、デザイン作品よりバナーが増えています。

課題名
  • 雑貨ECサイトのデザイン・コーディング
制作時期
  • 2014年9月
案件概要
  • 名称 : 雑貨ECサイト「Macky」
クライアント要望
  • 整理されて見やすいレイアウト(グリッドデザイン)。
  • 特集やキャンペーンは、バナーを配置して目立つようにする。
  • カテゴリ一覧は、文字ばかりにならないよう工夫する。
  • 商品の豊富さを印象付けられるような、情報の多いトップページにすること。
サイズ
  • 横幅 960px(高さは任意)
  • ※ブラウザウィンドウサイズ 1000~1200pxを想定
制作意図
  • 20代~40代の、働く女性・主婦をメインターゲットと仮定しました。
  • 全体的に柔らかい雰囲気になるように、ベージュ系の色をベースカラーにしてナチュラルな雰囲気にまとめ、クリックしやすいように視認性を意識して作成しました。
  • エンドユーザーが「読みやすく、わかりやすく、探しやすい」ように2カラムレイアウトにしました。
  • また、クライアント様の「今後の更新しやすさ」を念頭に置きながら制作しました。
制作環境
  • Windows 8
  • Illustrator CS5、Illustrator CC
  • Photoshop CS5、Photoshop CC
制作時間
  • 約50時間(デザイン+コーディング)