Webページデザインの理解向上・品質の均一化などを目的としたガイドラインです。
個人での制作と違い、お客様はデザインされたサイトにそれなりの大金を払うことになります。 大金払ってるのにダメなデザインで満足するわけないよねー。ということ。
他社のデザインを調べることで、業界の方向性を理解したり、逆に差別化を考える上での参考にしやすくなります。
グリッドベースのレイアウトは頭を揃えやすく、自然と整ったデザインにしやすい。レスポンシブ化する場合の目安にしやすいメリットもあります。
グリッドやガッター幅など、デザイン時のレギュレーションサイズを決める際の基準を決めておきます。5で割れる値なら考えやすいです。例えばpaddingの幅は15pxにするなど。
デザインとして必要な場合以外は、種類が多すぎるとまとまりがなくなり、コーディング設計も難しくなります。
適度な間隔があることで、文章の視認性が上がり各要素の関連性も認識しやすくなります。
そのサイトのスタイルガイドを決めておくとより効率的。必要なら他者と共有できるようにする。
パーツ・写真や素材・フォントなどには一貫性を持たせること。
IE9以前や旧Androidブラウザなどはプログレッシブ・エンハンスメント対応で可
予めWebサイトのカラースキーム・カラープラン（配色設計）を立てる(hex値（#FFFとか）で決めておくとコーディングも楽)
基本は3色とし、増やしたい場合はベース・メイン・サブ・各3色ずつくらいがオススメ。
基本色がちゃんとできていれば、それだけデザインは成立させやすい。
参考 http://www.sipec-square.net/~mt-home/students/miyazono/project/sakkaku/page01.html
セクションの区切り方や、境界の見せ方。ドロップシャドウなどの濃度やぼけ足の加減でも情報の強調度合いや意味が生まれる。
全体
情報レイアウト
ロゴ
ボタン
アイコン
バナー
テキストリンク
画像リンク
タブ・パンくずリスト
サムネイル
ナビゲーション
ボックスや配置・写真の構図・文字サイズなどの比率は、黄金比・白銀比に近づけるほど好印象なデザインになります。逆にこれから離れるほどデザインに不快感を感じるようになります。
黄金比（近似値 1:1.618）
採用例）ピラミッド・ミロのヴィーナス・パルテノン神殿・アップルやTwitterのロゴ・鉄球の回転。などが有名
白銀比（近似値 1:1.414）
「大和比」とも呼ばれ、日本人になじみやすいそうです。
採用例例）法隆寺の設計・見返り美人図・Googleのロゴ・A4とかB5の縦横比もこれ。ドラえもんも。
Web 用設定で作成する。
PSDのICCプロファイルは、基本sRGB（大半のブラウザはsRGB表示）。
よくわからなければ新規作成時の「Web」プリセット設定を参考にすればよい。
必須ではないが、このへんをちゃんと理解できると理想的。
レイヤー名を設定し、整理するクセを付ける。他者が理解できるデータを作成する。
不要なレイヤーを削除する。未使用・空白・非表示レイヤーがあるとコーダーが混乱する。データを引き継ぐ第三者がわかるようにしておく。
HTMLの要素構造(header・footer・main・aside・section など）に合わせたグループ化が一般的。
作業する案件やサービスのルールに則る。
グループ化されてないとか、「名称未設定」「レイヤー1」のままなど、他の人がみてイラっとするようなのは、当然ダメ×
Photoshop CC 2014以降での画像アセットやクイック書き出しの利用を考慮し、コンポーネント単位でグループ化し、グループ名を書き出しファイル名にしておくと効率的。
参考 https://helpx.adobe.com/jp/photoshop/using/generate-assets-layers.html
参考 https://blogs.adobe.com/creativestation/dtp-photoshop-kihon-tips-04
後々の修正に対応できるよう、ベクターシェイプやスマートオブジェクトなどを優先的に利用する。
Retina・HiDPIの@2x・@3xサイズへ対応のできるよう、リサイズでも劣化しないよう作成するとよい。
Photoshop CC以降のバージョンではスマートオブジェクトのCreative Cloudライブラリ化、ファイルの外部リンクに注意。
他のPCでリンク切れになるので注意する。
12カラムのグリッドレイアウトを推奨。特に Bootstrap などのグリッドベースのフレームワークを使う案件では重要。
Photoshop CCでのガイド自動設定例
テキストサイズは整数で指定する。小数点以下の値では余計なにじみの原因になるため。
テキストを流し込むボックスは、段落テキストボックスで作成する。ブロック要素内の自動改行を再現するのに、ポイントテキストで任意改行を入れたりしない。
Photoshop の場合、テキストレイヤー名を右クリック → [段落テキストに変換]で変換可能
透過になる所にブレンドモードは使用しない。
PNGやブラウザではブレンドモードは再現できない。必要ならコーダーに渡すまえにデザイナー側で透過画像として適宜加工し書き出してしておく。
ベクター素材のピクセルはスナップさせ、1ピクセル未満のにじみを発生させない。
Photoshop [環境設定] ＞ [一般] ＞ [ベクトルツールと変形をピクセルグリッドにスナップ] にチェックを入れる。
Illustrator から持ってきたベクター素材でエッジがぼやける場合は「エッジを整列」にもチェックを入れる。
ロゴ・アイコンなどの単純なプリミティブ図形は、後々の更新も考慮しなるべくベクター素材で作成する。
スライスで別々に切り出す画像は重ねない。
例えばナビの画像の上にヘッダーの装飾が重なってナビのボダンが押せなくなるなどの問題が起きる可能性があるため。
「光彩」や「ドロップシャドウ」などが気づかずに重なってしまっている場合もあるので注意。
模様がリピートする背景画像は、パターン素材を用意しリピート配置できるデザインにする。
パターンなのに大きな1枚画像、とかは×。重くなるとSEOにも影響するし。
以下はオーエス案件での主なコンテナサイズ。
実際は作業する案件や、そのレギュレーションに合わせる。
| PCサイト | レスポンシブサイト（Bootstrap3） | スマートフォンサイト | |
|---|---|---|---|
| 標準 | 960px | 970px（md） | 640px |
| 大 | 1160px | 1170px (lg) | 768px |
ドロップシャドウなどの陰影は、包括光源90度を推奨。とくに光源は全要素で統一するとよいです。
より自然で見やすい角度。iOSヒューマンインターフェイスガイドラインなどでも90度が推奨されてるので、全体の調和が取りやすいです。
画像の再サンプルは「バイキュービック法」。
作業にRetinaディスプレイのMacBook Pro、iMacなど使う場合、画面解像度は「最適(Retina)」で設定する。
システム環境設定 ＞ ディスプレイから（Mac OS X 10.9の場合）
操作によってはキーボドショートカットじゃないほうが早いこともあるので、使いやすさに応じて。
写真のトーンは適切に補正する。撮影したままの写真は原則禁止。
トーンカーブ（自動）をやっておくだけでもいくらかマシになる。彩度・コントラストの調整も必要に応じ明るさなどもやっておくとよい。
シャッターストックもあまり内容的な質は良くないので過信しない。
ファイルサイズと画質に応じた形式を利用する。また、書き出しの際はできるだけ圧縮する。 ページの表示速度や、SEO・LPOにも影響することに留意する。
JPEG
デジカメやスマートフォンで撮影したJPEGやRAWデータにはExif情報が含まれることがある。セキュリティ上の問題もあるので情報は削除する。そのまま使用しない。
お客様からもらった写真などは特に注意。Photoshopの[Web用に保存]で書き出すと消える。Exifの有無はBridge 右側の「メタデータ」パネルで確認できる。
可能ならタスクランナーやJPEG mini などの圧縮ツールの併用を推奨。場合によってはかなり小さくなるのでオススメ。
GIF
GIF （GIF89a）
Animation GIF
PNG
PNG8
PNG8（alpha）
PNG24・PNG32
SVG
対応ブラウザに注意が必要。
IE9~11 ではCSSでのサイズ補正が必要
IE9やAndorid 4.2以下は SVG1.1 規格に対応してないので、別に対策が必要
IE8以下はSVGそのものは非対応。旧ブラウザ向けには代替画像への差し替えなどの対策が必要。
各ブラウザの対応状況の参考 http://caniuse.com/#search=svg
ファイルサイズはパスの形状による。パス形状が複雑になると意外とファイルサイズが大きくなることもあるので注意
WebP
抜き色指定したGIF・PNG8（Alphaなし）は、ジャギになる部分を目立たないようにする。
Photoshopの場合、マットカラーを背景色に合わせると背景となじませやすい。
スプライトシートを使用するとURLリクエストの削減できる。
レスポンシブサイトではかなり難しいので案件に応じて
一つの画像が大きすぎる、または画像の数が多すぎるページ構成は、デバイスによってはで表示しきれないこともあるので注意。
ベースフォントサイズは主に12px~16px。要件やデバイスフォントに応じて検討。rem単位の基準にもなる。
あまり小さいと、高解像度設定のWindowsなどで文字が小さすぎることがある。高齢者にはホント見えないので、年齢層の高いサイトではとくに配慮する。
複数サイズの混在はできるだけしない。
見出しとh1〜h6のサイズも決めておくこと。サイズベースフォントサイズを基準にする。
黄金比を基準に決定するのが一般的。参考：http://liskul.com/cr_goldenratio-3739
よくわからなければPhotoshopのデフォルトテキストサイズ値がそれなので参考にするといい。
デザイン上必要な場合を除き、使用フォントはなるべく日本語と欧文フォントを1種類ずつにする。
文字のカーニングは必ず調整する。
コーディングされた後にCSSで調整できない調整は除く
文章の周囲に適度な余白をつけ文章を読みやすく。行間を揃え、適切に開ける。
行間は0.6em 前後基準に調整するのが見やすい。
日本語文章は「左揃え」が基本。
利用するフォントのライセンスは常に気をつける。フォントごとに確認しその内容を厳守する。
フリーでも利用範囲が制限されている場合もある（エディトリアルOKでもWebは×とか）間違ったまま使うのは法的な問題になりえるので要注意。
文字は読みやすい色にする
真っ黒（#000）や真っ白（#fff）は、背景とのバランスによっては色がきつくみえることがある。(#000)より(#333)、(#fff)より(#ddd)くらいにするなど、背景やデザインに合わせてトーンを調整する。
テキストはベタ打ちのままにはしない。詰め・カーニング・トラッキングは読みやすいように調整する。
DTPほど細かく調整する必要はないが、面倒でもオプティカルカーニングしておくくらいはする。
「中央揃え」は利用場所を考慮する。長い文章はなるべく中央揃えにしない。
Webデザインでは基本的に「右揃え」の文章は使用しない。
コピーライト表記や署名などの一般慣習的な場合に限る。
長いテキストリンクを連続して使用しない。
Phoshotopなどのテキストは等幅がデフォルトになっていることが多いです。文字間・行間は適切に調整しましょう。特にマルチバイト文字は、同じ幅のブロックになるので隙間が広めになることに注意。
ひらがな、カタカナ、句読点、感嘆符などは、とくに広がってへんな感じに見えるので注意。
http://stocker.jp/diary/typographic/
ダウンロード素材や有料のフォントは利用が制限されます。フリーフォントでも、利用が制限されていることがあるので規約はよく読み厳重に注意する。
「明朝体」serif系のフォントにだまされない。一見よく見えるが、ディスプレイによってかすれたり読みにくいことがあるのでベースでは使用しない。
視覚に障害がある人ほど細身の多いフォントは読みづらいので、文字のウェイトに気を配る。
明朝体のようなフォントはロゴ・見出しなどのデザイン性を強調する大きく見せる部分での利用を推奨。
飾り文字・手書き系・絵文字・アイコン・装飾性の高いフォントは読みやすくはないので、ロゴ以外での使用は控える。利用する場合は構成に注意する。
ライセンス的に問題なければサブセットを作るなどの対処方法もある。
Mac OS X / iOS：ヒラギノ
バージョンによる違がある・Mac OS X 10.11 以降は ヒラギノ角ゴシックなど複数追加された
Win,Mac 共通：游ゴシック体（Windows 8.1以上・Mac OS X 10.9以上)
ただしOSごとにCSSで指定するファイル名や搭載しているウェイトの種類に違いがある。
Android: Droid Sans Japanese 、モトヤフォント（4.0以降）など。
Andoridはバージョンやデバイスベンダーによって搭載フォントに違いがある
文章は平易表現を心がける。 くせでスペース変換している人は特に注意。漢字が多いと読みにくくなり、場合によっては意味がかわることもあるので気をつける。
致します。→ いたします。
有り難う御座います。 → ありがとうございます。など。
社名・商品・サービスの名称は公式表記で記載する。厳守。
× Iphone → ○ iPhone
× DreamWeaver → ○ Dreamweaver
× YAHOO → ○ Yahoo! など
公式表記がよくわからないときは、公式サイトのTitleタグやdescriptionなどに記載されてるものが参考になる。
フラットデザイン = 物足りないみたいなことを言われる場合もあるが、そう言われる場合はフラットデザインでなく、単にデザインの仕方がわるい。
Material-designなどのガイドラインは、理由があって策定されているものなので、利用しないにしてもその意図を理解することは上達の近道。
エンドユーザーがスクロールできることに気づかないこともあるので、実機などでも確認する。
参考：http://googlewebmastercentral-ja.blogspot.jp/2014/11/helping-users-find-mobile-friendly-pages.html
古臭くならないように注意する。 とくにHPP案件は古い感じが出やすいので強い意思をもってデザインする。
よくおちいりがち。強い意思をもってデザインする
他のサイトを自分なりに真似る。上手にパクる。
盗作やただのコピーは当然ダメ。そんなヤツは万死。
シャドウ・エンボス・光彩・グラデーションは値を控えめにするほうがキレイ。
Photoshopは、効果がわかるように、デフォルトはわざとらしく強めに設定されているので注意。
単純なライナーグラデーションはダサい。グラデーション形状も工夫する。
パターン画像だらけは印象が悪いだけでなく、レスポンシブ化やRetina対応の弊害になります。逃げちゃダメ。
▼・w・▼