iOSのデザインテーマとデザイン原則まとめ【ヒューマンインターフェイスガイドライン】

Date
2021.10.06
Category
Written By
Shohei Nishiyama
ヒューマンインターフェイスガイドライン

こんにちは、デザイナーの西山 将平(@24sy___)です。

ヒューマンインターフェイスガイドラインをUI設計の拠り所にして、UIデザインすることでユーザー体験がより良いものになります。

本記事は、英語で記載されている内容を意訳して、まとめたものになっております。最新情報は、原文(https://developer.apple.com/design/human-interface-guidelines/)から参照して頂けますと幸いです。

まだヒューマンインターフェイスガイドラインを読んだことがない方に、参考になると思います。

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

テーマ1:明瞭 (Clarity)

これは簡単に言うと、ユーザーにとって分かりやすいUIを意識してデザインしましょうってことだと思います。アイコンや色、フォントなど1つ1つの要素に意味を持たせて、親切なUIを目指してデザインしていきたいです。

テーマ2:控えめ (Deference)

こちらも英訳から日本語訳にしているのでわかりづらいですが、過度な装飾はせずコンテンツが主役であることを忘れず、ユーザー体験を最大限に活かすようなUIをデザインしましょうってことだと思います。

テーマ3:奥行き (Depth)

奥行きのあるデザインは、ユーザーに階層があることを意識させて、体験に深みが出ることを示してます。

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

iOS HIGでは次のデザイン原則が定義されているので、1つ1つ見ていきます。

デザイン原則1:美的完成度 (Aesthetic Integrity)

美的整合性は、アプリの外観と動作がその機能とどの程度うまく統合されているかを表します。

たとえば、ToDOリストのアプリは、控えめなグラフィックでシンプルな動作を使用することで、集中力を維持することができます。

一方、ゲームなどの没入型アプリは、発見を促しながら、楽しさと興奮を約束する魅力的な外観を提供できます。

つまり、UIは機能に合わせてユーザーが触れていて心地の良い、魅力的なものになるようデザインすると良いということです。

デザイン原則2: 一貫性 (Consistency)

一貫性のあるアプリは、システムが提供するインターフェイス要素のアイコン、テキストスタイルを使用されています。

設定には「歯車のアイコン」を使用していたり、ユーザーが使い慣れているアイコンを使用してデザインするのが望ましいです。

アイコンに関しては、普段スマホで使用しているアイコンを使えば間違いないですね。

デザイン原則3:直接操作 (Direct Manipulation)

画面上のコンテンツをユーザーが直接操作することで、人々を引き付け理解を促進します。

ユーザーは、デバイスを回転させたり、ジェスチャを使用して画面上のコンテンツに影響を与えたりすると、操作した内容がすぐに画面上に反映されることで画面上の要素を制御しているように感じられます。

デザイン原則4:フィードバック (Feedback)

ユーザーが操作したアクションに応じて、何が起きたのか「フィードバック」を伝え返すことは重要です。

例えば、ボタンをタップするとボタンの色やサイズなどが変わることで、ユーザーにボタンを押したことを伝えることができます。

このように、分かりやすいインタラクションで、ユーザーにアクションの結果を明確にすると良いですね。

ボタンなどのUI要素のインタラクションを統一すると、Webサイトやアプリでの操作性が高まるのでオススメです。

デザイン原則5:比喩の使用 (Metaphors)

この比喩はメタファー(現実世界に存在する物質や素材をUIデザインに施すこと)のことを指しています。

実際の本を読むときにページをめくるように、マンガアプリでも本や雑誌のページをめくっていく動作も、メタファーを使用することでユーザーがどのようにアクションすれば良いのか理解しやすくなっています。

デザイン原則6:ユーザーコントロール(User Control)

iOSでは、アプリではなく人が制御されます。そのため、ユーザーの行動が制限されるUIは極力避ける方が良いとされています。

ユーザーがアプリ内で破壊的なアクション(削除など)を確認したときには、すでに進行中であっても操作を簡単にキャンセルできるようにすることで、ユーザーがコントロールしているように感じることができます。

モーダルなどもユーザーのアクションを制御しがちなので、気をつけたいですね。

以上がiOSデザインテーマについてまとめてみました。UIはあくまでもコンテンツを引き立てる要素の1つなので、上記のデザインガイドラインを意識して制作するとユーザー体験がより良いものになるのかなと思います。

他にもガイドラインがあるので後日まとめて、デザインに関わっていそうな部分を中心に理解を深めていこうと考えています。

参考文献

最後まで読んで頂きありがとうございました。

また次の記事でお会いしましょう。

Share on

Contact

Get in Touch !

デジタル領域のサービスのプロダクトデザインを中心としたデザイン業務を、随時お受けしています。お仕事のご依頼・クリエイティブに関するご相談など、お気軽にお問い合わせ下さい。

通常3日以内にご返信いたします。