web ショップにおける web デザイン

10
Web シシシシシシシシ web シシシシ 12/6 08A1022 シシ シシ

Upload: sylvester-kirk

Post on 02-Jan-2016

20 views

Category:

Documents


1 download

DESCRIPTION

Web ショップにおける web デザイン. 12/6 08A1022 甲斐 広大. 売れるサイト1. 自分の考え ・利用者視点で考えたデザイン ・ PC 以外のデバイスにも対応している ・なるべく少ないクリックで自分のほしい情報を見つけることができる. 売れるサイト2. 調べた結果 ・利用者視点で考えたサイト作り →一目で何のサイトかわかる 誘導したいページのリンクを見やすいところに設置 ユーザー層に合わせたサイト作り ・なるべく少ないクリックで自分のほしい情報を見つけることができる - PowerPoint PPT Presentation

TRANSCRIPT

Page 1: Web ショップにおける web デザイン

Web ショップにおけるweb デザイン

12/6   08A1022甲斐 広大

Page 2: Web ショップにおける web デザイン

売れるサイト1自分の考え・利用者視点で考えたデザイン・ PC 以外のデバイスにも対応している・なるべく少ないクリックで自分のほしい情

報を見つけることができる

Page 3: Web ショップにおける web デザイン

売れるサイト2調べた結果・利用者視点で考えたサイト作り→ 一目で何のサイトかわかる 誘導したいページのリンクを見やすいところに設置 ユーザー層に合わせたサイト作り・なるべく少ないクリックで自分のほしい情報を見つけることができる→ グローバルナビゲーション(トップページ、商品一覧、サイトマップな

ど・・・)・人間中心設計 (HCD:human centerd design)・情報を上手く整理・ブランドイメージ

Page 4: Web ショップにおける web デザイン

Web ショップ自分が調べた売れるサイトの特徴を踏まえ

て代表的な Web ショップをリサーチしてみました

そしてその中でも自分が優れている(デザイン性があり、見やすく、さらにユーザー視点で作っていて購買意欲が高い)と思ったサイトをピックアップしてまとめてみました

Page 5: Web ショップにおける web デザイン

Amazon

世界最大の web ショップ・トップページがすっきりしており、自分のほしい情報にはすぐたどりやすい・最低限のカテゴリから自分のほしいものを探すことができる・レコメンダシステムを用い個々のユーザー対してオススメの商品を表示している トップページの半分以上にレコメンダシステムを使い、右部分をセール商品やベスト

セラーを表示しているのでユーザー視点のサイト・レビュー・アソシエイトを活用・ベストセラー商品をこまめに更新している・ Web という市場を利用し世界各国に対応している

Page 6: Web ショップにおける web デザイン

ユニクロ日本発信でグローバルに活動しているアパレルショップ・初めてスマートフォン向けの web ショップを作った・トップページは他のサイトと比べると大きく感じるが 大半が新作、セール商品のピックアップで構成されており 一つ一つが大きく見やすい・多彩な web コンテンツ・ facebook や twitter などと連携・無彩色を主に使っておりアクセントに ユニクロのコーポレートカラーである赤を使っている

Page 7: Web ショップにおける web デザイン

Apple Stores

Apple の製品が全てそろっている店・商品やサービスについてのキャッチャフレーズが特徴的・人物が映っている画像が季節に沿った感じになっている・トップページのフラッシュが iOS のホーム画面みたいな感じになっている・売っているものの大半が ipad,iphone,ipod,Mac と少ないのでトップページに全部載せ、そ

れらの関連する商品を左の部分に表示させており、わかりやすく感じる・商品で、できることがそれぞれのページでわかりやすく知ることができる・無彩色を主に使っており最低限ピックアップしたいところは別の色なので見やすい

Page 8: Web ショップにおける web デザイン

考察以上の3つのサイトまた、それ以外に自分が調べたサイトから考察しようと思います。・トップページ→ グローバルナビゲーションを使いユーザーが使いやすくする  セール商品や新商品などピックアップしたい商品はフラッシュを使い目立つようにす

る  トップページから求める物を探しやすいようにする

ex (カテゴリからプルダウンメニューを使う・・・など

・デザイン→ なるべく無彩色を使い、目立たせたいところは別の色を使う   ex (コーポレートカラーをアクセントにしたり・・・

画像やオススメ商品に季節感を出す  会社の持っているイメージを web ページに反映させる

Page 9: Web ショップにおける web デザイン

考察 2・文章→ 商品それぞれに説明文をつける

・・・(明確かつ簡単に  専門用語は使わない  誰が見ても見やすいように文字サイズを変更できるとよい  ・その他多種のデバイスに対応しているアフィリエイトを活用するレコメンデーションシステムを利用する ・・・・ユーザーそれぞれが見た商品の履歴、傾向を見てそれぞれに合った商品の情報を提供するシステム

レビュー商品の検索の仕方が多種

Page 10: Web ショップにおける web デザイン

これから・・・• 今回、発表したことを踏まえてより掘り下げて web ショップを調べる

• 調べたことを活かし、実際に自分で架空の web ショップを作る

• 他のサイトと比較する

現在はその比較の対象を検討中。。。数値化できるもの