コラム

Web・グラフィックデザイン

なぜ必要？スタイルガイドでWebサイトに統一感を出そう！

公開日:2021/02/24

突然ですが、Webサイトスタイルガイドとは何か、ご存知ですか？世の中のあらゆる活動において、Webサイトはビジネスチャンス拡大のために欠くことができない最重要ツールの一つとなりました。これにより、Web上での集客争いは熾烈化、Webサイト運営者は、Webサイトのコンテンツクオリティーの向上にこぞって注力しています。スタイルガイドとは、この話題となっているコンテンツマーケティング※のうちの一手のことを指します。ここでは、Webサイト作成においてスタイルガイドの必要性、またスタイルガイドの作成方法などについて詳しく解説していきます。

スタイルガイドとは

デザインをする様子

スタイルガイドとは、その名の通り、Webサイトのスタイルを統一化するためのガイドラインのことを意味します。スタイルガイドの活用目的は、ユーザーがそのWebサイトに魅力を感じ、円滑かつ充実したサイト体験をすることです。言い換えれば、スタイルガイドは、見込み客をよりスムーズに、利益という最終目的地へと運ぶための潤滑油のような役割を担っています。

スタイルガイドはなぜ必要？

Webサイトは、ビジネス性の高まりにつれてその構成も複雑と化してきました。そのため、制作における各工程は、デザイナーやエンジニアといったその分野のプロフェッショナル複数人によって作業が進められるようになりました。この分業制により、より質の高いWebサイトを提供することが可能になりましたが、これには弱点もあります。
例えば、次のようなことは誰しも経験したことがあるのではないでしょうか。一つのプロジェクトに対し役割分担をして作業を進める中、確認の際に、「あれ？なんだか全体に統一感がないな」「良かれと思ってこうしたんだけど、違ったのかな？」「あの指示ってそういう意味だったの？」など……こういったチーム内での解釈の誤差、それは作業工程が複雑であればあるほど大きくなりがちです。
スタイルガイドは、制作チームがこのような解釈のギャップを埋め、デザインのルールやスタイルに対し同じ認識を持って進むために、必要不可欠な指針となります。

スタイルガイドの内容

スタイルガイドには、デザイナーやエンジニアがWebサイトの全体感を把握、時に再確認するために必要とされるルールがまとめられています。制作工程では、同じ1ページの中のさまざまなパーツを別々の担当者が作成するため、各々の個人的な趣向や認識の誤差によってパーツのデザインやコンポーネントに違いが生まれがちです。そのようなことを未然に防ぐためには、主に以下のような項目についてのルールを事前に定めることが有効とされています。

ブランドについて
タイポグラフィ
カラーパレット
口調
アイコン
画像
UIパーツ
余白
禁止事項

スタイルガイドで定義すべき決定項目は多数ありますが、主にこれらについて定められていれば、別々に作成されたWebサイトパーツにも一貫性が生まれ、最終的に一体感のあるサイト体験を作り出すことができます。それぞれの項目についての詳細は後ほど解説します。

スタイルガイドを作るメリット

プラスマークを持つ手

スタイルガイドの概要についてはご理解いただけたかと思います。それではここからは、スタイルガイドを作成するメリットについて紹介していきます。

作業の効率化

制作に関わるディレクター、デザイナー、エンジニアが作業に入る前に、スタイルガイドを通してルール共有ができていれば、進行中の手戻り（※1）の数を最小限に抑えることができます。
作業がある程度進んだ段階でお互いの微妙なズレに気付いた場合は、そこから無駄な作業工数が増えることになります。また、差異に気付いたのが納期直前となれば、指摘しづらくなってしまい結果的にサイトのクオリティーに影響が及んだり……。このような事態の回避に役立つのがスタイルガイドです。
例えば、スタイルガイドがあれば、エンジニアはデザイナーやディレクターへの仕様確認の時間を短縮でき、デザイナーはデザインに関する余計な選択肢を省くことができます。また、将来的に作業者が増えたり、サードパーティー（※2）製の製品が開発される際にも、同じガイドラインに沿うことで作業工数を抑えることができる上、全体に安定した一体感を保つことが可能になります。
このように、スタイルガイドは制作過程における生産性と正確性を上げることに役立ち、余分な労力やストレスによる時間やエネルギーの磨耗を回避することができるのです。

（※1）手戻り・・・作業を進行する途中で大きな問題が発見された場合に、その工程よりも前の段階に戻って改めて作業をやり直すこと。
（※2）サードパーティー・・・対象となる製品の開発元や販売元ではないため直接の関係はないが、関連した製品を販売している第三者企業のこと。

Webサイト全体における一体感

スタイルガイドはWebサイト全体に統一感を与えます。
表層的な部分で言えば、まず、一体感による視覚的な美しさ。調和のとれた仕上がりによって、Webサイトが意図するものがまとまりのある表現となり、ユーザーはその意図を感じ取りやすくなります。
深層的な面では、Webサイト内の動作や、アニメーション、UI※などにおいて一貫性が保たれます。また、コードの統一化が行いやすくなります。コードは仕様の変更や追加を積み重ねるたびに乱雑になりがちです。スタイルガイドによって、コードの修正削減とパターン化による量産が可能になるため、コードの品質低下を抑えることができます。

※UI・・・ユーザーインターフェース（User Interface）。ユーザーとサイト間で情報を円滑にやり取りするための仕組みのことを指す。ディスプレイ、マイク、キーボードなどを用いた画面表示や音声入出力、文字入力などによって構成される。

スムーズな使いごごち

スタイルガイドによってWebサイト内のアイコンやボタンなどが統一されていると、ユーザビリティが向上します。ユーザビリティの高いサイトを提供することによって、ユーザーは学習効率を上げ、より速く正確に目的を達成することができるようになります。
これは、ユーザーとサイトとの間に良好な関係性を築くことへとつながります。

