WebショップにおけるWebデザイン 甲斐　広大.

Presentation on theme: "WebショップにおけるWebデザイン 甲斐　広大."— Presentation transcript:

1 WebショップにおけるWebデザイン 甲斐　広大

2 はじめに．．． この研究を始めるに至ったキッカケは 私がWeb業界で働くことになったからです。 Web制作をする上でWebデザインは 非常に重要な存在だと私は考えております。 私たちの生活の中でも身近なWebショップの 研究を通してWebデザインを より深く理解し、これからの仕事に活かして 行きたいと思っています。

3 Webショップについて ショッピングモール型Webショップ ASP型Webショップ Webショップとはインターネット上における
ショッピングサイトのことである。 大きく分けて ショッピングモール型Webショップ と ASP型Webショップ がある。

4 ショッピングモール型Webショップ 　楽天市場やYahoo!ショッピングのようなECサイトに自分の店を立ち上げる形式で日本にあるWebショップの約7割が該当する。 メリット ・Webに関する知識がなくても店を立ち上げることができる ・SEO対策がされているのでキーワード検索した際,結果の上位に表示される ・ショッピングモールの知名度があるので集客は期待できる デメリット ・非常に多くの店があるため同じものを取り扱っていることも多く、商品の価格競争が激しい ・集客などをサポートしてくれる反面, 料金が高額

5 ASP型Webショップ ・メリット ・デメリット Webショップを自分自身で運営する Webページを１から作るので自由度が高く
デザイン性の高いページを作ることができる ショッピングモール型に比べて安価 ・デメリット Webの知識が必要（Web制作やSEO対策など） 　　・・・しかしCMSを使えば 　　 Webの知識が乏しくてもサイトを運営することができる

6 色彩 Webページを制作するにおいて色差、明度差を 一定以上にするようにW3Cがガイドラインを出している 色差・・・・・RGBそれぞれの前景色と背景色の差を合計したもの 600以上が望ましいとされている 明度差・・・（R*299+G*587+B*114）/1000で明度差が出て 125以上が望ましいとされている

7 配色 Webサイトの配色によって利用者には 「また来たいと思わせる」 「快適にサイトを利用してもらう」 「長く滞在してもらう」 のように感じてもらわなければいけない。 例えばほとんどのWebショップの背景色は白や柔らかい淡色を使っている。 そうすることによって利用者の目を疲れさせなかったり他の色を際立たせることができる。

8

9 実験的に自分で簡易的なサイトを作ってみた。 背景を白にし、見ている人に注目してもらいたい部分だけ濃い色にしてみた。 逆に背景色に白や柔らかい淡色とはまた違った 派手な色を使うとどうだろうか？？

10

11 背景をさっきのものとはまた違った赤にしてみた。 見ていてストレスを感じると思う。 この例は極端だが、 このように背景１つにしてもなるべく見ている人の目を疲れさせないなど 気を遣って色のバランスを考えなければならない。 そう考えるとやはり背景は白が無難であると考えられる。

12 色が与える効果 色 効果 赤 活動的、警戒 橙 エネルギッシュ、幸福 青 冷静、クール 桃 可愛い、ロマンチック 黄 明るい、好奇心 茶
落ち着き、古風、堅実 緑 自然、安全 黒 フォーマル、男性 紫 優雅、個性的 白 純粋、ベース このように色それぞれ違った効果を持っている。 制作者はユーザのニーズに合わせて色を使い分けなければいけない。 また組み合わせによって別の効果が出たりすることもある。 例えば、踏切でよくみるような黒と黄は警戒の意味を持っている 色の明度、彩度を変えることでも持つ印象は変わってくる。

13 コーポレートカラー コーポレートカラーとは企業を象徴する色のことである。 企業ごとのWebページにもコーポレートカラーがアクセントとして 使われることがよくある。

14 ユーザインターフェース ユーザインターフェース（以下UI）とは コンピュータと人の間で情報をやり取りする手段である。 Web制作においては誰が見ても使いやすいサイトを作ることが重要である。 そのためにはメニューの位置はどうすればいいか？ 見出しの位置、大きさ、デザインは・・・？ どんな情報がユーザにとって有益？ などのようにユーザ視点でサイトの構成を考えなければならない。 そのためには情報設計をすることが重要である。

15 WebショップにおけるUIとは・・・？ Webショップにおいても先程触れたように 情報設計を考えることが重要である。 しかし普通のWebサイトとは違ってモノを売って稼ぐことが目的なので ただ単に高度なUIを使えばいいというわけではない。 まず第一に考えることは WebショップはWebという広い市場の中で商品を売らなくてはいけない。 よって「誰でも見やすいサイト」以前に 「誰もが見れるサイト」にしなくてはいけない。

16 情報設計は・・・ ①サイトの形を作る ②自分がユーザにどうしてほしいかを考える ③ユーザのニーズにあった商品について理解する ④理解した情報を整理する ⑤整理した情報にサイト構築 情報設計はユーザにとってわかりやすく かつ 使いやすく 構築することが求められてくる。

17 ラインナップ商品など売りたいと思ったアイテムは トップページの一目でわかる場所に設置するとよい。 そのための場所を常に確保しておき期間ごとに変えるといい。

18 大きい見出しを作り複数の特集を表示させることで より効果的に売り出すことができる。

19 見た目以外にもシステム面でのUIも増えてきている。 例えばAmazonにあるような「レコメンドシステム」が Webショップに合った良いUIだと私は思う。 ユーザそれぞれの履歴を分析し自分に合ったアイテムをオススメしてくれるシステムだ。

20 それ以外にも今の流行に合わせたUIもある。 Twitterやfacebookなどと提携して ユーザが気に入ったアイテムを教えあったりすることもできる。

21 まとめ Webショップだけに限らず、Webサイトを制作する際 作り手自身の視点で作るのでなく、ユーザそれぞれのニーズを考え それに見合ったサイトを作ることを目標にすることが不可欠である。 それによってユーザビリティに優れたサイトができるのではないだろうか？ また現在、HTML5でflashの代用ができるようになっている。 このように新しい技術によってできることの幅が増えてくるので 新しい技術に注目しておくことが大切である。