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

-本日のアジェンダ-

1限目
実技 ECサイトデザイン実習③
成績考査

2限目
実技 ECサイトデザイン実習③
成績考査

3限目
実技 ECサイトデザイン実習③
成績考査

4限目
実技 ECサイトデザイン実習③
成績考査

5限目
実技 ECサイトデザイン実習③
成績考査・提出確認

本日のテーマ

成績考査です

本日の課題

①バナー作成 -バリエーション展開-

バナーのサイズ違いを展開して作成して下さい。
【サイズ展開】
(幅width × 高さheight)
・750px × 290px
・250px × 250px
・320px × 100px
・320px × 50px
・120px × 600px (縦長)
今までに作成したバナーから、別サイズを展開してもOKです。
作成したバナーを4限目終了までにご自身のWordpressに新規固定ページを作成してUPしてください。
5限目に提出チェックを行います。

②WP(ポートフォリオ)サイトチェック

バナー投稿が終わったら、残りの時間でポートフォリオサイトを整理しましょう。

WordPressへの成績考査の上げ方

ご自身のWordPressに成績考査用のバナーを投稿していただきます。
手順は以下の通りです。

①固定ページに新規投稿で作成します。

②タイトル(タイトルを追加の部分)に「第3回成績考査」、次のブロックに見出し(H2)で氏名(漢字フルネーム)を入力して下さい。

③以降のブロックにバナー画像をブロックエディタ「画像」にてアップロードし、キャプション部分にそのバナーサイズを記載して下さい。
キャプションが出ない場合は、その下に通常の文章の投稿でも構いません。
これをサイズ違いバナー、5種分繰り返して下さい。

④投稿設定のパーマリンクのURLスラッグに下記を設定して下さい。
grade-check_20231031」

⑤公開状態をパスワード保護にします。パスワードは「test」と設定して下さい。

⑥公開にして終了です。固定ページ一覧に作成したページが出来ているか確認して下さい。

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

– 本日のアジェンダ –

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

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

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

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

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


本日のテーマ

馴染んでください

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

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

ワンポイントアドバイス

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

本日の課題

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

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

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

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

-本日アジェンダ-

1限目
学科 ECサイトデザイン基礎②
バナーの作成について

2限目
学科 ECサイトデザイン基礎②
はじめての依頼について

3限目
学科 ECサイトデザイン基礎②
提案をすることについて

4限目
学科 ECサイトデザイン基礎②
再現力の重要性について

5限目
学科 ECサイトデザイン基礎②
制作過程について

本日のテーマ

バナーは作る過程も大事です!

ポートフォリオサイトに乗せるバナー等の作品は、ブラッシュアップも含めて掲載しましょう。最初に作成したバナーから、他のデザインを見たり聞いたりして、もっと良い作品にしていく過程も解り易く掲載して「制作過程」を明確にして成長力もアピールしちゃいましょう!!

【資料】

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

下記のファイルをダウンロードしましょう。
「バナーの作成について.pdf」 

【動画】

バナーの作成について (5:10)
https://youtu.be/01358toDKI8

実例①-クライアントの依頼内容- (12:05)
https://youtu.be/gRuYpYSvcOI

実例①-初稿-・クイズ(20:45)
https://youtu.be/fhmG1dYGJYw

実例①-調整依頼- (8:16)
https://youtu.be/1mlIhLExO74

実例①-修正から納品・新規依頼の獲得- (7:28)
https://youtu.be/Z4AWmXTVcxU

実例②-初稿- (7:26)
https://youtu.be/upWQtvpSVuo

実例②-第2提案〜納品-(6:39)
https://youtu.be/tgkGpQJzmO8

実例③-初稿〜納品- (12:39)
https://youtu.be/2SoK1NaDRD8

実例④-初稿- (5:25)
https://youtu.be/XF5Xh_OdS48

実例④-2次提案〜納品- (4:35)
https://youtu.be/35enQRc1vR4

実例⑤-おまけ- (5:04)
https://youtu.be/6UFQSEYaEGc

まとめ (8:39)
https://youtu.be/V–oGIITnzY

参考サイト

本日のテーマ②

ここからは補足資料になります。
情報収集など手を動かしながらの視聴でも構いません。
もしくはお時間のある時にご自身で視聴ください。

プロとして写真利用のルールの理解を高めておきましょう!

Webというお仕事ですから、当然これらのルール(法律)について理解を高めておかなければならないでしょう。
Webの法律は過渡期です!
これから新たな法律が制定される可能性もあるかもしれませんし、逆に法律が追いつかない技術が生み出される可能性もあります。
まずは、現在のルールの理解を高めて良い作品に利用していきましょう。

【資料】

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

下記のファイルをダウンロードしましょう。
写真について.pdf」 

【動画】写真について

1. 写真も著作物・著作権とは (6:19)
https://youtu.be/sKaYvZ8vDWA

2. 著作権侵害になるのはどんな場合? (15:12)
https://youtu.be/H-kxc1IMX28

3. 写真の著作権 どこまで?(4:58)
https://youtu.be/INudd-Wg9Js

4. 写真にある権利 肖像権 (11:30)
https://youtu.be/L6bo80XIeJE

5. 人格権について (5:00)
https://youtu.be/ds3vh7XWA4Q

6. 写真を撮っていけない場所は? (7:24)
https://youtu.be/nt4Ldr-LfpY

7. 画像の個人利用はどこまで? (12:04)
https://youtu.be/IOJ2nKbgL_8

8. 無断転載は著作権の侵害・プライバシー権とは? (5:12)
https://youtu.be/bNjipWHyFqk

9. 写真の投稿で注意すべきことは? (8:24)
https://youtu.be/Kbc7liTm0a4

10.ネット投稿するときの注意点は? (3:18)
https://youtu.be/FTQHKAFyvAo

11. 素材集について (13:10)
https://youtu.be/sLeFl8XZMzI

12. まとめ (6:31)
https://youtu.be/fG6uVeKJ5l0

参考サイト

本日の課題

オンラインは課題無しです。
※不明点等は次の来校日に質問出来るようにまとめておいてください。

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

– 本日のアジェンダ –

1限目
実技 ECサイトデザイン実習①
Photoshopの機能について

2限目
実技 ECサイトデザイン実習①
Photoshopの機能について

3限目
実技 ECサイトデザイン実習①
サムネイル画像 作成

4限目
実技 ECサイトデザイン実習①
サムネイル画像 作成

5限目
実技 ECサイトデザイン実習①
サムネイル画像 作成

本日のテーマ

サムネイル画像 について

サムネイル画像とは?

サムネイル画像は、親指(サム)の爪(ネイル)のように小さい画像という意味で、実際に撮影した画像から解像度を下げたり、圧縮したりするなどの手法で、ファイルサイズを小さくしたデータです。 情報量が少ないので読み込みが早く、一覧表示で多くの画像を素早く見ることができます。

参考サイト

本日の課題

-サムネイル画像 作成練習 –

サムネイル画像作成し、
4限目終了までにご自身のポートフォリオサイトにアップしてください。
5限目に講評を行います。

※目標2つ以上で制作しましょう。