Movatterモバイル変換

[0]ホーム
URL:

UX INSPIRATION!

UXデザイナーのクリエイティブブログ

site-icon
ux-inspiration

UI/UXデザイナーなら一度は目を通しておきたい「デザイン原則」まとめ【随時更新】

（2025/01/04 更新）デザイン |,

design-principle_catch

世に出ている「デザイン原則」と呼ばれるものたちをまとめてみました。

ユーザビリティ関連からモバイルUX、サービスデザインにいたるまで、広い範囲のデザイン原則を網羅したつもりです。ただし、チェックリスト的にまとめたため、内容の詳細は記述していません。

出典や内容を紹介している外部リンクを張っておきましたので、詳細を確認したい方はそちらをご参照いただければと思います。

なお、この記事は有用なデザイン原則を見つけ次第、随時更新していきます。

更新履歴

2018/10/01：
「アクセシビリティの4原則」「Material Designの原則」「Android TV デザイン原則」「インクルーシブデザインの原則」を追加

2016/12/28：
「Microsoft デザイン原則」を「Windows UX デザイン原則」にアップデート
「Apple Watch デザイン原則」を追加

2015/10/12：
「Pebble デザイン原則」「Apple TV　デザイン原則」「アジャイル宣言の背後にある原則」を追加

2014/12/29：
「Android Wear デザイン原則」を追加

2014/8/16：
「英国政府デジタルサービスのデザイン原則」「シンプリシティの法則」を追加

2014/4/5：
「シュナイダーマンのUIデザインにおける8つの黄金律」「デザインリサーチの８大原則」を追加

Contents

ユーザビリティ関連

よいデザインの４原則　by ドナルド・A. ノーマン

1. 可視性

2. よい概念モデル

3. よい対応付け

4. フィードバック

出典：『誰のためのデザイン？―認知科学者のデザイン原論』

ユーザー中心デザインの７つの原則　by ドナルド・A.ノーマン

1. 外界にある知識と頭の中にある知識の両者を利用する

2. 作業の構造を単純化する

3. 対象を目に見えるようにして、実行のへだたりと評価のへだたりに橋をかける

4. 対応づけを正しくする

5. 自然の制約や人工的な制約などの制約の力を活用する

6. エラーに備えたデザインをする

7. 以上のすべてがうまくいかないときには標準化をする

出典：『誰のためのデザイン？―認知科学者のデザイン原論』

５つのユーザビリティ特性　by ヤコブ・ニールセン

1. 学習しやすさ (Learnability)

2. 効率性 (Efficiency)

3. 記憶しやすさ (Memorability)

4. 間違えにくさ (Errors)

5. 主観的満足度 (Satisfaction)

出典：『ユーザビリティ・エンジニアリング原論』

参考：使い勝手の原則、5つのユーザビリティ特性｜マーケティング・ボイス（公式サイト）

10ヒューリスティックス　by ヤコブ・ニールセン

1. システム状態の視認性を高める

2. 実環境に合ったシステムを構築する

3. ユーザーにコントロールの主導権と自由度を与える

4. 一貫性と標準化を保持する

5. エラーの発生を事前に防止する

6. 記憶しなくても、見ればわかるようなデザインを行う

7. 柔軟性と効率性を持たせる

8. 最小限で美しいデザインを施す

9. ユーザーによるエラー認識、診断、回復をサポートする

10. ヘルプとマニュアルを用意する

出典：10 Heuristics for User Interface Design: Article by Jakob Nielsen

参考：Jacob Nielsen の「ユーザビリティに関する10のヒューリスティクス (問題解決に役立つ知見) / Ten Usability Heuristics」 — Website Usability Info

シュナイダーマンのUIデザインにおける8つの黄金律

1. 一貫性を保つよう努めよう

2. お得意様のユーザが、ショートカットを使えるようにしよう

3. 有益なフィードバックを提供しよう

4. 完了感を与えるために対話をデザインしよう

5. 簡単なエラーを処理を提供しよう

6. 簡単にやり直しできるようにしよう

7. 内部の動きが把握できるようにしよう

8. 人間の短期記憶に負担を減らそう

出典：Shneiderman’s Eight Golden Rules of Interface Design

参考：[O] シュナイダーマンのUIデザインにおける8つの黄金律

対話の７原則 ー ISO 9241-10

1. タスクへの適合性

2. 自己記述性

3. 可制御性

4. 利用者の期待への合致

5. 誤りに対しての許容度

6. 個別化への適合性

7. 学習への適合性

参考：HCD-Net | 組み込み技術者のためのユーザビリティ基礎講座 | 第1回「ガイドラインの定義と位置づけ」

