学科 ECサイトデザイン基礎⑤　AdobeXDについて

◆オンライン訓練（25/12/1）

講師：夏目佳奈先生
カリキュラム資料：「デザインの考え方」の教科書⑦、AdobeXDの教科書　

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

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

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

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

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

◆本日のテーマ

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

▼WEBサイト制作の流れ

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

▼デザインラフとは？

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

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

ワンポイントアドバイス

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

▼XD データ連携について

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

ワンポイントアドバイス

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

参考サイト

【デザインラフの例①】

【デザインラフの例①】

◆本日の課題

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

◆本日の気付き・メモ

デザインカンプ制作に向けてのポイントを学び、写真や参考サイト等の資料収集を行いました。
AdobeXDという新たなソフトを覚えるの？と何だか憂鬱になってしましました。
どのようなサイトを作るのか？その為に何の素材が必要か？、制作より準備に時間がかかる気がしました。

Yuko Sekimoto Portfolio

学科 ECサイトデザイン基礎⑤　AdobeXDについて

◆オンライン訓練（25/12/1）