1.
ペルソナ & カスタマージャーニーマップ
ワークショップ

2.
自己紹介
@caztcha
ウェブユーザビリティ / アクセシビリティ / 情報アーキテクチャ (IA)
HCD-Net 認定 人間中心設計専門家
ウェブアクセシビリティ基盤委員会 (WAIC) 翻訳ワーキンググループ
https://website-usability.info

3.
イントロダクション

4.
ペルソナ (persona) とは？
仮想のユーザー像で、デザインの拠り所として利用するものです。
ターゲットとなるユーザー群を代表したモデルです。ユーザー群の持つ特性を網羅的に表現し、
それでいて「あるある」な感じを含めることで、プロジェクト関係者の共感を伴うことができ、
ユーザーの行動や立ち振舞を具体的に想像することができます。

5.
ペルソナの形 (例)
• 名前、顔写真 (似顔絵)、年齢 (生まれ年)。
• この人の動機、課題、目的。
• 所属するコミュニティにおける、この人の立ち位置。
(経験値や意思決定の権限の大きさ、関係者、など)
• この人の (ウェブサイトに対する) 期待。何を実現でき
れば満足か。
• 前提条件 (ウェブサイトが扱うテーマやウェブ利用に
対するリテラシーなど)
• etc…
名前：山田 花子さん
年齢、性別：25歳 女性
家族構成：一人暮らし
動機や課題
達成したいこと (ゴール)
ウェブサイトへの期待
前提条件

6.
なぜペルソナを作るの？
❖ プロジェクトの様々な局面でデザイン判断が求められる際に、立ち返る拠り所が明確になる。
デザイン判断は往々にしてトレードオフを伴うが、物事の優先度を適切に (またぶれること
なく一貫性をもって) ジャッジすることができる。
❖ 様々なプロジェクト関係者が絡む中で、いわゆる「偉い人」の主観的な意見 (HiPPO :
Highest Paid Person’s Opinion) が無批判に通ってしまうことを防ぐことができる。

7.
ペルソナづくりの留意点
本来ペルソナは、エスノグラフィックな実地調査を通じて導かれるべきですが、リソース
やスケジュールの関係で「プラグマティックペルソナ (pragmatic persona)」という
アプローチが採られることが少なくありません。
その場合は、顧客接点における実体験や過去のお問い合わせ内容の記録、アクセス解析デー
タなどといった「事実」をベースにすることで、思い込みやステレオタイプに依存しない
ペルソナにすること が大切です。

8.
ご参考 :「ユーザビリティ」の定義 (ISO 9241-11)
Extent to which a product can be used by specified users to achieve specified goals
with effectiveness, efficiency and satisfaction in a specified context of use.
特定のユーザーが、特定の利用状況 の中で、特定のゴール を達成するために、ある製品を (有
効性、効率性、満足度を伴って) 利用できる度合い。

9.
カスタマージャーニーマップ (CJM) とは？
ユーザー (顧客) の行動を時系列にマッピングして、視覚的に見渡せるようにしたものです。
一連のユーザー体験の流れを何段階かに区切り、その段階ごとに、ユーザーと企業 (自治体) の
タッチポイント、その時のユーザーの行動や思考を書き出し、課題の明確化や施策の検討を行
なうものです。

10.
本日のゴール
❖ ウェブサイトリニューアルプロジェクトの一環として、プロジェクト内で利用可能
な「プラグマティックペルソナ (pragmatic persona)」を作る。
✓ ユーザー像やユーザーゴールを意識し、ドキュメント化し、共有認識化してみましょう。
✓ 自ら手を動かして作業することで、以後のプロジェクト進行の中で、アップデートできるよう
にしましょう。
❖ 第一優先ペルソナ (プライマリーペルソナ) をもとにして、カスタマージャーニー
マップを作る。
✓ 一連のユーザー体験の中で、ウェブサイトがどんな役割を果たすのか、どんな課題や施策が考
えられるのか、をプロジェクト内で意識できるようにしましょう。

11.
ワークショップ

12.
ユーザーストーリー
As a [role], I want [goal/desire] so that [benefit].
[ある特定の役割や立場] である私は、[目的や望みごと] をしたい。
それによって [こんな利益やよいことが得られる] だから。
User Story

