IA/UXプラクティス

https://gyazo.com/c74d48ab7049918f44970c6299395f77

概要

内容

マーケティング課題やサイト/サービスのコンセプトに基づく、UXデザイン・情報設計・コンテンツ構造設計のノウハウを著者自身の業務経験を踏まえて論考(Q&A)形式で学ぶための解説書。従来型のWebサイト制作からマルチデバイス対応のWebサイト制作に移行する際に有効な知識やノウハウをまとめています。著者の坂本貴史氏が、大規模Webサイトのマルチデバイス対応を行う中で培った知見を注ぎ込みました。

著者

坂本貴史(サカモトタカシ)

ネットイヤーグループ株式会社UXデザイナー。2002年より同社にて、IA/UXデザイナーとして活躍。主に、企業におけるデジタルマーケティング支援(コンサルティング)や、Webサイト構築におけるクリエイティブディレクションを担当。とくに、Web情報アーキテクチャを設計する専門職インフォメーションアーキテクト(IA)として活躍中。自身のブログでも情報発信し、執筆・寄稿やセミナーの講演なども活発に行っている。

01_第1章_UXデザインの捉え方

/icons/hr.icon

1-1_UXデザインとは

UXの定義

UXの捉え方には様々な考え方があるが、共通しているのは以下の3点

個人の主観である

製品ライフサイクルすべてを包括する

品質特性や完成が関与する

UXは時間に分けて説明することができ、システムとユーザーの状況を整理できる

触れる前：経験を想像する

触れている途中：経験する

触れた後：ある経験を内省する

しばらく触れてみた後：多種多様な利用期間を回想する

UXを評価するための全体的な指標は存在しない

それぞれの視点における目的ごとに指標は異なる

「UXを向上することで何かが向上する」とは一概には言えない

1-3_HCDプロセスの応用

HCDとは

HCD:人間中心設計のことで、ユーザーの要求を満たす製品やサービスを設計するための手法

HCDプロジェクトにおけるタスク

その活動自体が検証可能であること

ユーザーテストの実施など

アジャイルUX

アジャイル的な進め方になることを想定し、UXパートを設計すること

「設計・調査」から先行する

設計が見えてきたタイミングで開発（実装）に移す

フィージビリティの検証

ユーザービリティを検証

検証の結果をUXパートにフィードバックし、設計を詳細化する

アジャイル的に進めるためには、以下の点が重要

UXパートと開発パートが同じ環境で意見が交換できる

複雑なファイル管理にバージョン管理を徹底する

1-5_UXをプロヘクトに取り入れるには

陥りがちな問題

要求を整理しきれない

偏った情報だけでプロジェクトが進行する

よくある課題

1. ユーザー不在でプロヘクトが進んでしまう

2. 運用ニーズを軽視してしまう

3. 余計なタスクが多い

4. 企画から次の工程に移れない

背景

企画と開発など、立場や役割が別の場合に互いのタスクを理解できない場合に起こりやすい

解決の糸口

1. ユーザー理解のためのタスクが抜け落ちていないか

2. 目標や課題整理には運用視点を取り入れる

3. タスクの重要度や関連性を理解する

4. 企画は「要求事項の整理」と捉える

UXデザインの本質

下記２点の仕組み化

1. ユーザーの感情・思考・心理

2. 目で見て触れることのできるインターフェース

タスクの調整

既に見えているタスクをHCDの４工程で見直し、ヌケモレを防ぐ

1. 利用状況の理解と明確化

2. ユーザーや組織の要求事項の明確化

3. デザインによる解決案の作成

4. 評価

02第2章モバイルのUXデザイン

/icons/hr.icon

2-2_モバイルデザインのヒント

モバイルの利用状況とデザイン

モバイルとデスクトップの大きな違い

以下が主な違いだが、デザインを窮屈なものにしがち

1. 利用状況が異なる

2. 画面の大きさが異なる

モバイルの利用状況からくるデザインヒント

必要十分な表現に留める

チラ見しやすいようにデザインする

外で触ることが多いので、光量や揺れ・周囲の音にPCとの違いがある

瞬時に目的の情報を入手できる必要がある

メリハリやコントラストに気を使う必要がある

階層を深くしない

目的の情報を探すの何ステップもあると、ユーザーが諦める

自然な形で接点を見せる

複数のアプリをまたがる場合を考慮し、シームレスにユーザーが使えるようにする

途中で操作をやめても同じことができる

ユーザーは利用状況により、途中でタスクを諦めないといけない

例）途中で電話がかかってくるなど

時間軸を使って情報を整理する

履歴を時間順に残すことで、同じタスクを実行する時にスムーズに誘導できる

ユーザービリティの問題

意図しない起動

ユーザーは誤って何かに触ってしまうことがある

スワイプの曖昧さ

モバイルの画面は小さい区域に分かれていることが多い

