今回は、WEB制作において、WEBデザイナー、エンジニアにとって、あると便利な「スタイルガイド」についてご紹介していきます。
スタイルガイドを作成するうえで必要な要素を紹介していくので、ぜひ参考にしてみてください。
スタイルガイドとは？
サイトで使用していくデザインルールの集合体です。
デザインルールを先に決めておけば、デザイナーはデザインしやすく、そしてエンジニアもデザインルールに則って制作していくため、サイトデザインに一貫性を保つことができます。
SWAN
スタイルガイドで決めていく最低限必要な要素
- カラー
- フォント（見出し・テキスト・リンク）
- ボタン
- アイコン
- フォーム
カラーの決め方
カラーはベースカラー、メインカラー、アクセントカラーの3パターンは最低でも決めておこう。また、サイトの要素が増えていくと、色を増やしたくなった場合はスタイルガイドに要素を増やしていくといいです。
上記例は、当サイトのカラー設定例。
ベースからは、当サイトの背景色で使用している。メインカラーは、ヘッダー、サイドコンテンツ要素に使われ、アクセントカラーはアイコンの背景色などに使われています。
フォント
フォントの要素では、日本語フォント、英数字フォントの定義。見出しデザイン、ボディテキストのサイズ感、リストの見え方、リンクテキストと言った様々な要素を決めていこう。
ここで、定義するポイントを解説していく。
フォントファミリー
ここでは2種類のフォントの定義をします。日本語フォントと英数字フォントだ。サイトによっては日本語、英数字両方とも同じフォントを使うケースも存在する。
フォントを決める時に気をつける点は、サイトの雰囲気、デザイン、コンセプト、読みやすさに合ったフォントを選ぶこと。
初心者の方は他サイトがどんなフォントを定義しているか調査すると良いです。
見出しデザイン
HTMLタグのh1〜h6までの要素を定義しましょう。決める要素としては、よく使うh1〜h3までの装飾要素、フォントのサイズに気をつけると良いです。あとは見出し毎のフォントの大きさなどにも気をつけるといいです。
ボディテキスト
ボディテキストは実際、文章が並んでくる重要な要素だ。ここでの意識する点は、字詰め(カーニング)、行間を意識することでより人が読みやすい文章となりえます。
リンクテキスト
リンクテキストでの決定項目は、リンクカラー、ホバー時のリンク、アクティブ時のリンク、訪問済みリンクの4要素だ。サイトによってら、訪問済みリンクの定義をしておらずリンクカラーで統一しているサイトも多くあるので好み設定しよう。
補足 グローバルデザインの観点から言うと訪問済みリンクは必ず設定した方がいいが、個人で運営するサイトやブランドサイトの観点からは訪問済みリンクについては設定しなくても良いと感じます。
リスト要素
サンプル通りリストタグのデザイン。ul要素とol要素の装飾、余白などを意識して定義するといいです。
ボタン
テキスト周りがある程度固まったら今度はボタン要素です。
ボタンはフォームと深く関係するため用途にここではしっかり定義付けしましょう。
ボタンのサイズはスマホを必ず意識する
スマホのタップ領域を意識しましょう。
ボタンが小さすぎて、余白を狭めてしまうと誤タップを招き、ユーザーを不快な気持ちにさせ、離脱の恐れにつながる重要な要素です。
ボタン配色決定のコツ
ボタン配色については、基本サイトカラーに準拠しますが、中塗りか、ボーダー,テキストのみを色付けするかといった配色についての決め方のコツを紹介します。
端的に、そのボタンは最終意思決定要素かそうでないかを意識しましょう。
最終意思決定要素とは、例えば会員登録フォームの入力確認を終えた状態の本登録へいくようなボタン。
その他にECサイトなどの商品を購入、決済までされる最後のボタンの事をさしています。
他サイトを分析すると、ユーザーに最終意思決定要素のボタンの配色は中塗りにする傾向があり、より重要な決定事項だと潜在的に伝わりやすくなります。
これは、重要意思決定のボタンか、そうでないかの2パターンは最低でもカラー配色を用意すると良いでしょう。
フォーム
フォーム要素は以下要素を決定していく。
- input type text要素
- select要素
- radioボタン要素
- textarea要素
フォーム要素についてもスマホを意識したタップ領域に関わる横幅、高さを意識したルール付けをしましょう。
また、フォームの入力チェック時のエラーの見せ方についても考慮すると良いでしょう。
アイコン
アイコンについては、サイト内に使用するアイコンをあらかじめ作っておくと良いです。
アイコンの使用用途については、フォームのエラー時に注意喚起として使うアイコン、もしくは、ユーザーの完了動作を促すサクサスメッセージに使うアイコンなど、さまざまな用途で使われているためあらかじめ準備しておいて損はしません。
さて、ある程度の要素は紹介しましたが、やはり結論はひとまず作ってみるが第一です。
作る際の参考はピンタレストやグーグル画像検索などで「style guide」と調べてみるとたくさんの参考になるデザインルールの資料が出ているので、ぜひ参考にしてみてください。
