実技 ECサイトデザイン実習⑤　デザインカンプ制作

◆通所訓練（25/12/2）

講師：夏目佳奈先生
カリキュラム資料：なし

1限目
実技 ECサイトデザイン実習⑤
デザインラフ制作に向けて

2限目
実技 ECサイトデザイン実習⑤
XD実践

3限目
実技 ECサイトデザイン実習⑤
XD実践

4限目
実技 ECサイトデザイン実習⑤
課題制作

5限目
実技 ECサイトデザイン実習⑤
課題制作

◆本日のテーマ

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

制作のポイント

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

参考サイト

デザインラフが出来たら・・・

コーディングに向けて画像を保存(=準備と整理)しておきましょう。

Web用画像について

「jpg」「gif」「png」「svg」について
まず悩んだら「jpg」、透過表現を必要とするなら「png」、「gif」はアニメーションが必要な時ぐらい、「svg」＝複雑な画像は重たくなるので条件次第で使う。
と良いでしょう。

参考サイト

本日の課題

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

▼授業終了後

▼自宅修正後

◆本日の気付き・メモ

ワイヤーフレームを基にデザインカンプを作成した。【制作時間：授業中４時間】
該当するＬＰの内容を全て盛り込んで作ったつもりが、デザインカンプを作ってみるとオンラインショップ以外にリンクするページ（商品一覧を見る・アレンジメニューを見る）が必要であると気付き、その文字を追加した。
その結果、余白が少なく余裕がないページになっていると感じ、アートボードサイズを1366×3200から　1366×4000に大きくした。
大きくなったアートボードに各所の余白をバランスよく配置し、テキスト等も修正。商品写真はモックアップや画像修整が間に合わず、福光屋様の画像を使用し加工途中のものを載せている。【制作時間：自宅４時間】
出典：福光屋（https://www.fukumitsuya.co.jp/foods/amazake/）

ワイヤーフレーム（白黒の図形と文字）から全体をイメージする事はまだまだ難しいが、上記のような変更を生じさせることが影響が大きく問題であると気付く事が出来た。

Yuko Sekimoto Portfolio

実技 ECサイトデザイン実習⑤　デザインカンプ制作

◆通所訓練（25/12/2）