ユーザーからすれば同じジェスチャでも結果が異なることがある

不可視性

ユーザーは自分が行ったジェスチャを確認できない

ひどいときはタッチすべきものを見ることすら出来ない

学習のしにくさ

すべての問題が合わさると、ジェスチャを学ぶのが難しくなる

2-5_モバイルの役割を考えるには？

陥りがちな問題

モバイル環境をデスクトップと同じように考えてしまうことで、視点が偏ってしまう

よくある課題

モバイルサイトやアプリ以外に「どんな場所で」「どんな状況で」使うかを意識する

1. ユーザーの目的がわからない

2. コンバージョンが上がらない

3. モバイル独自のアプローチができない

4. Webサイトとアプリの境目がわからない

背景

モバイルをデスクトップの延長として考えているため

解決の糸口

最終目的のために用意するものに何が求められうのか、役割を見極めることが重要

モバイルを考えることは、本来の目的や行動に即したモバイルの役割を再整理することになる

1. 本来の目的とモバイルを利用する目的を分けて理解する

2. 単一のページが担う役割の大きさを理解することからはじめる

3. GPSやカメラなど、モバイル独自の機能を活用する

4. 別々に捉えるのではなく、ハイブリッド型で考える

ユーザーの目的がわからない

ユーザーの利用背景を理解することが重要

なぜそのサービスや製品を利用することになったのか

アクセスログからユーザーの動きを把握する

ユーザー調査を実施して生活や価値観を明らかにする

ヒント

モバイルサイトやアプリが持つ情報だけで考えない

最終的にユーザーがどのようにサービスを利用しようとしているかの仮設を立てる

ユーザーの行動の連続性を見極め、その上で自然な流れで提示する必要がある

033章モバイルにおける情報アーキテクチャ

/icons/hr.icon

3-9_デザインパターンを活用するには？

よくある課題

画面サイズの小さいレイアウト方法がわからないと、以下のような課題が発生する

1. 情報過多になりすぎてしまう

2. ユーザビリティが悪い

3. モバイル環境に合ったナビゲーション方法がわからない

小さな画面では、何を情報とし、どうすれば伝わりやすくなるのかという機能的な側面が重要になる

解決の糸口

モバイル環境におけるデザインに求められるものを「情報」ではなく「機能」と捉える

ただの情報がアクションをともなう機能になることで使う対象になる

「ビジュアルシステム」ではなく「デザインシステム」をつくるという考え方

1. モバイルでは情報ではなく機能として捉える

2. 標準的な操作方法や業界共通のデザインを理解する

3. ナビゲーションとコンテンツを分けて考える

4. コンポーネント単位でレイアウトを組み立てる

ユーザビリティが悪い

前提

デファクトスタンダードを利用する

どのWebサイトやアプリケーションでも採用していることで、はじめて訪れたユーザーが使いやすくなる

業界や業種によるデファクトスタンダードを知ることが重要

習熟から習慣への流れを作ることができる

ヒント

デファクトスタンダードの採用は習熟のしやすさにつながる

進め方のイメージ

競合比較をすることで、その業界や業種のルールを知ることができる

数多くのWebサイトやアプリケーションを見る

評価や調査をするタスクをプロジェクト設計に入れる

コラム：マイクロインタラクション

マイクロインタラクション

マイクロインタラクションとは、最小限のインタラクション（ふるまい）を指す

気温が0を下回ったら、赤色から青色になる

スマートフォンで音楽を聞いていると、通知音の周りで音が小さくなる

マイクロインタラクションは頼もしい味方

マイクロインタラクションは、マクロインタラクションと同じように検討して実現すべき

マクロインタラクション：主要機能のこと

小さなふるまいにより、その製品に愛着が持てるか、ただの製品としてみるか違いが生まれる

同じ機能でも、マイクロインタラクションを取り入れることにより、安全で楽しい体験が生まれる

開発へのアプローチ

マイクロインタラクションに開発に当てられる時間は限られる

開発リソースのほとんどは、マクロインタラクションの開発に当てられるから

マイクロな視点とマクロな視点とで、その必要性を検討することが重要

マイクロインタラクションの開発視点

マイクロな視点

機能を細分化した際に必須となるマイクロインタラクションを明確にする

例：検索フォームに必要な機能のうちの、サジェストの出し方を最も重要な機能と定義する

マクロな視点

サイトやアプリで行うべきたった１つの機能だけに集中し洗練する

例：横スワイプでの閲覧体験を最優先し、その動きを洗練する

開発でマイクロインタラクションにフォーカスすることは、体験をより豊かにするアプローチと考えられる

04第4章問題解決としての情報アーキテクチャ

/icons/hr.icon

4-2_検索パターンとナビゲーションの関係

検索におけるデザインパターン

検索におけるデザインパターンをユーザーの目的によって組み合わせる必要がある

