presentation for mobile daigaku
TRANSCRIPT
![Page 1: Presentation for Mobile Daigaku](https://reader033.vdocuments.mx/reader033/viewer/2022052823/55586a56d8b42a8d018b4a6d/html5/thumbnails/1.jpg)
HCD(人間中心設計)を活用したWebプロジェクト設計
2010.8.2株式会社 コンセント
大岡 旨成
![Page 2: Presentation for Mobile Daigaku](https://reader033.vdocuments.mx/reader033/viewer/2022052823/55586a56d8b42a8d018b4a6d/html5/thumbnails/2.jpg)
HCDとは Webプロジェクトでの活用 活用事例 まとめ
自己紹介
名前 大岡 旨成(OHOKA, Munenari)所属 株式会社コンセント職種 ディレクター、プロジェクトマネージャー資格 人間中心設計推進機構認定 人間中心設計専門家主な実績株式会社東京国際フォーラム、株式会社カネボウ化粧品、
六本木ヒルズ(森ビル株式会社)、青山商事株式会社 他趣味 神輿を担ぐ、ブラジル、育児
経歴
201020092008200720062005200420022001
デザイナー~ディレクター
ディレクター(コーディング等も少々)
ディレクター
プロジェクトマネージャー
2003
2003年5月コンセント入社
東京国際フォーラム
カネボウ化粧品 青山商事六本木
ヒルズWebアプリ開発
![Page 3: Presentation for Mobile Daigaku](https://reader033.vdocuments.mx/reader033/viewer/2022052823/55586a56d8b42a8d018b4a6d/html5/thumbnails/3.jpg)
HCDとは
HCDとは
![Page 4: Presentation for Mobile Daigaku](https://reader033.vdocuments.mx/reader033/viewer/2022052823/55586a56d8b42a8d018b4a6d/html5/thumbnails/4.jpg)
HCDとは Webプロジェクトでの活用 活用事例 まとめ
HCDとは
人間中心設計Human-Centered Design=User-Centered Design
人間中心設計推進機構http://www.hcdnet.org/
人間中心設計専門家認定制度・2010年3月末に第1期合格者を発表(119名)・申請者のこれまでの実績(実務5年以上)を審査し、合否判断・プロジェクトマネージャーや組織管理者など、設計担当者以外も対象に含まれる
![Page 5: Presentation for Mobile Daigaku](https://reader033.vdocuments.mx/reader033/viewer/2022052823/55586a56d8b42a8d018b4a6d/html5/thumbnails/5.jpg)
HCDとは Webプロジェクトでの活用 活用事例 まとめ
HCDとは
利用者の観点で製品を作る
従来、個人/制作者側の意識として注意してきたものを、
プロジェクトのプロセスとして取り入れる
発注者側もこのプロセスを理解し、プロジェクトを進行していく
![Page 6: Presentation for Mobile Daigaku](https://reader033.vdocuments.mx/reader033/viewer/2022052823/55586a56d8b42a8d018b4a6d/html5/thumbnails/6.jpg)
HCDとは Webプロジェクトでの活用 活用事例 まとめ
HCDのプロセス
利用の状況把握と明示(観察)
ユーザーと組織の要求事項の明示(理解)
設計による解決策の作成(設計)
要求事項に対する設計の評価(評価)
基本的な進め方:製品の構想段階から対象ユーザーとその要求を明確にし、要求に合ったものを設計し、満足度合いを評価します。
※ ISO 13407 (JIS Z 8530):インタラクティブシステムの人間中心設計プロセス
解決策が妥当と評価されるまで繰り返す
![Page 7: Presentation for Mobile Daigaku](https://reader033.vdocuments.mx/reader033/viewer/2022052823/55586a56d8b42a8d018b4a6d/html5/thumbnails/7.jpg)
HCDとは Webプロジェクトでの活用 活用事例 まとめ
製品のライフサイクル
売上(利用者数)
製品A 製品B 製品C
設計フェーズを十分に設けずに開発を行った製品は、発売直後の売上に貢献するため機能や性能にこだわった作りになる傾向がある。短期間で連続した新製品が必要になる。
時間
![Page 8: Presentation for Mobile Daigaku](https://reader033.vdocuments.mx/reader033/viewer/2022052823/55586a56d8b42a8d018b4a6d/html5/thumbnails/8.jpg)
HCDとは Webプロジェクトでの活用 活用事例 まとめ
HCDを利用した場合の製品のライフサイクル
時間
売り上げ(利用者数)
製品A製品A
実際にエンドユーザがその製品を「具体的に」どう使うのかまでを想定して「デザイン」することで継続的な製品利用、リピート利用・購入が見込める。
リニューアルからの経過年月東京国際フォーラム:6年カネボウ化粧品:5年
![Page 9: Presentation for Mobile Daigaku](https://reader033.vdocuments.mx/reader033/viewer/2022052823/55586a56d8b42a8d018b4a6d/html5/thumbnails/9.jpg)
HCDとは Webプロジェクトでの活用 活用事例 まとめ
ユーザーとデザイナー
エンドユーザ デザイナー
エンドユーザ デザイナー
エンドユーザデザイナー
デザイナーとユーザーが全く異なる
デザイナーがエンドユーザーに一部含まれる
エンドユーザーとデザイナーが全く同じ
→理解が足りなく、良いものは作れない
→まだ知らないことがあるという前提が必要
HCDプロセスの方向
![Page 10: Presentation for Mobile Daigaku](https://reader033.vdocuments.mx/reader033/viewer/2022052823/55586a56d8b42a8d018b4a6d/html5/thumbnails/10.jpg)
HCDとは Webプロジェクトでの活用 活用事例 まとめ
HCDのメリット
ユーザーの行動やデザインの妥当性をあらかじめ検証できる。
一度その製品を使ったユーザーが再度(継続的に)利用しやすい。
継続的な利用が見込めるため、製品ライフサイクルを長く見込める。
最適解が見出しにくい、デザインの評価軸になり得る。
プロジェクトを円滑に進めるための論拠となる。
永続的なPDCAサイクルを構築できる。
![Page 11: Presentation for Mobile Daigaku](https://reader033.vdocuments.mx/reader033/viewer/2022052823/55586a56d8b42a8d018b4a6d/html5/thumbnails/11.jpg)
HCDとは
Webプロジェクトでの活用
![Page 12: Presentation for Mobile Daigaku](https://reader033.vdocuments.mx/reader033/viewer/2022052823/55586a56d8b42a8d018b4a6d/html5/thumbnails/12.jpg)
HCDとは Webプロジェクトでの活用 活用事例 まとめ
Web制作のプロセス
調査・分析 設計 デザイン・制作 ローンチ
評価
評価(効果測定)
HCDの主な関与領域
改善案の検討
評価
![Page 13: Presentation for Mobile Daigaku](https://reader033.vdocuments.mx/reader033/viewer/2022052823/55586a56d8b42a8d018b4a6d/html5/thumbnails/13.jpg)
HCDとは Webプロジェクトでの活用 活用事例 まとめ
コンセントのワークフロー
調査・分析 設計 デザイン 制作 運用・
効果測定
コンセントの標準ワークフロー自体が、HCDプロセスに則っています。
受注後に詳細な調査・分析を行い、プロジェクトの要件定義を行った後、設計、デザイン、制作作業を実施します。
リニューアル後も、継続して運用・効果測定を行い、PDCAサイクルを繰り返し、常に成長するWebサイトを目指します。
![Page 14: Presentation for Mobile Daigaku](https://reader033.vdocuments.mx/reader033/viewer/2022052823/55586a56d8b42a8d018b4a6d/html5/thumbnails/14.jpg)
HCDとは Webプロジェクトでの活用 活用事例 まとめ
調査・分析
ユーザーの理解、現状の課題や目指すべき方向性を探るためのステップ
・ユーザビリティテスト・エキスパートレビュー / ヒューリスティック評価・ヒアリング・ネットリサーチ / グループインタビュー・エスノグラフィ・競合調査・アクセスログ分析
ユーザーの把握、モデリング
結果のレポーティング
![Page 15: Presentation for Mobile Daigaku](https://reader033.vdocuments.mx/reader033/viewer/2022052823/55586a56d8b42a8d018b4a6d/html5/thumbnails/15.jpg)
HCDとは Webプロジェクトでの活用 活用事例 まとめ
設計
概要設計
問題解決のための方針・方向性作り
ラフスケッチ手書きワイヤーフレームペーパープロトタイピングブレインストーミング
設計プロセスの認識共有
仮説の策定
![Page 16: Presentation for Mobile Daigaku](https://reader033.vdocuments.mx/reader033/viewer/2022052823/55586a56d8b42a8d018b4a6d/html5/thumbnails/16.jpg)
HCDとは Webプロジェクトでの活用 活用事例 まとめ
設計
詳細設計
解決案の具体化、比較検討・妥当性判断可能な形への作りこみ
詳細ワイヤーフレームサイトストラクチャーユーザーエクスペリエンスフロープロトタイプ制作
専門家でなくても理解可能な形への落とし込み
多角的な検証
評価ポイントを策定する
![Page 17: Presentation for Mobile Daigaku](https://reader033.vdocuments.mx/reader033/viewer/2022052823/55586a56d8b42a8d018b4a6d/html5/thumbnails/17.jpg)
HCDとは Webプロジェクトでの活用 活用事例 まとめ
評価
解決案が妥当かどうかの検証・評価
ペーパーでのユーザーテスト(紙芝居)ロールプレイ
など
アクセスログ解析ユーザーアンケート調査
など
ローンチ前
ローンチ後
プロジェクト担当者以外へのテスト
設計段階での仮説に対する評価
![Page 18: Presentation for Mobile Daigaku](https://reader033.vdocuments.mx/reader033/viewer/2022052823/55586a56d8b42a8d018b4a6d/html5/thumbnails/18.jpg)
HCDとは Webプロジェクトでの活用 活用事例 まとめ
HCDを活用したプロジェクトのマネジメント
プロジェクトの目的・ゴールやプロセスを適切に設計・企画する。
上流工程から制作・実装までを一貫して運営する。
特に上流工程において、スケジュール遅延を防ぐ。
課題の管理と優先順位判断を行う。
クライアントサイドへの啓蒙・教育を行う。
![Page 19: Presentation for Mobile Daigaku](https://reader033.vdocuments.mx/reader033/viewer/2022052823/55586a56d8b42a8d018b4a6d/html5/thumbnails/19.jpg)
HCDとは
活用事例
![Page 20: Presentation for Mobile Daigaku](https://reader033.vdocuments.mx/reader033/viewer/2022052823/55586a56d8b42a8d018b4a6d/html5/thumbnails/20.jpg)
HCDとは Webプロジェクトでの活用 活用事例 まとめ
東京国際フォーラム
ユーザーモデルのセグメント化とコンテンツマッピング
一般のお客様見やすさ・わかりやすさ・親しみやすさ・利用しやすさ
イベント主催者
それぞれが持つニーズを素早く・確実に解決できる
プレス・マスコミ
ニーズが異なるターゲット毎にサイトを切り分ける必要な情報をスムーズに行き来できる動線設計
![Page 21: Presentation for Mobile Daigaku](https://reader033.vdocuments.mx/reader033/viewer/2022052823/55586a56d8b42a8d018b4a6d/html5/thumbnails/21.jpg)
HCDとは Webプロジェクトでの活用 活用事例 まとめ
東京国際フォーラム
サイト評価・ログ解析を元に、ユーザー像を考察。妥当性についてヒアリングを重ねて検証を行った。コンテンツの類型化を行い、その役割と相関関係や優先度を整理。「どのユーザーが、どんなときに、どんな情報を必要とするか」ブランドの醸成効率的な運用を通じ、随時拡張・改善していける仕組み作り
サイト評価ログ解析
ユーザーモデリング
担当者へのヒアリング
コンテンツ /サイト設計 運用
運用で得たデータを元にコンテンツ拡充
![Page 22: Presentation for Mobile Daigaku](https://reader033.vdocuments.mx/reader033/viewer/2022052823/55586a56d8b42a8d018b4a6d/html5/thumbnails/22.jpg)
HCDとは Webプロジェクトでの活用 活用事例 まとめ
カネボウ化粧品
エンドユーザーの理解とニーズに沿ったサイト設計
ユーザーは、化粧品会社としての情報よりも取扱いブランドに対してのニーズが高い。
ブランドサイトの戦略は、マーケティングやメディア戦略、流通形態、ターゲットユーザーによって大きく異なっている。
エンドユーザーへの調査から・・・
ブランド担当者への調査から・・・
コーポレートサイトはコンシューマー向けに特化。ブランドを前面に展開する。
ブランドサイトに対し、一律の共通ヘッダーや分類ルールはブランド戦略の効果を阻害してしまうと判断し、最低限のレギュレーションのみ設定。また、コーポレートサイトは特定のブランドに偏らない中立的なポジションとして確立。
![Page 23: Presentation for Mobile Daigaku](https://reader033.vdocuments.mx/reader033/viewer/2022052823/55586a56d8b42a8d018b4a6d/html5/thumbnails/23.jpg)
HCDとは Webプロジェクトでの活用 活用事例 まとめ
カネボウ化粧品
エンドユーザーニーズ調査
サイトにおける全情報の把握と
整理
ブランド担当者インタビュー サイト戦略策定 コンテンツ
再構成
オンラインモニター調査、化粧品売り場でのエスノグラフィ、ブレスト等によってエンドユーザーのニーズを調査・検討。ブランドサイトを含む、全ての情報を把握し、整理。ブランド担当者(15ブランド程度、1h/回)へのインタビューを実施。コーポレートサイトとブランドサイト、それぞれの役割と必要な情報を検討。ユーザー中心の考えに基づき繰り返し議論していくことで、企業担当者にも意識が強く根付いた。
![Page 24: Presentation for Mobile Daigaku](https://reader033.vdocuments.mx/reader033/viewer/2022052823/55586a56d8b42a8d018b4a6d/html5/thumbnails/24.jpg)
HCDとは Webプロジェクトでの活用 活用事例 まとめ
LUNASOL
ブランドの特性とユーザーニーズによるサイト設計と運用設計徹底したヒアリング主義継続的な効果測定
![Page 25: Presentation for Mobile Daigaku](https://reader033.vdocuments.mx/reader033/viewer/2022052823/55586a56d8b42a8d018b4a6d/html5/thumbnails/25.jpg)
HCDとは Webプロジェクトでの活用 活用事例 まとめ
LUNASOL
担当者へのヒアリング
エンドユーザーアンケート調査
サイト戦略策定運営方針設計 動線・画面設計 運用・
効果測定
ブランド担当者へのヒアリングを通じ、ブランドの特性、ターゲット、コンセプトなどを理解。エンドユーザーがWebサイトに何を求めているかを調査、検討。Webサイトを通じ、ブランドが継続成長していくための戦略を策定。商品の魅力を正確かつ最大限に伝えるために、商品理解が必要不可欠とし、ブランド戦略担当者、商品開発担当者とも協議を行う。これらの取り組みを4年以上、毎月実施している。
![Page 26: Presentation for Mobile Daigaku](https://reader033.vdocuments.mx/reader033/viewer/2022052823/55586a56d8b42a8d018b4a6d/html5/thumbnails/26.jpg)
HCDとは Webプロジェクトでの活用 活用事例 まとめ
Webアプリケーション開発
業務担当者の頭の中にあるものを、アプリケーション化する。
知識・経験問題解決フロー
利用者からのよくある質問
この手続きどうやるの? 自分でできた!
? !
専門知識を持った担当者に聞かなければ分からなかったことを個人で解決できる形で構築。
![Page 27: Presentation for Mobile Daigaku](https://reader033.vdocuments.mx/reader033/viewer/2022052823/55586a56d8b42a8d018b4a6d/html5/thumbnails/27.jpg)
HCDとは Webプロジェクトでの活用 活用事例 まとめ
Webアプリケーション開発
インタビュー形式(15名程度へ数十回)による業務細分化と実態の把握を行い、フローを図式化(約半年)担当者ごとに違う対応方法の平準化制度の関連性や分類を利用者主体に再設計ワイヤーフレーム、仮組みHTMLでのユーザーテストとロールプレイを実施。記録者を用意して被験者のつまづきや誤操作を逐一記録して改善した
業務担当者へのインタビュー
ユーザーモデリング 機能設計 ユーザーテスト
ロールプレイ 開発
改善点の発見→再検討疑問や不整合点を再確認
![Page 28: Presentation for Mobile Daigaku](https://reader033.vdocuments.mx/reader033/viewer/2022052823/55586a56d8b42a8d018b4a6d/html5/thumbnails/28.jpg)
HCDとは Webプロジェクトでの活用 活用事例 まとめ
六本木ヒルズ
何を捨てて、何を拾うか。
サイトのターゲットユーザーを絞って設定「街」として持つ本来の価値を再構築外部アートディレクターと協調サイト全てをCMSで構築・管理
![Page 29: Presentation for Mobile Daigaku](https://reader033.vdocuments.mx/reader033/viewer/2022052823/55586a56d8b42a8d018b4a6d/html5/thumbnails/29.jpg)
HCDとは Webプロジェクトでの活用 活用事例 まとめ
六本木ヒルズ
要件定義 担当者インタビュー
ユーザーモデリング
機能・利用フロー検討
動線・画面設計
課題抽出、優先度設定などを行い、リニューアルによって達成することを定義。ユーザーペルソナを設定し、どのようにWebサイトを利用するかを検討・考察。多くの利用ユーザーから、メインターゲット層を選定。メインターゲット層に対して集中的に動線設計を実施し、興味・関心の形成を目的とした回遊型ナビゲーションを設計。
![Page 30: Presentation for Mobile Daigaku](https://reader033.vdocuments.mx/reader033/viewer/2022052823/55586a56d8b42a8d018b4a6d/html5/thumbnails/30.jpg)
HCDとは
まとめ
![Page 31: Presentation for Mobile Daigaku](https://reader033.vdocuments.mx/reader033/viewer/2022052823/55586a56d8b42a8d018b4a6d/html5/thumbnails/31.jpg)
HCDとは Webプロジェクトでの活用 活用事例 まとめ
まとめ
「誰のためのデザイン」か?評価・改善が重要様々な問題解決のアプローチとして適用できる一部の専門家のものではない
企業とエンドユーザーの橋渡し設計担当者はもちろん、デザイナーやコーダーに至るまでの意識統一クライアントへの啓蒙、プロジェクトの意識作り
![Page 32: Presentation for Mobile Daigaku](https://reader033.vdocuments.mx/reader033/viewer/2022052823/55586a56d8b42a8d018b4a6d/html5/thumbnails/32.jpg)