見積依頼無料相談 資料
ダウンロード
セミナー
申込
見積依頼
無料相談
資料
ダウンロード
セミナー
申込
見積依頼・無料相談 資料ダウンロード セミナー申込

マーケティングリサーチコラム

マーケティングリサーチの電通マクロミルインサイト TOP マーケティングリサーチコラム デザインガイドラインとは?作成のメリットや注意点をわかりやすく解説

デザインガイドラインとは?作成のメリットや注意点をわかりやすく解説

デザインガイドラインとは?作成のメリットや注意点をわかりやすく解説

Webサイトやアプリ開発で重要なポイントの1つがデザインです。

デザインというと、多くの人は見た目のビジュアルをイメージすると思います。

しかし、プロダクト開発におけるデザインは「コンセプトデザイン」や「UI、UXデザイン」など様々なデザインがあり、デザインの担う範囲は意外と広いです。

また、多くのサイト制作、アプリ開発では、チームで作業をすることも多く、複数のデザイナーやエンジニアがそれぞれ好き勝手にデザインをしていると、完成品のデザインがバラバラでユーザーにとって使いづらいものが出来上がってしまいます。

そこで、デザインを進める際に従うべき指針が必要になります。

この指針のことをデザインガイドラインと呼びます

ガイドラインがあることで、複数の人がプロジェクトに関わっていても統一されたデザインの元でWebサイトやアプリが作られるため、全体の整合性を取ることができ、結果としてユーザビリティも向上します。

そこで、本日はデザインガイドラインについての解説と、作成のメリットや注意点をお伝えしつつ、代表的な企業のデザインガイドラインをご紹介したいと思います。

本記事のおすすめ対象者
  • Webサイトやアプリをこれから制作するプロダクトマネージャー
  • エンジニア、プロデューサー、リサーチャーなどデザイナーと一緒に仕事をする方
  • デザインをこれから学ぶ初学者の方

UIUXリサーチの資料ご紹介

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

デザインガイドラインとは、Webサイトやアプリ開発において、文字・色・ボタン・画像など様々な要素について、ルールを詳細に定義したものです。

デザインガイドラインで定義する範囲は、情報の動線に関するルールや文章のトーン、システム設計など広範囲に渡るものから、ビジュアルに関するものだけを定義するなど様々です。

この後紹介する他の企業のガイドラインを参考に、自社でどこまでの範囲を定義するかを決めていただければ何よりです。

デザインガイドラインの種類と例

デザインガイドラインでよく整備されているものは、以下のようなものになります。

・配色
配色は、ベースカラー、メインカラー、アクセントカラーの3つを決めます。

各々の比率をベースカラー70%、メインカラー25%、アクセントカラー5%にすると、美しい配色に仕上げることができると言われます。

それぞれの色の役割は以下のとおりです。

ベースカラー
最も大きな面積を占める基本色として、余白や背景などに用い、メインとアクセントのカラーを引き立てます。
メインカラー
サイトの印象を決定づける主役の色で、ブランドやターゲットイメージに合わせた色を使います。
アクセントカラー
全体の5%と少ない使用量ながら一番目立つ色で、全体を引き締め、ユーザーの目を引く役割があり、フォームの問い合わせボタンなどに使います。
複数の色を使っても良いですが、色が増えるほど扱うことが難しくなります。

配色を決めるにはカラーパレットツールを使うと便利です。

カラーパレットは、ディスプレイに表示させる色の組み合わせを定義した情報を指します。

COOLORS
スペースキーを押すと、ランダムに生成されたカラーパレットが表示されます。

新しい配色のアイディアを探すときに便利なサイトです。

参考|https://coolors.co/

Stylify Me
URLを入力すると、そのサイトで使用されているカラーパレットが表示されます。

デザインが良いと思ったサイトが、どのような配色を使用しているかを確認することのできるお役立ちサイトです。

 

・タイポグラフィ
タイポグラフィとは、文字を読みやすく整える技術という意味の言葉です。

文字の大きさやフォント、行間など、最適なものを選び配置することで読み手に内容を受け入れやすくする目的があります。

タイポグラフィには、文字の大きさ、色、フォントに加えて見出しの種類や強調の仕方などのルールも含まれます。

