スモールビジネスは、NikeやApple、Starbucksのように大々的なブランド展開ができるわけではありません。しかし、スモールビジネスにもWebサイトがあります。今日の消費者はインターネットを通じて必要な情報に直接アクセスでき、簡単に商品を比較できます。なじみのあるブランド名よりも、適切にカスタマイズされた情報の方が大きな影響力を持ちます。

統一感あるWebサイト作成に役立つスタイルガイド無料テンプレート

ジョン・メディナの『ブレイン・ルール』によると、人間の脳には言葉だけの情報が10%しか定着しないのに対し、視覚的にインプットされた情報は65%も定着するとのことです。視覚効果の高いWebサイトを運営することで、伝えたい人に認知してもらい、記憶にとどめてもらい、親しみを覚えてもらうことができます。そして、視覚効果の高いWebサイト制作にはスタイルガイドの作成が役に立つのです。

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

スタイルガイドとは? 

スタイルガイドとは

スタイルガイドが登場した背景

スタイルガイドは、もともと新聞や雑誌などの文字媒体の世界で誕生したものです。多数の執筆者からなる新聞や雑誌では、送り仮名や句読点の打ち方、外国人の表記、引用方法や数字の表記などが、執筆者ごとに異なる可能性があります。

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

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

Webスタイルガイドとは

やがてWebサイトを運営する団体が増えるにつれ、統一したガイドラインが求められるようになりました。そこで、紙媒体のスタイルガイドがWebサイトにも持ち込まれ、Webサイトスタイルガイドが誕生しました。間もなくWebサイト制作の場で「スタイルガイド」というときは、「Webスタイルガイド」のことを指すようになります。

スタイルガイドはWebサイトの形式を統一するためのガイドラインです。スタイルガイドを作成することで、ブランドにとっても、Webサイトに関わる人(Webデザイナーや記事の投稿者)にとっても、ユーザーにとっても、統一感があり、使いやすく見やすいWebサイトにすることができます。
 

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

多くの人が「良いデザイン」「洗練されている」と感じるWebサイトは、いずれも非常にシンプルな外観です。そして、シンプルなデザインであることで、求める情報を得るためにはどこをクリックしたら良いか、ユーザーは直感的に理解できます。無駄な要素が徹底的に省いてあるために、脳に負荷がかからないのです。

実は、シンプルなデザインを制作することは簡単ではありません。制作する側がユーザーのことを深いところまで理解していなければ、ユーザーが必要なものだけを提供することはできません。

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

考え抜いた結果、無駄な要素をことごとく外し、ユーザーの思考の流れに沿って、意識することもなくボタンを押し、求める情報を入手できる、というのが最高のUI(ユーザーインターフェース)です。

スタイルガイドは、機械的に「余白は何ミリ、フォントは何」と決めていくのではなく、ユーザーの視点に立ち、どうしたらより使い勝手の良いインターフェースになるか、どうしたらWebサイトを通じてより良い体験ができるか、と考えることです。徹底的に検討し、答えを出すプロセスを通じて、あなたの会社のWebサイトがより良いものになるだけでなく、ブランドとしての価値も高まることでしょう。
 

スタイルガイドがもたらす6つのメリット

スタイルガイドがあることの6つのメリット

Web制作者、企業、ユーザーの3者にとって、スタイルガイドのメリットが具体的にどのようなものであるのかを整理しましょう。
 

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

メリット1:誰が制作しても、統一した外観のコンテンツを作成できる

Web制作はたった1人の担当者が行うものではありません。複数のメンバーがコンテンツ制作を分担する場合でも、スタイルガイドを参照することでぶれのないコンテンツを作成することができます。

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

Webサイトやコンテンツの制作時にスタイルガイドがあれば、いちいち問い合わせる必要がありません。「ロゴの周りは上部〇ミリ、左右〇ミリ、下部〇ミリのスペース」や、記事文中では「商品名や固有名はカタカナで表記する」など、スタイルガイドを参照しながら制作できるので大幅な時間の節約になります。また外注する場合でも安心して任せることができます。
 

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

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

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

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

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

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

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

シームレスな記事の閲覧が可能なため、ページを遷移する負担がユーザーにほとんどありません。情報を簡単に得ることができ、また楽しんで回遊することができます。

メリット2:Webサイトをひと目見ただけで、自分の求める情報があるかどうか把握できる

スタイルガイドを用いてWebサイトのデザインを統一しておけば、自然検索でWebページへ直接遷移したユーザーがどこからでもページを開いた瞬間に、これは自分が探している情報かどうかを瞬間的に把握できます。
 

なぜスタイルガイドの作成に積極的になれないのか?

これだけのメリットを持つスタイルガイドですが、残念ながら独自に持っているスモールビジネスは多くはありません。それは、作成までにある程度時間がかからざるを得ないからです。

