スタイルガイドとは
スタイルガイドとは、Webサイトの制作担当者が従うべき、デザインや動作などのルールをまとめたマニュアルのことを指します。
もともと新聞や雑誌など媒体向けに誕生したものです。
その「スタイルガイド」のWebサイト版がWebスタイルガイドです。
スタイルガイドをつくるメリット
3つのメリットがあります。
ブランドのイメージ定着
Webサイト内で色やデザインなどの視覚的情報を統一することで、ユーザーにブランドのイメージが定着しやすくなります。
ユーザビリティが向上
Webサイト内に統一感を持たせることで、使いやすさが向上します。
ユーザーが求める情報を探しやすくなり、ユーザビリティも改善されます。
制作の時間が短縮
制作にあたって、コードに関する規定を明記しておけば、チームメンバー同士で仕様を確認する時間を無くす事ができます。制作者が細かい部分で迷う必要がありません。
サイト内で担当者ごとの表記ゆれや、配色・デザインの違いが生まれることも防げるます。HTMLやCSSのコード品質低下も防げるため、手直しが少なく制作時間のロスを減らせます。
スタイルガイドの具体例
「事例としてどんなものがあるか」を見ておくと自分が、作る時の助けになると思います。
英語が苦手な方は、ブラウザーの翻訳機能を使ってみてください。
StarBucks
GitHub
Apple
その他
以下のサイトから様々な企業のスタイルガイドが探せます。
スタイルガイドの作成手順
事前準備とまとめるべき項目に分けました。
事前準備
ブランドコンセプト
最初にすべきことは、Webサイトで伝えたい「商品」や「サービス」は
- 誰のために
- どのような問題を
- どのような手段で
「解決しようとしているのか？」を考えます。
そして、ユーザーに「どんな行動をとってほしい」を考えてます。
その4つを軸に、伝え方をまとめていきます。
ペルソナ作成
ユーザーの属性やニーズから「来てほしいユーザー」ではなく、「実際にWebサイトを訪れるユーザー」に近いペルソナを作成します。
- 性別
- 年齢層
- 興味
- ライフスタイル
- 価値観
スタイルガイド項目
ビジュアル
- カラーパレット
- タイポグラフィ
- 口調
- アイコン
- ボタン
- hover、click、visit
- リンク
- タイトル
- h1,h2,h3…
- リスト
- テーブル
- フォーム
- 禁止事項
UI動作
- hoverアクション
- buttonクリック
- ドロップダウン
- フォーム動作
etc
パーツやページテンプレート
- ヘッダー、フッター、ナビゲーションなど
- 個別ページ、リストページ、404ページなど
テンプレートに使えるサイト
まとめ
必要なルールを頭にインプットする事と実際に有名サイトのスタイルガイドを参考に作成経験を増やす事で、アウトプットがスムーズにできるようになります。