1. オートコンプリート

入力中に入力候補を表示する

スマホは画面が小さいため、マストに近い機能となる

2. ベストファースト

最優先の検索結果を表示する

3. 横断検索

複数の情報源から結果を表示する

4. ファセットナビゲーション

柔軟に検索対象を指定できる

カテゴリ別など

5. 詳細検索

複雑な検索条件を指定する

6. パーソナライズ機能

利用者の利用状況などをもとに検索結果を表示する

7. ページネーション

検索結果の表示を分けて実行する

8. 構造化された結果

検索結果を構造化して表示する

9. アクション可能な結果

検索結果にアクション機能を表示する

10. 統合的発見

複数のモードを検索結果にまとめて表示する

4-3_プロトタイピングという可視化

シナリオの重要性

シナリオを作る時に意識すべきこと

ストーリー視点

ストーリーボードや即興劇で演じる

プロダクト視点

プロトタイピングツールを利用し、実際に操作する

いずれのシナリオでも、「誰が」「何を」「どのように」を明確にする

これら３つの前提を揃えてシナリオを作ること

4-4_デザイン原則の重要性

デザイン原則とは

Googleのユーザーエクスペリエンス10か条（2008年）

1. 役立つか：ユーザーに焦点を絞る

2. 速いか：ロードはミリセカンドでも早く

3. シンプルか：シンプルであることが最も効果的である

4. 魅力的か：初心者には優しく上級者には魅力的に

5. 革新的か：技術革新にこだわる

6. ユニバーサルか：世界で通用するか

7. 利益が出るか：今日だけでなく明日のビジネスを計画する

8. 美しいか：視覚的なイメージは大切だ

9. 信頼できるか：人々の信頼を得る

10. 親しみがあるか：人間的な温かみを加える

Googleが掲げる10の真実

1. ユーザーに焦点を絞れば、他のものはみな後からついてくる

2. １つのことをとことん極めてうまくやるのが一番

3. 遅いより速いほうがいい

4. ウェブでも民主主義は機能する

5. 情報を探したくなるのはパソコンの前にいるときだけではない

6. 悪事を働かなくてもお金は稼げる

7. 世の中にはまだまだ情報が溢れている

8. 情報のニーズはすべての国境を越える

9. スーツがなくても真剣に仕事はできる

10. 「すばらしい」では足りない

何からはじめたらいいかわからない

前提

アイデアはその場で具現化すること

スケッチやメモなど

Column_サービスデザインという見方

取り組む視点

スタートアップにとっては、サービスとプロダクトは切っても切れない関係にある

サービスデザインとは、そうした関係を全体的に計画することを目指す

そのために、UXの定義が難しい

ユーザーにどこまでの利用者を含んでいるのかが焦点になる

B2B企業であれば、クライアントが望むものだけにフォーカスしてしまうこともある

05_5章_UXジャーニーマップと可視化

5-1_ジャーニーマップの価値

カスタマージャーニーマップとは

ユーザーがゴールに辿り着くまでの空間と時間を「たびにおける一連の経験」として視覚化したもの

対象となるユーザーを決めて利用シーンを深掘りするため、さまざまな情報を扱うことになる

なぜ注目されるのか

1. スマートフォンの普及により、個人によるメディアとの接点が増えたこと

2. SNSの普及でシェアやいいね！の概念が広まり、購買行動が多様化したこと

3. 分析ツールの進化や浸透

カスタマージャーニーマップの活用方法

ユーザーセグメント（ペルソナなど）についての議論は済んでいる状態から始める

カスタマージャーニーマップは、どこが重要な課題かを特定し、解決策としての施策やアイデアにつなげることが重要

カスタマージャーニーマップの利用価値

メリット

ユーザー行動が可視化できる

ユーザー行動における外部要因と内部要因を一覧で表現できる

前後の関係性から行動の同期と結果が明らかになる

顧客とサービス接点が俯瞰できる

ユーザー本体の行動を理解することができる

関係者と協働作業しやすい

見える化することで、どうユーザーに向き合うべきか組織の壁を超えて連携できる

デメリット

調査などの事前準備が必要

事前準備なしに進めると、定性的評価や仮説に偏った成果になってしまう

課題が増えすぎる

これまで気づかなかった流れが浮き彫りになり、様々な課題が持ちアガry

作成が目的になりがち

さまざまな構成要素をならべると、それらすべてに課題があるかのように錯覚してしまう

「より重要な課題はなにか」を特定することが大事

Knowledge

活用が有効な商材

カスタマージャーニーマップを活用して施策を検討する際、検討期間が長いものの方が有利

検討期間が長いことは、一連の流れに置いてさまざまなタッチポイントが生まれ、態度変容する前提があるから

反対に、消耗品の類は有効でない

意思決定における検討期間が短く、高い知識を必要としないため