あの有名サービスも使ってる！Webデザインのスタイルガイドの作り方
Webデザインのスタイルガイドの作り方をまとめています。スタイルガイドはなぜ必要なのか、作る上で配色やアイコン、ボタンなどはどういった組み合わせが良いのかなどを説明しています。デザイナーの人は必見の内容でしょう。
テックアカデミーマガジンは受講者数No.1のプログラミングスクール「テックアカデミー」が運営。初心者向けにプロが解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。 ※ アンケートモニター提供元：GMOリサーチ株式会社 調査期間：2021年8月12日～8月16日 調査対象：2020年8月以降にプログラミングスクールを受講した18～80歳の男女1,000名 調査手法：インターネット調査
本稿は、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. アイコンを用いる
アイコンは、テキストや言葉よりも古くから、何千年も前から存在しています。アイコンを利用することで、何が起こっているのか、次に何が起こるのかをWebサイトの訪問者に感覚的に伝えることが可能になります。
右のアイコンを選択すると、カラーパレット、コピー、またはグラフィックスよりもコンテントに多くのコンテキストが与えられます。アイコンを使用する場合は、対象となる利用者や、宗教や歴史など配慮しましょう。
そしてもう一つ。これは言うまでもないことですが、ブランドとその価値を考えましょう。極端な例で言えば、大銀行のWebサイトで手書きのアイコンを使用するのは避ける、ということです。
6. イメージの利用
絵は千の言葉よりも多くを語ります。Webサイトには、必ずそのスタイルや方向を定義するような画像を含めましょう。その際、今一度、ブランド価値とその使命について考えるようにして見ましょう。
例えば、水に関する慈善団体のWebサイトであれば「私たちは幸運にも水や食糧、電気、教育などの生きていくのに必要なものをもっているのだ」という、人間の感情への呼びかけるような、強い感情や良い根拠、呼びかけなどの魅力的なイメージを使用したりします。
7. フォーム
フォームはユーザーがデータを入力することで作業するものに代表され、WebサイトやWebアプリケーションを相互作用させます。
このことによって、アクティブ、ホバー、エラー、警告、また、パスワードが脆弱である、メールが有効でない、あるいは単純な成功メッセージ（例”メールは送信されました”）のようなものを含む、フォームからのフィードバックを得ることができます。
8. ボタン
ボタンは、配色や、フォーム、およびコピーの要素を含みます。以前に作成したこれらのものを利用して、異なるデザインながらも一貫性のある、機能的なボタンを作成することができます。
9. 空間を上手につかう
Webサイトを制作する上で、スペーシングに注目することは非常に重要ですが、どのようにスタイルガイドに載せることができるでしょうか。スペーシングは、レイアウトに使用されるグリッドの形式で定義することができます。見出し、ボタン、画像、フォーム、および他の要素の間に、定義された空間を持たせることが可能になるのです。
スペーシングを決めることで、各要素に余裕のある空間与えることができます。一貫性のある使用をするこで、より構造的で専門的なWebサイトに見せるこができるため重要です。
10. 注意事項
大事なことを言い忘れていました。注意事項に関しては、よくつまづく問題については、本来の挙動の例と合わせて、FAQ形式で示すと良いでしょう。
11. 事例
オリジナルのスタイルガイドを作成する際に、インスピレーションとして活用してほしいスタイルガイドの良い例をいくつか紹介します。紹介するガイドは、各組織のビジョンや使命、価値観の影響を強く受けていることを念頭においてください。
皆さんが参考するにあたり、直接利用ができないものや、不適合なものもありますので注意しましょう。
Spotify – パートナーブランドガイドライン (PDF)
Dropbox – ブランディングとロゴ
Kickstarter – スタイルガイド
Lonely Planet – デザインガイド
ガイドラインを見つける方法 – ブランド価値への近道
終わりに
スタイルガイドを制作するためには、まず、対象となるブランドを勉強しなければなりません。
そして、デザインに関して想定されうる様々な要素を含めることを意識し、一貫性のあるスタイルガイドを作成しましょう。
また、TechAcademyでは初心者でも最短4週間でオリジナルWebサイトを公開できるWebデザインオンラインブートキャンプを開催しています。
デザインのスキルを磨きたい、自分のアイデアを形にしたいと思っている人はぜひご覧ください。
プログラミングを独学で学習していて、このように感じた経験はないでしょうか？
- ・調べてもほしい情報が見つからない
- ・独学のスキルが実際の業務で通用するのか不安
- ・目標への学習プランがわからず、迷子になりそう
テックアカデミーでは、このような
学習に不安を抱えている方へ、マンツーマンで相談できる機会を無料で提供
しています。
30分間、オンラインでどんなことでも質問し放題です。
「受けてよかった」と感じていただけるよう
カウンセラーやエンジニア・デザイナー
があなたの相談に真摯に向き合います。
「自分に合っているか診断してほしい」
「漠然としているが話を聞いてみたい」
こんなささいな悩みでも大丈夫です。
無理な勧誘は一切ありません
ので、まずはお気軽にご参加ください。
※体験用のカリキュラムも無料で配布いたします。（1週間限定）
