こんにちは　デジタルハリウッド動画教材開発の人です。
冬は大好きな季節です。雲一つない快晴の朝に広がる青々とした空、透明度の高いキリっと冷えた空気が朝の寝ぼけた頭をリフレッシュしてくれますね。

さて、今回はデザインにまつわるお話。デザインを考えるときに、どんな感じでまとめたらよいかわからない～＞＜という皆様！いろいろな企業・団体がデザインガイドライン・デザインシステムというものを作っているのをご存じでしょうか？

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

デザインガイドラインとは、製品、サービス、プロジェクト、またはブランドのデザインに関するルールや基準を定めたもの　です、

デザインガイドラインを作ることで、一貫性を保ち、ブランドの認識を高めることができます。また、制作にあたってもチーム内やクライアントとの間でのコミュニケーションを促進し、デザインのクオリティを維持するためにも役立ちますね。

■デザインガイドラインを構成する要素

デザインガイドラインは、視覚的要素だけでなく、その企業・団体のデザインの原則や哲学、ブランドアイデンティティに関する指針も含まれることが多いようです。

1.ブランドアイデンティティ
ロゴ、カラーパレット、タイポグラフィ、イメージングスタイルなど、ブランドの視覚的なアイデンティティの定義（勝手にロゴの色を変えちゃだめよとかですね）

2. レイアウトとグリッド:
デザインの一貫性を保つために使用されるレイアウトのルールや
グリッドシステム（ロゴの周りの余白なども含まれますね～）

3.UIコンポーネント
ボタン、フォーム、ナビゲーションバーなど、ユーザーインターフェースの構築に使用される要素（あまりブランドイメージと違うUIパーツにならないようなガイドですね）

4.インタラクションデザイン
ユーザーの操作に対するアプリケーションの反応、遷移、アニメーションのスタイルなど（ここまで設定するのは稀ですが・・・）

5.ユーザーエクスペリエンスの原則
 ユーザビリティ、アクセシビリティ、使いやすさなど、ユーザーエクスペリエンスに関する全般的な原則（これもかなり細かい設定の場合です）

6.コピーライティングとトーン
 ブランドが伝えるメッセージのスタイルやトーン。
（これは重要ですね）

7.レスポンシブデザインのガイドライン
 異なるデバイスや画面サイズでの表示をどのように対応するか。
（どんなデバイスでも見た感じが統一されている方がいいですよね）

8.アイコンとイメージ:
使用されるイラスト、写真のスタイルやガイドライン。
（あまりイメージに合わないイラストや写真は統一感を失いますよね）

■デザインガイドラインがあるとよいこと

A.ブランド価値の保護
　企業のブランドイメージを統一することで、認識しやすくなり、他社との差別化にもなります。

B.ちゃんとしてるんだな～感
　企業としてのメッセージとそれに基づいたデザイン指針があることは、しっかりとした企業・団体という印象を与えます

C.コミュニケーションの効率化
　デザインに関する意思決定が、迅速かつ簡単になりますよね。社内外のコミュニケーションがスムーズになりますし、一貫性を保ちながら時間とコストを削減することができます。制作するクリエイター側も、ガイドラインがあるとまとめやすいですね。

■デザインガイドラインで重要なこと

イ．あまりがっちり細かく決めない
　　ガチガチにルールを決めすぎると、自由度がなくなり柔軟なデザインがしづらくなりますのである程度にとどめておく方が良かったりします。

ロ．時代に合わせてアップデートしていく
　　時代とともに流行も変化しますし、それに伴いメッセージや価値観も変わってきます。アップデートしていくことを前提にしておく必要があります。

■デザインシステム　というのもあるが…？

デザインシステムは、デザインガイドラインと、デザインガイドラインを基にしたデザインパーツを合わせたものです。それ自体がその企業や団体のデザインに関するすべての情報となるものです。たいてい公開や配布しているのはデザインガイドラインを含めて　デザインシステムという呼び名になってます。

■デザインシステムを見てみる

以下に様々な企業のデザインシステムを紹介します。
それぞれの企業がどんなフォーマットでどんなことをガイドラインに組み込み、説明し、ツールを配布しているのか？参考にしてみてください。

①Spindle（サイバーエージェント　Ameba）
Amebaのブランド = Amebaらしさをユーザーに届けるためのデザインガイドシステムです。

②デジタル庁（日本政府）
デジタル庁はデザインシステムをかなり細かく作ってありますし、ちゃんと更新してますね　しかもFigmaデータも提供しているのがさすがという感じです。

③SmartHR
SmartHRさんも説明ページとは別にFigmaでもファイルを提供してます。

④Spectrum (Adobe)
デザインソフトを多く持つAdobeにデザインシステムがないわけはありません。世界で22億人が苦しんでいるといわれている視覚障碍者の方々にも対応すべくWeb コンテンツ・アクセシビリティ・ガイドライン（WCAG）を参考にシステムを作っているのも興味深いです。

④デザイン（Apple）
Appleが求めるデザインクオリティを担保するための様々な情報を、ビデオや解説やツール、様々な形で提供しています。

⑤Brand Estonia（エストニア政府）
さまざまな公共サービスをオンラインを通じて受けることができる‟電子国家”として世界中から注目されているエストニアのデザインシステムです。国家のブランディング戦略を一手に担う政府の機関「Brand Estonia」が手掛けています。国自体をブランディング化する、そのための機関をちゃんと設定しているというのがすごいですね。メッセージというところを読むと、国家としてデザインシステムを大切にしていることが良くわかります。chrome上で右クリックをして日本語に翻訳　を選んで翻訳して読むとわかりやすいです

今後皆さんが、クライアントから「デザインシステムを作ってほしい」「デザインガイドラインをまとめたい」と相談された場合も、こうしたサイトが役立つかもしれません。
また統一されたデザインを提案する際にこうしたデザインガイドライン・デザインシステムを参考にすると、クライアントに説得力を与えるプレゼンができるかもしれません。
参考にしてみてはいかがでしょうか？

本日はここまでです～