デザインラフとは？デザインラフとは？=コーディング（HTMLとCSS）を知らない人に見せるもの
ラフ（rough）＝おおまか（英語）

HTMLとCSSでコーディングした時と同じ見た目のモノを作成する。
デザインラフをクライアント（発注者）さまに見せて、OK　→　コーディング（HTML・CSSにする）
制作の順番はデザインの基本通り
１．最初はしっかりと「レイアウト」を考える
「余白」「グループ化」「アクセント」を意識
2．次に「文字」に注目
「読みやすさ」を徹底的に意識
３．最後に「配色」を見てみましょう。
「読みやすさ」を維持しつつ「作品の世界観」を守れているか
＊レイアウトの目的は情報の明確化
レイアウトの５つの基本原則
・「余白をとる」Margin … 余白をとる
・「揃える」Alignment … 揃える
・「グループ化する」Proximity … グループ化する
・「強弱をつける」Contrast … 強弱をつける
・「繰り返す」Repetition … 繰り返す

コーディングに向けての注意点
① 画面サイズ
② 見出し（ｈ１～ｈ６）
③ 見出し（h1～ｈ６）→段落（ｐ）やリスト（ul li ol li）などの構成
④ 画像（img）リンク（a）や強調（strong,em）などの構成

文字デザイン
視認性　　パッと見た瞬間の認識しやすさ
可読性　　文章が読みやすいか
判読性　　誤読がないか
コーディングに向けての注意点
① どこを画像にするのかテキストにするのか？
② 画像文字にするのかテキストにするのか？
③ HTMLなら「img」CSSなら「background」
④ テキストにすればWebサイトは軽くなり、画像が多ければWebページは重くなる。

フォントは大きく分けて4種類に分類
ゴシック体
明朝体
デザインフォント
毛筆フォント

オールドタイプ　　　　　　　　Webフォントに対応していなければ、画像文字にしなければならない
バンドルフォント　　　　　　　OS標準フォント
プロポーショナルフォント
Webフォント

色の黄金比率 70：25：5
ベースカラー　　　　　　　　主に背景・余白
メインカラー（サブカラー）　サイトのトンマナ
アクセントカラー　　　　　　メリハリ