デザイン指標いろいろ
Yoichi Kobayashiデザインの四原則
デザインにおける視覚的な明確さと美しさを保つための基本原則。
近接（Proximity）
関連する要素同士は近づけ、関係のない要素は離すことで情報のまとまりを視覚的に伝える。
- 見出しと本文の距離を近くする
- メニュー内の同カテゴリ項目をまとめて配置する
整列（Alignment）
全ての要素を意図に基づいて整列させることで、デザイン全体に一貫性と視覚的な秩序を生む。
- テキストや画像を左揃えに統一する
- ボタンの位置を他要素と基準線で揃える
強弱（Contrast）
重要な情報を目立たせるために、色やサイズ、太さなどで差をつけて視認性を高める。
- 見出しは本文より大きく太い文字にする
- 重要なボタンを目立つ色で配置する
反復（Repetition）
デザイン内で同じ要素やスタイルを繰り返し使うことで、統一感とリズムを生む。
- 同じフォントや色使いを複数ページで統一する
- アイコンの形や大きさを一定にする
Yoichi Kobayashiギャレットの5段階モデル
ギャレットの5段階モデルは、ユーザーエクスペリエンス（UX）設計を体系的に捉えるためのフレームワークです。抽象的な目的から具体的なインターフェース設計までを5つの層に分け、段階的に設計を進めることで、ユーザーとビジネス双方にとって最適な体験を構築することが可能になります。
戦略（Strategy）
ユーザーのニーズとビジネスの目的を明確にし、それらを両立させるための方向性を定める段階です。この段階では、「なぜこのサービスをつくるのか」「誰のためにつくるのか」を理解することが重要です。
工程、成果物の例
- ユーザーリサーチ（アンケート・インタビュー）
- ペルソナの作成
- カスタマージャーニーマップ
- ビジネスゴールの設定
- プロジェクトの成功指標の定義
要件（Scope）
戦略で定めた方向性をもとに、必要な機能やコンテンツを明確にする段階です。ユーザーにとって価値ある体験を提供するために、何を実現すべきかを具体的に定義します。
工程、成果物の例
- 機能要件定義書
- コンテンツ要件リスト
- ユースケースの洗い出し
- 優先順位の整理
- ワークショップでの合意形成
構造（Structure）
定義された要件をもとに、情報や機能の構造を設計する段階です。ユーザーの行動を意図通りに導くための、インタラクション設計や情報アーキテクチャを構築します。
工程、成果物の例
- サイトマップ
- ナビゲーション設計
- フローチャート
- ユーザーフロー
- シナリオ設計
骨格（Skeleton）
構造で設計された要素を、実際の画面配置として表現する段階です。UIの配置や操作性、情報の優先順位などを視覚的に整理し、ユーザーがスムーズに利用できる画面設計を行います。
工程、成果物の例
- ワイヤーフレーム
- ナビゲーションメニューの設計
- コンテンツレイアウト
- ボタンやリンクの配置計画
- UIプロトタイプ
表層（Surface）
ユーザーが実際に目にし、操作するビジュアルの設計段階です。視覚的なデザインによりブランドイメージを伝え、使いやすさや心地よさを実現します。
工程、成果物の例
- ビジュアルデザイン
- カラーパレットとフォントの選定
- UIコンポーネントデザイン
- デザインガイドライン
- 実装前デザインカンプ
リンク
Yoichi Kobayashiノーマンの7つのデザイン原則
ドナルド・ノーマン（Donald A. Norman）は、人間中心設計（HCD）の第一人者であり、使いやすい製品やインターフェースを設計するための基本原則として「7つのデザイン原則」を提唱しました。これらはユーザーが直感的に操作できる製品デザインを目指すうえで非常に有用です。本稿では、それぞれの原則を簡潔に解説し、具体的な例を挙げながら紹介します。
発見可能性（Discoverability）
ユーザーが何が可能であるか、どのような操作ができるかを容易に見つけられることが重要です。操作できる要素が明確であれば、ユーザーは迷うことなく目的の行動に進めます。
例
- ボタンに「送信」「削除」などの明確なラベルがある
- 押せそうなデザイン（例：立体的なボタン）
- メニューやナビゲーションがすぐ目につく場所にある
フィードバック（Feedback）
ユーザーの操作に対して、即座にわかりやすい反応が返ることが求められます。これにより、操作が正しく行われたかどうかを確認できます。
例
- ボタンを押したときに色が変わる
- ファイルを保存すると「保存しました」と表示される
- ローディング中にスピナーが表示される
概念モデル（Conceptual model）
ユーザーが製品の仕組みや動作を頭の中で正しく理解できることが大切です。製品がどのように動作するのかを予測できるモデルが必要です。
例
- デスクトップ画面に「ゴミ箱」があることで、削除の意味を直感的に理解できる
- スクロールバーの動きが実際のページ移動と一致している
- 音量スライダーの上げ下げが音の大きさとリンクしている
アフォーダンス（Affordance）
物の形状や質感が、その使い方を自然と示している状態です。ユーザーが何をすればよいかを、見ただけで理解できるようにすることが目指されます。
例
- ドアの取っ手が「引く」動作を促す形状
- 押しボタンが凸状で「押す」ことを誘導する
- スクロールできるリストが見た目にスクロール可能とわかる
シグニファイア（Signifier）
アフォーダンスを明確に補強する視覚的・音的・触覚的な手がかりのことです。何ができるか、どのように操作するかを具体的に示します。
例
- カーソルが手の形になることでクリック可能と示す
- ドアに「PULL」や「PUSH」と表示されている
- ボタンにアイコンや色で意味を強調する
対応付け（Mapping）
操作とその結果の関係が直感的に理解できる配置であること。ユーザーがどの操作がどの結果をもたらすかを自然に把握できるようにします。
例
- リモコンの矢印ボタンが画面のナビゲーションと一致している
- コンロのつまみの位置が対応するバーナーと物理的に一致している
- スライダーで左に動かすと「戻る」、右に動かすと「進む」
制約（Constraint）
誤操作や無駄な選択を防ぐために、あらかじめ操作範囲を制限することです。ユーザーの行動を適切な範囲に導くことで、ミスを減らすことができます。
例
- 必須入力欄に入力しないと次に進めない
- フォームに文字数制限がある
- USBケーブルが特定の方向でしか差せない
リンク
Yoichi Kobayashi美的ユーザビリティ効果（Aesthetic-Usability Effect）
美的ユーザビリティ効果とは、ユーザーが「見た目が美しいデザイン」を持つUIを、実際の使いやすさよりも直感的に「使いやすい」と感じる心理効果のことを指します。この概念は、1995年に日立デザインセンターの研究によって提唱されました。
この効果が生まれる理由
-
第一印象の影響
人は視覚的な美しさを直感的に評価し、それが「良いもの」「使いやすいもの」として認識される傾向があります。 -
ポジティブなバイアス
美しいデザインの製品やアプリは、多少の使いにくさがあっても「きっと良いものだろう」と寛容に受け入れられることが多いです。 -
感情との関連
見た目の良いUIは、ユーザーに安心感や信頼感を与え、ストレスを軽減するため、使いやすいと錯覚しやすくなります。
具体的な例
-
Apple製品のUIデザイン
シンプルで洗練されたデザインが特徴のApple製品は、直感的に使いやすいと感じられることが多い。 -
Webサイトのデザイン
視覚的に整ったサイトは、情報が整理されていなくても「わかりやすい」と思われることがある。
注意点
美しいデザインが必ずしも実際のユーザビリティを向上させるわけではありません。
見た目の美しさと機能性をバランスよく設計することが重要です。
見た目だけを優先すると、直感的な操作がしにくくなったり、必要な情報が見つかりにくくなったりすることがあります。