Webサイトの場合は、リンクの表現や一行あたりの文字数、ユーザーにとってのわかりやすさ、読みやすさなどを考慮したルールも決定します。

 

・テンプレートのパターン
Webサイトやアプリの各ページの見た目がばらばらでは統一感がなく、ユーザーに不要なストレスを与えてしまいます。

ページの見た目や構成は、Webサイトやアプリ全体でまとまりがあること重要です。

ヘッダーやフッダーなど各エリアに表記する情報や役割を定義し揃えることで統一感を持たせることが可能です。

 

・UIに関するパーツ
ボタンやアイコン、見出し、入力フォームなどに関するルールを決定します。

特にアプリの場合は、アイコンは文字よりも伝わりやすく、今何が行われていて次に何が起こるのかを直感的に理解することができます。

ボタンやフォームも統一したルールを決めることで、ユーザーが使いやすいサービスを作ることが可能です。

 

・余白
統一された正確な余白は、Webサイト全体にまとまりと洗練された印象を生み出すと言われています。

見出しやボタン、画像、フォームにおける余白など、あらゆる要素の余白について設定します。

具体的には余白の設定ルール(5の倍数、8の倍数など)を決めて、適応していくパターンが多いです。

 

・写真やイラストなどの挿入画像
ビジュアルのデザインは、サービスのイメージを左右する重要な要素です。

Webサイトのキービジュアルやサムネイル、挿絵などで使用する画像など、主なビジュアル要素についてもガイドラインを設定します。

写真やイラストの選定は感覚的な側面も強いため、はっきりとしたルール作りは難しいのですが、OK例とNG例を示すことで目指すエリアを浮かび上がらせることができます。

参考にすべきデザインの原則

デザインガイドラインを制作する際、GoogleのMaterial Design GuidelinesやAppleのHuman Interface Guidelinesなど有名な企業のガイドラインを参考にされる方は多いと思います。

さらに考え方やコンセプトなどの導入部分には、有名なデザイン原則を参考にすることをおすすめします。

そこで、一般的に知られるデザイン原則の代表的例をご紹介します。

①ヤコブ・ニールセンの10のユーザビリティヒューリスティック
1. システム状態の視認性を高める
2. 実環境に合ったシステムを構築する
3. ユーザーにコントロールの主導権と自由度を与える
4. 一貫性と標準化を保持する
5. エラーの発生を事前に防止する
6. 記憶しなくても、見ればわかるようなデザインを行う
7. 柔軟性と効率性を持たせる
8. 最小限で美しいデザインを施す
9. ユーザーによるエラー認識、診断、回復をサポートする
10. ヘルプとマニュアルを用意する

以前ヒューリスティック分析の記事でも紹介しましたが、ユーザビリティ研究の第一人者であるヤコブ・ニールセンが提唱した UI デザインのために注意すべき点を10の原則としてまとめたものです。

②シュナイダーマンの「インターフェイスデザインの8つの黄金律」
1. 一貫性を保つ
2. ヘビーユーザーがショートカットを使用できるようにする
3. 有益なフィードバックを提供する
4. 完了を伝えるダイアログを設計する
5. 単純なエラー処理を提供する
6. アクションのやり直しを許可する
7. 内部要因思考をサポートする
8. 短期記憶の負荷を減らす

Apple、Google、Microsoftなどの大企業も、シュナイダーマンのルールに沿った製品づくりを行っており、ストレスが少なく美しいUIを実現させています。

詳細については今回の記事では割愛しますが、Webの記事や書籍でも多く紹介されていますので、気になる方はぜひ調べてみてください。

デザインガイドラインのメリット

デザインガイドラインの具体的な項目や、導入に至る考え方を紹介してきましたが、本章では、更にデザインガイドラインを導入するメリットを解説します。

デザイン品質の担保

1つ目は、複数人で作業を行う際に品質の担保がしやすくなるということです。

とくに規模が大きくなっていくと一部をデザイン会社に外注する、スキルにばらつきのあるメンバーでチームを構成することもあると思います。

こうしたときにガイドラインがあれば、細かいコミュニケーションができないような状況やスキルに差があるメンバーでも統一されたデザインで制作をすることができます。

ユーザビリティの担保

