なぜ大規模Webサービスにはデザインガイドラインが必要なのか

あなたは、デザインガイドラインという言葉を聞いたことがありますか？

デザインガイドラインとは、言葉の通り「どうやってデザインするかを判断するための指針」となるものです。

デザインガイドラインと聞いても、有名な広告会社やIT企業の話だと思われる方も多いかもしれませんね。

しかし、ある程度の規模を持つWebサービス開発に携わる方であれば、デザイナーに限らず、エンジニアやディレクターにとっても活用できるものなのです。

そこで今回は、なぜ大規模Webサービスにはデザインガイドラインが必要なのかについてお話したいと思います。

技術的負債に含まれるデザインの問題点

ある程度成長したWebサービスの現場では、「技術的負債」という言葉がしばしば用いられます。

技術的負債とは、いろいろな大人の事情…例えば、急な仕様変更、厳しい納期、ステークホルダーのちゃぶ台返し等によって、仕方なく行き当たりばったりな開発になってしまい、その結果生じてしまう「イケてない部分」のことです。

その中には、もちろんデザイン的な問題も含まれています。

例えば、次のような問題点は、大規模なWebサービスを運営している会社では「あるあるネタ」なのではないでしょうか。

• １つの大規模サービスに対して、各チームがばらばらに機能追加を繰り返しており、全体のデザインを見ている人がいない
• 画面ごとに配色ルールがバラバラで、統一感のないサービスになっている
• 機能によってUIの規則性がバラバラで、使いにくいサービスになっている

しかしながら、こうした問題に対して「もっとデザイナーを雇う」「シリコンバレーのようにChief Design Officerを登用する」といった解決法は、コストが高いためなかなか現実的ではないでしょう。

そこでおすすめなのが「デザインガイドライン」を作成することです。

あらためて、デザインガイドラインとは？

冒頭でも述べましたが、デザインガイドラインとは「どうやってデザインするかを判断するための指針」となるものです。

近年では、有名なIT企業が続々と自社のデザインガイドラインを公開し始めています。

「iOSヒューマンインターフェースガイドライン」と、Googleの「マテリアルデザインガイドライン」です。

• iOSヒューマンインターフェースガイドライン
• マテリアルデザインガイドライン

AppleもGoogleもIT界の巨人として知られていますが、デザインに関しても両社は最先端を走っています。

こうしたガイドラインの素晴らしいところは、従来ではフワッとした概念や暗黙知という形式でしか語られてこなかったデザインのルールを言語化し、体系的にまとめているところです。

特に、Googleのマテリアルデザインガイドラインは、概念レベルにとどまらず、色やフォント、マージンの取り方まで全て言語化・ルール化がなされています。

わたしも、会社で初めてモバイルアプリのプロジェクトに関わることになり、最初にマテリアルデザインガイドラインを読んだときは衝撃を受けました。

ガイドラインがあれば、エンジニアが機能追加する際に「これって、見た目的にはどうすればいいんだろう？」といちいち悩む必要がなくなり、エンジニアリングに集中しやすくなるのです。

ガイドラインがあればデザイナーは不要になる？

しかしながら、デザインガイドラインは万能な代物ではありません。

BootStrapのようなCSSフレームワークが出てきたときにも同じような議論がありましたが、それがあるからといってデザイナーが不要になるかというと、そんなことはありません。

デザインの指標（ガイドライン）や枠組み（BootStrap）を作っても、それを正しく活用できるとは限りません。

また、サービスというのは成長していくものです。

サービスが成長すれば、デザインガイドラインもアップデートしていく必要があり、その役目はデザイナーでなければ務まらないでしょう。

デザインガイドラインは万能な代物ではありませんが、有効に活用すれば、サービスの品質を常に保ち、より付加価値の高い仕事に時間を割くための素晴らしいツールになるのです。

デザインガイドラインの作り方

先程のiOSヒューマンインターフェースガイドラインやマテリアルデザインガイドラインを見ていると、デザインガイドラインを作るのはとても大変な作業のように思われたかもしれません。

しかし、まずは取っ掛かりとして簡単なことから始めるだけも挑戦する価値はあると思います。

例えば、Sketchのシンボル機能を活用して、Webサービスに共通しているコンポーネントをまとめてテンプレート化しておくだけでも、まずはデザイナー間で車輪の再発明が不要になり、生産性の向上につなげられます。

それから、エンジニアと協力しながら配色のルールや命名規則も決めておけば、「こういうときはこの色を使う」ということを浸透させやすくなるでしょう。

おわりに

いかがでしたか？

デザインガイドラインは、大企業に限った話ではなく、作っておけば素晴らしい効果を発揮するものなのです。

さすがにAppleやGoogleが作っているような立派なデザインガイドラインを作ることは難しいかもしれません。

しかし、前述したように、まずは自分が関わっているプロジェクトで配色やタイポグラフィのルールをドキュメントに残してみたり、Sketchのシンボルをまとめて定義しておくだけでも、ちょっとしたガイドラインにはなるはずです。

ぜひ、小さなところから始めてみてくださいね。

デザイニング・インターフェース 第2版 ―パターンによる実践的インタラクションデザイン