スタイルガイドとは？作成する意図と作成方法まで解説

スタイルガイドとは、Web制作におけるルールを記したガイドブックです。

たとえば、Apple社が制作したWebページは、りんごのマークがなくてもApple社のものだと分かります。それは、Apple社のWebページ制作のルールが独自のスタイルガイドによって明確に定められているためです。

情報が適切にカスタマイズされ、視覚効果が高いWebサイトは、ユーザーが親しみを覚えて記憶に残りやすくなります。ジョン・メディナの『ブレイン・ルール』によると、人間の脳には言葉だけの情報が10％しか定着しないのに対し、視覚的にインプットされた情報は65％も定着するといいます。

特に、スモールビジネスは大手ブランドと比較してメディア露出の機会が少ないため、ブランディングを意識したWebサイト制作によって見込み客を惹きつけることが重要です。

本記事では、スタイルガイド作成に必要な情報とテンプレートをご紹介します。スモールビジネスのブランディング確立と、良いUXを提供するWebサイト制作に役立つスタイルガイドを一緒に作成していきましょう。

スタイルガイドとは

スタイルガイドは、もともと新聞や雑誌などの文字媒体の世界で誕生したものです。

たとえば、ある記事では「従って」と書かれているのに、別の記事では「したがって」と表記されていると読み手はストレスを感じます。そのようなストレスを与えないために一定のルールを定め、執筆者や校閲・校正者がいつでも参照できるようにしたものが「スタイルガイド」です。

また、印刷段階での統一のために、使用活字やサイズ、余白、タイトルロゴなどもスタイルガイドに盛り込まれました。
 

Webスタイルガイドとは

Webスタイルガイドとは、新聞や雑誌の世界で誕生した「スタイルガイド」のWebサイト版です。Web制作の現場では、Webスタイルガイドのことを「スタイルガイド」と呼ぶのが一般的で、本記事で紹介する「スタイルガイド」もWebスタイルガイドを指します。

では、なぜWebサイト制作にスタイルガイドが必要なのでしょうか。

Web制作には、少なくともこれだけの人々が携わります。

• プロジェクトマネージャー
• ディレクター
• アナリスト
• エディター
• ライター
• デザイナー
• コーダー
• エンジニア

それぞれの担当者が自身の感覚を頼りにWeb制作を進めると、デザインのテイストや文字の大きさ、フォント、配色などに統一感がなくなり、最初に描いていたWebサイトからどんどん離れていってしまいます。

スタイルガイドを作成すると、「デザイン」という抽象的な概念に具体的なルールを定めることができます。その結果、Webサイト制作に関わる全ての人が迷わず作業を進められ、統一感があり、見やすいWebサイトが完成するのです。
 

スモールビジネスでも統一された形式が必要なのはなぜ？

多くの人が「良いデザイン」「洗練されている」と感じるWebサイトは、いずれも非常にシンプルな外観で使いやすく、直感的に操作できます。

しかし、シンプルで使いやすいWebサイトを制作することは簡単ではありません。制作する側がユーザーのことを深いところまで理解していなければ、ユーザーに好まれるWebサイトの設計は困難です。

デザインを制作する側は、ユーザーは誰なのか、何を求めてそのWebサイトを訪れ、どんな問題を解決しようとしているのかを考え抜かなければなりません。

無駄な要素をとことん除外し、ユーザーの思考の流れに沿ってボタンを配置し、求める情報を入手できるのが最高のUI（ユーザーインターフェース）です。

スタイルガイドを作成する上で重要なのは、機械的に「余白は何ミリ、フォントはこれ」と決めていくことではありません。ユーザーの視点に立ち、どうしたらWebサイトを通じてユーザーがより良い体験ができるのかを徹底的に検討し、答えを出すプロセスです。

それにより、自社Webサイトがより良いものになるだけでなく、ブランドとしての価値も高まるでしょう。
 

