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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

デザイン品質の担保

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

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

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

ユーザビリティの担保

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

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

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

制作コスト削減

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

関連サービス

UI/UXリサーチ