こんにちはディーメイクでwebデザイナーをしている鈴木です。
スタイルガイドって知っていますか？
スタイルガイドについては、長くweb制作に関わっている方でも
馴染みのある人とそうじゃない人に分かれるのではないでしょうか。
今回はスタイルガイドの役割や作り方
活用していくための運用方法についてなど書いてみたいと思います。
補足
Webサイトのスタイルガイドを『Webスタイルガイド』と呼んだりしますが
ここではスタイルガイドに統一したいと思います。
目次
1.スタイルガイドってなんだろう
スタイルガイドとはデザインする上でデザインやフォントなど
見た目に特化したルールをまとめたガイドラインのことです。
Webだけでなく、雑誌や新聞などの出版物、ゲームなど様々な分野で使われていて、
それぞれ内容などが微妙に異なっています。
似たようなものに「ブランドガイド」や「コーディングルール」
「パターンライブラリ」「デザインシステム」などがあります。
ここではweb制作を想定して
それぞれ簡単に説明したいと思います。
- スタイルガイド
カラーやフォント、オブジェクトなど見た目のルールに特化したガイド。 - ブランドガイド
スタイルガイドと似ているが、ブランドに関する表現や扱いに重きを置いたガイド。 - コーディングルール
コーダーを対象にコーディングに関するルールをまとめたもの。 - パターンライブラリ
繰り返し使われるデザインやパターンをまとめた一覧。 - デザインシステム
サイトを作るための様々なルールや原則、ツールなどをまとめたもの。
必ずしもそれぞれがを別で用意する必要はなく
プロジェクトに応じて必要な内容をわかりやすく記載すれば良いと思います。
2.スタイルガイドの目的
なんのためにスタイルガイドを作るのでしょう。
デザインルールが統一され、きちんと整理されているサイトは
見た目も綺麗ですし信頼感アップにも繋がります。
そしてユーザーにとって使いやすいサイトになると思います。
またスタイルガイドにルールが明記されていることで迷わず作業できたり
確認の手間が省けるなど作業効率の向上にもなります。
複数のメンバーが関わるプロジェクトや外部の方と制作する時には
ドキュメントとしてのスタイルガイドがあることで
個人に頼ったデザインではなく、ルールに沿って統一感のあるデザインを実現できるようになります。
また、最近ではサイト自体が作って終わりではなく
必要に合わせて項目を追加したり、ページを増減するなど
運用が前提になってきます。
そういう場合にも、きちんとスタイルガイドがあることで
統一感を損なう様なデザインが増えることを防ぐことができます。
3.スタイルガイドには何が書いてあるの
スタイルガイドにはどんなことが書いてあるのでしょうか。
- カラーパレット
- テキストのルール（フォントの種類やサイズなど）
- リンクルール（ボタンやhoverのルール）
- アイコンセット
- 画像ルール
- 余白ルール
- UIコンポーネント
あれば書いた方が良いこと
- 文言の表記ルール（例：お問い合わせ or お問合せ or Contactなど）
- ロゴのルール
- コピー
- 禁止事項
迷った時には「何が書いてあればデザインする上で指針となるか」をベースに
内容を決めていくのが良いと思います。
4.スタイルガイドの作り方
スタイルガイドの作り方にも何種類かあります。
プロジェクトの規模や運用なども考慮して
作り方を考えましょう。
- テンプレートを使って作る
web上に公開されているテンプレートを使って作成します。
様々な形式のテンプレートが公開されているので
自分たちで運用しやすいものを選ぶと良いと思います。 - 独自にスタイルガイドを作る
テンプレートなどを参考に、必要となる項目を独自でまとめます。
プロジェクトやメンバーを鑑みて
自分たちが使いやすいように自由に作れるのが魅力です。 - スタイルガイドジェネレータで作る
cssにコメントして自動でスタイルガイドを作成するツールを使います。
スタイルガイドジェネレーターにもいくつか種類がありますが
導入には知識と準備が必要になります。
サイトが更新されてもスタイルガイドそのままというのは
残念ながらよくある話です。
新要素が増えたり、デザインなどを改修した際には
スタイルガイドも忘れずに更新しましょう。
無理なくスタイルガイドを活用していくために
プロジェクトの規模やメンバーのリテラシーによって
どう作るかを決めていきましょう。
5.スタイルガイドを活用するために
つめ込みすぎない
統一感のあるサイトを意識するあまり
あれもこれも詰め込みすぎると内容が多くなり
結果的に見る人のハードルをあげてしまうこともあります。
必要な内容をしっかり精査することで
少ない内容でもしっかりとルールを伝えられるようになります。
保管場所に気をつける
更新時などに意外と多いのが『スタイルガイドがあることを担当者も知らない』ことです。
せっかく作ったスタイルガイドでも、どこにあるのかわからなければ意味がありません。
みんなが見やすく、わかりやすい場所に保管しましょう。
複数のサイトを運用する場合などは、その都度保管場所を決めず
毎回同じルールで保管する様にすると良いと思います。
管理者を明確にする
サイトの更新でデザインの追加や変更があった場合などに
- 誰に確認すれば良いのか
- 誰が更新するのか
を明確にしておくことでルールが乱れることなく更新していくことができます。
通常はディレクターやメインとなったデザイナーが管理することが多いです。
6.まとめ
冒頭でスタイルガイドについて
馴染みのある方とそうでない方に分かれると書きましたが
長くWeb制作に関わっている方ほどスタイルガイドを苦手とする方も結構いたりします。
『トンマナを合わせる』『同じ目的のモジュールは使い回す』など
経験豊富な方には当たり前の事だったりします。
わざわざドキュメントを読み込まなくても
サイトを見てデザインの意図を汲み取り
統一したデザインで追加更新をすることは可能です。
それでもあえて私がスタイルガイドが必要だと思う理由は
誰でもデザインのルールを理解し、統一感を持ったデザインができることが
重要だと思うからです。
外部でサイトを作った場合など特に
Web担当者がデザインリテラシーのある方とは限りませんし
更新の際に同じ制作会社に依頼を出せるとも限りません。
そんな時にしっかりとスタイルガイドを活用することで
サイトのデザインの崩壊を防ぎ、統一感のあるデザインを保つことができます。
綺麗に統一されたサイトを守るということは
そのサイトの企業イメージを守ることにもつながると思います。
こちらの記事もチェック！
魅力的なフォントを選ぶにはどうしたら良いのかこちらにまとめてあるのでこちらも是非ご覧ください。
配色のポイントについてはこちらをご覧ください。