-本日のアジェンダ-
1限目
実技 ECサイトデザイン実習⑤
デザインラフ制作に向けて
2限目
実技 ECサイトデザイン実習⑤
XD実践
3限目
実技 ECサイトデザイン実習⑤
XD実践
4限目
実技 ECサイトデザイン実習⑤
課題制作
5限目
実技 ECサイトデザイン実習⑤
課題制作
【講師用カリキュラム情報】
※このブロックは公開時は非表示になります。削除しないでください。
※講師用の情報(注記)を追記して頂いても大丈夫です。
ストーリー:デザインラフについて
内容1:XDの実践
内容2:ひたすらデザインラフ
内容3:
課題:デザインラフ提出
(注記)
・XDの紹介を入れますが、今後のデザインラフ制作でPhotoshopを利用するかXDを利用するかは受講生さんに決めてもらってください。
・1/7 年明けに成績考査です。
本日のテーマ
コーディングの準備をしましょう。
制作のポイント
実務ではデザインラフの制作はお客様と、多くのやり取りが必要になるでしょう。
デザインは必ず複数パターンの提案(最低2パターン)をして、お客様とのイメージの共有を具現化して行けるよう進めましょう。
参考サイト

デザインラフが出来たら・・・
コーディングに向けて画像を保存(=準備と整理)しておきましょう。
Web用画像について
「jpg」「gif」「png」「svg」について
まず悩んだら「jpg」、透過表現を必要とするなら「png」、「gif」はアニメーションが必要な時ぐらい、「svg」=複雑な画像は重たくなるので条件次第で使う。
と良いでしょう。
参考サイト
- Web用の保存形式、きちんと使い分けてますか? | バンフー …
- Webで扱える画像について知ろう!基本の4つの画像形式と …
- Photoshopの「Web用に保存(従来)」の使い方 – カラー …
- 新人コーダーに知っておいて欲しい命名規則の考え方[画像 …




本日の課題
デザインラフを製作しましょう。
できたところまでのデザインラフをポートフォリオサイトに投稿しましょう。