デザインガイドラインとは?

「デザインガイドライン」とは、視覚効果、レイアウト、表現方法など……デザインに関する様々な要素のルールを定義しているものです。Apple、Googleでもデザインガイドラインを設けています。
  

Google Material Design Guidelines

マテリアルデザイン.png
画像引用元:https://material.io/jp/guidelines/

マテリアルデザインは、Googleのデザインガイドラインです。現実世界の法則を踏まえたデザインであるマテリアルデザインは、ユーザーがどのように操作すればいいか直感的に理解できるわかりやすさを目指しています。具体的には3D空間で表現しており、基本原理として「紙」と「インク」の要素があります。

従来、フラットデザインという手法がトレンドとなりましたが、立体感がなくどこを操作したらいいかわからなかったり、要素の区別がつきにくいという問題がありました。これに対してマテリアルデザインでは、現実世界に存在する光や影を追加することで、わかりやすさを表現しています。

影などをデザインに取り入れることはこれまでも一般的にありましたが、何も考えずに取り入れるのでは、意味のないものになってしまいがちです。マテリアルデザインのようにガイドラインに沿うことで、効果的に要素を取り入れ、利便性の高いデザインにすることができます。

また、マテリアルデザインではモーション(動作・動き)も重視しています。モーションには、ユーザーが行った操作がどのように影響するのかヒントを与える、といった機能があります。

参考:
マテリアルデザイン時代のブランド戦略を考える際の3つのポイント|ferret
  

Apple Human Interface Guidelines

アップル.png
画像引用元:https://developer.apple.com/ios/human-interface-guidelines/overview/design-principles/

洗練された美しい iOSUIデザインに関するルールをまとめたデザインガイドラインです。Apple Human Interface Guidelinesでは、デザインのテーマとして次の3つを掲げています。

Clarity.:
読みやすいテキスト、正確かつ明瞭なアイコン、適切な装飾で、機能を明確にすること

Deference.:
最も重要なコンテンツと競合しないよう、デザインは控えめにコンテンツを尊重すること

Depth.:
奥行き感が理解の促進と、楽しさを高める

また、インパクトとリーチを最大限に高めるアプリ設計のデザイン原則として、以下の6つのポイントがあります。

Aesthetic Integrity:ビジュアル面で整合性がとれていること

Consistency:一貫性がとれていること

Direct Manipulation:直接的な操作ができること

Feedback:フィードバックが効果的に返ってくること

Metaphors:メタファーをうまく利用すること

User Control:ユーザーコントロールが正しく行われること

このようにiOSのデザインは、ガイドラインに則って作られています。ガイドラインは、全体的なデザインのルールだけではなく、アプリを様々な壁紙でテストしてみること、システムボタンのタイトルは動詞を使用すること……など、かなり細かい部分まで設定してあります。

参考:
美しいアプリをデザインするには?iOSのアプリ制作に関するデザインガイドラインを徹底解説(前編)|ferret
美しいアプリをデザインするには?iOSのアプリ制作に関するデザインガイドラインを徹底解説(後編)|ferret
  

面白法人カヤック

カヤック.png
画像引用元:https://www.kayac.com/news/2016/07/renewal_guideline

面白法人カヤックでは、2016年にリニューアルしたコーポレートサイトのデザインガイドラインを公開しています。

従来のものを5倍デザインするという大規模なリニューアルを、デザインガイドラインを作成することによりスムーズにすることに成功しています。5つのデザインごとに要素をまとめたファイルを準備しており、URL先ではその一部を見ることが可能です。デザインに合わせて、パンくずや書体も5つ用意しています。