デザインガイドラインに従って設計されたWebサイトやアプリは、サービス全体に一貫性を持たせることができます

一貫性があると、使い慣れたUIやサービス独特の操作感から大きく外れることを防ぎ、機能や画面が変わってもユーザーの期待する操作性を実現できます。

結果として、サービス全体のユーザビリティを担保することができます。

制作コスト削減

デザインガイドラインが明確になっていると、ガイドラインに沿ったテンプレートを作ることが可能です

新規開発が必要な機能や画面が発生しても、テンプレートをもとに制作することでコストを削減することができます。

また、デザイン品質が担保され、ユーザビリティが一定の品質で保たれることで、開発の余計な手戻りが減り、コストと時間を節約することが可能です。

代表的な企業のデザインガイドライン

ここでは、代表的な企業のデザインガイドラインをご紹介します。

Human Interface Guidelines
Apple社のガイドラインです。

日本はiOSのシェアが高いので、アプリ制作のときは必見のガイドラインです。

Material Design
Google社のガイドラインです。

マテリアルデザインは、2014年にGoogleが発表したデザインのガイドラインです。

日本語に訳すると「物質的なデザイン」ですが、その意味の通り、画面に表示される世界に現実世界の物理的法則を取り入れるという考え方です。

これによりユーザーが画面をどのように操作すればいいか直感的に理解することができ、ストレスの少ないユーザビリティを実現できます。

Spectrum
Adobe社のデザインガイドラインです。

デザインシステムの基礎などをまとめた「Principles」、UIキットやアイコン、フォントなどを使用できる形にしている「Resources」、 そのUIを実装する際に使える、オープンソースのCSSが提供されている「Implementations」の3つのパートに分かれています。

デザインガイドラインの注意点

作成できるととても便利なデザインガイドラインですが、実際に設計する際には注意点もあります。

1つ目は、細かく決め過ぎると表現の自由度がなくなることです。

Webサイトやアプリには、途中で追加する機能もあります。

追加機能がガイドラインに当てはまらないようなものになったときにふさわしい表現ができなくならないよう、ある程度柔軟性を持たせることが必要です。

2つ目は、変化の乏しい画一的なデザインだけにならないようにすることです。

画一的勝るデザインはユーザーから見たときに飽きやすくなってしまい、利用の継続に影響が出ることがあります。

最後に、ニーズや時代の変化とともにアップデートが必要です。

デザインは時間とともに新しい考えやその時々の流行がありますので、定期的に見直すようにしましょう。

デザイン評価なら、電通マクロミルインサイトにご相談ください

電通マクロミルインサイトでは、ユーザビリティに関する様々なリサーチを行っております。

サイト制作やアプリ開発におけるUIデザインの評価に加えて、ユーザーテストなどによるユーザビリティの評価も可能です。

電通マクロミルインサイトのUXリサーチのサービス資料は、こちらからご覧ください。

UIUXリサーチの資料ご紹介

また、デザインガイドラインに限らずUXリサーチに関するお困りごとがあれば、お気軽にご相談ください。

UXの専門家が貴社のお悩みについて、無料でご回答させていただきます。

関連サービス

UI/UXリサーチ

マーケティングのお悩み、リサーチのプロにご相談ください

執筆者|伊賀正志 株式会社電通マクロミルインサイト スペシャリスト
外資系コンサルティング会社から株式会社マクロミルを経て現職。
数々の部門横断型プロジェクトを経験したのち、電通マクロミルインサイトにおいてUI/UXリサーチの新サービスを立ち上げ。
責任者として、様々な企業のUI/UX改善プロジェクトに参画。

監修|芦沢広直 株式会社電通マクロミルインサイト シニアリサーチスペシャリスト
旧:電通リサーチ(現:電通マクロミルインサイト)に入社後、マーケティングリサーチャーとしてメーカー・サービス会社・官公庁・媒体社のマーケティング戦略に関わる調査に従事。㈱マクロミルネットリサーチ総合研究所研究員を経て現職。消費者意識の変化、ニーズの発掘とブランド価値の設定、コミュニケーション戦略の検証プロジェクト実績多数。

CONTACT マーケティングリサーチに関する
ご相談・資料請求はこちら