13.
ユーザーストーリーの洗い出し [個人ワーク]
• まずはウォーミングアップです。簡潔なフォーマット (お配りした紙) に、「ユーザー
ストーリー」を (できるだけたくさん) 書き出してみましょう。
• 皆さんが書き出した「ユーザーストーリー」を、グルーピングしてみましょう。これが
本日のペルソナづくりの土台となります。
• グルーピングした「ユーザーストーリー」をもとに、「ペルソナ」化する人物を選定し
ましょう。第一 (プライマリー) ペルソナを1名、第二 (セカンダリー) ペルソナを1～3
名程度、選びます。

14.
ペルソナ
Pragmatic Persona
顔と名前とコピー 属性、前提条件
背景、動機、課題 ニーズやゴール

15.
ペルソナづくり [グループワーク]
• グルーピングした複数の「ユーザーストーリー」をもとに、ユーザーの特性をパターン化
して、ペルソナとしてまとめてみましょう。「あるある」感を目指してください。
• お手元のデータ (顧客アンケート結果、アクセス解析レポート、Google Search
Console のクエリ分析、など) やご自身の顧客対応経験といったファクトを参考に。
• ユーザーの動機、課題、ゴールを意識しましょう。
• 作った「ペルソナ」を発表していただきます。グループごとに作った「ペルソナ」に対し
て、グループの枠を超えて、みんなで改善を加えていきましょう。

16.
カスタマージャーニーマップ
Customer Journey Map
ユーザー (ペルソナ) :
ユーザーのゴール :
ステージ
タッチポイント
行動
思考
現状施策
つまづき、課題
検討したい施策

17.
カスタマージャーニーマップづくり [全体ワーク]
• プライマリーペルソナを対象に、みんなで「カスタマージャーニーマップ」を作ります。
• ユーザーの一連の体験を、時系列で並べてみましょう。時系列ごとの段階を「ステージ」
としてまとめます。
• ステージごとに、「タッチポイント」「そのときのユーザーの行動や思考」「現状施策」
「ユーザーのつまづきや課題」「新たに検討できそうな施策」を書き出してみましょう。
• 現状の課題を共有し、どう改善するかを検討しましょう。

18.
まとめ

19.
インクルーシブなペルソナ拡張
Inclusive Persona Extension
ご参考

20.
視覚障害 (全盲)
ウェブ利用時の障壁
• 目が見えない。視覚的な情報が理解できない。
• スクリーンリーダーによる音声読み上げ (または点字出力) がないと利用でき
ない。
• 自由にポインティング (マウスでのクリックや指でのタップ) ができない。
解決方法
• 文字情報は画像ではなくテキストで作る。
• 画像やアイコンに対して、代替テキストを提供する。
• 映像コンテンツに対して、音声化可能な代替コンテンツ (テキストまたは音声解説)
を提供する。
• ページの見出し構造やランドマークを適切にマークアップする。
• キーボード操作だけで過不足なく利用できるようにする。
• リンクやボタンのラベルを具体的に記述する。
• フォームの入力要素にはラベル (label 要素) を付ける。
• テーブル (表) はシンプルな構造にし、見出しセルを th 要素にする。
• インタラクションに伴う状況の変化がスクリーンリーダーでも伝わるようにする
(WAI-ARIA)。
• 勝手に音声を出さない (スクリーンリーダーの音声とぶつかるため)。Inclusive Persona Extension by Website Usability Info

21.
視覚障害 (全盲)
ウェブ利用時の障壁
• 目が見えない。視覚的な情報が理解できない。
• スクリーンリーダーによる音声読み上げ (または点字出力) がないと利用でき
ない。
• 自由にポインティング (マウスでのクリックや指でのタップ) ができない。
解決方法
• 文字情報は画像ではなくテキストで作る。
• 画像やアイコンに対して、代替テキストを提供する。
• 映像コンテンツに対して、音声化可能な代替コンテンツ (テキストまたは音声解説)
を提供する。
• ページの見出し構造やランドマークを適切にマークアップする。
• キーボード操作だけで過不足なく利用できるようにする。
• リンクやボタンのラベルを具体的に記述する。
• フォームの入力要素にはラベル (label 要素) を付ける。
• テーブル (表) はシンプルな構造にし、見出しセルを th 要素にする。
• インタラクションに伴う状況の変化がスクリーンリーダーでも伝わるようにする
(WAI-ARIA)。
• 勝手に音声を出さない (スクリーンリーダーの音声とぶつかるため)。Inclusive Persona Extension by Website Usability Info
problem solution
context

22.
名前：山田 花子さん
年齢、性別：25歳 女性
家族構成：一人暮らし
動機や課題
達成したいこと (ゴール)
ウェブサイトへの期待
前提条件
「ペルソナ」に並べてコンテキストを付け足す

