本日の講義内容
LP制作にむけて勉強しよう！
本日のアジェンダ
1限目
学科 ユーザーインターフェイス基礎④
デザインラフについて
2限目
学科 ユーザーインターフェイス基礎④
HTML/CSSをイメージしたレイアウト考案について
3限目
学科 ユーザーインターフェイス基礎④
制作に向けての準備
4限目
学科 ユーザーインターフェイス基礎④
制作に向けての準備
5限目
学科 ユーザーインターフェイス基礎④
制作に向けての準備
本日のテーマ
コーディングの準備をしましょう①
参考資料
ドロップボックス
資料＞【3】Webサイトデザイン＞デザインの考え方の教科書⑦＞「「デザインの考え方」の教科書⑦.pdf」をダウンロードしましょう。
制作のポイントをまとめた資料です。
デザインラフとは？
ラフは、WEBサイトを作る上で、レイアウトなどのイメージを作り、チーム内やクライアントと共有するためのものです。 割と重要なものになります。 いきなりワイヤーフレームを作ったり、デザイン案を作ったりというケースもありますが事前にラフを作っておくことにより、より一層スムーズに制作が進められるようになります。
ワンポイントアドバイス
ワイヤーフレームの次はデザインラフを提出する事がよくある制作の流れです。デザインラフは画像でサイトの仕上がりをお客様に見せる為です。逆を言えば、デザインラフはしっかりと完成形をイメージして制作する必要があります。コーディングというお仕事は、デザインラフ通りに再現する事が求められます。HTML/CSSをしっかりと意識して作成をしましょう。
デザインラフの例
制作のポイント
実務では・・・
デザインラフの制作はお客様と、多くのやり取りが必要になるでしょう。
デザインは必ず複数パターンの提案（最低2パターン）をして、お客様とのイメージの共有を具現化して行けるよう進めましょう。
参考サイト
第4回成績考査(予告)
8月31日の4限目終了までに、WEBページのデザインラフを提出してください。
WEBページの内容は、自由です。
※是非、就職活動に活かせる作品を作成してみてください。
※提出方法はデータ保存したデザインラフのWordpress投稿です。
今後の予定
・8/17（水）：ワイヤーフレーム作成に向けた準備（オンライン）
・8/18（木）：デザインラフ作成に向けた準備（★本日・オンライン）
・8/20（土）：●ポートフォリオ作成実習②
・8/22（月）：●ワイヤーフレーム作成①
・8/23（火）：レイアウトデザイン 練習① （オンライン）
・8/24（水）：レイアウトデザイン 練習② （オンライン）
・8/25（木）：レイアウトデザイン 練習③ （オンライン）
・8/26（金）：●デザインラフ作成①
・8/30（火）：レイアウトデザイン 練習④（オンライン）
・8/31（水）：成績考査 （●デザインラフ作成②）
カテゴリー: 学科 ユーザーインターフェイス基礎
感想
今日は昨日に引き続き、LPの制作に向けてその前段階の必要な知識について勉強しました。今まで、バナーなどを作ってきた際にも重要だったレイアウトや文字の可読性、色調など、よりユーザーが読みやすいサイトを制作できるように考えながら、LPを作っていきたいと思います！
