こんにちは。デザイン部の橋本です。
企業やブランド、サービスのデザインを行う際「デザインルール」や「デザインレギュレーション」、「デザインシステム」といったデザインのガイドラインをつくることがあると思います。
弊社でも上記のようなデザインガイドラインを作成し、業務に役立てています。今回はそんなデザインガイドラインについて、他社事例を含めて、いろいろと調査してみました。
デザインガイドラインでよく整備されているもの
デザインガイドラインとは、色・文字・レイアウトなど様々なデザイン要素について、ルールを綿密に定義したドキュメントのことです。 ※今回は主に “Webページやアプリにおけるデザインガイドライン” について調査しています。
デザインガイドラインで整備するものはプロジェクトの規模で変わってきますが、割と整備されていることが多いものをまとめてみました。
- Brand - ブランド
- まずはサービスのブランドイメージを決定します。デザインガイドライン全体を通して、統一感を持たせて、共通のメッセージを発信するのに必要な土台となります。
言語化したり、写真を使用したりしてブランドイメージを伝えます。 - Typography - タイポグラフィ
- タイポグラフィーをスタイルガイドによってどのように最適化するかは、サイト全体のクオリティーを左右する重要なポイントです。
まず見出しの種類（ h1〜h6） についてや、本文テキスト、太字やイタリックなどについての設定を行います。続いて、リンクやリード文などに使えるような小さめのカスタムフォント、そして文字のフォントや太さ、色についての検討を行います。 - Color - 色
- 色はブランドイメージと強く関連づけて利用されることが多いので、カラーパレットの選定は、ブランドの追求結果にもとづいて、慎重に行われます。
カラーパレットを作成する際はプライマリーカラー（サービスを特徴づける色）は必ず設定しますが、セカンダリーカラーは設定していない場合もあります。ブランドの主色をより効果的に見せるために、白、灰色、黒などの中間色を加えます。 - Icon - アイコン
- アイコンは文字よりもはるかに高い伝達能力を発揮します。ユーザーはアイコンを見るだけで、今何が行われているのか、また次に何が起きるのかを瞬時に把握することができます。
アイコンを決定する際はブランドバリューとアイコンの適合性について考慮する必要があります。 - Form - フォーム
- フォームはユーザーとサイトを結ぶインタラクティブ性の高いパーツです。
ユーザーはフォームを介してデータ入力をし、サイト側はそれに対する操作を行います。起動時やホバー時の表示、また、パスワードが弱すぎることやIDが無効なことを伝えるためのエラーや警告、「支払い完了」などの成功……このようなフィードバック要素について、あらかじめ決定しておきます。 - Button - ボタン
- ボタンはカラーパレットやフォーム、トンマナを合わせて構成されるツールです。
ボタンデザインには統一感を持たせ、ユーザーに一貫したサイト体験を提供できるように工夫します。 - Margin - 余白
- 統一された正確な余白は、Webサイト全体にまとまりと洗練された印象を生み出すと言われています。
見出しやボタン、画像、フォームにおける余白など、あらゆる要素の余白について設定します。具体的には余白の設定ルール（5の倍数、8の倍数など）を決めて、適応していくパターンが多いです。 - UI Element - エレメント
- カードデザインや、テーブルデザイン、ページャーなどのUIコンポーネントを収録します。更新頻度が最も高く、収録数も多い要素です。
- Logo - ロゴデザイン
- ロゴデザインについては、詳細な運用ルールは別紙でまとめられており、デザインガイドラインでは一部のルール（カラー、余白スペース、最小サイズ）だけ触れられているケースが多い気がします。
- Photo - 写真
- ビジュアルのデザインは、サービスのイメージを左右する重要な要素です。Webサイトのキービジュアルやサムネイル、挿絵などで使用する画像など、主なビジュアル要素についてもガイドラインを設定します。
写真の選定は感覚的な側面も強いため、はっきりとしたルール作りは難しいのですが、OK例とNG例を示すことで目指すエリアを浮かび上がらせることができます。 - Illustrations - イラスト
- イラストも写真と同様にサービスのイメージを左右する重要な要素です。使用できるイラストの方向性をあらかじめ決めておくと、サービス全体に統一感を持たせることができます。
整備するものに特別な決まりはなく、なかにはデザインガイドラインを作っていないプロジェクトもあります。
デザインガイドラインのメリット／デメリット
デザインガイドラインのメリット
メリット1. デザイン品質の担保
制作対象の規模が大きくなると、デザインを複数人で行うことがあります。 こうした時にデザインガイドラインがあれば、個別に作業していても統一感のあるデザインで制作することが可能です。 新しいデザイナーが着任した時には、立ち上がりの拠り所になります。
メリット2. ユーザビリティの担保
デザインガイドラインによって統一感のあるわかりやすいUIが実現できていれば、ユーザーの学習コストが下がり、操作性も向上します。
メリット3. 制作コスト削減
デザインガイドラインによって制作のテンプレートができていれば、新規に制作するページであってもそれらを組み合わせたり引用したりすることで、制作コストを削減することができます。
また、デザイナーだけでなくプロダクトオーナーやディレクター、エンジニアなどデザイン関係者にもガイドラインを浸透させることができれば（ガイドライン制作時から多くの人を巻き込むのが理想的です…！）、共通言語ができることでコミュニケーションロスを最小化でき、デザインのミスも見つけてもらいやすくなります。
デザインガイドラインのデメリット
デメリット1. アップデートが必要
サービスというのは成長していくものなので、サービスが成長すれば、デザインガイドラインもアップデートしていく必要があります。デザインガイドラインの品質を保つためには、デザイナーがある程度手間をかけて運用していかなければなりません。
デメリット2. 表現の幅が狭まる
デザインガイドラインは統一性を高めることでブランディングにも繋がるものですが、細かく決め過ぎると、表現や制作の自由度を奪ってしまい、新しいことやその時々にふさわしい表現や提案ができなくなってしまうこともあります。また、視覚的に変化の乏しい画一的なデザインになってしまい、ユーザーの興味の持続が難しくなる可能性があります。
デザインガイドラインの事例
Material Design Guidelines（Google）
マテリアルデザインは、Googleが提唱するデザインシステム。リアルな世界の「物体（マテリアル）」が奥行と厚みを持つように、Web上に表現されたデザインでも奥行と厚みを見せることによって、より操作性の高いインターフェイスを実現しようとするものです。
Human Interface Guidelines（Apple）
https://developer.apple.com/design/human-interface-guidelines/
Apple社が設けたデザインガイドライン。iPhoneをはじめとする様々なApple社デバイスで動作するアプリに対するルールが規定されています。1978年の初版から更新され続けている歴史あるデザインガイドラインです。
Spectrum（Adobe）
Adobeのデザインシステム。制作ソフト寄りのアイコンが多くあり、見てみると面白いです。「International design」のページには、世界的にユーザーのいるAdobeだからこその配慮などが書かれています。
IBM Design Language（IBM）
https://www.ibm.com/design/language/
タイポグラフィからモーションUIまでとても細かく表記されているデザインガイドライン。ギャラリーのページは、ムードボードのようになっており、見ているだけでIBMの世界観が伝わってきて、デザイナーが迷った時に、立ち戻って冷静になれるページだと思います。
Orbit（Kiwi.com）
チェコを拠点とする航空予約サイトKiwi.comが開発したデザインシステム。UIコンポーネントの種類が豊富で、利用ルールも丁寧に定めているため、複雑な画面を設計する際のヒントになります。
さいごに
参考文献・資料
- デザインガイドラインとは？作成するメリットから企業のガイドライン一覧まで、徹底解説！ | NIJIBOX BLOG
- 「デザインガイドライン」はデザイナー・エンジニアの救世主なのです。｜TECH PLAY Magazine ［テックプレイマガジン］
- Webデザインのスタイルガイドの作り方 | UX MILK
最後までお読みいただきありがとうございました。 アスタミューぜでは引き続き、一緒に働いてくれるデザイナー・エンジニアを大募集中です！ 採用サイトもありますので、是非ご覧ください。
