こんにちは。iOS Developer（当時）のusagimaruです。

先日WWDC 2017が閉幕しましたが、グッドパッチでもデベロッパーを中心にWWDC報告会が開催されるなど、とても注目度が高いイベントでした。個人的には、リフレッシュレートの120Hz化によって今後UIやコンテンツがどのように変わるのか、UIKitレベルで統合されたドラッグ＆ドロップによって体験がどのように変わるのか、HEVC/HEIFコーデックによってコンテンツはどこまで進化するのか、ARKitによってUIがどのように進化するのかが気になります。

WWDCで気になったデザイン系セッション

さて、6月後半でそろそろWWDCの熱狂が落ち着いてきた頃合いだと思いますが、平熱に戻った今だからこそ改めてWWDCを振り返ってみたいと思いました。デベロッパーとしては、これからがある意味でWWDC本番なのかもしれません。今回も気になるセッションやAPIはいろいろあるのですが、その中でもデザイン系のセッションはいつにも増して「Appleが考えるデザイン」というメッセージが込められていた印象があります。

802 Essential Design Principles は、「デザイン原則とはどのようなものか」をAppleのデザイナーが直接解説するという今まであまり見られなかった内容となっており、とても興味深いものでした。それまでは、『我々はガイドラインを用意したから、デザイナー諸君、あとは読み取ってくれ』という具合に割と放置されがちだったというか、Appleからの一方的なアクションが良くも悪くも目立っている印象でした。そういう意味では、今回のこのようなセッションはTim Cook体制になってからのAppleの大きな変化の一つのように感じられました。

このセッションはヒューマンインターフェイス・デザインにおけるデザイン原則を我々に示してくれていますが、この内容を確認する前にまず、Apple Human Interface Guidelines の歴史とそこで定義されてきたデザイン原則についておさらいしなければなりません。

Apple Human Interface Guidelines のはじまり

AppleはApple IIやLisa、初代Macintoshを作った際に、デスクトップ・インターフェイスとは何かを定める Apple Human Interface Guidelines (HIG) を出版しました。HIGでは、人間とコンピューターがどう対話すべきであるのか、あるいは、クリエイターはどのようにしてデスクトップ・インターフェイスを設計すれば良いのか、それらを設計思想と題してデザイン原則を定めています。

最初のHIGは “The Apple Human Interface Guidelines” で出版年は1978年とされていますが、今から40年も前のものなので私はこの版を目にしたことがありません。有名なのが1987年版の “Apple Human Interface Guidelines: The Apple Desktop Interface” で、私はこれの日本語版を手に入れることができました。英語版の表紙にはApple IIの表記が見られるので、どうやらGS/OSも対象に含まれているようです。


Apple Human Interface Guidelines: The Apple Desktop Interface（日本語版）

当初のHIGの内容は主にMacintosh（あるいはApple II, Lisa）のデスクトップ・インターフェイスに関するものでした。その後、Macintosh Human Interface Guidelines (1992), Aqua Human Interface Guidelines (2002), Apple Human Interface Guidelines (2005)…… と幾度かの改訂を経て、現在の macOS Human Interface Guidelines に至ります。iOS向けには、この過程でiPhoneが登場した際に独立した文書となっています。

iOS Human Interface Guidelines

iOS Human Interface Guidelines (iOS HIG)の冒頭に注目すると、そこでは 3つの主要テーマ と 6つのデザイン原則 が示されています。改めてこれらの意味を紐解いていきましょう。

iOS HIG (2013-) が示す3つのテーマ

iOSのデザインにおける主要なテーマが示されています。どのようなアプリケーションであってもこれらを意識することが求められます。

  • 明瞭 (Clarity)
  • 控えめ (Deference)
  • 奥行き (Depth)

明瞭 (Clarity)

コンテンツがはっきりと理解できるようにしましょう。

読みやすいテキスト、わかりやすいアイコン、控えめな装飾、意味のある動作、コンテンツ間の適切な余白 (Negative Space)、視認しやすい色やフォントを用いて、そのコンテンツや機能が何であるかを明確に表すようにしましょう。

