*

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

Pocket

design-principle_catch

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

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

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

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

 

更新履歴

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

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

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

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

 

Contents

ユーザビリティ関連

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

1. 可視性

2. よい概念モデル

3. よい対応付け

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

参考: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つの黄金律

 

対話の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

参考:Android Designの活用ガイド

 

Microsoft デザイン原則

1. 作品へのこだわりを示す

2. 軽快かつ柔軟

3. 真のデジタル化を心がける

4. より少ない要素でより大きな効果を上げる

5. 全体で勝つ

出典:Windows 8.1 UX ガイドライン

 

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

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

 

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
他のアプリと差別化できるたった1つの機能を用意する

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
ユーザーが驚きワクワクする1つの機能を特定した後、実装に移る

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 | 安藤日記

 

サービスデザイン関連

サービスデザイン思考の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関連

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

* デザイン原則ではありませんが、次のリーン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)の6原則 ー ISO 9241-210

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

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

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

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

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

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

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

 

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

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

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

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

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

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

6. データには生命を

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

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

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

 

その他

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

1. 統一性

2. 多様性

3. 調和

4. 強調

5. コントラスト

6. 反復(リズム・パターン)

7. 割合

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

 

ユニバーサルデザインの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

  • このエントリーをはてなブックマークに追加
  • Hiroki Hosaka

    メーカー→ベンチャー勤務のUXデザイナー。このブログではデザインやUXに関するクリエイティブネタを発信しています。さらに詳しいプロフィールはこちら

Follow on twitter Follow on facebook Follow on feedly RSS Feed