Advertisement

styleguide-design-jp (1)

 

Dropbox や Google、Twitterを見てみると、どの会社も独自のユニークなデザインセンスを持っていることが分かります。モバイルからウェブサイトまで、すべての商品やサービスの設計において、均一にデザインが統一されています。

 

 

スタイルガイドを活用することで、一貫性のあるデザインに仕上げることができるでしょう。信頼性につながることから、統一性が重要になってきます。また、商品やサービスとユーザーのつながりを作ることが、デザインとも言えます。

 

 

この記事では、じっくり検討されたスタイルガイドとブランディング用ガイドラインについて学びます。また、スタイルガイドに記載しておくべき6つの重要なポイントについても詳しく見ていきましょう。

 

 

今回紹介するサンプルや要素を参考に、今後のデザインプロジェクトに活かしてみてはいかがでしょう。

 

 

 

まずははじめる前に。

 

スタイルガイドを作成するときに気をつけたい、いくつかのポイントがあります。

 

1-RU8Uez05S3uH9Z2Dem95Jw

 

  • まず商品やサービスをデザインしてから、スタイルガイドを作成しましょう。まずどんなデザインが適しているか見つけ出し、標準にあわせて行きます。
  • スタイルガイドにおわりはありませんが、仕方ありません。普遍的なデザイン言語の作成には、インタラクティブなプロセスが必要です。
  • スタイルガイドを作成する前に、商品を通してどのようなメッセージやコンセプトを伝えたいか、きちんと理解しておきましょう。

 

 

 

01. 基本原則

 

スタイルガイドは、デザインの基本原則をベースに作成しましょう。デザインの基本原則とは、商品やサービスを開発するときに、デザイナーがどのようなアプローチで問題を解決するのか判断するガイドラインのようなものです。

 

1-_Mro6NEPE37bgCI4lAf9UQ

 

良いデザイン原則の鍵のひとつは、デザイナーがデザインを決めやすくなるように、細かく設定しておくことです。

 

では、デザインの基本原則に関する項目が記載された、Apple の Human Interface Guideline を参考に見てみましょう。

 

The direct manipulation of onscreen content engages people and facilitates understanding… Through direct manipulation, they can see the immediate, visible results of their actions.

 

この記述では、直接操作が支配する物理的およびデジタルの相互作用を媒介する原理です。つまり、デザイナーがスワイプや回転などの動作モードを選ぶときに役立つことが分かります。

 

 

デザイン原則を考えるときは、できるだけシンプルさを心がけましょう。ガイドとなる基本原則からはじめ、同じ作業をすこしずつ繰り返しましょう。

 

デザイン原則についてより詳しい内容は、A Matter of Principle(英文)を参考にどうぞ。

 

 

02. タイポグラフィ、書体

 

タイポグラフィーは、複数の商品やデザインに統一感を持たせる鍵となります。すべてのスタイルガイドに、書体の詳しい記述に関する項目を含めるようにしましょう。

 

 

デザインをシンプルに保つために、利用する書体の数やサイズを制限することが重要となります。一般的に、多くても2つのフォントからはじめると良いでしょう。ひとつは見出しタイトルで、もうひとつは本文となるボディ・コピー用です。多くのケースで、あまりこれ以上の書体が必要になることはないでしょう。

 

1-a0mAayMeVdnS91fCmqzcHA

 

 

また、どのようにタイポグラフィーを利用するのか参考サンプルを含め、ほかのデザイナーやデベロッパーが太字やイタリック斜体など、どのスタイルを利用するか分かりやすくしましょう。

 

1-uBpePqxw3lx1qbFuVqxAgA

 

フォント選びに悩んだたら、 Typewolf FontPair を試してみるのもオススメです。フォントサイズを指定するには Modular Scale も良いでしょう。また、書体は完璧に決めてしまう必要はないことも覚えておきましょう、後からいつでも変更しても構いません。

 

 

 

03. 画像イメージ

 

言葉で表現するのではなく、イメージで見せてみましょう。イメージはダイナミックで、デザイナーにとって便利に役立つツールです。ひと目見ただけでメッセージを伝え、感情に語りかけることができるでしょう。

 

 

商品のメッセージやコンセプトを伝えるために、他のデザイナーがどのようなイメージ写真を利用するべきか、詳しく記述した項目を追加しておくと良いでしょう。

 

1-hl--cmHv67TqFa8CH3iOiQ

 

Nike は、ブランドイメージを伝えるためにイメージ画像を利用している、良い例と言えるでしょう。映画のようなクオリティで、ブランドやミッションに対して刺激を与えてくれます。

 

 

イメージ写真だけに限る必要もありません。Dropbox などの会社では、デザインにあまり写真を用いませんが、代わりにイラストレーションを通して、個性を光らせています。

 

