2020年6月8日（月）

開講式・オリエンテーション

-本日のアジェンダ-

1限目
開講式・オリエンテーション

2限目
開講式・オリエンテーション

2020年7月14日（火）

学科　就職支援

-本日アジェンダ-

1限目
学科就職支援
通学時の留意点

2限目
学科就職支援
作業環境について

3限目
学科就職支援
自己紹介とプレゼン

4限目
学科就職支援
他己紹介をしてみましょう

本日のポイント

学校の作業環境に慣れましょう

指定したアプリでファイルを開く方法

様々なソフトを円滑に使用できるようにする方法として、
「常にこのアプリを使って○○○を開く」を上手に使っていきましょう。

「該当ファイルを右クリック」⇒「プログラムから開く」⇒「別のプログラムを選択」⇒ 「常にこのアプリを使って○○○を開くにチェック」⇒該当するアプリを選択してOKを押す。
※該当するアプリが無い場合は「その他アプリ」「このPCで別のアプリを探す」

参考サイト

Windows10の拡張子の出し方

これから様々なファイルを編集していきます。
PCの設定を変更して「拡張子」を表示していきましょう。

「フォルダを開く」⇒「タブの表示」⇒「ファイル名拡張子にチェック」

参考サイト

2020年7月15日（水）

学科 WEBプログラミング基礎①

-本日アジェンダ-

1限目
学科 WEBプログラミング基礎①
就職時の自己プレゼンについて

2限目
学科 WEBプログラミング基礎①

他己紹介(準備)

3限目
学科 WEBプログラミング基礎①
他己紹介(準備)

4限目
学科 WEBプログラミング基礎①
他己紹介(発表)

5限目
学科 WEBプログラミング基礎①
他己紹介 (発表)

本日のポイント

プレゼンをしてみましょう！

2020年7月16日（木）

学科 WEBプログラミング基礎 ②

-本日のアジェンダ-

1限目
学科 WEBプログラミング基礎②
Webとは

2限目
学科 WEBプログラミング基礎②
Webとは

3限目
学科 WEBプログラミング基礎②
企画を考えてみましょう。

4限目
学科 WEBプログラミング基礎②
企画を考えてみましょう。

5限目
学科 WEBプログラミング基礎②
企画を考えてみましょう。

本日のポイント

Webについて理解を深めましょう。

WEBサイト制作の進め方として、まずはリサーチが大切です。
本日は、様々なサイトを見る事から始めてみましょう。

検索テクニックの小ネタとして

【Google検索方法のコツ】情報収集スキルを磨く完全ガイド36手法！ – Web …

WEBサイトの参考サイト集

2020年7月17日（金）

学科 WEBコンサルティング基礎 ①

-本日アジェンダ-

1限目
学科 WEBコンサルティング基礎①
WEBサイト制作全体の流れ

2限目
学科 WEBコンサルティング基礎①
コンサルティング（提案）について

3限目
学科 WEBコンサルティング基礎①
初回提案に向けた準備

4限目
学科 WEBコンサルティング基礎①
企画をかんがえてみましょう。

5限目
学科 WEBコンサルティング基礎①
企画をかんがえてみましょう。

本日のテーマ

Webサイトを提案してみましょう

WEB業界のお仕事

Web業界の仕事種類まとめ！これからWeb関係の仕事をしたい人のために

WEBサイトの参考サイト集

WEBサイトを誰に見せるのか(ペルソナ)

ペルソナとは、サイトを使う（サイトに掲載されている製品を使う）ターゲットユーザーと、使って欲しいターゲットユーザーを明確にするための架空の人物像を指します。架空といっても実際に存在するかのように詳細なプロフィールを創り上げることで、ユーザーがどういう行動をするかを性格などを加味しつつ予測でき、活きたデータとして利用できます。

2020年7月18日（土）

学科 WEBコンサルティング基礎 ②

-本日アジェンダ-

1限目
学科 WEBコンサルティング基礎②
企画発表

2限目
学科 WEBコンサルティング基礎②
企画発表

3限目
学科 WEBコンサルティング基礎②
企画発表

4限目
学科 WEBコンサルティング基礎②
企画発表

5限目
学科 WEBコンサルティング基礎②
企画発表

本日のテーマ

企画の発表大会です

2020年7月20日（月）

学科グラフィックデザイン基礎①

-本日アジェンダ-

1限目
学科グラフィックデザイン基礎①
ファイルの作成方法について

2限目
学科グラフィックデザイン基礎①
図形の書き方と移動

3限目
学科グラフィックデザイン基礎①
様々な図形の書き方

4限目
学科グラフィックデザイン基礎①
描いてみましょう

5限目
学科グラフィックデザイン基礎①
描いてみましょう

本日テーマ

まずは使ってみましょう。

本日のIllustratorの基本操作として

新規作成・開く
保存(ai)・別名で保存（pdf）
アートボード
選択ツール
長方形ツール
楕円形ツール
多角形ツール
スターツール
パスファインダー（合体・型抜き・交差）
プロパティパネル

2020年7月21日（火）

学科グラフィックデザイン基礎②

-本日のアジェンダ-

1限目
学科グラフィックデザイン基礎②
画像について

2限目
学科グラフィックデザイン基礎②
画像の加工方法について

3限目
学科グラフィックデザイン基礎②
画像の加工方法について

4限目
学科グラフィックデザイン基礎②
合成写真を作ってみましょう

5限目
学科グラフィックデザイン基礎②
合成写真を作ってみましょう

本日のテーマ

『トリミング』をして合成写真を作りましょう。

トリミングとは、暗室やコンピュータ上での写真の画像処理において、画面の一部だけを切り出す加工を指す。
フリー百科事典『ウィキペディア（Wikipedia）』

■写真加工のおススメルール

手戻りに強い編集をしよう（非破壊編集）

「ファイルから開く（加工したい写真を取り込む）」⇒
「レイヤーパネルで複製」⇒
「右クリックでスマートオブジェクトに変換」⇒
「背景のレイヤーを非表示」⇒
「保存」

■写真素材（練習用）

■無料写真素材のサイト

■PHOTOSHOP　操作のキーワード

新規作成・開く
保存（psd）・Web用に保存（jpg）
移動ツール
クイック選択ツール
レイヤーパネル
スマートオブジェクトに変換
レイヤーマスク
ブラシツール
自由変形（Ctrl+T）

2020年7月22日（水）

学科グラフィックデザイン基礎③

本日のアジェンダ

1限目
学科グラフィックデザイン基礎③
ダイレクト選択ツールについて

2限目
学科グラフィックデザイン基礎③
シェイプ形成ツールについて

3限目
学科グラフィックデザイン基礎③
レイヤーパネルについて

4限目
学科グラフィックデザイン基礎③
簡単なイラストを描いてみましょう。

5限目
学科グラフィックデザイン基礎③
簡単なイラストを描いてみましょう。

本日のテーマ

簡単なイラストを描いてみましょう

本日のキーワード

選択ツール
ダイレクト選択ツール（パス・アンカーポイント・ハンドル）
図形ツール
パスファインダー（合体・型抜き・交差）
シェイプ形成ツール
レイヤーパネル
リフレクトツール
回転ツール
アンカーポイント切り替えツール
ハサミツール
変形の繰り返し「Ctrl+D」
曲線ツール

参考サイト

2020年7月23日（木）

学科グラフィックデザイン基礎④

本日のアジェンダ

1限目
学科グラフィックデザイン基礎④
「トリミング」の復習

2限目
学科グラフィックデザイン基礎④
ラスタライズについて

3限目
学科グラフィックデザイン基礎④
「レタッチ」でつかうツール

4限目
学科グラフィックデザイン基礎④
作品制作

5限目
学科グラフィックデザイン基礎④
作品制作

本日のテーマ

本日は「レタッチ」します。

■ 本日のキーワード

レタッチとは、フォトレタッチとも呼ばれ写真や画像データの編集を意味します。PCが普及してからは、レタッチソフトを使用して、修正・補正・加工・合成などの編集作業を行うことを指すようになっています
レタッチとは｜ CREATURE INC. BLOG

スマートオブジェクト ⇔ レイヤーのラスタライズ

■ 本日のキーワード（レタッチ）

スポット修復ブラシツール
修復ブラシツール
コピースタンプツール
コンテンツに応じた移動ツール
パッチツール

ぼかしツール
シャープツール
覆い焼きツール
焼き込みツール
指先ツール

□ 写真素材（練習用）

2020年7月24日（金）

学科グラフィックデザイン基礎⑤

-本日のアジェンダ-

1限目
学科グラフィックデザイン基礎 ⑤
前回の復習、およびシェイプ形成ツール

2限目
学科グラフィックデザイン基礎 ⑤
スポイトツール

3限目
学科グラフィックデザイン基礎 ⑤
トレースについて

4限目
学科グラフィックデザイン基礎 ⑤
作品制作

5限目
学科グラフィックデザイン基礎 ⑤
作品制作

本日のテーマ

本日は「トレース」です。

本日のキーワード

新規作成
保存
複製で保存　>ファイルの種類：PDF >　最小ファイルサイズで保存
アートボード
配置（テンプレートにチェック）

図形ツール（長方形ツール・楕円形ツール・多角形ツール・スターツール・直線ツール）
プロパティパネル > 塗り・線
右クリック>重ね順
レイヤーパネル
パスファインダー（合体・前面オブジェクトで型抜き・交差…等）
選択ツール　※黒矢印
ダイレクト選択ツール　※白矢印（アンカーポイント・パス・ハンドル）
アンカーポイントツール
曲線ツール
ペンツール
ハサミツール
リフレクトツール
回転ツール＋変形の繰り返し「Ctrl+D」
右クリック>連結
シェイプ形成ツール【New】

スポイトツール

llustratorとPhotoshopにはカーソルを合わせた部分の色情報を抽出する. 「スポイトツール」という便利機能があります。

参考サイト

2020年7月27日（月）

学科グラフィックデザイン基礎⑥

-本日アジェンダ-

1限目
学科グラフィックデザイン基礎⑥
選択ツールについて

2限目
学科グラフィックデザイン基礎⑥
クリッピングマスクとレイヤー管理

3限目
学科グラフィックデザイン基礎⑥
色調補正について

4限目
学科グラフィックデザイン基礎⑥
作品制作（精度の高い合成写真を作ってみましょう）

5限目
学科グラフィックデザイン基礎⑥
作品制作（精度の高い合成写真を作ってみましょう）

本日のテーマ

本日は色調補正です。

■ 本日のキーワード（範囲選択）

自動選択ツール（境界値と隣接）
クイック選択ツール
選択とマスク

□ 参考サイト

□写真素材（練習用）

■ 本日のキーワード（色調補正）

※注意：非破壊編集を行いましょう！

非破壊編集とは、元の画像データの上書きをせずに画像を変更できるということです。元の画像はそのまま保存されているので、必要に応じて復元することができます。画像からデータが削除されないので、編集を行っても画質は低下しません。

調整レイヤー
属性パネル
色調補正
クリッピングマスク

クリッピングマスクについて

　「レイヤーパネル」で右クリック→「クリッピングマスク」
　「クリッピングマスク」で真下のレイヤーの画像にだけ
　色調補正をかける事ができます。

よくつかう調整レイヤー

レベル補正
トーンカーブ
明るさ・コントラスト

色相・彩度
カラーバランス
白黒

□ 参考サイト

□写真素材（練習用）

2020年7月28日（火）

学科グラフィックデザイン基礎⑦

-本日のアジェンダ-

1限目
学科グラフィックデザイン基礎⑦
これまでの復習

2限目
学科グラフィックデザイン基礎⑦
フォント選びをしてみよう

3限目
学科グラフィックデザイン基礎⑦
Adobe Fonts について

4限目
学科グラフィックデザイン基礎⑦
作品に文字をのせてみよう

5限目
学科グラフィックデザイン基礎⑦
作品に文字をのせてみよう

本日のテーマ

文字（フォント）について学ぼう

Illustrator操作のキーワード

新規作成
保存
複製で保存　>ファイルの種類：PDF >　最小ファイルサイズで保存
アートボード
配置（テンプレートのチェック有無）

図形ツール（長方形ツール・楕円形ツール・多角形ツール・スターツール・直線ツール）
プロパティパネル > 塗り・線
右クリック>重ね順
パスファインダー（合体・前面オブジェクトで型抜き・交差…等）
選択ツール　※黒矢印です
ダイレクト選択ツール　※白矢印です（アンカーポイント・パス・ハンドル）
アンカーポイントツール
曲線ツール
ペンツール
ハサミツール
リフレクトツール
回転ツール＋変形の繰り返し「Ctrl+D」
右クリック>連結
シェイプ形成ツール【New】

グループ化・解除
レイヤーパネル
レイヤーの新規作成・追加・削除、重ね順の変更
レイヤーの名称変更　※レイヤー名称ダブルクリックです
レイヤーオプション【New】　※サムネイルダブルクリックです

文字ツール【New】
文字パネル
書式のアウトライン

フォントについて

参考サイト

Typekit（ Adobe Fonts ）

Adobe Creative Cloudユーザーが利用できるサービスの一つです。
Webフォントとしてはもちろん、PC上のデスクトップフォントとしても使用可能です。（Photoshopやllustratorはもちろん、Microsoft OfficeなどAdobe以外のソフトにも対応しています。）

参考サイト

2020年7月29日（水）

学科グラフィックデザイン基礎⑧

-本日のアジェンダ-

1限目
学科グラフィックデザイン基礎⑧
選択範囲の取り方

2限目
学科グラフィックデザイン基礎⑧
選択範囲とクリッピングマスク

3限目
学科グラフィックデザイン基礎⑧
選択範囲

4限目
学科グラフィックデザイン基礎⑧
合成写真を作りましょう

5限目
学科グラフィックデザイン基礎⑧
合成写真を作りましょう

本日のテーマ

より精度の高い合成をしましょう。

本日のキーワード（範囲選択）

クイック選択ツール
自動選択ツール（境界値と隣接）
選択とマスク
長方形選択ツール
楕円形選択ツール
クイックマスクモード

参考サイト

非破壊データについて

調整レイヤー
属性パネル
色調補正
クリッピングマスク

クリッピングマスクについて

　　「レイヤーパネル」で右クリック→「クリッピングマスク」
　　「クリッピングマスク」で真下のレイヤーの画像にだけ
　　　色調補正をかける事ができます。

よくつかう調整レイヤー

レベル補正
トーンカーブ
明るさ・コントラスト

色相・彩度
カラーバランス
白黒

参考サイト

2020年7月30日（木）

学科グラフィックデザイン基礎⑨

-本日のアジェンダ-

1限目
学科グラフィックデザイン基礎⑨
パペットワープについて

2限目
学科グラフィックデザイン基礎⑨
線パネルと線幅ツール

3限目
学科グラフィックデザイン基礎⑨
オリジナルキャラクターを作りましょう

4限目
学科グラフィックデザイン基礎⑨
オリジナルキャラクターを作りましょう

5限目
学科グラフィックデザイン基礎⑨
バリエーションを作りましょう

本日のテーマ

オリジナルイラストを描いてみましょう

本日のキーワード

配置（テンプレート）
プロパティパネル

オブジェクトの塗りと線（オープンパス・クローズドパス）
図形ツール
選択ツール
ダイレクト選択ツール
ペンツール
ハサミツール
連結
アンカーポイントの切り替え・追加・削除
スポイトツール
カラーパネル
カラーピッカー

レイヤーのロック
新規レイヤーの作成
オブジェクトのグループ化・編集・解除

文字ツール
文字パネル

パペットワープ
線幅ツール

パペットワープ

パペットワープの機能はPhotoshopやAfterEffectsではおなじみの機能となりますが、ついにIllustratorにも搭載されました。もともとパペットとは「人形」の意味で、ワープは「歪み」となり、主に人や動物など、関節の可動を再現する変形に使用すると便利なツールになります。何かの軸を起点に歪みや回転を適用させる変形に非常に便利ですので、その使い方をご紹介します。