スタイルガイドの作成には、Web制作担当者、企業、ユーザーの3者にとって、上記6つのメリットがあります。しかし、実際には独自のスタイルガイドを作成しているスモールビジネスは多くありません。

なぜかというと、スタイルガイドの作成には時間がかかるからです。将来的には大幅な時間と労力の削減につながるとわかっていても、なかなか実行に踏み切れないかもしれません。しかし、テンプレートを活用することで、スタイルガイド作成のリソースを大きく削減することができます。テンプレートを活用したスタイルガイドの作成をぜひ検討してみてください。

スタイルガイド テンプレート

スタイルガイドの事例を見てみよう

スタイルガイドの事例を見てみよう

洗練されたWebサイトを運営している企業のほとんどは、独自のスタイルガイドを作成しています。その中には公開している企業もあるので、ぜひ参考にしてください。ここでは、その中からいくつかを取り上げ、注目すべき点と併せてご紹介します。
 

Foursquare

foursquare-brandguide.pdf

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

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

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

foursquare-brandguide.pdf

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

Apple

Themes - macOS - Human Interface Guidelines - Apple Developer

Apple関連のものは、リンゴのロゴがなくても多くのユーザーがひと目で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で56ページにも及ぶ詳細なもので、使用できるアイコンやフォントなど厳しく定められています。

Apple Identity Guidelines For Channel Affiliates and Apple-Certified Individuals
 

Google

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

Material Design

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

Material Designを実際にGoogleがどのようにとらえ、活かしているかがわかる、非常に優れたスタイルガイドです。
 

HubSpot

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

Canvas Web Style Guide: Brand Guidelines

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

Canvas Web Style Guide: Brand Guidelines

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

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

他社スタイルガイドを研究しよう

上記で紹介した以外にも、CiscoやNike Pro Serviceなど、魅力的なスタイルガイドを提供しているブランドは数多くあります。

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

スタイルガイドの作成手順

スタイルガイドの作成手順

この項ではHubSpotのスタイルガイドテンプレートをもとに、実際のスタイルガイドを作成する手順を説明していきます。
 

1. ブランドコンセプト

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

あなたの企業は

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

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

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

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

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

2. ペルソナ像

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

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

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

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

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

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

  1. シンボルを用いたもの:AppleやStarbucksなど
  2. ブランド名を特殊なフォントで表記したもの:GoogleやCoca Colaなど
  3. イニシャルを用いたもの:シャネルなど
  4. シンボルとブランド名を組み合わせたもの:HubSpotなど
  5. エンブレム(紋章のように見えるロゴで中にブランド名が描かれたもの):フェラーリなど

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

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

4. ブランドカラーを決める

色は、ブランディングにとって非常に重要な要素です。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%以上が赤を基調としているとのことです。色が人に与えるイメージとブランドメッセージを一致させてください。

Canvas Web Style Guide: Brand Guidelines

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

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

3段目は、ブランドを際立たせるために暗い色を定義します。これらの色はコピーや背景色として使われます。
 

5. フォントを決める

Webページの印象を決める大きな要素のひとつが、タイポグラフィです。タイポグラフィがきちんと定義されていればユーザーの可視性は格段に上がります。その意味で、Webサイトとユーザーをつなぐのがタイポグラフィと言っても過言ではないでしょう。

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

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

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

テンプレートを利用してスタイルガイドを作成しよう

テンプレートを利用してスタイルガイドを作成しよう

「センスの良いサイト」「洗練されたデザインのサイト」と聞くと、まだまだ私たちは専属デザイナーを抱える大企業のこと…と思ってしまうかもしれません。しかし、実際はスモールビジネスこそユーザビリティの高い、洗練されたデザインのサイトが必要なのです。

逆に考えてみましょう。

  • 大見出しを見ると目がチカチカする
  • ページによってフォントがバラバラ
  • トップページに情報が盛り込まれすぎで、どこを見たら良いのかわからない

このようなWebサイトを運営する企業をあなたは信頼できるでしょうか?

シンプルでわかりやすいデザインこそユーザーが求めているものです。

そして、シンプルでわかりやすいWebサイトデザインは、お金をかけなければならないものでも、高名なデザイナーに依頼しなければならないものでもありません。

ユーザーに寄り添う姿勢から生まれる、素晴らしいUXを提供できるWebサイトを目指して、ぜひスタイルガイドを作成してみてください。

HubSpotではこの他にもマーケティングやセールスに役立つ資料を無料で公開していますので、ぜひこちらからご覧ください。

 

スタイルガイド テンプレート

元記事発行日: 2020年6月12日、最終更新日: 2020年6月12日

トピック::

ウェブデザイン