Post

UI/UX デザインを学んでみた

Posted Updated
Preview Image
By koheitakahashi 20 min read

はじめに

これまでの仕事を振り返ってみると、画面設計をすることはよくありますが、いつも勘に任せて設計している状態でした。少し時間が生まれたため、これを機に Web デザイン、UI/UX デザインを勉強したいと思って数冊の本を読んでみました。そして、学習記録として、その中で学んだことをまとめました。ちなみに読んだ本は以下になります。

学んだこと

Web デザインの基本的な流れ

Web デザインは基本的に以下の流れで進められます。

  1. UX 設計
    • ユーザーの行動も含めた利用シーンを想定(カスタマージャーニーマップなどを作成)
  2. 情報設計
    • どのように配置すればユーザーに伝わるのかを設計(カードソーティングなどを行う)
  3. ワイヤーフレーム作成
    • コンテンツの優先順位を設定
  4. ユーザビリティテスト
  5. 実装

UX 設計の手順

UX 設計の目的は、ユーザーの行動も含めた利用シーンを想定し、そのプロダクトを使う価値を定めることです。以下の手順で取り組むと考えやすいと紹介されていました。

  1. 体験の主人公の解像度を上げる
    • 課題感を持つ主人公を設定(共感マップなどを作成)
  2. 結末を描く
    • 最終的に主人公に何を感じてもらいたいか、実現してもらいたいかを書く
    • 提供する価値を定める
  3. シーンを多面的に理解する
    • シーンを規定するために以下を整理する
    • 出来事&タイミング
    • 役割意識・想定される影響
    • 人の目
    • 物理的な環境
    • 制約条件
    • 期待値
  4. あらすじを決める
    • 時系列で体験を組み込む(カスタマージャーニーマップを作成)
  5. 登場人物と小道具を配置する

情報設計の手順

情報設計の目的は複雑な情報を整理してユーザーに届けることです。基本的に以下の手順で進められます。

  1. ストーリーボードやシナリオからユーザーが求めている情報の抽出
  2. 情報の優先順位を設計
    • カードソーティング
    • 「コンテンツの名称などの情報をカード化→カードをグループ化→グループにラベルを付ける」という手順で進められます
  3. 情報をより分かりやすく表現する(5ハットラックスなどの考え方がある)

ワイヤーフレーム作成

情報設計でどのような情報をユーザーに届けるべきかが決定したら、コンテンツの優先順位を決定するためにワイヤーフレームを作成します。ワイヤーフレーム作成後はプロトタイプを作成し、検証していく中で UI を作り込んでいくという流れになります。

UI デザインにおいて知っておくべきこと

サイトストラクチャのパターンを見出す

画面全体の構成を考えるときは、サイトストラクチャのパターンの中でどれが合っているかという観点で考えます。サイトストラクチャのパターンは以下です。

  • ファセット分類構造
    • ex. ECサイトの商品ページなど
    • 価格・目的別・地域などの条件で情報がリンクされている
  • 階層型構造
    • ex. コーポレートサイトなど
    • どこに何があるかが明確になっている
  • 直接型構造
    • 予約・会員登録・購入などのフロー
    • ユーザーが一つのタスクに集中しやすい
  • Web 構造
    • ex. wiki など
    • 情報動詞が相互に関係し、終了ページや行き止まりがない
  • ハブスポーク型構造
    • ex. Facebook など
    • ハブとなるページを元に放射状にリンクするページが広がる

ナビゲーションの種類

Webページを構成する各コンポーネントの役割と種類を抑えておく必要があります。例えば、ナビゲーションを例に取ると以下の種類があります。

種類役割備考
グローバルナビゲーション主要なコンテンツを導くこと。Webサイトの概要を示すこと。サイトストラクチャの最上位階層を並べたり、商品カテゴリや、ユーザー・シーンを並べたりする
ローカルナビゲーショングローバルナビゲーションの一つの項目に対して、より細かく分類するナビゲーション 
パンくずリストユーザーがどこにいるのかを知らせる 
ステップナビゲーション今何をしているのか、次に何をするのかを把握する 
関連ナビゲーションユーザーのコンテキストに関連したコンテンツを表示する 

オブジェクト指向で考える

UI デザインのアプローチは2つあります。タスクを手がかりに設計するか(タスク指向)、オブジェクトを手がかりに設計する(オブジェクト指向)です。オブジェクトとは、複数のストーリーから抽出されたユーザーが目当てのリソースを指します。例えば、「タスクを作成する」「タスクを削除する」というストーリーがあった場合、タスクがオブジェクトにあたります。

