「デザインガイドライン」はデザイナー・エンジニアの救世主なのです。

みなさま初めまして。
株式会社BitStarでデザイナーをしている菊地です。

同社のデザイナー採用第1号ですので、社内のデザイナーは私一人です。
私が入るまでは社内にデザイナーはいなかったので、デザインの積み残しが多少なりとも存在します。

そこで私のサイドミッションとして、「自社サービスのUI/UXの向上」を目指してみることにしました。
ですが、

・デザイナーは私一人。リソースに限りがあります。
・エンジニアも他の開発が優先で、UIについて細かな話ができない。
・すでにリリース済みのサービスの全体改修となるとだいぶ先になりそう。
・でも、リリース済みのサービスに関しては随時の機能追加などがイケてないデザインで追加されている

などの課題があります。そこで、大規模サービスなどで採用されている「デザインガイドライン」の導入を検討することにしました。

いきなり全体改修でなく、まずは今後追加される機能やページについてこちらで作成した「デザインガイドライン」に沿って作業を行ってもらえば今後の作業フローになれるだろうし、
「デザインガイドライン」に沿って作業してもらえば、UIについて話さなくても良いし、後の全体改修の工数も減るし、チームとして、「自社サービスのUI/UXの向上」について共通認識を持ちやすくなる。

ということで、私の復習も兼ねて、もし同じような状況に面している方のためになれたらと思い

1・デザインガイドラインの有用性
2・デザインガイドラインとは

について記していきます。

1.デザインガイドラインの有用性

「デザインガイドライン」はデザイナー・エンジニアの救世主
―――――

チーム開発においてエンジニアもデザイナーも自身の作業に集中しているタイミングで作業を中断しなくてはいけない状況というのは作業効率・やる気の面でも健全ではありません。

そこであなたの作業を中断させず爆速で仕事を敢行するために必要なのが「デザインガイドライン」です。

「デザインガイドライン」と聞くと、デザイナーの領域に聞こえるかもしれませんが、
「デザインガイドライン」とは「誰でもこのガイドラインを見ればどうやってデザインするかがわかる指針」となるものです。
ですので、

デザイナにとっては
・これを作っておけば自分がいちいち細かな部分まで確認しなくてもイケてない部分が出てこない

エンジニアにとっては
・これがあれば、細かな部分や急な仕様変更があった場合などもデザイナに意見を聞くために作業を中断する必要がなく作業に集中できる

こんな素晴らしいものは作らない他ありません。
もし、あなたの作業環境に「デザインガイドライン」がない場合はデザイナーに作成を依頼しましょう。

デザイナーがチームにいない場合は、下記の「デザインガイドラインとは」を参考にして作ってみるのもいいのではないでしょうか。

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

デザインの骨組み

―――――

デザインガイドラインは、配色やフォントや見出しルールなど、デザイン上の共通項目をまとめたものです。
ルールを策定することで、ブランドイメージを保持し、見た目の印象を統一することができます。
また、更新作業時にも一定のトーン＆マナーを保持でき、大規模案件や長期的に運用が必要なWebサイトなどで効果を発揮します。

（１）サービス全体の共通ルール

デザインガイドラインに記すべき情報については大まかに下記の項目になります。

1. 配色
   ・ベースカラー
   ・サブカラー
   ・アクセントカラー
   ・その他背景色やホバー時の色などサービスによって追加修正が可能なように
2. フォントの指定
   ・書体
   ・サイズ
   ・色など
3. 見出しルール
4. バナーサイズ
5. アイコン
6. ロゴのルール
7. 余白の取り方
8. 禁止事項など

これらのルールを記載していくのですが、このままだと様々なパターンに対応しにくい＆更新が行いずらいのでこれらのルールをさらに細分化しコンポーネント別でまとめていきます。

（２）コンポーネント別に抽出し、細分化したルール付け

各画面のコンポーネント別に細かなルールづけを行なっていきます。

（３）エンジニアなどのフィードバックからチームに最適化したデザインガイドラインにカスタマイズ

上記で作成したガイドラインについて、実際に使用するエンジニアやデザイナーのフィードバックをもとに改善・最適化していきましょう。

ガイドラインのセオリーを理解するために、一般的にどのように作成されているのかを下記ページなどを参考にするのもいいかもしれません。

・Human Interface Guidelines iOS
・Material Design

・デザインガイドライン作成のお役立ちサービス

・既存のWEBサイトのURLを入力すると自動でガイドラインを作成してくれるサービス
http://stylifyme.com/

・ブラウザー上でスタイルガイドが作れるFrontifyを試してみた｜Webクリエイターボックス