ノンデザイナーでもわかる UX+理論で作るWebデザイン

ノンデザイナーでもわかる UX+理論で作るWebデザイン

★デザインは問題解決
★説明しなくても理解できるように、UIはアフォーダンスを利用
★UX＝「ユーザーのタスク」（目的）＋「コンテキスト」（利用状況）
★情報設計のやり方
１ユーザーが求めている情報の抽出（ストーリボードやシナリオ）
２情報の優先順位を設計（求めている位階の情報も追加）
３情報をわかりやすく表現

第１章デザイン思考とWebデザイン

・「デザイン思考」の観点からデザインを捉え直す
・デビット・M・ケリー
・「デザイン思考」とは問題をデザインで解決させる思考やプロセス
・ユーザーを主軸とした視点でデザインを行うこと
・デザイン思考のプロセス
　共通認識▶︎定義・問題発見▶︎アイデア創造▶︎プロトタイプ▶︎テスト▶︎実装

・デジタルサービスは大きく３つ
　ネイティブアプリケーション/Webアプリケーション/Webサイト
・ゲーム（ネイティブアプリ）▶︎操作性が重要
　ゲームニクス/ゲーミフィケーションなどの理論やコンセプト生まれてる
・Webサイト▶︎情報設計（ユーザーが欲しい情報は何か）が重要

・Webサイトにも最低限取り入れるべきUIの基本設計
　▶︎誰もが使える基本的なUIパターン　を利用する
・状況と物の形などによって操作を理解させる▶︎アフォーダンス
　事例：お弁当とお箸
・説明しなくても理解できるように、UIはアフォーダンスを利用して制作する。Webデザインの場合は基本的なUIパターンを参考にする

第２章WebデザインとUX

・Webサイト の表現の特徴
フォント：デバイスに依存
色　　　：ブラウザに依存
サイズ　：デバイスのサイズに依存

・Web制作の標準規格
W3C（World Wide Web Consortium)
ワールドワイドウェブで使用されるブラウザやサーバーなどについての各種技術に関する標準化を推進する団体

・CSS ３つの種類
ブラウザが持ってるCSS(ユーザーエージェントCSS)
サイト制作者が作成するCSS：ユーザーエージェントCSSより優先度高い
ユーザーが設定するCSS：視力が悪い場合など独自のCSS

・Webサイトの目標
目的▶︎KGI
目標に達成するための過程での評価▶︎KPI
事例：英会話教室 KGI 50件/月  KPI 30000PV/日
（Klipfolio）

・WebデザインはPDCAサイクルで成長させる
・PDCAを早く繰り返す
・デザイン思考/PDCA/UX6Dの過程はほぼ１対１対応している

・UXデザインサイクル▶︎6D
調査▶︎定義▶︎デザイン▶︎開発▶︎デプロイ▶︎運用

・データの種類（定量分析/定性分析）

・プロジェクト進める上で問題は「視覚情報」にある視覚だけで判断しない
・適切な情報だけを共有するワークフロー
UX設計▶︎ストーリーボード▶︎情報設計▶︎ワイヤーフレーム▶︎ユーザビリティテスト▶︎実装

第３章ビジネスモデルのデザイン

・ユーザー体験を「ユーザーのタスクとコンテキスト」と捉えてUX設計する

UX＝「ユーザーのタスク」＋「コンテキスト」

タスク：目的
コンテキスト：ユーザーがサイトを利用する状況や環境

・ペルソナ
リサーチから得られた実在する人物の明確で具体的なデータのパターンを見つけ出し、それをもとに作り上げた架空の人物像（マーケティングのターゲットとは異なる）

・カスタマージャーニーマップ
ユーザーの行動を明確に可視化
チャネル（タッチポイント）/顧客の行動/思考/感情　を描く

・ストーリーボード　カスタマージャーニーマップを描写

第４章サイト構成のデザイン　割愛

第５章情報のデザイン

・情報設計（Information Architecture:IA）
ユーザーにとってわかりやすい言葉で表現すること

情報設計のやり方
１ユーザーが求めている情報の抽出（ストーリボードやシナリオ）
２情報の優先順位を設計（求めている位階の情報も追加）
３情報をわかりやすく表現

・カードソーティング
情報を分類する手法の一つ。Webサイトの機能やコンテンツが多く複雑でどのように情報を整理すれば良いかわからない時に役立つ

・５ハットラックス（５つの情報分類の方法）
１ロケーション
２アルファベット
３時間
４カテゴリ
５ヒエラルキー

・アンカリング
認知バイアスの１種。先行する数値（アンカー）によって後の数値の判断が歪められる効果。

・情報設計では２つを同時に考慮する必要がある
情報をどのように表現し、どう分類するか

第６章ユーザー導線のデザイン

・ストーリーボードやペルソナ・シナリオ法から「ユーザーはどんなステップを踏んだら目的を達成できるか」を明確にしたらどのようなUIにするかワイヤーフレームを使って具現化

・病院へ行く事例

・プロトタイピングを作成しユーザビリティテスト