控えめ (Deference)

ユーザーインターフェイスは控えめに。そして主役であるコンテンツを尊重しましょう。

ユーザーインターフェイスが目立ってはいけません。控えめなインターフェイスはコンテンツを際立たせ、ユーザーがコンテンツと対話する手助けをします。

奥行き (Depth)

奥行きを用いて情報の階層構造をユーザーに意識させましょう。

明瞭なビジュアルと現実的な動き（トランジション）により、ユーザーインターフェイスに階層構造が生まれ、画面上に奥行き感が生じます。奥行きはユーザーインターフェイス構造の理解を促します。タッチ可能かどうかの判断のしやすさ（発見可能性）は、コンテクストを見失うことなく機能やコンテンツへアクセスすることを可能にします。

透過、ぼかし効果、ドロップシャドウ、適切なイージングを効かせたトランジションは奥行き感を演出できるビジュアル表現ですが、過剰に用いてしまうと逆にコンテンツを阻害する原因にもなり得るので、これによりユーザーインターフェイスが主役とならないよう十分に注意を払いましょう。

iOS HIG (2017) が示す6つのデザイン原則

iOS HIGでは次のデザイン原則が定義されます。

  • 美的完成度 (Aesthetic Integrity)
  • 一貫性 (Consistency)
  • 直接操作 (Direct Manipulation)
  • フィードバック (Feedback)
  • 比喩の使用 (Metaphors)
  • ユーザーによる制御 (User Control)

美的完成度 (Aesthetic Integrity)

ユーザーインターフェイスはただ機能すれば良いのではなく、ユーザーが触れていて心地の良い、魅力的なものになるよう心がけましょう。かつてのユーザーインターフェイスにおいてはこのような観点が欠けていることが一般的でした。

不必要にアイコンを散りばめたり、逆にアイコンを全く用いないとか、あるいは全く一般に認知されていないシンボルを採用したりすることは避けなければなりません。当然、Retina Displayに適合した高解像度の画像を用いることや、アンチエイリアスを効かせた美しい文字を描画すること、要素の配置や大きさに一貫性があることは必須です。このような視覚的な美しさは、ユーザーが画面を長時間眺めていても苦にならないユーザーインターフェイスを実現するためには不可欠です。

一貫性 (Consistency)

一貫性のあるアプリケーションでは、システム標準のコンポーネントや一般的な言語表現、アイコンが用いられます。例えば共有アクションを収めたメニューを設計する場合には、macOSやiOSで広く用いられるシェアアイコンを積極的に採用するようにしましょう。


WWDCでは、Share + Arrow = Sharrow だと笑いを誘っていました。

直接操作 (Direct Manipulation)

ユーザーは画面上の要素に直接触れます。要素の並べ替えの場面では操作ボタンを押すよりも直接指でドラッグして移動できるようにすべきです。このようなドラッグ＆ドロップは最も典型的な調節操作の例でしょう。操作が即座に画面に反映されることで、ユーザーは画面上の要素を制御しているように感じられます。

フィードバック (Feedback)

ユーザーが操作した結果何が起きたのかを伝え返すことは重要です。視覚、聴覚、触覚などによりフィードバックを実現することができます。ボタンやセルをタッチしたらそれらが視覚的にハイライトされるので（一般には黒っぽくなる）、ユーザーはそれを押したように感じられます。コントロールセンターのように、隠れているパネルを引っ張り出した際のインタラクションとして触覚フィードバックをうまく活用すれば、パネルがその位置で止まれることをユーザーに示唆できます。

比喩の使用 (Metaphors)

アプリケーションで用いられるオブジェクトやアクションに対してユーザーが経験したことのある比喩（メタファー）を用いることで、学習の敷居を下げることができます。画面からはみ出た要素があると、そこはスワイプして移動できるスクロール（巻物）と認知することができます。ボタンやスイッチ、スライダーは現実にあるオブジェクトを模しているので、一目見てそれがどのように作用するかを理解することができます。

ユーザーによる制御 (User Control)

