Monthly Archives: 9月 2022

学科 ユーザーインターフェイス基礎④

-本日のアジェンダ-

1限目
学科 ユーザーインターフェイス基礎④
デザインラフについて

2限目
学科 ユーザーインターフェイス基礎④
HTML/CSSをイメージしたレイアウト考案について

3限目
学科 ユーザーインターフェイス基礎④
制作に向けての準備

4限目
学科 ユーザーインターフェイス基礎④
制作に向けての準備

5限目
学科 ユーザーインターフェイス基礎④
制作に向けての準備

本日のテーマ

コーディングの準備をしましょう①

参考資料

ドロップボックス
資料>【3】Webサイトデザイン>デザインの考え方の教科書⑦>「「デザインの考え方」の教科書⑦.pdf」をダウンロードしましょう。
制作のポイントをまとめた資料です。

デザインラフとは?

ラフは、WEBサイトを作る上で、レイアウトなどのイメージを作り、チーム内やクライアントと共有するためのものです。 割と重要なものになります。 いきなりワイヤーフレームを作ったり、デザイン案を作ったりというケースもありますが事前にラフを作っておくことにより、より一層スムーズに制作が進められるようになります。

ワンポイントアドバイス

ワイヤーフレームの次はデザインラフを提出する事がよくある制作の流れです。デザインラフは画像でサイトの仕上がりをお客様に見せる為です。逆を言えば、デザインラフはしっかりと完成形をイメージして制作する必要があります。コーディングというお仕事は、デザインラフ通りに再現する事が求められます。HTML/CSSをしっかりと意識して作成をしましょう。

デザインラフの例

制作のポイント

実務では・・・
デザインラフの制作はお客様と、多くのやり取りが必要になるでしょう。
デザインは必ず複数パターンの提案(最低2パターン)をして、お客様とのイメージの共有を具現化して行けるよう進めましょう。

参考サイト

第4回成績考査(予告)

9月27日の4限目終了までに、WEBページのデザインラフを提出してください。
WEBページの内容は、自由です。
※是非、就職活動に活かせる作品を作成してみてください。
※提出方法はデータ保存したデザインラフのWordpress投稿です。

今後の予定

・9/13(火):レイアウトデザイン 練習①
・9/19(月):●レイアウトデザイン 練習②
・9/20(火):デザインラフ作成に向けた準備(本日・オンライン)

・9/21(水):レイアウトデザイン 練習③ (オンライン)
・9/22(木):●デザインラフ作成①
・9/23(金):レイアウトデザイン 練習⑤(オンライン)
・9/26(月):レイアウトデザイン 練習⑥(オンライン)
・9/27(火):成績考査 (●デザインラフ作成②)

学科 レイアウトデザイン基礎②

-本日のアジェンダ-

1限目
学科 レイアウトデザイン基礎②
レイアウトデザイン 練習

2限目
学科 レイアウトデザイン基礎②
レイアウトデザイン 練習

3限目
学科 レイアウトデザイン基礎②
課題制作

4限目
学科 レイアウトデザイン基礎②
課題制作

5限目
学科 レイアウトデザイン基礎②
課題制作

本日のテーマ

コーディングを意識したレイアウトの練習です

練習問題

ドロップボックス
資料>【4】コーディング>レイアウトデザイン 練習問題>「レイアウトデザイン 練習問題①」をダウンロードしましょう。
まずはHTMLのマークアップ練習です。

第4回成績考査(予告)

9月27日の4限目終了までに、WEBページのデザインラフを提出してください。
WEBページの内容は、自由です。
※是非、就職活動に活かせる作品を作成してみてください。
※提出方法はデータ保存したデザインラフのWordpress投稿です。

今後の予定

・9/13(火):レイアウトデザイン 練習①
・9/19(月):●レイアウトデザイン 練習②(本日)

・9/20(火):デザインラフ作成に向けた準備(オンライン)
・9/21(水):レイアウトデザイン 練習③ (オンライン)
・9/22(木):●デザインラフ作成①
・9/23(金):レイアウトデザイン 練習⑤(オンライン)
・9/26(月):レイアウトデザイン 練習⑥(オンライン)
・9/27(火):成績考査 (●デザインラフ作成②)