-本日のアジェンダ-
1限目
学科 ユーザーインターフェイス基礎③
デザインラフについて
2限目
学科 ユーザーインターフェイス基礎③
HTML/CSSをイメージしたレイアウト考案について
3限目
学科 ユーザーインターフェイス基礎③
制作に向けての準備
4限目
学科 ユーザーインターフェイス基礎③
制作に向けての準備
5限目
学科 ユーザーインターフェイス基礎③
制作に向けての準備
本日のテーマ
コーディングの準備をしましょう
WEBサイト制作の流れ
ヒアリング、ワイヤーフレーム制作
↓↓↓
◆デザインラフ制作◆
↓↓↓
コーディング
デザインラフとは？
Webサイトの完成見本のことを指します。
ワイヤーフレームで作った骨組みに画像やテキストを挿入したり、色やフォントサイズを指定したりして具体的にデザインしていきます。
ワイヤーフレーム製作前の手書きスケッチ(ラフ)とは別もので、デザインカンプと呼ばれることもあります。
ワンポイントアドバイス
ワイヤーフレームの次はデザインラフを提出する事がよくある制作の流れです。サイトの完成イメージを画像でお客様に見せる為です。
ここでOKが出たらコーディングに進みます。
コーディングでは「デザインラフ通りに再現する事」が求められます。
HTML/CSSをしっかりと意識して作成しましょう。
逆を言えば、デザインラフはしっかりと完成形をイメージして制作する必要があります。
【資料】
カリキュラム資料 ダウンロード用サイト
https://cu-doc.deau-ac.com/
下記のファイルをダウンロードしましょう。
「「デザインの考え方」の教科書⑦.pdf」
【動画】
- ワイヤーフレームからデザインラフへ
https://www.youtube.com/watch?v=0KFvEDIFwKQ（8:47） - レイアウトデザインのおさらい・コーディングに向けての注意点①・レイアウト表現
https://www.youtube.com/watch?v=tuD7oUviFyI（6:04） - 文字デザインのおさらい・コーディングに向けての注意点②・フォントの歴史と選び方、考え方
https://www.youtube.com/watch?v=ArsXLwU27F4（10:52） - フォント紹介・主なフォントの特長など・文字の見せ方ワンポイントテクニック
https://www.youtube.com/watch?v=fvnVdQHeMxU（10:49） - 配色デザインのおさらい・コーディングに向けての注意点③
https://www.youtube.com/watch?v=YX-QcY06B30（7:11） - 「配色」には必ず意味と目的を・主な色の特長・配色テクニック①〜④・色の黄金比率
https://www.youtube.com/watch?v=l967xAwMGBQ（10:06） - 配色の種類・配色の印象ワンポイントテクニック・コーディングに向けての注意点④
https://www.youtube.com/watch?v=pNGSmV17zsA（10:14） - 悩んだら…・WEBサイトについて・まとめ
https://www.youtube.com/watch?v=7TXu87JPhcQ（10:33）
本日の課題
課題提出はありません。
今後のデザインラフ制作とコーディングに向けて、レイアウトのブラッシュアップや掲載内容（細かい文言など）を考え、まとめておきましょう。
メモ帳で構いませんので、必要な文言を全て書き起こしたテキストファイルを作成しておくといいでしょう。