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

– 本日のアジェンダ –

1限目
学科 ECサイトデザイン基礎①
ECサイトとは?

2限目
学科 ECサイトデザイン基礎①
ECのお仕事とバナー作成について

3限目
学科 ECサイトデザイン基礎①
デザインというお仕事について

4限目
学科 ECサイトデザイン基礎①
デザインというお仕事について

5限目
学科 ECサイトデザイン基礎①
バナー制作に向けての情報収集

本日のテーマ

ECのお仕事を理解しましょう

ECサイト

ECサイトとは、自社の商品やサービスを、インターネット上に置いた独自運営のウェブサイトで販売するサイトのことである。ECとは英語: electronic commerceの略。 複数の企業や個人商店がインターネット上の1か所で出店する形態のウェブサイトは、電子商店街の項目を参照。 ウィキペディア

参考サイト

【資料①】

「デザインの考え方」の教科書⑤.pdf

【動画】「デザインの考え方」の教科書

ワンポイントアドバイス

まずは様々な作品を見て見ましょう。
見て真似をしてまた見るの繰り返しが上達のコツです!

本日のテーマ②

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

【資料②】

「デザインという仕事について」.pdf

【動画】「デザインという仕事について」

デザインとアートの違い・アートとは?(10:01)
https://youtu.be/fVM6lUW_aqE

デザインとは?(11:15)
https://youtu.be/UrYerWDPYls

おまけ デザインはどこまでがパクリか? (12:23)
https://youtu.be/lyO6UmELgkc

デザイナーにとって必要なスキルとは? (8:19)
https://youtu.be/VuKIwjFU5KI

言い換えから考えるアートとデザイン (5:04)
https://youtu.be/bzZ9qUagYjc

アートとデザインとは? (12:54)
https://youtu.be/lMYvDGwzVBM

改めて「デザイン」とは (7:30)
https://youtu.be/RAAFmuN7VBg

「言語化」によって得られる3つのメリット (9:23)
https://youtu.be/BO4jyOcmnHk

デザイン論について (6:47)
https://youtu.be/kT2Jwnvl5Y8

おまけ NFTアートのブロックチェーンとは? (14:21)
https://youtu.be/c5JG_6IkvCY

参考サイト

本日の課題

本日の課題提出はありません。
バナーのオリジナル制作に向けて、
集めた参考サイトや素材のリンクをメモしておきましょう。

学科 ECサイト運用基礎②

-本日のアジェンダ-

1限目
学科 ECサイト運用基礎②
Photoshopの機能について

2限目
学科 ECサイト運用基礎②
Photoshopの機能について

3限目
学科 ECサイト運用基礎②
バナー模写練習

4限目
学科 ECサイト運用基礎②
バナー模写練習

5限目
学科 ECサイト運用基礎②
バナー模写練習

本日のテーマ

まずはバナー「模写」で表現の完全コピーを目指しましょう

覚えておくと良い基本操作

バナー制作で覚えておきたい復習

  • スマートオブジェクト
  • 調整レイヤー
  • トリミング復習
  • レタッチ復習
  • クリッピングマスク
  • レイヤーマスク
  • ベクトルマスク

本日の課題

バナー作成練習 (模写)

ご自身で選んだジャンルのバナー模写を作成し、5時限目終了までにご自身のポートフォリオサイトにアップしてください。
※バナーサイズ設定は自由です。
※目標2つ以上で制作しましょう。
※講評はありません。

学科 ECサイト運用基礎①【オンライン】

-本日のアジェンダ-

1限目
学科 ECサイト運用基礎①
バナーとは?

2限目
学科 ECサイト運用基礎①
レイアウトデザインのポイント

3限目
学科 ECサイト運用基礎①
バナー制作に向けて

4限目
学科 ECサイト運用基礎①
バナー制作に向けての情報収集

5限目
学科 ECサイト運用基礎①
バナー制作に向けての情報収集

本日のテーマ

今後のバナー制作に向けて情報収集をしましょう。
※バナーの作成ソフトはPhotoshopです。

【資料】

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

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

【動画】「デザインの考え方」の教科書

バナー広告とは?

バナー はウェブページ上で他のウェブサイトを紹介する役割をもつ画像のこと。本来、旗印を意味し、ウェブページ上で広告が目立つように使われたことから、この通名で呼ばれ定着した。 主に広告・宣伝用に作られ、ウェブサイトへのハイパーリンク用にも利用される。 ウィキペディア

参考サイト

ワンポイントアドバイス

まずは模写をして徹底的に真似をしましょう。
そのバナーの制作者が意図していていた技術・技能・表現などを真似することによって自分のものにしましょう。またPhotoshopのソフトでどのようにすれば再現できる考えながら作成してみましょう。これまでの「文字の見やすさ」と「レイアウト」「文字」「配色」をしっかりと意識して真似をしてみましょう。

本日の課題

(課題提出はありません)
模写したいバナーを収集をしましょう。
バナー掲載先のページをメモしておいてください。

本日のテーマ②

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

紙のポートフォリオは面接の時に利用しましょう

まずはポートフォリオサイトに日々の学びと多くの作品をまとめておきましょう。
そして、面接が決まったら「紙のポートフォリオ」も用意して企業さんへの手土産として持参しましょう。

【資料】

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

下記のファイルをダウンロードしましょう。
紙のポートフォリオについて.pdf」 

【動画】

おさらい ポートフォリオ・ポートフォリオサイトとは?(11:07)
https://youtu.be/LyZ3pObfsOA

紙ポートフォリオとWebポートフォリオサイトの違い (7:30)
2
https://youtu.be/1Pbw-0-2_OQ

面接のお話 (6:12)
https://youtu.be/uyhcUvp5mRU

紙のポートフォリオ作成のためのコツと抑えるべき基本 (6:40)
https://youtu.be/ZLMAYfizybw

ポートフォリオを作る5つの要素 (10:40)
https://youtu.be/vE7fiugNxnI

ポートフォリオを作る5つの要素~まとめ (8:58)
https://youtu.be/yDKBqf5EMZA

参考サイト

実技 写真合成・補正加工実習②

-本日のアジェンダ-

1限目
実技 写真合成・補正加工実習②
成績考査・提出方法について

2限目
実技 写真合成・補正加工実習②
成績考査

3限目
実技 写真合成・補正加工実習②
成績考査

4限目
実技 写真合成・補正加工実習②
成績考査

5限目
実技 写真合成・補正加工実習②
成績考査

本日のテーマ

成績考査です。

第2回成績考査

WordPressの固定ページに、
イラストロゴ作成実習①からの各作品をまとめて投稿しましょう。
・【ピクトグラム】【ロゴ】【アクセスマップ】【名刺】【DM】の5作品です
・固定ページタイトルは「第2回成績考査」
・初めのブロックに見出しで「氏名」を入れる
・パーマリンク設定「grade-check_20231014」
上記の設定を忘れないようにしましょう。

※ネット上の写真には権利がありますので、あくまでも課題用として取り扱ってください。

WordPressへの成績考査の上げ方

手順は以下の通りです。

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

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

③次のブロックから作品を「画像」にてアップロードして下さい。
・ピクトグラム
・ロゴ
・アクセスマップ
・名刺
・DM

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

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

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