ユーザーからアプリケーションを制御する権利を奪ってはいけません。操作の意思決定はユーザーが判断します。モーダルビューに代表されるモードはユーザーから意思決定の幅や自由を奪うことになるので、必要最低限の使用に止めるのが望ましいと言えます。

ユーザーが自由に行動できること、動作の結果が予測可能であること、破壊的アクションがどれなのか確認できること、タスクを取り消し可能であることが望ましいと言えます。

Apple Human Interface Guidelines 今昔

各時代のHIGを比較してみると、前述したiOS HIGの6つのデザイン原則はApple HIG (1987)の「基本的な10原則」にすべて含まれていることがわかります。この事実からは、1987年に示されたデスクトップ・インターフェイス向けのデザイン原則というのは、現代のタッチデバイスにも通用する「普遍的なデザイン原則」であることが伺えます。

Apple HIG (1987) の「基本的な10原則」

  • 比喩の使用 (Metaphors)
  • 操作の直截性 (Direct Manipulation)
  • 見たものを指示する (See-and-Point)
  • 一貫性 (Consistency)
  • WYSIWYG：スクリーンで見たままをプリントする (WYSIWYG – What You See Is What You Get)
  • ユーザによるコントロール (User Control)
  • フィードバックとダイアログ (Feedback and Dialog)
  • 寛容性 (Forgiveness)
  • 安定性 (Perceived Stability)
  • 美的完成度 (Aesthetic Integrity)

※「Apple Human Interface Guidelines: The Apple Desktop Interface（日本語版）」の表記に合わせています。

次の表は、Apple HIG (1987), Apple HIG (2005), macOS HIG (2016), iOS HIG (2017)に掲載されているデザイン原則の有無を項目別にそれぞれ比較したものです。こうして眺めると、時代に即したデザイン原則の加筆や削除が行われている一方で、現代にも通用する普遍的なものは生き残っていることがわかります。

Apple HIG Apple HIG macOS HIG iOS HIG
出版年 1987 2005 2016 2017
比喩の使用
Metaphors		 ✓ ✓ ✓ ✓
直接操作
Direct Manipulation		 ✓ ✓ ✓ ✓
見たものを指示
See-and-Point		 ✓
一貫性
Consistency		 ✓ ✓ ✓ ✓
見たままをプリント
WYSIWYG		 ✓ ✓
ユーザーによる制御
User Control		 ✓ ✓ ✓ ✓
フィードバック
Feedback		 ✓ ✓ ✓ ✓
寛容性
Forgiveness		 ✓ ✓ ✓
安定性
Perceived Stability		 ✓ ✓
美的完成度
Aesthetic Integrity		 ✓ ✓ ✓ ✓
モードレス
Modelessness		 ✓
メンタルモデル
Mental Model		 ✓ ✓
明示的および暗黙的アクション
Explicit and Implied Actions		 ✓ ✓
ソフトウェアの複雑さを管理
Managing Complexity in Your Software		 ✓ ✓

WWDC 2017で新たに示されたデザイン原則

お気付きの方もおられるかもしれませんが、macOS HIG (2017) において “Design Principles” の章が削除されてしまいました。

macOS Human Interface Guidelines

そこにはただ “Themes” と書かれているのみで、何十年も受け継がれてきたデザイン原則をAppleは削除しました。これにはどのような意図があるのでしょうか？

WWDC 2017のセッション 802 Essential Design Principles を確認すると、かつてのHIGに書かれていたデザイン原則とは異なる新たなデザイン原則 “Design Principles” が示されています。グラフィックデザインの分野などで馴染みのある言葉が見られるのでそれほど違和感はないのですが、伝統的なHIGのデザイン原則から引き継がれなかったものもあります。Appleはなぜ伝統的なデザイン原則を削除し、新たにデザイン原則を定義し直したのか、その理由は今のところよくわかっていません。macOS, iOS, watchOS, tvOS, CarPlayとプラットフォームが増えたことから、デスクトップ・インターフェイス (macOS) を前提としたデザイン原則をより広く適用可能なものにリデザインしたということなのでしょうか？