23.
聴覚障害
視覚障害 (ロービジョン)
運動障害
「ペルソナ」との視覚的な紐付け

24.
• UI 設計時に、随時立ち返って参照する要求仕様として。
• UI 評価時に、障害者の立場に立ってウォークスルーする際のチートシートとして。
動機や課題
達成したいこと (ゴール)
ウェブサイトへの期待
前提条件
動機や課題
達成したいこと (ゴール)
ウェブサイトへの期待
前提条件
動機や課題
達成したいこと (ゴール)
ウェブサイトへの期待
前提条件
プロジェクトメンバーみんなで一緒に考えよう！

25.
視覚障害 (全盲 )
ウェブ利用時の障壁
• 目が見えない。視覚的な情報が理解できない。
• スクリーンリーダーによる音声読み上げ (または点字出力) がないと利用でき
ない。
• 自由にポインティング (マウスでのクリックや指でのタップ) ができない。
解決方法
• 文字情報は画像ではなくテキストで作る。
• 画像やアイコンに対して、代替テキストを提供する。
• 映像コンテンツに対して、代替コンテンツ (音声解説など) を提供する。
• 見出し構造やランドマークを適切にマークアップする。
• キーボード操作だけで過不足なく利用できるようにする。
• リンクやボタンのラベルを具体的に記述する。
• フォームの入力要素にはラベル (label 要素) を付ける。
• テーブル (表) はシンプルな構造にし、見出しセルを th 要素にする。
• インタラクションに伴う状況の変化がスクリーンリーダーでも伝わるようにする
(WAI-ARIA)。
• ページの読み込みと併せて勝手に音声を出さない。
Inclusive Persona Extension by Website Usability Info

26.
視覚障害 (ロービジョン)
ウェブ利用時の障壁
• 目が見えにくい。
• 明瞭に見えない (ぼやける、重なる)。
• まぶしい。
• ちらつく。
• 視野を広く見ることができない。
• 視野の中心が欠ける。
• 焦点が定まらない (震える)。
• 見えにくさによっては、スクリーンリーダーによる音声読み上げに頼ることも
ある。
解決方法
• ズーム (画面表示の拡大) を妨げない。
• ユーザーインターフェースの慣例 (おなじみのパターン) に従う。
• 文字色と背景色のコントラストを十分に保つ。
• ユーザーエージェントの機能で色を反転表示しても、情報が伝わるようにする。
• ユーザーが独自のスタイルシートを使うことを妨げない。
• 情報のチャンク (塊やつながり) に配慮してレイアウトする。
• 偶発的なトリガー (マウスオーバーやフォーカス) でコンテンツを変更しない。
• 音声読み上げ順と視覚的なレイアウトを合致させる。
Inclusive Persona Extension by Website Usability Info

27.
色覚特性
ウェブ利用時の障壁
• 色が識別しにくい。
• P型 (赤の視感度がないか低い)
• D型 (緑の視感度がないか低い)
• T型 (青の視感度がないか低い)
• A型 (色の識別ができず明暗でしか判別できない)
• ウェブページをグレースケールで印刷する場合、情報識別を色に依存している
コンテンツだと判別できない。
• モノクロの電子書籍リーダーで (電子書籍からのリンクなどで) ウェブページ
を開く場合、情報識別を色に依存しているコンテンツだと判別できない。
解決方法
• 色だけで情報を識別させない。
• リンク (特に文中のリンク) には下線を付ける。
• 文字の大きさや太さなど、色以外の要素を用いてテキストのビジュアルヒエラル
キー (視覚的な優先度) を表現する。
• 図 (グラフなど) においては、色以外の形状も、視覚的な判別の手がかりとして
付ける。
• グレースケール表示でもコンテンツを理解/利用できるようにする。
(グレースケール印刷)
Inclusive Persona Extension by Website Usability Info

28.
聴覚障害
ウェブ利用時の障壁
• 音が聞こえない、または聞こえにくい。
• 公共の場 (交通機関、図書館、など) にいて、音を出せない (Bluetooth イヤ
ホンのバッテリー切れ、イヤホン忘れ、といった状況も含む)。
• コンテンツに用いられている言語が母語ではないユーザーが、音声を正しく聞
き取れない。
解決方法
• 音声コンテンツに対して、トランスクリプト (書き起こし文) を併せて提供する。
• 音声付き動画コンテンツに対して、キャプション (字幕) を併せて提供する。
(公共の場) (非母語話者)
Inclusive Persona Extension by Website Usability Info

