初めてPhotoshopを使ってサイトデザインしました。(前職がDTPだったのでイラレ派だったのです)
線の作り方すらグーグル先生に伺うほどのアタフタっぷりでした…。
でも、自分の好きなデザインができてすごく楽しかったです!
ECサイト「Macky」 |
サイトの概要・目的
- 主に一般消費者を対象にしたネットショッピングサイト
- 贈答品から気軽に使える雑貨まで取り揃え
- サイトを通じて商品が売れること、サイト自体の認知度アップが目的
デザインの要望
- 整理されて見やすいレイアウト
- 特集やキャンペーンはバナーを配置して目立つようにすること
- カテゴリ一覧は、文字ばかりにならないよう工夫する
- 商品の豊富さを印象付けられるような、情報量の多いトップページにすること
サイト仕様
- 横幅:960px(高さは任意)
- キーカラー:明るい雰囲気のサイトになるような色を提案
- ターゲット:商品写真から想定できる主要購買層
必須要素
- サイトロゴ(ショップ名「Macky」)
- 特集の告知(メインエリアとサイドバーの両方に設置)
- 各種バナー(特集以外のキャンペーン、サービスなど)
- 人気商品(3位まで)
- スタッフのおすすめ(3点程度)
- 新着アイテム
- ショップからのお知らせ
- ショッピングガイド
- カテゴリ一覧
- ヘッダー、グローバルナビ、フッター
- メインビジュアル
|
制作期間 |
2014年9月29日~10月5日(40時間) ※コーディング込み |
制作意図 |
1.モバイル版への展開を考えたフラットデザイン
お客様がスマホで商品を検索することを想定し、今後モバイル版への展開がしやすいようにサイト全体をフラットデザインで作成しました。ナチュラルでスタイリッシュなイメージを出す為にサイト自体の色は抑え、白地に黒をメインに構成。重要な部分は赤や黄色で目立たせています。商品の画像をより引き立てるよう、すっきりと仕上げました。
2.使いやすさを考えた画面配置
色の要素を最小限にすることで情報を分かりやすく表示し、ユーザビリティを上げました。検索バーとショッピングカートを画面右上とサイドバーに配置し、ページ内のどこを見ているときにも商品の検索や、カート中身の確認にスムーズに移動できるようにしています。
3.一目で意味が分かるピクトグラム的なバナー
一目でバナーの役割が分かるよう、ピクトグラムのように単純化した絵柄と文字を組み合わせたバナーを作成しました。セールやサービス、キャンペーンなどのお客様に注目していただきたい部分に使用しています。
|
ロゴ |
|