カテゴリー: 実技 ECサイトデザイン実習

実技 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サイトデザイン実習④
課題制作

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

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

【講師用カリキュラム情報】
※このブロックは公開時は非表示になります。削除しないでください。
※講師用の情報（注記）を追記して頂いても大丈夫です。
ストーリー：ワイヤーフレームつくる
内容1：ひたすらワイヤーフレーム①
内容2：ひたすらワイヤーフレーム②
内容3：
課題：ワイヤーフレーム提出

本日のテーマ

早速作ってみましょう。

制作のポイント

情報をしっかりまとめてからレイアウトを考えると良いでしょう。そのレイアウトが、HTMLとCSSというルールに変わるだけです。
まずは、PCサイズとして下記の例のような、コンテンツ部分が960pxでその外側部分を入れて、1280pxでワイヤーフレームを作成してみましょう。

ワンポイントアドバイス

ワイヤーフレームの段階では、お仕事の契約成立に至っていない場合が多いです。逆を言えば、しっかりとしたワイヤーフレームを作成できるという事は、「仕事を獲得できる力がある」という証明にもなります。お客様のご要望（相手の気持ち）をしっかり理解する事を心掛けて制作をしてみましょう。

本日の課題

白黒のワイヤーフレームを作成し5限目までにWordPressにUPしてください。
今日できたところまでで大丈夫です。