月: 2024年12月

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

-本日のアジェンダ-

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」＝複雑な画像は重たくなるので条件次第で使う。
と良いでしょう。

参考サイト

本日の課題

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

学科 ECサイトデザイン基礎⑤【オンライン】

-本日のアジェンダ-

1限目
学科 ECサイトデザイン基礎⑤
デザインラフとは？

2限目
学科 ECサイトデザイン基礎⑤
コーディングに向けての注意点

3限目
学科 ECサイトデザイン基礎⑤
XDの活用について

4限目
学科 ECサイトデザイン基礎⑤
課題制作

5限目
学科 ECサイトデザイン基礎⑤
課題制作

【講師用カリキュラム情報】
※このブロックは公開時は非表示になります。削除しないでください。
※講師用の情報（注記）を追記して頂いても大丈夫です。
ストーリー：デザインラフについて
内容1：XDの実践
内容2：デザインラフ制作の準備
内容3：
課題：なし

本日のテーマ

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

WEBサイト制作の流れ

ヒアリング、ワイヤーフレーム制作
↓↓↓
◆デザインラフ制作◆
↓↓↓
コーディング

デザインラフとは？

Webサイトの完成見本のことを指します。
ワイヤーフレームで作った骨組みに画像やテキストを挿入したり、色やフォントサイズを指定したりして具体的にデザインしていきます。

ワイヤーフレーム製作前の手書きスケッチ(ラフ)とは別もので、デザインカンプと呼ばれることもあります。

ワンポイントアドバイス

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

【資料】

カリキュラム資料 ダウンロード用サイト
https://cu-doc.deau-ac.com/

下記のファイルをダウンロードしましょう。
・「デザインの考え方」の教科書⑦.pdf」　
・「AdobeXDの教科書.pdf」　

【動画】　

XD データ連携について

Adobe XD では、Photoshop や Illustrator などの他のアドビアプリケーションからデザイン素材を読み込むことができます。XD では、これらのデザイン素材をさらに拡張することも、これらのデザイン素材を使用してインタラクティブプロトタイプを作成することもできます。

ワンポイントアドバイス

実際のお仕事では、お客様とのやり取りに合わせて連携方法が変わるでしょう。必要に応じて、ai（Illustrator）なのかpsd（Photoshop）がいいのか、XDがいいのか、お客様に合わせて判断していきましょう。

参考サイト

【デザインラフの例①】

【デザインラフの例①】

本日の課題

課題提出はありません。
今後のデザインラフ制作とコーディングに向けて、レイアウトのブラッシュアップや掲載内容（細かい文言など）を考え、まとめておきましょう。
メモ帳で構いませんので、必要な文言を全て書き起こしたテキストファイルを作成しておくといいでしょう。