参考サイト

線幅ツール

Illustrator CS5から追加された便利機能「線幅ツール」はペンツールや鉛筆ツールなどを使って描いたパスの線幅を自由に変えることができます。線に簡単に強弱がつけられるので、イラストに表情を持たせたり、ロゴに動きを出すのも容易です。

参考サイト

本日の課題

オリジナルキャラクターを作成し喜怒哀楽を表現してください。

参考サイト

2020年7月31日（金）

学科グラフィックデザイン基礎⑩

-本日のアジェンダ-

1限目
学科グラフィックデザイン基礎⑩
キャラクター発表

2限目
学科グラフィックデザイン基礎⑩
キャラクター発表

3限目
学科グラフィックデザイン基礎⑩
作業環境を綺麗にしましょう（DropBox・デスクトップ・USBメモリ）

4限目
学科グラフィックデザイン基礎⑩
配置、リンクと埋込、リンクパネル

5限目
学科グラフィックデザイン基礎⑩
文字表現の工夫について

本日のテーマ

Illustratorに画像を配置しましょう

本日のキーワード

配置（リンク）
リンクパネル
プロパティパネル

オブジェクトの塗りと線（オープンパス・クローズドパス）
図形ツール
選択ツール
ダイレクト選択ツール
ペンツール
ハサミツール
連結
アンカーポイントの切り替え・追加・削除
スポイトツール

レイヤーのロック
新規レイヤーの作成
オブジェクトのグループ化・編集・解除

文字ツール
文字パネル
書式のアウトライン

リンクと埋込

参考サイト

Webデザインで「ふきだし」使ってますか？使用例ときれいに見せる4つのポイント

文字のアウトライン

2020年8月3日（月）

学科グラフィックデザイン基礎⑪

本日のアジェンダ

1限目
学科グラフィックデザイン基礎⑪
ベクターデータとビットマップデータ

2限目
学科グラフィックデザイン基礎⑪
Photoshopのスマートオブジェクト・ピクセル・シェイプレイヤー

3限目
学科グラフィックデザイン基礎⑪
3種類のマスク

4限目
学科グラフィックデザイン基礎⑪
作品制作（写真とイラストを合わせてみましょう）

5限目
学科グラフィックデザイン基礎⑪
作品制作（写真とイラストを合わせてみましょう）

本日のテーマ

本日はIllustratorとPhotoshopの両方です。

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

すべての画像は①ビットマップ画像（ラスター画像）と②ベクトル画像（ベクター画像）のどちらかに分類されます。写真もイラストも図形もこの２つのどちらかに分けられるのです。

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

「ビットマップデータ（Bitmap Data）」というのは、Photoshopの画像データやデジカメで撮影した写真のことで、画像を色のついた点（ドット）の羅列・集合として表現したデータのことです。分かりやすく説明すると、ビットマップデータで表現された写真を拡大すると、細かな格子状のマス目が見えますが、ビットマップデータはこのマス目のひとつひとつに色がついたものが集まって写真を作り上げています。
ちなみに、このマス目のひとつが「ピクセル」と呼ばれる最小単位で、ピクセル数が大きければ大きいほど美しい画像に仕上がります。ビットマップデータは別名で「ラスター形式」と呼ばれることもあります。
フォーマットでは、jpg(またはjpeg)・gif ・ png などがこれに当たります。

ベクターデータとは？

「ベクターデータ（Vector Data）」というのは、ビットマップデータのように画像を点の集合で表現するのではなく、点、線、多角形などの情報を使った複雑な計算式によって色や曲線などを表現したデータのことです。簡単に言えば、「数値を使って絵を描く」というイメージです。ベクターデータは別名で「ドロー形式」と呼ばれることもあります。
フォーマットは、pdfなどがこれに当たります。

ビットマップとは？ベクターとは？画像形式の意味と違いを図解

■PHOTOSHOPのシェイプとは？ピクセルとは？

【Photoshop】シェイプとは？ピクセルとは？パスとの違いは？

シェイプは点や線(パス)を組み合わせて作られた形で、イラストレーターでいうオブジェクトになります。シェイプはベクトル画像なので、拡大・縮小・色の変更をしても画質が劣化することなく使用することができます。

■PHOTOSHOPマスクについて

Photoshopのマスクのかけ方は、大きく分けて、『クリッピングマスク』、『レイヤーマスク』、『ベクトルマスク』の3種類があります。
それと選択ツールの調整で使うクイックマスクモードがあります。

■PHOTOSHOPベクトルマスク

ベクトルマスクとは、その名のとおりベクトル画像のマスクを言います。レイヤーマスクがペイントツールなどを使うのに対し、ベクトルマスクはペンツール、シェイプツールを使用して作成します。マスクで塗りを適用した部分だけに画像を表示するという機能です。
https://ferret-plus.com/3466

■PHOTOSHOPパスパネル

パスパネル. ペンツールやシェイプツールで作成したパス一覧を表示してくれます。パスで画像をくりぬく”クリッピングマスク”の設定もここでできます。
https://saruwakakun.com/design/photoshop/panel

（本日の練習素材） ※【Photoshop】ベクトルマスクとパスパネル

2020年8月4日（火）

学科グラフィックデザイン基礎⑫

-本日のアジェンダ-

1限目
学科グラフィックデザイン基礎⑫
成績考査

2限目
学科グラフィックデザイン基礎⑫
成績考査

3限目
学科グラフィックデザイン基礎⑫
成績考査

4限目
学科グラフィックデザイン基礎⑫
成績考査

5限目
学科グラフィックデザイン基礎⑫
成績考査

本日のテーマ

イラストレーターとフォトショップの合作を作りましょう

■成績考査内容

ドロップボックスにある「grade-check_○○○○_200804.ai」に
フォトショップで作成した「合成写真」とイラストレーターで作成した「イラスト」「文字」を配置し提出してください。喜怒哀楽を表現した２つの作品を１つのファイルにまとめてください。
※ファイルの「 ○○○○ 」はご自身の名前に変えて提出して下さい。
5限目終了15分前（14時45分）までに、ドロップボックス「第1回成績考査」のフォルダに提出してください。

2020年8月5日（水）

DTP基礎

-本日のアジェンダ-

1限目
学科 DTP基礎
DTPと印刷について

2限目
学科 DTP基礎
名刺のサイズとトリムマーク

3限目
学科 DTP基礎
名刺の内容決定

4限目
学科 DTP基礎
名刺作成

5限目
学科 DTP基礎
名刺作成

本日のテーマ

名刺を例として、入稿データの理解を深めましょう

DTPとは？

DTPとは、DeskTop Publishing（デスクトップパブリッシング）を略したもので、日本語では「机上出版」や「卓上出版」と言われています。DTPの主な役割は、パソコンでデータを作成し、実際に印刷物を作成することです。
かつて、DTPというものがなかった頃は、印刷物を制作する際に、版下の作成や製版、印刷などのいくつもある工程をそれぞれの専門家が手分けをして行っていました。そのため、印刷物には多くの人と時間が必要でした。しかし、DTPではこの作業を全てパソコン上で行うため、ひとりで手軽に行えるようになったのです。

参考サイト

名刺のデザインのポイントは「交換」と「管理」と「思い出す」の場面を想定して作成してみましょう。
企業としての名刺なのか個人としての名刺なので、個性的なデザイン特徴をどう出すか考えてみましょう。
印刷物としての特徴や入稿時の注意点なども考えた上で作成してみましょう。

本日のILLUSTRATOR操作のキーワード

名刺のサイズ「91×55mm 」

図形ツール（数値指定）
選択ツール
ダイレクト選択ツール
文字ツール
トリムマークの作成【New】
パスのオフセット【New】
ガイドの作成【New】
定規を表示・隠す【New】
ガイドを表示・隠す・ロック・ロック解除【New】
すべてをロック解除【New】
整列パネル
書式のアウトライン
レイヤーパネル
グループ化
保存（ aiのバージョン）
複製を保存（_ol.ai、アウトライン化後のデータ保存）【New】
別名で保存（.pdf、最小ファイルサイズ）

トリムマークについて

トリムマーク（トンボ）とはトリムマークとは、印刷時や、断裁位置を明確にするために必要不可欠な「しるし」のことです。 … 内トンボは仕上がり線を示しており、内トンボから外トンボの間は裁ち落としのための”塗り足し”部分を示しています。

参考サイト

パスのオフセット

「オフセット」という言葉にあまり馴染みはないでしょう。しかし、この機能を覚えておくと、イラレの使い方の幅が広がる可能性があります。

参考サイト

文字パネル

文字パネル（ウィンドウ／書式／文字）を使用してオプションを適用し、ドキュメント内の個々の文字に書式を設定することができます。

参考サイト

字形パネル

字形パネル（書式／字形または、ウィンドウ／書式／字形）を使用すると、あるフォントの字形を表示したり、特定の字形をドキュメントに挿入したりできます。

参考サイト

名刺の内容の例

氏名
氏名の読み方(カタカナorアルファベット)
会社名
会社ロゴ
部署名・役職名・肩書き
住所
電話番号
mail
FAX
SNSアカウント
HPのURL
地図・アクセス情報
事業内容
保有資格

2020年8月6日（木）

実技イラストロゴ作成実習①

-本日のアジェンダ-

1限目
実技イラストロゴ作成実習①
昨日の振り返り

2限目
実技イラストロゴ作成実習①
ピクトグラムについて

3限目
実技イラストロゴ作成実習①
ピクトグラムについて

4限目
実技イラストロゴ作成実習①
ピクトグラム制作

5限目
実技イラストロゴ作成実習①
ピクトグラム制作

本日のテーマ

ピクトグラムを作ってみましょう

■ ピクトグラム（PICTOGRAM）とは

一般に「絵文字」「絵単語」などと呼ばれ、何らかの情報や注意を示すために表示される視覚記号（サイン）の一つである。地と図に明度差のある2色を用いて、表したい概念を単純な図として表現する技法が用いられる。様々なマークが数多く存在する。

■ ピクトグラム制作について

「リアリティの理解」「デフォルメの質」「情報の伝わりやすさ」が大切です。
1つの施設や企業といったテーマで、共通の世界観を持たせてみましょう。
線の太さ・間隔の開け方・角丸カーブを揃えるなど共通のデザインルールを設けてみましょう。

とにかく数多く作ってみましょう！
ひとつの作品に時間をかけすぎないで、思いついたイメージを量産してみてください。

参考サイト

■ ILLUSTRATOR操作のキーワード

図形ツール（数値で入力）
環境（＞一般＞キー入力）【New】
ショートカットキー：コピー＋移動（Alt + 上下キー）

変形パネル（>線幅と効果を拡大縮小にチェック）【New】
パスのアウトライン【New】
ハサミツール
回転ツール
リフレクトツール
レイヤーパネル
グループ化と解除（Ctrl + G ／ Ctrl + Shift + G ）
パスファインダー（合体・前面オブジェクトで型抜き・交差）
シェイプ形成ツール
ペンツール
選択ツール
ダイレクト選択ツール
保存（ aiのバージョン）
複製を保存（_ol.ai、アウトライン化後のデータ保存）【New】
別名で保存（.pdf、最小ファイルサイズ）

2020年8月7日（金）

実技イラストロゴ作成実習②

-本日のアジェンダ-

1限目
実技イラストロゴ作成実習②
ピクトグラム振り返り

2限目
実技イラストロゴ作成実習②
ロゴとは

3限目
実技イラストロゴ作成実習②
ロゴのアイデア出し

4限目
実技イラストロゴ作成実習②
文字の変形について

5限目
実技イラストロゴ作成実習②
課題制作

本日のテーマ

ロゴを作ってみましょう

■ロゴとは

■ロゴ制作について

ロゴの内容
シンボル（絵）・ロゴタイプ（文字）の有無
どんなサービスか
コンセプト

参考：maoma_manual_20210127.pdf

■ロゴ提案

スマイルシナジー株式会社｜ロゴデザイン・作成

ピクトグラムと同じでとにかく数多く作ってみましょう！
「配色」「フォント」「配置」等、提案パターンを考え増やしましょう。

■ ILLUSTRATOR操作のキーワード

文字パネル（カーニング・トラッキング）
書式のアウトラインの作成
アピアランスパネル
整列パネル
効果（ワープ）【New】
アピアランスの分割【New】
パスファインダー（合体・前面オブジェクトで型抜き・交差）
レイヤーパネル
グループ化（解除）
シェイプ形成ツール
ペンツール
選択ツール
ダイレクト選択ツール
保存（ aiのバージョン）
複製を保存（_ol.ai、アウトライン化後のデータ保存）【New】
別名で保存（.pdf、最小ファイルサイズ）

2020年8月10日（月）

実技イラストロゴ作成実習③

1限目
実技イラストロゴ作成実習③
ロゴの運用について

2限目
実技イラストロゴ作成実習③
アイディアを絞り出す

3限目
実技イラストロゴ作成実習③
ロゴ制作

4限目
実技イラストロゴ作成実習③
ロゴ制作

5限目
実技イラストロゴ作成実習③
ロゴ発表

本日のテーマ

ロゴを提案してみましょう

■ロゴの提案

レイアウト・フォント・配色を変えて、バリエーションを増やしましょう。可能であれば、コンセプトを変えて作成してみてください。
A4サイズ（縦または横）1枚にまとめ、提出してください。

■参考サイト

■ ILLUSTRATOR操作のキーワード

文字パネル（カーニング・トラッキング）
パス上文字ツール【New】
書式＞アウトラインを作成
アピアランスパネル
整列パネル
効果（スタイライズ＞角を丸くする）【New】
アピアランスの分割
パスファインダー（合体・前面オブジェクトで型抜き・交差）
シェイプ形成ツール
スウォッチパネル（登録・削除・スウォッチグループ）【New】
レイヤーパネル
グループ化（解除）
シェイプ形成ツール
ペンツール
選択ツール
ダイレクト選択ツール
保存（ aiのバージョン）
複製を保存（_ol.ai、アウトライン化後のデータ保存）
別名で保存（.pdf、最小ファイルサイズ）

2020年8月11日（火）

実技イラストロゴ作成実習④

-本日のアジェンダ-

1限目
実技イラストロゴ作成実習④
名刺作成

2限目
実技イラストロゴ作成実習④
名刺作成

3限目
実技イラストロゴ作成実習④
名刺作成

4限目
実技イラストロゴ作成実習④
名刺作成

5限目
実技イラストロゴ作成実習④
名刺作成

本日のテーマ

もっと自分らしい名刺を作ってみましょう

横書き・縦書きそれぞれのレイアウトで作成してみましょう。
裏面に載せられる情報がある場合は、作成してみましょう。

伝わるデザイン

文字パネル

文字パネル（ウィンドウ／書式／文字）を使用してオプションを適用し、ドキュメント内の個々の文字に書式を設定することができます。

参考サイト

字形パネル

参考サイト

2020年8月13日（木）

実技イラストロゴ作成実習⑤

-本日のアジェンダ-

1限目
実技イラストロゴ作成実習⑤
アピアランスについて

2限目
実技イラストロゴ作成実習⑤
クリッピングマスクについて

3限目
実技イラストロゴ作成実習⑤
アクセスマップ制作

4限目
実技イラストロゴ作成実習⑤
アクセスマップ制作

5限目
実技イラストロゴ作成実習⑤
アクセスマップ制作

本日のテーマ

アクセスマップを作ってみましょう

■ アクセスマップの制作について

ポイントはピクトグラムと同じく「情報の伝わりやすさ」「デフォルメの質」「リアリティの理解」です。
1 つの企業や施設・企画等で、共通ルールをもたせてみましょう。
集客力や施設の大きさによって必要な案内の内容が異なるところも気を付けてみましょう。
サイトデザイン・チラシやパンフレット等のデザインバランスも考えて進めてみましょう。

■ アピアランス

■ クリッピングマスク

【完全版】Illustratorで複数のオブジェクトをまとめてクリッピングマスクをかける方法

■ ILLUSTRATOR操作のキーワード