画面インタフェースデザインの６原則

1. 手掛かり（ガイドとなる情報）

2. マッピング（対応付け）

3. 用語

4. 一貫性

5. 動作原理

6. フィードバック

出典：『デザイナー、エンジニアのためのUX・画面インターフェースデザイン入門』

アクセシビリティの４原則

1. 知覚可能

2. 操作可能

3. 理解可能

4. 堅牢性

出典：『WCAG 2.0 解説書のイントロダクション | WCAG 2.0解説書』

見えるための４原則

1. 視角

2. 明るさ

3. 対比（コントラスト）

4. 露出時間

出典：『デザイナー、エンジニアのためのUX・画面インターフェースデザイン入門』

モバイルのガイドライン関連

iOSヒューマンインタフェースガイドライン 設計における原則

1. 外観の整合性 | Aesthetic Integrity

2. 一貫性 | Consistency

3. 直接操作 | Direct Manipulation

4. フィードバック | Feedback

5. メタファ | Metaphors

6. ユーザによる制御 | User Control

出典：iOS Human Interface Guideline

Android デザイン原則

1. ユーザーを引きつける | Enchant Me

　・サプライズで楽しませる
・ボタンやメニューよりもリアルなオブジェクトでさらに楽しく
・アプリに自分らしさをプラス
・ユーザーの好みを学習

2. 生活をシンプルに | Simplify My Life

　・簡潔を心がける
・画像は言葉よりもわかりやすい
・選択は最小限に、最終決定はユーザーに
・必要なものを必要なときに
・現在位置を把握する
・作成物を失くさない
・見た目が同じなら機能も同じ
・割り込みは必要な場合のみ

3. 操作を楽しく | Make Me Amazing

　・あらゆる場所に工夫を凝らす
・ユーザーの責任にしない
・操作を促すしかけを散りばめる
・手間のかかる作業は不要
・重要なことはすみやかに

出典：Design Principles | Android Developers

Material Design（マテリアルデザイン）原則

1. マテリアルはメタファーである | Material is the metaphor

2. 大胆、グラフィカル、意図的 | Bold, graphic, intentional

3. 動きには意味がある | Motion provides meaning

4. 柔軟な基盤 | Flexible foundation

5. クロスプラットフォーム | Cross-platform

出典：『Introduction – Material Design』

意訳：@h0sa

Windows UX デザイン原則

1. コンセプトを減らして、信頼を高める

2. どんなに小さなことも重要である

3. “外観” と “内容” を重視する

4. 見つけやすく、かつ目障りでないようにする

5. 開始前の UX と質問

6. カスタマイズではなく、個人設定にする

7. エクスペリエンスのライフサイクルを評価する

8. 時間が貴重な、移動の多いユーザー向けに作成する

Windows ユーザー エクスペリエンスのデザインの原則

ウェアラブルデバイスのガイドライン関連

Apple Watch デザイン原則

1. ひと目で見てわかる | Glanceable

2. 行動を喚起する | Actionable

3. すばやく反応する | Responsive

出典：Overview – watchOS Human Interface Guidelines

意訳：@h0sa

Android Wear デザイン原則

1. 良いタイミングで | Timely

2. ひと目で見てわかる | Glancable

3. タップしやすい | Easy to tap

4. 動作をすばやく | Time-saving

出典：Creative vision – Wear OS by Google – Android Wear design guidelines

意訳：@h0sa

Pebble デザイン原則

1. Think of your app’s core functionality and design around that
コアとなる機能性を考え、その周りをデザインする

2. Focus on the simplest way for the user to interact with a complex data set
ユーザーが複雑なデータと対話する最もシンプルな方法にフォーカスする

3. Keep the pattern of engagement with the user consistent and intuitive
ユーザーにとって一貫性があり直感的なパターンを保つ

4. Create a single feature that distinguishes your app from other apps
他のアプリと差別化できるたった１つの機能を用意する

5. Design a killer use case for your app
非常に魅力的なユースケースをデザインする

6. Readability is really, really important
可読性は本当に本当に重要

7. Identify the one feature that’s going to amaze and excite the user and then build around that
ユーザーが驚きワクワクする１つの機能を特定した後、実装に移る

8. Don’t model your app around the Pebble UI. Create your own UI
Pebble UIをモデルにするのではなく、独自のUIを考案する

9. Design around speed of interaction, not Pebble’s UI for navigation
Pebble UIを参考にせずに、インタラクションのスピードをデザインする

出典：Pebble Designers Guide p.23

意訳：@h0sa

テレビ関連

Apple TV ヒューマンインタフェースガイドライン　デザイン原則

1. つながっていること | Connected

2. 明瞭であること | Clear

