デザインラフについて
デザインラフとは、HTMLとCSSでコーディングした時と同じ見た目のものを、コーディング(HTMLとCSS)を知らない人に見せるもの。完成イメージをクライアントと共有して修正、確定してからコーディングの作業に入る。
- 「レイアウト」 「余白」「グループ化」「アクセント」を意識
- 「文字」 「読みやすさ」を徹底的に意識
- 「配色」 「読みやすさ」を維持しつつ「作品の世界観」を守る
コーディングに向けての注意点①
- 画面サイズ 特に理由がなければ1280px960px
- 見出し(h1～h6)をどうするのか
- 段落(p)やリスト(ul li ol li)などの構成
- 画像(img)リンク(a)や強調(strong,em)などの構成
コーディングに向けての注意点②
- どこを画像にするのかテキストにするのか SEO対策imgタグ内のaltタグにきちんと名前を入れる
- 画像文字にするのかテキストにするのか
- 「img」ならHTML「background」ならCSS
- Webサイトはテキストにすれば軽く、画像が多ければ重くなる
オールド 印刷の歴史
バンドル(標準フォント) OSに標準搭載されている
プロポーショナルフォント 同じフォントなのに太さ細さなど見た目が違う
Webフォント あらかじめサーバ上に置かれたフォントやインターネット上で提供されている
コーディングに向けての注意点③
- 配色はデザインラフですべて決定する
- 16進数のカラーとRGB表記かを統一
- 透過表現
クライアントへは複数提案を出して選択肢を用紙する
「配色」には必ず意味と目的がある
配色テクニック①イメージカラーを使う
Webページのイメージを大きく左右するメインカラーは一番初めに決める。
メインカラーの傾向は、文字が読みやすいなどの可読性の問題から、明度を低くした色が使用しやすいとされている。
配色テクニック②真っ黒(#000)を避けるか否か
「真っ黒#000(Black)」は目にきつい、目が疲れるといった理由からグラフィックデザインの世界で使ってはいけない色の常識といわれている。ただし昨今の各デバイスのモニターは、データ（CSSコード）では「真っ黒#000(Black)」でも、実際にモニターで見ているものは、目にやさしくなるように微調整されている場合がある。
配色テクニック③色を使わない
「白」と「黒」という色は「無彩色」と呼ばれています。 「彩りが無い色」、つまり色味を感じない、鮮やかさが無い色になります。 白と黒の中間色となる「灰色」もこれに該当します。 明度(色の明るさ)の話を含めると、「白」が「最も明るい色」、「黒」が「最も暗い色」となります。
配色テクニック④美しい配色バランス(3色がおすすめ)
基本カラー3色を「70%：25%：5%」の比率にして配色すると、バランスの取れた美しい配色になるとされています。
色の黄金比 70(ベースカラー)：25(メインカラー)：5(アクセントカラー)
コーディングに向けての注意点④
- 静止画像なので補足事項は別途説明しておく
- セクショニングは後回しでもいい 箱の中は決めておく
- リテイク(修正、出戻り、やり直し)に強いデータにしておく
ただし、つまらないデザインにならないように注意！
悩んだらデザインの基本から改めて見直していく
Webサイトについて
LPとWebサイトの違いは、単一ページか複数ページの違い。Webページの集合体がWebサイト
Webサイトで必要なもの① サイトマップを考える
Webサイトで必要なもの② グローバルナビを考える
Webサイトで必要なもの③ 新着情報等の日々の情報提供のコンテンツを考える
Webサイトで必要なもの番外編 スマートフォン対策を考える
