デザインラフ
ーコーディング（HTMLとCSS）を知らない人に見せるもの
ーHTMLとCSSでコーディングした時と同じ見た目のモノを作成する
ー完成のイメージを画像で作成するのが「デザインラフ」の役割
１．最初はしっかりと「レイアウト」を考える
「余白」「グループ化」「アクセント」を意識
2．次に「文字」に注目
「読みやすさ」を徹底的に意識
３．最後に「配色」を見る
「読みやすさ」を維持しつつ「作品の世界観」を守れているか
コーディングに向けての注意点①
ー 画面サイズについて
基準とされるもPCのモニターサイズの多くは「１３６６ｐｘ」
「９６０ｐｘ～９８０ｐｘ」をコンテンツ幅とすると無難
ー見出し（ｈ１～ｈ６）をどうするのかを意識する
ー見出し（ｈ１～ｈ６）があったら次は段落（ｐ）やリスト（ul li ol li）などの構成
ー画像（img）リンク（a）や強調（strong,em）などの構成
コーディングに向けての注意点②
ーどこを画像にするのかテキストにするのか？
ー画像文字にするのかテキストにするのか？
ーHTMLなら「img」CSSなら「background」
ーテキストにすればWebサイトは軽くなり、画像が多ければWebページは重くなる
フォントについて
ーおすすめフォント
UDデジタル教科書体、Noto Sans、Noto Serif、
配色デザインについて
ー安易な配色はダメ
コーディングに向けての注意点③
ー配色はデザインラフですべて決定する
ー16進数のカラーの表記なのかRGB表記なのかを統一しておく
カラーコードを控えておく
ー透過表現は、RGBAか、PNG画像の利用か決定
「デザインラフ」は必ず２提案以上作るのが制作のポイント
ー複数の提案を「レイアウト」「文字」「配色」を変えて作成
配色テクニック
ーイメージカラーを使う
ー真っ黒（#000）を避ける
ー色を使わない 「白」「黒」「灰」の「無彩色」
ー美しい配色バランス（3色がおすすめ）
コーディングに向けての注意点④
ー静止画像なので、補足事項は別途説明しておく
ー実はセクショニングは後回しでも良い
ーリテイク（修正・出戻り・やり直し）に強いデータにしておく
⋆つまらないデザインにならないように注意
Webサイトについて
LP（ランディングページ） ー 単一ページ ー チラシ
Webサイト ー 複数ページ ー パンフレット
Webサイトで必要なもの
ーサイトマップを考える
「トップページ」「会社概要」「お問合せ」「アクセス」など複数ページでのストーリーを考える
ーグローバルナビを考える
ー新着情報等の日々の情報提供のコンテンツを考える
Webサイトの運営として、ユーザーに対して、常に新しい情報提供をお届けする為のコンテンツ
⋆スマートフォン対策を考える
memo
ーPhotoshop レイヤー名 / header, top, section01～, footer
ーアートボード 幅1280px ガイド幅960px
ーフォントサイズ h1 32px, h2 24px, h3 18px h4 16px（本文）
ーsectionとsectionの余白は100pxくらい
ーファーストビューの写真の高さは500pxほど
夏目先生のおすすめサイト
LPのファーストビューとは
https://x-buzz.co.jp/lp/blog-lp/7460/
LPアーカイブ
https://rdlp.jp/lp-archive/
素材
https://soco-st.com/
https://www.shopify.com/stock-photos/photos/pastel-macaron-pyramid-on-pink
