2017/8/29更新

Webデザインのスタイルガイドの作り方

Tomas Laurinavicius

Tomasはリトアニアの旅行ライフスタイルに関する起業家およびブロガーです。彼はブログや毎週配信されるニュースレターで、趣味やライフスタイルデザイン、起業精神について執筆をしています。

この記事はDesignmodoからの翻訳転載です。配信元または著者の許可を得て配信しています。

Webサイトの制作はどんどん複雑化しており、1人で行う仕事ではなくなってきています。サイト制作では、ビジネスの目的に合わせた一貫性のあるデザインによって、快適なユーザー体験を作り出すことが重要です。 Webサイトを分割してチームでデザインをするときにチームメンバーが共通認識を持つには、デザインドキュメントまたはWebデザインのスタイルガイドを作成することが有効です。これは、エンジニアがデザインを変更してしまうことを防ぐのにも役立ちます。異なるページの間に一貫した体験を作り出すために、スタイルガイドを用意するのはとても有効です。また、今後の開発やサードパーティ製品が生まれた際も、ブランドのガイドラインに沿い、ブランドの一部として知覚されるようにやすくなるでしょう。 Luke Clum氏は、Webデザインの第一歩としてスタイルガイドを利用することについて、昨年簡単に紹介をしました。この記事では、プロジェクトで便利に使えるWebデザインのスタイルガイドの作り方を、より詳しく見ていきたいと思います。

スタイルガイドとは？

スタイルガイドとは、デザインする前の要素やグラフィック、デザイナーやエンジニアが従うべきルールなどを集めたものです。スタイルガイドがあれば、バラバラのWebサイトの部品に一貫性を持たせて、最終的に一体感のある体験を作り出すことができます。

AirbnbのUIツールキット―Derek Bradley氏による

なぜ重要なのか？　

大規模なWebサイトやアプリを複数のデザイナーが構築する場合、彼らが独自に解釈して、個人的な趣向に基づいてスタイルを変更しないようにすることがきわめて重要です。開発の面では、Webサイトの要素を定義しておくと、エンジニアがこれらの要素を再利用しやすくなります。なぜなら、どの要素にコーディングを行う必要があるのか、どのように見せるべきなのかについて、最初からエンジニアが正確に理解できるからです。エンジニアの作業を円滑にするために、ボタンやタイトル、リンクなどに対するホバーやクリック、訪問済みなどのすべての状態のインタラクションはデザイナーが請け負います。

Webデザインのスタイルガイドを作成する

１. ブランドを研究する

最初にすべきことは、ブランドの研究です。それによって、ブランドが何を表しているのかを理解します。ブランドの裏にあるストーリーを知り、チームを観察して、その企業のビジョンやミッション、価値を理解しましょう。できあがったスタイルガイドが視覚的にも感覚的にも組織を表せているように、ブランドを深く掘り下げることが大事です。コーディングができないデザイナーの場合は、シンプルにPhotoshopのドキュメントにきちんとタイトルを付け、そのドキュメントが何であり何の目的で作成されているか簡単に記述しましょう。コーディングができる場合、あらかじめコードを付けたアセットを含むhtmlドキュメントを作成し、それらを簡単に再利用できるようにしてください。

２. タイポグラフィを定義する

Oliver Reichenstein氏によると、Webデザインの95％はタイポグラフィだそうです。タイポグラフィはWebサイトと訪問者をつなぐもっとも重要なツールの1つなので、正しいタイポグラフィを作成しなければいけません。階層を設定して、タイポグラフィを定義しましょう。見出しの種類には、h1、h2、 h3、 h4、 h5、h6があります。続いて本文テキスト、太字やイタリックなどを決めます。小さめのリンクやリード文などに使えるような、カスタムフォントも考えてみましょう。そして文字のフォント、太さ、色を設定します。

Zech Nelson氏によるスタイルガイド

３. カラーパレット

人間の色に対する認知能力は驚くべきものです。色相は既に知っているブランドと関連づけられます。コカ・コーラのことを考えてください。今、あの赤色を思い浮かべたでしょう。スタイルガイドは、プライマリーカラーを設定することから開始します。これはWebサイトを特徴づける色のことです。プライマリーカラーには、3つ未満の陰の色を含める必要があります。UIを描写するために2次色や3～4次色まで必要になる場合、これらも同様にきちんと定義しましょう。またブランドの主色を目立たせるために、白や灰色、黒などの中間色を入れるようにします。

