こんにちは。デザイナーの石橋です。

今回はデザインガイドラインを制作する上で、記載すべき3つのポイントに関してご紹介します。

これから初めてデザインガイドラインを作る方や、今後サービス系案件のUIデザインを担当される方にとって役立つ内容となれば幸いです。

 

目次

• そもそもデザインガイドラインを作る目的とは？
• デザインガイドラインに記載すべき3つのポイント
  – 各パーツの具体的なルール
  – 各パーツのステータス管理
  – 更新があったパーツの情報
• 最後に

 

そもそもデザインガイドラインを作る目的とは？

デザインガイドラインを作る目的には、大きく分けて２つあると私は考えます。

1つは「一貫性あるブランドイメージの提供を行うために、メンバー間でデザインルールの認識合わせをすること」です。
ルールがあやふやなまま制作を進めたり、ルールがあったとしてもそれを言語化してメンバー間で共有しなければ、作る人によってビジュアルの変化が生じてしまう問題が起きます。
たとえ素晴らしいブランド戦略を定義しても、目に見える表層のデザインが狂ってしまうと、そもそもユーザーが使いこなせなかったり、価値提供も難しくなってしまいます。

2つ目は「途中で参画した制作者でもすぐにルールの理解を出来るようにすること」です。
デザインに限らず誰しもが何か新しい物事を始める時は、構造や仕組み、やり方などを理解した上で作業を開始するかと思います。
デザインの業務もそれと同じで、そのステップがなければスタート段階で躓いてしまいます。
ゆえに、新規の制作者でもすぐにデザインルールの理解ができるような親切なガイドラインを作る事が非常に大切です。

また少し変わりますが、伝わるガイドラインがあればエンジニアにワイヤーフレームを譲渡するだけで、デザイン実装の実現もしやすくなります。

ここからは、上記を達成するためにガイドラインに記載すべき3つのポイントをご紹介します。

 

デザインガイドラインに記載すべき3つのポイント

 

①各パーツの具体的なルール

まず大切なのは「ルール」です。
ここで言うルールとは、デザインパーツごとの「やってはいけないこと」や「どういった場合にそのパーツを使用するのか」などの原則を指します。
例えばボタンであれば、下記のような疑問が生じても回答出来るようなルールが必要になってくるかと思います。

• ボタンのサイズはいくつなのか？また、複数のサイズがサイト内に混在してもいいのか？
• ボタンが並んだ場合のマージンはいくつなのか？
• ボタン内部のパディングはいくつなのか？
• ボタン内部にアイコンは配置するのか？
• ボタンに複数の種類があるならば、優先度はどういった順序になるのか？
  などなど。

パーツごとに記述すべきルールの項目や、その数も変わってくるので適宜必要とされるルールを考えましょう。
このあたりは、「Material Design Guidelines」が参考になると思います（自分はそうしました）。

また、デザインが決まりきっていない段階でルールを決め込みすぎると苦しむのは自分自身です。
ルールはデザインの進捗状況を考慮しながら、徐々にアップデートを行うことを私はオススメします。

 

②各パーツのステータス管理

これはエンジニアの方が気になる部分になるかと思います。
私はデザイン業務を行っていると、エンジニアと下記のようなやり取りが起きることがあります。

エンジニア「このフォームがエラーになったらどうなるの？」
エンジニア「このボタンはホバーしたらどういう挙動になるの？」
私「…ごめんなさい。」

こういった問題を起こさないようにすることが、ここで言うステータスの管理に当たり、項目としては主に下記が必要になるかなと思います。

• エラー時の挙動
• マウスホバー時の挙動
• クリック後の挙動
• フォーカスが当たった際の挙動（例：テキストボックス）
• disabledの場合の挙動
• トグルボタンなどのON/OFFの切り替えが出来るようなパーツのカラー変化

パッと思いつくのはこのあたりでした。パーツに対して何かアクションを起こした際の挙動がほとんどです。
ガイドラインにまとめる際は、テキストでの説明までは無くとも、上記のようなステータスごとのパーツデザインをそのまま貼り付けてあげると親切かなと思います。またサイトによって使用するパーツは変わってくるかと思いますし、このステータス管理に関しても適宜検討が必要です。

 

③更新があったパーツの情報

最後は今までとは少し視点が変わりますが、こちらもメンバーにガイドラインでデザインシステムを”伝える”ためには重要なポイントになります。

長くプロジェクトを続けていると、ユーザビリティの向上などの理由で、パーツのビジュアルをアップデートする機会というのは少なくないかと思います。ただそういったアップデートをメンバーに何も報告せずに進めてしまうと、自分以外のメンバーが旧デザインのまま制作を進めてしまうなどの問題が起き、大変危険です。

ゆえに、例えば「どのパーツをどのように変更したのか？」などを記載しておくと非常に親切かと思います。
その際は変更箇所がわかるシートを用意し、かつBefore/After的に表記すると、シンプルで伝わりやすいです。

 

最後に

デザインガイドラインは一人では作成できません。
一通り制作が済んだと感じたら、他のデザイナーやエンジニアの方々にチェックしてもらうと良いかもしれません。
きっと客観的な視点で良いフィードバックがもらえると思います。

またデザインガイドライン作りにおいては、途中でも登場しましたが「Material Design Guidelines」や「iOS Human Interface Guideline」は非常に参考になります。デザインに対する基礎概念まで細かく抑えているので非常に読み応えがあります。

ここまでお読み頂きありがとうございました。