3. 没入的であること | Immersive

出典：Apple TV Human Interface Guidelines – Apple Developer

参考：[&] Apple TV Human Interface Guideline | 安藤日記

Android TV デザイン原則

1. カジュアルな消費 | Casual consumption

2. 映画のような体験 | Cinematic experience

3. 軽快なインタラクション | Lightweight interaction

4. シェアされる状況への配慮 | Shared context

出典：『Creative vision – Design principles – Android TV』

意訳：@h0sa

サービスデザイン関連

サービスデザイン思考の５原則

1. ユーザー中心

2. 共創

3. インタラクションの連続性

4. 物的証拠

5. ホリスティック（全体的）な視点

出典：『THIS IS SERVICE DESIGN THINKING. ー 領域横断的アプローチによるビジネスモデルの設計』

参考：カスタマージャーニーマップだけじゃない！ 顧客理解を深めるために使い分けたいツール | Web担当者Forum

英国政府デジタルサービスのデザイン原則

1. まずニーズからはじめる

2. なんでもかんでも手を広げず、するべきことだけをする

3. データをもってデザインする

4. シンプルにすることに心血を注ぐ

5. 繰り返し、繰り返す

6. 受け入れられやすいものに作る

7. コンテキストを理解する

8. デジタルサービスを作るのであって、Webサイトを作るのではない

9. 一貫しているべし、単に統一するのではなく

10. オープンにすれば、物事はもっと良くなる

出典：GOV.UK – GDS design principles

参考：英国政府のWeb担当が作った“デジタルデザインの原則10か条”がスゴい！ | Web担当者Forum

アジャイル、リーンUX関連

アジャイル宣言の背後にある原則

* デザイン原則ではありませんが、次のリーンUXの原則につながるものなので載せます。

  1. 顧客満足を最優先し、価値のあるソフトウェアを早く継続的に提供します。
  2. 要求の変更はたとえ開発の後期であっても歓迎します。変化を味方につけることによって、お客様の競争力を引き上げます。
  3. 動くソフトウェアを、2-3週間から2-3ヶ月というできるだけ短い時間間隔でリリースします。
  4. ビジネス側の人と開発者は、プロジェクトを通して日々一緒に働かなければなりません。
  5. 意欲に満ちた人々を集めてプロジェクトを構成します。環境と支援を与え仕事が無事終わるまで彼らを信頼します。
  6. 情報を伝えるもっとも効率的で効果的な方法はフェイス・トゥ・フェイスで話をすることです。
  7. 動くソフトウェアこそが進捗の最も重要な尺度です。
  8. アジャイル･プロセスは持続可能な開発を促進します。一定のペースを継続的に維持できるようにしなければなりません。
  9. 技術的卓越性と優れた設計に対する不断の注意が機敏さを高めます。
  10. シンプルさ（ムダなく作れる量を最大限にすること）が本質です。
  11. 最良のアーキテクチャ・要求・設計は、自己組織的なチームから生み出されます。
  12. チームがもっと効率を高めることができるかを定期的に振り返り、それに基づいて自分たちのやり方を最適に調整します。

出典：アジャイル宣言の背後にある原則

参考：アジャイルソフトウェア開発宣言

リーンUXの基本原則

1. 部門/領域横断的なチーム

2. 小規模、専任、同一場所

3. 進捗＝結果(Output)ではなく、成果(Outcome)

4. 課題焦点型のチーム

5. 無駄を取り除く

6. バッチサイズは小さく

7. 継続的な発見

8. GOOB(getting out go the building) ー新たなユーザ中心思考

9. 共通理解

10. アンチパターン ーロックスター、エバンジェリスト、忍者

11. 仕事の外面化

12. 分析よりも形にする

13. 成長よりも学習

14. 失敗を許容する

15. 中間成果物中心の仕事の進め方からの脱却

出典：『Lean UX ―リーン思考によるユーザエクスペリエンス・デザイン』

UCD、デザインリサーチ関連

ユーザ中心設計(UCD)の６原則 ー ISO 9241-210

1. ユーザ、タスク、環境の明確な理解に基づいている

2. 設計と開発の全期間を通じてユーザが関与する

3. ユーザ中心の評価（ユーザからのフィードバック）に駆動され改善される

4. プロセスが反復的である

5. ユーザエクスペリエンス全体を対象とする

6. 設計チームは多様なスキルと視点を持ったメンバーで構成される

参考：人机交互論: 新・UCDの四原則

デザインリサーチの８大原則

1. リサーチの表面を整える

2. 仕事の質は現地スタッフ次第

3. すべては滞在する場所から

4. 人集めには何通りもの方法を

5. クライアントよりも参加者優先

