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

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

-本日のアジェンダ-

1限目
実技 ECサイトデザイン実習⑤
ワイヤーフレーム制作に向けて

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

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

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

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

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

（注記）
・XDの紹介を入れますが、今後のデザインラフ制作でPhotoshopを利用するかXDを利用するかは受講生さんに決めてもらってください。
・2025/5/17に成績考査です。

本日のテーマ

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

ワンポイントアドバイス

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

制作のポイント

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

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

参考サイト

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

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

Web用画像について

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

参考サイト

本日の課題

ワイヤーフレームからデザインラフまでを目標に製作しましょう。
できたところまでのワイヤーフレーム、またはデザインラフをポートフォリオサイトに投稿しましょう。

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

– 本日のアジェンダ –

1限目
実技 ECサイトデザイン実習④
クライアント確認について

2限目
実技 ECサイトデザイン実習④
バナー作成

3限目
実技 ECサイトデザイン実習④
バナー作成

4限目
実技 ECサイトデザイン実習④
バナー作成

5限目
実技 ECサイトデザイン実習④
バナー 講評

【講師用カリキュラム情報】
※このブロックは公開時は非表示になります。削除しないでください。
※講師用の情報（注記）を追記して頂いても大丈夫です。
ストーリー：とにかくバナー
内容1：ひたすらバナー①
内容2：ひたすらバナー②
内容3：
課題：作品バナー(当て込み)

本日のテーマ

馴染んでください

クライアントへの確認方法

デザインした制作物をクライアント（発注者）に確認を入れる場合は、そのまま見せる事が最も解りやすい方法です。バナーを作成したらページにそのまま当て込んで（テストアップ等）確認をとります。

ワンポイントアドバイス

バナーを作成したら、スクリーンショットしたページに当て込んでみましょう。違和感が無かったら成功です。ページに馴染むようにデザインの基本ルール「レイアウト」「文字」「配色」に気を付けて作成してみてください。

本日の課題

バナー作成練習 -あて込み-

ご自身で選んだジャンルのバナーを作成し、ページ画像に当て込んで下さい。
4時限目終了までにご自身のポートフォリオサイトにアップしましょう。
5限目に講評を行います。

※バナーサイズ設定は自由です。
※目標2つ以上で制作しましょう。