「ペンツール」
「スタイライズ」
「書式のアウトラインの作成」
「パスのアウトライン」【New】
「アピアランスパネル」
「配置」
「パスファインダー」
「レイヤーパネル」
「グループ化」
「各種図形ツール」
「文字ツール」
「aiのバージョン」
「保存・別名で保存」
「選択ツール」
「ダイレクト選択ツール」
「変形（線幅と効果を拡大・縮小）」
（レイヤーの）クリッピングマスク」【New】

2020年8月14日（金）

実技イラストロゴ作成実習⑥

-本日のアジェンダ-

1限目
実技イラストロゴ作成実習⑥
アクセスマップの講評

2限目
実技イラストロゴ作成実習⑥
アクセスマップ制作

3限目
実技イラストロゴ作成実習⑥
アクセスマップ制作

4限目
実技イラストロゴ作成実習⑥
アクセスマップ制作

5限目
実技イラストロゴ作成実習⑥
アクセスマップ制作

本日のテーマ

デザインの要素を考えてみましょう。

■ アクセスマップの制作について

ポイントはピクトグラムと同じく「情報の伝わりやすさ」「デフォルメの質」「リアリティの理解」です。
1 つの企業や施設・企画等で、共通ルールをもたせてみましょう。
集客力や施設の大きさによって必要な案内の内容が異なるところも気を付けてみましょう。
サイトデザイン・チラシやパンフレット等のデザインバランスも考えて進めてみましょう。

■ アピアランス

■ クリッピングマスク

【完全版】Illustratorで複数のオブジェクトをまとめてクリッピングマスクをかける方法

■ ILLUSTRATOR操作のキーワード

「ペンツール」
「スタイライズ」
「書式のアウトラインの作成」
「パスのアウトライン」【New】
「アピアランスパネル」
「配置」
「パスファインダー」
「レイヤーパネル」
「グループ化」
「各種図形ツール」
「文字ツール」
「aiのバージョン」
「保存・別名で保存」
「選択ツール」
「ダイレクト選択ツール」
「変形（線幅と効果を拡大・縮小）」
（レイヤーの）クリッピングマスク」【New】

【1】文字デザイン

文字や文章の｢読みやすさ｣は、可読性、視認性、判読性という３つの要素から成ります。「可読性」とは文章が読みやすいか、「視認性」とはパッと見た瞬間の認識しやすさ、「判読性」とは誤読がないか、という指標です。書体（≒フォント）の種類や文字のサイズを変えたり、行間や字間を調節することで、これらの要素を高めることができます。ただし、どの要素を優先させるかは資料の目的や状況によって変わります。プレゼンのPowerPointsスライドなどでは視認性と判読性を、申請書などのWord文書などでは可読性を重視します。

参考サイト

【2】レイアウトデザイン

見やすいレイアウト、わかりやすいレイアウトを作るときの重要なポイントは、ただ闇雲に文字や絵を配置するのではなく、発表者の頭の中にある「ロジック」や「事柄と事柄の関係性」に即して文字や絵を配置することです。関係性の強いもの同士は、近くに配置したり、同じ色を使ったり、線で結んだり、大切な事項を目立つ色にしたり、目立つ場所においたり、という簡単なことです。「理論やストーリーをレイアウトする」ことが大切であるということを忘れないでください。

参考サイト

【3】配色デザイン

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

参考サイト

2020年8月17日（月）

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

-本日のアジェンダ-

1限目
実技写真合成・補正加工実習①
入稿用データについて

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

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

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

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

本日のテーマ

ポストカードを作ってみましょう。

DMについて

ハガキ入稿のテンプレートを利用してみよう

テンプレートダウンロードサービス|印刷のことなら印刷通販【プリントパック】

EPSとは？

EPS ファイルの読み込み Encapsulated PostScript（EPS）は、アプリケーション間でベクターアートワークを受け渡しするときに使用される一般的なファイル形式です。 … ただし、Illustrator で認識できないデータがファイルに含まれている場合、それらのデータは失われる可能性があります。

画像解像度について

解像度とは画像の密度、1インチ(2.54cm)あたりのピクセル数の事です。
dots per inchの略でdpiと表記されます。
72dpiの場合1インチあたり72ピクセル×72ピクセル=5184ピクセルであることになります。
印刷用は300dpi〜が推奨

CMYKとRGB

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

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

参考サイト

DM制作のレシピ

定型（郵便)はがきサイズ：100×148mm

１、下準備：Photoshopで写真の画像補正をする
（レタッチ→合成→色調補正）
RGB→CMYK・・・イメージ＞モード
画像解像度300dpi・・・イメージ＞画像解像度（再サンプルチェック無）

２、Illustratorでデザインを作る
（写真が入るところをグレーにしておく）
文字の大きさ、配色、レイアウト、余白に注意
強弱、バランス、メリハリ、統一を意識してみてください

３、Photoshopのpsdデータを配置
必要ならマスクをする

４、イラストレーターをPDFで保存し提出

2020年8月18日（火）

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

-本日のアジェンダ-

1限目
実技写真合成・補正加工実習②
チラシの内容決定

2限目
実技写真合成・補正加工実習②
チラシの内容決定

3限目
実技写真合成・補正加工実習②
手書きラフ

4限目
実技写真合成・補正加工実習②
デザインカンプ制作

5限目
実技写真合成・補正加工実習②
デザインカンプ制作

本日のテーマ

チラシに乗せる情報とレイアウトを考えましょう。

レイアウトデザイン

チラシ制作の流れ

参考サイト

チラシに掲載する情報が浮かばない場合、実在のチラシを参照したり、『（企画したジャンル）チラシ』等で画像検索してみましょう。

チラシ・フライヤーの無料デザインテンプレート一覧

2020年8月19日（水）

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

-本日のアジェンダ-

1限目
実技写真合成・補正加工実習③
デザインカンプ続き

2限目
実技写真合成・補正加工実習③
デザインカンプ続き

3限目
実技写真合成・補正加工実習③
チラシ制作

4限目
実技写真合成・補正加工実習③
チラシ制作

5限目
実技写真合成・補正加工実習③
チラシ制作

本日のテーマ

チラシを作成してみましょう。

参考サイト

・プロ直伝！Illustrator（イラレ）で写真の上の文字を読みやすくする6つのテクニック
 ・写真背景の上に文字をのせた際、文字を見やすくする方法
※『写真文字イラレ』で検索

レイアウトデザイン

チラシ制作の流れ

参考サイト

チラシに掲載する情報が浮かばない場合、実在のチラシを参照したり、『（企画したジャンル）チラシ』等で画像検索してみましょう。

チラシ・フライヤーの無料デザインテンプレート一覧

配色デザイン

2020年8月20日（木）

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

-本日のアジェンダ-

1限目
実技写真合成・補正加工実習④
チラシ制作

2限目
実技写真合成・補正加工実習④
チラシ制作

3限目
実技写真合成・補正加工実習④
チラシ制作

4限目
実技写真合成・補正加工実習④
チラシ制作

5限目
実技写真合成・補正加工実習④
チラシ制作

本日のテーマ

チラシ作りを進めましょう。

【1】文字デザイン

【2】レイアウトデザイン

【3】配色デザイン

伝えたいことが相手に伝わるデザインを！
主役を引き立たせる為のデザインを考えて見ましょう。

フォントの種類はそれで良いか。
（タイトルは目につく、テキストは読みやすく）
文字のサイズ・色はそれで良いか。（強弱をつけましょう）
行間、文字間を調整しましょう。
余白を揃えましょう。
変化は大きく！少しの違いは気づかれないし、落ち着かない。
背景色は主役を引き立たせる色になっているか。
文字装飾をつけて見ましょう。
関連するイラストを配置してイメージを盛り上げましょう。

◆文字装飾

◆QRコード作成

印刷用のQRコードを作る君

■ILLUSTRATOR操作のキーワード

スウォッチパネル

スウォッチパネルには、カラー・グラデーション・パターンの３種類を登録することができます。自分で作ったスウォッチは登録できるのでうまく使いこなしましょう。
※ グラデーションとパターンはグループ化できません。

カラーパネル

オブジェクトにカラーを適用する作業は、Illustrator ではよく行われる作業で、ある程度のカラーモデルとカラーモードに関する知識を必要とします。オブジェクトにカラーを適用するときは、最終的に出力する媒体に合わせて、適切なカラーモデルとカラー設定を使用する必要があります。Illustrator では、スウォッチパネル、カラーガイドパネル、カラーを編集／オブジェクトを再配色ダイアログボックスなどを使用して、簡単にカラーを試作したり適用したりすることができます。

グラデーションパネルとグラデーションツール

グラデーションツールまたはグラデーションパネルを使用してグラデーションを作成または変更できます。アートワークで直接グラデーションを作成または変更し、変更内容をリアルタイムで表示するには、グラデーションツールを使用します。

■グラデーションパネル
※「ウィンドウ」＞「グラデーション」にあります。
■グラデーションツール
※ツール群の中にあります。

スポイトツール

llustratorとPhotoshopにはカーソルを合わせた部分の色情報を抽出する. 「スポイトツール」という便利機能があります。

【おまけ】フリーグラデーションについて

「フリーグラデーション」 Illustrator CC 2019からの新機能です。

2020年8月21日（金）

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

-本日のアジェンダ-

1限目
実技写真合成・補正加工実習⑤
チラシ制作

2限目
実技写真合成・補正加工実習⑤
チラシ制作

3限目
実技写真合成・補正加工実習⑤
チラシ制作

4限目
実技写真合成・補正加工実習⑤
チラシ制作

5限目
実技写真合成・補正加工実習⑤
入稿用データ作成

本日のテーマ

入稿時の注意点に留意しましょう。

印刷データの納品について

入稿の注意点

印刷データに不備がある場合は、納品できない事があります。
必ず印刷会社ごとに取り決めがありますので、注意点を必ず読み場合によっては直接問合せ等を行ってから印刷入稿ししましょう。

サイズ・トリムマーク（トンボ）の設定
カラーモードはCMYKで作成
塗り足し・文字切れについて
モノクロ印刷の場合・グレースケールへの変換
画像のリンク配置と埋め込み配置
アピアランスの分解
フォントのアウトライン化
オブジェクトアウトライン化
入稿のファイル形式（ai等の推奨保存設定）

参考サイト

2020年8月24日（月）

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

-本日のアジェンダ-

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

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

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

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

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

本日のテーマ

本日は成績考査です

■成績考査内容

ドロップボックスにある「grade-check_○○○○_200824.ai」に
これまでに作成した作品を添付し、PDF形式で提出してください。
※ファイル名の「 ○○○○ 」はご自身の名前に変えて提出して下さい。

2020年8月25日（火）

学科 ECサイト運用基礎①

-本日のアジェンダ-

1限目
学科 ECサイト運用基礎①
ECサイトについて

2限目
学科 ECサイト運用基礎①
バナーについて

3限目
学科 ECサイト運用基礎①
バナー広告について

4限目
学科 ECサイト運用基礎①
バナー作成

5限目
学科 ECサイト運用基礎①
バナー作成

本日のテーマ

ECサイトとは？

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

参考サイト

広告宣伝費について

広告宣伝費とは、事業や商品の広告を作る費用・宣伝にかかる費用のことを指します。基本的に、広告宣伝費の消費税区分は「課税」です。販促のためのポスターやチラシ・カタログ等の印刷物、看板、試供品やティッシュのサンプリング、ダイレクトメール、テレビ・ラジオ・インターネット広告にかける費用などがこれにあたります。

バナーとは？

バナー広告とは、インターネット広告のうち、画像やアニメーションによって表現する広告の総称である。 バナー広告では、あらかじめ決められたサイズ内でリンク付きの画像を表示し、クリックすることで広告主のWebサイトへ誘導されるようになっている。

Retina対応について

Retinaディスプレイは、アップル製品のうち、100〜160ppi程度であった従来のディスプレイ解像度の、およそ倍の解像度、高画素密度のディスプレイを指す名称である。「Retina」は英語で「網膜」という意味で、画素が細かく人間の目で識別できる限界を超えている、ということから命名された。

2020年8月26日（水）

学科 ECサイト運用基礎②

-本日のアジェンダ-

1限目
学科 ECサイト運用基礎②
チラシ振り返り

2限目
学科 ECサイト運用基礎②
チラシ振り返り

3限目
学科 ECサイト運用基礎②
チラシ振り返り

4限目
学科 ECサイト運用基礎②
レイヤースタイルについて

5限目
学科 ECサイト運用基礎②
バナー作成

本日のテーマ

バナーを作ってみましょう

Photoshopの操作

（横書き・縦書き）文字ツール
長方形ツール
整列ツール
レイヤースタイル（境界線・カラーオーバーレイ・光彩（外側））【New】
Photoshopで画像に枠線（境界線）をつける方法はこちらです←超初心者向け

2020年8月27日（木）

学科 ECサイトデザイン基礎①

-本日のアジェンダ-

1限目
学科 ECサイトデザイン基礎①
文字パネルと文字組

2限目
学科 ECサイトデザイン基礎①
バナー作成

3限目
学科 ECサイトデザイン基礎①
バナー作成

4限目
学科 ECサイトデザイン基礎①
バナー作成

5限目
学科 ECサイトデザイン基礎①
バナー作成

本日のテーマ

バナーを模写しましょう。

本日の課題

ドロップボックスにある『見本の素材』をダウンロードし、模写したバナーをJPEG形式（低画質）で提出してください。
提出先：【作品】バナー③_20210216-1

ドロップボックスにある『見本の素材』をダウンロードし、
模写したバナーをJPEG形式で提出してください。

数字の見せ方を工夫しましょう

数値を強調したい場面で、単位が大きすぎると、数値のインパクトがなくなってしまい、数値を認識・記憶しにくくなります。数字に対して単位を一回り小さくすると、認識しやすさが向上しインパクトが出てきます。

Photoshopの操作

（横書き・縦書き）文字ツール
長方形ツール
整列ツール（〇〇揃え）
ガイド
レイヤースタイル（境界線・カラーオーバーレイ・光彩（外側））
アートボードツール【New】
書き出し形式…（①ファイル＞書き出し②レイヤー右クリック）【New】

2020年8月28日（金）

学科 ECサイトデザイン基礎②

-本日のアジェンダ-

1限目
学科 ECサイトデザイン基礎②
昨日の振り返り

2限目
学科 ECサイトデザイン基礎②
課題発表

3限目
学科 ECサイトデザイン基礎②
バナー作成

4限目
学科 ECサイトデザイン基礎②
バナー作成

5限目
学科 ECサイトデザイン基礎②
バナー作成

本日のテーマ

良いバナーのレイアウトや工夫を盗みましょう。

本日の課題

お題：ECサイトに掲載するファッション系バナーを作成
楽天トップ＞レディースファッションの “ランキング” に表示されているバナーを参考にしてみましょう。
実在するリンク先：商品購入ページ（写真画像をリンク先の店舗から取得しましょう）
提出先：【作品】バナー③ファッション_200828
5限目修了時に提出

提出ファイルについて

①参考にしたバナー： task_〇〇〇〇_yymmdd_a1.jpg（またはpng）
②作成したバナー： task_〇〇〇〇_yymmdd_b1.jpg
※2個目の作成は、末尾にa2, b2 という名前を付けてください。

画像取得時の留意点

Chromeで、画像を右クリック＞「名前をつけて画像を保存」をしようとして、WebP形式のファイルだった場合
①画像を右クリック >「新しいタブで画像を開く」
②新しいタブのURLを画像の形式（JPG等）に変更する。
③ 「名前をつけて画像を保存」

拡張子「WebP（ウェッピー）」のファイルをJPEGやPNGなどに変換する方法

Photoshopの操作

（横書き・縦書き）文字ツール
長方形ツール
整列ツール（〇〇揃え・〇〇方向に分布【New】）
ガイド
レイヤースタイル（境界線・カラーオーバーレイ・光彩（外側）・ドロップシャドウ【New】）
アートボードツール
書き出し形式…（①ファイル＞書き出し②レイヤー右クリック）
グラデーションツール（レイヤーマスクへの適用）【New】
レイヤーの不透明度と塗り（境界線の掛け方）【New】

