独学でUIデザインはじめた方へ。デザインガイドラインについて語ろう！
こんにちわ！はじめまして、ゆいです。
都内でデザイナーとして働きつつ、兼業で画家になりたいです。設計したりWEBデザインしたり、社内ではグラレコ風のなにかを描いたりしています。休日は絵を描いています。
日々の思考・メモなどはツイッターにあるので良かったら見てください
休日描いた絵はこちらに載せています↓こちらもよかったら。
ガイドラインについて、話したい。
今回はナレッジの整理と共有です。2018年頃に社内展開用に作成したスライドをもとに文章化してみたいと思います。ここで話したいと思っているガイドラインとは、Appleが展開しているHuman Interface GuidelinesとGoogleが2014年に発表したデザインのフレームワークMaterial Designを指しています。当時在籍していたUIチームの知識を揃えたいと思い、自分なりに掘り下げて整理していました。
おそらくアプリに関わるUIデザイナーの方で上記２つのガイドラインを読んでいない方はいらっしゃらないと思いますが、改めてガイドラインの必要性とその設計思想の掘り下げを共有したいと思います。
1.デザインガイドラインの必要性
そもそも、Human Interface GuidelinesとMaterial Designを、なぜ読む必要があるのでしょうか？その点から考えたいと思います。
まずは下の画像をご覧ください。間違い探しです。
制限時間は15秒！
エレカシかっこいいですね。さて間違いはみつかりましたか？
実際のAndroidの画面を一番左に貼ってみました。答えは
「AndroidなのにiOSと同じデザインになっていること」です。トンチのようなクイズだと思いますか？いいえ、本当に大事なことなんです。なぜ、AndroidなのにiOSと同じデザインは「間違い」なのでしょうか？私がそう言い切った理由をご説明します。
なぜ間違いなのか？
私は自分の姿勢として「アプリを媒体として自分たちが伝えたい価値を届けるためにデザインをしている」と考えているからです。デザインは操作に紐付いています。各OSの出しているガイドラインを無視することで、操作が困難になり正しく価値をユーザーに届けることができません。プラットホームと１枚目のAndoridのMusicアプリのデザインでは、OSの操作ルールに従っていません。だから間違いだと言い切りました。
現在、日本でリリースしているほとんどのアプリはiOSとAndroidOSでアプリを使っていますよね。それぞれのOS操作にはルールがあります。それらを無視すると以下のことが失われます。
①操作感の一貫性
操作が他のアプリの使い方と違うと、人は混乱して次第に使わなくなってしまいます。例えばWindowsのトラックパッドと、iOSのトラックパッドではスクロールの方向が逆ですよね。それがアプリごとに起こっていたらどうでしょうか？「このアプリは、下から上になぞると…どっちだっけ？？」と使うたびにわからくなるはずです。アプリ間の使い分けはシームレスである必要があり、常にユーザーがコントロールしていることを意識しましょう。
他のアプリと操作感の一貫性がない
→余計なストレスが発生する
→思い通りに操作できずイライラする
②ユーザビリティーの担保
ガイドラインには、一定のクオリティを保ちユーザーは安心して使える用になっています。例えば、Human Interface Guidelinesでは視認性（色のコントラスト）に関する言及をしています。このようなアクセシビリティに関する項目は、見た目がかっこ良いデザインからもう一歩「見た目もかっこいいし使う人にも優しいデザイン」へ進む手助けをしてくれます。
またガイドラインを読まずに開発を進めてしまうと最悪の場合リリースできなくなることもあります。とくにAppleでは、審査が厳しくリジェクトされる事も多いです。私は審査が入る点に一定の質を担保したものをリリースします、というAppleの姿勢を感じます。一貫した体験を担保するAppleの姿勢を尊敬しています。
③開発しづらい
コンポーネントの名前などを覚えておくことで、開発関係者の共通言語になり、リリースまでスムーズにコミュニケーションを取りやすくなります。また、実装時に使用するコンポーネントは各OS用に作られているので、無理な改変を加えることなく利用できます。
上記３点のまとめ
サービスの価値が正しく伝わらない！ということは避けたいですよね。UIデザイナーはそれぞれのOS上で、自分たちが伝えたい価値をアプリを媒体としてストレスなく使ってもらうために、各OSの設計に紐付いたデザインのガイドラインを理解していることが必要です。
2.「5階層モデル」で見るガイドラインの影響範囲
実際の開発工程の中で、どの辺りからデザイナーはガイドラインを考慮し始めるのか？ 私が思うガイドラインの影響範囲を、UIUXを考える上で重要な「5階層モデル」で見てみたいと思います。
5階層モデルとは
・ユーザーの体験に影響がある要素を 5 つの段階に分類
・下の要素が次の段階を具体化するための『土台』になっています
Jesse James Garrett(ジェシー・ジェームス・ギャレット) 氏の著書『ウェブ戦略としての「ユーザーエクスペリエンス」』より
参考：UX を構成する 5 つの段階を振り返る
下から上に向かって開発工程が進むみます。上下順番を入れ替えたものが↓です。
戦略（Strategy）: サイトやアプリの目的は何か、そして利用者はそれを使うことで何を得ることができるのかを設計
要件（Scope）: 利用者の目的を満たすために必要な機能やコンテンツを設計
構造（Structure）: 様々な操作を経て目的の情報や機能へ辿り着くようにするための全体構造の設計
骨格（Skelton）: 利用者が理解しやすいように画面に表示される情報の優先順位や配置の設計
表層（Surface）: 情報を示したり、操作できるものを表す視覚的なデザイン
私は要件（利用者の目的を満たすために必要な機能やコンテンツを設計）の部分から関わってくると思っています。なぜなら、前述したとおりガイドラインは使われ方に深く関わっているからです。
影響がある範囲がわかったところで、各ガイドラインで重要な特徴や文脈背景を共有いたします。
3.Human Interface Guidelinesについて
AppleのHuman Interface Guidelinesの根幹となる本は1987年に出版された「Human Interface Guidelines:The Apple Desktop Interface」です。出版以後、新しいプラットフォームに合わせて改正され続けています。（残念ながら書籍版を読んだことがありません。読んでみたいです。）
Human Interface Guidelinesの主要テーマは以下の３点です。
Clarity(明瞭)
システム全体を通して、テキストやアイコンは読みやすくわかりやすく、控えめな装飾で、機能に紐付いたデザインにする。
Deference(尊重)
コンテンツと人との対話を阻害しないように、グラデーションやドロップシャドウなどの使用は最小限に控える。コンテンツが最も重要です。
Depth (奥行き)
明確なビジュアルレイヤーと現実的なモーションは、階層を伝え、活力を与え、理解を促進します。
出典元：iOS Design Themes を意訳しました。
奥行きについて、私は最初イメージがわきませんでした。Material Designと比較することでイメージしやすいので後述します。
Human Interface Guidelines：抑えておきたいポイント
左の画面は見覚えありますか？今の新卒の方は知らないかもしれません。2008年ごろのiPhone 3Gの画面 です。iOSでは2008年から、スキュモーフィズム(スキューアモーフィズム/Skeuomorphism)デザインを採用していました。
スキュモーフィズムとは…
・2000年代から2010年代初期に主流となっていたトレンド
・現実世界のテクスチャや形状などをグラフィックで表現している
現実世界とリンクした視覚的表現で、機能との関連性をわかりやすく示しています。これはタッチインタフェースに慣れてないユーザのために、利用方法のヒントを与える役割がありました。普段から使い慣れている外見に近いことで、利用時に安心感を与えることが狙いでした。
スキュモーフィズムからフラットデザインへの変化
スキュモーフィズムはiOS6まで使用され、2013年までiOS7からはフラットデザインへ転換しました。スマートフォンの普及によりタッチインタフェースに慣れたユーザーは、現実要素のメタファーがなくても十分に操作ができるようになっていました。
そしてフラットデザインに変化したことにより、iPhone全体のデザイン的な統一ができるようになりました。というのも、スキュモーフィズムは要素の印象が強すぎて他の要素とデザイン的な統一感を出すのが難しかったのです。凝ったグラフィックではなくなったので、実装コストも結構低くなりました👏
Dribbbleなどで見るとめっちゃかっこいいのですが、スキュモーフィズムは模写をしてみると作り込みに時間が掛かりすぎることが分かります。そして学習が進んだユーザーにとってグラフィックに凝りすぎることは、ユーザビリティーに直結しなくなってきた背景もあり、情報量が多いスキュモーフィズムは、コンテンツに集中しずらいことも大きな問題でした。
フラットデザインは形が単純です。基本型に近くなったことで、ユーザーは情報を素早く処理できるようになりました。それは先程挙げた”Deference”（尊重）「コンテンツが最も大事」
にも沿っています。つまり、情報処理に脳の容量を取られるスキューモーフィズムのような過渡な装飾は現在のガイドラインの内容に反しているともいえますね。
加えて、フラットデザインの特徴はディーター・ラムスの挙げている「良いデザインの10原則」にも共通しています。
「Less, but better」——より少なく、しかもよりよく。
それは、本質的な部分に集中するということ。それによって製品は、不要で過剰なデザインから開放される。純粋で簡素、そこに立ち返ることだ。
iPhoneをデザインしたジョナサン・アイブはディーター・ラムスに強い影響を受けていると言われています。この辺りはバウハウスを始めとした近代モダンデザインの流れをなぞってみると、よりしっくり来ると思います。多分。
奥行きについての補足
大きな編成がわかったところで、奥行きについて補足します。
HIGのメタファーは、奥行きのある空間と厚さゼロのレイヤーで構成されているイメージで、MDが紙のメタファーならHIGではVRに近いイメージです。奥に向かって拡がっているように見せることで、実際よりも広くゆったりと感じさせています。現実世界と仮想の広い空間とをメタファーでつなぎ、UIに落とし込んでいます。3Dtouchや視差効果がわかりやすいと思います。
以上がHuman Interface Guidelinesについて、私が意識していることになります。この次はMaterial Designの話をするので、各自少し休憩してくださいね。
4.Material Design
Googleが2014年に発表したデザインのフレームワークです。もともとはGoogleが提供するサービスのUIに整合性を持ち、ユーザーを混乱させないように社内用に作られたそうです。
- メタファー表現：紙とインクのメディアを再イメージ
→現実の物理法則を取り込むことで、「どのように操作すればいいのか？」を直感的にわかるようにしています。
- 意図的：情報の中身を印刷物のデザイン構造に倣うことで、ヒエラルキー、意味、強調などがわかりやすくなっています。
- モーション：控えめで明確なアニメーションを取り入れ持続性をわかりやすくします
当初このフレームワークが発表された際は結構かっちり規則が決まっていて、遵守しデザインを起こそうとするとブランディングの確立が難しいという問題が起こりました。(…そのためのガイドラインだとは思うのですが、アプリ担当者の思想は様々ですね。)
2018年ごろ、アプリ独自のカスタマイズ性を高めるために、Material Themingが公開されました。Material Themingについていも少し説明いたします。立て付けとして、Material Themingは「あくまでも基礎(Foundation)」でした。
ポイントは以下の点です。
- ブランド表現を可能にするように設計されています
- クロスプラットフォーム…マテリアルデザインは、Android、iOS、およびWebの共有コンポーネントを使用して、プラットフォーム間で同じUIを維持
これまでよりも、独自のブランディングがしやすいようにコンポーネントの種類が増えました。クロスプラットフォームというのは、パソコン・SP・タブレットだけでなくiOS、windowsなどOSをまたいだ体験に対しても配慮していこうという意味でした。iOSまでも担保しようというのは素晴らしい試みだなとおもいます。
余談ですが、AndroidチームとMaterial Designチームは別のチームだったそうです。なのでAndroid自体の操作感、デザインとMaterial Designを遵守したアプリでは一貫性はなかったそうです。薄々そうじゃないかなとは思っていましたが、はっきりGoogleの中の人が明言されていた事に驚きました。
また、もともとMaterial DesignはGoogleのiOS向け（共通）デザインとして開発されたフレームワークだったそうです。社内向けでさえこのクオリティー、さすがGoogleです。
Material Designの優位性
Material Designを取り入れることでどんなメリットが有るのか、少し触れておきたいと思います。
アイコン、色、位置関関係などがアプリをまたいで統一されていれば、ユーザーはアプリケーションの機能を予想することができる。
これはAndroid全体におけるユーザー体験の向上を意味する。
デザイナーはMaterial Designを取り入れることで、プロジェクト・案件ごとに新たに独自のデザインガイドラインを作成しなおす必要がなくなります。
ヴィジュアル設計に費やす時間が大幅に削減できるので、サービス設計、コンセプト設計、導線設計といった低層工程にリソースを集中できるようになります！この辺については、「UI GRAPHICS 成功事例と思想から学ぶ、これからのインターフェイスデザインとUX 」の66マテリアルデザインとその可能性で詳しく触れられていますのでぜひご一読ください。
ガイドラインでは従来はセンスや「そういうもの」とされていた様々なデザインロジックが・エングニアリングレペルまで分解され言語化されている、「こうあるべきである」というコンセプト「なぜこうなのか」というロジック、 そして「実際にどう実装するのか」というコードと数値的なパラメータ．この3つが高いレベルで融合している
UI GRAPHICS 成功事例と思想から学ぶ、これからのインターフェイスデザインとUXより引用
またMaterial Themingの設計思想について詳しく知りたい方はこの記事をどうぞ〜！
双方設計時の特徴的な違い
様々な特徴的な違いは他にも多くありますが、IAから根本的に関わってくるのは、ナビゲーションだと私は考えています。
iOSでは、戻るボタンはアプリ内で配置されていおり、これはアプリ内で制御すべき動作と捉えられています。
Androidでは、戻るボタンはデバイスの全体に関わる操作として下部に配置されていて、つまりハードに依存する動作になっています。アプリ設計を行うときはこの違いに注意し、導線設計を行う必要があります。
なおこのあたりはスマホ以前の携帯電話端末からの進化などが絡んでくるのでもう少し学習し理解する必要があります。この辺りは私はまだまだ勉強不足です。
また、Humain interface GuidelineのDepth (奥行き)、Material DesignのElevation(標高) は対になる定義だと個人的には思っています。ARのようにレイヤーをかさねていくHumain interface Guidelineに対し、紙の物理原則をベーズにしているMaterial Design。現実世界のメタファーを行っている点ではどちらも同じなのですが、アプローチは決定的に違いますね。
最後に
最後になりましたが冒頭のクイズに対する考察を行います。考察ですので正解ではありません。
Material Designでもボトムナビゲーションバーは使用可になっていますがAndroid版ではボトムナビゲーションではなくハンバーガーメニューになっていますね。これはAndroidの場合、ユーザのアカウント情報がデバイス・アプリ間で結びついていないためだと思いました。その影響でメニューの数がiOS版より増え、ナビゲーション・ドロワー（ハンバーガーのやつ）に変更されているんじゃないかと想像しました。
再生中をタップするとセミモーダルビュー(Backdrop)が呼び出されます。これは上記に挙げた@usagimaruさんの記事を参考になさってください。
「聞きたい音楽がすべてここに。」のグラデーションがついた部分も、Material designでは、機能に紐付いておらずZ軸が不明になるので使用せずに独立したバナーのようなパーツになっている気がします。更にいうと、透明にはできるけど色つけるなら影は必要なのではないでしょうか。
と、このような考察を行いました。
まとめ
共通で大事にしていること
・直感性、視認性、認知に負荷をかけない…など
UIDの基礎的なこともたくさん乗っているので、双方のガイドラインを守ってUIを作ると一定のクオリティーは担保されます！
注意が必要だなと思うのは、Humain interface GuidelineとMaterial Designの比較で非公式アプリを比較検討している記事を見かけたことがありますが、双方の設計思想をどこまで踏襲したものかは担当者に聞かないとわからない(独自の設計思想があるかもしれない)点です。比較し考察するなら公式アプリをおすすめします。
蛇足かもしれませんが、鑑賞者・使用者の立場ではなく、作る側の立場では技術と知識が必要になります。これは、ユーザーを限定できない以上、受け取り手の知識の差をコントロールできないため、様々なリテラシーの人に対応する必要があるからです。
この辺りは以下の記事もわかりやすいです！↓
献血ポスターがなぜ問題なのかはいろんな人が丁寧に解説しているので、「乳袋などのエロ記号を用いて描かれたイラストを『この絵はエロくない』と言いはることの愚」について図解しました。１人のオタクとして、いい加減看過できなくてな（フェミ認定はされるけどなぜかオタ認定はされない自認オタ） pic.twitter.com/V2srylgbBK
— かえる（ふくろ） (@orz404) October 27, 2019
2021/03/29追記：この部分について、記事を書きました！よかったらぜひ▼
デジタルデザイナーにとっての物質感(触れられる実態)は、端末になりますね。ユーザーとの「対話」の印象を決定しているのは端末の操作感に依存します。なのでアプリ・ウェブのデザイナーはMateral DesignとHuman Interface designは読んだほうが良いんじゃないかなと思います。説教臭いまとめとなりましたが、読んでくださりありがとうございました。
参考リンク
予想以上に長くなりました。文章化アウトプットにまだまだ慣れない拙い文章を読んで頂きありがとうございます。内容に関してご意見ご感想、ご指導ご鞭撻大歓迎です。お気軽にツッコミをお待ちしております。
ツッコミはコメントかこちらから：
ではまた〜〜！
サポートしてくれたら嬉しいです。書いてる間のコーヒー代にしたいです。