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

Slides:



Advertisements
Similar presentations
Web アクセシビリティ ~新しいアクセシビリティの基準~ 北海道情報大学 情報メディア学 部 情報メディア学科 新井山ゼミ 山口 岳.
Advertisements

サイトブリッジ株式会社 2014年月1 6日 ZOMEKI を利用した サイト制作の手順. Web サイトの構成 Web サイトの構成要素 ■ デザイン ・ベースカラー、セカンドカラー、アクセントカラー ・イラスト調、写真調 ・派手なトーン、地味なトーン ■ レイアウト ・3カラム、2カラム、1カラム.
インターネット道の駅 2011年 X 月 XX 日 株式会社 エム・テー・シー. 2 事業計画書目次(例) I. はじめに 1. 提案者プロフィール 2. 提案の背景 3. 事業の概要(含む事業コンセプト) II. 事業計画概要 1. ビジネスモデル 2. 事業理念と事業ビジョン 3. 顧客および顧客ニーズと市場規模.
卒業論文審査会 Web の読みやすさ実験ツールの開発 岩手県立大学 ソフトウェア情報学部 ソフトウェア情報学部 4 年 柴田 大樹 指導教員:鈴木克明 藤原康宏 市川尚.
SNS によるストレスの研 究 鴫原 康太. 本研究の目的 今回私がこの研究を行おうと思ったきっかけは、 SNS によるストレスを自分も少なからず感じるこ とがしばしばあったということが今回の研究を 行ったきっかけである。 「既読無視」「バカッター」など SNS のあり方、 使い方を誤って使ったり、
IBMユーザ研究会九州研T3 5章 Webの発展可能性. WWWの発展が企業に与えるもの 顧客・ユーザのリテラシー向上 顧客・ユーザの操作的な ” 常識 ” の変化 システム開発プロジェクトでの応用 ウェブの発展を、企業はどう捉えて、 自らをどう変えていく必要があるか? 新しいプラットフォームをより深く理解することで、
見る人に優しいホームページ作 り NTCommittee2 関東勉強会 ブルーミング 花井貴久子 2002 年 11 月 30 日.
企画書作成ソフトウェアの開発 佐々木研究室 05k1134 吉村祥平.
プロジェクトとは.
第1節 問題解決の工夫 1 情報を活用しよう 2 問題解決の工夫.
リーダー 本多啓介 ブレイン 藤井智裕・栗田光 ソフトウェア 藤浪健太・矢野公規 ハードウェア 市川亮・高山滉太・嶋津雅子
教育の情報化に関する手引のポイント 平成21年6月 平成21年度情報教育担当者研修
検索エンジン最適化.
プレゼンテーションソフトを使ってみよう! MicroSoft(マイクロソフト)社製
ユーザインタフェース 第4回 ナビゲーション.
休講掲示板の電子化 鵜川研究室 菊地洲人 (あらかじめチラシを配る) 情報数理4年の菊地です。 これから私の研究内容の発表を始めます。
経済入門 ⑤ 西山 茂.
「ICT社会におけるコミュニケーション力の育成」 研修モジュール C-6:ポスターセッション
動画投稿サイトによる広告 宣伝効果の研究 本多 俊元.
デザインと感性 第1講 担当:伊藤.
色彩心理学について  尾張 拓也  高山 和久  湯澤 健太.
前回 テキストベースの発表資料を30分で作成 グループ内で発表 グループディスカッション 携帯電話Docomoへの一本化について
“ホワイトニング”=ただ歯を白くするもの だと思っていませんか?
オペレーティングシステムⅡ 第3回 講師 松本 章代 VirtuaWin・・・仮想デスクトップソフト 2009/10/16.
発表課題 インターネット上においての色の表現 調査期間:2012年05月~06月 発表日:2012年06月07日
新しい環境行動のスタイル 環境市民「グリーンコンシューマーガイド」から
オペレーティングシステムⅡ 第1回 講師 松本 章代 VirtuaWin・・・仮想デスクトップソフト 2009/10/02.
経営学部 経営学科 ITビジネスコース 菊地真実子
さあ、楽しみながらホームページ作成に挑戦しましょう
クラシック音楽普及プロジェクト KG:mao B3 wakutin.
卒業研究 先輩の経験談に基づいた就職活動の目標管理方法
自動車レビューにおける検索と分析 H208032 松岡 智也 H208060 中西 潤 H208082 松井泰介.
~企画~ GO,桑田,ヒルズ.
ケータイの使い道に関心を 子どもがケータイをどのように使っているかご存知ですか?
デザインとサイトイメージ (色・文字・構図)
基礎プログラミング演習 第1回.
理論試験速報 理論問題部会長 鈴木 亨 先生 (筑波大学附属高等学校) にインタビュー.
ホームページ作成・更新講座 夏のコンピュータ学習会 画像
2003年度 データベース論 安藤 友晴.
(3)女性リーダーのためのマネジメント・プロセス 研修 管理職・リーダーの役割は自分の成長にもつながる!
迷宮師 コードレビュー チームカテキン.
練習問題アイテムバンクの開発研究 ~再生形式~
●校内研修(自立型研修)での活用 自立型研修での活用について紹介します。 研修の中でも最も身近なものとして、校内研修があげられます。
サッカーのユニフォームのデザインが人に与える影響いついての研究
携帯ゲーム機の進化 情報モラル研修 ~Nintendo3DSを例に~
情報モラル研修 携帯ゲームの進化 ~フィルタリングで危険回避~.
教育工学を始めよう ~研究テーマの選び方から論文の書き方まで~ (第1章)
ネットショップデザイン入門Ⅰ・ⅡSEO 2013/12/18 Webデザイン入門 SEOの基本.
売れるためのWEBサイト構築.
WEBアプリケーションの開発 2002年度春学期 大岩研究会2.
明日の授業でも作成を継続する予定です 2017/11/13、2017/11/14
緑茶の興味向上のためのキャッチフレーズの提案
売れるためのWEBサイト構築.
JAVAについて 高橋 雅哉.
情報工学科 05A2301 樽美 澄香 (Tarumi Sumika)
携帯ゲーム機の進化 情報モラル研修 ~Nintendo3DSを例に~
一人暮らしの男性のための料理検索システムの設計
人の心をつかむ3つのコツ ~子どもたちとのふれあい~
Webコミュニティ概念を用いた Webマイニングについての研究 A study on Web Mining Based on Web Communities 清水 洋志.
情報スキル活用 第4週 基礎技術-4 : その1(タグのまとめ).
コンピュータにログイン 第1章 コンピュータにログイン 啓林館 情報A最新版 (p.6-13)
人を幸せにするアプリケーションの開発 2004年度春学期 大岩研究プロジェクト2 2004年4月8日(木) 発表:武田林太郎.
基礎技術ー3 : Webページの標準規格について
佐世保市 保健福祉部 長寿社会課 生活支援体制整備事業 第2回 地域づくりを考える勉強会 佐世保市 第1層 生活支援コーディネーター 成冨努.
売れるためのWEBサイト構築.
知識の開発や活用を評価に役立てる 評価システムが知識を行動に変えるのを助けている企業がある。 ↓原理は???
本当は消去できていない!? ~データを完全消去する方法~
本当は消去できていない!? ~データを完全消去する方法~
課題演習の説明 ビジュアル技法を使い、聞き手の目を引き付ける資料デザインを表現します。
情報ネットワークと コミュニケーション 数学領域3回 山本・野地.
Presentation transcript:

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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