スタイルガイドの作り方

色鉛筆や絵の具のパレット

ここからは、スタイルガイドの作り方や設定すべき項目などを紹介します。

ブランド研究

スタイルガイドの土台となるため、一番始めに着手すべきなのがブランドについての研究です。ブランドのバックグラウンドについて調査し、どのようなチームなのか、また描いているビジョンや取り組んでいるミッション、そして企業価値についての理解を深めましょう。
これらについて始めに深く追求することで、ブランドの核心に触れることができ、これからのブランディングへのアイディア整理へと役立てることができます。スタイルガイドは、このブランド追求によって得た情報を骨組みにして構築されていきます。

タイポグラフィ

タイポグラフィーには大きく分けると2つの定義があります。まず一つ目は、文字をきれいに読みやすくするために、フォントや文字配列について検討し設定すること。二つ目は、文字の意味や魅力を引き立てて表現するために、文字をアートのように自身でデザインすること。
そして、このタイポグラフィはWebサイトにおけるデザインの95％を占めると言われています。タイポグラフィーをスタイルガイドによってどのように最適化するか、これはサイト全体のクオリティーを左右する重要なポイントとなるでしょう。
具体的な作業としては、まず見出しの種類 h1、h2、 h3、 h4、 h5、h6 についてや、本文テキスト、太字やイタリックなどについての設定を行います。続いて、リンクやリード文などに使えるような小さめのカスタムフォント、そして文字のフォントや太さ、色についての検討を行います。

カラーパレット

色は人間の思考に対して、瞬時に、そして効果的に影響を与えます。ある研究では、ユーザーの90％が配色によって無意識的に商品の購入を決定している、という結果が出ているそうです。Webサイト作成において、どのような色を配色するかは、サイト全体のイメージをどのように作り上げ成果につなげるか、ということに相応します。
このような特性により、色はブランドイメージと強く関連づけて利用されることが多いです。例えば、Facebookといえばあの水色、コカ・コーラといえばあの赤、LINEといえばあのグリーンを思い浮かべるでしょう。カラーパレットの選定は、始めに紹介したブランドの追求結果にもとづいて、慎重に行われることが重要となります。
スタイルガイドの作成手順としては、まずプライマリーカラーを設定することからスタートします。プライマリーカラーとは、カラーパレットの中で主要とされる色を指し、Webサイトを特徴づける役割を担います。そして、このプライマリーカラーには影の色となるカラーが必要です。この影の色を3つ以内で選びましょう。また、UIをデザインするために2次色や3、4次色まで必要になる場合があり、これらについても事前の定義が必要とされます。最後に、ブランドの主色をより効果的に見せるために、白、灰色、黒などの中間色を加えましょう。
このように作成したカラーパレットは、活用によって色の選択にかかる時間や労力の削減、また色の微妙なバラつきによる修正作業の回避といった、作業効率の向上にも有効です。デザイナーにとっては強力なツールと言えるでしょう。

口調

ここで言う口調は実際には文字のことを指しますが、これはコピーライティング用語で「トーン＆マナー」もしくは「トンマナ」とも呼ばれています。このトンマナは、どのようなスタンスで文章を書きユーザーに問いかけるのか、ということを定義しています。
例えば、スタイルガイド作成前のブランド調査によって、そのブランドのメインターゲットが流行に敏感な若年層であることがわかったとします。この場合のトンマナは、堅苦しさを抑えて、ユーモアを効かせた口調にすることが適切と予想されます。ところどころで今どきの若者言葉やフランクな言葉を採用するのもアイディアの一つでしょう。
逆に、法人向けのサイトであればターゲットから信頼を得られるよう、重厚感のある言葉を選んだ方が効果が見込めそうです。

アイコン

アイコンは文字よりもはるかに高い伝達能力を発揮します。ユーザーはアイコンを見るだけで、今何が行われているのか、また次に何が起きるのかを瞬時に把握することができます。このように、高い効果が期待できるアイコンですが、そのスタイルガイド作成においてはいくつか注意すべき点があります。
まず、アイコンは一般的に、年齢や性別などの区分を超えて共通認識を得られる便利なツールとされますが、対象となるユーザーによっては勘違いや誤解を招くことがあります。宗教や歴史的背景など、センシティブな事柄については十分な配慮が必要です。
そして、ブランドバリューとアイコンの適合性についても考慮する必要があります。例えば、大手銀行のWebサイトに手書き風のアイコンを使用することは明らかに不適合であり、威厳のあるものに差し替える必要があるでしょう。

画像

画像は何千もの言葉に匹敵すると言われています。スタイルガイドに入れる画像は、ブランドの方向性と照らし合わせた上で、マッチするものを選ぶようにしましょう。
例えば、教育機関のWebサイトであれば、信頼や実績、子どもの将来への希望を印象付けるような画像が適しているでしょう。

UIパーツ

フォームやボタンなどのUIパーツにおいてもスタイルガイドの設定が必要です。
まず、フォームはユーザーとサイト側を結ぶインタラクティブ性の高いパーツです。ユーザーはフォームを介してデータ入力をし、サイト側はそれに対する操作を行います。起動時やホバー時の表示、また、パスワードが弱すぎることやIDが無効なことを伝えるためのエラーや警告、「支払い完了」などの成功……このようなフィードバック要素について、スタイルガイドでは明確な取り決めを行いましょう。
また、ボタンはカラーパレットやフォーム、トンマナを合わせて構成されるツールです。ボタンについては、その機能性を高めるためにこれらの要素についてのスタイルガイドを作成します。デザインには統一感を持たせ、ユーザーに一貫したサイト体験を提供できるように工夫しましょう。