伴子デザイナー(ビジネス・アーキテクツ)ゲーム業界でのデザイナーを経て、2000年にウェブ制作会社に入社。運用から構築まで得意分野は幅広く、多くの大規模プロジェクトに関わる。インタラクティブコンテンツのアートディレクター。2018年よりビジネス・アーキテクツに入社し、UI/UXデザイナーとして奮闘中。デザインガイドラインについては、以前にご紹介しているので、今回はデザインシステムとの違い、デザインガイドラインを作るメリットやデメリット、今後ガイドラインを作成するにあたって参考にした方がよい海外企業のガイドラインのご紹介をしていこうと思います。Systemまとめ:「同一の基準」を作ることは、デメリットを上回るメリットがあるデザインシステムとデザインガイドラインの違いデザインガイドラインに似た用語でデザインシステムというものがありますが、まずは両者の違いを理解しておきましょう。デザインシステムとはデザインシステムとは、あるべきデザインを一貫性をもってユーザーに提供するための仕組みで、組織でデザインを運用していくために存在しています。具体的には、UIキット、スタイルガイド、パターンライブラリ、ブランドガイドライン、命名規則やコード、UIコンポーネント、アニメーションなどの実装視点でも必要となる要素も含んで構成されています。デザインガイドラインとはデザインガイドラインとは、デザインシステムに内包される概念で、デザインを進める際の具体的な指針のことです。基礎となるスタイル、コンポーネント、パターンなどのライブラリを含むガイドラインです。デザインシステムとデザインガイドラインの違いのまとめ上記の図の様に、デザインガイドラインとは、デザインシステムの一部です。位置づけを理解した上で、デザインガイドラインを作成していくことも重要ですので、ご紹介しました。デザインガイドラインを作成するメリットとデメリットデザインガイドラインの構築や運用は、製作側にもユーザー側にもメリットがあります。統一性を高めることでブランディングにもつながるものですが、細かく決めすぎるとデメリットも出てきます。3つのメリットと2つのデメリットを見ていきましょう。制作規模が大きくなると、デザインを複数人で行うことがあります。そんな時にデザインガイドラインがあれば、個人個人で分かれて作業していても統一感を保ったデザインを制作できます。着任したばかりのデザイナーでもガイドラインを頼りに作業することができます。メリット2.ユーザビリティを保つガイドラインによって、統一性のあるデザインが実現していれば、一貫性という観点からユーザビリティにも貢献できます。メリット3.コンポーネントやテンプレートによるコスト削減ガイドラインによって、コンポーネントやテンプレートが出来ていれば、新規ページを作成する場合でもそれらを組み合わせて作ることが出来るので、制作コストを抑えることが出来ます。デザイナーだけではなく、エンジニア、ディレクターがガイドラインを使ってページを作ることも可能になり、よりコスト削減につながります。デメリット1.デザインの自由度がなくなるページ制作をする上で、デザイナーやWeb担当者は自由な表現や最新の技術を使ったサイトを作りたくなることも多いと思います。ガイドラインを作成するとサイトにふさわしい表現でも新たな表現を盛り込めないことがあります。デメリット2.視覚変化に乏しくなるこれは、ユーザビリティが良くなることの裏返しなのですが、どうしても視覚的な変化に乏しいデザインに陥ってしまうことが多くなります。ユーザーの興味喚起を狙うデザインの場合には適していないこともあります。ガイドラインは、あくまで基準であり法律ではないので、上記のようなことになってしまわないように、要件や時代の変化に応じて、アップデートしながら使っていく事が大切です。企業のガイドラインの一例:参考にしたい海外サイトそれでは、具体的な事例として、デザインガイドラインを採用している海外企業の例を見ていきましょう。OSが大部分のスマートフォンに搭載されている環境においてAppleやGoogle、Microsoftのデザインガイドラインは「デファクトスタンダード(事実上の標準を意味する)」だからです。Designは、Google社のデザインガイドラインです。各デバイスに合うような設計がされています。XDやFigmaに対応したUIキットがダウンロードできます。Guidelinesは、Apple社のデザインガイドラインです。デバイスメーカーが出しているガイドラインなので、各デバイスごとに最適な見せ方が出来るルールに仕上がっています。Designは、Microsoft社のデザインガイドラインです。前者の2社に肩を並べる会社のガイドラインです。こちらも原理原則に基づいて制作されています。Spectrumは、言わずと知れたソフトウェア企業であるAdobeのガイドラインです。カードデザインやコンポーネントごとのルール、アイコン、フォント、カラーなどパーツの制作で参考になります。Systemは、IBM社のデザインガイドラインです。コンポーネントの概要、使用時、デザイン、実装コードが1ページにまとめられていて、とても理解しやすいガイドラインになっています。2022-3-9)まとめ:「同一の基準」を作ることは、デメリットを上回るメリットがある今回はデザインガイドラインのメリットやデメリット、参考になる企業のデザインガイドラインをご紹介しました。デザインクオリティの確保・ユーザビリティ向上・コスト削減など大きなメリットを持ち、共通の基準を設けることにより、社内外でのコミュニケーションも円滑に行える様になると思いますので、ぜひ、デザインガイドラインの導入をご検討ください。BAsixsでは、多くのお客さまのWebサイト制作を手がけてきた経験を通して、デザインのクオリティの向上に寄与するさまざまなデザインガイドラインを作ってまいりました。デザインガイドラインの導入をお考えの方はお気軽にご相談ください。お気軽にご相談くださいサービスの詳しい情報や仕事のご依頼については、お気軽にご相談ください。