スタイルガイドは、Web制作者、企業、ユーザーにとってどのようなメリットがあるのか、具体的に説明します。
 

Web制作者にとっての2つのメリット

メリット1：チーム内でWeb制作のルールを共有できる

Webサイト制作に関わるすべての人がスタイルガイドを参照することで、ぶれのないコンテンツを制作することができます。
 

メリット2：時間の節約になる

Webサイトやコンテンツの制作時にスタイルガイドがあれば、チームメイトに詳細を確認する手間が省けます。

「ロゴの周りは上部〇ミリ、左右〇ミリ、下部〇ミリのスペース」「商品名や固有名はカタカナで表記する」など、スタイルガイドを参照しながら制作できるので大幅な時間の節約になります。また、外注する場合も安心して任せることができます。
 

企業にとっての2つのメリット

メリット1：スタイルガイドを作成するプロセスで自社の価値を改めて認識できる

スタイルガイドを作成する際、最初に行わなければならないのが自社ブランドの研究です。そのプロセスで顧客と商品の関係性を把握し、「誰の」「どのような問題を」「どのように解決するのか」を明確化させます。この探求によって、「自社は何を作るのか」「何を提供するのか」という問いが深まっていきます。
 

メリット2：従業員のエンゲージメントが強化される

スタイルガイドを作成し、社内に周知させることによって、ブランディングを企業内全体で共有することができます。ロゴや色、スタイルなどを通じて、従業員全員が「自社らしさ」を共有することができ、従業員のエンゲージメントが強化されるという効果が期待できます。
 

ユーザーにとっての2つのメリット

メリット1：スムーズにWebサイトを利用できる

シンプルな見た目で、何がどこに書いてあるのかが明確なWebページは、ユーザーが直感的に操作することができます。また、Webサイトを回遊するという経験自体を楽しむことができます。
 

メリット2：Webサイトに自分の求める情報があるかどうかすぐに分かる

スタイルガイドに基づいて設計されたWebサイトは構成が非常に分かりやすいため、自然検索でWebページへ直接遷移したユーザーが、ページを開いた瞬間に自分が探している情報があるかどうかを判断できます。
 

ここまで紹介したように、スタイルガイドにはさまざまなメリットがあります。しかし、独自のスタイルガイドを作成しているスモールビジネスはまだ少ないのが現状です。

その理由は明確で、スタイルガイドの作成には時間がかかるからです。将来的には大幅な時間と労力の削減につながるとわかっていても、なかなか実行に踏み切れないかもしれません。

そんな時は、スタイルガイドのテンプレートを活用しましょう。

テンプレートを活用すれば、スタイルガイドに必要な要素がすぐに分かり、スクラッチからスタイルガイドの作成に取り組んだ場合に比べて、時間を大幅に節約することができます。

HubSpotでは、「統一感あるWebサイト作成に役立つスタイルガイドテンプレート」を無料配布しています。本記事でスタイルガイドの基礎を学んだら、以下のリンクからテンプレートをダウンロードして、実際にスタイルガイドを作ってみましょう。

作り方の手順はスタイルガイドの作成手順で解説しています。
 

洗練されたWebサイトを運営している企業の多くは、独自のスタイルガイドを作成しています。スタイルガイドを公開している企業の中からいくつか事例を取り上げ、注目すべき点と併せてご紹介します。

それぞれのブランドが、ロゴやブランドカラーを通じて何を体現しようとしているのかを検討し、自社のスタイルガイド作成の参考にしてください。
 

Apple

Themes - macOS - Human Interface Guidelines - Apple Developer（英語）

AppleのWebページは、リンゴのロゴがなくても多くのユーザーがひと目でAppleだとわかります。その理由のひとつとして、さまざまなカテゴリーでガイドラインが非常に綿密に設定されていることが挙げられます。上記は、OSのデザインについてのスタイルガイドです。

App Icon - Icons and Images - macOS - Human Interface Guidelines - Apple Developer（英語）

