サイトデザインに統一性をもたせる！ウェブデザインスタイルガイドの作り方

Designmodo

Designmodo publishes web design articles, tutorials and has a great shop with the best WordPress and Bootstrap themes, plugins, UI Kits and more.

本記事は、How To Create a Web Design Style Guideを
翻訳・再構成したものです。
配信元または著者の許可を得て配信しています。

2,983 views

読了時間 : 約5分17秒

ウェブサイト作成作業は、どんどん複雑になり、通常は一人の作業ではありません。そんな中で、ユーザーを楽しませ、ビジネス目標を達成するためには、デザインは一貫性があり、適切なものでなければなりません。

ウェブサイトを作成するにあたり、手分けをしてデザインをしていたり、開発者にデザインしてもらうときなどは、設計ドキュメントまたはウェブデザインスタイルガイドを作成することがあります。

異なるページ間で一貫した作業を行うには、スタイルガイドを用意することが大切です。その先の開発などでも、ガイドラインに従えば、そのブランドにあったものになるからです。

昨年、Luke Clumが、ウェブデザインの第一歩としてスタイルガイドを使うでさらっと触れましたが、ここでは、有益なウェブデザインスタイルガイドを作成する方法について、さらに詳しく見ていきたいと思います。

スタイルガイドとは何か？

スタイルガイドとは、デザイナーや開発者が従わなければならない要素、グラフィック、およびルールを事前に決め、まとめたものです。手分けして作成するウェブサイトの構成要素の一貫性を保ち、まとまりのあるものを作り上げるために使われます。

Derek BradleyのAirbnb UI Toolkit – Web

どうして重要なの？

複数のデザイナーが大きなウェブサイトやウェブアプリを作成している時は、間違った解釈したり、個人の好みでスタイルを変更したりしないようにすることが、非常に大切です。

開発において、ウェブサイトの要素を決めておけば、開発者はこれらの決められた要素を簡単に使うことができます。さらに、仕事内容を理解し、どのようにしなければいけないか正確に把握できるため、作業が簡単になります。

開発者が楽に作業できるように、ホバー、クリック、ボタン、タイトル、リンクなど考えられるすべての要素を含めることがガイドデザイナーの責務です。

ウェブデザインスタイルガイドを作る

ブランドを理解する

まず、ブランドの意味を理解するため、ブランドを調べる必要があります。ブランドの裏にあるストーリーを知り、チームを観察し、会社の信念、指針、理念を理解しましょう。スタイルガイドが視覚的にそして感情的にも組織を表すものになるよう、ブランドをより深く掘り下げ、理解することが重要です。

あなたがコードを書くことができないデザイナーなら、Photoshopを開いて、タイトルとそれが何か、何のためのものかの簡単な説明を書くだけです。あなたが、コードが書けるデザイナーなら、簡単に利用できるように、事前にコード化されたアセットを使いhtmlドキュメントを作成するといいでしょう。

タイポグラフィを決める

Oliver Reichensteinによれば、ウェブデザインの95％はタイポグラフィです。ウェブサイトとサイト訪問者の最も重要なコミュニケーションツールの1つなので、適切なタイポグラフィを使用しなくてはなりません。

見出しの種類はh1、h2、h3、h4、h5、h6。その後、本体はボールドイタリック体のバリエーション。小さなリンク、紹介文などに使用される文字ついても考えてみましょう。フォントのタイプ、太さ、色を指定します。

Zech NelsonのStyle Guides

カラーパレット

驚くことに、人は色を見て、既知のブランドのことを思い出します。たとえば、コカコーラといえば赤ですよね。まずは、ウェブサイトの核となるスタイルガイド用の色を設定することから始めてください、核となる色は3つ以下に。ただし、場合によっては、ユーザーインターフェイスに第二、第三の色が必要になります。それらも決めてください。また、ブランドの核となる色として白、グレー、黒などのニュートラルなカラーも、目立つものにするために含めます。

Chloe ParkのGuest Center color palette

ここでの声というのは表示のことです。スタイルガイドを作成する前に、ブランドの研究をし、そして、その時に、そのブランドが若者向きでトレンディだと理解したとします。表示に方向性がない場合は、それを決める必要があります。

表示がプロフェッショナルでありながらも、面白くて気さくなものでなければならないことを示す簡単な例ですが「404エラーが発生しました」と述べる代わりに、「おやおや、壊しちゃいましたね、404エラーです。」とすることができます。表示の方向性がもっと企業向けなものなら、これはできません。細かいところできらっと輝かせることができますよ。

アイコン画像

アイコンは何千年も前から存在していて、テキストなどよりも古いものです。アイコンを使用することで、今何が起こっているのか、次に何が起こるのかを訪問者がすぐに理解するので、アイコンを使わない手はありません。正しいアイコンを使うと、カラーパレット、表示、グラフィックよりもコンテンツが分かりやすくなります。

ただし、アイコンを使用するときは、対象者、宗教、歴史を必ず考慮に入れてください。そうすることで、誤解や誤解を避けることができます。もう1つ注意が必要なのは、ブランドに見合ったものを使うこと。大手銀行のウェブサイトなどでは、手描きのアイコンを使用することなどないようにしましょう。