弊社で制作するWebサイトの品質を向上させるためにWebデザインのガイドラインを作りました。例外はありますので、案件ごとに適宜調整しております。
前提
- Webサイトの目的を満たすためのデザインである、という意識を持つべき
- 極論として、Webサイトの目的が満たされれば見栄えはどうあってもいい。理想は、目的達成を満たすデザインができた上で、使い勝手も良く見栄えも優れていること
見栄えについて
- 余白・サイズ感・配色のセンスや装飾スキル
- サイトのコンセプトにあったデザインの方向性
- 読みやすさや使い勝手の配慮
上記を意識すること。見栄えの良さを重視して扱いづらいものを作ってはいけないし、扱いやすさを重視して余白やサイズ感が雑であってはいけない。ただし、明確な理由があって、どこかを犠牲にする方法はあり得る。
文言について
- リンクの文言で「Read more」「詳しく見る」はできるだけ控えて、リンク先のコンテンツが分かる文言が理想
- トップページのことを「top」か「home」かで称する時は統一すること
原稿について
- 支給された原稿をそのまま使わないこと
- ナビゲーションやコピー、タイトル周りは特に気をつけて調整すること
- 英数字は全て半角にすること
- 本文中の「」の前にある読点は削除、括弧内の末尾には句点はつけない
- 表記揺れは気づく範囲で調整
- 必要以上に漢字が多い場合は適切に漢字をひらくこと
（注）プレスリリースなど変更できない文章や、直接取引ではない場合は適宜対応すること。
リンクについて
- リンクは全て見た目でリンクと分かるように配慮すること
- 本文中のリンクカラーは本文とは別の色か、できるだけ下線をつけること
- コンテンツの中のリンクはできる限りホバー処理を加えること
- ホバーするとより強調された状態になるのが理想だが、画像であればちょっとだけ透明にする、文字であれば下線が消える、色が変わるなど、フォーカスされていることが分かる状態が望ましい
- ロゴは規定による。規定がない時は半透明処理などしない方がよい
- 訪問済みカラー設定はサイトの特性を見て取り入れること
- ヘッダーやフッターなど配置で分かるナビゲーションは、テキストリンクの下線は必須ではない
- リンク部分はマウスカーソルがポインタ（リンクにホバーした時の標準形状）になること
- ボタンの形や色はできるだけ統一性を持たせること
タイポグラフィについて
- 本文の文字サイズ（A）、大見出しの文字サイズ（B）、小見出しの文字サイズ（C）、補足的な情報のところの文字サイズ（D）があるとする。サイトデザインにより、（A）と（C）とナビゲーション部分が同じ、はありえる。ただし、（A）と（B）が同じ、（A）と（D）が同じは避ける。（B）と（C）が同じもできるだけ避ける
- 本文の行間は170〜200%がベター
- Webフォントを使わないのであれば、font-family: "Helvetica Neue", Arial, sans-serif; あたりで十分
- フォントは多くて2つ、ウェイトでバリエーションを持たせること
- 段落の横幅を広げすぎないこと
色について
- 背景色、本文色、見出し、リンクカラーが必要。見出しとリンクカラーはよほどの理由がない限り一緒にしないこと
- そこからどう派生して使うかはサイト次第（例：グレーを2種、見出しカラーの弱い色も準備するなど）だが、その場その場で色を増やさない
- 理由があって使い勝手が悪くならないのであれば多色利用も可能
余白について
- 見出しと本文の間、セクションとセクションの間、本文と画像の間、コンテンツとフッターの間など、適切な値でルール化しておくこと
スマートフォン対応について
- 横幅375pxでレイアウトが崩れないようデザインすること
- アイコンなどリンク部分は幅44pxを目安にすること
- ランドスケープモードでも閲覧に支障がないようにすること
タブレット対応について
- PC版を縮小して表示させるのか、SP版を広げて表示させるのかは決めておくこと
印刷について
- ブラウザプレビューでの確認を行う。要望があれば印刷して確認すること
- 場合によっては印刷用CSSを加えること
ウィンドウについて
- 縦のコンテンツ幅が狭いページがある場合、サイト内でスクロールバーが出るページや出ないページが混在することがある。サイトのデザインによっては避けたい時があるので、その場合は常にスクロールバーエリアが出るようにしておくこと
- どの状態でも横スクロールバーは表示されないようにすること
フォームについて
- プルダウンやラジオボタンなど、送信ボタン以外はできるだけデフォルトのスタイルを利用することが望ましい
- テキストエリアのpaddingや文字サイズも適切に
