投稿者: master

学科 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を設定して下さい。

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

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

-本日のアジェンダ-

1限目
実技 写真合成・補正加工実習①
画像解像度とカラーモードについて

2限目
実技 写真合成・補正加工実習①
DM制作

3限目
実技 写真合成・補正加工実習①
DM制作

4限目
実技 写真合成・補正加工実習①
DM制作

5限目
実技 写真合成・補正加工実習①
DM講評

本日のテーマ

DM・ポストカードを作ってみましょう。
定型（郵便)はがきサイズ：100×148mm

DM・ポストカード制作のポイント

可視性と配色を意識してみましょう。

写真に文字を乗せる時はとにかく可視性に気を付けましょう。
配色のバランスや影を付けたり、ぼかしやオーバレイなどの工夫を考え、写真の世界観を壊さないように表現してみましょう。

参考サイト

本日の基本操作

  • 画像解像度
  • モード
  • 配置

画像解像度

ピクセル寸法は、画像の幅と高さのピクセル総数を示します。解像度はビットマップ画像の細かさで、1 インチあたりのピクセル数（ppi）で示されます。1 インチあたりのピクセル数が増加すると、解像度は高くなります。一般的に、画像の解像度が高いほど、プリントした画像の品質が高くなります。

参考サイト

モード

 Adobe Photoshop を使って、1 つのカラーモードから別のカラーモードに変換する（CMYK から RGB、カラーからグレースケールなど）方法を説明します。

参考サイト

配置

Illustratorの画像配置 リンク画像と埋め込み画像の違いと正しい使い方. Illustratorに画像を配置する場合、「リンク配置」と「埋め込み」配置の、二つの方法があります。

参考サイト

デザインの基本　「配色デザイン」

印刷物には「色」を欠かすことができません。白黒の単調なものよりも、いくつかの色を使ったものの方が魅力的ですし、理解を助けてくれることもしばしばあります。ですが、適当に色を選んだり、むやみにたくさんの色を使うことはよくありません。色の正しい使い方を覚えておくと、快適で見やすい発表資料ができます。

参考サイト

本日の課題

DMを作成しご自身のポートフォリオサイトに投稿してください。
5限目に講評を行います。

学科 DTP基礎【オンライン】

-本日のアジェンダ-

1限目
学科 DTP基礎
DTPとは？

2限目
学科 DTP基礎
画像解像度 ベクターデータとビットマップデータ

3限目
学科 DTP基礎
DM制作に向けて

4限目
学科 DTP基礎
作品の立案

5限目
学科 DTP基礎
作品の立案

本日のテーマ

納品する作品の準備③「DTP＝印刷物」です。

【資料】

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

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

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

DM 制作のポイント

可視性と配色を意識してみましょう。

写真に文字を乗せる時はとにかく可視性に気を付けましょう。
配色のバランスや影を付けたり、ぼかしやオーバレイなどの工夫を考え、写真の世界観を壊さないように表現してみましょう。

参考サイト

ベクターデータとビットマップデータ

Adobe Illustratorは、アドビシステムズが販売するベクターイメージ編集ソフトウェアである。
Adobe Photoshopは、アドビシステムズが販売しているビットマップ画像編集アプリケーションソフトウェアである。

ベクターデータとは？

ベクターデータとは、図形やイラストなどのデータを占めるIllustratorが採用しているベクタ形式のことで、画像を点の座標とそれを結ぶ線などの数値データをもとにして再現していることを指します。

参考サイト

ビットマップデータとは？

ビットマップデータ（bitmap date） ビットマップデータとは、Ｐｈｏｔｏｓｈｏｐの画像データ等のことで、ピクセル（点）の集合体として画像データを保持しています。 一般的に写真のような画像データは、ビットマップで構成されていることが多く、拡大や変形をすると画像が荒れてしまう性質があります。

参考サイト

CMYKとRGB

RGBカラーは、光の三原色「R（赤）・G（緑）・B（青）」のことです。
PCのモニターやデジカメ、スキャナなどは、このRGBカラーで色が表現されています。これらは混ぜれば混ぜるほど色が明るくなり、白色に近づいていくため『加法混色』と言われています。

CMYカラーは、色料の三原色「C（シアン）・M（マゼンタ）・Y（イエロー）」のことです。これらは混ぜれば混ぜるほど色が暗くなり、理論上は黒色に近づいていくため『減法混色』と言われています。理論上と書いたのには訳があり、実際にはどんどん濁った灰色になっていくのですが、一般的にイメージする『黒色』にはなってくれません。 プロセスカラー印刷では、黒の部分を引き締めるために、シアン(C)・マゼンタ(M)・イエロー(Y)にブラック(K)のインキを加えた4色（プロセスカラー）でフルカラーを表現しています。

参考サイト

今後の日程

  • 10月13日(金)　DM制作
  • 10月14日(土) 成績考査・・・作品の総まとめをWordpress固定ページにアップ

本日の課題

手書きでいいので、DMのイメージを作りましょう。
方向性をしっかりとイメージし制作を進めていきましょう。

本日のテーマ②

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

デザイン費用について　―とにかく「考える」です！－

ポートフォリオを作成する前にそもそも就活で必要な書類について考えてみましょう。

【資料】

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

下記のファイルをダウンロードしましょう。
「デザイン費用について.pdf」　

【動画】

デザイン費用について (15:49)
https://youtu.be/3Rkl2mylV3E

費用の種類は？ (10:59)
https://youtu.be/ocmOnicB3Ss

おまけのはなし 費用のいろいろ (12:41)
https://youtu.be/4KPSAwhmka0

「デザイン費用」とは？ (16:39)
https://youtu.be/rDjV5F5AwWo

商業デザイナーが「費用」の意味を理解する必要性・
選ばれるデザイナーになるには？ (5:55)
https://youtu.be/8vyhtDDJHBA

例えばこんな依頼があった時に求められる人材とは (19:55)
https://youtu.be/cpbpHrQF4f8

ここからのカリキュラムのポイント『デザインを「考える力」』 (8:52)
https://youtu.be/5cp0-5Yczog

提案をする際のポイント (21:21)
https://youtu.be/nR4odkA2Gnc

参考サイト