Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Upcoming SlideShare
ウェブディレクションの基礎(第2回:制作・開発編) 先生:小嶋裕亮
Next

Share

ウェブディレクションの基礎(第1回:設計編) 先生:高瀬 康次

  説明:以下
ーーーーーーーーーーーーーーーーーーーーーーー
schoo WEB-campusは「WEBに誕生した、学校の新しいカタチ」。
WEB生放送の授業を無料で配信しています。
▼こちらから授業に参加すると、先生への質問や、ユーザーとのチャット、資料の拡大表示等が可能です。
https://schoo.jp/class/214/room
ーーーーーーーーーーーーーーーーーーーーーーー

Related Books

Free with a 30 day trial from Scribd

See all

Related Audiobooks

Free with a 30 day trial from Scribd

See all

ウェブディレクションの基礎(第1回:設計編) 先生:高瀬 康次

  1. 1. © 2013 DCHSCONFIDENTIAL ウェブプランナー 高瀬康次 第1回:設計編 1 ウェブディレクションの基礎
  2. 2. © 2013 DCHSCONFIDENTIAL 2 まずは自己紹介
  3. 3. © 2013 DCHSCONFIDENTIAL 講師紹介 3 氏名 高瀬 康次(タカセ ヤスジ) 年齢 1979年7月 34歳 職業 ウェブプランナー ウェブプロデューサー 手品師
  4. 4. © 2013 DCHSCONFIDENTIAL 所属 4 日本ディレクション協会 講師 DCHS(ダクハス) ウェブ戦略コンサルティング 株式会社gooya ウェブ制作 & システム開発
  5. 5. © 2013 DCHSCONFIDENTIAL 5 ここから本題
  6. 6. © 2013 DCHSCONFIDENTIAL 6 まえがき ウェブに関する用語については、概念的なものが多く、常に諸説あり、人 により、意味が全く異なることがあります。 本講における各用語の使い方は、講師である高瀬の主観、および経験に基 づいて定義されており、実際の業務の場において扱いやすいよう、あえて 狭義的に用いていることが多くあります。 本講義を受講される方には、ご自身の理解、または職場での用法に置き換 えていただき、ご理解くださいますようお願いいたします。
  7. 7. © 2013 DCHSCONFIDENTIAL 7 ウェブディレクターの概要 ウェブディレクターって何をする人?
  8. 8. © 2013 DCHSCONFIDENTIAL ウェブディレクターとは、 8 要件 人員 工期と と とを統括し、 その進行管理をする人です。
  9. 9. © 2013 DCHSCONFIDENTIAL ウェブディレクターとは、 9 ? ? ? 何をやるのか 誰がやるのか いつやるのか 要件 人員 工期と と とを統括し、 その進行管理をする人です。
  10. 10. © 2013 DCHSCONFIDENTIAL 10 例えて言うなら オーケストラにおける 指揮者 建設現場における 現場監督
  11. 11. © 2013 DCHSCONFIDENTIAL 11 ①設計 ②構築 ③運用 ウェブディレクションの流れ ウェブディレクションには、 大きく分けて3つの段階があります。
  12. 12. © 2013 DCHSCONFIDENTIAL 12 ①設計 ②構築 ③運用 ウェブディレクションの流れ 本日の講義では、設計について、 お話させていただきます。
  13. 13. © 2013 DCHSCONFIDENTIAL 13 ウェブにおける設計とは何か?
  14. 14. © 2013 DCHSCONFIDENTIAL 設計では 14 ? 何をやるのかを、 定めていきます。
  15. 15. © 2013 DCHSCONFIDENTIAL 設計のステップ 15 ①要件定義 ②情報設計 ③仕様設計
  16. 16. © 2013 DCHSCONFIDENTIAL ①要件定義とは 16 ヒアリングやブレストから得られた情報を整理し、 プロジェクトの概要を資料に取りまとめます。
  17. 17. © 2013 DCHSCONFIDENTIAL ここで受講されているみなさんに質問です。 17 要件定義で取りまとめられるべき情報には、 どのようなものがあると思いますか?
  18. 18. © 2013 DCHSCONFIDENTIAL ②情報設計とは 18 要件定義を元に、主に戦略面の設計を行います。 ➔ コンセプトワーク、マーケティングプラン
  19. 19. © 2013 DCHSCONFIDENTIAL ③仕様設計とは 19 要件定義を元に、主に戦術面の設計を行います。 ➔ ワイヤーフレーム、外部設計
  20. 20. © 2013 DCHSCONFIDENTIAL 20 情報設計の意義
  21. 21. © 2013 DCHSCONFIDENTIAL ブレること 方向性が定まっておらず、 ユーザーを進めるべき方向に導けていない。 NG 詰め込むこと 情報量が膨大となっていて、 ユーザーに適切な情報を提供できていない。 NG ウェブ制作において注意すべきこと 21 NG
  22. 22. © 2013 DCHSCONFIDENTIAL 詰め込むこと、ブレること 22 コンテンツの一貫性を損ない、 ユーザーの理解を妨げる原因となってしまう。
  23. 23. © 2013 DCHSCONFIDENTIAL 情報設計の意義① 詰め込まないために 23 伝えるべき情報を精査し、 適切にユーザーに届けることが大事。
  24. 24. © 2013 DCHSCONFIDENTIAL 情報設計の意義② ブレないために 24 関係者の意志を統一し、 みんなが同じ方向を向くことが大事。
  25. 25. © 2013 DCHSCONFIDENTIAL 25 情報設計の実践
  26. 26. © 2013 DCHSCONFIDENTIAL 登場人物(3C)を知る 26 自社 Company 顧客 Customer 競合 Competitor 恋敵 片想い 片想い
  27. 27. © 2013 DCHSCONFIDENTIAL 27 自社を知る Company
  28. 28. © 2013 DCHSCONFIDENTIAL 例題 28 フィクションです。
  29. 29. © 2013 DCHSCONFIDENTIAL 自社を知る 29 ① プロジェクトの背景 ➡ どのような状況にあるのか? ② プロジェクトの課題 ➡ どのような課題を抱えているのか? ③ プロジェクトの目的 ➡ どのような解決が求められるのか? ④ プロジェクトの施策 ➡ どのような事をしていくのか?
  30. 30. © 2013 DCHSCONFIDENTIAL Company① プロジェクトの背景 30 どのような状況にあるのか? ・地元(県内)では名が知られており、特に市内では年齢問わず、誰もが 知っているほどの知名度を獲得している。 ・年に2∼3回は、テレビや雑誌などの取材を受けており、全国な知名度 も広げている。 ・通信販売で、1日あたり、100個前後を販売している。 ・通信販売で、年間で、1億2千万円程度の売り上げがある。(内、50% 程度が市内からの注文)
  31. 31. © 2013 DCHSCONFIDENTIAL Company② プロジェクトの課題 31 どのような課題を抱えているのか? ・より事業を拡大するため、認知の拡大を図りたい。 ・「お取り寄せ」から脱却し、特別なきっかけを必要とせず、より気軽に 注文ができる体制を構築したい。 ・ウェブによる通販体制を構築したい。
  32. 32. © 2013 DCHSCONFIDENTIAL Company③ プロジェクトの目的 32 どのような解決が求められるのか? ・地域性の脱却 ➡ 有名店からお取り寄せしようではなく、 家の隣にあるお店に届けてもらうイメージの獲得 ・日常の存在としての認知 ➡ そのケーキ屋がどこに存在するか、 どこで製造されているかも気にしないくらいの存在 「もっとも身近なケーキ屋さん」としての地位の確立
  33. 33. © 2013 DCHSCONFIDENTIAL Company④ プロジェクトの施策 33 どのような事をしていくのか? ・ECサイトの充実(マルチデバイス対応) ➡ あらゆる端末において、購入可能にすることで、 「もっとも身近なケーキ屋さん」を演出します。 ・リピート施策の充実 ➡ メールやブログ、SNSなどのウェブメディアを活用し、 リピーターの獲得へのアプローチ手段を充実させます。
  34. 34. © 2013 DCHSCONFIDENTIAL Company④ プロジェクトの施策 34 Copyright © 2004-2012 gooya Corporation. All Rights Reserved.CONFIDENTIAL ウェブ展開(初期施策) 7 1. 新ブランドのウェブサイト、および商品購入/管理システムの構築 2. アクセス解析ツールの設置(googleアナリティクス) →各種数値、および目標達成率の評価、改善要件の洗い出し など 3. SEO内部施策 →見込み/潜在ユーザーを的確に誘引するためのキーワード選定 など Copyright © 2004-2012 gooya Corporation. All Rights Reserved.CONFIDENTIAL ウェブ展開(プロモーション展開) 8 4. 短期的効果を狙ったプロモーション展開 →LP(ランディングページ)の設置やウェブ広告の展開 など 5. 長期的効果を狙ったプロモーション展開 →FacebookやTwitter、ブログなどのソーシャルメディアを活用 6. その他のブランディング、プロモーション展開 →スマートフォン/タブレット端末向けのアプリ製作 ・・・etc Copyright © 2004-2012 gooya Corporation. All Rights Reserved.CONFIDENTIAL 展開のポイント 9 ユーザーとのエンゲージメントを作る PC、タブレットPC、スマートフォン、フィーチャーフォンとマルチデバイ スに対応し、 いつでも、どこでも、どの端末からでも、素早いアクセスを 可能にすることで、 一番身近なケーキ屋さん を演出します。 サービスへのリピートを誘引する 既存のユーザーには、入力済みのデータを保持することで、入力による ユーザーストレスを軽減します。※本サイトと同様 メールマガジン、Facebook、Twitterなどを活用し、定期的にメッセー ジを発信します。 合わせて「シェアボタン」を配置し、バイラル効果を期待します。 Copyright © 2004-2012 gooya Corporation. All Rights Reserved.CONFIDENTIAL 全体のイメージ 10 新ブランド ウェブサイト ユーザー ①マルチデバイス対応 運営本部 ②ユーザーデータの蓄積 アクセス解析 ③情報発信でのリピート、誘引施策 ソーシャルメディア メールマガジン SNSユーザー ソーシャルメディア ④バイラル 商品購入 お問い合わせ
  35. 35. © 2013 DCHSCONFIDENTIAL 35 競合を知る Competitor
  36. 36. © 2013 DCHSCONFIDENTIAL ここで受講されているみなさんに質問です。 36 洋菓子を求めるユーザーに対して、 競合として考えられる業態は、 どのようなものがあると思いますか?
  37. 37. © 2013 DCHSCONFIDENTIAL 37 顧客を知る Customer
  38. 38. © 2013 DCHSCONFIDENTIAL Customer① ペルソナモデル 38 基本情報 行動特徴 意識特徴 田川侑子、45歳、女性、専業主婦 神奈川県在住、持ち家(ローン支払い中) 夫(中堅企業の課長職)、長女(大学1年生)、長男:高校2年生 子供が成長して暇を持て余している ひまがあればテレビを見ている(特にワイドショー) 世話好き、甘いものが好き、出不精 1日1善をこころがけている 身なりには割りと気を使う ブランドに弱い
  39. 39. © 2013 DCHSCONFIDENTIAL ニーズ 顧客のもつ欲求や不安 シーズ 自社のもつ技術やノウハウ Customer② シーズとニーズ 39 ・ 全国の倉庫会社、および全国規模の運 送会社との提携により、迅速な配送網 を実現している。 ・ 甘いものが食べたい、でも外出するの はめんどくさい。 ・ 欲しいと思ったその日に、手元に届け てほしい。 ・ 急に贈り物を用意する必要にせまられ た。
  40. 40. © 2013 DCHSCONFIDENTIAL 40 目標設定
  41. 41. © 2013 DCHSCONFIDENTIAL ECサイトの充実(マルチデバイス対応) ・ デバイス別の訪問者数、購入者数、販売個数、販売単価 など ECサイトの充実(マルチデバイス対応) ・ メール購読者数、ブログのPV数、SNSフォロワー数、リーチ数、各種 メディアからの誘導数、リピートユーザー数、リピート率 など KPI(定量化(数値化)できる目標) 41
  42. 42. © 2013 DCHSCONFIDENTIAL KGI(最終的な利益目標) 42 ・ 2年後に、1日あたりの宅配個数500件 ・ 2年目の年間の売り上げ3億円
  43. 43. © 2013 DCHSCONFIDENTIAL 43 仕様設計
  44. 44. © 2013 DCHSCONFIDENTIAL 仕様設計でもっとも意識すべきこと 44 1秒の追求
  45. 45. © 2013 DCHSCONFIDENTIAL ナビゲーション設計 45 サイト内のコンテンツが見通せる ナビゲーション構成にする。 1秒で理解を得る
  46. 46. © 2013 DCHSCONFIDENTIAL ファーストビュー 46 面接の極意 「第一印象で8割決まる!」 1秒で好感を得る
  47. 47. © 2013 DCHSCONFIDENTIAL サイトマップ 47 1秒でも目的の情報への距離が遠いと、 多くのユーザーが離脱します。 可能な限り、浅く、浅く。
  48. 48. © 2013 DCHSCONFIDENTIAL グルーピングとシナリオ 48 © 2012 DCHSCONFIDENTIAL トップページのユーザーシナリオ 31 タイトルエリア ステータスエリア セールスエリア サービスエリア スタッフエリア ステータスエリア 何ていうところ? 歯科医院には珍しい 和 のキービジュアルと共に院名を見せることで、ユーザーに院名を印象強 く記憶してもらい、「他の歯科医院とはちょっと違うぞ...?」という認識を持ってもらいます。 いつ、どこで利用できるの? 店舗系業態にとって必要最小限、かつ最も必要な情報である営業スケジュールや問い合わせ 先、交通アクセスに関する情報を、ストレス無く得られるよう、確実にユーザーに伝えます。 他の歯科医院と何が違うの? セールスポイントを、簡潔に、具体的に、かつ印象強く配置し、他の歯科医院との差別化とな る優位点をユーザーに訴求します。 どんなことをやっているの? 本来であればタイトルエリア後、ステータスエリアの前に来るべき要素ですが、 歯科医院 と いう誰もが知っている(と思い込んでいる)業態のため、補足としての配置としました。 どんな人がやっているの? スタッフの 顔 や キャラクター を見せることで、ユーザーに安心感や親近感を与えることを目 的とします。 いつ、どこで利用できるの? すべての要素を閲覧したユーザーのクロージングとして、再度、営業スケジュールや問い合わせ 先、交通アクセスに関する情報を表示します。 © 2012 DCHSCONFIDENTIAL (C) 2012 こしみず歯科医院 診 療 日 案 内 ご予約・お問い合わせ 0465-68-4182 交 通 アク セ ス スタッフ募集スタッフ紹介 トップページのカテゴライズ 29 タ イ ト ル エ リ ア ステータスエリア① セールスエリア サービスエリア スタッフエリア ステータスエリア② ページ内に配置する各要素を、 内容や目的に応じて分類することで、 ユーザーの理解を助け、 サイト閲覧におけるストレスを、 最小限に抑えます。 1秒でも理解を妨げると、 多くのユーザーが離脱します。 適切なグルーピングと、適切なシナリオ(文脈)は、 ユーザーの理解を助けます。
  49. 49. © 2013 DCHSCONFIDENTIAL ワイヤーフレーム 49 ユーザー名 パスワード ユーザー種別 作成日時 最終ログイン日時 [ユーザー作成年月日時分] [最終ログイン年月日時分] 削除 [ユーザー作成年月日時分] [最終ログイン年月日時分] 削除 [ユーザー作成年月日時分] [最終ログイン年月日時分] 削除 [ユーザー作成年月日時分] [最終ログイン年月日時分] 削除 [ユーザー作成年月日時分] [最終ログイン年月日時分] 削除 [ユーザー作成年月日時分] [最終ログイン年月日時分] 削除 [ユーザー作成年月日時分] [最終ログイン年月日時分] 削除 [ユーザー作成年月日時分] [最終ログイン年月日時分] 削除 施主 業者 管理者 CONFIDENTIAL Copyright © 2004-2013 gooya Corporation. All Rights Reserved. ユーザー管理 > 新規ユーザー登録 17 サイトロゴ オーナーページ 管理画面 ※こちらは内要素をご確認いただくもので、レイアウトはデザイン工程で変更される場合がございます。 物件管理 ユーザー管理 アクセスログ ○○○○ イメージ ○○○○ リンク付きイメージ ○○○○ アクション付きイメージ □□□□■□□□□■ テキスト □□□□■□□□□■ リンク付きテキスト □□□□■□□□□■ アクション付きテキスト ユーザー名 を入力して 追加種別   ▼ をとパスワード [ユーザー名] [パスワード] 変更を保存 [ユーザー種別] ▼ [ユーザー名] [パスワード] [ユーザー種別] ▼ [ユーザー名] [パスワード] [ユーザー種別] ▼ [ユーザー名] [パスワード] [ユーザー種別] ▼ [ユーザー名] [パスワード] [ユーザー種別] ▼ [ユーザー名] [パスワード] [ユーザー種別] ▼ [ユーザー名] [パスワード] [ユーザー種別] ▼ [ユーザー名] [パスワード] [ユーザー種別] ▼ テキストボックスにユーザー名、パスワードを入力し、 「ユーザー種別」を選択して「追加」ボタンをクリックすると、 新しいユーザーが追加されます。 フォーマットは好みでいいと思います。
  50. 50. © 2013 DCHSCONFIDENTIAL 仕様設計で忘れてはならないこと 50 地味な情報も大切に
  51. 51. © 2013 DCHSCONFIDENTIAL メタ情報 51 CONFIDENTIAL Copyright © 2004-2013 gooya Corporation. All Rights Reserved. メタ情報 14 META OGP 内容 トップページトップページ トップページ title 全角32文字前後以内 og:title 要制作 description 全角124文字以内 og:description 要制作 - og:image 縦横200pxの画像 要制作 下層ページ下層ページ 下層ページ title 全角32文字前後以内 og:title 要制作 description 全角124文字以内 og:description 要制作 - og:image 縦横200pxの画像 要制作 共通共通 共通 keywords - 要制作 - og:type 要制作 favicon - 要制作 スマートフォン用ホームアイコンスマートフォン用ホームアイコン 要制作 メタ情報は、集客導線上、 非常に重要な役割を担っています。
  52. 52. © 2013 DCHSCONFIDENTIAL ディレクトリマップ 52 ディレクト名やファイル名は、 SEO上、非常に重要な役割を担っています。 意味のある命名をしましょう。
  53. 53. © 2013 DCHSCONFIDENTIAL 対象環境 53CONFIDENTIAL Copyright © 2004-2013 gooya Corporation. All Rights Reserved. 対象環境の定義 4 ※ 「Safari」「Mozilla Firefox」「Google Chrome」につきましては、検証時点で最新のバージョンを対象とします。 OS ブラウザ PCサイト SPサイト Windows XP Internet Explorer 8 Windows 7 Internet Explorer 9 Windows 7 Mozilla Firefox 17Windows 7 Google Chrome 23 Mac OS X 10.8 Safari 6 Mac OS X 10.8 Mozilla Firefox 17Mac OS X 10.8 Google Chrome 23 iOS 6.1 iPhone 4S 標準ブラウザ iOS 6.1 iPhone 5 標準ブラウザ Android OS 2.1 Xperia SO-01B 標準ブラウザ Android OS 2.3.4 AQUOS PHONE f SH-13C 標準ブラウザ Android OS 4.x 端末未定 標準ブラウザ ⃝ - ⃝ - ⃝ - ⃝ - ⃝ - ⃝ - ⃝ - - ⃝ - ⃝ - ⃝ - ⃝ - ⃝
  54. 54. © 2013 DCHSCONFIDENTIAL 言語仕様 54 CONFIDENTIAL Copyright © 2004-2013 gooya Corporation. All Rights Reserved. 技術仕様の定義 5 PC SP 画面解像度(想定) ブラウザ表示領域(想定) マークアップ クライアントサイド サーバーサイド 文字コード CMS 解析ツール等 横1024px 縦768px 横640px 縦960px 横1000px 縦640px 横320px 縦480px HTML 5 + CSS 3 HTML 5 + CSS 3 Javascript 1.9( jQuery 1.9.1) Javascript 1.9( jQuery 1.9.1) PHP 5.4PHP 5.4 UTF-8UTF-8 Wordpress 3.5.1Wordpress 3.5.1 Google Analytics(含む Google ウェブマスターツール)Google Analytics(含む Google ウェブマスターツール)
  55. 55. © 2013 DCHSCONFIDENTIAL トーン&マナー 55 ・ デザインレギュレーション ・ カラースキーム ・ デザインキーワード ・ デザイン参考サイト など
  56. 56. © 2013 DCHSCONFIDENTIAL 以上 56 でした。
  57. 57. © 2013 DCHSCONFIDENTIAL 日本ディレクション協会のご案内 57 https://www.facebook.com/direkyo.org
  • miccinakatani

    Jan. 24, 2020
  • KenichiroToyosato

    May. 19, 2018
  • ssuser5bf520

    Apr. 10, 2016
  • tokuriki

    Jul. 10, 2015
  • stylethewalker

    Jun. 22, 2015
  • SaoriFukuda

    May. 2, 2015
  • sanocchi1122

    Apr. 23, 2015
  • 5by4

    Mar. 31, 2015
  • JunyaKubo

    Mar. 30, 2015
  • ai0503

    Mar. 17, 2015
  • nakanogen

    Feb. 20, 2015
  • sayakaiwata923

    Feb. 6, 2015
  • chibiteke

    Feb. 3, 2015
  • takanorikurosaki7

    Jan. 28, 2015
  • nobynoby

    Dec. 25, 2014
  • hasegawatakeya

    Dec. 8, 2014
  • miyukiko

    Oct. 1, 2014
  • marinayamamoto5492

    Sep. 3, 2014
  • muse71

    Aug. 11, 2014
  • megumuikawa

    Jul. 31, 2014

  説明:以下 ーーーーーーーーーーーーーーーーーーーーーーー schoo WEB-campusは「WEBに誕生した、学校の新しいカタチ」。 WEB生放送の授業を無料で配信しています。 ▼こちらから授業に参加すると、先生への質問や、ユーザーとのチャット、資料の拡大表示等が可能です。 https://schoo.jp/class/214/room ーーーーーーーーーーーーーーーーーーーーーーー

Views

Total views

5,469

On Slideshare

0

From embeds

0

Number of embeds

1,030

Actions

Downloads

0

Shares

0

Comments

0

Likes

34

×