デザインガイドラインって何?|仕事百科


みなさんは「デザインガイドライン」という言葉を知っていますか?デザインガイドラインとは、デザインを進める際に従うべき指針やルールを文書化したもののことで、多くのアプリはこのデザインガイドラインに沿って設計されています。今回は、最も代表的なApple社の「Human Interface Guidelines」・Google社の「Material Design」について紹介しながら、デザインガイドラインとは何か、一緒に考えていきましょう。

編集・執筆 / WATARU MURATA, YOSHIKO INOUE
イラスト / KUSUNOKI

目次
  1. デザインガイドラインとは
  2. デザインガイドラインを守るメリット
  3. 最低限抑えておきたいデザインガイドライン
  4. 筆者が作った実例
  5. 最後に


1. デザインガイドラインとは


デザインガイドラインは、その名のとおり、デザインを進める際の指針のことです。対象のプラットフォームにおけるデザイン原則やレイアウトや色、インタラクションなどに関するルールが規定されています。あるプラットフォームで動作するアプリは、一般的に対象のデザインガイドラインに則ってデザインを行うことが推奨されています。最も代表的なデザインガイドラインとして以下の2つが挙げられます。

● Human Interface Guidelines

Apple社が設けたデザインガイドライン。iPhoneをはじめとする様々なApple社デバイスで動作するアプリに対するルールが規定されています。1978年の初版から更新され続けている歴史あるデザインガイドラインです。(→原文はこちら

● Material Design

Google社が設けたデザインガイドライン。デザインの古典的な原則と技術と科学の革新性および可能性の統合、多様なプラットフォーム間でのユーザー体験の統合などの実現を目指したガイドラインで、AndroidアプリもこのMaterial Designに則った設計が推奨されています。(→原文はこちら



本稿ではあまり取り上げませんが、デザインガイドラインはサービス単位で設けられることもあります。その場合、サービス自体のブランドイメージなども反映され、より具体的なルールが規定されたガイドラインとなります。似たような言葉としては”トンマナ”や”スタイルガイド”などが挙げられます。


 

2. デザインガイドラインを守るメリット


デザインガイドラインは、あくまでガイドライン。絶対にガイドラインに従わなくてはいけないのかというと、そうではないのかもしれません。しかし、ガイドラインを守ることで得られるメリットもあります。そのメリットをいくつか紹介します。

1. 操作性を担保できる

デザインガイドラインに従って設計されたアプリは、プラットフォーム全体と一貫性を持たせることができます。一貫性を持たせることは、使い慣れたUIやそのプラットフォーム特有の操作感から大きく外れることを防ぎ、ユーザーの期待する操作性を実現することに繋がります。結果として、プラットフォーム上での最適なUI設計を実現できます。

2. 美しさを担保できる

デザインガイドラインは、操作性や視認性などももちろんですが、大前提として美しさへの配慮も為されています。デザイン未経験者でもデザインガイドラインに則って設計を行えば、美しいUIを最低限再現できるでしょう。

3. 大手企業の知見を得られる

Apple社やGoogle社などのような大手企業が設けているデザインガイドラインには、長年蓄え続けてきた様々な知見が詰め込まれています。一個人としての価値観に基づく設計ではなく、デザインガイドラインに基づく設計を行うことで、信頼性の高いUI設計のヒントを得ることができます。


「ガイドラインを守らなければ!」という意識ではなく、「ガイドラインを参考にして、より良いデザインにしよう」という意識で利用すると良いでしょう。


 

3. 最低限抑えておきたいデザインガイドライン


いざデザインガイドラインを読もうと思っても、全文英語かつ長文という点で挫折してしまう人もいるかと思います。そこで、この章では、Human Interface GuidelinesとMaterial Designにおいて最低限抑えておきたい項目をいくつか紹介していきます。原文には図解や動画もあるため、ご紹介した項目はぜひ見てみてください。(一部日本語翻訳されている項目もあります。)

Human Interface Guidelines

▼ Theme - iOSのデザイン原則
iOSにおけるデザイン原則が規定されています。まずは、デザインガイドラインが何を目指しているのかを再確認しましょう。(→原文はこちら

▼ Adaptivity & Layout - 複数デバイスに適したレイアウト
レイアウトに関して意識すべきポイントが記述されています。また、iOSには様々なデバイスや状態(縦・横)が存在するため、どのような環境でも適応可能な設計が必要になります。デバイスに関する知識を頭に入れておくと実践的な場面で役立つでしょう。(→原文はこちら

▼ Color - 色
色に関して意識すべきポイントが記述されています。色は、上手に使うことで視認性向上や誘目性向上など様々な効果が得られます。必要なシーンで適切な色を選択できるようになるヒントが得られると思います。(→原文はこちら

▼ Typography - タイポグラフィ
iOSでは、San Francisco (SF)というフォントが正式採用されています。サイズや太さなども用途ごとに決められています。(→原文はこちら


Material Design

▼ Introduction - Material Designのデザイン原則
Material Designにおけるデザイン原則が記述されています。まずは、デザインガイドラインが何を目指しているのかを再確認しましょう。(→原文はこちら

▼ Environment - 光や影を用いたオブジェクトの表現
Material Designでは、三次元空間を表現したUIが特徴的です。重なりや高さを表現するための光や影を意識した設計についてポイントを抑えておきましょう。(→原文はこちら

▼ Layout - レイアウト
要素の大きさや間隔の取り方、配置方法などレイアウトに関するルールが規定されています。UI設計全般に共通することも多いため、設計のヒントとして参考にするのも良いでしょう。(→原文はこちら

▼ Color - 色
Material Designでは、Material Designを設計するために必要な色の構成が決められています。その構成や色の使い方など、色に関する多くのことを習得できます。(→原文はこちら

▼ Typography - タイポグラフィ
Material Designでは、Robotoというフォントがよく用いられます。また、ここではその他のフォントを例に挙げながら、タイポグラフィの基礎を習得することができます。(→原文はこちら


 

4. Human Interface Guidelinesに沿ったデザイン
筆者が作った実例


ガイドラインに沿ったデザインは、実際のアプリで触れることができますが、ここで、筆者(村田)が実際に制作したグルメアプリのUIの一部を解説します。このアプリはiPhoneXで動作するiOSアプリを想定して制作したため、Human Interface Guidelinesに沿った設計を心掛けました。ガイドラインに沿った設計を行うことで、iOS全体との一貫性を保ったUIに仕上げることができます。



Human Interface Guidelinesに沿った設計を行うと言っても、アプリのブランドを意識した配色や見せ方を工夫することで、独自性も十分に表現できます。また、ステータスバー*1 などは、Apple社が公開しているiOSのデザインキットにある、iOS標準のものを使用しています。そういった実際の部品(コンポーネント)を用いることで、実装されるイメージが湧きやすいデザインを制作できます。

*1……電池やWi-Fiマークがある、画面上部のバーのこと


 

4. 最後に


デザインガイドラインは、UIデザインを学ぶ人の参考書としての役割が十分に果たせるくらい、為になる内容が詰め込まれています。一度に全てを把握することは難しいですが、要点だけでも抑えておくと今後の制作に活かせるはずです。ガイドラインという言葉に少し堅苦しいイメージを持ってしまうかもしれませんが、この記事で少しでも興味を持ってもらえたら嬉しいです。
今回紹介した以外にもさまざまな内容が記述されていますので、ぜひ一度チェックしてみてください!

(2019.4.12)

著者

アバター画像

村田亘

法政大学大学院情報科学研究科の修士1年生。エンジニアリングとデザインの二刀流。UIUXデザインを勉強中。

記事一覧へ

ポートフォリオでデザインチームとつながろう

ポートフォリオをつくる

作品を投稿してデザインチームとつながる日本最大のマッチングプラットフォーム。もちろん、ポートフォリオのみの活用も可能です。

作成する

デザイナーを採用する

国内最大のデザインプラットフォームで、チームにマッチするデザイナーに声をかけてみませんか?

採用する