2020年8月31日（月）

学科 ECサイトデザイン基礎③

-本日のアジェンダ-

1限目
学科 ECサイトデザイン基礎③
課題発表

2限目
学科 ECサイトデザイン基礎③
バナー作成

3限目
学科 ECサイトデザイン基礎③
バナー作成

4限目
学科 ECサイトデザイン基礎③
バナー作成

5限目
学科 ECサイトデザイン基礎③
バナー発表

本日のテーマ

贈答品（食品）のバナーを作成してみましょう。

本日の課題

お題：贈答品（食品）。『敬老の日』に贈り物をする人がクリックしたくなるバナーを作成しましょう
リンク先：実在する商品購入ページ（楽天以外でも良いです。写真画像はリンク先ページから取得しましょう）
サイズは不問です。
2商品以上作りましょう。
提出先：【作品】バナー④敬老の日バナー_200831
4限目途中13:40修了時に提出

提出ファイルの形式について

①作成したバナー： task_〇〇〇〇_yymmdd_1.jpg
　※ 〇〇〇〇はお名前です。
　※複数作成するので末尾に数値を付けてください。
②遷移先のURL： task_〇〇〇〇_yymmdd.txt
　※terapadで作成して提出してください。

画像取得時の留意点

Photoshopの操作

（横書き・縦書き）文字ツール
長方形ツール
整列ツール（等間隔に分布・〇〇方向に分布）
レイヤースタイル（境界線・カラーオーバーレイ・光彩（外側）・ドロップシャドウ）
アートボードツール
書き出し形式…（①ファイル＞書き出し②レイヤー右クリック）
グラデーションツール（レイヤーマスクへの適用）
レイヤーの『不透明度』と『塗り』（境界線の掛け方）

2020年9月1日（火）

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

-本日のアジェンダ-

1限目
実技　ECサイトデザイン実習①
課題発表

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

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

4限目
実技　ECサイトデザイン基礎①
バナー作成

5限目
実技　ECサイトデザイン基礎①
バナー発表

本日のテーマ

サイズ違いでバナーを作成してみましょう。

デザインはまず真似をする事が上達の近道です。
「参考にするバナー」を読み解き、デザインの３要素を真似しましょう。

【1】文字デザイン
【2】配色デザイン
【3】レイアウトデザイン

本日の課題（1つ目）

お題：まずは、真似をすることで昨日テーマのブラッシュアップしましょう。
サイズ：自由です。
1個作りましょう。
提出先：【作品】バナー⑤
3限目修了迄に提出

提出ファイルの形式について

①参考にしたバナー： task_（お名前）_（日付）_a1.jpg（またはpng）
②作成したバナー： task_（お名前）_（日付）_b1.jpg
※2個目の作成は、末尾にa2, b2 という名前を付けてください。

画像取得時の留意点

Photoshopの操作

（横書き・縦書き）文字ツール
長方形ツール
整列ツール（等間隔に分布・〇〇方向に分布）
レイヤースタイル（境界線・カラーオーバーレイ・光彩（外側）・ドロップシャドウ）
アートボードツール
書き出し形式…（①ファイル＞書き出し②レイヤー右クリック）
グラデーションツール（レイヤーマスクへの適用）
レイヤーの『不透明度』と『塗り』（境界線の掛け方）

2020年9月2日（水）

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

-本日のアジェンダ-

1限目
実技　ECサイトデザイン実習②
GIFアニメーションについて

2限目
実技　ECサイトデザイン実習②
GIFアニメーションの使い方

3限目
実技　ECサイトデザイン実習②
GIFアニメーション作成

4限目
実技　ECサイトデザイン実習②
GIFアニメーション作成

5限目
実技　ECサイトデザイン実習②
発表会

本日のテーマ

GIFアニメーションを作ってみましょう

GIFアニメーションについて

GIFアニメーションは、Graphics Interchange Format の「マルチイメージ」を使ったアニメーション。アニメーションGIF ともいう。マルチイメージは GIF87a で導入された機能で、複数のフレームを順に表示できる。

参考サイト

本日の操作のキーワード（Photoshop）

ウィンドウ＞タイムライン【New】
タイムライン＞フレームの作成・削除【New】
タイムライン＞トゥイーン【New】
編集＞パペットワープ【New】
（Illustratorと異なり、ツールバーにアイコンがありません）
Web用に保存（従来）

パペットワープ（Photoshop）

加工で写真のポーズを自由に変えたい人必見。Photoshop cs5で実装された「パペットワープ」で簡単にポーズが変えられます！座っている人が立ったり、ジャンプしたり。自由に動かして、写真の人物を元気に動き回らせることもできます。

参考サイト

パペットワープ（Illustrator）

参考サイト

2020年9月3日（木）

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

-本日のアジェンダ-

1限目
実技 ECサイトデザイン実習③
ファイルの種類について

2限目
実技 ECサイトデザイン実習③
当て込みについて

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

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

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

本日のテーマ

ポートフォリオ用にバナー作成をしましょう

画像の書き出しについて

本日の課題

実在の特集ページ・商品ページ等へリンクするバナーを作成してください。
バナーの掲載されている様がわかるように、リンク元のサイト画像に当て込んだ状態で提出してください。

参考サイト

バナー集

バナーデザイン専門ギャラリーサイト
バナーデザインまとめサイト
Pinterest　※アカウント登録が必要（学校の環境で閲覧しないでください）

バナー加工の小技集

2020年9月4日（金）

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

-本日のアジェンダ-

1限目
実技 ECサイトデザイン実習④
クラウドソーシングの案件について

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

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

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

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

本日のテーマ

発注者の気持ちになってみましょう。

本日の課題

別紙を参照してください。

2020年9月7日（月）

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

-本日のアジェンダ-

1限目
実技 ECサイトデザイン実習⑤
コンペ結果の発表

2限目
実技 ECサイトデザイン実習⑤
ポートフォリオ用作品の整備

3限目
実技 ECサイトデザイン実習⑤
ポートフォリオ用作品の整備

4限目
実技 ECサイトデザイン実習⑤
ポートフォリオ用作品の整備

5限目
実技 ECサイトデザイン実習⑤
ポートフォリオ用作品の整備

本日のテーマ

これまでの作品をポートフォリオ用にブラッシュアップしましょう。

2020年9月8日（火）

実技ユーザーインターフェイス作成実習①

本日のアジェンダ-

1限目
実技　ユーザーインターフェイス作成実習①
WordPressについて・ユーザー作成

2限目
実技　ユーザーインターフェイス作成実習①
記事の更新について

3限目
実技　ユーザーインターフェイス作成実習①
テーマについて

4限目
実技　ユーザーインターフェイス作成実習①
WordPressでポートフォリオを作ってみよう

5限目
実技　ユーザーインターフェイス作成実習①
WordPressでポートフォリオを作ってみよう

本日のテーマ

WordPressで記事を公開できるようにしましょう

WordPressとは

WordPress(ワードプレス)は、ブログやサイト（ホームページ）を作成できるソフトです。今や、世界中のサイトの約3分の1はWordPressで作られていると言われています。日本国内でも、個人ブログだけでなく、企業や公共機関のサイトなどに幅広く利用されています。

WordPress の記事更新

WordPressのカテゴリーとタグについて

WordPressのテーマ

2020年9月9日（水）

実技ユーザーインターフェイス作成実習②

本日のアジェンダ-

1限目
実技　ユーザーインターフェイス作成実習②
WordPressのインストール

2限目
実技　ユーザーインターフェイス作成実習②
WordPressでのサイト作成

3限目
実技　ユーザーインターフェイス作成実習②
WordPressでのサイト作成

4限目
実技　ユーザーインターフェイス作成実習②
WordPressでのサイト作成

5限目
実技　ユーザーインターフェイス作成実習②
WordPressでのサイト作成

本日のテーマ

WordPressの仕組みを知ろう。

参考サイト

WORDPRESSサーバーのインストール

WORDPRESSのプラグイン

2020年9月10日（木）

学科 HTML基礎①

-本日のアジェンダ-

1限目
学科 HTML基礎①
ウエブページの作成とツール

2限目
学科 HTML基礎①
HTML文書の基本情報

3限目
学科 HTML基礎①
見出しと段落

4限目
学科 HTML基礎①
画像について

5限目
学科 HTML基礎①
まとめ

本日のテーマ

実際にHTMLを記述してみましょう

マークアップとは？

HTMLマークアップとは、マークアップ言語である「HTML」を使ってファイルにソースコードを記述することです。HTMLマークアップでは、定義されてる数多くの専用タグを使って、適切にソースコードを記述することが大切となります。

参考サイト

2020年9月11日（金）

学科 HTML基礎②

-本日のアジェンダ-

1限目
学科 HTML基礎②
トップページの作成

2限目
学科 HTML基礎②
トップページの作成

3限目
学科 HTML基礎②
サブページの作成

4限目
学科 HTML基礎②
表の作成

5限目
学科 HTML基礎②
まとめ

本日のテーマ

サブページを作ってみましょう。

表の作成について

パスについて

パスは読み込むファイルの場所をコンピューターに教えるために書く
パスはhtmlのaタグ、imgタグ、linkタグ、scriptタグなどで使用する
パスの書き方は「絶対パス」と「相対パス」の２種類がある
外部サイトのファイルを読み込む場合は絶対パス、同じwebサイト内（サーバー）のファイルなら相対パス

HTMLの文法チェック

2020年9月15日（火）

学科 HTML基礎③

-本日のアジェンダ-

1限目
学科 HTML基礎③
HTMLタグ補足（リストタグ）

2限目
学科 HTML基礎③
HTMLタグ補足（文章構造を伝える新しいタグ）

3限目
学科 HTML基礎③
CSSセレクタの指定方法について

4限目
学科 HTML基礎③
CSSでの幅(width)指定について

5限目
学科 HTML基礎③
今日のまとめ

本日のテーマ

CSSで見た目を変えましょう。

【復習】これまでのHTMLタグ（body内）

h1～6・ ul( li) ・p ・ a ・img・table(th・tr・td)
header・nav・main・section・footer ・div

参考サイト

HTMLの記述をチェックしてみよう
　Gateway – Another HTML Lint
CSSの記述をチェックしてみよう
　CSS Validation Service
タグの意味等が思い出せない場合はこちらで調べてみよう
　HTML5リファレンス
色の名前とカラーコードです
　HTMLカラーコード: WEB色見本原色大辞典

リストタグ（ul・ol・dl）について

【初心者向け】HTMLでリスト作成｜ul・ol ・liタグの使い方
SEO対策として最低限押さえておきたいHTML/HTML5マークアップの大事な6つのポイント※リストタグの直下の子要素には～
定義リストDLを装飾するレスポンシブOKなCSSデザイン5種

文書構造を伝える新しいタグ

以前では意味をブラウザに伝えることができなかったタグが、HTML5から新しく意味を持ったタグとして登場し、構造などが理解しやすくなりました。
文書構造を伝える新しいタグダウンロード

HTML5とは？メリットとHTML5から追加された新しいタグを紹介！　※①新しいタグで文章構造が～
HTML5でSEO強化へ！要素タグsection, article, mainの使い方

CSSで色を表現しよう

greenやredのように色の名前で表す方法と、カラーコードで表す方法があります。
（カラーコードの方が色名よりも多くの色を指定できます。）
　HTMLカラーコード: WEB色見本原色大辞典

2020年9月16日（水）

学科 HTML基礎④

-本日のアジェンダ-

1限目
学科 HTML基礎④
ブロック要素とインラインブロック要素

2限目
学科 HTML基礎④
floatプロパティでナビを作ろう(float）

3限目
学科 HTML基礎④
floatプロパティでナビを作ろう (clearfix)

4限目
学科 HTML基礎④
floatプロパティでナビを作ろう(clearfix)

5限目
学科 HTML基礎④
本日のまとめ

本日のテーマ

CSSで見た目を変えましょう。

【復習】これまでのHTMLタグ（body内）

h1～ h6・ p ・ a ・img・ul( li)・ol( li)・ dl(dt・dd)・table(th・tr・td)
div ←ジョーカー
header・nav・main・section・footer

【復習】これまでのCSSプロパティ

color・background-color・font-size・width・margin

便利ツール

CSSのwidth（幅）について

width(幅)の％指定をしましょう。
CSSのwidth（幅）とheight（高さ）の指定方法をマスターしよう

ブロック要素について

要素が、縦積みで表示されるものだけでしょうか。
本日は、これまでに出たタグで検証してみましょう。
【CSS】displayの使い方を総まとめ！inlineやblockの違いは？

疑似要素について

clearfixの中で、疑似要素の果たす役割を理解しましょう。
CSSの疑似要素とは？beforeとafterの使い方まとめ。

画像圧縮ツールのご紹介

ブラウザにドラッグ＆ドロップするだけで、JPGやPNGファイルを圧縮するWEBツール、それが「TinyPNG」です。
TinyJPG

2020年9月17日（木）

学科 HTML基礎⑤

-本日のアジェンダ-

1限目
学科 HTML基礎⑤
ウェブフォントについて

2限目
学科 HTML基礎⑤
疑似クラスについて

3限目
学科 HTML基礎⑤
背景画像について

4限目
学科 HTML基礎⑤
floatプロパティでナビを作ろう(clearfix)

5限目
学科 HTML基礎⑤
本日のまとめ

本日のテーマ

CSSで見た目を変えましょう。

【復習】これまでのHTMLタグ（body内）

h1～ h6・ p ・ a ・img・ul( li)・ol( li)・ dl(dt・dd)・table(th・tr・td)
div ←ジョーカー
header・nav・main・section・footer

【復習】これまでのCSSプロパティ

color・background-color・font-size・width・margin・paddding ・display・float・clear ・content
【疑似要素】 :before・ :after

便利ツール

HTMLの記述をチェックしてみよう
　Gateway – Another HTML Lint
CSSの記述をチェックしてみよう
　CSS Validation Service
タグの意味等が思い出せない場合はこちらで調べてみよう
　HTML5リファレンス
色の名前とカラーコードです
　HTMLカラーコード: WEB色見本原色大辞典
画像圧縮ツール
　TinyJPG

ウェブフォント

ウェブフォントはウェブサーバ上に置かれたフォントデータを利用する仕組みなので、ユーザの閲覧環境に左右されません。
Googleが提供する無料のウェブフォントサービス「Google Fonts」を利用してみましょう。（授業用PCのIllustrrator, Photoshopへのインストールはご遠慮ください。）

疑似クラス

対象の要素の状態や条件について、スタイルを指定するものです。
リンクテキストにポインターが乗ったら、テキストをの色を変える（:hover)等が有名です。

2020年9月18日（金）

学科 HTML基礎⑥

-本日のアジェンダ-

1限目
学科 HTML基礎⑥
余白をつけよう

2限目
学科 HTML基礎⑥
角を丸めよう

3限目
学科 HTML基礎⑥
marginとpadding について

4限目
学科 HTML基礎⑥
練習問題

5限目
学科 HTML基礎⑥
練習問題

本日のテーマ

marginとpaddingの違いを意識しましょう。

【復習】これまでのHTMLタグ（body内）

h1～ h6・ p ・ a ・img・ul( li)・ol( li)・ dl(dt・dd)・table(th・tr・td)
div ←ジョーカー
header・nav・main・section・footer

【復習】これまでのCSSプロパティ

color・font-size・width・margin・padding ・display・float・clear ・content・text-align・ list-style・font-family・text-decoration・border・background・box-shadow

【疑似要素】 :before・ :after
【疑似クラス】 :hover

便利ツール

HTMLの記述をチェックしてみよう
　Gateway – Another HTML Lint
CSSの記述をチェックしてみよう
　CSS Validation Service
タグの意味等が思い出せない場合はこちらで調べてみよう
　HTML5リファレンス
色の名前とカラーコードです
　HTMLカラーコード: WEB色見本原色大辞典
ウェブフォント
　 Google Fonts
画像圧縮ツール
　TinyJPG

