体験を伝える―『ガジェット通信』の考え方

面白いものを探しにいこう 本物を体験し体感しよう 会いたい人に会いに行こう 見たことのないものを見に行こう そしてそれをやわらかくみんなに伝えよう [→ガジェ通についてもっと詳しく] [→ガジェット通信フロアについて]

あの有名サービスも使ってる!Webデザインのスタイルガイドの作り方

本稿は、designmodoのブログ記事を了解を得て日本語翻訳し掲載した記事になります。

本記事は、起業家であるTomas Laurinavicius氏によって投稿されました。

 

Webサイトの制作工程は、昨今ますます複雑になっており、すべて一人で作成するということはなくなっています。

そんな中、ビジネス上の目標を達成し、ユーザーにとって面白みのあるサイトを作るためには、サイト設計が一貫していることを意識するというのが重要なポイントとなります。

1つのWebサイトを作り上げる際、開発担当者から与えられたサイト設計を生かしながら、別々の担当者が、各々が担当する部分をデザインする場合、一貫性を保つ1つの方法として、設計ドキュメントまたはWebデザインスタイルガイドを作成する、という方法があります。

 

Webサイト内の異なるページの間に一貫性を持たせるためには、スタイルガイドを用意することが有効です。また、そのWebサイトに続き行われる開発やサードパーティ製作においても、ブランドガイドラインに沿うことができるようになり、Webサイトがブランド全体の一部として認識されることも可能になります。

ルーク・クラム氏は昨年、Webデザインの第一歩としてスタイルガイドを使用することは重要であるという結論にたどり着きました。今回は、Webデザインスタイルガイドを作成する方法について、詳しく見ていきましょう。あなたのプロジェクトにきっと役立つはずです。

 

Webデザインのスタイルガイドとは

スタイルガイドは、あらかじめデザインされた要素やグラフィック、ルールなどを、デザイナーや開発者が集約したもので、Webサイトの様々な部分に対しての基準となり、最終的に一貫性のあるWebサイトを作り出すための指針となるものです。

 

スタイルガイドはなぜ重要?

多くのデザイナーで大きなWebサイトやWebアプリを制作する際に大切なことは、それぞれが、制作しているWebサイトについてあまり深く解釈せずに作業をしたり、逆に個人の好みでスタイルを変更するなどの調整をしてしまわないようにすることです。

開発時にWebサイトの要素を定義しておくことで、制作者が開発者の用意した要素を再現することが容易になります。さらに、どの要素をコーディングしなければならないかを知ることができますし、最初からの見せ方を正確に把握できるため、作業が簡単になります。

製作者の作業をより楽にするために、デザイナーはホバーやクリック、訪問、その他のボタン、タイトル、リンクなど、相互作用を含めたすべてについて、あらかじめ整えておくことが必要になります。

 

スタイルガイドを作成する

1. ブランドを理解する

まずは、ブランドを理解する必要があります。ブランドの背後にある物語を知り、作り上げているチームについて、会社のビジョン、使命、価値観など。あなたが作り出すスタイルガイドが、視覚的に、感情的に、そのブランドを表現できるよう、対象となるブランドをより深く掘り下げることが重要です。

もし、コーディングができないデザイナーなのであれば、Photoshopを開き、ドキュメントのタイトルや内容、そしてそれらの意味を簡単に書いておきましょう。

もしコーディングができるのであれば、後に簡単に利用できるように、あらかじめコード化されたアセットを持つHTMLドキュメントを作成するのも良いいでしょう。

 

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

オリバー・リシェンステイン氏によると、タイポグラフィはWebデザインの95%を占める重要な要素です。
タイポグラフィは、訪問者とWebサイトそのものをつなぐ、最も重要なコミュニケーションツールの1つとなるため、最適なものである必要があります。

見出しの種類は「h1、h2、h3、h4、h5、h6」です。

まずは何に該当するのかの階層を決め、書かれた文章がどの階層に属するのかを正しく見出します。その後、ボディコピーや太字、イタリックのバリエーションに着目します。

小さなリンク、イントロテキストなどに使用されるカスタムコピー、フォントファミリ、重量、色またについても考え、指定しましょう。

 

3. 配色

人間がどのように色を知覚し、近くした色合いを既にしっているブランドに関連付けているかという事実は、想像をはるかに超えます。コカ・コーラを思い浮かべる時、あなたは赤いものを見ているのではないでしょうか?

まずは、Webサイト全体の基調となる色をスタイルガイドに設定します。基調となる色は、3つ以上の濃淡、もしくは明暗をもつ色を含まなければなりません。

しかし、場合によっては、ユーザーインターフェイスをデザインするために二次的な色や三次的な色が必要になる場合もあります。また、プライマリブランドの色が目立つように、白、灰色、黒のニュートラルな色を含むこともあります。

 

4. コピー

ここで私が指すコピーとは、なにかを伝えるための宣伝文句のようなものです。スタイルガイドを作り始める前に、あなたはおそらくそのブランドを勉強していますね。例えば、そのブランドは若々しくてトレンディなものであることがわかったとします。とくにコピーとなる文言についての指示がない場合は、それを定義しておく必要があります。

「エラー番号404が発生しました」という代わりに、「ああ、インターネットが切断されてしましいました。これは404という番号のエラーなんです。」と表現することもできます。

ただし、もしコピーが企業的であるよう定められていたなら、そのような表現はしないでしょう。これは、コピーがプロフェッショナルでありながらも、面白く、受け入れられるようなものでなければなりません。Webサイトが優れているかどうかは、細かい配慮に見え隠れするものです。

 

5. アイコンを用いる

1 2次のページ
TechAcademyマガジンの記事一覧をみる
  • 誤字を発見した方はこちらからご連絡ください。
  • ガジェット通信編集部への情報提供はこちらから
  • 記事内の筆者見解は明示のない限りガジェット通信を代表するものではありません。