＜概要＞

⚫︎デザインラフについて
⚫︎HTML/CSSをイメージしたレイアウト考案について
⚫︎制作に向けての準備

＜講義のまとめ、ポイント、感想など＞

★WEBサイト制作の流れ
ヒアリング、ワイヤーフレーム制作
→デザインラフ制作　※本日はココ
→コーディング

※デザインラフとは？
Webサイトの完成見本のことを指す。
コーディング（HTMLとCSS）を知らない人に見せるものと捉えてよし。

作り方としてはワイヤーフレームで作った骨組みに画像やテキストを挿入したり、色やフォントサイズを指定したりして具体的にデザインしていく。
ワイヤーフレーム製作前の手書きスケッチ（ラフ）とは別もので、デザインカンプと呼ばれることもある。

★ワイヤーフレームの次はデザインラフを提出するのがよくある制作の流れ。
サイトの完成イメージを画像でお客様に見せる為であり、ここでOKが出たらコーディングに進む。
コーディングでは「デザインラフ通りに再現すること」が求められる。
HTML/CSSをしっかりと意識して作成することが重要。
つまり、デザインラフはしっかりと完成形をイメージして制作する必要がある。

デザインラフの例）