Chloe Park氏によるGuest Centerのカラーパレット

４. 口調

ここで言う口調とは実際には文字のことです。たとえば、スタイルガイドを始める前にブランドを調査したところ、そのブランドが若者向けで流行の先端を往くものだとわかりました。もし口調に関するガイドラインが存在しない場合は、定義しなければなりません。今回の場合、口調は専門性が感じられる一方で、可笑しげで親しみやすいものである必要があります。たとえば﹁404エラーです﹂と表示する代わりに、﹁おっと、やっちまったね。404エラーだ。﹂などと言うことができるでしょう。法人向けのサイトでは、上記のようにする必要はありません。美しさは、些細な事柄の中にあるのです。

５. アイコン

アイコンは数千年前から存在していました。テキストや言葉よりも古いものです。アイコンは訪問者に対して、何が行われているか、次に何が起きるかを瞬時に伝えるものなので、プロジェクトで活用するようにしましょう。正しいアイコンを選択することで、カラーパレットやフォント、グラフィック以上に、コンテンツを表情豊かにすることができます。アイコンを使うときには、勘違いや誤解を避けるように、対象となる閲覧者や宗教、歴史などに必ず配慮してください。もう1つ、ブランドとその価値にも配慮しましょう。そうすれば、大手銀行のWebサイトで手書き風のアイコンを使うことはなくなります。

Iconfinderはプロジェクトに素敵なアイコンを見つけるための素晴らしいツールです。

NounProjectは誰もが理解できるアイコンの視覚的言語を構築しています。

６. 画像

画像は何千もの言葉に匹敵します。Webサイトで使うべき画像のスタイルや方向性を定義する画像を、確実にスタイルガイドに入れるましょう。ここでも、ブランドの価値やそのミッションと照らし合わせてください。たとえば水質保全の慈善団体は、水や食べもの、電力、教育のような生きるのに欠かせないもののありがたさを伝えるため、強い印象を残し心に訴えるような画像を用います。

優れたフリー画像のWebサイトがいくつか存在します：16 Places to Find the Best Free Stock Photos

７. フォーム

フォームはWebサイトやアプリをインタラクティブで躍動感のあるものにします。ユーザーはフォームにデータを入力し、開発者はそれを操作して作業します。フォームは階層立てて、起動やホバー、エラー、警告、成功のメッセージなどのフィードバックが返ってくるようにしましょう。たとえば、パスワードが弱すぎることやメールアドレスが無効なこと、﹁メールを送信しました﹂のようなシンプルな成功のメッセージなどのフィードバックです。

８. ボタン

ボタンは、カラーパレットとフォーム、口調を組み合わせたものです。事前にこれらのアセットを作成して、異なる状態のデザインの中でも見た目が統一されて機能的に働くボタンを作成できるようにしましょう。

９. 余白

スタイルガイドの中で、余白の設定はどうするべきでしょうか？　余白に言及することはとても重要なことです。レイアウトで使われるグリッドの形式で作成して、見出しやボタン、画像、フォームなどの要素の間での余白を定義しましょう。正しく余白を設定することで、要素の間に余裕を与えることができます。また余白を統一することで、見た目がまとまって洗練された印象を与えることができます。

10. するべきこととするべきでないこと

最後ですがこれも重要なことです。FAQのような、すべきこととすべきでないことの項を設けて、もっとも共通的な間違いを示し、その代わりどのような見た目するべきで、どのように機能するべきなのかについて例を挙げましょう。

ツイッターのブランドアセットとガイドライン

スタイルガイドの事例

ここでは、実際にスタイルガイドを作成するときにインスピレーションを受けるものとして、スタイルガイドのベストな事例をいくつか紹介します。ここで挙げるガイドラインは、それぞれの組織やそのビジョン、ミッションや価値などに大きく影響されたものであることに注意してください。また今のあなたの作業とは関連が無く非論理的なものもあるかもしれません。よって、これらの事例を鵜呑みにしてはいけません。