2025年11月

＜本日のテーマ＞コーディングの準備をしましょう。 1限目 実技 ECサイトデザイン実習⑤デザインラフ制作に向けて 2限目 実技 ECサイトデザイン実習⑤XD実践 3限目 実技 ECサイトデザイン実習⑤XD実践 4限目 実技 ECサイトデザイン実習⑤課題制作 5限目 実技 ECサイトデザイン実習⑤課題制作 制作のポイント 実務ではデザインラフの制作はお客様と、多くのやり取りが必要になるでしょう。デザインは必ず複数パターンの提案（最低2パターン）をして、お客様とのイメージの共有を具現化して行けるよう進めましょう。 参考サイト 私がwebサイトのラフデザインを制作する時の流れ Design … ラフ制作の意味や描き方とは。デザイン初心者が知っておき … Webデザイナー(ぼく)によるWeb制作のときに気をつけている … デザインラフが出来たら・・・ コーディングに向けて画像を保存(=準備と整理)しておきましょう。 Web用画像について 「jpg」「gif」「png」「svg」についてまず悩んだら「jpg」、透過表現を必要とするなら「png」、「gif」はアニメーションが必要な時ぐらい、「svg」＝複雑な画像は重たくなるので条件次第で使う。と良いでしょう。 参考サイト Web用の保存形式、きちんと使い分けてますか？ | バンフー … Webで扱える画像について知ろう！基本の4つの画像形式と … Photoshopの「Web用に保存（従来）」の使い方 – カラー … 新人コーダーに知っておいて欲しい命名規則の考え方[画像 … 本日の課題 デザインラフを製作しましょう。できたところまでのデザインラフをポートフォリオサイトに投稿しましょう。 photoshop：制作時間130分

学科 UI/UXデザインツール概論【オンライン】

実技 ECサイトデザイン実習⑤