29.
運動障害
ウェブ利用時の障壁
• 自由にポインティング (マウスでのクリックや指でのタップ) ができない。以
下の手段に頼る必要がある。
• PC キーボード
• マウススティック
• 各種スイッチ (ボタン)
• 音声認識ソフト
• 視線入力装置
• …etc.
• デバイスの持ち替え (自由に向きを変えること) が難しい。
解決方法
• キーボード操作だけで過不足なく利用できるようにする。
• キーボード操作によるフォーカス位置を視認できるようにする。
• リンクやボタンなどは、精緻なポインティング操作ができなくてもクリック / タッ
プ / 実行できるよう、十分な大きさにする。
• リンクやボタンのラベルを具体的に記述する。テキストで記述し、適切にマークアッ
プする。
• デバイスの向きが「ポートレート (縦)」「ランドスケープ (横)」どちらでも過不足
なく利用できるようにする。
•
Inclusive Persona Extension by Website Usability Info

30.
認知 / 学習障害
ウェブ利用時の障壁
• 情報を認知したり記憶することが難しい。
• 外的な刺激によって集中が妨げられる。
• 文字を読むのが難しい。(ディスレクシア)
解決方法
• ユーザーインターフェースの慣例 (おなじみのパターン) に従う。
• コンテンツはなるべく平易な言葉で表現する。
• 見出しを提示してコンテンツの概要をつかみやすくする。
• 読まなくても理解できるよう、視覚表現 (画像、図、アイコン、シンボルなど) を適
宜用いる。
• コンテンツに時間制限がある場合、ユーザーが任意で解除または調整できるように
する。
• コンテンツ内の動きや点滅は、5 秒以内にとどめるか、ユーザーが任意で停止でき
るようにする。
• コンテンツ表現において、1 秒に3 回以上の閃光は用いない。
• 視認性のよいフォントを用いる。
• 文字サイズや行間を十分な大きさにして、可読性を高くする。Inclusive Persona Extension by Website Usability Info

31.
加齢
ウェブ利用時の障壁
• 精緻なポインティング (マウスでのクリックや指でのタップ) ができない。
• 小さな文字や薄い文字が見にくい。(老眼)
• 耳が遠い。
• 情報を認知したり記憶することが難しい。
• 思い込みで判断しやすい。
解決方法
• リンクやボタンなどは、精緻なポインティング操作でなくてもクリック / タップ /
実行できるよう、十分な大きさにする。
• 文字色と背景色のコントラストを十分に保つ。
• 文字サイズや行間を十分な大きさにして、可読性を高くする。
• ユーザーインターフェースの慣例 (おなじみのパターン) に従う。
• コンテンツはなるべく平易な言葉で表現する。
• 見出しを提示してコンテンツの概要をつかみやすくする。
• 読まなくても理解できるよう、視覚表現 (画像、図、アイコン、シンボルなど) を適
宜用いる。
Inclusive Persona Extension by Website Usability Info

32.
モバイル
ウェブ利用時の障壁
• 画面が小さく、情報を得るための視野が狭い。
• 文字が小さくなりがちで、読みにくい。
• 屋外で使用する場合、自然光のまぶしさでコンテンツが見にくい。
• 指でタップするので、マウスに比べて精緻なポインティングが難しい。
• ハードウェアのキーボードに比べて文字のタイピングが面倒。
• マウスを前提としたインタラクション (マウスオーバーなど) を利用できない。
解決方法
• ユーザー体験 (UX) の観点からコンテンツの優先順位を明確にし、伝えたいことを
上位に提示する。
• 文字サイズや行間を十分な大きさにして、可読性を高くする。
• ズーム (画面表示の拡大) を妨げない。
• 文字色と背景色のコントラストを十分に保つ。
• リンクやボタンなどは、精緻なポインティング操作でなくてもタップ / 実行できる
よう、十分な大きさにする。
• 文字入力 (タイピング) の発生をなるべく少なくする。
• マウスオーバー (hover) 依存のインタラクションを実装しない。
Inclusive Persona Extension by Website Usability Info

33.
GitHub で公開中
https://github.com/caztcha/Inclusive-Persona-Extension
コメントは
この GitHub リポジトリの Issues に
入れていただくか、Twitter
(@caztcha) にどうぞ！

34.
おつかれさまでした！