「美しく魅力的なアイコンがMacOSのUXの根幹にある」というアプリアイコン。スタイルガイドには、ブランドの哲学がしっかりと述べられています。

また、以下はアフィリエイトと認定資格者に対するガイドラインです。

Apple Identity Guidelines For Channel Affiliates and Apple-Certified Individuals（英語PDF）

PDFで56ページにも及ぶ詳細なもので、使用できるアイコンやフォントなどを厳密に定めています。

Apple Identity Guidelines For Channel Affiliates and Apple-Certified Individuals（英語PDF）
 

Google

Googleも、Googleのデザインがどのように進化を遂げてきたかを紹介する「Google Design」（英語）のページや、「C++スタイルガイド」など、さまざまなスタイルガイドを公開していますが、興味深いのはMaterial Design（マテリアルデザイン）のガイドラインです。

Material Design（英語）

マテリアルデザインとは、Googleが提唱する新しいデザインシステムです。リアルな世界の「物体（マテリアル）」が奥行きと厚みを持つように、Web上に表現されたデザインでも奥行きと厚みを見せることによって、より操作性の高いインターフェースの実現を試みるものです。

Googleがマテリアルデザインをどのように捉え、活かしているかがわかる、非常に優れたスタイルガイドです。
 

Foursquare（英語）

foursquare-brandguide（英語PDF）

位置情報に基づいたSNSアプリを提供するFoursquareは、詳細なスタイルガイドを提供しています。

スタイルガイドの最初で、「Foursquareブランドは単なるロゴではありません。Foursquareとは何か、私たちが何を象徴しているのか、その核心を伝えるために組み合わせて機能している視覚システムであり言語です」と、Foursquareのブランドに対する定義づけがなされています。

続いてロゴや余白、カラーパレットなどのルールが紹介されています。

foursquare-brandguide（英語PDF）

このページでは、ロゴに対する余白が規定されています。スタイルガイドがどのようなものなのか、イメージをつかむことができるでしょう。
 

Cisco（英語）

世界最大のコンピュータネットワーク機器開発会社であるCiscoもスタイルガイドを公開しています。ロゴのパートには、「Ciscoのロゴは私たちの象徴であり、人々はこのロゴを見ればCiscoを一目で認識できます」と書かれています。

以下は、Ciscoのロゴのカラーバリエーションです。

こちらは「CiscoSans」と呼ばれる、読みやすさを重視したオリジナルフォントです。スモールビジネスにとってオリジナルフォントの開発は容易ではありませんが、最近では無料で使用できる美しいフォントが数多く開発されています。

Nike Pro Service（英語）

Nike Pro Serviceは、優秀なランナーのみが参加できる招待制のプログラムで、プロアスリートをサポートしている専門家にアドバイスを受けることができます。

スタイルガイドには、ロゴのバリエーションや配色、デザインが細かく明記され、ブランドアイデンティティへのこだわりが感じられます。
 

HubSpot

HubSpotもスタイルガイドを公開しています。

Canvas Web Style Guide: Brand Guidelines（英語）

「ブランドガイドライン」「Webスタイルガイド」「モジュール」の項目に分かれています。

Canvas Web Style Guide: Brand Guidelines（英語）

「ブランドガイドライン」の項目では、HubSpotのロゴとキャッチフレーズやカラーパレットなど、HubSpotのWebデザインを構成する要素を解説しています。

「Webスタイルガイド」は、実際にランディングページを作成できるようなチュートリアルページになっています。
 

この章では、HubSpotのスタイルガイドテンプレートを使用した、スタイルガイドの作成手順を説明します。まだダウンロードがお済みでない方は、以下のリンクからテンプレートを入手してください。

1.ブランドコンセプト

まずは、ブランドからユーザーに向けたメッセージを決定します。

あなたの企業は

• 誰の
• どのような問題を
• どのような手段で

解決しようとしているのでしょうか。また、

• どんな行動をとってほしい

と考えているのでしょうか。

