デザインの教科書⑦参照
デザインラフとは？
コーディングを知らない人に見せるもの。コーデングはデザインラフの見た目をそのまま形にする。
制作の順番はレイアウト→文字→配色
コーディングに向けてレイアウトの注意点
①画面サイズをどうするか（基本は1280×9６0〜9８0PX）
②見出しはどうするか（h１〜h６）
③見出しの後の段落やリストはどうするか
④画像、リンク、強調などの構成はどうするか
①〜④の順番で考えるのが鉄則！
文字の注意点
①どこを画像にしてテキストにするのか
②画像文字にするか、テキストにするか
③HTML→img、CSS→background
④テキストにすればWEBサイトは軽い、画像が多ければWEBページは重くなる
カラーの注意点
①配色はデザインラフで全て決定する
②１６進数のカラーかRGBのカラーなのか統一する
③透過表現はRGBAかPNGの画像利用か決める
透過CSSでRGBAという記載方法が変わる
クライアントには２提案以上の複数提案をし選択肢を用意する（レイアウト・配色・文字を変えるだけで良い）
配色には意味と目的がある。テクニックをうまく使おう！
①ロゴなどのイメージカラーを使う
②真っ黒を避ける（目が疲れるなどの理由あら避けられている）
③白・黒・灰色などの無彩色を用いて、色をあえて使わない
この3色は脇役となってくれ、バランスがうまく保てる
④70/25/５%の美しい配色バランスを理解する
→黄金比と呼ばれ、ベースカラー（70%）、メインカラー（２５%）アクセントカラー（5％）になる
4色になってもOK
その他コーディングをする上での注意点
①静止画像なので補足事項は別途説明を入れる
②セクションニング（タグ）は後回しでも良い
③リテイクに強いデータにする（修正、出戻り、やり直しに強いもの）
→スマートオブジェクト化や非破壊データの使用、アウトライン化のタイミングなどしっかり復習しておく
④つまらないデザインにならないようにする
→悩んだら、レイアウト・文字・カラーの順で見直しする
⑤ファイル名は日付、何を作ったか、何個目かを書く
・SVGとは？→ベクターデータにしたもの
WEBサイトについて
LP→１枚もの、WEB→パンフレットのような複数もののイメージ
コーダーになりたいなら必要なもの
①サイトマップを考える（ページ数により金額が変わる）
②グローバルなびを考える
③新着情報、日々のコンテンツを考える
→wordプレスを使ってやるのが通常
毎日新しいことやっているよと伝える
コメント