6. データには生命を

7. いつものルールは通用しない

8. 息抜きする余裕を持つ

出典：『サイレント・ニーズ ―― ありふれた日常に潜む巨大なビジネスチャンスを探る』

その他

ビジュアルデザインの原則

1. 統一性

2. 多様性

3. 調和

4. 強調

5. コントラスト

6. 反復（リズム・パターン）

7. 割合

参考：デザインの要素と原則 | Webクリエイターボックス

ユニバーサルデザインの７原則 by ロナルド・メイス

1. 誰にでも公平に利用できること

2. 使う上で自由度が高いこと

3. 使い方が簡単ですぐわかること

4. 必要な情報がすぐに理解できること

5. うっかりミスや危険につながらないデザインであること

6. 無理な姿勢をとることなく，少ない力でも楽に使用できること

7. アクセスしやすいスペースと大きさを確保すること

参考：ユニバーサルデザインの7原則 | 株式会社ユーディット（情報のユニバーサルデザイン研究所）

インクルーシブデザインの原則

1. 同等の体験を提供する

2. 状況を考慮する

3. 一貫性を保つ

4. 利用者に制御させる

5. 選択肢を提供する

6. コンテンツの優先順位を付ける

7. 価値を付加する

出典：『インクルーシブデザインの原則（「Inclusive Design Principles」日本語訳）』

シンプリシティの法則 by ジョン・マエダ

1. 削除 – シンプリシティを実現する最もシンプルな方法は、考え抜かれた削除を通じて手に入る。

2. 組織化 – 組織化は、システムを構成する多くの要素を少なく見せる。

3. 時間 – 時間を節約することで、シンプリシティを感じられる。

4. 学習 – 知識はすべてをシンプルにする。

5. 相違 – シンプリシティとコンプレクシティは互いを必要とする。

6. コンテクスト – シンプリシティの周辺にあるものは、決して周辺的ではない。

7. 感情 – 感情は乏しいより豊かなほうがいい。

8. 信頼 – 私たちはシンプリシティを信じる。

9. 失敗 – 決してシンプルにできないものもある。

10. 1 – シンプリシティは、明白なものを取り除き、有意義なものを加えることにかかわる。

出典：『シンプリシティの法則』

参考：シンプリシティの法則 – 私的 本まとめ

良いデザインの10原則 by ディーター・ラムス

1. Good design is innovative. (革新的)

2. Good design makes a product useful. (実用的)

3. Good design is aesthetic. (美しい)

4. Good design makes a product understandable. (説明不要)

5. Good design is unobtrusive. (でしゃばらない)

6. Good design is honest. (誠実である)

7. Good design has longevity. (長持ち)

8. Good design is consequent down to the last detail. (ディテールまで完璧)

9. Good design is environmentally friendly. (環境にやさしい)

10. Good design is as little design as possible. (最小限のデザイン)

参考：Vitsœ | グッド・デザイン | ディーター・ラムス： グッド・デザインの10の原則

おわりに

以上、世に出ている「デザイン原則」たちでした。

ユーザビリティ関連のものなんかは重複している項目も多く、今の時代に合わせてもっとうまくまとめられそうな気もします。

最後にディーター・ラムスさんを持ってきましたが、僕はやっぱり

“Good design is as little design as possible. (最小限のデザイン)”

が普遍のデザイン原則かと思います。「デザインされていない」と思われるぐらい自然なデザインは、時代やデザイン領域に関係なく受け入れられるはずです。

10年後にも古く感じない「デザイン原則」こそ本当の「原則」になるでしょう。

以上、@h0saでした。

2018/10/1 追記

https://principles.design/

というサイトで、デザイン原則が英語で180個以上まとまっています。（ドメイン名がそのままですごい。）

検索性がちょっと悪いですが、本記事以外のデザイン原則を見てみたい方は訪れてみてください。

参考書籍

デザインの原則・法則系タイトルを置いておきます。

要点で学ぶ、デザインの法則150 – Design Rule Index

photo credit:ChaoticMind75 viaphotopincc

Author

Hiroki Hosaka

AIスタートアップのデザイナー。メーカー→IoTベンチャー→外資系デザインコンサル→AIベンチャー執行役員CXOを経て現職。このブログではデザインやUXに関するクリエイティブネタを発信しています。
詳細プロフィール

Follow on feedly

新着記事

UI/UXデザイナーなら一度は目を通しておきたい「デザイン原則」まとめ【随時更新】

UXデザイナーのクリエイティブブログ

WordPress-Theme STINGER3

Copyright© UX INSPIRATION! , 2014 All Rights Reserved.

[8]ページ先頭
©2009-2025 Movatter.jp