marginとpaddingの違い

要素に枠線を付けるborderと、 padding・ marginとの関係に着目しましょう。
paddingで付けた余白は枠線の内側、marginで付けた余白は枠線の外側につきます。
また、backgroundが影響するのは、paddingで付けた余白なります（marginで付けた余白には影響しません）。
背景と余白を同時に指定する際には、 padding・ margin どちらがふさわしいのかを判断する必要があります。
課題_プロフィールダウンロード

2020年9月22日（火）

学科 HTML基礎⑦

-本日のアジェンダ-

1限目
学科 HTML基礎⑦
マークアップ技術のコツについて

2限目
学科 HTML基礎⑦
セレクタ記述のコツについて

3限目
学科 HTML基礎⑦
間違い探しについて

4限目
学科 HTML基礎⑦
実践トレーニング

5限目
学科 HTML基礎⑦
実践トレーニング

本日のテーマ

上手に間違い探しをする為に…

マークアップ攻略・技術向上のポイント！

マークアップ時に、HTMLのコードの誤りやミスを回避するコツとして、タグチェッカー等を利用しましょう。
そもそもマークアップの目的は、「検索エンジン」に内容を伝えることです。
ならば、正しいマークアップの正解があるとすれば、そこに教えてもらいましょう。

HTML・CSSの参考サイト

CSSの記述の攻略・技術向上のポイント！

CSSの基本文法

CSSは、「セレクタ」「プロパティ」「値」の3つで構成されます。
それぞれを記述することで「どの要素（セレクタ）の、何を（プロパティ）、どのように（値）する」という命令文が成立します。

CSS攻略のポイントは「セレクタをコントロールする事」

セレクタの得点 | HTML・CSSの基礎 |トレーニング用 Sample

おススメルール

リセット（1点）をして後に書く記述は絶対適用されるようにする
id（100点）各ブロックの管理
class（10点）はエレメント（各パーツ）の分類
親子関係を明確にする
上から順番に記述する

間違い探しの攻略・ポイント！

まず、確認はブラウザが絶対であるという事
すなわちブラウザが認識しない場合は、必ず誤りがあります。

おススメの確認の順番

原因がマークアップの可能性なら、タグチェッカー等を使う
原因がCSSの場合ならデベロッパーツールを使う

デベロッパーツールで見つからない場合の例

セレクタ記述スペルミス
閉じタグ｛｝の誤り
全角スペースの誤記述
コロン：セミコロン；の記述ミス
「ID#」「class.」の記述ミス
id名class名の付け方・使用方法の誤り
そもそもHTML（マークアップ）が間違えている

というところが良くある間違いです。
最後に、おまけWebサイトの作品のチェックポイントとしてこれらが整理整頓され、第3者でも理解しやすい記述がされていることが望ましいです。

デベロッパーツールについて

デベロッパーツールとは？

デベロッパーツールとは、Googleが提供しているブラウザ、Chromeに付属しているツールの一つです。

google chromeの画面上で「右クリック」＞「検証」で出てくる画面です。

便利な使い方その1
「CSSを編集のシュミレーションが出来る」

Elements「HTMLのコードが確認できる」
※ただし chrome が出力したコードの内容

Styles「CSSのコードが確認できる」
※追記や記述変更も可能（あくまでシュミレーション）

Soirces「外部CSSファイルの記述を変更も可能」
※コピーすればそのままその内容に変更することが出来る

参考サイト

2020年9月23日（水）

学科 CSS基礎①

-本日のアジェンダ-

1限目
学科 CSS基礎①
widthとheight

2限目
学科 CSS基礎①
widthとheight

3限目
学科 CSS基礎①
リセットCSSについて

4限目
学科 CSS基礎①
仕様まとめ

5限目
学科 CSS基礎①
仕様まとめ

本日のテーマ

HTML／CSSの仕様理解を深めましょう

【復習】これまでのHTMLタグ（body内）

h1～ h6・ p ・ a ・img・ul( li)・ol( li)・ dl(dt・dd)・table(th・tr・td)
div ←ジョーカー
header・nav・main・section・footer

【復習】これまでのCSSプロパティ

color・font-size・width・margin・paddding ・display・float・clear ・content・text-align・ list-style・font-family・text-decoration・border・background・box-shadow

【疑似要素】 :before・ :after
【疑似クラス】 :hover

便利ツール

CSSのwidth（幅）について

width(幅)の％指定をしましょう。
CSSのwidth（幅）とheight（高さ）の指定方法をマスターしよう

幅・高さの前提としてブロック要素であることだが、imgタグは除外。
【CSS】displayの使い方を総まとめ！inlineやblockの違いは？
ボックスの種類の指定のプロパティ（display）

練習用素材

box-sizing

「要素からpaddingの部分がはみ出てしまう」「線がはみ出てしまう」というような問題をbox-sizingプロパティにより簡単に解決する方法
【CSS】box-sizing:border-boxの使い方

リセットCSS

リセットCSSとは、ブラウザによって異なるデフォルトのCSSを打ち消してブラウザ間の表示を揃えるためのCSSファイルのことを言います。

2020年9月24日（木）

学科 CSS基礎②

-本日のアジェンダ-

1限目
学科 CSS基礎②
floatについて

2限目
学科 CSS基礎②
floatについて

3限目
学科 CSS基礎②
floatについて

4限目
学科 CSS基礎②
まとめ

5限目
学科 CSS基礎②
まとめ

本日のテーマ

HTML／CSSの仕様理解を深めましょう

【復習】これまでのHTMLタグ（body内）

h1～ h6・ p ・ a ・img・ul( li)・ol( li)・ dl(dt・dd)・table(th・tr・td)
div ←ジョーカー
header・nav・main・section・footer

【復習】これまでのCSSプロパティ

color・font-size・width・margin・paddding ・display・float・clear ・content・text-align・ list-style・font-family・text-decoration・border・background・box-shadow

【疑似要素】 :before・ :after
【疑似クラス】 :hover

便利ツール

floatについて

もう悩まない！CSSのfloatで起きる問題を解決する5つの方法

2020年9月25日（金）

学科 CSS基礎③

-本日のアジェンダ-

1限目
学科 CSS基礎③
デザインカンプのマークアップ

2限目
学科 CSS基礎③
セレクタの記述と検証ツールでの見え方

3限目
学科 CSS基礎③
背景画像の使い方

4限目
学科 CSS基礎③
まとめ

5限目
学科 CSS基礎③
まとめ

本日のテーマ

カンプを模写してみましょう。

便利ツール

2020年9月28日（月）

学科 CSS基礎④

-本日のアジェンダ-

1限目
学科　CSS基礎④
floatを使ったレイアウト

2限目
学科　CSS基礎④
floatを使ったレイアウト

3限目
学科　CSS基礎④
marginの相殺について

4限目
学科　CSS基礎④
まとめ

5限目
学科　CSS基礎④
まとめ

本日のテーマ

floatによるレイアウトを練習しましょう

便利ツール

マージンの相殺

ブロックの先頭と末尾のマージンは、それぞれのマージンの最も大きい寸法 (または等しい場合はいずれか1つ) の単一のマージンに結合される ( 折り畳まれる collapsed ) ことがあり、マージンの相殺という動作として知られています。

marginの相殺の理解を深めよう

2020年9月29日（火）

学科 CSS基礎⑤

-本日のアジェンダ-

1限目
学科　CSS基礎⑤
positionプロパティ

2限目
学科　CSS基礎⑤
positionプロパティ

3限目
学科　CSS基礎⑤
positionプロパティ

4限目
学科　CSS基礎⑤
まとめ

5限目
学科　CSS基礎⑤
まとめ

本日のテーマ

positionプロパティを学習しましょう

便利ツール

positionプロパティ

「position」は、CSSで使うプロパティの一つです。特に要素の「配置」を決めるのが「position」の役割です。

「position」の使い方
 positionの使い方「ナビの固定」
　※教室のページのライトナビからリンクできます。