上記の4つを軸に、企業のブランドストーリーを組み立ててください。
 

2.ペルソナ像の設定

次に考えるのは、ターゲットとするユーザーの属性やニーズです。

ターゲットに設定する上でカギとなるのは、「来てほしいユーザー」ではなく、「実際にWebサイトを訪れるユーザー」に近づけることです。

アンケート調査やアクセス解析データ、購入履歴、登録情報などからユーザー層を割り出してください。

• 性別
• 年齢層
• 興味
• ライフスタイル
• 価値観

具体的にペルソナを設定することによって、ターゲットが明確になります。ターゲットが明確になればなるほど、Webサイトを通したメッセージも明確になります。
 

3. ブランドロゴを決める

ブランドカラーや会社名を使ってロゴを設定します。最初にロゴのタイプを考えましょう。ロゴのタイプは以下の5種類があります。

このスタイルの中から、自社のブランドメッセージに最もなじむものを選びましょう。

ロゴのスタイルが決まったら、次に色、グラフィックを入れるかどうか、タイポグラフィ―などを決定していきます。
 

3.ブランドカラー選定（又は配色選定）

色は、ブランディングにとって非常に重要な要素です。Starbucksの緑、Coca Colaの赤、Androidの黄緑、LINEの緑など、私たちはブランド名を聞くと同時に色をイメージします。ロゴの色や配色によって、Webサイトの印象は大きく変わってきます。

ローレン・ラブレックとジョージ・ミルンの論文 ”To be or not to be different: Exploration of norms and benefits of color differentiation in the marketplace”（『市場における色彩の差異による基準と便益について』）によると、青をブランドのプライマリーカラーにしているクレジットカード会社が75％に上るのに対し、小売店は60％以上が赤を基調としているとのことです。

HubSpotが使用しているカラーを例に考えてみましょう。

Canvas Web Style Guide: Brand Guidelines（英語）

最上段は、HubSpotのプライマリーカラーです。ロゴにも使われているLoraxはCTAに利用され、Loraxと強いコントラストを持つCalypsoはクリック可能な部分を示すために使われています。

2段目の2次色は、プライマリーカラーを補う色です。デザインに鮮やかさを加え、空白を分割する際に使われます。

3段目は、コピーや背景色として使われます。ブランドを際立たせるために暗い色が採用されています。

ブランドメッセージにもう一度立ち返り、色が人に与えるイメージとブランドメッセージを一致させましょう。
 

4.タイポグラフィの決定

Webページの印象を決める大きな要素のひとつが、タイポグラフィです。タイポグラフィとは、文字の書体や大きさ、配列といった視覚効果の総称で、タイポグラフィがきちんと定義されていれば、ユーザーの可視性は格段に上がります。

次に、フォントを決めます。

見出しのh1～h6、本文テキストのフォントを定義します。日本語でWebサイトを作る場合に利用されることが多いのが、メイリオ、游ゴシック、ヒラギノ角ゴ（MacOSのみ）などです。

シンプルなフォントを使うのか、力強さが感じられるフォントを選ぶのか、実際に使われているページを見ながら考えてください。
 

質の良いWebサイトは、デザイン性だけではなく視認性や操作性にも優れています。スタイルガイドを活用すれば、ユーザビリティが高く、洗練されたデザインのWebサイトを制作することができます。

また、企業の信頼を高めることもWebサイトの重要な役割です。

• 濃い配色で目がチカチカする
• ページによってフォントがバラバラ
• 情報が多すぎてどこを見たら良いのかわからない

このようなWebサイトを運営する企業が、見込み客からの信頼を得るのは難しいでしょう。特に、マスメディアへの露出が少ないスモールビジネスは、Webサイトで見込み客からの信頼を得ることが重要です。

素晴らしいUXを提供できるWebサイトを目指して、スタイルガイドを作成してみましょう。

以下のページで秀逸な海外のホームページデザイン50選を紹介していますので、Webサイト制作の参考として併せてご覧ください。