1-VUHIPQWqpg3viiZqKVSP4A

 

 

以下のサンプルは、スタイルガイドにイメージ写真を用いた Hubspot のウェブサイト。

 

1-27mA2Zmzoy6Wgy_6vm_1Ew

 

具体的なサンプルを見せるまえに、写真の色合いやコンセプトを描写している点に注目してみましょう。

 

どのようなイメージを利用するのかガイドラインに記載しておくことで、デザイナーはユーザーにメッセージを伝えやすくなり、まとまりのある経験を表現できるでしょう。

 

 

 

04. グリッドと余白スペース

 

良いとされるデザインでは、コンテンツと同じくらい余白スペースにも気を配っています。スタイルガイドでは、これらの考え方を反映した項目を含めておきましょう。

 

毎回利用しやすいように、グリッドシステムを構築しておくことが重要になります。この項目では、カラムや列の数、マージン幅や具体的な使い方を記述しておくと良いでしょう。

 

1-pyqsEE_67yOrCE11zTIgfw

 

 

余白スペースについても別に項目を追加しておきましょう。統一感のあるスペース幅を利用することで、統一性やバランス感を表現することができます。

 

1-K_2-AAgbhI8umPIkW1BruQ

 

 

マージン幅を設定しておくことで、デザイナーとデベロッパーの両方にとって役立ちます。特に、デベロッパーは Sass Variable としてコード化しておくこともできるでしょう。たとえば、Marvel のスタイルガイドを参考にすると、Sass は以下のように記述されています。

 

 

 

 

05. 配色、カラーリング

 

配色も、スタイルガイドにおいて必須要素のひとつです。視覚的な階層をつくることができ、ユーザーの感情を引き起こしやすくなるでしょう。

 

配色の項目では、デザイナーが作業しやすいように心がけましょう。どの色を利用するか悩む時間を過ごすかわりに、デザイナーはスタイルガイドを参考することで、コンテンツに集中することができるでしょう。たとえば、Buffer のスタイルガイドでは以下のように記述されています。

 

一貫した配色を利用することで、商品に親しみやすさや統一感を加えます。Buffer ではくっきり(英: Clear)と、控えめ(英: Unobtrusive)でフレンドリー(英: Friendly)な配色となっています。

 

1-rykDfsBH4CLdSSL1SSRBeQ

 

上記サンプル例では、各色に名前付けがされているのが分かります。特に、デベロッパーが配色を Sass  Variable に変換しやすくなります。

 

 

 

色の名前の代わりに、どのような役割となるか分かりやすい名前を選びましょう。こうすることで名前を変更せずに、デザイナーとエンジニアの両方が、配色を調整するのを楽にしてくれます。

 

配色に関するより詳しい説明は、配色がうまくいく、デザイナーが覚えておきたい7つの鉄板ステップを参考にどうぞ。

 

 

 

06. コンポーネント

 

多くのデザイナーやデベロッパーは、UIをコンポーネントの集まりと考えているでしょう。各UIコンポーネントは独立しています。たとえば、カード型レイアウトがひとつのコンポーネントとなります。

 

1-oelOzqIHwp84GiA0qYb8vw

 

このアプローチを利用することで、デザイナーはコンポーネントを再利用しながら、複数の一貫性のあるデザインに仕上げることもできます。また整理されたUIコンポーネントを利用することで、デザイナーが新しいデザインを作成する時間を短縮することもできます。

 

 

コンポーネントをベースにした考え方は、エンジニアにとっても役立つでしょう。エンジニアの視点から見ると、コンポーネントはレゴブロックのように組み合わせていくことができます。

 

1-HlnTaAOtCY2O8w2miiaigQ

 

UIコンポーネントをスタイルガイドに記述しておくことで、他のデザイナーが参考するのにも役立ちます。

 

1-nl4FeP6UKtLQxZmZHKwVow

 

たとえば Mapbox では、ウェブサイトに利用しているボタンや入力フォームなど、すべてのコンポーネントをスタイルガイドに記述しています。こうすることでデザイナーとデベロッパーは、どんなUIコンポーネントが利用可能かすぐに確認できます。

 

 

 

おわりに。

 

基本原則、タイポグラフィー、写真イメージ、グリッド&余白スペース、配色とコンポーネント。このリストはまだ完全版ではありませんが、これら6つのトピックは、良いスタイルガイドの基礎となるでしょう。

 

これまでに当サイトで紹介したスタイルガイドに関連するエントリーも一緒にいかがでしょう。

 

 

「スタイルガイド」に関するエントリーを確認する

 

 

参照元リンク : Designing a styleguide: elements that go into building compelling products by Jonathan Z. White – Medium