エンジニアである自分が、感覚でやっていたデザインについてそろそろ理論を学ぼうと考えて読んだのでまとめておこうと思います。
今回読んだのはこちらの本
かなり簡潔にまとめます！
筆者の現状
- WEB開発歴7年ほど
- 主にサーバーサイドエンジニア
- フロントサイドcss, jsをここ数年で本格的にやり始めた
- デザインは感覚とパクリで作成
- 業務でもデザインをゼロから検討する機会がある
導入編
デザイン思考とは
- 問題をデザインで解決させる思考やプロセス
- 共通認識をもつ
- 問題を発見する
- 問題を解決するためのアイディアの想像
- プロトタイプの作成
- テスト
- 繰り返し行う
- ユーザが欲しいと思っている情報を提供する
UI/UXとは
- UX = ユーザ体験
- UX設計：ユーザを知り、体験を設計する
- 「ユーザのタスク」＋「コンテキスト」
- コンテキスト：ユーザが利用する状況や環境
- UI = ユーザインターフェイス
- UI設計：ユーザ心理や色彩、印象を用いて設計する
UX6Dプロセス
- 調査
- フォーカスグループ
- インタビュー/アンケート
- ユーザビリティテスト
- ギャップ分析
- 要件取りまとめ
- 定義
- ブレスト
- ペルソナ
- ストーリーボーディング
- クリエイティブディレクション
- 要件定義
- UXの定義
- デザイン
- ワイヤーフレーミング
- プロトタイピング
- 機能デザイン
- コンセプトデザイン
- ビジュアルデザイン
- 開発
- UIの実装
- スタイルガイド
- UIの仕様設計
- デプロイ
- UIの評価
- コンプライアンスの確認
- アクセシビリティテスト
- ユーザ向けトレーニング
- 専門家による評価
- 運用
- ユーザビリティの確認
- メンテナンスとサポート
- 新しいニーズ
分析してデータを理解する
- 定量分析
- ユーザビリティテスト「何人中何人が想定通りの行動をした」
- 定性分析
- アンケート「なぜその行動をとったのか」
WEBデザイン工程
- UX設計
- ストーリーボード
- 情報設計
- ワイヤーフレーム
- ユーザビリティテスト
- 実装
UXを設計する
ペルソナの設定
- リサーチから得たデータパターンを具体化した架空の人物像
- 名前、性別、年齢、職業、行動、性格、特徴などをなるべく具体的に設定する
- 写真：イラストではなく、写真を用いる
- 名前：ダミー名はNG、実名もNG
- 年齢：30代などではなく、具体的に設定する
- 本物の人物として扱う
カスタマージャーニーマップ
- ユーザ行動を明確化するために作成する
- 顧客の行動、思考、感情を時系列グラフや表、文字を用いて表現する
ストーリーボード
- カスタマージャーニーマップは文字で表現する
- ストーリーボードは漫画のような絵コンテで表現していく
- WEBサイトの利用シーン、ユーザの感情を取り入れる
比較検討する
- ペルソナ、カスタマージャーニーマップ、ストーリーボードとサイトを比較して最適なUIになっているかを考える
- これらはユーザについて理解を深めたり、チームで共通認識を持つために使われる道具に過ぎないので注意
マーケティング？UX設計？
- マーケティング=カスタマーを知ってビジネスモデルにする手法
- UX設計=ユーザを知ってデザインする手法
- マーケティングとUX設計は同列にあり、ビジネスを成功させるために存在している
サイト構成のデザイン
サイトストラクチャ設計
- webサイト全体のページやコンテンツの構造
- メインとなるユーザ導線を明確にする
- まず細部に凝らずにメイン導線を明確に
サイトストラクチャのパターン
- 階層構造型
- コーポレートサイトやメディアサイトに多くみられる「どこに何があるか」が明確にまとめられている
- ファセット分類型構造
- 価格、目的、地域などの条件で情報がリンクされユーザが効率よく探すことができる
- ウェブ型構造
- wikipediaのようなページ間が互いにリンク試合って各ページが並列に繋がっている
- ハブスポーク型
- ハブページから放射線状に各ページが広がり、ハブへまた戻ってくる使われ方を想定している構造。facebookなど。
- 直線構造型
- 予約、会員登録、購入などの導線によくみられる。ユーザが一つのタスクに集中しやすい
ナビゲーション
- グローバルナビゲーション
- webサイト共通して表示するメニュー
- 主要なコンテンツを置く
- webサイトの概要を示す
- ローカルナビゲーション
*グローバルナビゲーションよりもより細かく情報を分類するナビゲーション - パンくずリスト
- ユーザが今どこにいるのか知らせる目的のため用いられる
- ステップナビゲーション
- ユーザが特定のタスクやゴールを完了するために必要な順序を左から右に示す
- 今何をしているのか、次に何をするのか、作業がどれだけあるのを知ることができる
- 関連ナビゲーション
- 関連したコンテンツをおすすめしたり使われる
- ユーザのコンテキストに沿ったリンクを配置する
レイアウトパターン
- トップページ
- サイトの玄関となる唯一のページ
- 何のサービスを提供しているのかを明確にする
- サイトの構造や構成を知らせる
- 企業サイト型
- メディアサイト型
- キャンペーンサイト型
- 一覧ページ
- ユーザの欲しい情報を作る
- ユーザがどのような情報があれば選択できるのか設計する
- どの順番で並べるか、どの情報を目立たせるか
- 表示の絞り方の工夫
- 比較したい内容を表示させる
- 詳細ページ
- ユーザが最終的に求めている情報を入れる
- 必要な情報はサイトによって多岐にわたる
- 次のアクションまでのUXを考慮する
- アクセスページ
- 企業や店舗の所在地を案内するページ
- ユーザのシナリオに沿って必要な情報を選択する
- シナリオによっては営業時間や休館日などの情報も必要かもしれない
- 入力フォーム/問い合わせページ
- 入力しにくいとユーザのストレスになりページ離脱に繋がる
- ユーザに合わせてフォームを最適化する（EFO）
- 入力の手間を少なくする
- エラーを事前に回避する
- 明確でわかりやすいアクションボタンを用意する
- ウォークスルーページ/コーチマーク
- サービスが何ができるのか、特徴、使い方などを説明するページや吹き出し
- 伝えたいことを明確に簡潔、わかりやすくする
- アニメーションや写真、イラストを取り入れる
- コーチマークが多くなるようなら複雑なUIになっているので見直す
- 空ページ
- 初期状態のECサイトのカートなど情報のないページ
- 何のためのページなのか、何故からなのか、何をするといいのかがわかるように配慮することでユーザの次の行動のきっかけになる
UIパターン
- タブ
- コンテンツの切り替えを行う
- 画面遷移がないためユーザの負担を軽減できる
- 情報を比較する場合には向いていない
- 開いているタブはひとつながりにする
- カルーセル
- 注目を集めるエリアに複数コンテンツ表示できる
- 表示する画像は多くし過ぎない
- ドットやサムネイルで現在位置を表示する
- ユーザの意思で切り替えできるようにする
- アコーディオン
- 全体像を確認した上で必要な情報にアクセスできる
- コンテンツ全体を表示するには全て開かないとならない
- 展開できることを明示する
- 伝わりやすいタイトルをつける
- プッシュ通知
- 通知する量や内容が提供側の事情だけで送ってしまわないように注意する
- モーダル
- 特定のタスクや機能利用に制限された状態
- ユーザを一つの操作に縛り付けることができる
- タスクに集中する必要があるのか、束縛してまで提示する情報なのかを検討する
情報のデザイン
情報設計
- 情報を整理し、ユーザに伝わりやすい言葉で表現する
ストーリーボードから抽出する
- ストーリーボードを用いて必要なコンテンツを抽出する
- できるだけ多くのシーンを想定して作る
カードソーティングで整理する
- コンテンツの名称など情報をカード化する
- カードをグループ化する
- グループにラベル付をする
- ユーザ視点で説明なしで理解できる言葉をつける
情報を表現する
- ロケーション
- 場所と組み合わせて表示する
- アルファベット
- 言語選択や国を選択するときや、情報量が多いときに探しやすい
- 時間
- 時間の経過とともに情報を表現する
- Twitter, Facebook
- カテゴリ
- 種類、色、大きさなどで分類する
- Amazonなど
- ヒエラルキー
- ナビゲーション、使う順、ランキングなど
情報を伝える
- 必要としている情報を表示する
- キャッチコピーを用いる
- 認知バイアス（アンカリング）を考慮して価格プランなどの表示順番を検討する
- 最適な分類方法を考える
ユーザ導線のデザイン
導線を設計する
- サイト作成手順
- コンテンツ作成＆ヒエラルキーの決定
- ページ内コンテンツのレイアウト
- サイト全体の導線設計
- ナビゲーションの決定
- コンテンツを整理する
- ユーザのスタートとゴールを定義し（ストーリーボード）、それらを満たすUIを検討する
- ワイヤーフレームを使ってUIを具体化
- コンテンツのヒエラルキーを明確にする
- ダミーテキストを使用せずにコンテンツを使用すること
- プロトタイプを作成し検証する
- 完成後の動きを見る
- 気づきを得てUX,UIを改善する
- 最適なアイディアに収束する行為
- ユーザビリティテストを行う
- ユーザが想定通りにサイトを操作できるか、改善点はないか評価する
- ユーザ視点の言葉がサイトに使われているか
- ユーザ視点のコンテンツが得られているか
- ユーザが想定通りにサイトを操作できるか、改善点はないか評価する
画面設計のデザイン
- 見た目と使いやすさの両立を図るために人間の知覚・認知に基づいた論理的なUIを設計する
デザイン基本原則
- 近接
- 関連した情報を距離を近づけてグループ化する
- 間隔を意識する
- 整列
- 情報を透明な線で整理する
- スムーズな視線移動と統一感
- 項目間の関係を正しく認知できる
- 反復
- 一貫性や安定感を作る
- webサイト全体で反復する
- コントラスト
- 要素に強弱をつけ、優先順位を明確にする
- 強調された要素にユーザの目が惹きつけられる
ミラーの法則
- 短期的に記憶できる寮には限度がある
- マジカルナンバー7±2
- 電話番号であれば03-1234-5678のようにチャンクを作ることで記憶しやすくなる
ヒックの法則
- 選択肢が多いほどユーザの意思決定は時間がかかる
- 過剰な選択肢は放棄される傾向にある
- 必要な選択肢のみ表示する
- 選択肢を階層型に並べる
フィッツの法則
- 対象に移動するために必要な時間と、対象までの距離や対象のサイズの関係
- マウスカーソルの動きの方向に沿ったボタンの幅が大きいほど素早くクリックできる
- 画面の隅にあるボタンはクリックしやすい
- クリックエリアの明確化と領域を確保する
アイコンを用いる
- 素早く機能の意味を伝えれる
- 一般的に意味が伝わるか検討する
- 文脈によって意味が異ならないか注意する
- 単体で伝わらない場合は文字を併用することでわかりやすくなる
メンタルモデル
- ユーザが持つ物事の前提を考える
- 過去の体験によって作られる
- UIの流行り廃りで切り替わる可能性が高い
ユーザの視線を意識する
- 視線はF字を描く
- ユーザが情報を全て読むことはない
- 重要な情報は2行目までに整理する
- わかりやすい小見出しをつける
- リストの画像は先に見せる必要があるのか。位置を意識する
- 三分割法
- ユーザの視点が集まりやすい点
- 重要な情報は交差点に配置する
- 情報が明確に伝わる配色を考える
- 同じ色は関連する情報につける
- 色の印象と伝える情報がマッチしているかを考える
ヒューマンコンピューターインタラクション
- 人とコンピューター間の情報を伝達するコミュニケーション
- 「コンピュータサイエンス」「認知心理学」「デザイン」で構成される
- ユーザはインターフェイスの形や状況からどのように動き、何ができるのかを想像する
マウス操作とインタフェース
- PCとスマフォでの違いを意識作る必要がある
- ハイパーリンク
- ツールチップ
- ラジオボタン
- チェックボックス
- ドロップダウン
スマフォデザイン
- 操作領域を意識する
- 右手親指の操作領域
- ボタンの位置の設計
- 画面幅が限られている
- ボタン一つで複数操作ができるような工夫
- ロゴの配置位置の検討
- スマフォで用いられるデザインを意識する
- ドロワー
- モーダルウィンドウ
- プログレスバー
- ハンバーガーメニュー
- 独自の操作を理解する
- タップ
- ダブルタップ
- スワイプ
- フリック
- ロングタップ・長押し
- ドラッグ
- ピンチインアウト
- シェイク
- 傾き、動かすなど
マイクロモーメント
- モバイル利用時は断片的に利用される
- 移動中、待ち時間など
- よりダイレクトに伝わる情報を設計する必要がある
- マイクロモーメントの要素
- 知りたい
- 行きたい
- したい
- 買いたい
UIは少しずつ進化させる
- UX6Dのサイクルを回し改善していく
- デザインの一心は平均40%の反感が出る
ユーザの感性を考慮するデザイン設計
色が与える影響
- 可読性、識別性などの視覚的側面
- webサイトの印象
色の基礎知識
- 色相(H)、彩度(S)、明度(L)
- SとHを固定にしてLだけ変えることで明るさの違う同系色を作れるなど
- 印象
- 暖色、寒色、中性色
- トーン(PCCSで17段階で定義されている)で配色を考える
- ビビッド、ペール、ダーク
- HSLで共通性のある色は調和しやすく、まとまりのある配色を作りやすい
配色を決定する
- メインカラー
- 配色で2番目に多い面積の色
- サイトの印象を決定づける主役
- ベースカラー
- 配色で1番目に多い面積の色
- 背景や余白として使い、メインカラー、アクセントカラーを引き立てる
- アクセントカラー
- 強調したい箇所に使う
- 全体を引き締め、メリハリを作る
決定するポイント
- 伝えたいテーマから考える
- 競合から考える
- ユーザの好み、色から受ける印象から調整する
要素の色
- ボタン
- 馴染みすぎない色
- ボタンの優先度によって色分け
- 購入ボタンは暖色を使うと効果的
- テキスト
- ベースカラーに馴染むように調整する
- メインテキスト、サブテキスト、ヒントテキストで透明度を落としていく
- googleマテリアルデザインガイドライン
フォントが与える印象
- 角が多いほど堅い印象
- 丸みが多いほど柔らかい印象
- 書体が太いほど男性的で力強い、元気な印象
- 書体が細いほど女性的で上品、繊細な印象
見やすくする工夫
- 文字のジャンプ率を変える
- 見出しと本文の文字でのフォントサイズや太さ差でメリハリをつけて見やすくする
- 線でメリハリをつける
- 線で情報をグループ化する
- 面でメリハリをつける
- 面で情報をグループ化する
- マージンをデザインする
- 情報の優先度と関連性を考慮する
- グループ化した要素を囲む余白は揃える
最後に
- 当たり前すぎて疑問に思わないことでもゼロから考えてみる
- 印象や体験は人によって異なるが基本的な設計方法は一定の規則がある
- 誰もが理解できる最低限度の品質を保つ必要がある
- UI/UX設計はサイト全体を通して考える必要がある