Design Principles (2017)

  • 行き先の探しやすさ (Wayfinding)
  • フィードバック (Feedback)
  • 視認性 (Visibility)
  • 一貫性 (Consistency)
  • メンタルモデル (Mental Model)
  • 近接 (Proximity)
  • 分類 (Grouping)
  • マッピング (Mapping)
  • アフォーダンス (Affordance)
  • 段階的開示 (Progressive Disclosure)
  • 80:20の法則 (80/20 Rule)
  • 対称性 (Symmetry)

まとめ

https://developer.apple.com/design/

☞ Apple Human Interface Guidelines

AppleはLisaやMacintoshを作った際に、Apple Human Interface Guidelines (HIG) を出版し、この文書でデスクトップ・インターフェイスの定義を行いました。HIGではヒューマンインターフェイスのデザイン原則を定めており、これは現代にも受け継がれています。

☞ iOSの主要テーマとデザイン原則

iOS HIG (2017)によると、iOSアプリケーションでは3つの主要テーマと6つのデザイン原則に沿ってヒューマンインターフェイスをデザインするのが望ましいとされています。

iOSの主要テーマ

  • 明瞭 (Clarity)
  • 尊重 (Deference)
  • 奥行き (Depth)

iOSのデザイン原則

  • 美的完成度 (Aesthetic Integrity)
  • 一貫性 (Consistency)
  • 直接操作 (Direct Manipulation)
  • フィードバック (Feedback)
  • 比喩の使用 (Metaphors)
  • ユーザーによる制御 (User Control)

過去のHIGと比較するとこれらはiOSに限ったものではなく、ヒューマンインターフェイスのデザインにおける普遍的な理念であると言えます。

☞ macOS HIG (2017) から削除された伝統的なデザイン原則・新たに示されたデザイン原則

2017年、改訂版macOS HIGからは伝統的なデザイン原則が削除されました。その代わりかはまだわかりませんが、WWDCでは新たなデザイン原則が示されました。

伝統的なデザイン原則 (macOS HIG 2016)

  • メンタルモデル (Mental Model)
  • 比喩の使用 (Metaphors)
  • 明示的および暗黙的アクション (Explicit and Implied Actions)
  • 直接操作 (Direct Manipulation)
  • ユーザーによる制御 (User Control)
  • フィードバックとコミュニケーション (Feedback and Communication)
  • 一貫性 (Consistency)
  • 寛容性 (Forgiveness)
  • 美的完成度 (Aesthetic Integrity)

新たに示されたデザイン原則 (Design Principles 2017)

  • 行き先の探しやすさ (Wayfinding)
  • フィードバック (Feedback)
  • 視認性 (Visibility)
  • 一貫性 (Consistency)
  • メンタルモデル (Mental Model)
  • 近接 (Proximity)
  • 分類 (Grouping)
  • マッピング (Mapping)
  • アフォーダンス (Affordance)
  • 段階的開示 (Progressive Disclosure)
  • 80:20の法則 (80/20 Rule)
  • 対称性 (Symmetry)

むすび

過去のHIGと現代のHIGを比較してわかったことは、

「たった数十年で人間はそう変わらない」

ということです。

2017年版のiOS HIGには1987年版のHIGに書かれているデザイン原則が受け継がれています。デバイスや技術が進化したとしても、それらはあくまで人間が使う道具である、ということをよく心に留めておく必要があるのだと思います。

我々はアプリケーションを設計する際に、人間の認知や心理も含めてヒューマンインターフェイスをデザインしなければなりません。デザイン原則はそのことを我々に教えてくれるものです。

Share on

usagimaru
ソフトウェアデザイナー、UIアーキテクト、Appleデベロッパー。iPhone 3GSの登場を機にiOSデベロッパーとしての活動を開始。2016年に同肩書きでグッドパッチに入社。その後ソフトウェアデザイナーに転向し、UIデザインにおける情報設計の担い手としてさまざまなクライアントワークに従事。直近はDesignOpsの一員としてデザイン組織を支える傍ら、デザイナーの社内育成やソフトウェアデザインの知識普及、外部に向けてのセミナーやワークショップの提供など、その活動の幅を広げている。