UI/UXデザイナーなら一度は目を通しておきたい「デザイン原則」まとめ【随時更新】
世に出ている「デザイン原則」と呼ばれるものたちをまとめてみました。
ユーザビリティ関連からモバイルUX、サービスデザインにいたるまで、広い範囲のデザイン原則を網羅したつもりです。ただし、チェックリスト的にまとめたため、内容の詳細は記述していません。
出典や内容を紹介している外部リンクを張っておきましたので、詳細を確認したい方はそちらをご参照いただければと思います。
なお、この記事は有用なデザイン原則を見つけ次第、随時更新していきます。
更新履歴
2014/4/5:
「シュナイダーマンのUIデザインにおける8つの黄金律」「デザインリサーチの8大原則」を追加
2014/8/16:
「英国政府デジタルサービスのデザイン原則」「シンプリシティの法則」を追加
2014/12/29:
「Android Wear」を追加
ユーザビリティ関連
よいデザインの4原則 by ドナルド・A. ノーマン
1. 可視性
2. よい概念モデル
3. よい対応付け
4. フィードバック
参考:センスのいらないUIデザイン(1) よいデザインの4原則 | エンジニア開発記
ユーザー中心デザインの7つの原則 by ドナルド・A.ノーマン
1. 外界にある知識と頭の中にある知識の両者を利用する
2. 作業の構造を単純化する
3. 対象を目に見えるようにして、実行のへだたりと評価のへだたりに橋をかける
4. 対応づけを正しくする
5. 自然の制約や人工的な制約などの制約の力を活用する
6. エラーに備えたデザインをする
7. 以上のすべてがうまくいかないときには標準化をする
5つのユーザビリティ特性 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
シュナイダーマンのUIデザインにおける8つの黄金律
1. 一貫性を保つよう努めよう
2. お得意様のユーザが、ショートカットを使えるようにしよう
3. 有益なフィードバックを提供しよう
4. 完了感を与えるために対話をデザインしよう
5. 簡単なエラーを処理を提供しよう
6. 簡単にやり直しできるようにしよう
7. 内部の動きが把握できるようにしよう
8. 人間の短期記憶に負担を減らそう
出典:Shneiderman’s Eight Golden Rules of Interface Design
参考:[O] シュナイダーマンのUIデザインにおける8つの黄金律
対話の7原則 ー ISO 9241-10
1. タスクへの適合性
2. 自己記述性
3. 可制御性
4. 利用者の期待への合致
5. 誤りに対しての許容度
6. 個別化への適合性
7. 学習への適合性
参考:HCD-Net | 組み込み技術者のためのユーザビリティ基礎講座 | 第1回「ガイドラインの定義と位置づけ」
見えるための4原則
1. 視角
2. 明るさ
3. 対比(コントラスト)
4. 露出時間
出典:『デザイナー、エンジニアのためのUX・画面インターフェースデザイン入門』
画面インタフェースデザインの6原則
1. 手掛かり(ガイドとなる情報)
2. マッピング(対応付け)
3. 用語
4. 一貫性
5. 動作原理
6. フィードバック
出典:『デザイナー、エンジニアのためのUX・画面インターフェースデザイン入門』
モバイルのガイドライン関連
iOSヒューマンインタフェースガイドライン 設計における原則
1. 外観の整合性
2. 一貫性
3. 直接操作
4. フィードバック
5. メタファ
6. ユーザによる制御
出典:iOS Human Interface Guideline
Android デザイン原則
1. Enchant Me(魅了する)
・驚きのある動き
・リアルなオブジェクト
・自分流にカスタマイズ
・自分のことを知っている
2. Simplify My Life(物事をラクにする)
・メッセージは簡潔に
・絵は言葉よりも早い
・適切な回答を提示し最終決断をさせる
・必要な時に必要なものをだけを
・今どこにいるか常にわかる
・端末を変えてもデータを失わない
・同じ見た目は同じ動き
・本当に重要な事以外で中断させない
3. Make Me Amazing(驚きを与える)
・ビジュアルパターンやスワイプ、 どこでも使ってる小技を
・失敗はユーザーのせいじゃない
・簡単は事でも親切なフォローを
・今まで難しかったタスクを簡単に
・重要な機能を最優先
出典:Design Principles | Android Developers
Microsoft デザイン原則
1. 作品へのこだわりを示す
2. 軽快かつ柔軟
3. 真のデジタル化を心がける
4. より少ない要素でより大きな効果を上げる
5. 全体で勝つ
ウェアラブルデバイスのガイドライン関連
Android Wear
1. Focus on not stopping the user and all else will follow
ユーザーの行動を止めないことに注力する
2. Design for big gestures
大振りなジェスチャーに向けてデザインする
3. Think about stream cards first
ストリームのカードを第一に考える
4. Do one thing, really fast
1つのことを本当に速く行う
5. Design for the corner of the eye
周辺視野に向けてデザインする
6. Don’t be a constant shoulder tapper
頻繁に肩を叩かない
出典:Design Principles for Android Wear | Android Developers
意訳:@h0sa
サービスデザイン、リーンUX、UCD、デザインリサーチ
サービスデザイン思考の5原則
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の基本原則
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)の6原則 ー ISO 9241-210
1. ユーザ、タスク、環境の明確な理解に基づいている
2. 設計と開発の全期間を通じてユーザが関与する
3. ユーザ中心の評価(ユーザからのフィードバック)に駆動され改善される
4. プロセスが反復的である
5. ユーザエクスペリエンス全体を対象とする
6. 設計チームは多様なスキルと視点を持ったメンバーで構成される
デザインリサーチの8大原則
1. リサーチの表面を整える
2. 仕事の質は現地スタッフ次第
3. すべては滞在する場所から
4. 人集めには何通りもの方法を
5. クライアントよりも参加者優先
6. データには生命を
7. いつものルールは通用しない
8. 息抜きする余裕を持つ
出典:『サイレント・ニーズ ―― ありふれた日常に潜む巨大なビジネスチャンスを探る』
その他
ビジュアルデザインの原則
1. 統一性
2. 多様性
3. 調和
4. 強調
5. コントラスト
6. 反復(リズム・パターン)
7. 割合
ユニバーサルデザインの7原則 by ロナルド・メイス
1. 誰にでも公平に利用できること
2. 使う上で自由度が高いこと
3. 使い方が簡単ですぐわかること
4. 必要な情報がすぐに理解できること
5. うっかりミスや危険につながらないデザインであること
6. 無理な姿勢をとることなく,少ない力でも楽に使用できること
7. アクセスしやすいスペースと大きさを確保すること
参考:ユニバーサルデザインの7原則 | 株式会社ユーディット(情報のユニバーサルデザイン研究所)
シンプリシティの法則 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でした。
photo credit: ChaoticMind75 via photopin cc