補足：
position以外にもz-indexが有効になるプロパティがあります。(display: flex、display: grid等）
いつから、z-indexがpositionだけのものだと錯覚していた？

2020年9月30日（水）

学科 CSS基礎⑥

-本日のアジェンダ-

1限目
学科　CSS基礎⑥
overflowプロパティ

2限目
学科　CSS基礎⑥
spanタグとdivタグ

3限目
学科　CSS基礎⑥
疑似クラスの活用

4限目
学科　CSS基礎⑥
CSSの復習

5限目
学科　CSS基礎⑥
まとめ

本日のテーマ

CSSについておさらいをしましょう

便利ツール

SPANタグ

htmlを構築するためには様々なタグを使用します。そして、たいていのタグは段落や見出しなどの意味を持ちますが、インライン要素である「span」というタグは囲んだ範囲をcssで調整したりといったデザインの際立たせなどを行うためのもので、ブロック要素である「div」と併行して使用頻度の高いタグのひとつです

divとspanの違いは？使い分け方を初心者向けに解説

疑似クラス

擬似クラスとは指定の要素が特定の状態である場合にスタイルを適用させるセレクタです。文章構造の範囲外にある情報によってスタイルを変化させることができます。

HTML特殊文字について

2020年10月1日（木）

学科 CSS基礎⑦

-本日のアジェンダ-

1限目
学科　CSS基礎⑦
成績考査

2限目
学科　CSS基礎⑦
成績考査

3限目
学科　CSS基礎⑦
成績考査

4限目
学科　CSS基礎⑦
成績考査

5限目
学科　CSS基礎⑦
成績考査

本日のテーマ

本日は成績考査です

1.データをDLしたらファイル「grade-check_○○○○_201001.zip」を解凍してください。
　※○○○○は自分の名前を漢字で入力してください。
2.問題及び「完成イメージ.png 」を参考にして、grade-check_○○○○_ 201001の
中のファイルの中身を編集してください。
3.テスト終了後“grade-check_○○○○_ 201001.zip ”に圧縮しドロップボックスにUPしてください。
※ドロップボックス【第３回成績考査】の中にUPしてください。

便利ツール

2020年10月2日（金）

学科レイアウトデザイン基礎①

-本日のアジェンダ-

1限目
学科レイアウトデザイン基礎①
デザインラフ作成

2限目
学科レイアウトデザイン基礎①
デザインラフ作成

3限目
学科レイアウトデザイン基礎①
ワイヤーフレームについて

4限目
学科レイアウトデザイン基礎①
課題制作

5限目
学科レイアウトデザイン基礎①
課題制作

本日のテーマ

ワイヤーフレームを作成しましょう

サイト制作課題

期日を意識して、制作を進めてみましょう。

10月9日（金）までに提出・「デザインカンプ」★
10月16日（金）までに提出・「WebサイトPC版（途中報告）」
10月23日（金）までに提出・「Webサイトスマホ版（途中報告）」
10月27日（火）第４回成績考査・「Webサイト（出来たところまで！）」

ワイヤーフレームの作り方

ワイヤーフレームの作り方完全ガイド
 1カラム？2カラム？3カラム？サイトの目的に合ったデザイン構成とは
（「ワイヤーフレーム」等で検索）

ワイヤーフレームの前に…
一度、ラフの手書を試してみましょう。
ディレクター必見！WEBサイトのラフを超簡単に・フレキシブルに作る方法
（「Web　ラフ」等で画像検索）

ワイヤーフレーム作成（PSD）

制作課題のカンプサイズ（ PC版）は、幅1,280px、コンテンツは960pxに収めるよう作成する。

新規作成(Web)時、幅1,280pxで作成する。アートボード外しておく、高さは適宜調整する。
表示メニュー→新規ガイド作成：垂直・50%
シェイプで幅960pxの長方形を作成し、カンバス中央に整列
長方形の左右にガイドを引く
ガイドをロックする

2020年10月5日（月）

学科レイアウトデザイン基礎②

-本日のアジェンダ-

1限目
学科レイアウトデザイン基礎②
フレックスボックスについて

2限目
学科レイアウトデザイン基礎②
フレックスボックスについて

3限目
学科レイアウトデザイン基礎②
課題制作

4限目
学科レイアウトデザイン基礎②
課題制作

5限目
学科レイアウトデザイン基礎②
課題制作

本日のテーマ

フレックスボックスについて学習しましょう

サイト制作課題

便利ツール

HTMLの記述をチェックしてみよう
　Gateway – Another HTML Lint
CSSの記述をチェックしてみよう
　CSS Validation Service
タグの意味等が思い出せない場合はこちらで調べてみよう
　HTML5リファレンス
CSS フレックスボックスの仕様【New】
　 CSS フレックスボックスレイアウト
色の名前とカラーコードです
　HTMLカラーコード: WEB色見本原色大辞典
ウェブフォント
　 Google Fonts
画像圧縮ツール
　TinyJPG

2020年10月6日（火）

学科レイアウトデザイン基礎③

-本日のアジェンダ-

1限目
学科レイアウトデザイン基礎③
文字と余白について

2限目
学科レイアウトデザイン基礎③
レイヤー管理

3限目
学科レイアウトデザイン基礎③
課題制作

4限目
学科レイアウトデザイン基礎③
課題制作

5限目
学科レイアウトデザイン基礎③
課題制作

サイト制作課題

10月9日（金）までに提出・「デザインカンプ」★
10月16日（金）までに提出・「WebサイトPC版（途中報告）」
10月23日（金）までに提出・「Webサイトスマホ版（途中報告）」
10月27日（火）第４回成績考査・「Webサイト（出来たところまで！）」

本日のテーマ

読みやすさに配慮したサイトを制作しましょう

文字について

併せて、今のリセットCSSの仕組みも確認してみましょう

Webフォント

Webフォントとは、あらかじめサーバ上に置かれたフォントやインターネット上で提供されているフォントを呼び出し、表示するCSS3から策定された技術です。

源ノ角ゴシック（Noto Sans JP）・源ノ明朝（Noto Serif JP）は、AdobeがGoogleと共同開発したオープンソースのフォントファミリーです。
Google Fonts

参考サイト：

今回の課題では、自分（デザイナー兼コーダー）のために、
PSDのデザインカンプで レイヤー管理 を心がけてみましょう。

便利ツール

HTMLの記述をチェックしてみよう
　Gateway – Another HTML Lint
CSSの記述をチェックしてみよう
　CSS Validation Service
タグの意味等が思い出せない場合はこちらで調べてみよう
　HTML5リファレンス
CSS フレックスボックスの仕様
　CSS フレックスボックスレイアウト
　 CSS Flexboxチートシート
色の名前とカラーコードです
　HTMLカラーコード: WEB色見本原色大辞典
Googleフォント（ウェブフォント）
　 Google Fonts
画像圧縮ツール
　TinyJPG

2020年10月7日（水）

学科レイアウトデザイン基礎④

-本日のアジェンダ-

1限目
学科レイアウトデザイン基礎④
min-widthとmax-width

2限目
学科レイアウトデザイン基礎④
スマートフォンサイトの制作について

3限目
学科レイアウトデザイン基礎④
課題制作

4限目
学科レイアウトデザイン基礎④
課題制作

5限目
学科レイアウトデザイン基礎④
課題制作

本日のテーマ

スマートフォンサイトについて学習しましょう

サイト制作課題

max-widthとmin-width

レスポンシブデザイン（スマホでもPCでも、どんな大きさの端末で見てもちょうどいい大きさに表示されるWebデザインのこと）を作るためには、min-widthとmax-widthを避けては通れません。
【CSS】max-widthとmin-widthの使い方まとめ

便利ツール

2020年10月8日（木）

学科レイアウトデザイン基礎⑤

-本日のアジェンダ-

1限目
学科レイアウトデザイン基礎⑤
スマートフォンサイトのデザイン

2限目
学科レイアウトデザイン基礎⑤
ブレイクポイントについて

3限目
学科レイアウトデザイン基礎⑤
課題制作

4限目
学科レイアウトデザイン基礎⑤
課題制作

5限目
学科レイアウトデザイン基礎⑤
課題制作

本日のテーマ

スマートフォンのデザインを考えてみましょう。

サイト制作課題

便利ツール

2020年10月9日（金）

学科 XD基礎①

-本日のアジェンダ-

1限目
学科 XD基礎①
【XD】基本操作について

2限目
学科 XD基礎①
【XD】アセットとレイヤー

3限目
学科 XD基礎①
【XD】アセットとコンポーネントの活用

4限目
学科 XD基礎①
課題制作

5限目
学科 XD基礎①
課題制作

本日のテーマ

XDを使ってみましょう

Adobe XDについて

XDを使用することで、デザイナーはより早く、正確に高い品質で作業できます。インタラクティブなプロトタイプをシームレスに反映し、Windows、Mac、iOS、Androidなどの様々なデバイスやプラットフォーム上でチームのメンバーやレビュー担当者と共有できるようになります。

サイト制作課題

10月9日（金）に提出・「デザインカンプ」★
10月16日（金）に提出・「WebサイトPC版（途中報告）」
10月23日（金）に提出・「Webサイトスマホ版（途中報告）」
10月27日（火）第４回成績考査・「Webサイト（出来たところまで！）」

便利ツール

2020年10月12日（月）

学科 XD基礎②

-本日のアジェンダ-

1限目
基礎ＸＤ基礎②
【XD】基本操作の復習と、UIキットの活用

2限目
基礎ＸＤ基礎②
【XD】リピートグリッド（画像と文章）

3限目
基礎ＸＤ基礎②
課題制作

4限目
基礎ＸＤ基礎②
課題制作

5限目
基礎ＸＤ基礎②
課題制作

本日のテーマ

XDでデザインラフを作ってみましょう

XD　UIキットの活用について

ディレクターにもうれしい。Adobe XD用の日本語ワイヤーフレームUIキット「Wires jp」提供開始！

サイト制作課題

10月9日（金）に提出・「デザインカンプ」
10月16日（金）に提出・「WebサイトPC版（途中報告）」★
10月23日（金）に提出・「Webサイトスマホ版（途中報告）」
10月27日（火）第４回成績考査・「Webサイト（出来たところまで！）」

便利ツール

2020年10月13日（火）

実技 XD実習①

-本日アジェンダ-

1限目
実技　ＸＤ実習①
【XD】プロトタイプについて

2限目
実技　ＸＤ実習①
【XD】プロトタイプについて

3限目
実技　ＸＤ実習①
課題制作

4限目
実技　ＸＤ実習①
課題制作

5限目
実技　ＸＤ実習①
課題制作

本日のテーマ

XDでプロトタイピングしてみましょう

プロトタイピング (prototyping) とは

「さっさと試作品を作って、それを変更していくやり方」が「プロトタイピング」です。

１．試作品を作る
２．作った試作品を見てもらう
３．試作品に対する意見をいただく
４．いただいた意見を試作品に反映する

を繰り返すことで、完成度を上げるやり方です。
「分かりそう」で「分からない」でも「分かった」気になれるIT用語辞典

サイト制作課題

SPANタグ

divとspanの違いは？使い分け方を初心者向けに解説
 【CSS】displayの使い方を総まとめ！inlineやblockの違いは？

便利ツール

2020年10月15日（木）

実技 XD実習②

-本日アジェンダ-

1限目
実技　XD実習②
Retinaディスプレイについて

2限目
実技　XD実習②
画像書き出しについて（XD／PS／AI）

3限目
実技　XD実習②
画像書き出しについて（XD／PS／AI）

4限目
実技　XD実習②
課題制作

5限目
実技　XD実習②
課題制作

本日のテーマ

画像を書き出しましょう【XD】【PS】【AI】　

RETINAディスプレイについて

画像の書き出しについて

SVGとは

画像といえば「ラスタ形式」のPNG、JPEG（JPG）、GIFなどがおなじみですが、SVGは「ベクトル形式」で画像を描画しています。
「ラスタ形式」ではピクセルを縦横に並べ、色や輝度などをそれぞれの点に情報として与える方法で画像を描画しており、拡大縮小することによって画質が劣化したりギザギザになってしまいます。編集には不向きな上に、ファイルサイズが大きくなってしまうというデメリットがあります。
一方「ベクトル形式」で描画されるSVGファイルは、パスやテキスト、シェイプなどの集合を画像として扱うため、拡大や縮小をしても画質が劣化しません。近年主流となっているレスポンシブデザインと相性がよく、PCで見てもSPで見ても変わらない画質で表示させることができます。
SVGファイルとは？特徴・作成・変換方法を知ろう！

Photoshop CC2019「Web用に保存」「書き出し形式」の違いと比較

サイト制作課題

便利ツール

2020年10月16日（金）

実技 WEBデザイン実習①

-本日のアジェンダ-

1限目
実技 WEBデザイン実習①
vertical-alignプロパティ

2限目
実技 WEBデザイン実習①
コーディング実習

3限目
実技 WEBデザイン実習①
コーディング実習

4限目
実技 WEBデザイン実習①
課題制作

5限目
実技 WEBデザイン実習①
課題制作

本日のテーマ

どんどんコーディングしていきましょう。

サイト制作課題

便利ツール

VIRTICAL-ALIGNプロパティ

vertical-alignプロパティは、行のなかでのテキストや画像などの縦方向の揃え位置を指定する際に使用します。
vertical-alignプロパティを適用できるのは、インライン要素とテーブルセルです。ブロックレベル要素には適用できません。
【CSS】displayの使い方を総まとめ！inlineやblockの違いは？

2020年10月19日（月）

実技 WEBデザイン実習②

-本日のアジェンダ-

1限目
実技 WEBデザイン実習①
DreamWeaverについて

2限目
実技 WEBデザイン実習①
DreamWeaver の基本操作

3限目
実技 WEBデザイン実習①
レスポンシブWebデザイン基礎

4限目
実技 WEBデザイン実習①
課題制作

5限目
実技 WEBデザイン実習①
課題制作

本日のテーマ

DreamWeaverを使ってみましょう

サイト制作課題

10月9日（金）に提出・「デザインカンプ」
10月16日（金）に提出・「WebサイトPC版（途中報告）」
10月23日（金）に提出・「Webサイトスマホ版（途中報告）」 ★
10月27日（火）第４回成績考査・「Webサイト（出来たところまで！）」

便利ツール

2020年10月20日（火）

実技 WEBデザイン実習③

-本日のアジェンダ-

1限目
実技 WEBデザイン実習②
DreamWeaverでのCSS記述

2限目
実技 WEBデザイン実習②
DreamWeaverでのCSS記述

3限目
実技 WEBデザイン実習②
課題制作

4限目
実技 WEBデザイン実習②
課題制作

5限目
実技 WEBデザイン実習②
課題制作

本日のテーマ

DreamWeaverでCSSを記述してみましょう

サイト制作課題

便利ツール

HTML特殊文字について

2020年10月21日（水）

実技 WEBデザイン実習④

-本日のアジェンダ-

1限目
実技 WEBデザイン実習④
レスポンシブ対応のCSS記述

2限目
実技 WEBデザイン実習④
レスポンシブ対応のCSS記述

3限目
実技 WEBデザイン実習④
課題制作

4限目
実技 WEBデザイン実習④
課題制作

5限目
実技 WEBデザイン実習④
課題制作

本日のテーマ

レスポンシブ対応でCSSを記述してみましょう

サイト制作課題

10月9日（金）に提出・「デザインカンプ」
10月16日（金）に提出・「WebサイトPC版（途中報告）」
10月23日（金）に提出・「Webサイトスマホ版（途中報告）」★
10月27日（火）第４回成績考査・「Webサイト（出来たところまで！）」

WEB制作課題のポイント

メインコンテンツの幅は960pxに納め、ブラウザ中央に表示してください。（ブレイクポイントは 960pxでなくても構いません。）
ブラウザの横幅を960px以下に狭めてもレイアウトが崩れないようにしてください。
ブラウザの横幅を縮めた時に、スクロールバーがでないように調整してください。
スマホ画面は480px を想定し（ブレイクポイントは 480pxでなくても構いません。）、体裁よく見えるようデザインを工夫してください。

便利ツール

2020年10月22日（木）

実技スマートフォン作成実習①

-本日のアジェンダ-

1限目
実技スマートフォン作成実習①
課題制作

2限目
実技スマートフォン作成実習①
課題制作

3限目
実技スマートフォン作成実習①
課題制作

4限目
実技スマートフォン作成実習①
課題制作

5限目
実技スマートフォン作成実習①
課題制作

本日のテーマ

レスポンシブ対応でCSSを記述してみましょう

サイト制作課題

10月9日（金）に提出・「デザインカンプ」
10月16日（金）に提出・「WebサイトPC版（途中報告）」
10月23日（金）に提出・「Webサイトスマホ版（途中報告）」★
10月27日（火）第４回成績考査・「Webサイト（出来たところまで！）」

WEB制作課題のポイント

メインコンテンツの幅は960pxに納め、ブラウザ中央に表示してください。（ブレイクポイントは 960pxでなくても構いません。）
ブラウザの横幅を960px以下に狭めてもレイアウトが崩れないようにしてください。
スマホ画面は480px を想定して（ブレイクポイントは 480pxでなくても構いません。）、体裁よく見えるようデザインを工夫してください。

便利ツール

HTMLの記述をチェックしてみよう
　Gateway – Another HTML Lint
CSSの記述をチェックしてみよう
　CSS Validation Service
タグの意味等が思い出せない場合はこちらで調べてみよう
　HTML5リファレンス
CSS フレックスボックスの仕様
　CSS フレックスボックスレイアウト
　 CSS Flexboxチートシート
　【コピペOKのサンプル付き】Flexboxはこの5パターン覚えておけば大丈夫！
色の名前とカラーコードです
　HTMLカラーコード: WEB色見本原色大辞典
Googleフォント（ウェブフォント）
　 Google Fonts
画像圧縮ツール
　TinyJPG

アイコンについて

アイコンフォント

疑似要素をつかったアイコン

CSSの疑似要素とは？beforeとafterの使い方まとめ

画像＋テキスト

理解しておきたい、CSSによるインラインレイアウトの仕組み

2020年10月23日（金）

実技スマートフォン作成実習②

-本日のアジェンダ-

1限目
実技スマートフォン作成実習②
サーバアップロード

2限目
実技スマートフォン作成実習②
課題制作

3限目
実技スマートフォン作成実習②
課題制作

4限目
実技スマートフォン作成実習②
課題制作

5限目
実技スマートフォン作成実習②
課題制作

本日のテーマ

レスポンシブ対応でCSSを記述してみましょう

サイト制作課題

10月9日（金）に提出・「デザインカンプ」
10月16日（金）に提出・「WebサイトPC版（途中報告）」
10月23日（金）に提出・「Webサイトスマホ版（途中報告）」★
10月27日（火）第４回成績考査・「Webサイト（出来たところまで！）」

WEB制作課題のポイント

メインコンテンツの幅は960pxに納め、ブラウザ中央に表示してください。（ブレイクポイントは 960pxでなくても構いません。）
ブラウザの横幅を960px以下に狭めてもレイアウトが崩れないようにしてください。
スマホ画面は480px を想定して（ブレイクポイントは 480pxでなくても構いません。）、体裁よく見えるようデザインを工夫し表示してください。

便利ツール

HTMLの記述をチェックしてみよう
　Gateway – Another HTML Lint
CSSの記述をチェックしてみよう
　CSS Validation Service
タグの意味等が思い出せない場合はこちらで調べてみよう
　HTML5リファレンス
CSS フレックスボックスの仕様
　CSS フレックスボックスレイアウト
　 CSS Flexboxチートシート
　【コピペOKのサンプル付き】Flexboxはこの5パターン覚えておけば大丈夫！
色の名前とカラーコードです
　HTMLカラーコード: WEB色見本原色大辞典
Googleフォント（ウェブフォント）
　 Google Fonts
画像圧縮ツール
　TinyJPG

アイコンについて

アイコンフォント

疑似要素をつかったアイコン

CSSの疑似要素とは？beforeとafterの使い方まとめ

画像＋テキスト

理解しておきたい、CSSによるインラインレイアウトの仕組み

2020年10月26日（月）

実技スマートフォン作成実習③

-本日のアジェンダ-

1限目
実技スマートフォン作成実習③
サーバアップロード

2限目
実技スマートフォン作成実習③
課題制作

3限目
実技スマートフォン作成実習③
課題制作

4限目
実技スマートフォン作成実習③
課題制作

5限目
実技スマートフォン作成実習③
課題制作

本日のテーマ

レスポンシブ対応でCSSを記述してみましょう

サイト制作課題

10月9日（金）に提出・「デザインカンプ」
10月16日（金）に提出・「WebサイトPC版（途中報告）」
10月23日（金）に提出・「Webサイトスマホ版（途中報告）」
10月27日（火）第４回成績考査・「Webサイト（出来たところまで！）」★

WEB制作課題のポイント

メインコンテンツの幅は960pxに納め、ブラウザ中央に表示してください。（ブレイクポイントは 960pxでなくても構いません。）
ブラウザの横幅を960px以下に狭めてもレイアウトが崩れないようにしてください。
スマホ画面は480px を想定して（ブレイクポイントは 480pxでなくても構いません。）、体裁よく見えるようデザインを工夫し、表示してください。

便利ツール

HTMLの記述をチェックしてみよう
　Gateway – Another HTML Lint
CSSの記述をチェックしてみよう
　CSS Validation Service
タグの意味等が思い出せない場合はこちらで調べてみよう
　HTML5リファレンス
CSS フレックスボックスの仕様
　CSS フレックスボックスレイアウト
　 CSS Flexboxチートシート
　【コピペOKのサンプル付き】Flexboxはこの5パターン覚えておけば大丈夫！
色の名前とカラーコードです
　HTMLカラーコード: WEB色見本原色大辞典
Googleフォント（ウェブフォント）
　 Google Fonts
画像圧縮ツール
　TinyJPG

2020年10月27日（火）

実技スマートフォン作成実習④

-本日のアジェンダ-

1限目
実技スマートフォン作成実習④
成績考査

2限目
実技スマートフォン作成実習④
成績考査

3限目
実技スマートフォン作成実習④
成績考査

4限目
実技スマートフォン作成実習④
成績考査

5限目
実技スマートフォン作成実習④
成績考査

本日のテーマ

本日は成績考査です

5限終了時までに、Webサイトのサーバアップをお願いします。

サイト制作課題

WEB制作課題のポイント

メインコンテンツの幅は960pxに納め、ブラウザ中央に表示してください。（ブレイクポイントは 960pxでなくても構いません。）
ブラウザの横幅を960px以下に狭めてもレイアウトが崩れないようにしてください。
スマホ画面は480px を想定して（ブレイクポイントは 480pxでなくても構いません。）、体裁よく見えるようデザインを工夫してください。

便利ツール

HTMLの記述をチェックしてみよう
　Gateway – Another HTML Lint
CSSの記述をチェックしてみよう
　CSS Validation Service
タグの意味等が思い出せない場合はこちらで調べてみよう
　HTML5リファレンス
CSS フレックスボックスの仕様
　CSS フレックスボックスレイアウト
　 CSS Flexboxチートシート
　【コピペOKのサンプル付き】Flexboxはこの5パターン覚えておけば大丈夫！
色の名前とカラーコードです
　HTMLカラーコード: WEB色見本原色大辞典
Googleフォント（ウェブフォント）
　 Google Fonts
画像圧縮ツール
　TinyJPG

2020年10月29日（木）

学科 SNS運用基礎

-本日のアジェンダ-

1限目
学科 SNS運用基礎
SNS運用について

2限目
学科 SNS運用基礎
SNS運用について

3限目
学科 SNS運用基礎
課題制作

4限目
学科 SNS運用基礎
課題制作

5限目
学科 SNS運用基礎
課題制作

「SNS」の活用法とは？

SNS とは?

SNSとは、Social Networking Service（ソーシャル・ネットワーキング・サービス）の略で、インターネットを介して人間関係を構築できるスマホ・パソコン用のサービスの総称です。

参考サイト

SNSの埋め込み方

埋め込み例
のサイトURL
https://samplesdl.me/training_html-css/sns.html

2020年10月30日（金）

学科 WEB動画基礎

-本日のアジェンダ-

1限目
学科 WEB動画基礎
WEB動画について

2限目
学科 WEB動画基礎
WEB動画について

3限目
学科 WEB動画基礎
課題制作

4限目
学科 WEB動画基礎
課題制作

5限目
学科 WEB動画基礎
課題制作

本日のテーマ

「動画」の利用法と活用法

YouTubeにつて

YouTube （ ユーチューブ ）は、アメリカ合衆国・カリフォルニア州サンブルーノに本社を置く世界最大の動画共有サービス。Youは「あなた」、Tubeは「ブラウン管（テレビ）」という意味である。

参考サイト

2020年11月2日（月）

学科 JavaScript基礎

-本日のアジェンダ-

1限目
学科 JavaScript基礎
JavaScriptとjQueryについて

2限目
学科 JavaScript基礎
jQueryの取り入れ方

3限目
学科 JavaScript基礎
jQueryの記法について

4限目
学科 JavaScript基礎
作品制作

5限目
学科 JavaScript基礎
作品制作

本日のテーマ

ページトップボタンをjQueryで実装しよう

JavaScriptとは

【超入門】JavaScriptとは？できること・基本をわかりやすく解説

jQueryとは

jQuery（ジェイクエリー）は、ウェブブラウザ用のJavaScriptコードをより容易に記述できるようにするために設計された軽量なJavaScriptライブラリである。
引用元:ja.wikipedia.org

JavaScript初心者のためのjQuery入門

jQuery
jQuery公式サイト
jQuery日本語リファレンスの例
jQuery リファレンス

2020年11月3日（火）

実技　JavaScript（jQuery）実習①

本日のアジェンダ-

1限目
実技　JavaScript（jQuery）実習①
jQueryの記法について

2限目
実技　JavaScript（jQuery）実習①
jQuery（ハンバーガーメニュー＋ナビゲーションドロワー）の利用

3限目
実技　JavaScript（jQuery）実習①
作品制作

4限目
実技　JavaScript（jQuery）実習①
作品制作

5限目
実技　JavaScript（jQuery）実習①
作品制作

本日のテーマ

jQueryを自分のサイトに導入してみましょう。

jQueryとは

JavaScript初心者のためのjQuery入門

jQuery
jQuery公式サイト
jQuery日本語リファレンスの例
jQuery リファレンス

参考サイト

例：フェード

【jQuery】クロスフェードで切り替わるシンプルな画像スライドショー

例：ハンバーガーメニュー＋ナビゲーションドロワー

例：カルーセル（スライダー）

2020年11月4日（水）

実技　JavaScript（jQuery）実習②

本日のアジェンダ-

1限目
実技　JavaScript（jQuery）実習②
jQueryプラグイン（カルーセル）の利用

2限目
実技　JavaScript（jQuery）実習②
jQueryプラグイン（カルーセル）の利用

3限目
実技　JavaScript（jQuery）実習②
jQueryの利用

4限目
実技　JavaScript（jQuery）実習②
作品制作

5限目
実技　JavaScript（jQuery）実習②
作品制作

本日のテーマ

jQueryプラグインを自分のサイトに導入してみましょう。

jQueryとは

JavaScript初心者のためのjQuery入門

jQuery
jQuery公式サイト
jQuery日本語リファレンスの例
jQuery リファレンス

参考サイト

例：フェード

【jQuery】クロスフェードで切り替わるシンプルな画像スライドショー

例：ハンバーガーメニュー＋ナビゲーションドロワー

例：カルーセル（スライダー）

参考

カルーセルUIは使いやすい？デザインの観点から影響を考察してみました
カルーセルやスライダーUI例：
　東リファブリックフロア | TOP
　東リファブリックフロア | GALLERY | 施工例

2020年11月5日（木）

学科サーバーサイドプログラム基礎

-本日のアジェンダ-

1限目
学科サーバーサイドプログラム基礎
サーバーサイドプログラムについて

2限目
学科サーバーサイドプログラム基礎
サーバーサイドプログラムについて

3限目
学科サーバーサイドプログラム基礎
作品制作

4限目
学科サーバーサイドプログラム基礎
作品制作

5限目
学科サーバーサイドプログラム基礎
作品制作

本日のテーマ

WordPressをインストールしてみます。

サーバサイドスクリプト

PHPやPerlといったプログラミング言語があります。
これらの言語はWebサーバ上で動作します。このことから、これらの言語を「サーバサイドスクリプト」と呼びます。
何らかの操作を実行すると、Webサーバにデータが送信され、サーバの中のプログラムが処理を行い、結果をブラウザに返します。

クライアントサイドスクリプト

一方、JavaScriptでは、記述したHTMLファイルはWebサーバ上でも公開されますが、ブラウザさえあれば実行することが可能です。
Webサーバは必須ではありません。
これは、Webブラウザ内でプログラムが実行されるためです。
このようなスクリプトのことを「クライアントサイドスクリプト」と呼びます。

必要な知識として

合わせて（更に上級編）

それを整理すると

1.まずプログラムが動くサーバーを用意
2.PHPやCGIのプログラムファイルを用意
3.HTML・CSS （JavaScriptで動作）でデザインをカスタマイズする

参考サイト

【MailForm01】PHPメールフォーム多機能版（著作権リンク無し）フリー（無料）｜PHP工房

WordPressとは

参考サイト

インストールしてみましょう。

PHPとは

PHPとは動的にWebページを生成することができるサーバーサイドのスクリプト言語です。他のプログラミング言語と比較して仕様や文法が簡単なため習得しやすいと言われています。またMySQLなどのデータベースとの連携が容易なことなどから、WordPressを含めたWebアプリケーションの開発にもよく使われる有名なスクリプト言語でもあります。

参考サイト

ワードプレスのファイル構造

Contact Form 7

【簡単】Contact Form 7（WordPressお問い合わせフォーム設置 …

Classic Editor

WordPressを旧エディターに戻すプラグイン「Classic Editor」 | 創 …

参考サイト

ワードプレスのサーバー移転とバックアップについて

参考サイト

2020年11月6日（金）

学科 PHP基礎

-本日のアジェンダ-

1限目
学科 PHP基礎
作品制作

2限目
学科 PHP基礎
作品制作

3限目
学科 PHP基礎
作品制作

4限目
学科 PHP基礎
PHPについて

5限目
学科 PHP基礎
PHPについて

本日のテーマ

今日は雰囲気を理解してもらえればOK！

PHPとは

サーバサイドスクリプト

クライアントサイドスクリプト

必要な知識として

合わせて（更に上級編）

それを整理すると

1.まずプログラムが動くサーバーを用意
2.PHPやCGIのプログラムファイルを用意
3.HTML・CSS （JavaScriptで動作）でデザインをカスタマイズする

参考サイト

【MailForm01】PHPメールフォーム多機能版（著作権リンク無し）フリー（無料）｜PHP工房

WordPressとは

参考サイト

インストールしてみましょう。

参考サイト

ワードプレスのファイル構造

参考サイト

プラグインについて

プラグインは、WordPressの機能を拡張するためのツールです。
WordPress のコアは、柔軟性を保つため、不必要なコードでふくれあがってしまわないように設計されています。ユーザーそれぞれが特定のニーズに合ったプラグインを利用して、カスタム機能を取り入れられるように作られています。
WordPress Codex日本語版（公式オンラインマニュアル）

参考サイト

ワードプレスのサーバー移転とバックアップについて

参考サイト

2020年11月9日（月）

実技 CMS構築実習①

-本日のアジェンダ-

1限目
実技 CMS構築実習①
WordPressのテンプレートタグについて

2限目
実技 CMS構築実習①
WordPressの条件分岐タグについて

3限目
実技 CMS構築実習①
作品制作

4限目
実技 CMS構築実習①
作品制作

5限目
実技 CMS構築実習①
作品制作

本日のテーマ

HTML/CSSをWordPressのテーマにしてみましょう

参考サイト

WordPress Codex 日本語版
 【テーマ自作】WordPress オリジナルテーマの作り方と基本

サーバサイドスクリプト

クライアントサイドスクリプト

必要な知識として

合わせて（更に上級編）

それを整理すると

1.まずプログラムが動くサーバーを用意
2.PHPやCGIのプログラムファイルを用意
3.HTML・CSS （JavaScriptで動作）でデザインをカスタマイズする

参考サイト

【MailForm01】PHPメールフォーム多機能版（著作権リンク無し）フリー（無料）｜PHP工房

WordPressとは

参考サイト

インストールしてみましょう。

PHPとは

参考サイト

ワードプレスのファイル構造

Contact Form 7

【簡単】Contact Form 7（WordPressお問い合わせフォーム設置 …

Classic Editor

WordPressを旧エディターに戻すプラグイン「Classic Editor」 | 創 …

参考サイト

ワードプレスのサーバー移転とバックアップについて

参考サイト

2020年11月10日（火）

実技 CMS構築実習②

-本日のアジェンダ-

1限目
実技 CMS構築実習②
WordPressの投稿ページと固定ページ

2限目
実技 CMS構築実習②
WordPressの functions.phpについて

3限目
実技 CMS構築実習②
作品制作

4限目
実技 CMS構築実習②
作品制作

5限目
実技 CMS構築実習②
作品制作

本日のテーマ

HTML/CSSをWordPressのテーマにしてみましょう

参考サイト

サーバサイドスクリプト

クライアントサイドスクリプト

必要な知識として

合わせて（更に上級編）

それを整理すると

1.まずプログラムが動くサーバーを用意
2.PHPやCGIのプログラムファイルを用意
3.HTML・CSS （JavaScriptで動作）でデザインをカスタマイズする

参考サイト

【MailForm01】PHPメールフォーム多機能版（著作権リンク無し）フリー（無料）｜PHP工房

WordPressとは

参考サイト

インストールしてみましょう。

PHPとは

参考サイト

ワードプレスのファイル構造

Contact Form 7

【簡単】Contact Form 7（WordPressお問い合わせフォーム設置 …

Classic Editor

WordPressを旧エディターに戻すプラグイン「Classic Editor」 | 創 …

参考サイト

ワードプレスのサーバー移転とバックアップについて

参考サイト

2020年11月12日（木）

学科 WEBマーケティング基礎

-本日のアジェンダ-

1限目
学科 WEBマーケティング基礎
Googleアナリティクスについて

2限目
学科 WEBマーケティング基礎
Googleアナリティクスについて

3限目
学科 WEBマーケティング基礎
作品制作

4限目
学科 WEBマーケティング基礎
作品制作

5限目
学科 WEBマーケティング基礎
作品制作

本日のテーマ

アナリティクスについて

Googleアナリティクス

Google Analyticsは、Googleが無料で提供するWebページのアクセス解析サービス。元々はGoogleが2005年に買収した、米国のWeb解析ソリューションプロバイダー・Urchin社の技術を利用している。

Googleウェブマスターツール(
Google Search Console )について

2020年11月13日（金）

実技　ポートフォリオ作成実習

-本日のアジェンダ-

1限目
実技　ポートフォリオ作成実習
ポートフォリオ制作について

2限目
実技　ポートフォリオ作成実習
ポートフォリオ制作について

3限目
実技　ポートフォリオ作成実習
ポートフォリオ制作について

4限目
実技　ポートフォリオ作成実習
作品制作

5限目
実技　ポートフォリオ作成実習
作品制作

本日のテーマ

今日は振り返りましょう！

2020年11月14日（土）

職業人講話①

-本日のアジェンダ-

1限目
職業人講話①
業界のお話について

2限目
職業人講話①
業界のお話について

3限目
職業人講話①
業界のお話について

4限目
職業人講話①
業界のお話について

5限目
職業人講話①
業界のお話について

ザクロバッカについて

ZAQRO-BACCA合同会社はサービス企業です。
私たちは怠慢になることをせず、常にお客様の事を考え顧客満足度を高めます。
プロ意識を持って、考え、行動し自己管理の下にお客様と共に成長していきます。

サイトURL

新宿・中野のWEBサイト制作・ECコンサルはZAQROBACCA

2020年11月16日（月）

実技デザイン総合制作実習①

-本日のアジェンダ-

1限目
実技　デザイン総合制作実習 ①
補足： WordPressのパーツファイルについて

2限目
実技　デザイン総合制作実習 ①
補足： WordPressのパーツファイルについて

3限目
実技　デザイン総合制作実習 ①
ポートフォリオ制作

4限目
実技　デザイン総合制作実習 ①
ポートフォリオ制作

5限目
実技　デザイン総合制作実習 ①
ポートフォリオ制作

本日の補足

WordPress：要素の共通部分をまとめてみましょう。

参考サイト

サーバサイドスクリプト

クライアントサイドスクリプト

必要な知識として

合わせて（更に上級編）

それを整理すると

1.まずプログラムが動くサーバーを用意
2.PHPやCGIのプログラムファイルを用意
3.HTML・CSS （JavaScriptで動作）でデザインをカスタマイズする

参考サイト

【MailForm01】PHPメールフォーム多機能版（著作権リンク無し）フリー（無料）｜PHP工房

WordPressとは

参考サイト

インストールしてみましょう。

PHPとは

参考サイト

ワードプレスのファイル構造

Contact Form 7

【簡単】Contact Form 7（WordPressお問い合わせフォーム設置 …

Classic Editor

WordPressを旧エディターに戻すプラグイン「Classic Editor」 | 創 …

参考サイト

ワードプレスのサーバー移転とバックアップについて

参考サイト

2020年11月17日（火）

実技デザイン総合制作実習②

-本日のアジェンダ-

1限目
実技　デザイン総合制作実習 ②
補足： WordPressのカテゴリページ

2限目
実技　デザイン総合制作実習 ②
補足： WordPressの条件分岐タグ

3限目
実技　デザイン総合制作実習 ②
作品制作

4限目
実技　デザイン総合制作実習 ②
作品制作

5限目
実技　デザイン総合制作実習 ②
作品制作

本日の補足

WordPress：カテゴリ・タグ・ユーザ別に記事を表示してみましょう。

参考サイト

サーバサイドスクリプト

クライアントサイドスクリプト

必要な知識として

合わせて（更に上級編）

それを整理すると

1.まずプログラムが動くサーバーを用意
2.PHPやCGIのプログラムファイルを用意
3.HTML・CSS （JavaScriptで動作）でデザインをカスタマイズする

参考サイト

【MailForm01】PHPメールフォーム多機能版（著作権リンク無し）フリー（無料）｜PHP工房

WordPressとは

参考サイト

インストールしてみましょう。

PHPとは

参考サイト

ワードプレスのファイル構造

Contact Form 7

【簡単】Contact Form 7（WordPressお問い合わせフォーム設置 …

Classic Editor

WordPressを旧エディターに戻すプラグイン「Classic Editor」 | 創 …

参考サイト

ワードプレスのサーバー移転とバックアップについて

参考サイト

2020年11月18日（水）

実技デザイン総合制作実習③

-本日のアジェンダ-

1限目
実技　デザイン総合制作実習 ③
大浜の自己紹介・ポートフォリオの説明と職務経歴書の書き方のポイント

2限目
実技　デザイン総合制作実習 ③
作品制作

3限目
実技　デザイン総合制作実習 ③
作品制作

4限目
実技　デザイン総合制作実習 ③
作品制作

5限目
実技　デザイン総合制作実習 ③
作品制作

2020年11月19日（木）

実技デザイン総合制作実習④

-本日のアジェンダ-

1限目
実技　デザイン総合制作実習 ④
JavaScriptを使ったWebアプリケーションの開発

2限目
実技　デザイン総合制作実習 ④
作品制作

3限目
実技　デザイン総合制作実習 ④
作品制作

4限目
実技　デザイン総合制作実習 ④
作品制作

5限目
実技　デザイン総合制作実習 ④
作品制作

JavaScript開発資料
キッチンタイマーのような指定時間をカウントダウンするタイマーアプリを開発資料：DropBox→その他→JavaScript→timer_201119.zip

2020年11月20日（金）

実技デザイン総合制作実習⑤

-本日のアジェンダ-

1限目
実技　デザイン総合制作実習 ⑤
JavaScriptを使ったWebアプリケーションの開発（昨日の続き）

2限目
実技　デザイン総合制作実習 ⑤
作品制作

3限目
実技　デザイン総合制作実習 ⑤
作品制作

4限目
実技　デザイン総合制作実習 ⑤
作品制作

5限目
実技　デザイン総合制作実習 ⑤
作品制作

JavaScript開発資料
キッチンタイマーのような指定時間をカウントダウンするタイマーアプリを開発資料：DropBox→その他→JavaScript→timer_201119.zip

2020年11月24日（火）

実技デザイン総合制作実習⑥

-本日のアジェンダ-

1限目
実技　デザイン総合制作実習 ⑥
WordPress画像のアップロードについて

2限目
実技　デザイン総合制作実習 ⑥
WordPress画像の追加CSSについて

3限目
実技　デザイン総合制作実習 ⑥
作品制作

4限目
実技　デザイン総合制作実習 ⑥
作品制作

5限目
実技　デザイン総合制作実習 ⑥
作品制作

今週のテーマ

A4版ポートフォリオの見通しが立っている方、WordPress版のポートフォリオについても整備してみましょう。

ポートフォリオ制作課題と修了式について

12月4日(金)・5日(土)　発表会
　※ 5日(土)の5限修了までにDropBoxに、資料をアップしてください。
12月7日(月) 　修了式

WordPressのテーマ

便利ツール（画像圧縮）

画像圧縮ツール（いつものパンダです）
　TinyJPG
画像圧縮ツール（WordPressプラグイン版）
【画像圧縮】Compress JPEG & PNG images プラグインの設定と使い方

追加CSSについて

【ワードプレス】追加CSSを使ってカスタマイズしてみよう！

WordPressの子テーマ

子テーマ – WordPress Codex 日本語版

2020年11月25日（水）

実技デザイン総合制作実習⑦

-本日のアジェンダ-

1限目
実技　デザイン総合制作実習 ⑦
WordPress画像の子テーマについて

2限目
実技　デザイン総合制作実習 ⑦
作品制作

3限目
実技　デザイン総合制作実習 ⑦
作品制作

4限目
実技　デザイン総合制作実習 ⑦
作品制作

5限目
実技　デザイン総合制作実習 ⑦
作品制作

今週のテーマ

A4版ポートフォリオの見通しが立っている方、WordPress版のポートフォリオについても整備してみましょう。

ポートフォリオ制作課題と修了式について

12月4日(金)・5日(土)　発表会
　※ 5日(土)の5限修了までにDropBoxに、資料をアップしてください。
12月7日(月) 　修了式

WordPressのテーマ

便利ツール（画像圧縮）

WordPressの追加CSSについて

【ワードプレス】追加CSSを使ってカスタマイズしてみよう！

WordPressの子テーマ

子テーマ – WordPress Codex 日本語版

2020年11月26日（木）

実技デザイン総合制作実習⑧

-本日のアジェンダ-

1限目
実技　デザイン総合制作実習 ⑧
作品制作

2限目
実技　デザイン総合制作実習 ⑧
作品制作

3限目
実技　デザイン総合制作実習 ⑧
作品制作

4限目
実技　デザイン総合制作実習 ⑧
作品制作

5限目
実技　デザイン総合制作実習 ⑧
作品制作

今週のテーマ

A4版ポートフォリオの見通しが立っている方、WordPress版のポートフォリオについても整備してみましょう。

ポートフォリオ制作課題と修了式について

12月4日(金)・5日(土)　発表会
　※ 5日(土)の5限修了までにDropBoxに、資料をアップしてください。
12月7日(月) 　修了式

WordPressのテーマ

便利ツール（画像圧縮）

WordPressの追加CSSについて

【ワードプレス】追加CSSを使ってカスタマイズしてみよう！

WordPressの子テーマについて

子テーマ – WordPress Codex 日本語版

WordPressサイトのパスワード

サイト入り口にパスワードを作成するプラグインHide My Siteの使い方子

2020年11月27日（金）

実技デザイン総合制作実習⑨

-本日のアジェンダ-

1限目
実技　デザイン総合制作実習 ⑨
作品制作

2限目
実技　デザイン総合制作実習 ⑨
作品制作

3限目
実技　デザイン総合制作実習 ⑨
作品制作

4限目
実技　デザイン総合制作実習 ⑨
作品制作

5限目
実技　デザイン総合制作実習 ⑨
作品制作

本日のテーマ

Webデザイナーとしての生き方

セミナーとは？

大学の教育方法の一つ。先生の指導のもとに学生が集まってする共同研究。演習。
一般に、研究講習会。「経営―」▷ 「ゼミナール」とも言う。 seminar

【ワンポイント！】
技術セミナーは最低6割知っている知識の内容のセミナーに参加しましょう。
質疑応答はありますが、登壇者は決められたセッション（時間内）に話す内容が決まっているので、基本知識が無いと意味不明で終わることがあります。

スクールとは？

スクール (school) は英語で「学校」の意味。ギリシャ語のscholé（学ぶ場所）に由来。

また日本では、法律上「学校」と称すことができない無認可校が「スクール」と称することがある。

【ワンポイント！】
スクールは有料で高額です。何を学びたいのか、後にどうなるのかを明確にしておかないと得をしないケースが多いです。

書籍について

【ワンポイント！】
技術には賞味期限があります。ただ基本の1～10を学ぶのには丁度よかったりもします。これもセミナーと同じく最低6割以上基本知識知っている書籍を選んで読んでみると良いかと思います。
一番のおススメは、立ち読みです！

ネット検索について

【ワンポイント！】
便利でピンポイントの情報を調べられますが、「誤報」が多いです。
更新履歴や情報の発信元などに注意して調べてみましょう。

セミナー・スクール等の一例

2020年11月28日（土）

実技デザイン総合制作実習⑩

-本日のアジェンダ-

1限目
実技　デザイン総合制作実習 ⑩
作品制作

2限目
実技　デザイン総合制作実習 ⑩
作品制作

3限目
実技　デザイン総合制作実習 ⑩
作品制作

4限目
実技　デザイン総合制作実習 ⑩
作品制作

5限目
実技　デザイン総合制作実習 ⑩
作品制作

本日のテーマ

Webデザイナーとしての生き方

セミナーとは？

大学の教育方法の一つ。先生の指導のもとに学生が集まってする共同研究。演習。
一般に、研究講習会。「経営―」▷ 「ゼミナール」とも言う。 seminar

スクールとは？

スクール (school) は英語で「学校」の意味。ギリシャ語のscholé（学ぶ場所）に由来。

また日本では、法律上「学校」と称すことができない無認可校が「スクール」と称することがある。

【ワンポイント！】
スクールは有料で高額です。何を学びたいのか、後にどうなるのかを明確にしておかないと得をしないケースが多いです。

書籍について

ネット検索について

セミナー・スクール等の一例

2020年11月30日（月）

実技デザイン総合制作実習⑪

-本日のアジェンダ-

1限目
実技　デザイン総合制作実習 ⑪
HTML/CSS Tips

2限目
実技　デザイン総合制作実習 ⑪
作品制作

3限目
実技　デザイン総合制作実習 ⑪
作品制作

4限目
実技　デザイン総合制作実習 ⑪
作品制作

5限目
実技　デザイン総合制作実習 ⑪
作品制作

HTML/CSS Tips
HTML/CSSで注意する項目の再確認
資料：DropBox→資料→HtmlCss→tips_201130.zip
JavaScript開発資料（参考）（11月19-20日作成アプリの機能追加版）
キッチンタイマーのようなタイマーアプリ（機能追加版）
資料：DropBox→その他→JavaScript→timer_201130.zip

2020年12月1日（火）

実技デザイン総合制作実習⑫

-本日のアジェンダ-

1限目
実技　デザイン総合制作実習 ⑫
作品制作

2限目
実技　デザイン総合制作実習 ⑫
作品制作

3限目
実技　デザイン総合制作実習 ⑫
作品制作

4限目
実技　デザイン総合制作実習 ⑫
作品制作

5限目
実技　デザイン総合制作実習 ⑫
作品制作

2020年12月2日（水）

実技デザイン総合制作実習⑬

-本日のアジェンダ-

1限目
実技　デザイン総合制作実習 ⑬
作品制作

2限目
実技　デザイン総合制作実習 ⑬
作品制作

3限目
実技　デザイン総合制作実習 ⑬
作品制作

4限目
実技　デザイン総合制作実習 ⑬
作品制作

5限目
実技　デザイン総合制作実習 ⑬
作品制作

ポートフォリオ発表会と修了式に向けて

12月2日(火)　発表会準備
　・5限目修了までに、発表用資料を一旦アップしてください。
　　ドロップボックス＞【中間報告】ポートフォリオ201202
　　＞ grade-check_(お名前)_201202.pdf

12月4日(金)　発表会 ①
　・発表修了後は、ご自身の作品のブラッシュアップを行う時間とします。

12月5日(土)午前　発表会 ②
　・発表修了後までに、資料を最終アップしてください。
　　ドロップボックス＞【0054】第５回成績考査
　　＞ grade-check_(お名前)_201205.pdf
　・午後、パソコンデータ（ＦＴＰアカウント・ブラウザ履歴等）を綺麗にします。
　　それまでに、ご自身のデータやドロップボックスのデータをＵＳＢに移しておいてください。

12月7日(月) 　修了式
　・パソコンは利用しません

発表会の進め方

一人あたり5～10分程度のプレゼンをお願いいたします。
皆様からのコメントを記述いただきたく（無記名・ドロップボックスにフォーマットあり）、プレゼン後記入の時間を数分とります。
まずは、自分(とその作品)を時間内にまとめてアピールする練習にしてみましょう。
課題・悩んでいる点等も、発表してみてください。

(以上)

2020年12月4日（金）

実技デザイン総合制作実習⑭

-本日のアジェンダ-

1限目
実技　デザイン総合制作実習 ⑭
発表会

2限目
実技　デザイン総合制作実習 ⑭
発表会

3限目
実技　デザイン総合制作実習 ⑭
発表会

4限目
実技　デザイン総合制作実習 ⑭
データ整理

5限目
実技　デザイン総合制作実習 ⑭
データ整理

ポートフォリオ発表会と修了式に向けて

12月2日(火)　発表会準備
　・5限目修了までに、発表用資料を一旦アップしてください。
　　ドロップボックス＞提出＞【中間報告】ポートフォリオ201202
　　＞ grade-check_(お名前)_201202.pdf
　　⇒移動しました。

12月4日(金)　発表会 ①
　・午前中、発表を実施します。
　・発表修了後は、ご自身の作品のブラッシュアップを行う時間とします。
　・本日の授業終了までに、ポートフォリオを提出してください。
　　ドロップボックス＞提出＞【0054】第５回成績考査
　　＞ grade-check_(お名前)_201205.pdf

12月5日(土)午前　発表会 ②
　・午後、パソコンデータ（ＦＴＰアカウント・ブラウザ履歴等）を綺麗にします。それまでに、ご自身のデータやドロップボックスのデータをＵＳＢに移しておいてください。

12月7日(月) 　修了式
　・パソコンは利用しません

発表会の進め方

一人あたり5～10分程度のプレゼンをお願いいたします。
皆様からのコメントを記述いただきたく（無記名・ドロップボックスにフォーマットあり）、プレゼン後記入の時間を数分とります。
記入が終わりましたら、ドロップボックス＞提出＞【0054】第５回成績考査＞00フィードバックに提出してください。
まずは、自分(とその作品)を時間内にまとめてアピールする練習にしてみましょう。
課題・悩んでいる点等も、発表してみてください。

(以上)

2020年12月5日（土）

実技デザイン総合制作実習⑮

-本日のアジェンダ-

1限目
実技　デザイン総合制作実習 ⑭
発表会

2限目
実技　デザイン総合制作実習 ⑭
発表会

3限目
実技　デザイン総合制作実習 ⑭
発表会

4限目
実技　デザイン総合制作実習 ⑭
データ整理

5限目
実技　デザイン総合制作実習 ⑭
データ整理

ポートフォリオ発表会と修了式に向けて

発表会の進め方

一人あたり5～10分程度のプレゼンをお願いいたします。
皆様からのコメントを記述いただきたく（無記名・ドロップボックスにフォーマットあり）、プレゼン後記入の時間を数分とります。
まずは、自分(とその作品)を時間内にまとめてアピールする練習にしてみましょう。
課題・悩んでいる点等も、発表してみてください。

(以上)

2020年12月7日（月）

修了式

1限目
職業人講話②
就職に向けての話

2限目
修了式

3限目
修了式

202006開講-昼A-0054

2020年6月8日（月）

開講式・オリエンテーション

-本日のアジェンダ-

2020年7月14日（火）

学科 就職支援

-本日アジェンダ-

本日のポイント

指定したアプリでファイルを開く方法

参考サイト

Windows10の拡張子の出し方

参考サイト

2020年7月15日（水）

学科 WEBプログラミング基礎①

-本日アジェンダ-

本日のポイント

2020年7月16日（木）

学科 WEBプログラミング基礎 ②

-本日のアジェンダ-

本日のポイント

検索テクニックの小ネタとして

WEBサイトの参考サイト集

2020年7月17日（金）

学科 WEBコンサルティング基礎 ①

-本日アジェンダ-

本日のテーマ

WEB業界のお仕事

WEBサイトの参考サイト集

WEBサイトを誰に見せるのか(ペルソナ)

2020年7月18日（土）

学科 WEBコンサルティング基礎 ②

-本日アジェンダ-

本日のテーマ

2020年7月20日（月）

学科 グラフィックデザイン基礎①

-本日アジェンダ-

本日テーマ

2020年7月21日（火）

学科 グラフィックデザイン基礎②

-本日のアジェンダ-

本日のテーマ

■写真加工のおススメルール

■写真素材（練習用）

■無料写真素材のサイト

■PHOTOSHOP 操作のキーワード

2020年7月22日（水）

学科 グラフィックデザイン基礎③

本日のアジェンダ

本日のテーマ

本日のキーワード

参考サイト

2020年7月23日（木）

学科 グラフィックデザイン基礎④

本日のアジェンダ

本日のテーマ

■ 本日のキーワード

■ 本日のキーワード （レタッチ）

□ 写真素材（練習用）

2020年7月24日（金）

学科 グラフィックデザイン基礎⑤

-本日のアジェンダ-

本日のテーマ

本日のキーワード

スポイトツール

参考サイト

2020年7月27日（月）

学科 グラフィックデザイン基礎⑥

-本日アジェンダ-

本日のテーマ

■ 本日のキーワード（範囲選択）

□ 参考サイト

□写真素材（練習用）

■ 本日のキーワード（色調補正）

□ 参考サイト

□写真素材（練習用）

2020年7月28日（火）

学科 グラフィックデザイン基礎⑦

-本日のアジェンダ-

本日のテーマ

Illustrator操作のキーワード

学科　就職支援

学科グラフィックデザイン基礎①

学科グラフィックデザイン基礎②

■PHOTOSHOP　操作のキーワード

学科グラフィックデザイン基礎③

学科グラフィックデザイン基礎④

■ 本日のキーワード（レタッチ）

学科グラフィックデザイン基礎⑤

学科グラフィックデザイン基礎⑥

学科グラフィックデザイン基礎⑦

学科グラフィックデザイン基礎⑧

学科グラフィックデザイン基礎⑨

学科グラフィックデザイン基礎⑩

学科グラフィックデザイン基礎⑪

学科グラフィックデザイン基礎⑫

実技イラストロゴ作成実習①