タスク指向で設計されたUIは分かりづらく、使いづらいことが多いです。そのため、オブジェクト指向で設計していくことが望ましいです。

オブジェクト指向で設計していく場合、設計プロセスの大枠は以下になります。

  1. オブジェクトの抽出
  2. ビューとナビゲーションの検討
  3. レイアウトパターンの適用

具体的には以下の手順で設計していくと考えやすいです。

  1. ストーリーボードなどから名詞を抽出する
  2. 名詞とそれらの関係を抽出する
  3. 名詞を汎化して、粒度を揃える
  4. 名詞の関係性を繋げ、オブジェクトを特定する
  5. メインのオブジェクトを特定する
  6. メインオブジェクトの多重性を特定する
  7. タスクからアクション(動詞)を見つける
  8. メインオブジェクトにコレクションビューとシングルのビューを与える
  9. コレクションビューとシングルビューの呼び出し関係を検討する
    • コレクションビューとは、そのオブジェクトの一覧ページ
    • シングルビューとは、そのオブジェクトの詳細ページ
  10. メインオブジェクトの中からルートナビゲーションの項目を選定する
    • ルートナビゲーションを選ぶ際の注意点
      • ルートナビゲーションにはメインオブジェクトの中から特に重要なものを並べる
      • ユーザーがアプリケーションを使用する際に最初に思い浮かべるオブジェクトを選択する
      • アプリケーションを機能ではなく、ものが並んでいるイメージで捉える
      • ナビゲーションに配置するリンクは、動詞ではなくオブジェクト名を用いる
      • オブジェクト名の語尾に管理、一覧、閲覧、確認、紹介、参照、登録、情報、編集などを付与しない
      • ユーザーがルートナビゲーションを選択するとそのオブジェクトのコレクションビューが表示されるように設計する
  11. メインオブジェクトとアクションの参照関係を踏まえて配置パターンを適用する

UI デザインの基本原則

UI をデザインする際に抑えておくべき、基本的な原則は以下になります。

  • 近接: 関係する情報を近づけることによりグループ化する
  • 整列: 情報を整列し、スムーズな視線移動と統一感を生み出す
  • 反復: 情報に一貫性をもたせる
  • コントラスト: 情報に強弱をつける

抑えておくべき理論

UI/UX はソフトウェアと人間のコミュニケーションであるため、人間心理と切っても切り離せない関係にあります。そのため UI/UX デザインをするにあたって、以下のような心理学の理論を抑えておくと、人間にとって使いやすい UI/UX をデザインしやすいです。

  • ヤコブの法則
    • ユーザーは他のサイトで多くの時間を費やしているので、あなたのサイトにもそれらと同じように挙動するように期待している
  • フィッツの法則
    • ターゲットに至るまでの時間はターゲットの大きさと近さで決まる
  • ヒックの法則
    • 意思決定にかかる時間はとりうる選択肢の数と複雑さで決まる
  • ミラーの法則
    • 人が短期記憶に保持できるのは7±2個まで
  • ポステルの法則
    • 出力は厳密に、入力は寛容に
  • ピークエンドの法則
    • 経験についての評価は、全体の総和や平均でなく、ピーク時と終了時にどう感じたかで決まる
  • 美的ユーザビリティ法則
    • 見た目が美しいデザインはより使いやすいと感じられる
  • フォン・レストルフ効果
    • 似たものが並んでいると、その中で他とは異なるものが記憶に残りやすい
  • テスラーの法則
    • どんなシステムにもそれ以上減らすことのできない複雑さがある
  • ドハティの閾値
    • 応答が0.4秒以内のとき、コンピュータとユーザーの双方がもっとも生産的になる

最後に

今までデザインの知識はほとんど持っていなかったのですが、複数の書籍を一気に読むことで、ある程度 UI/UX デザインについての知識を幅広く得られてよかったです。複数の書籍を一気に読むことで、同じことを言っている箇所は重要なのだと分かったり、1冊読んだだけでは理解が難しい箇所も平易に説明されている箇所があったりと、学習しやすかったように思います。新しい事柄を勉強するときには、また今回のように複数の書籍を一気に読むことを試してみようと思います。

学習記録
UI/UX デザイン 学習記録 心理学
This post is licensed under CC BY 4.0 by the author.