2021年4月20日（火）

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

2021年4月20日By admin その他

-本日のアジェンダ-

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

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

研修メモ

覚書

2021年4月21日（水）

学科安全衛生学科就職支援

2021年4月21日By admin その他

–本日のアジェンダ–

1限目
学科安全衛生
データの管理方法と取り扱いについて

2限目
学科就職支援
自己紹介について

3限目
学科就職支援
他己紹介について

4限目
学科就職支援
他己紹介の準備

5限目
学科就職支援
他己紹介の準備

本日のポイント

ご挨拶について考えてみましょう

最初の準備として

USBメモリー等は安全な取り外しを徹底してください
Windows 10でパソコンに接続したUSBメモリ … – NEC Lavie
「常にXXXを使ってファイルを開く」方法
Windows 10でファイルとアプリの関連付けを変更する …
拡張子を表示させる
Windows10 – ファイルの拡張子を表示/非表示にする – PC設定 …
メインブラウザの設定
Google Chromeを既定のブラウザに設定する(Windows10 …

【授業が終わったら…】PCは必ずシャットダウンをして「電源が切れたのを確認してから」モニターを閉じてください。

ジョブカードについて

ジョブ・カードとは、以下のとおり、「生涯を通じたキャリア・プランニング」及び「職業能力証明」の機能を担うツールであり、個人のキャリアアップや、多様な人材の円滑な就職等を促進するため、労働市場インフラとして、キャリアコンサルティング等の個人への相談支援のもと、求職活動、職業能力開発などの各場面において活用するものです。

参考サイト

ジョブ・カードとは｜ジョブ・カード制度総合サイト｜厚生労働省

履歴書とは？

履歴書とは、学業や職業の経歴など人物の状況を記した書類のことで、就職や転職時に選考用の資料として用いられる。また、学歴や職歴によって給与や資格などを決定する手続きにおいて、それを証明する各種の書類とともに提出する。ウィキペディア

参考サイト

職務経歴書とは？

職務経歴書は、当人が過去に従事した職務・職業上の地位、および当該職務の具体的内容を、当人の職歴として時系列的またはキャリア、プロジェクトタイプなどをベースに記載した書面のことで、第三者に提示するために使用され、時として履歴書とともに使用される。ウィキペディア

参考サイト

自己紹介

自己紹介とは、初めて会う人などに、姓名・職業などを述べ自分が何者であるかを説明すること。普通は“よろしく”という挨拶の意を兼ねる。その方法は大勢の前での口頭によるもの、名刺を差し出して行うもの、電話で自分の所属・地位・名前を述べるものなど様々である。ウィキペディア

他己紹介

ある他人のことを大勢の人に対して紹介すること。自分自身を紹介する「自己紹介」と対をなす語である。主に、新入社員の研修の場や、学校教育のレクリェーションの場などで行われる。

ワンポイントアドバイス！

自己紹介（他己紹介）では、冒頭で簡潔に「現在」「過去」「未来」を入れてみましょう。

研修メモ

覚書

2021年4月22日（木）

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

2021年4月22日By admin その他

-本日アジェンダ-

1限目
学科 WEBプログラミング基礎①
学習環境に関する補足

2限目
学科 WEBプログラミング基礎①
学習環境に関する補足

3限目
学科 WEBプログラミング基礎①
学習環境に関する補足

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

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

本日のポイント

プレゼンを具現化してみましょう。

文字おこしのポイントについて

PCを使ったお仕事でメモを取り文面にする事に慣れてみましょう。
今後の履歴書や職務経歴書、ポートフォリオに文言で説明する事も大切になります。まずは他己紹介で紹介する方を上手に文面で表現してみましょう。

参考サイト

課題提出の方法について

拡張子について

ショートカットキーについて

研修メモ

覚書

2021年4月24日（土）

WEBプログラミング基礎②

2021年4月24日By admin その他 “WEBプログラミング基礎②”の編集

-本日アジェンダ-

1限目
学科 WEBプログラミング基礎②
他己紹介

2限目
学科 WEBプログラミング基礎②
他己紹介（発表）

3限目
学科 WEBプログラミング基礎②
他己紹介（発表）

4限目
学科 WEBプログラミング基礎②
Webとは？について

5限目
学科 WEBプログラミング基礎②
Webとは？について

本日のポイント

Webとはについて確認しましょう。

文字おこしのポイントについて

参考サイト

課題提出の方法について

拡張子について

ショートカットキーについて

研修メモ

覚書

2021年4月26日（月）

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

2021年4月26日By admin その他 “学科 WEBコンサルティング基礎①”の編集

-本日アジェンダ-

1限目
学科 WEBコンサルティング基礎①
Webサイト制作の流れについて

2限目
学科 WEBコンサルティング基礎①
コンサルタントとは？

3限目
学科 WEBコンサルティング基礎①
企画を考えてみましょう

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

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

本日のポイント

5ヶ月の制作の企画とスケジュールを確認しましょう

コンサルタントとは？

コンサルティングとは、企業などの役員に対して解決策を示し、その発展を助ける業務のこと。または、その業務を行うこと。対応する日本語はない。社会的に、コンサルティング会社は、特定の事業に特化した事業会社とは区別され、コンサルティングファームと呼ばれる。ウィキペディア

参考サイト

研修メモ

覚書

2021年4月27日（火）

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

2021年4月27日By admin その他 “学科 WEBコンサルティング基礎②”の編集

-本日アジェンダ-

1限目
学科 WEBコンサルティング基礎②
企画をまとめてみましょう

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

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

4限目
学科 WEBコンサルティング基礎②
お見積りについて

5限目
学科 WEBコンサルティング基礎②
お見積りについて

本日のポイント

企画は最初が大事

見積とは？

見積とは、金額・量・期間・行動を前もって概算すること。見積もること。あらましの計算をすること。また、その計算。目算。見積り、見積もりとも書く。また、それらを書面に記載したものを見積書と呼ぶ。以下の説明は、特に断りがない限りでは売買契約における見積を説明する。ウィキペディア

参考サイト

サイトマップ（情報設計）とは？

一般的に、サイトを制作する際には、Photoshopなどでデザインを始める前に、まずサイトの情報設計を行います。
情報設計とは、ざっくり言うとサイトの目的を果たすために、サイトの中に何を記載するか、どんな機能を設けるのかを決めること。

研修メモ

覚書

2021年4月28日（水）

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

2021年4月28日By admin 学科グラフィックデザイン基礎 “学科グラフィックデザイン基礎①”の編集

-本日のアジェンダ-

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

2限目
学科グラフィックデザイン基礎①
オブジェクト移動方法について

3限目
学科グラフィックデザイン基礎①
図形の描き方について

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

5限目
学科グラフィックデザイン基礎①
本日のまとめ

本日テーマ

保存：「Ctrl」＋「S」はこまめにしましょう。

本日のIllustratorの基本操作

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

新規作成・開く

Illustratorを起動すると、スタートワークスペースが表示されます。
「新規作成」をクリックして、新規ドキュメントダイアログボックスを開きます。

保存(ai)・別名で保存（pdf）

Illustrator ドキュメントを保存すると、アートワークデータはファイルに書き出されます。データの構造は、選択したファイル形式によって異なります。アートワークを保存できる基本的なファイル形式には、AI、PDF、EPS、FXG および SVG の 5 種類があります。
またWEBサイト用の画像「jpg、gif、png」に保存することもできます。
あと、もう一つ専用ソフトが無い方にも見てもらえるように「pdf」への保存も可能です。

ショートカットキーについて

Windows版
　保存：「Ctrl」＋「S」
　　別名で保存：「Shift」「Ctrl」＋「S」
　　Web用に保存（従来）：「Alt」「Shift」「Ctrl」＋「S」

参考サイト

ワンポイントアドバイス

新規ファイルを作成したらまず「保存」をしましょう。

アートボード

アートボードは、絵画にたとえればアートワークを作成するためのキャンバスのようなものです。 アートボード内にアートワークを作成することで印刷時に書き出される範囲の目安になります。

参考サイト

選択ツール

オブジェクト全体（グループ含む）を選択するツールです。このツールで選択されたオブジェクトは、周囲にバウンディングボックスが表示され、オブジェクトの拡大・縮小・回転などを行うことができます。基本的な使い方は、オブジェクトをクリックして選択、もしくはドラッグして選択するだけです。

参考サイト

図形ツール

イラストレーターでオブジェクトを描画する方法は多数存在します。その中で、四角形や円など簡単な図形を描くのに向いているのが「図形ツール」です。図形ツールを使うことで、単純な図形を素早く効率的にアートボード上に作ることができます

参考サイト

パスファインダーツール

パスファインダーとは複数のパスを合成させたり、逆に一方のパスからもう一方の形を切り抜いたりする事ができる一連の機能の事です。手作業では再現が難しい幾何学的なパスも工夫次第で比較的簡単に作ることができます。

参考サイト

プロパティパネル

Illustrator CC2018のプロパティパネルとは、ウィンドウ上部に表示されていたコントロールパネルをさらに使いやすくしたものになります。

ズームツール

画面上を拡大表示や縮小表示して作業しやすくします。細かい作業をするために拡大表示がしたい、または全体を確認したいので拡大表示したい場合がります。そんなときにはズームツールを使用します。

本日の課題

とにかく何かを描いたpdfのデータをドロップボックスのご自身のファイルにUPしてください。
※pdfのファイルは必ず「最小ファイルサイズ」でUPしてください。

研修メモ

覚書

2021年4月29日（木）

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

2021年4月29日By admin 学科グラフィックデザイン基礎

-本日のアジェンダ-

1限目
学科グラフィックデザイン基礎②
塗りと線について

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

3限目
学科グラフィックデザイン基礎②
アンカーポイントとハンドルについて

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

5限目
学科グラフィックデザイン基礎②
本日のまとめ

本日テーマ

塗と線について理解してみましょう。

本日のIllustratorの基本操作

塗りと線
ダイレクト選択ツール
パス「アンカーポイント」「ハンドル」「セグメント」
アンカーポイント切り替えツール
シェイプ形成ツール
レイヤーパネル

引き続きの基本操作

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

オブジェクトの塗りと線

Illustratorの最大の特徴は塗と線で構成されているという事です。この特徴を理解することで、様々な絵を描くこと下出来ますので、常に塗と線を意識してIllustratorを使いこなしてみましょう。

参考サイト

ダイレクト選択ツール

選択ツールがオブジェクト全体の移動や複製に使用するのに対し、ダイレクト選択ツールは、オブジェクトの部分を編集するのに使います。

参考サイト

パス「アンカーポイント」「ハンドル」「セグメント」

Illustrator で描画したオブジェクトは「パス」で構成されています。「パス」には、図形を構成する点として「アンカーポイント」が存在します。この「アンカーポイント」を操作することで、オブジェクトを多彩な形に変形することができます。
パスは「アンカーポイント」「セグメント」「ハンドル」の3つの部位からなりたっており、これら3つの部位を含んだすべてを「パス」といいます。

参考サイト

アンカーポイント切り替えツール

Adobe Illustrator（アドビイラストレーター）のベジェ曲線の描き方（切り替えツール）を解説しています。 … 終点から「切り替えツール」でドラッグすると、アンカーポイントから正反対に伸びている2本の方向線のうち、片方を折って方向を変えることができます。

参考サイト

シェイプ形成ツール

Shaper ツールを使うと、シェイプをまとめて描画、スタック、配置して、単に結合、マージ、削除、移動することで複雑かつ美しいデザインを作成できます。以前は複数の操作を必要としていた操作を、シンプルで直感的に行うことが出来ます。

参考サイト

レイヤーパネル

複雑なアートワークを作成する場合、ドキュメントウィンドウ内のすべてのアイテムの場所を把握しておくことは難しい問題です。小さなアイテムが大きなアイテムの下に隠れてしまうと、アートワークを選択することは困難になります。レイヤーを使用すれば、アートワークを構成するすべてのアイテムを管理できます。

参考サイト

新規作成・開く

保存(ai)・別名で保存（pdf）

ショートカットキーについて

　Windows版
　保存：「Ctrl」＋「S」
　　別名で保存：「Shift」「Ctrl」＋「S」
　　Web用に保存（従来）：「Alt」「Shift」「Ctrl」＋「S」

参考サイト

ワンポイントアドバイス

新規ファイルを作成したらまず「保存」をしましょう。

アートボード

参考サイト

選択ツール

参考サイト

図形ツール

参考サイト

パスファインダーツール

参考サイト

プロパティパネル

Illustrator CC2018のプロパティパネルとは、ウィンドウ上部に表示されていたコントロールパネルをさらに使いやすくしたものになります。

ズームツール

本日の課題

研修メモ

覚書

2021年4月30日（金）

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

2021年4月30日By admin 学科グラフィックデザイン基礎

-本日のアジェンダ-

1限目
学科グラフィックデザイン基礎③
塗りと線について

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

3限目
学科グラフィックデザイン基礎③
アンカーポイントとハンドルについて

4限目
学科グラフィックデザイン基礎③
アンカーポイント切り替えツールについて

5限目
学科グラフィックデザイン基礎③
本日のまとめ

本日テーマ

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

本日のIllustratorの基本操作

ペンツール
リフレクトツールと回転ツール
曲線ツール
ハサミツール
変形の繰り返し「Ctrl+D」

引き続きの基本操作

新規作成・開く
アートボード
選択ツール
長方形ツール
楕円形ツール
多角形ツール
スターツール
パスファインダー（合体・型抜き・交差）
プロパティパネル
ズームツール
保存(ai)・別名で保存（pdf）
塗りと線
ダイレクト選択ツール
パス「アンカーポイント」「ハンドル」「セグメント」
アンカーポイント切り替えツール
シェイプ形成ツール
レイヤーパネル

ペンツール

ペンツールによる直線セグメントの描画ペンツールを使用して作成できる最も単純なパスは直線です。ペンツールをクリックして 2 つのアンカーポイントを作成すると、それらのアンカーポイントを結ぶ直線が作成されます。

参考サイト

リフレクトツール

リフレクトツールはオブジェクトを反転させるツールです。鏡に映したような状態にするので鏡面反転ともいいます。反転したオブジェクトをコピーすることもできるので、左右対称のイラストなどを作る時に便利な機能です。

曲線ツール

曲線ツールを使用すると、パスの作成と描画を簡単で直感的に行うことができます。新しいツールでは、スムーズポイントまたはコーナーポイントの作成、切り替え、編集、追加または削除を行うことができます。

参考サイト

はさみツール

はさみツールはオブジェクトの一部を切り取るのに使うツールです。オブジェクトのパスの上にカーソルを合わせてクリックします。これを2箇所以上繰り返せば切り取られます。選択ツールで切り離してみましょう。

参考サイト

変形の繰り返し「Ctrl+D」

[Ctrl]キー+[D]キーを押下すると、メニューの[変形の繰り返し]をクリックしたときと同じ動作になります。 [Ctrl]キー+[D]キーを押すごとに6度回転した図形をコピーで生成できます。

オブジェクトの塗りと線

参考サイト

ダイレクト選択ツール

選択ツールがオブジェクト全体の移動や複製に使用するのに対し、ダイレクト選択ツールは、オブジェクトの部分を編集するのに使います。

参考サイト

パス「アンカーポイント」「ハンドル」「セグメント」

参考サイト

アンカーポイント切り替えツール

参考サイト

シェイプ形成ツール

参考サイト

レイヤーパネル

参考サイト

新規作成・開く

保存(ai)・別名で保存（pdf）

ショートカットキーについて

　Windows版
　保存：「Ctrl」＋「S」
　　別名で保存：「Shift」「Ctrl」＋「S」
　　Web用に保存（従来）：「Alt」「Shift」「Ctrl」＋「S」

参考サイト

ワンポイントアドバイス

新規ファイルを作成したらまず「保存」をしましょう。

アートボード

参考サイト

選択ツール

参考サイト

図形ツール

参考サイト

パスファインダーツール

参考サイト

プロパティパネル

Illustrator CC2018のプロパティパネルとは、ウィンドウ上部に表示されていたコントロールパネルをさらに使いやすくしたものになります。

ズームツール

本日の課題

研修メモ

覚書

2021年5月6日（木）

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

2021年5月6日By admin 学科グラフィックデザイン基礎

-本日のアジェンダ-

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

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

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

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

5限目
学科グラフィックデザイン基礎④
本日のまとめ

本日のテーマ

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

トリミングとは？

「トリミング」とは、画像の加工ができるソフトウエアが持っている機能のひとつで、画像の周囲にある不要な部分を非表示にすることで画像の表示範囲やサイズを調整することができます。

本日のPhotoshopの基本操作

選択範囲
レイヤーパネル
レイヤーマスク
ブラシツール
描画色と背景色
ファイルの移動とコピー
切り抜きツール
自由変形（ctrl + T）
Web用に保存（従来）

ファイルの作成方法

Illustrator・Photoshopともファイルの作成は「新規作成」「開く」「読み込む」で出来ています。
制作した元データ「 Illustrator ならai」「 Photoshopならpsd 」から、WEB用に「jpg」「gif」「png」「pdf」等のファイル形式にすることが出来ます。

写真加工のおすすめルール
（非破壊データで作業しましょう）

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

写真素材（練習用）

練習用写真素材

選択範囲

選択範囲によって画像の一部分または複数の部分が分離されます。特定の領域を選択することで、選択していない領域を元のままに保ちながら、画像の選択部分を編集したりエフェクトやフィルターを適用したりすることができます。

長方形選択ツール
楕円形選択ツール
なげなわツール
多角形選択ツール
マグネット選択ツール
自動選択ツール
クイック選択ツール

参考サイト

オブジェクトの選択と移動と削除・コピー

オブジェクトを移動させるには、｢マウスドラッグによる移動｣、｢移動コマンドによる数値指定での移動｣、｢変形パネルを使った移動｣、｢矢印キーを使った移動｣があります。選択ツールで移動したいオブジェクトを選択し、そのままドラッグします。削除は「Delete」キーで削除出来ます。

参考サイト

ワンポイントアドバイス

Adobeのソフトは直観的に移動出来るかも？？
「出来るのかな？？？」って思ったことは試してみましょう。

レイヤーパネル

Photoshop のレイヤーは、積み重ねられた透明フィルムのようなものです。レイヤーの透明部分では、下のレイヤーが透けて見えます。レイヤーは、透明フィルムをスライドさせるように動かして、レイヤーのコンテンツを希望の位置に配置することができます。また、レイヤーの不透明度を変更して、コンテンツを部分的に透明にすることもできます。

参考サイト

レイヤーマスクについて

レイヤーマスクとは、通常のレイヤーや調整レイヤーの一部だけを表示したり、非表示にしたりすることができる機能だ。 レイヤーマスクを扱う最も大きなメリットは、元の画像を変更せずに部分的な補正や切り抜きが行えることである。後に修正が必要になっても、レイヤーマスクを変更するだけでよいので非常に効率がよい。

参考サイト

描画色と背景色

描画色と背景色についてに移動 – Photoshop では、ペイント、塗りつぶしおよび選択範囲の境界線の描画には描画色が使用され、消去された領域やグラデーションには … アルファチャンネルでは、初期設定の描画色はホワイトで、背景色はブラックです。

参考サイト

ブラシツールとは？

photoshopのブラシは、サイズやエッジのやわらかさを自由に変更して画面内に色々な色や形でペイントすることができます。エアブラシ効果や特殊効果をつけたストロークを描くことができます。 ブラシの設定をカスタマイズして、専用のライブラリに追加、呼び出して利用することもできます。

参考サイト

切り抜きツールとは？

【Photoshop基本操作】［切り抜きツール］とは、画像を切り抜くためのツールです。ドラッグした範囲を四角形に切り抜き、回転や変形などを同時に行う機能を持っています。 切り抜き確定後でも、トリミング領域の移動や仕上げサイズの変更といった再編集が可能です。

参考サイト

自由変形（ctrl + T）とは？

自由変形の使い方 Photoshopの自由変形を使うことで、全体の仕上がりを見ながら画像の大きさや角度などを編集することができます。

参考サイト

Web用に保存（従来）とは？

「Web用に保存（従来）」は、圧縮率を調整するなどして保存後のデータ容量を調整できます。

参考サイト

本日の課題

とにかく2つの写真を合成して「jpg」のデータをドロップボックスのご自身のファイルにUPしてください。
※ネット上の写真には権利がありますので、あくまでも課題用として取り扱ってください。

■無料写真素材のサイト

研修メモ

覚書

2021年5月7日（金）

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

2021年5月7日By admin 学科グラフィックデザイン基礎

-本日のアジェンダ-

1限目
学科グラフィックデザイン基礎⑤
トリミングについて

2限目
学科グラフィックデザイン基礎⑤
レタッチについて

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

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

5限目
学科グラフィックデザイン基礎⑤
本日のまとめ

本日のテーマ

「レタッチ」をして合成写真を作りましょう。

レタッチとは？

写真編集とは、アナログ/デジタルを問わず、写真画像を修整する技法を意味する。フォトレタッチとも。これを職業とする人をレタッチャーという。英語発音からの他のカタカナ表記でフォトリタッチ、リタッチャーとする場合もある。

本日のPhotoshopの基本操作（レタッチ）

パッチツール
コピースタンプツール
スポット修復ブラシツール
修復ブラシツール
コンテンツに応じた移動ツール
ぼかしツール
シャープツール
指先ツール
覆い焼きツール
焼き込みツール

スマートオブジェクト（レイヤーをラスタライズ）
カンバスサイズ
画像解像度

レタッチについて

引き続きの基本操作

選択範囲
レイヤーパネル
レイヤーマスク
ブラシツール
描画色と背景色
ファイルの移動とコピー
切り抜きツール
自由変形（ctrl + T）
Web用に保存（従来）

　・スマートオブジェクト（レイヤーをラスタライズ）

スマートオブジェクトとは、「縮小と拡大を繰り返しても、劣化をしない画像データ形式」のことです。Photoshopで画像を扱うときにスマートオブジェクト化していない場合、1度でも縮小すると画像が劣化してしまいます。画像の質を保ったまま縮小・拡大をしたいときは、スマートオブジェクトに変換する必要があります。

スマートオブジェクトの解除方法「ラスタライズ」

スマートオブジェクトは画像を劣化させずに保つ形式なので、多用するとデータが重くなりがちです。スマートオブジェクトを解除することを「ラスタライズ」といいます。スマートオブジェクトをラスタライズすると、元のビットマップ画像に戻ります。

参考サイト

・カンバスサイズ

カンバスとは、Photoshopにおける作業領域のことです。Photohshopで編集した画像に余白を追加したり、余分なスペースを削除したりするにはカンバスサイズを変更します。

参考サイト

・画像解像度

画像解像度とは、画像の「きめ細やかさ」をあらわす数値で、1インチ（25.4mm）あたりのピクセル（ドット）数を表し、数値が大きいほど、画素の密度が高くなり、高精細になります。一般的にはdpi（Dot per inch）と表されますが、Photoshopでは、ppi（Pixel per inch）という単位で表されます。この値が大きいほど、ピクセルの密度が高くきめ細かい高精細な画像を表現できます。

印刷用の場合の推奨は350dpi(ppi)以上ですが、Webのみで使用する場合は72dpiより上げる必要はありません。これは、PCのディスプレイ自体が72dpiや96dpiしか解像度がないためです。しっかりと画像の使い道にあった解像度にその都度調整する必要があります。

参考サイト

ファイルの作成方法

写真加工のおすすめルール
（非破壊データで作業しましょう）

写真素材（練習用）

練習用写真素材

選択範囲

長方形選択ツール
楕円形選択ツール
なげなわツール
多角形選択ツール
マグネット選択ツール
自動選択ツール
クイック選択ツール

参考サイト

オブジェクトの選択と移動と削除・コピー

参考サイト

ワンポイントアドバイス

Adobeのソフトは直観的に移動出来るかも？？
「出来るのかな？？？」って思ったことは試してみましょう。

レイヤーパネル

参考サイト

レイヤーマスクについて

参考サイト

描画色と背景色

参考サイト

ブラシツールとは？

参考サイト

切り抜きツールとは？

参考サイト

自由変形（ctrl + T）とは？

自由変形の使い方 Photoshopの自由変形を使うことで、全体の仕上がりを見ながら画像の大きさや角度などを編集することができます。

参考サイト

Web用に保存（従来）とは？

「Web用に保存（従来）」は、圧縮率を調整するなどして保存後のデータ容量を調整できます。

参考サイト

本日の課題

■無料写真素材のサイト

研修メモ

覚書

2021年5月8日（土）

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

2021年5月8日By admin 学科グラフィックデザイン基礎

-本日のアジェンダ-

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

2限目
学科グラフィックデザイン基礎⑥
調整レイヤーについて

3限目
学科グラフィックデザイン基礎⑥
フィルターについて

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

5限目
学科グラフィックデザイン基礎⑥
本日のまとめ

本日のテーマ

「色調補正」をして合成写真を作りましょう。

色調補正とは？

色調補正とは、画像データをイメージどおりに調整することです。 色調補正の目的は、色を調整したり、鮮やかさを調整したり、明るさを調整したりさまざまです。 Photoshop には、その目的によって選べるツールがあります。

本日のPhotoshopの基本操作（色調補正）

明るさ・コントラスト
レベル補正
トーンカーブ
色相・彩度
カラーバランス
白黒

アンシャープマスク
クリッピングマスク
調整レイヤー
ヒストリーパネル

https://deau.hamaya2020.com/color-correction/

おススメの色調補正の手順

1.明るさ・コントラスト
（素材写真の明るさを調整し、コントラストをくっきりさせる）
2.レベル補正やトーンカーブ
（素材写真の一番黒い箇所と白い箇所を設定する）
3.色相・彩度やカラーバランスや白黒
（素材写真の色味を変更する）
4.アンシャープマスクで仕上げ
※部分的に調整する場合は、レイヤーマスク（選択範囲）を併用。

アンシャープマスク

「アンシャープマスク」は、画像内の個々のピクセルの周囲にある、異なる色情報を持ったピクセルを検索して、指定した量だけピクセルのコントラストを高めるフィルタです。 アンシャープマスクをかけるときは、「量」・「半径」・「しきい値」を設定します。色の濃さの度合いを決め、数値が大きくなるほど、くっきりとした輪郭になります。

参考サイト

クリッピングマスク

クリッピングマスクとは、あるレイヤーの透明部分を使用して、その上のレイヤーにマスクを適用する機能です。 クリッピングマスクを使用すると、背面（下）のレイヤー（ベースレイヤー）の透明ピクセルが、前面（上）のレイヤーに対してマスクとして機能します。 … クリッピングマスクを解除することで、元の状態に戻ります。

参考サイト

調整レイヤー

【Photoshop基本操作】調整レイヤーとは、ドキュメントやレイヤー単位で色調補正が行えるオプション機能です。 調整レイヤーを作成すると、元画像の内容をそのまま保つことができ、設定した後でも再編集が加えられるので大変便利です。

参考サイト

ヒストリーパネル

ヒストリーパネルとは ヒストリーパネルには、Photoshopで画像に対して行った編集操作が履歴として表示されます。履歴をたどって行った操作を確認したり、やり直したりすることができます。

参考サイト

引き続きの基本操作

パッチツール
コピースタンプツール
スポット修復ブラシツール
修復ブラシツール
コンテンツに応じた移動ツール
ぼかしツール
シャープツール
指先ツール
覆い焼きツール
焼き込みツール

レタッチについて

スマートオブジェクト（レイヤーをラスタライズ）
カンバスサイズ
画像解像度

選択範囲
レイヤーパネル
クリッピングマスク
ブラシツール
描画色と背景色
ファイルの移動とコピー
切り抜きツール
自由変形（ctrl + T）
Web用に保存（従来）

スマートオブジェクト（レイヤーをラスタライズ）

スマートオブジェクトの解除方法「ラスタライズ」

参考サイト

カンバスサイズ

参考サイト

画像解像度

参考サイト

ファイルの作成方法

写真加工のおすすめルール
（非破壊データで作業しましょう）

写真素材（練習用）

選択範囲

長方形選択ツール
楕円形選択ツール
なげなわツール
多角形選択ツール
マグネット選択ツール
自動選択ツール
クイック選択ツール

参考サイト

オブジェクトの選択と移動と削除・コピー

参考サイト

ワンポイントアドバイス

Adobeのソフトは直観的に移動出来るかも？？
「出来るのかな？？？」って思ったことは試してみましょう。

レイヤーパネル

参考サイト

レイヤーマスクについて

参考サイト

描画色と背景色

参考サイト

ブラシツールとは？

参考サイト

切り抜きツールとは？

参考サイト

自由変形（ctrl + T）とは？

自由変形の使い方 Photoshopの自由変形を使うことで、全体の仕上がりを見ながら画像の大きさや角度などを編集することができます。

参考サイト

Web用に保存（従来）とは？

「Web用に保存（従来）」は、圧縮率を調整するなどして保存後のデータ容量を調整できます。

参考サイト

本日の課題

■無料写真素材のサイト

研修メモ

覚書

2021年5月10日（月）

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

2021年5月10日By admin 学科グラフィックデザイン基礎

-本日のアジェンダ-

1限目
学科グラフィックデザイン基礎⑦
基本操作のおさらい

2限目
学科グラフィックデザイン基礎⑦
配置について

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

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

5限目
学科グラフィックデザイン基礎⑦
本日のまとめ

本日のテーマ

両方使ってみましょう。

本日の基本操作

配置
手のひらツール
パペットワープ

配置について

Illustratorで画像を配置するにはリンク配置と埋め込み配置の2種類があります。

リンク配置

『リンク配置』とは、画像をIllustrator上にPhotoshopなどの別のアプリケーションで作成したファイルを参照し、Illustrator内に画像の情報を持たせずに『プレビュー』で表示させる配置方法です。
『リンク配置』では、画像の情報は外部リンクなのでイラレのファイルサイズは小さくて済みます。
そのため作業環境にかかる負担が少なく、効率的に作業を行うことが出来ます。
リンクした画像が変更された場合には、その変更を反映させるかを選択することも出来ます。

埋め込み配置

『埋め込み配置』とは、Illustratorに画像の情報を直接持たせ、他のアプリケーションに依存せずに画像を表示させる配置方法です。
『埋め込み配置』では、画像の情報はIllustrator内にあるので、その分ファイルサイズは大きくなりますが、他のファイルに依存しないため、ファイルの管理が楽です。
データ入稿や転送の際に、リンク切れの心配も無くなります。
また、配置画像の形式によっては、オブジェクトを保持したまま埋め込むことで、Illustratorでも画像を個別に編集することも出来ます。

参考サイト

手のひらツールとは？

手のひらツールは、画像ウィンドウにスクロールバーが表示されている場合、その表示されている位置をドラッグしてずらすことができます。また、使用しているパソコンにOpenGL機能がある場合は、画像ウィンドウ内の画像をフリックして移動させることができます。

参考サイト

パペットワープ（Illustrator）

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

参考サイト

パペットワープ（Photoshop）

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

参考サイト

Illustratorの基本操作

ペンツール
リフレクトツールと回転ツール
曲線ツール
ハサミツール
変形の繰り返し「Ctrl+D」

新規作成・開く
アートボード
選択ツール
長方形ツール
楕円形ツール
多角形ツール
スターツール
パスファインダー（合体・型抜き・交差）
プロパティパネル
ズームツール
保存(ai)・別名で保存（pdf）
塗りと線
ダイレクト選択ツール
パス「アンカーポイント」「ハンドル」「セグメント」
アンカーポイント切り替えツール
シェイプ形成ツール
レイヤーパネル

ワンポイントアドバイス

新規ファイルを作成したらまず「保存」をしましょう。
Windows版
　保存：「Ctrl」＋「S」
　　別名で保存：「Shift」「Ctrl」＋「S」
　　Web用に保存（従来）：「Alt」「Shift」「Ctrl」＋「S」

Photoshopの基本操作

選択範囲
レイヤーパネル
クリッピングマスク
ブラシツール
描画色と背景色
ファイルの移動とコピー
切り抜きツール
自由変形（ctrl + T）
Web用に保存（従来）

スマートオブジェクト（レイヤーをラスタライズ）
カンバスサイズ
画像解像度

色調補正について

明るさ・コントラスト
レベル補正
トーンカーブ
色相・彩度
カラーバランス
白黒

アンシャープマスク
クリッピングマスク
調整レイヤー
ヒストリーパネル

練習用写真素材

http://deau-a.spawn.jp/img-sample/embed#?secret=qIoLFRGrhc

写真加工のおすすめルール
（非破壊データで作業しましょう）

おススメの色調補正の手順

レタッチについて

パッチツール
コピースタンプツール
スポット修復ブラシツール
修復ブラシツール
コンテンツに応じた移動ツール
ぼかしツール
シャープツール
指先ツール
覆い焼きツール
焼き込みツール

本日の課題

イラストと写真を合わせた作品を作成してください。
出来たものは、pdfのデータ形式（最小ファイルサイズ）でドロップボックスにUPしてください。
※ネット上の写真には権利がありますので、あくまでも課題用として取り扱ってください。

研修メモ

覚書

2021年5月11日（火）

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

2021年5月11日By admin 学科グラフィックデザイン基礎

-本日のアジェンダ-

1限目
学科グラフィックデザイン基礎⑧
文字ツール

2限目
学科グラフィックデザイン基礎⑧
文字パネルと字形パネル

3限目
学科グラフィックデザイン基礎⑧
段落

4限目
学科グラフィックデザイン基礎⑧
作品に文字を入れてみましょう

5限目
学科グラフィックデザイン基礎⑧
本日のまとめ

本日のテーマ

文字についてです。

本日の基本操作（Ps Ai共通）

文字ツール
文字パネル
字形パネル
段落

文字ツールとは？

「文字ツール」. 名前の通り、文字を入力するツールです。文字ツールでの入力方法は、大きく分けて2種類あります。

ポイント文字の入力

文字ツールで、画面の好きなところをクリックすると、カーソル（Iビーム）が表示されます。
そのまま、文字を入力すれば、クリックした部分を先頭に文字が入力されていきます。
大変便利なのですが、長い文章を入力する際に、用紙の端まで文章が来ても、自動的に折り返しが行われず、用紙の外側まで飛び出してしまいます。

エリア文字の入力

一定の幅で文章を折り返したい場合は、エリア文字を使います。
文字ツールで、画面内を斜めにドラッグすると、文字を入力するためのテキストエリアが出来上がります。
文字を入力していくと、エリアの端で文章が自動的に折り返されます。
文章がボックスからあふれると、ボックス右下に赤いマークが表示され、あふれた分は非表示になります。
この場合、ボックスの高さを広げてあげることで、文字を収めることができます。

ポイント文字とエリア文字の切り替え

ポイントテキストで文字を入力した場合でも、強制的にEnterキーやReturnキーを使って改行を入れることができます。

参考サイト（Ai）

参考サイト（Ps）

文字パネルとは？

文字を入力する前にテキスト属性を設定したり、属性をリセットして、テキストレイヤーにおける選択した文字の表示形式を変更することもできます。個々の文字に書式を設定するには、それらの文字を選択します。テキストレイヤー内の 1 文字、一定範囲の文字、またはすべての文字を選択できます。

参考サイト（Ai）

参考サイト（Ps）

字形パネルとは？

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

参考サイト（Ai）

参考サイト（Ps）

段落とは？

行揃えの指定、単語、文字、段落間隔の調整、段落のインデント、ハイフネーションの調整などを行うことができます。

参考サイト（Ai）

参考サイト（Ps）

引き続きの基本操作（Ps Ai共通）

配置
手のひらツール
パペットワープ

配置について

Illustratorで画像を配置するにはリンク配置と埋め込み配置の2種類があります。

リンク配置

埋め込み配置

参考サイト

手のひらツールとは？

参考サイト

パペットワープ（Illustrator）

参考サイト

パペットワープ（Photoshop）

参考サイト

Illustratorの基本操作

ペンツール
リフレクトツールと回転ツール
曲線ツール
ハサミツール
変形の繰り返し「Ctrl+D」

新規作成・開く
アートボード
選択ツール
長方形ツール
楕円形ツール
多角形ツール
スターツール
パスファインダー（合体・型抜き・交差）
プロパティパネル
ズームツール
保存(ai)・別名で保存（pdf）
塗りと線
ダイレクト選択ツール
パス「アンカーポイント」「ハンドル」「セグメント」
アンカーポイント切り替えツール
シェイプ形成ツール
レイヤーパネル

ワンポイントアドバイス

Photoshopの基本操作

選択範囲
レイヤーパネル
クリッピングマスク
ブラシツール
描画色と背景色
ファイルの移動とコピー
切り抜きツール
自由変形（ctrl + T）
Web用に保存（従来）

スマートオブジェクト（レイヤーをラスタライズ）
カンバスサイズ
画像解像度

色調補正について

明るさ・コントラスト
レベル補正
トーンカーブ
色相・彩度
カラーバランス
白黒

アンシャープマスク
クリッピングマスク
調整レイヤー
ヒストリーパネル

練習用写真素材

写真加工のおすすめルール
（非破壊データで作業しましょう）

おススメの色調補正の手順

レタッチについて

パッチツール
コピースタンプツール
スポット修復ブラシツール
修復ブラシツール
コンテンツに応じた移動ツール
ぼかしツール
シャープツール
指先ツール
覆い焼きツール
焼き込みツール

本日の課題

イラストと写真を合わせた作品を作成し、文字を入れてください。
出来たものは、pdfのデータ形式（最小ファイルサイズ）でドロップボックスにUPしてください。
※ネット上の写真には権利がありますので、あくまでも課題用として取り扱ってください。

研修メモ

覚書

2021年5月12日（水）

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

2021年5月12日By admin 学科グラフィックデザイン基礎

-本日のアジェンダ-

1限目
学科グラフィックデザイン基礎⑨
カラー

2限目
学科グラフィックデザイン基礎⑨
スウォッチパネルやスポイト

3限目
学科グラフィックデザイン基礎⑨
グラデーション

4限目
学科グラフィックデザイン基礎⑨
色を入れてみましょう

5限目
学科グラフィックデザイン基礎⑨
本日のまとめ

本日のテーマ

色についてです。

本日の基本操作（Ps Ai共通）

カラー
スウォッチパネル
スポイト
CMYKとRGB
グラデーションパネル（Ps Ai共通）
グラデーションツール（Ai）
フリーグラデーション（Ai）

カラー

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

Photoshop では、ペイント、塗りつぶしおよび選択範囲の境界線の描画には描画色が使用され、消去された領域やグラデーションには背景色が使用されます。描画色と背景色は、他の特殊効果フィルターにも使用されます。
スポイトツール、カラーパネル、スウォッチパネルまたは Adobe カラーピッカーを使用して、新しい描画色や背景色を指定することができます。

参考サイト（Ai）

参考サイト（Ps）

スウォッチパネル

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

参考サイト（Ai）

参考サイト（Ps）

スポイトツール

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

参考サイト（Ai）

参考サイト（Ps）

CMYKとRGB

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

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

参考サイト

グラデーション（Ps）

PCの頼もしい便利なツールのひとつにグラデーションがあります。お気に入りのグラデーションファイルを一度インストールしておけば、いつでもボタン作成やデザインの背景なども簡単に仕上げることができます。

参考サイト

ワンポイントアドバイス

グラデーションは陰影ならさりげなく
柄として使うなら大胆に作成してみましょう。

グラデーションパネル・グラデーションツール（Ai）

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

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

参考サイト

引き続きの基本操作（Ps Ai共通）

文字ツール
文字パネル
字形パネル
段落

配置
手のひらツール
パペットワープ

文字ツールとは？

「文字ツール」. 名前の通り、文字を入力するツールです。文字ツールでの入力方法は、大きく分けて2種類あります。

ポイント文字の入力

エリア文字の入力

ポイント文字とエリア文字の切り替え

ポイントテキストで文字を入力した場合でも、強制的にEnterキーやReturnキーを使って改行を入れることができます。

参考サイト（Ai）

参考サイト（Ps）

文字パネルとは？

参考サイト（Ai）

参考サイト（Ps）

字形パネルとは？

参考サイト（Ai）

参考サイト（Ps）

段落とは？

行揃えの指定、単語、文字、段落間隔の調整、段落のインデント、ハイフネーションの調整などを行うことができます。

参考サイト（Ai）

参考サイト（Ps）

配置について

Illustratorで画像を配置するにはリンク配置と埋め込み配置の2種類があります。

リンク配置

埋め込み配置

参考サイト

手のひらツールとは？

参考サイト

パペットワープ（Illustrator）

参考サイト

パペットワープ（Photoshop）

参考サイト

Illustratorの基本操作

ペンツール
リフレクトツールと回転ツール
曲線ツール
ハサミツール
変形の繰り返し「Ctrl+D」

新規作成・開く
アートボード
選択ツール
長方形ツール
楕円形ツール
多角形ツール
スターツール
パスファインダー（合体・型抜き・交差）
プロパティパネル
ズームツール
保存(ai)・別名で保存（pdf）
塗りと線
ダイレクト選択ツール
パス「アンカーポイント」「ハンドル」「セグメント」
アンカーポイント切り替えツール
シェイプ形成ツール
レイヤーパネル

ワンポイントアドバイス

Photoshopの基本操作

選択範囲
レイヤーパネル
クリッピングマスク
ブラシツール
描画色と背景色
ファイルの移動とコピー
切り抜きツール
自由変形（ctrl + T）
Web用に保存（従来）

スマートオブジェクト（レイヤーをラスタライズ）
カンバスサイズ
画像解像度

色調補正について

明るさ・コントラスト
レベル補正
トーンカーブ
色相・彩度
カラーバランス
白黒

アンシャープマスク
クリッピングマスク
調整レイヤー
ヒストリーパネル

練習用写真素材

写真加工のおすすめルール
（非破壊データで作業しましょう）

おススメの色調補正の手順

レタッチについて

パッチツール
コピースタンプツール
スポット修復ブラシツール
修復ブラシツール
コンテンツに応じた移動ツール
ぼかしツール
シャープツール
指先ツール
覆い焼きツール
焼き込みツール

本日の課題

イラストと写真を合わせた作品を作成し、文字を入れてください。
更に思うままに色を入れてください。
出来たものは、pdfのデータ形式（最小ファイルサイズ）でドロップボックスにUPしてください。
※ネット上の写真には権利がありますので、あくまでも課題用として取り扱ってください。

研修メモ

覚書

2021年5月13日（木）

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

2021年5月13日By admin 学科グラフィックデザイン基礎

-本日のアジェンダ-

1限目
学科グラフィックデザイン基礎⑩
消しゴムとナイフとハサミ

2限目
学科グラフィックデザイン基礎⑩
効果について

3限目
学科グラフィックデザイン基礎⑩
線幅ツール

4限目
学科グラフィックデザイン基礎⑩
フリーグラデーション

5限目
学科グラフィックデザイン基礎⑩
本日のまとめ

本日のテーマ

Aiの便利な機能についてです。

本日の基本操作

消しゴムツール・ナイフツール（Ai）
Illustrator効果・Photoshop効果（Ai）
線幅ツール（Ai）
フリーグラデーション（Ai）

消しゴムツール・ナイフツール（Ai）

Illutrator（イラストレーター）の消しゴムツール・はさみツール・ナイフの使い方と各ツールの違いについて確認しておきましょう。

参考サイト

Illustrator効果・Photoshop効果

Illustrator には様々な効果が含まれ、オブジェクト、グループまたはレイヤーに適用してその特性を変更することができます。
オブジェクトに効果を適用すると、その効果がアピアランスパネルに表示されます。アピアランスパネルから、効果を編集、移動、複製、削除すること、またはグラフィックスタイルの一部として保存することができます。

参考サイト

線幅ツール

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

参考サイト

フリーグラデーション（Ai）

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

参考サイト

引き続きの基本操作（Ps Ai共通）

カラー
スウォッチパネル
スポイト
CMYKとRGB

文字ツール
文字パネル
字形パネル
段落

配置
手のひらツール
パペットワープ

カラー

参考サイト（Ai）

参考サイト（Ps）

スウォッチパネル

参考サイト（Ai）

参考サイト（Ps）

スポイトツール

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

参考サイト（Ai）

参考サイト（Ps）

CMYKとRGB

参考サイト

グラデーション（Ps）

参考サイト

ワンポイントアドバイス

グラデーションは陰影ならさりげなく
柄として使うなら大胆に作成してみましょう。

グラデーションパネル・グラデーションツール（Ai）

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

参考サイト

文字ツールとは？

「文字ツール」. 名前の通り、文字を入力するツールです。文字ツールでの入力方法は、大きく分けて2種類あります。

ポイント文字の入力

エリア文字の入力

ポイント文字とエリア文字の切り替え

ポイントテキストで文字を入力した場合でも、強制的にEnterキーやReturnキーを使って改行を入れることができます。

参考サイト（Ai）

参考サイト（Ps）

文字パネルとは？

参考サイト（Ai）

参考サイト（Ps）

字形パネルとは？

参考サイト（Ai）

参考サイト（Ps）

段落とは？

行揃えの指定、単語、文字、段落間隔の調整、段落のインデント、ハイフネーションの調整などを行うことができます。

参考サイト（Ai）

参考サイト（Ps）

配置について

Illustratorで画像を配置するにはリンク配置と埋め込み配置の2種類があります。

リンク配置

埋め込み配置

参考サイト

手のひらツールとは？

参考サイト

パペットワープ（Illustrator）

参考サイト

パペットワープ（Photoshop）

参考サイト

Illustratorの基本操作

ペンツール
リフレクトツールと回転ツール
曲線ツール
ハサミツール
変形の繰り返し「Ctrl+D」

新規作成・開く
アートボード
選択ツール
長方形ツール
楕円形ツール
多角形ツール
スターツール
パスファインダー（合体・型抜き・交差）
プロパティパネル
ズームツール
保存(ai)・別名で保存（pdf）
塗りと線
ダイレクト選択ツール
パス「アンカーポイント」「ハンドル」「セグメント」
アンカーポイント切り替えツール
シェイプ形成ツール
レイヤーパネル

ワンポイントアドバイス

Photoshopの基本操作

選択範囲
レイヤーパネル
クリッピングマスク
ブラシツール
描画色と背景色
ファイルの移動とコピー
切り抜きツール
自由変形（ctrl + T）
Web用に保存（従来）

スマートオブジェクト（レイヤーをラスタライズ）
カンバスサイズ
画像解像度

色調補正について

明るさ・コントラスト
レベル補正
トーンカーブ
色相・彩度
カラーバランス
白黒

アンシャープマスク
クリッピングマスク
調整レイヤー
ヒストリーパネル

練習用写真素材

写真加工のおすすめルール
（非破壊データで作業しましょう）

おススメの色調補正の手順

レタッチについて

パッチツール
コピースタンプツール
スポット修復ブラシツール
修復ブラシツール
コンテンツに応じた移動ツール
ぼかしツール
シャープツール
指先ツール
覆い焼きツール
焼き込みツール

本日の課題

イラストと写真を合わせた作品を作成し、文字を入れてください。
更に思うままに配色を入れてください。
出来たものは、pdfのデータ形式（最小ファイルサイズ）でドロップボックスにUPしてください。
※ネット上の写真には権利がありますので、あくまでも課題用として取り扱ってください。

成績考査予告

成績考査の内容は喜怒哀楽を表現したイラストを作成してください。

研修メモ

覚書

2021年5月14日（金）

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

2021年5月14日By admin 学科グラフィックデザイン基礎

-本日のアジェンダ-

1限目
学科グラフィックデザイン基礎⑪
被写体を選択（選択範囲）

2限目
学科グラフィックデザイン基礎⑪
ベクトルマスクとパスパネル

3限目
学科グラフィックデザイン基礎⑪
Photoshopのマスクについて

4限目
学科グラフィックデザイン基礎⑪
配色を考えてみましょう

5限目
学科グラフィックデザイン基礎⑪
本日のまとめ

本日のテーマ

Psのマスクについてです。

マスクについて

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

参考サイト

本日の基本操作

被写体を選択（Ps）
消しゴムツール（Ps）
クイックマスクモード（Ps）
パスパネル（Ps）
ベクトルマスク（Ps）
選択範囲の反転（Ps）
境界線をぼかす（Ps）
フィルター（Ps）

被写体を選択（Ps）

人工知能を使ってパッと出来ます。

参考サイト

クイックマスクモード（消しゴムツール）

クイックマスクモードは一時的なマスクを作成するモードで、アルファチャンネルのように保存はできませんが、選択範囲を編集する場合に便利です。画像に選択範囲を作成します。ツールボックスの下のほうにある、［クイックマスクモードで編集］ボタンをクリックします。選択範囲の外がうす赤色で表示されます。

参考サイト

パスパネル（Ps）

パスパネル. ペンツールやシェイプツールで作成したパス一覧を表示してくれます。また、パスで画像をくりぬく”クリッピングマスク”の設定もここでできます。アクションパネル. Photoshop CC、CS6でこのパネルを使って動画を編集できます。

参考サイト

ベクトルマスク（Ps）

ベクトルマスクとは Photoshoのペンツールまたはシェイプツールで作成したベクトル画像を使い、画像全部または、画像の一部を隠す（マスクする）方法です。

参考サイト

選択範囲の反転（Ps）

選択範囲の反転は、「選択している状態の選択範囲」と「選択していない範囲」を置き換える機能です。こちらの写真を例に、選択範囲の反転を活用してリンゴを残して背景を切り抜きます。選択ツールを使い、リンゴを選択します。 … リンゴの範囲選択を終えたら、選択範囲から「選択範囲の反転」をクリックして、選択範囲を反転します。

参考サイト

境界線をぼかす（Ps）

フォトショップで境界線をぼかして画像を切り抜く方法があります。また、ぼかした状態でマスクをする事も可能です。

参考サイト

フィルター（Ps）

hotoshopの機能にフィルターギャラリーというものがあります。この機能を使うと、1クリックで手元の画像を印象絵画風にしたり、ガラス越しでみた様な形にしたりすることができます。 フィルターギャラリーにある様々なフィルターは、デフォルトでアドビが用意しているものです。

参考サイト

引き続きの基本操作（Ps Ai共通）

消しゴムツール・ナイフツール（Ai）
Illustrator効果・Photoshop効果（Ai）
線幅ツール（Ai）
フリーグラデーション（Ai）

カラー
スウォッチパネル
スポイト
CMYKとRGB

文字ツール
文字パネル
字形パネル
段落

配置
手のひらツール
パペットワープ

消しゴムツール・ナイフツール（Ai）

Illutrator（イラストレーター）の消しゴムツール・はさみツール・ナイフの使い方と各ツールの違いについて確認しておきましょう。

参考サイト

Illustrator効果・Photoshop効果

参考サイト

線幅ツール

参考サイト

フリーグラデーション（Ai）

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

参考サイト

フリーグラデーション（Ai）

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

参考サイト

カラー

参考サイト（Ai）

参考サイト（Ps）

スウォッチパネル

参考サイト（Ai）

参考サイト（Ps）

スポイトツール

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

参考サイト（Ai）

参考サイト（Ps）

CMYKとRGB

参考サイト

グラデーション（Ps）

参考サイト

ワンポイントアドバイス

グラデーションは陰影ならさりげなく
柄として使うなら大胆に作成してみましょう。

グラデーションパネル・グラデーションツール（Ai）

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

参考サイト

文字ツールとは？

「文字ツール」. 名前の通り、文字を入力するツールです。文字ツールでの入力方法は、大きく分けて2種類あります。

ポイント文字の入力

エリア文字の入力

ポイント文字とエリア文字の切り替え

ポイントテキストで文字を入力した場合でも、強制的にEnterキーやReturnキーを使って改行を入れることができます。

参考サイト（Ai）

参考サイト（Ps）

文字パネルとは？

参考サイト（Ai）

参考サイト（Ps）

字形パネルとは？

参考サイト（Ai）

参考サイト（Ps）

段落とは？

行揃えの指定、単語、文字、段落間隔の調整、段落のインデント、ハイフネーションの調整などを行うことができます。

参考サイト（Ai）

参考サイト（Ps）

配置について

Illustratorで画像を配置するにはリンク配置と埋め込み配置の2種類があります。

リンク配置

埋め込み配置

参考サイト

手のひらツールとは？

参考サイト

パペットワープ（Illustrator）

参考サイト

パペットワープ（Photoshop）

参考サイト

Illustratorの基本操作

ペンツール
リフレクトツールと回転ツール
曲線ツール
ハサミツール
変形の繰り返し「Ctrl+D」

新規作成・開く
アートボード
選択ツール
長方形ツール
楕円形ツール
多角形ツール
スターツール
パスファインダー（合体・型抜き・交差）
プロパティパネル
ズームツール
保存(ai)・別名で保存（pdf）
塗りと線
ダイレクト選択ツール
パス「アンカーポイント」「ハンドル」「セグメント」
アンカーポイント切り替えツール
シェイプ形成ツール
レイヤーパネル

ワンポイントアドバイス

Photoshopの基本操作

選択範囲
レイヤーパネル
クリッピングマスク
ブラシツール
描画色と背景色
ファイルの移動とコピー
切り抜きツール
自由変形（ctrl + T）
Web用に保存（従来）

スマートオブジェクト（レイヤーをラスタライズ）
カンバスサイズ
画像解像度

色調補正について

明るさ・コントラスト
レベル補正
トーンカーブ
色相・彩度
カラーバランス
白黒

アンシャープマスク
クリッピングマスク
調整レイヤー
ヒストリーパネル

練習用写真素材

写真加工のおすすめルール
（非破壊データで作業しましょう）

おススメの色調補正の手順

レタッチについて

パッチツール
コピースタンプツール
スポット修復ブラシツール
修復ブラシツール
コンテンツに応じた移動ツール
ぼかしツール
シャープツール
指先ツール
覆い焼きツール
焼き込みツール

本日の課題

成績考査予告

成績考査の内容は喜怒哀楽を表現したイラストを作成してください。

研修メモ

覚書

2021年5月15日（土）

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

2021年5月15日By admin 学科グラフィックデザイン基礎

-本日のアジェンダ-

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

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

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

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

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

本日のテーマ

本日は成績考査

第1回成績考査

ドロップボックス「第1回成績考査＞grade-check_〇〇〇〇_20210515.ai」を使用して、
「イラスト」「写真」「文字」「配色」を取り入れた作品を作成してください。テーマは「喜怒哀楽」です。
出来たものは、pdfのデータ形式（最小ファイルサイズ）でドロップボックスにUPしてください。
※ファイルの○○○○は名前を記載してください。
※ネット上の写真には権利がありますので、あくまでも課題用として取り扱ってください。

研修メモ

覚書

2021年5月17日（月）

学科 DTP基礎

2021年5月17日By admin 学科　DTP基礎

-本日のアジェンダ-

1限目
学科 DTP基礎
オブジェクトの塗りと線描画色と背景色

2限目
学科 DTP基礎
ベクターデータとビットマップデータ CMYKとRGB

3限目
学科 DTP基礎
作品の制作について

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

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

本日のテーマ

納品する作品の準備です。

オブジェクトの塗りと線（Ai）

Illustratorで描画したものには塗りと枠に線で色をつけることができます。「塗り線」を組み合わせるのが基本になります。

参考サイト

描画色と背景色（Ps）

【Photoshop基本操作】描画色とは、面を塗りつぶしたり、線を描いたりする「指定色」のことで、背景色とは、面で消去したり、線で消去したりする「指定色」のことをいいます。

参考サイト

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

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

ベクターデータとは？

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

参考サイト

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

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

参考サイト

CMYKとRGB

参考サイト

今後の日程

5月18日　ピクトグラム
5月19日　ロゴ①
5月21日　ロゴ②
5月22日　アクセスマップ①
5月26日　アクセスマップ②
5月27日　名刺
5月28日　 DM
5月31日　フライヤー①
6月1日　フライヤー②
6月2日　フライヤー③
6月3日　フライヤー④
6月4日　全作品の納品日（成績考査）

本日の課題

ドロップボックスにある「work_○○○○_20210517.txt」に各作品の企画内容をまとめて、それぞれの作品の方向性をしっかりとイメージし、制作を進めていきましょう。

研修メモ

覚書

2021年5月18日（火）

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

2021年5月18日By master 実技イラストロゴ作成実習

-本日のアジェンダ-

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

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

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

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

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

本日のテーマ

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

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

ピクトグラムとは、言葉を使わなくても情報を伝えられる、単純化された視覚記号です。

参考サイト

ピクトグラム制作のポイント

「実際に使って見たイメージ」「デザインをそぎ落とした時の見やすさ」「情報の伝わりやすさ」が大切です。1つの施設や企業といったテーマで、共通の世界観を持たせてみましょう。線の太さ・間隔の開け方・角丸カーブを揃えるなど共通のデザインルールを設けてみましょう。

まずはじめに…

ガイドの作成をしましょう。
1.アートボードを用意する
例:A4サイズ（ 210 × 297 ミリ,CMYK ）
2.図形（線無し）のサイズを用意する
3.環境設定（キー入力）で複製
4.「表示＞ガイド＞ガイドの作成」でガイドを作成する
5.レイヤーパネルはロックし名前を付けておきましょう。

本日の基本操作

アウトライン「パス」「書式」
定規・ガイド
スマートガイド
環境設定（キー入力）

アウトライン

アウトライン化とは、文字や線、パス、ブラシなどのアピアランス（装飾）をオブジェクトに変換することを指します。文字をアウトライン化すると、画像下側のようにパスで囲まれたオブジェクトに変換されます。文字をアウトライン化する理由は、違うパソコンでデータを開いてもフォントが置き換わらないようにするためです。

参考サイト「パスのアウトライン」

参考サイト「書式のアウトライン」

定規

ガイドとは、通常青い線で表示され、レイアウトする範囲を示したり、オブジェクトを並べたりする時の目安として利用される、印刷されない線です。自由に表示・非表示を切り替えておくことができ、表示したまま入稿しても問題ありません。

参考サイト

スマートガイド

スマートガイドとは、オブジェクトやアートボードを作成または操作するときに一時的に表示されるガイドで、他のオブジェクトとの相対関係で作成、整列、編集変形の際にスナップしたり、位置関係を示して作業を補佐してくれる機能です。

参考サイト

【イラストレーターでデータ作成】スマートガイドを使って …
Illustratorのスマートガイドが表示されない | Too クリエイター …
スマートガイドとスナップ機能を利用しよう！（グリッド …

環境設定（キー入力）

環境設定で、キーボードの矢印キーの上下左右ボタンの入力で、選択しているオブジェクトやアンカーポイントが移動する距離を設定できます。

参考サイト

ワンポイントアドバイス

そもそも人の目は錯覚します。デザインをする時は、機械の力と一緒に正確なレイアウトを心がけてみましょう。

本日の課題

ピクトグラムを作成し
5限目までにドロップボックスにUPしてください。
5限目に講評を行います。
※ファイル名は、work_○○○○_20210518.pdf

研修メモ

覚書

2021年5月19日（水）

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

2021年5月19日By master 実技イラストロゴ作成実習

-本日のアジェンダ-

1限目
実技イラストロゴ作成実習②
ロゴについて

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

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

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

5限目
実技イラストロゴ作成実習②
ロゴの講評

本日のテーマ

ロゴを作ってみましょう

ロゴとは？

ロゴタイプ，通称「ロゴ」は、図案化・装飾化された文字・文字列のことで、団体名、商号、商品名、雑誌名、書名等を印刷・表示する際などに使用される。

参考サイト

ロゴ制作のポイント

先ずは、いろいろなロゴを見て真似てみましょう。そして真似たデザインの要素を理解してみましょう。

本日の基本操作

整列パネル
変形パネル
パス上文字ツール
アウトライン表示

整列パネル

ラストレーターでデザインを行う際、「オブジェクトなどの位置を正確に揃える」ということはとても重要な事です。整列パネルを使用すると、簡単に複数のオブジェクトを揃えたり、均等な間隔に並べることもできます。

参考サイト

変形パネル

Illustrator の変形パネルでは、オブジェクトの位置、サイズおよび方向を設定します。パネルに値を入力することで、選択したオブジェクトの位置や大きさ、角度を変更することができます。また、変形の基準点を変更したり、オブジェクトの縦横比を固定したまま拡大・縮小したりすることが可能です。

参考サイト

パス上文字ツール

線を書いてパス上文字ツールを選択する. 今回は曲線ですが、オープンパスであればどんなパスでも大丈夫です。とりあえず適当に曲線を描きます。線を描いたら、【パス線上文字ツール】または【文字ツール】を選択して下さい。

参考サイト

アウトライン表示

イラストレーターには表示モードが『プレビュー』と『アウトライン』の２種類あります。『プレビュー』は[塗り]も[線]もアピアランス効果も見える、つまり普通に作業している状態。そして、『アウトライン表示』というのはオブジェクトのアウトライン、つまりパスだけを表示するモードです。

参考サイト

引き続きの基本操作

アウトライン「パス」「書式」
定規・ガイド
スマートガイド
環境設定（キー入力）

アウトライン

参考サイト「パスのアウトライン」

参考サイト「書式のアウトライン」

定規

参考サイト

スマートガイド

参考サイト

環境設定（キー入力）

環境設定で、キーボードの矢印キーの上下左右ボタンの入力で、選択しているオブジェクトやアンカーポイントが移動する距離を設定できます。

参考サイト

本日の課題

ロゴを作成し
5限目までにドロップボックスにUPしてください。
5限目に講評を行います。
※ファイル名は、work_○○○○_20210519.pdf

研修メモ

覚書

2021年5月21日（金）

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

2021年5月21日By master 実技イラストロゴ作成実習

-本日のアジェンダ-

1限目
実技イラストロゴ作成実習③
提案について

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

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

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

5限目
実技イラストロゴ作成実習③
ロゴの講評

本日のテーマ

提案の考え方について

商業デザインというお仕事は、お客さま（クライアント）とその先の、お客さま（ユーザー）を意識したデザインが求められます。
先ずは、お客さま（クライアント）の希望するイメージを具現化しなければなりません。様々な提案方法を確認し実装出来るようにしていきましょう。

デザインの基本として

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

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

参考サイト

【2】文字デザイン

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

参考サイト

【3】配色デザイン

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

参考サイト

ワンポイントアドバイス

デザインの順番として「1.レイアウト」なので、最初は色を使わない（白黒）癖の無いフォント（文字）を使う。から始めて、「2.文字」を選ぶ（変える）そして配色（色を変えてみる）の順番で進めてみましょう。

ロゴとは？

参考サイト

ロゴ制作のポイント

先ずは、いろいろなロゴを見て真似てみましょう。そして真似たデザインの要素を理解してみましょう。

引き続きの基本操作

アウトライン「パス」「書式」
定規・ガイド
スマートガイド
環境設定（キー入力）

整列パネル
変形パネル
パス上文字ツール
アウトライン表示

整列パネル

参考サイト

変形パネル

参考サイト

パス上文字ツール

参考サイト

アウトライン表示

参考サイト

アウトライン

参考サイト「パスのアウトライン」

参考サイト「書式のアウトライン」

定規

参考サイト

スマートガイド

参考サイト

環境設定（キー入力）

環境設定で、キーボードの矢印キーの上下左右ボタンの入力で、選択しているオブジェクトやアンカーポイントが移動する距離を設定できます。

参考サイト

本日の課題

ロゴを作成し
5限目までにドロップボックスにUPしてください。
5限目に講評を行います。
※ファイル名は、wolk_○○○○_20210521.pdf

研修メモ

覚書

2021年5月22日（土）

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

2021年5月22日By master 実技イラストロゴ作成実習

-本日のアジェンダ-

1限目
実技イラストロゴ作成実習④
アクセスマップについて

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

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

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

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

本日のテーマ

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

アクセスマップとは？

一般的な地図とは違い、アクセスマップは「ある特定の目的地へのアクセス」に特化した地図です。曲がり角や交差点など、ポイントとなるところを大きく目立たせたり、逆に必要でない情報はバッサリ削ってしまうなど、「見せたいもの」「いらないもの」の見極めが重要です。

参考サイト

アクセスマップ制作のポイント

まず目的地を中心に配置し、レイアウトを考えてみると良いかもしれません。
また、土地勘のない場合はストリートビューなどを利用すると便利です。

本日の基本操作

線パネル
アピアランスパネル
スタイライズ
クリッピングマスク
アウトライン
アピアランスの分割

線パネル

線パネルでは、線の太さを設定するだけでなく、線の両端の形や、角の形を変える事ができます。また点線や矢印も作る事ができます。

参考サイト

アピアランスパネル

Adobe Illustrator で効果、アピアランスパネルおよびグラフィックスタイルパネルを使用すると、オブジェクト、グループまたは、レイヤーのアピアランスを変えることができます。また、1 つのオブジェクトを複数の必須部分に分割して、オブジェクト要素を個別に修正することもできます。

参考サイト

スタイライズ

【illustrator】オブジェクトに「スタイライズ」効果で影やぼかしをつける「スタイライズ」効果で、選択したオブジェクトに影や角を丸くするなどができます。

参考サイト

クリッピングマスク

クリッピングマスクは、その形状によってほかのアートワークをマスクするオブジェクトです。クリッピングマスクの内側にあるエリアのみが見えるように、アートワークをマスクの形状にクリップします。クリッピングマスクとマスクされたオブジェクトは、クリッピングセットと呼ばれます。

参考サイト

アウトライン

イラレで基本的に入力する文字フォントツールがありますが、そのフォントツールをアウトライン化することでオブジェクトにすることができます。
何が違うのかというと、フォントは文字情報、アウトライン化したのはオブジェクト(図形)情報ということです。
このアウトライン化をすれば、インストールしたフォントで別のパソコンで開く場合置き換わってしまうということを防ぐことができます。

Illustrator「アウトライン」という言葉で覚えておくの３つ！

「オブジェクト」＞「パス」＞「パスのアウトライン」
「書式」＞「アウトラインの作成」
「表示」＞「アウトライン（Ctrl+Ｙ）」

参考サイト

アピアランスの分割

1つのオブジェクトには塗り、線、効果、不透明度の4つのアピアランス属性があります。例えば1つのオブジェクトに4つのアピアランス属性を1つのアピアランス属性で1つのオブジェクトにしてくれるのがアピアランスを分割する機能になります。

参考サイト

本日の課題

アクセスマップを作成し
5限目までにドロップボックスにUPしてください。
5限目に講評を行います。
※ファイル名は、work_○○○○_20210522.pdf

研修メモ

覚書

2021年5月26日（水）

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

2021年5月26日By master 実技イラストロゴ作成実習 “実技イラストロゴ作成実習⑤”の編集

-本日のアジェンダ-

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

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

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

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

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

本日のテーマ

レイアウトを確認しましょう

レイアウトデザインのポイントとして

作成した作品を改めてみた時、「配置した内容のグループ化」「縦横の整列」「表現のルール化」「表現の差別化」「余白」を改めて見てみましょう。
これら5つを踏まえて、2提案目（ブラッシュアップ）した作品を作成してみましょう。

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

参考サイト

アクセスマップとは？

参考サイト

アクセスマップ制作のポイント

引き続きの基本操作

線パネル
アピアランスパネル
スタイライズ
クリッピングマスク
アウトライン
アピアランスの分割

線パネル

線パネルでは、線の太さを設定するだけでなく、線の両端の形や、角の形を変える事ができます。また点線や矢印も作る事ができます。

参考サイト

アピアランスパネル

参考サイト

スタイライズ

参考サイト

クリッピングマスク

参考サイト

アウトライン

Illustrator「アウトライン」という言葉で覚えておくの３つ！

「オブジェクト」＞「パス」＞「パスのアウトライン」
「書式」＞「アウトラインの作成」
「表示」＞「アウトライン（Ctrl+Ｙ）」

参考サイト

アピアランスの分割

参考サイト

本日の課題

2提案目のアクセスマップを作成し
5限目までにドロップボックスにUPしてください。
5限目に講評を行います。
※ファイル名は、work_○○○○_20210526.pdf

研修メモ

覚書

2021年5月27日（木）

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

2021年5月27日By master 実技イラストロゴ作成実習 “実技イラストロゴ作成実習⑥”の編集

-本日のアジェンダ-

1限目
実技イラストロゴ作成実習⑥
トリムマークについて

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

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

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

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

本日のテーマ

文字について考えてみましょう

文字（フォント）デザインについて

まず、フォントとは既にデザインされている文字であると考えましょう。
既に特徴や印象を持っていて、更に昨今では様々なフォントが存在しています。ここでは、フォントの基礎知識を確認してみましょう。

名刺作成の参考サイト

【おススメフォント】

・源ノ角ゴシック
・源ノ明朝
・貂明朝
・A-OTF UD新ゴ
・筑紫A丸ゴシック
・VDL ロゴJrブラック
・TA-F1ブロックライン
・TBシネマ丸ゴシック
・VDL ペンレディ
・砧山本庵クラシック

本日の基本操作

トリムマーク
パスのオフセット
配置
Adobe Fonts（Typekit）

トリムマーク

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

参考サイト

パスのオフセット

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

参考サイト

配置

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

参考サイト

Adobe Fonts （Typekit ）

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

参考サイト

【2】文字デザイン

参考サイト

引き続きの基本操作

線パネル
アピアランスパネル
スタイライズ
クリッピングマスク
アウトライン
アピアランスの分割

レイアウトデザインのポイントとして

参考サイト

アクセスマップとは？

参考サイト

アクセスマップ制作のポイント

線パネル

線パネルでは、線の太さを設定するだけでなく、線の両端の形や、角の形を変える事ができます。また点線や矢印も作る事ができます。

参考サイト

アピアランスパネル

参考サイト

スタイライズ

参考サイト

クリッピングマスク

参考サイト

アウトライン

Illustrator「アウトライン」という言葉で覚えておくの３つ！

「オブジェクト」＞「パス」＞「パスのアウトライン」
「書式」＞「アウトラインの作成」
「表示」＞「アウトライン（Ctrl+Ｙ）」

参考サイト

アピアランスの分割

参考サイト

本日の課題

名刺を作成し
5限目までにドロップボックスにUPしてください。
5限目に講評を行います。
※ファイル名は、work_○○○○_20210527.pdf

研修メモ

覚書

2021年5月28日（金）

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

2021年5月28日By master 実技写真合成・補正加工実習 “実技写真合成・補正加工実習①”の編集

-本日のアジェンダ-

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

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

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

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

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

本日のテーマ

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

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

参考サイト

練習用写真素材

本日の基本操作

画像解像度
モード
配置

画像解像度

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

モード

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

参考サイト

配置

参考サイト

【3】配色デザイン

参考サイト

名刺作成の参考サイト

【おススメフォント】

引き続きの基本操作

トリムマーク
パスのオフセット
Adobe Fonts（Typekit）

トリムマーク

参考サイト

パスのオフセット

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

参考サイト

Adobe Fonts （Typekit ）

参考サイト

本日の課題

DMを作成し
5限目までにドロップボックスにUPしてください。
5限目に講評を行います。
※ファイル名は、work_○○○○_20210528.pdf

研修メモ

覚書

2021年5月31日（月）

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

2021年5月31日By admin 実技写真合成・補正加工実習 “実技写真合成・補正加工実習②”の編集

-本日のアジェンダ-

1限目
実技写真合成・補正加工実習②
デザインカンプについて

2限目
実技写真合成・補正加工実習②
フライヤー制作

3限目
実技写真合成・補正加工実習②
フライヤー制作

4限目
実技写真合成・補正加工実習②
フライヤー制作

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

本日のテーマ

デザインカンプ（たたき台）の考え方

デザインカンプとは？

デザインカンプとは、簡単に説明すると「完成イメージ」のことです。日本語では「カンプ」と呼んでいますが、これは英語では「包括的レイアウト」という意味の「Comprehensive Layout」を略した呼び方です。つまり、すべての要素がそろった状態の最終的な見本がデザインカンプです。

参考サイト

ワンポイントアドバイス

ストーリーをレイアウトしましょう。デザインカンプ（たたき台）は、文字と配色のデザインは後回し「レイアウトデザイン」の全てを意識して作成してみましょう。

1.パーツ（掲載内容）をリストアップする。
2. ストーリー（見せる順番）を考える。
3.文字の種類は特徴の少ないものを使用する。
4.色を使わずレイアウトを考える。
5.サイズバランス（100％表示）に注意する。

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

参考サイト

本日の基本操作

アートボードツール

アートボードツール

目的のアートボードを中央に表示するには、アートボードパネルのアートボードの名前をダブルクリックします。もしくはステータスバーのアートボードナビゲーション（赤の丸で囲ったボタン）から、目的のアートボードを選択します。アートボードツールを選択すると、コントロールパネルにアートボードツールのオプションが表示されます。

参考サイト

フライヤー作成のスケジュール

5/31.デザインカンプ提出
6/2.デザインラフ提出
6/4.成績考査（納品）

本日の課題

フライヤーの表裏のデザインカンプを作成し
5限目までにドロップボックスにUPしてください。
5限目に講評を行います。
※ファイル名は、work_○○○○_20210531.pdf

研修メモ

覚書

2021年6月1日（火）

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

2021年6月1日By admin 実技写真合成・補正加工実習 “実技写真合成・補正加工実習③”の編集

-本日のアジェンダ-

1限目
実技写真合成・補正加工実習③
読みやすさについて

2限目
実技写真合成・補正加工実習③
フライヤー制作

3限目
実技写真合成・補正加工実習③
フライヤー制作

4限目
実技写真合成・補正加工実習③
フライヤー制作

5限目
実技写真合成・補正加工実習③
フライヤー制作

本日のテーマ

フォントの工夫と考え方

デザインカンプが出来たら
（クライアントOK後）・・・

デザインカンプ（レイアウト）が整ったら、読みやすさ（「可視性」「可読性」「視認性」）を常に意識して、ストーリーの上から整えていきましょう。
それと、このタイミングで写真の仮掲載をして、バランスを確認していきましょう。

【2】文字デザイン

参考サイト

デザインカンプとは？

参考サイト

ワンポイントアドバイス

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

参考サイト

本日の基本操作

アートボードツール

アートボードツール

参考サイト

フライヤー作成のスケジュール

5/31.デザインカンプ提出
6/2.デザインラフ提出
6/4.成績考査（納品）

本日の課題

フライヤーの表裏のデザインラフの途中経過を
5限目までにドロップボックスにUPしてください。
※ファイル名は、work_○○○○_20210601.pdf

研修メモ

覚書

2021年6月2日（水）

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

2021年6月2日By admin 実技写真合成・補正加工実習 “実技写真合成・補正加工実習④”の編集

-本日のアジェンダ-

1限目
実技写真合成・補正加工実習④
配色比率について

2限目
実技写真合成・補正加工実習④
フライヤー制作

3限目
実技写真合成・補正加工実習④
フライヤー制作

4限目
実技写真合成・補正加工実習④
フライヤー制作

5限目
実技写真合成・補正加工実習④
フライヤー制作

本日のテーマ

配色の考え方と使い方

配色比率の考え方

文字の読みやすさ（「可視性」「可読性」「視認性」）が整ったら配色比率を考えてみましょう。ポイントは、色の配色比率「70：25：5の法則」を考えて調整を行ってみたり、別パターンを用意してみたりしてみましょう。

配色比率とは？

色の配色比率「70：25：5の法則」一般的に、基本カラー3色を「70%：25%：5%」の比率にして配色すると、バランスの取れた美しい配色になるとされています。

参考サイト

【3】配色デザイン

参考サイト

デザインカンプが出来たら
（クライアントOK後）・・・

【2】文字デザイン

参考サイト

デザインカンプとは？

参考サイト

ワンポイントアドバイス

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

参考サイト

本日の基本操作

アートボードツール

アートボードツール

参考サイト

フライヤー作成のスケジュール

5/31.デザインカンプ提出
6/2.デザインラフ提出
6/4.成績考査（納品）

本日の課題

フライヤーの表裏のデザインラフを作成し
5限目までにドロップボックスにUPしてください。
5限目に講評を行います。
※ファイル名は、work_○○○○_20210602.pdf

研修メモ

覚書

2021年6月3日（木）

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

2021年6月3日By admin 実技写真合成・補正加工実習 “実技写真合成・補正加工実習⑤”の編集

-本日のアジェンダ-

1限目
実技写真合成・補正加工実習⑤
納品について

2限目
実技写真合成・補正加工実習⑤
フライヤー制作

3限目
実技写真合成・補正加工実習⑤
フライヤー制作

4限目
実技写真合成・補正加工実習⑤
フライヤー制作

5限目
実技写真合成・補正加工実習⑤
フライヤー制作

本日のテーマ

納品について

印刷物の納品について

印刷物の納品については、まず印刷屋さんに確認を取りましょう。媒体によって納品データの作成方法が異なります。また納期は印刷物が届けられる日を逆算してスケジュールを確認しておきましょう。

参考サイト

印刷データ作成方法／注意点

配色比率の考え方

配色比率とは？

参考サイト

【3】配色デザイン

参考サイト

デザインカンプが出来たら
（クライアントOK後）・・・

【2】文字デザイン

参考サイト

デザインカンプとは？

参考サイト

ワンポイントアドバイス

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

参考サイト

本日の基本操作

アートボードツール

アートボードツール

参考サイト

フライヤー作成のスケジュール

5/31.デザインカンプ提出
6/2.デザインラフ提出
6/4.成績考査（納品）

本日の課題

フライヤーの表裏のデザインラフを作成し
5限目までにドロップボックスにUPしてください。
5限目に講評を行います。
※ファイル名は、work_○○○○_20210603.pdf

研修メモ

覚書

2021年6月4日（金）

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

2021年6月4日By admin 実技写真合成・補正加工実習 “実技写真合成・補正加工実習⑥”の編集

-本日のアジェンダ-

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

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

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

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

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

本日のテーマ

成績考査です。

第2回成績考査

ドロップボックス「第2回成績考査＞grade-check_〇〇〇〇_20210604.ai」を使用して、
各作品を作成してください。
出来たものは、pdfのデータ形式（最小ファイルサイズ）でドロップボックスにUPしてください。
※ファイルの○○○○は名前を記載してください。
※ネット上の写真には権利がありますので、あくまでも課題用として取り扱ってください。

研修メモ

覚書

2021年6月7日（月）

学科　ECサイト運用基礎①

2021年6月7日By admin 学科　ECサイト運用基礎 “学科　ECサイト運用基礎①”の編集

-本日のアジェンダ-

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

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

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

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

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

本日のテーマ

ECサイトについて②

インターネット広告とは？

インターネット広告とは、インターネットのウェブサイトやメールを使用し、企業が製品やサービスのマーケティングのために行う宣伝活動のことである。携帯電話などのモバイル端末に表示される広告も含まれる。「ネット広告」と略されるほか、「オンライン広告」「ウェブ広告」とも呼ばれる。ウィキペディア

インターネット広告主な種類

インターネット広告
リスティング広告（検索連動型広告）
純広告
アフィリエイト広告
ネイティブ広告
SNS広告
動画広告
メール広告

参考サイト

ECサイトについて

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

参考サイト

バナー広告とは？

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

参考サイト

ワンポイントアドバイス

バナー作成はデザインの全ての要素が詰まっている作品です。ポートフォリオに掲載する最も効果的なアイテムとなりますので、しっかりと良い作品作りが出来るように進めていきましょう。

バナー制作の進め方

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

シェイプ・パス・ピクセル
描画ツール
パス選択ツール
ブレンドモード
レイヤースタイル
塗りつぶしツール

シェイプ・パス・ピクセル

【シェイプ】
ベクトルデータで図形を描画します。塗り、線色、線幅を設定することが出来て、後で形状や塗りを変更することが出来ます。また、描画後に自動でベクトルレイヤーが作成されます。
【パス】
アウトラインデータだけのシェイプです。塗り、線色、線幅が設定されていません。主に選択範囲を作成する際に使用します。
【ピクセル】
ラスターデータで図形を描画します。後で形状や塗りを変更することが出来ません。

参考サイト

描画ツール

複数のアンカーポイントという点を結んだ線（パス）で描かれた図形のことです。
矩形や円、五角形などの所謂、図形を描いたり、カスタムシェイプツールを使って複雑な図形を描くことができます。

長方形ツール
角丸長方形ツール
楕円形ツール
多角形ツール
カスタムシェイプツール

参考サイト

パス選択ツール

【Photoshop基本操作】［パス選択ツール］とは、アンカーポイントの移動や方向線の調整など、主にパスの操作を行うツールです。その活用範囲は広く、他のツールからキー操作で切り替えて使用することも多いです。クリックして選択が基本！ パス選択ツールの操作は、「掴んで離す」ようなドラッグ＆ドロップがほとんどです。

参考サイト

ブレンドモード

Photoshopのブレンド（描画）モードの効果まとめ１【乗算・スクリーンなど】 フォトショップにはブレンドモード（描画モード）といって、下にあるレイヤーに対してどういった合成をするかを設定できる機能があります。イラストレーターにも透明パネルの中に同じような機能があるので、覚えておくと色々と使えます。

参考サイト

レイヤースタイル

Photoshop では、シャドウ、光彩、ベベルなどの様々な効果を使用して、レイヤーの内容の外観を非破壊的な方法ですばやく変更できます。レイヤー効果は、レイヤーの内容にリンクされています。レイヤーの内容を移動または編集すると、変更された内容にも同じ効果が適用されます。例えば、テキストレイヤーにドロップシャドウを適用した後、新しいテキストを追加した場合、新しいテキストにも自動的にシャドウが追加されます。

ドロップシャドウ・シャドウ（内側）
光彩（外側）
光彩（内側）
べベルとエンボス「輪郭」「テクスチャ」
サテン
カラーオーバーレイ
グラデーションオーバーレイ
パターンオーバーレイ
境界線

レイヤースタイルのコピー
レイヤースタイルのペースト

参考サイト

塗りつぶしツール

[塗りつぶし]ツールは、指定された領域を塗りつぶすためのツールです。クリックした場所が[白]であれば、白い部分をすべて範囲として塗りつぶします。

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

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

バナー制作で覚えておきたい技術

枠作成（レイヤースタイル）
グラデーション（レイヤースタイル）
境界線（レイヤースタイル）
光と影（レイヤースタイル）
レイアウト/文字/配色
カンバスサイズ
Web用に書き出し（ jpg gif png ）

本日の課題

ご自身の作品よりバナー（練習）を作成してみましょう。
サイズは幅400px高さ300pxです。
作成したバナーを5限目終了までにドロップボックスにUPしてください。
※ファイル名は、bnr_○○○○_20210607.jpg

研修メモ

覚書

2021年6月8日（火）

学科　ECサイト運用基礎②

2021年6月8日By admin 学科　ECサイト運用基礎 “学科　ECサイト運用基礎②”の編集

-本日のアジェンダ-

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

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

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

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

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

本日のテーマ

ECサイトについて②

インターネット広告とは？

インターネット広告主な種類

インターネット広告
リスティング広告（検索連動型広告）
純広告
アフィリエイト広告
ネイティブ広告
SNS広告
動画広告
メール広告

参考サイト

ECサイトについて

参考サイト

バナー広告とは？

参考サイト

ワンポイントアドバイス

バナー制作の進め方

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

シェイプ・パス・ピクセル
描画ツール
パス選択ツール
ブレンドモード
レイヤースタイル
塗りつぶしツール

シェイプ・パス・ピクセル

参考サイト

描画ツール

長方形ツール
角丸長方形ツール
楕円形ツール
多角形ツール
カスタムシェイプツール

参考サイト

パス選択ツール

参考サイト

ブレンドモード

参考サイト

レイヤースタイル

ドロップシャドウ・シャドウ（内側）
光彩（外側）
光彩（内側）
べベルとエンボス「輪郭」「テクスチャ」
サテン
カラーオーバーレイ
グラデーションオーバーレイ
パターンオーバーレイ
境界線

レイヤースタイルのコピー
レイヤースタイルのペースト

参考サイト

塗りつぶしツール

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

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

バナー制作で覚えておきたい技術

枠作成（レイヤースタイル）
グラデーション（レイヤースタイル）
境界線（レイヤースタイル）
光と影（レイヤースタイル）
レイアウト/文字/配色
カンバスサイズ
Web用に書き出し（ jpg gif png ）

本日の課題

バナー作成練習 -模写①-

バナーの模写を行って下さい。
作成したバナーを5限目終了までにドロップボックスにUPしてください。
※ファイル名は、bnr_○○○○_20210608.jpg

研修メモ

覚書

2021年6月9日（水）

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

2021年6月9日By admin 学科 ECサイトデザイン基礎 “学科　ECサイトデザイン基礎①”の編集

-本日のアジェンダ-

1限目
学科　ECサイトデザイン基礎①
Photoshopの機能について

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

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

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

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

本日のテーマ

表現の完コピしてみましょう。

本日の課題

バナー作成練習 -模写②-

バナーの模写を行って下さい。
作成したバナーを5限目終了までにドロップボックスにUPしてください。※ファイル名は、bnr_○○○○_20210609_01.jpg

バナー作成練習 -模写③-

バナーの模写を行って下さい。
作成したバナーを5限目終了までにドロップボックスにUPしてください。※ファイル名は、bnr_○○○○_20210609_02.jpg

これまでの基本知識

インターネット広告とは？

インターネット広告主な種類

インターネット広告
リスティング広告（検索連動型広告）
純広告
アフィリエイト広告
ネイティブ広告
SNS広告
動画広告
メール広告

参考サイト

ECサイトについて

参考サイト

バナー広告とは？

参考サイト

ワンポイントアドバイス

バナー制作の進め方

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

シェイプ・パス・ピクセル
描画ツール
パス選択ツール
ブレンドモード
レイヤースタイル
塗りつぶしツール

シェイプ・パス・ピクセル

参考サイト

描画ツール

長方形ツール
角丸長方形ツール
楕円形ツール
多角形ツール
カスタムシェイプツール

参考サイト

パス選択ツール

参考サイト

ブレンドモード

参考サイト

レイヤースタイル

ドロップシャドウ・シャドウ（内側）
光彩（外側）
光彩（内側）
べベルとエンボス「輪郭」「テクスチャ」
サテン
カラーオーバーレイ
グラデーションオーバーレイ
パターンオーバーレイ
境界線

レイヤースタイルのコピー
レイヤースタイルのペースト

参考サイト

塗りつぶしツール

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

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

バナー制作で覚えておきたい技術

枠作成（レイヤースタイル）
グラデーション（レイヤースタイル）
境界線（レイヤースタイル）
光と影（レイヤースタイル）
レイアウト/文字/配色
カンバスサイズ
Web用に書き出し（ jpg gif png ）

研修メモ

覚書

2021年6月10日（木）

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

2021年6月10日By admin 学科 ECサイトデザイン基礎 “学科　ECサイトデザイン基礎②”の編集

-本日のアジェンダ-

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

2限目
学科　ECサイトデザイン基礎②
サムネイル画像作成

3限目
学科　ECサイトデザイン基礎②
サムネイル画像作成

4限目
学科　ECサイトデザイン基礎②
サムネイル画像作成

5限目
学科　ECサイトデザイン基礎②
サムネイル画像作成

本日のテーマ

サムネイル画像について

サムネイル画像とは？

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

参考サイト

本日の課題

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

サムネイル画像の作成をして下さい。
作成したバナーを5限目終了までにドロップボックスにUPしてください。※ファイル名は、img001_○○○○_20210610.jpg

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

サムネイル画像の作成をして下さい。
作成したバナーを5限目終了までにドロップボックスにUPしてください。※ファイル名は、img002_○○○○_20210610.jpg

昨日までの基本知識

インターネット広告とは？

インターネット広告主な種類

インターネット広告
リスティング広告（検索連動型広告）
純広告
アフィリエイト広告
ネイティブ広告
SNS広告
動画広告
メール広告

参考サイト

ECサイトについて

参考サイト

バナー広告とは？

参考サイト

ワンポイントアドバイス

バナー制作の進め方

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

シェイプ・パス・ピクセル
描画ツール
パス選択ツール
ブレンドモード
レイヤースタイル
塗りつぶしツール

シェイプ・パス・ピクセル

参考サイト

描画ツール

長方形ツール
角丸長方形ツール
楕円形ツール
多角形ツール
カスタムシェイプツール

参考サイト

パス選択ツール

参考サイト

ブレンドモード

参考サイト

レイヤースタイル

ドロップシャドウ・シャドウ（内側）
光彩（外側）
光彩（内側）
べベルとエンボス「輪郭」「テクスチャ」
サテン
カラーオーバーレイ
グラデーションオーバーレイ
パターンオーバーレイ
境界線

レイヤースタイルのコピー
レイヤースタイルのペースト

参考サイト

塗りつぶしツール

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

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

バナー制作で覚えておきたい技術

枠作成（レイヤースタイル）
グラデーション（レイヤースタイル）
境界線（レイヤースタイル）
光と影（レイヤースタイル）
レイアウト/文字/配色
カンバスサイズ
Web用に書き出し（ jpg gif png ）

研修メモ

覚書

2021年6月11日（金）

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

2021年6月11日By admin 学科 ECサイトデザイン基礎 “学科　ECサイトデザイン基礎③”の編集

-本日のアジェンダ-

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

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

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

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

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

本日のテーマ

ポートフォリオ用バナー作成の考え方

ポートフォリオで使えるバナー作成について

未経験からデザイナーになる為にポートフォリオを必須ですが、作品をどう作るかが問題です。当然ポートフォリオは、作品集ですから、数多くの作品がある事は、理想的ですが、Webサイトを数多く作るのはとても時間がかかります。
そこで、とても有効的なのは「バナー」です。

参考サイト

ワンポイントアドバイス

バナーは、デザインの「レイアウト」「文字」「配色」の要素がすべてそろっている必要があります。また、広告掲載として利用する為、商品知識やコンテンツの理解など、様々な要素を詰め込む事が必要になりますので、しっかりと考えられた作品となるように作成してみましょう。

ポートフォリオについて

本日の課題

バナー作成練習 -テーマ①-

楽天の食品やスイーツ・お菓子のバナー作成
キャッチコピー、商品名、価格などを入れた 600 x 400pxのバナー
複数の商品バナーを作成してお勧めのバナー（1点）を5時限目までに提出
提出先：【提出】→【作品】食品バナー_20210611
ファイル名：bnr_○○○○_20210611.jpg（○○○○は名前のローマ字）

研修メモ

覚書

自己紹介
- 採用担当だったことを忘れずに
- デザインスキルが弱い
就職応募に必要な書類（履歴書、職務経歴書、ポートフォリオ）
【履歴書】
・書くことは決まっている（アピールできるのは応募理由ぐらい）
【職務経歴書】
・70%は書くことが決まっているが30%はアピールの要素あり
・スキル（職歴で身に着けたものも含めて）
・職歴の中での成果や工夫したこと
・様式は決まっていないのでデザイナーとしての腕のみせどころ
【ポートフォリオ】
・100%アピール可能
・ポートフォリオ自体も作品
・デザイナー経験がない時は作品がないのが悩みだが大丈夫
・訓練中がポートフォリオ作成を意識して進める！
ポートフォリオの構成と内容
Web版ポートフォリオと紙版ポートフォリオ
【Web版】
〇Webサイトなどは動きも見せられる（JavaScript、jQueryスキル）
〇コードも見てもらえるのでコーディング技術を確認してもらえる
〇費用がかからない
〇追加・削除・修正が即時行える
〇送付時はURLをメールで送るだけで良い
✕面接時には適さないことがある
【紙版】
〇DTP系の応募では作品そのもの
〇ITリテラシーの低い採用担当にも気軽に見てもらえる
✕Webサイトの動きをみせれない
✕費用がかかる（20ページ程度の印刷で1,000円程度）
✕送るのが面倒（電子メールでは遅れないがネット上に置けば良い）
作品としてのバナーの有用性
・短時間で作成できる
・ユーザー企業に応募するのであれば商品バナー作成も有効
・デザインスキルを見てもらえる（レイアウト・文字・配色）
バナー作成練習テーマ①
楽天の食品やスイーツ・お菓子のバナー作成
キャッチコピー、商品名、価格などを入れた 600 x 400pxのバナー
複数の商品バナーを作成してお勧めのバナー（1点）を5時限目までに提出
提出先：【提出】→【作品】食品バナー_20210611
ファイル名：bnr_○○○○_20210611.jpg（○○○○は名前のローマ字）

2021年6月14日（月）

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

2021年6月14日By admin 実技 ECサイトデザイン実習 “実技　ECサイトデザイン実習①”の編集

-本日のアジェンダ-

1限目
実技　ECサイトデザイン実習①
写真の権利について

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

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

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

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

本日のテーマ

権利を確認しておきましょう。

写真の権利について

著作権は、作品を創作した者が有する権利である。また、作品がどう使われるか決めることができる権利である。作者の思想や感情が表現された文芸・学術・美術・音楽などを著作物といい、創作した者を著作者という。知的財産権の一種。ウィキペディア

参考サイト

本日の課題

バナー作成練習 -テーマ②-

楽天のメンズファッションのバナー作成
キャッチコピー、商品名、価格などを入れた 600 x 400pxのバナー
商品バナーを作成して4時限目までに提出
提出先：【提出】→【作品】ファッションバナー_20210614
ファイル名：bnr_○○○○_20210614_01.jpg（○○○○は名前のローマ字）

バナー作成練習 -テーマ③-

楽天のレディースファッションのバナー作成
キャッチコピー、商品名、価格などを入れた 600 x 400pxのバナー
商品バナーを作成して4時限目までに提出
提出先：【提出】→【作品】ファッションバナー_20210614
ファイル名：bnr_○○○○_20210614_02.jpg（○○○○は名前のローマ字）

研修メモ

覚書

著作財産権と著作者人格権
・著作財産権：他人に干渉されることなく利用する権利（日本では譲渡可能）
・著作者人格権：著作者の人格的利益を保護する権利（日本では譲渡不可能）
・著作者人格権
　- 創作したものを公表するかどうかを決定する公表権
　- 氏名表示の有無を決定する氏名表示権
　- 勝手に改変されないための同一性保持権
著作権マーク（©）
「氏名、最初の発行年、著作権マーク」を表示すれば著作権の保護を受けることが可能
（但し、表示がなくても著作権はある・有効）
インターネット上に掲載されている素材を使用する場合の注意事項
インターネット上の写真は自由に使えるの？著作権にまつわる …
自分で撮影した写真を使用する場合の注意事項
写真撮影における著作権や権利関係
イラストや写真の著作権侵害
イラストや画像の著作権侵害の判断基準は？どこまで類似で …
作品制作の外部発注における著作権トラブル
良くあるトラブルで、ある制作会社にWeb
訓練やポートフォリオで使用する素材は？
・自己撮影や自己作成の素材を使用する
・ポートフォリオ掲載で外部に出す時はインターネットからの借用や感謝の意を示す
バナー作成練習テーマ②
楽天のメンズファッションのバナー作成
キャッチコピー、商品名、価格などを入れた 600 x 400pxのバナー
商品バナーを作成して4時限目までに提出
提出先：【提出】→【作品】ファッションバナー_20210614
ファイル名：bnr_○○○○_20210614_01.jpg（○○○○は名前のローマ字）
バナー作成練習テーマ③
楽天のレディースファッションのバナー作成
キャッチコピー、商品名、価格などを入れた 600 x 400pxのバナー
商品バナーを作成して4時限目までに提出
提出先：【提出】→【作品】ファッションバナー_20210614
ファイル名：bnr_○○○○_20210614_02.jpg（○○○○は名前のローマ字）
講評

2021年6月15日（火）

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

2021年6月15日By admin 実技 ECサイトデザイン実習

-本日のアジェンダ-

1限目
実技　ECサイトデザイン実習②
バナーの利用方法について

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

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

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

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

本日のテーマ

元データをしっかり意識しましょう。

デザイン素材の権利について

バナーなどの制作物のデータは、当然二次利用が可能です。データ納品となる場合は権利やデータの内容などの事から、価値が変わります。
初期の契約内容や会社での方針などしっかり確認しデータのやり取りをしましょう。

参考サイト

ワンポイントアドバイス

Webサイト利用のバナーは、様々なサイズで作成する技術が求められます。デザインの「レイアウト」「文字」「配色」をしっかりと継承したデザインを作成できるようにしましょう。また元データは、それに対応しやすいように計画的に整理整頓しておきましょう。

本日の課題

バナー作成練習 -バリエーション-

バナーのレイアウト違いを作成して下さい。
作成したバナーを4限目終了までにドロップボックスにUPしてください。5限目に講評を行います。
※ファイル名は、bnr_○○○○_20210615.jpg

研修メモ

覚書

2021年6月16日（水）

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

2021年6月16日By admin 実技 ECサイトデザイン実習

-本日のアジェンダ-

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

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

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

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

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

本日のテーマ

馴染んでください

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

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

ワンポイントアドバイス

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

本日の課題

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

バナーの作成しスクリーンショットした画像に当て込んで下さい。
作成した作品を4限目終了までにドロップボックスにUPしてください。
5限目に講評を行います。
※ファイル名は、bnr_○○○○_20210616.jpg

研修メモ

覚書

2021年6月17日（木）

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

2021年6月17日By admin 実技 ECサイトデザイン実習

-本日のアジェンダ-

1限目
実技　ECサイトデザイン実習④
デモンストレーション

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

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

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

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

本日のテーマ

いっぱい作りましょう

デザインの上達方法

デザインの基本を理解したら後はひたすら経験値を稼ぎましょう。
数多くのバナーを作成し様々なジャンルの表現を自分の引き出しにして、様々なお客様のご要望に応えられるデザインが出来るよう日々備えていきましょう。

練習用写真素材

本日の課題

当日発表

当て込みのバナーの作成して下さい。
作成した作品を4限目終了までにドロップボックスにUPしてください。
5限目に講評を行います。
※ファイル名は、bnr_○○○○_20210617.jpg

研修メモ

覚書

2021年6月18日（金）

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

2021年6月18日By admin 実技 ECサイトデザイン実習

-本日のアジェンダ-

1限目
実技　ECサイトデザイン実習⑤
グラフィックツールのまとめ

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

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

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

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

本日のテーマ

今日は遊んでください

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

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

本日のキーワード

GIF画像で保存
GIFアニメ
Photoshop「タイムライン」
トゥイーン

参考サイト

本日の課題

当日発表

バナーの作成して下さい。
作成した作品を4限目終了までにドロップボックスにUPしてください。
5限目に講評を行います。
※ファイル名は、bnr_○○○○_20210619.gif

研修メモ

覚書

2021年6月21日（月）

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

2021年6月21日By admin 実技ユーザーインターフェイス作成実習 “実技　ユーザーインターフェイス作成実習①”の編集

-本日のアジェンダ-

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

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

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

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

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

本日のテーマ

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

WordPressとは

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

WordPress の記事

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

WordPressのテーマ

wordpressの運用について

投稿ページの作り方（基礎）

固定ページの作り方（基礎）

メディア（基礎）

ワンポイントアドバイス

Webデザイナーとして応募の際にポートフォリオサイトとして、最もよく使われていると言われているのが、wordpressです。また国内のWebサイト利用で最も利用されているCMSがwordpressです。
まずはその特徴と内容を理解しておきましょう。

本日の課題

wordpressのテーマと本日の記事をUPしてください。

研修メモ

覚書

事前準備

Xfreeアカウント作成、WordPressサイト開設
座席表にURLの追記、DropBoxへのアップロード

WordPressの訓練目的と目標

作成するのは、ポートフォリオと訓練記録（訓練ブログ）が共存したサイト
目的は、就職時に使えるポートフォリオの作成とWordPressに慣れるための訓練記録
訓練記録があると実際に就職時に使えない！
→訓練記録も武器にする（日々の投稿（ブログ）の例として使用）
→一時的にブログ部分を非表示に設定
→自分で作成したサイトにポートフォリオ部分だけを引っ越し
成績考査（7/13）は、ポートフォリオと訓練記録が共存したサイト
サイトの記載内容が不足している時は追加してもらう
例えば、訓練記録の記載内容が不足している時は過去に遡って記載

WordPressとは

CMSとは（利点）
WordPressの利用
ポートフォリオの重要性
ポートフォリオサイトとしての活用

ユーザー作成

座席表のダウンロード
管理画面の表示
ユーザーの作成（権限）
サイト運用

記事

投稿記事（アイキャッチ画像）
固定記事（投稿記事との違い）
記事内容（見出し・段落・画像・カテゴリとタグ）
メディアライブラリィ（画像の自動生成）

テーマ

テーマの検索（自作も可）
テーマの変更（Fukasawa／Noa Liteなど）
テーマのインストールしすぎに注意（不要なテーマは削除）

サンプルサイト

その他

【初心者向け】WordPressブログを書き始める前に済ませたい初期設定13個 | 初心者のためのブログ始め方講座
基本設定のサイトアドレスは変更しないこと！

2021年6月22日（火）

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

2021年6月22日By admin 実技ユーザーインターフェイス作成実習 “実技　ユーザーインターフェイス作成実習②”の編集

-本日のアジェンダ-

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

2限目
実技　ユーザーインターフェイス作成実習②
WordPressのカスタマイズ

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

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

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

本日のテーマ

WordPressの仕組みを知ろう

固定ページとは？

WordPress（ワードプレス）の固定ページとは. WordPressの固定ページとは、投稿と異なりカテゴリに含まれないページのことです。例えば、お問い合わせページや会社紹介のページ・アクセス情報などが当てはまります。

参考サイト

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

WordPressのプラグイン

wordpressの運用について

投稿ページの作り方（基礎）

固定ページの作り方（基礎）

メディア（基礎）

ワンポイントアドバイス

ここで学んだ、illustrator、Photoshopを復習として投稿記事にまとめていきましょう。復習にもなりますし今後のご自身の制作の教科書（メモ書き）にしてみましょう。

本日の課題

固定ページ（プロフィールページ）と本日の記事をUPしてください。

研修メモ

覚書

昨日の補足

投稿ページの補足
- ブロックの移動
- アイキャッチ画像
- カテゴリ／タグ
- 画像の自動生成
- 投稿日／予約投稿
- ブロックの色と文字飾り

WorsPreeeのインストール

xfreeの契約とWordPressのインストール
xfree → oohama@yahoo.co.jp/nobu15

WordPressのカスタマイズ

テーマのカスタマイズ
メニュー作成
トップページを固定ページに変更
プラグインとは
代表的なプラグイン（紹介だけ／自己責任）
- WPFront Scroll Top
- Contact Form 7
- Gallery Custom Links
- Table Press
- WP-Optimize
- Classic Editor
- Password Protected
  （xfreeでは動作不可→伏せ文字かページパスワード「deau」）
- All-in-One WP Migration（xfreeでは不具合有り）

ブロックエディタの主要機能

ブロックエディターのツールバーを上の固定位置に表示（右上の・・・）
テキスト→「段落、見出し、リスト」は、基本の項目
テキスト→改行の入力方法
テキスト→リンクの設定方法
テキスト→「コード、整形済テキスト、詩」は同じようなブロック
（複数の空白や改行をそのまま表示）
テキスト→「テーブル」は、表組型式を作成
メディア→「画像、ギャラリー」は、写真掲載の基本
（ギャラリーのリンクはプラグイン（Gallery Custom Links）が必要）
メディア→「カバー」は、テキストをオーバレイした画像を配置
メディア→「メディアとテキスト」は、写真と文章を並べる
メディア→「ファイル」は、PDFファイルなどのダウンロードを配置
デザイン→「ボタン」は、リンクを作成するのに便利
デザイン→「カラム」は、横方向に複数欄を作成し、それぞれのメディアを指定可
デザイン→「続き」は、抜粋に表示する範囲を指定
デザイン→「ページ区切り」は、別ページにする時に指定
デザイン→「区切り」は、文章と文章の間に水平線を表示
デザイン→「スペーサー」は、空間を作成
ウィジェット→「ウィジェット」は、色々な表示部品を指定
（Contact Form、カレンダー、カテゴリー、最新の投稿など）
ウィジェット→「ソーシャルアイコン」は、SNSへのリンクを作成
埋め込み→「埋め込み」は、代表的なサイトへのリンクを作成（YouTube、WordPress）

事後作業

管理者ユーザー（test）のパスワード変更（訓練番号（4桁）を付与）

2021年6月23日（水）

学科 HTML基礎①

2021年6月23日By admin 学科 HTML基礎 “学科 HTML基礎①”の編集

-本日のアジェンダ-

1限目
学科 HTML基礎①
ページのソースとデベロッパーツールについて

2限目
学科 HTML基礎①
htmlの記述【基本タグ】

3限目
学科 HTML基礎①
htmlの記述【head】

4限目
学科 HTML基礎①
HTMLのまとめ

5限目
学科 HTML基礎①
グラフィックツールの復習

本日のテーマ

まずHTMLのソースコードの見方を理解しましょう。

ページのソースについて

ホームページのソースとは？普段何気なく見ているホームページなどのウェブページは、HTMLやCSSというマークアップ言語からできています。これらの言語で書かれたファイルのことを「ソースファイル」と呼び、例えばHTMLで書かれたファイルを「HTMLソース」といいます。

参考サイト

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

デベロッパーツールはGoogle Chromeに標準で搭載されているデバッグツールで、WebサイトのHTML構成や表示スピード、通信状況などを確認できます。特別なツールやプログラムを使わずブラウザのみで手軽に利用でき、エンジニアの私もWebサービスの開発やテスト、デザインのチェックを行うときに頻繁に使っています。

参考サイト

ワンポイントアドバイス

ソースコードは実際に記述したコードの内容で、デベロッパーツールはブラウジングされた内容として出力されます。コードの誤り等を見つけるのに便利ですので、しっかり使いこないしてみましょう。

htmlの記述【基本タグ】

<!doctype html>
<html>∼</html>
<head>∼</head>
<body>∼</body>

サンプルページ（htmlの記述【基本タグ】）

doctype宣言とは？

HTML5におけるDOCTYPE宣言はあまり意味を持たないとされていますが、作成した文書がHTML5によるものであることを、ブラウザなどに明示的に伝えるために記述しておいたほうが良いでしょう。

DOCTYPE宣言が無いと、一般的なブラウザではレンダリングモードが互換モード（Quirks mode）となります。互換モードのブラウザではCSSの解釈が標準と異なるため、制作者の意図しないレイアウトになってしまう場合があります。ブラウザに標準モード（Standards mode）で解釈させる場合には、DOCTYPE宣言を記述する必要があります。 IE6も含めて、主要なブラウザでは文書の先頭に <!DOCTYPE html> と記述することで標準モードとなります。

参考サイト

ワンポイントアドバイス

楽天のショッピングサイトなどのテンプレートでは、 DOCTYPE宣言が無く互換モードになり、CSSが思うように使えなくなる場合があります。
その場合やむを得ず、違う方法を使わなければならない場合がありますので、お仕事で担当した時は、 DOCTYPE宣言は必ず確認しておきましょう。

<html>∼</html>

<html>タグは、HTML文書であることを示す際に使用します。 <html>～</html>で定義されるhtml要素は、文書のルート（根っこ）となる要素で、HTML文書の内容が始まることを表します。 <html>～</html>の直下には、 <head>と <body>がそれぞれ一つづつ必要となります。

<head>∼</head>

<head>タグは、文書のヘッダ情報を表す際に使用します。ヘッダ情報とは、その文書に関する情報のことです。 head要素を正確に定義するなら、「そのHTML文書に関するメタデータを集めたもの」ということになります。

<body>∼</body>

<body>タグは、文書の本体を表す際に使用します。文書の本体とはブラウザ上に表示されるメインコンテンツのことです。

htmlの記述【head】

<meta>
<title>∼</title>
<link>

サンプルページ（htmlの記述【head】）

<meta>

ワンポイントアドバイス

<title>∼</title>

<title>タグは、文書にタイトルをつける際に使用します。 <title>タグで文書のタイトルを指定する場合には、一つの文書に一つだけ、<head>～</head>の中に配置します。一つの文書内で複数の<title>を指定することはできません。<title>～</title>に指定する文書のタイトルは、検索エンジンの検索結果画面やユーザーの利用するブラウザのブックマーク欄などに表示されるので、文書の内容を表すものを指定する必要があります。

ワンポイントアドバイス

<title>∼</title> はとにかくSEOに直結します。検索エンジンで検索した時の一覧に表示される文字列に反映されますので、タイトル（題名）はよく考えて作成しましょう。

<link>

参考サイト

本日の課題①

wordpressのサイトに、本日学んだ内容を「投稿ページ」にまとめてください。
投稿日は、本日の日時で設定してください。
※ページタイトルに「議題」は必ず入れましょう。

本日の課題②

グラフィックデザイン基礎の内容をページにまとめてください。
投稿日は、該当する「学科　グラフィックデザイン基礎」の日時にしてください。
※ページタイトルに「議題」は必ず入れましょう。

研修メモ

覚書

viewpoint → viewport
作成したHTMLはブラウザにドラック＆ドロップすると開ける

2021年6月25日（金）

学科 HTML基礎②

2021年6月25日By admin 学科 HTML基礎 “学科 HTML基礎②”の編集

-本日のアジェンダ-

1限目
学科 HTML基礎②
段落「p」について

2限目
学科 HTML基礎②
見出し「h1～h6」について

3限目
学科 HTML基礎②
文字コード・特殊文字

4限目
学科 HTML基礎②
HTMLのまとめ

5限目
学科 HTML基礎②
グラフィックツールの復習

本日のテーマ

文章構造の基本は、「見出し」と「段落」

htmlの記述【body】

見出し「h1～h6」
段落「p」
改行「br」

サンプルページ（htmlの記述【body】）

見出し「h1～h6」について

<h1>・<h2>・<h3>・<h4>・<h5>・<h6>タグは、見出しを付ける際に使用します。数値が小さいほど高いランクの見出しとなります。 <h1>が最も高位の大見出しで、<h6>が最も低位の小見出しです。同じ数値のものが複数ある場合には同じランクとなります。

ワンポイントアドバイス

h1タグ以外は、特に使用回数に制限はありません。h2やh3などは大きな見出しとなることが多いためたくさん使われると思います。「h1タグは1ページで一回の使用で抑え、数字の順序をしっかり守ること」これを守っていれば使用になんら問題はありません。ただ、html5の場合は1ページにh1タグが複数あっても問題ありません。

参考サイト

段落「p」ついて

<p>タグは、ひとつの段落（パラグラフ）であることを表す際に使用します。<p>タグは、段落よりもふさわしい要素がある場合には使用するべきではありません。

ワンポイントアドバイス

マークアップに悩んだらとにかく「p」にしましょう。

改行「br」について

<br>タグは、改行する際に使用します。<br>は、例えば詩や住所などのように、改行が実際にコンテンツの一部を成すような場合にのみ使用します。文の長さを揃えたりレイアウトを整えるなどのスタイリング目的に<br>を使用してはいけません。

ワンポイントアドバイス

スペースを取る為に改行「br」を使うのは文法的にNGです。レイアウトとしてスペースを空けたいときはCSSで行いましょう。

特殊文字

ウェブページに特殊文字や記号を表示させるには専用の文字コードが必要となります。その内容と特徴を確認しておきましょう。

参考サイト

改行とタブとスペースについて

HTML文章中の改行とタブとスペースにもルールがあります。
下記参考サイトより確認しておきましょう。

改行とタブとスペースの見本

本日の課題①

本日の課題②

研修メモ

覚書

2021年6月28日（月）

学科 HTML基礎③

2021年6月28日By admin 学科 HTML基礎 “学科 HTML基礎③”の編集

-本日のアジェンダ-

1限目
学科 HTML基礎③
リスト「ul ol li」について

2限目
学科 HTML基礎③
リンクについて

3限目
学科 HTML基礎③
要素と属性とその値について

4限目
学科 HTML基礎③
HTMLのまとめ

5限目
学科 HTML基礎③
グラフィックツールの復習

本日のテーマ

要素と属性と値が基本の基本構造を理解しましょう。

リスト「ul ol li」について

<ul>タグはunordered listの略で、順序のないリストを表示する際に使用します。リスト項目は、<li>タグで指定します。
<ul>タグで作成されるのは順序のないリストなので、リスト項目の順序を変えても文書の意味は変わりません。順序のあるリストを作成する際には<ol>タグを使用してください。

<ol>タグはordered listの略で、順序のあるリストを表示する際に使用します。リスト項目は、<li>タグで指定します。
<ol>タグで作成されるのは順序のあるリストなので、リスト項目の順序を変えると文書の意味が変わってしまうはずです。順序のないリストを作成する際には<ul>タグを使用してください。

サンプルページ（htmlの記述【body】）

ワンポイントアドバイス

<p>より、リストとしての意味を持つ箇所はリストタグにしましょう。
主に、ナビゲーションや手順の説明、新着情報などの一覧表記にリストタグを使うとより効果的に検索エンジンに意味を伝えられるでしょう。

参考サイト

リンクについて

<a>タグは、ハイパーリンクを指定する際に使用します。ウェブページ内のテキストや画像などを<a>～</a>で囲んで必要な属性値を指定してやることで、ハイパーリンクの始点（出発点）や終点（到達点）とすることができます。

<a>は、anchor（アンカー）の略です。 anchorを日本語にすると“船の錨・つなぎ止めて固定する”といった意味になります。 <a>は、指定した場所同士をつなぐことで関連する情報同士を結び付け、ユーザーに情報間の移動手段を提供する重要なタグです。

ワンポイントアドバイス

SEO（検索エンジン最適化）の最も重要なタグの一つです。検索エンジンは、リンクを辿ってWebサイトを評価していきます。
まずは、リンク<a>～</a>で囲う文言は、リンク先のページの意味と同一になるように意識してみましょう。

参考サイト

ターゲット指定とは？

a要素に target="" を追加すると、リンク先の文書をどのフレーム（ウィンドウ）に表示するかを指定できます。

ワンポイントアドバイス

外部リンクを設定する時は自身のサイトからの離脱回避という意味と、他所のサイトの引用をしているという意味を込めて「 target=” _blank ” 」新規のウィンドウに表示に表示にしましょう。

要素と属性とその値について

HTML の要素は属性を持ちます。ユーザーが望む基準を満たすために、さまざまな方法で要素を構成したり、動作を調整したりする追加の値です。

<要素名 属性="属性値">
開始タグの要素名の後ろに半角スペースを開ける
属性の後ろに=（イコール）を付ける
属性値は"（ダブルクオート）で囲む

参考サイト

本日の課題①

本日の課題②

研修メモ

覚書

deau1001のテーマは cocoon（cocoonページからダウンロードが必要）

WordPressの追加説明

カスタムメニュー（外部サイトやカテゴリページへのリンク）
文字列へのカテゴリページへのリンク
親カテゴリの使用方法（ウィジェットが必要）
ページのタイトルを消す（Hide Page And Post Title）
ブロックエディタ用蛍光マーカー（VK Blocks）

CSSへの引継ぎ事項（HTML授業での実施項目）

前日の復習を簡単に実施（大切な部分を中心に）
本日の訓練事項（アジェンダ）を説明
アジェンダ上の参考サイトへのリンクを参考に説明
サイドバーのリンクを参考に説明
大浜サイトを参考に説明
保有知識の範囲で関連事項の話を実施
必要に応じてHTMLを作成して表示確認
WordPressで質問が出るので展開が必要な事項は全体に展開

2021年7月5日（月）

学科 HTML基礎④

2021年6月29日By admin 学科 HTML基礎 “学科 HTML基礎④”の編集

-本日のアジェンダ-

1限目
学科 HTML基礎④
画像について

2限目
学科 HTML基礎④
Webサイト用の画像について

3限目
学科 HTML基礎④
パスについて

4限目
学科 HTML基礎④
HTMLのまとめ

5限目
学科 HTML基礎④
グラフィックツールの復習

本日のテーマ

外部ファイルとの関係性を理解しましょう。

画像について

<img>タグは、画像を表示する際に使用します。必須属性のsrc属性で画像ファイルのURLを指定します。一般的なブラウザで表示できる画像フォーマットとしては、PNG・GIF・JPEGがよく利用されています。他にも、ウェブ用のベクター画像フォーマットであるSVGや、単一ページのPDF・アニメPNG・アニメGIFなどをsrc属性の値として指定できます。
alt属性には、画像が利用できない環境向けのテキストを指定します。 HTML5ではalt属性は必須ではありませんが、指定しておけばアクセシビリティーが高まるでしょう。

参考サイト

ワンポイントアドバイス

Webサイトを重くする（表示スピードの低下）の大きな原因の一つは画像サイズです。WebサイトにUPする画像はPhotoshopやIllustratorでしっかりと画像の最適化をしてUPしましょう。

パス（URL）について

「パス」とは、使用するファイルなどが有る場所を示す文字列です（パソコンでは、フォルダ名の経路を示す文字列です）。
「URL」とは、パス（フォルダ）名にファイル名を加えた文字列です。

サンプルページ（パス）

ワンポイントアドバイス

リンクには「絶対パス」と「相対パス」というのがあります。
単純に説明すると…
絶対パスは「http（https）」から始まるURL（パス）の事
相対パスは「現在のファイル位置」から見たURL（パス）の事
になります。サイトの構造や運用方法によって使い分けが必要になる事がありますので、この2種類を覚えておきましょう。

参考サイト

本日の課題①

本日の課題②

研修メモ

覚書

日程表の変更点説明
感染対策の注意事項を掲示
先行して勉強！ → 不明点はまとめの時間に！
大浜サイトに章番号とリンクを追加
欠席届の記入（木村さん、秋元さん、山城さん、山下さん、佐藤さん、舛田さん）
【以降は復習】
開発時のフォルダ構成
作成したHTML・CSSのチェック
HTMLの記述（「<要素属性=”属性値”>」）
head内（文書情報）の記述
h1～h6タグ（途中が抜けないように）
Pタグ（改行を行う時はbrタグ）
特殊文字
複数の改行やスペースは1つのスペースになる
ul/liタグ
ol/liタグ
dl/dt/ddタグ
aタグ（別タグで開く時は「target=”_blank”」を指定／さらに脆弱性対策を実施）
【以降は本日分】
imgタグ
パス指定（大文字・小文字に注意）

2021年7月6日（火）

学科 HTML基礎⑤

2021年6月30日By admin 学科 HTML基礎 “学科 HTML基礎⑤”の編集

-本日のアジェンダ-

1限目
学科 HTML基礎⑤
テーブルタグについて

2限目
学科 HTML基礎⑤
セクショニング・コンテンツについて

3限目
学科 HTML基礎⑤
ブロックレベル要素とインライン要素について

4限目
学科 HTML基礎⑤
HTMLのまとめ

5限目
学科 HTML基礎⑤
グラフィックツールの復習

本日のテーマ

タグの役割と特性を確認しましょう。

テーブルタグについて

「TABLE」とは<tr>、<th>、<td>などと組み合わせて表を作成するためのタグです。表の基本的な構造は<table>～</table>の中に<tr>～</tr>で表の横部分を指定し、その中に<th>～</th>や<td>～</td>で表題や縦軸を指定してセルを定義します。この時ヘッダセルのテキストは、一般的なブラウザでは太字になりセンタリングされます。
<table>はしばし、レイアウトのために使用されることがあります。しかし本来の使用方法ではありませんので、レイアウトで同様の効果が欲しい場合はスタイルシートを利用するとよいでしょう。

参考サイト

ワンポイントアドバイス

楽天やヤフーショッピングの商品ページでテーブルレイアウトが必要になる場合があります。EC関連のお仕事をする場合は、想定しておきましょう。

セクショニング・コンテンツについて

CSS3から登場のセクショニング・コンテンツのタグは、より細かい役割を指定する時に使いましょう。

セクションニングタグ一例

<section>∼</section>	一つのセクションであることを示す
<nav>∼</nav>	ナビゲーションであることを示す
<header>∼</header>	ヘッダであることを示す
<footer>∼</footer>	フッタであることを示す

コンテンツタグ一例

<div>∼</div>	ひとかたまりの範囲として定義する
<main>∼</main>	メインコンテンツであることを示す

サンプルページ（htmlの記述【body】）

参考サイト

テキストの意味を持つタグについて

<a>～</a>のタグのようにテキストに意味を持たせることが出来るタグがいくつか用意されています。必要に応じて使用してみましょう。

テキストの意味

<em>∼</em>	強勢する（アクセントを付ける）箇所を表す
<strong>∼</strong>	強い重要性を表す
<small>∼</small>	免責・警告・著作権などの注釈や細目を表す
<i>∼</i>	声や心の中で思ったことなど、他と区別したいテキストを表す
<b>∼</b>	文書内のキーワードや製品名など、他と区別したいテキストを表す
<span>∼</span>	ひとつの範囲として定義する

参考サイト

ワンポイントアドバイス

「div」「span」とタグは「意味を持たない」という意味を持っています。CSSで文法の意味を持たないレイアウトが必要な時に使いましょう。

ブロックレベル要素とインライン要素について

要素の多くは、ブロックレベル要素とインライン要素に分類されます。
■ブロックレベル要素
文書の骨組みとなる要素です（例えば見出しや段落など）。このタイプの要素は、body要素の直接の子要素として配置することができます。
■インライン要素
文章中の一部として扱われる要素です（例えばリンクや文字の強調など）。このタイプの要素は、通常はブロックレベル要素内で使用します。
※ただし、HTML5ではブロックレベル要素とインライン要素という考え方はなくなっていますので、あくまでも性質を持っていると考えておきましょう。

参考サイト

本日の課題①

本日の課題②

研修メモ

覚書

日別計画表の訂正
クリエーター向けセミナーの案内
FTPサーバーのパスワード確認（英字で始まる英数字８文字以上）

2021年7月7日（水）

学科 HTML基礎⑥

2021年7月7日By admin 学科 HTML基礎 “学科 HTML基礎⑥”の編集

-本日のアジェンダ-

1限目
学科 HTML基礎⑥
マークアップについて

2限目
学科 HTML基礎⑥
タグチェッカーについて

3限目
学科 HTML基礎⑥
SEOについて

4限目
学科 HTML基礎⑥
HTMLのまとめ

5限目
学科 HTML基礎⑥
グラフィックツールの復習

本日のテーマ

タグチェッカーを活用しましょう。

マークアップについて

マークアップとは、文書構造（テキスト）や視覚表現（装飾）などの情報を、コンピューターが正しく認識できるように、タイトルや見出しなどの各構成要素に「タグ」と呼ばれる識別のための目印を使い、意味付けを行っていくことを意味します。

ワンポイントアドバイス

Web関連の求人情報で、マークアップエンジニアという職種があります。マークアップエンジニアというのは、専門知識を必要とする仕事ではあります。Webサイト制作で、フロント寄りの領域を扱うことから、エンジニアやプログラミングとは大きく業務内容が異なります。
マークアップエンジニアは、制作現場で数多く求められている職種です。未経験者であってもある程度の勉強や実践経験を積めば、募集企業によって十分チャレンジが可能な職種と言われています。

参考サイト

タグチェッカーについて

正確なHTMLが書けているか、自分の目ですべてをチェックするのはとても大変作業です。とはいえ、適切なHTMLが書けていないとレイアウト崩れの素となったり、修正に大幅に時間がかかったりなど決していいことはありません。そんな時に活用したいのがHTMLのエラーチェックツールです。

ワンポイントアドバイス

マークアップエンジニアやコーダーの求人応募をして、見られるのはソースコードです。最低限のやっておくべき事として文法エラーは減らしておきましょう。

参考サイト

SEOについて

検索エンジン最適化とは、検索エンジンのオーガニックな検索結果において、特定のウェブサイトが上位に表示されるよう、ウェブサイトの構成などを調整すること。また、その手法の総称。サーチエンジン最適化ないし検索エンジン対策とも呼ばれ、ウェブポジショニングと同義である。

ワンポイントアドバイス

まずは正しい文法理解と記述を理解していきましょう。その次に目的であるSEO（検索エンジン最適化）を考えてより良いサイト構築・設計を考えていきましょう。

参考サイト

本日の課題①

本日の課題②

研修メモ

覚書

2021年7月8日（木）

学科 HTML基礎⑦

2021年7月8日By admin 学科 HTML基礎 “学科 HTML基礎⑦”の編集

-本日のアジェンダ-

1限目
学科 HTML基礎⑦
CSSの読み込み方について

2限目
学科 HTML基礎⑦
FTPサーバーについて

3限目
学科 HTML基礎⑦
FTPサーバーの取り扱いについて

4限目
学科 HTML基礎⑦
HTMLのまとめ

5限目
学科 HTML基礎⑦
グラフィックツールの復習

本日のテーマ

タグチェッカーを活用しましょう。

CSSの読み込み方について

CSSを書く方法（場所）は3パターンあります。それぞれメリット・デメリットがあるため、この3パターンを組み合わせてCSSを書いていくのが良いでしょう。

パターン①「外部ファイル」

1つめの方法は、外部ファイルのCSSから読み込む方法です。つまり、CSSファイルを別に作り、HTMLファイルから読み込むということです。この作成したCSSファイルは外部スタイルシート（外部CSS）と呼ばれます。ウェブサイトを作る時にはこれが最も一般的な方法です。

パターン②「 styleタグ」

2つめの方法はHTMLファイルのheadタグ内に<style>〜</style>を書き、その中にCSSを書く方法です。

パターン③「 style属性を使う」

3つめは、HTMLのタグにstyle属性を書く方法です。文字にサクッと色をつけたり、線を引いたりするときには便利ですが、タグにいちいち書き込む必要がありやや手間がかかります。また、後からまとめてデザインを変更することもできません。

ワンポイントアドバイス

基本的には外部ファイルで作成しましょう。また外部ファイルは1ファイルにまとめるのがベストですが、管理や運営方法を考えて使い分けましょう。

参考サイト

FTPサーバーについて

FTPサーバとは、FTPを使用してファイルの送受信を行うサーバのことである。ファイルのアップロード・ダウンロードにはFTPクライアントソフトウェアが必要だが、最近のウェブブラウザにはこれが組み込まれている場合が多い。

ワンポイントアドバイス

サーバーについては、案件ごとにどのサーバーを利用しているかしっかりと確認を取ってから制作依頼を受けましょう。サーバーによって基本的な設定が異なったり細かい違いがありますので、確認作業をしっかりと行いましょう。

参考サイト

本日の課題①

本日の課題②

本日の課題③

サンプルファイルをFTPでサーバーにUPして、Wordpressの記事に投稿してください。

研修メモ

覚書

2021年7月9日（金）

学科 CSS基礎①

2021年7月9日By admin 学科 CSS基礎

-本日のアジェンダ-

1限目
学科 CSS基礎①
CSSの記述【文字】

2限目
学科 CSS基礎①
セレクタの得点について

3限目
学科 CSS基礎①
コメントアウトについて

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

5限目
学科 CSS基礎①
グラフィックツールの復習

本日のテーマ

「セレクタ」「プロパティ」「値」の基本構造を理解しましょう。

CSSとは？

Cascading Style Sheetsは、HTMLやXMLの要素をどのように修飾するかを指示する仕様の一つで、World Wide Web Consortium がとりまとめ勧告する。文書の構造と体裁を分離させるという理念を実現するために提唱されたスタイルシートの具体的な仕様の一つ。ウィキペディア

ワンポイントアドバイス

CSSとHTMLの両方を駆使してWebサイトを構築していきますが、HTMLとCSSは開発元が異なります。単純に密接な関係なのに記述ルールと役割が異なります。
まずはしっかりとルールの違いに気を付けて学んでいきましょう。

CSSの記述ルールの基本として

プロパティ｛
セレクター:値;
｝

※この「プロパティ」「セレクター」「値」の構成をしっかり意識して使い方を学んでいきましょう。

CSSのブラウザ対応について

HTMLやCSSを学ぶ際に最も気を付けなければならない事は、ブラウザに対応しているかどうかです。ここまでご紹介したHTMLのタグはほぼどのブラウザにも対応したタグです。逆に考えてもらうと、HTMLのタグもCSSのタグもここで学ぶ以上のタグが存在します。

ワンポイントアドバイス

検索などで独自に調べたタグは要注意です！非推奨やブラウザでは非対応ブラウザが存在したり、PCでは使えるがスマートフォンではNGのタグがあります。
特にCSSは、使えないタグは見た目の実装を不可能にします。
まずは、広く使われている、どのブラウザでも対応している基本のタグをしっかりと把握していきましょう。

参考サイト

CSSの記述【文字】

まずは文字の装飾や大きさ位置などを指定するCSSから覚えていきましょう。
文字に関するCSSの特徴は、正しく記述したら必ず見た目が変わります。
もし、変わらない時はHTMLの記述が誤っているなど他に原因があるかもしれません。注意して記述の練習をしていきましょう。

ワンポイントアドバイス

デザインしたサイトの文字情報はSEO対策として出来る限り画像文字にはぜずテキスト文字にするイメージをしっかり持って「どんな事ができるのか？」を確認しておきましょう。

サンプルページ（CSSの記述【文字】）

参考サイト

ショートハンドについて

CSSのプロパティにはまとめて記述するための「ショートハンド」という書き方が用意されています。

ワンポイントアドバイス

CSSの記述はショートハンドという短縮して記述できる書き方があります。お仕事で誰かが作成したサイトを編集する時に、両方を理解しておく必要がありますので、しっかりと覚えておきましょう。

参考サイト

本日の課題①

本日の課題②

研修メモ

覚書

2021年7月12日（月）

学科 CSS基礎②

2021年7月12日By admin 学科 CSS基礎

-本日のアジェンダ-

1限目
学科 CSS基礎②
CSSの記述【背景】

2限目
学科 CSS基礎②
「body」とそれ以外の画像の適用について

3限目
学科 CSS基礎②
「img」と「background」の違いについて

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

5限目
学科 CSS基礎②
グラフィックツールの復習

本日のテーマ

画像利用の仕組みを確認しましょう。

セレクタの得点について

はじめに. セレクタには優先順位があり、点数計算して高得点のものが適用されるます。
同点の場合は後にあるもの、更にStyle属性、Style要素、外部ファイルなど、CSSで特につまづく優先順位のルールを正しく理解していきましょう。

サンプルページ（セレクタの得点）

ワンポイントアドバイス

セレクタは計算ルールも考えて管理しやすいようにセレクタだけを見て何処をCSSでどの要素をコントロールしているかが解りやすくなるように意識して書くと良いでしょう。

参考サイト

「id」と「class」について

HTMLにスタイルシート(CSS)を適用する方法には、class属性を使う方法と、id属性を使う方法があります。
idはそのページ内で1回のみ、classは複数回使用しても大丈夫です。
また、idとclassの値は自由につけることが出来ますが、命名規則をよく考えて指定しましょう。

ID、Class名の付け方には法則があり、半角英数、-（ハイフン）、_（アンダースコア）の組み合わせで名前をつけます。どんな名称でも使用できますが、どのような設定なのか、内容が判別しやすい名前にするのがよいでしょう。大文字と小文字どちらでも利用できますが、基本は小文字で統一します。

ワンポイントアドバイス

企業に提出するポートフォリオサイトなどにWebサイトを提出した場合、特に見られているのが、「id」と「class」です。命名規則とセレクタの管理方法が雑であったり計画性が無かったりするのはマイナス要因しかありませんので注意しましょう。

参考サイト

コメントアウトについて

コメントアウトとは … プログラミングにおける「コメント」とは、プログラムのソースコード上で「実行させない部分」のことです。

ワンポイントアドバイス

HTMLのコメントアウトは、表示させない
CSSのコメントアウトは、プログラムを実行させない
言語の特徴で意味が異なるので注意しましょう。

参考サイト

CSSの記述【背景】

backgroundプロパティは、背景に関する指定をまとめて行う際に使用します。指定の順序は問われません。また、必要のない指定は省略可能です。

サンプルページ（画像）

参考サイト

「img」と「background」の違いについて

コーディングをする時「img」と「background」で画像をどちらとして使用するのかがとても重要になります。「img」はHTMLなので文法の意味を持ち、「 background 」はCSSなので、見た目の話しだけになります。
サイトデザインの重要ポイントになりますので注意しておきましょう。

本日の課題①

本日の課題②

研修メモ

覚書

2021年7月13日（火）

学科 CSS基礎③

2021年7月13日By admin 学科 CSS基礎

-本日のアジェンダ-

1限目
学科 CSS基礎③
width と height について

2限目
学科 CSS基礎③
border と padding と margin について

3限目
学科 CSS基礎③
ボックスモデルについて

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

5限目
学科 CSS基礎③
グラフィックツールの復習

本日のテーマ

ボックスモデルについて

width と height について

単純にボックスに幅と高さを持たせるタグになります。ただし、幅と高さが持てるのは、ブロックレベル要素になります。
また、Webサイトの性質上細かなルールがいくつも存在します。
まずはしっかりとボックスモデルの基礎となるという事を意識しておきましょう。

サンプルページ（CSSの記述【配置】）

ワンポイントアドバイス

幅（width）については、ある程度指定した数値が反映されますが、高さ（height）の指定については、複雑なルールがあります。
高さ（height）は、基本ニュートラルに設定し、やむを得ない場合のみ絶対値を指定すると覚えておくと、よいかもしれません。

参考サイト

border と padding と margin について

要素の中身（内容）があり、そのまわりの余白がpaddingです。そのまわりにはborder（線）があり、それより外側の余白がmarginです。 … この図のようなCSSの余白の考え方はボックスモデルと呼ばれます。なお、要素に対してwidthとheightの値を指定した場合には、要素の中身の部分の大きさが変わります。

サンプルページ（CSSの記述【ボックス】）

ワンポイントアドバイス

CSSで最も理解度が求められるタグが「border」「padding」「margin」です。CSSの理解の最重要ポイントになりますので、しっかりと理解と確認をしておきましょう。また、役割を分けるのも制作のコツです。
borderは、罫線の装飾
paddingは、内側の余白
marginは、ボックスとボックスとの距離
というように、役割を明確にしておきましょう。

参考サイト

ボックスモデルについて

英語から翻訳-Web 開発では、CSS ボックスモデルは、HTML 要素がブラウザーエンジンでどのようにモデル化され、それらの HTML 要素のサイズが CSS プロパティからどのように導出されるかを指します。これは、HTML Web ページを構成するための基本的な概念です。ウィキペディア（英語)

ボックスモデルとは HTMLのすべての要素は高さ、幅を持った四角形の中心にコンテンツ（文章、画像等）が入っています。 … ボックスモデルは、コンテンツを中心に4つの要素（コンテンツ, border, magrin, padding)で構成されています。

参考サイト

本日の課題①

本日の課題②

研修メモ

覚書

2021年7月14日（水）

学科 CSS基礎④

2021年7月14日By admin 学科 CSS基礎

-本日のアジェンダ-

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

2限目
学科 CSS基礎④
clear について

3限目
学科 CSS基礎④
横並びについて

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

5限目
学科 CSS基礎④
グラフィックツールの復習

本日のテーマ

回り込みについて

float について

floatプロパティは、指定された要素を左または右に寄せて配置する際に使用します。後に続く内容は、その反対側に回り込みます。

clear について

clearプロパティは、floatの回り込みを解除するプロパティです。 clearプロパティは、float指定した要素の次の要素に指定します。 float要素が連続している場合、一番最後のfloat要素の次の要素に指定します。

ワンポイントアドバイス

floatは約十数年ぐらいの間、CSSのレイアウトで横並びをさせる手法として多くのサイトで利用されていました。現在ではそれに代わる手法がいくつか用意されていますが、長い間多くのデザイナーさん達が使ってきているので、現サイトの更新業務としては、まだまだ遭遇する可能性が高いので、しっかりとその仕組みを理解しておきましょう。

参考サイト

float を clear する方法について

floatを解除する方法はいくつかありますが、抑えておきたい方法として３つはしっかり覚えておきましょう。

① float を clear する方法について「 clear 」を使う

floatを指定した要素の後に来る要素にclearを指定する
関係性は必ず同階層である事（親子関係では適用されない）

② float を clear する方法について「 clearfix 」を使う

float している要素の親要素に、疑似要素の:afterを利用し下記のように記述します。
※①のようにclear出来ない場合にこちらを使うと良いでしょう。

セレクタ:after {
display: block;
clear: both;
content: “”;
}

③ float を clear する方法について「 overflow: hidden; 」を使う

float している要素の親要素に、overflow: hidden;を使うと適用できます。
※ただし厳密には文法として変であるという説もありますので、仕様変更やバグに気を付けて利用しましょう。

参考サイト

サンプルページ（レイアウト見本）

本日の課題①

本日の課題②

研修メモ

覚書

2021年7月15日（木）

学科 CSS基礎⑤

2021年7月15日By admin 学科 CSS基礎

-本日のアジェンダ-

1限目
学科 CSS基礎⑤
positionについて

2限目
学科 CSS基礎⑤
displayの種類について

3限目
学科 CSS基礎⑤
overflow について

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

5限目
学科 CSS基礎⑤
グラフィックツールの復習

本日のテーマ

配置について

positionについて

positionについては、使い方を誤るとややこしくなりますので、基本的な3つの使い方と使い分けをしっかりと覚えておきましょう。

position:relative; （相対位置）
position:absolute; （絶対位置）
position:fixed; （固定位置）

サンプルページ（CSSの記述【配置】）

サンプルファイル（positionの基本の使い方）

サンプルファイル（positionの使い方）

ワンポイントアドバイス

position タグは、コーディングをする時に設計を複雑にしてしまいます。計画的に行うか、最後に行うなどして工夫すると良いでしょう。

参考サイト

displayについて

displayタグを使う事で、様々なレイアウトを可能にします。まずはブロックレベル要素とインライン要素の違いと特徴をしっかりと確認しておきましょう。

サンプルファイル（ displayの種類について）

参考サイト

overflow について

overflowは、これまでのタグでも注意は必要でしたが、特に気を付ける事としてブラウザ依存する（ブラウザ毎にデザインが異なる）という点に注意しましょう。

サンプルファイル（ overflow見本）

参考サイト

本日の課題①

本日の課題②

研修メモ

覚書

2021年7月16日（金）

学科 CSS基礎⑥

2021年7月16日By admin 学科 CSS基礎

-本日のアジェンダ-

1限目
学科 CSS基礎⑥
CSSの記述【疑似クラス・疑似要素】

2限目
学科 CSS基礎⑥
CSSの記述【リスト】CSSの記述【表】

3限目
学科 CSS基礎⑥
その他のCSSについて

4限目
学科 CSS基礎⑥
CSSのまとめ

5限目
学科 CSS基礎⑥
グラフィックツールの復習

本日のテーマ

CSSはその他にもいろいろあります。

疑似クラス・疑似要素について

擬似クラスとは … 擬似クラスとは指定の要素が特定の状態である場合にスタイルを適用させるセレクタです。文章構造の範囲外にある情報によってスタイルを変化させることができます。
擬似要素とは、要素の一部に対してスタイルを適用できる指定方法です。 HTMLの要素を擬似的にCSSで設定するので、コーディングに手を加えることなく装飾を適用することができます。

ワンポイントアドバイス

疑似クラス・疑似要素はここまで学んだ基本的なCSSを更に効果的に使う為の技術です。ここまで学んだ内容を復習しながら使うと良いでしょう。

サンプルファイル（ CSSの記述【疑似クラス・疑似要素】）

参考サイト

リストや表について

リスト項目やテーブル（表）のHTMLのタグに対して、それぞれのCSSがあります。文法と見た目の特徴に合わせて上手に使っていきましょう。

サンプルファイル（ CSSの記述【リスト】）

サンプルファイル（ CSSの記述【表】）

参考サイト

様々なCSSについて

ここまで学んだCSS以外にも様々なCSSがあります。また新しいものも出てきます。ただしブラウザによって使えるタグが異なったり、デバイス依存もあります。OSにも影響もあります。日々変わる業界の動向にアンテナを張っていきましょう。

ワンポイントアドバイス

まずはこれまで学んだCSSをしっかりと覚えてまずは、「知る」次に「使う」そしてお仕事で「使いこなす」を目指しましょう。
コツとしては、「自分なりにまとめる」をしっかりと定期的に行うと良いでしょう。

参考サイト

本日の課題①

本日の課題②

研修メモ

覚書

2021年7月17日（土）

学科 CSS基礎⑦

2021年7月17日By admin 学科 CSS基礎 “学科 CSS基礎⑦”の編集

-本日のアジェンダ-

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

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

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

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

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

本日のテーマ

成績考査です。

第3回成績考査

本日まで作成したwordpressのサイトを4限目までに提出してください。
5限目に、講評を行います。
※個人情報等のページはパスワードをかけてください。

研修メモ

覚書

成績考査対象範囲（WordPressサイトの作成）

ポートフォリオサイトとしてのプロフィール（自己紹介、経歴、スキル、自己PRなど）
ポートフォリオサイトとしての作品集
訓練記録：グラフィックデザイン講義のまとめ
訓練記録：HTML/CSS講義のまとめ

2021年7月19日（月）

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

2021年7月19日By admin 学科レイアウトデザイン基礎

-本日のアジェンダ-

1限目
学科レイアウトデザイン基礎①
Webサイトについて

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

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

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

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

本日のテーマ

Webサイトを作ってみましょう。

Webサイトとは？

ウェブサイトは、World Wide Web 上にあり、一般に特定のドメイン名の下にある複数のウェブページの集まりのこと。サイトと呼ばれることもある。企業などの団体が自身を紹介するため自ら構築したサイトを、その団体の公式サイトなどと呼ぶ。ホームページと呼ばれることもあるが、この用法は誤用とされる場合もある。ウィキペディア

参考サイト

LP（ランディングページ）とは？

ランディングページ最適化はコンバージョン最適化、もしくはコンバージョン率最適化と呼ばれるより広範なインターネットマーケティング手法の一つであり、セールスリードや顧客となりうるウェブサイト訪問者の比率を向上させることを目的としている。ウィキペディア

ワンポイントアドバイス

未経験でいきなりWebサイトを作るよう業務を指示する制作会社はありません。もし言って来たら疑ってください。個人レベルや担当者がWebサイト制作の知識理解が足りない等で、依頼されるなどの事は逆によくあるかもしれませんのでお気を付けください。
そこで、まずは最初の一歩としてチャレンジするのであればLP（ランディングページ）のような、1ページのページ制作をしっかりと行ってみると良いでしょう。

参考サイト

ワイヤーフレームとは？

ワイヤーフレームとは、webページのレイアウトを定める設計図のことです。
webサイトの制作現場で聞かないことがない、といえる単語であり、サイト制作において決して欠かせない要素です。
単に「ワイヤー」と呼ぶことも多いです。

制作のポイント

チラシを作る時と同じで掲載が必要な内容を先に、しっかりまとめてからレイアウトを考えると良いでしょう。そのレイアウトが、HTMLとCSSというルールに変わっただけです。
まずは、PCサイズとして上記の例のような、コンテンツ部分が960pxでその外側部分を入れて、1280pxでワイヤーフレームを作成してみましょう。

ワンポイントアドバイス

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

参考サイト

第4回成績考査

8月13日の5限目までに、Webページを提出してください。
サイト内容は、自由です。
※是非、就職活動に活かせる作品を作成してみてください。

次回の成績考査に向けて

近年、Webサイトの重要性と必要性は年々増えています。またそのWebサイトを制作する技術者も増えていますが、技術は多様化して情報は様々な内容が飛び交っています。HTMLの基本文法とCSSの基本文法を理解したら、後は使い方です。当然、この使い方が人によって異なります。
デザインをやるのかコードを書くのか、前職などのキャリアをどう活用するのか？働き始めても常に学ぶことが必要とされる為、自己学習能力や自己解決能力、自己の管理責任能力などを求められます。
ここから約1月の訓練はWEBサイト制作をするのみです。
それによって、当然皆さまそれぞれ必要となる技術と活動が異なるでしょう。まずは就職に向けての行動して、ご自身の宿題を見つけていきましょう。

研修メモ

覚書

2021年7月20日（火）

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

2021年7月20日By admin 学科レイアウトデザイン基礎

-本日のアジェンダ-

1限目
学科レイアウトデザイン基礎②
Web用画像について

2限目
学科レイアウトデザイン基礎②
Web画像の解像度について

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

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

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

本日のテーマ

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

デザインラフとは？

ラフは、WEBサイトを作る上で、レイアウトなどのイメージを作り、チーム内やクライアントと共有するためのものです。割と重要なものになります。いきなりワイヤーフレームを作ったり、デザイン案を作ったりというケースもありますが事前にラフを作っておくことにより、より一層スムーズに制作が進められるようになります。

ワンポイントアドバイス

ワイヤーフレームの次はデザインラフを提出する事がよくある制作の流れです。デザインラフは画像でサイトの仕上がりをお客様に見せる為です。逆を言えば、デザインラフはしっかりと完成形をイメージして制作する必要があります。コーディングというお仕事は、デザインラフ通りに再現する事が求められます。HTML/CSSをしっかりと意識して作成をしましょう。

制作のポイント

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

参考サイト

Web用画像とは？

Web用画像には、主に「jpg」「gif」「png」「svg」が昨今のWebサイトで使われます。その特徴と違いを確認しておきましょう。

制作のポイント

ファイル名の命名規則は管理しやすいようにしっかりと考えて付けましょう。

ワンポイントアドバイス

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

参考サイト

第4回成績考査

8月13日の5限目までに、Webページを提出してください。
サイト内容は、自由です。
※是非、就職活動に活かせる作品を作成してみてください。

次回の成績考査に向けて

研修メモ

覚書

2021年7月21日（水）

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

2021年7月21日By admin 学科レイアウトデザイン基礎

-本日のアジェンダ-

1限目
学科レイアウトデザイン基礎③
マークアップについて

2限目
学科レイアウトデザイン基礎③
マークアップについて

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

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

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

本日のテーマ

マークアップです。

マークアップとは？

マークアップとは、webサイトを作成する時に使用するhtmlという言語でサイト内の文書に意味づけをしていく作業のことを指します。 … そこでロボットに適切にwebページの内容を伝えるためにhtmlというマークアップ言語を使用しタグをつけます。

ワンポイントアドバイス

正しくマークアップ出来ているかの判定は、人の目では解り難いです。そんな時は、機械に頼りましょう。
検証サイトなどを使って正しくマークアップされているかを確認してみましょう。

参考サイト

第4回成績考査

8月13日の5限目までに、Webページを提出してください。
サイト内容は、自由です。
※是非、就職活動に活かせる作品を作成してみてください。

次回の成績考査に向けて

研修メモ

覚書

2021年7月26日（月）

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

2021年7月26日By admin 学科レイアウトデザイン基礎

-本日のアジェンダ-

1限目
学科レイアウトデザイン基礎④
セレクタについて

2限目
学科レイアウトデザイン基礎④
リセットCSSについて

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

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

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

本日のテーマ

セレクタをしっかり制御しましょう。

セレクタとは？

セレクタ（CSSセレクタ）は、CSSにおいてスタイルを適用する要素を選択するための条件式です。
セレクタ｛ プロパティ :値;｝
このセレクタをコントロールする事を意識しましょう。

サンプルページ（セレクタの得点）

ワンポイントアドバイス

CSSを思い通りにコントロールするには、セレクタの管理・理解をしっかりと行う事がコツです。
プロパティと値は後回しにして、セレクタの得点計算をしっかりと行ってみましょう。また、間違い探しのコツとして、HTMLに合わせて、コードの上から書くのも管理しやすくするコツです。

参考サイト

リセットCSSとは？

リセットCSSとは、ブラウザがデフォルトで持っているCSSを打ち消すCSSです。
各ブラウザは固有のCSSを持っています。（デフォルトのCSSと呼びます。）
このデフォルトのCSSの影響で、Webページをデザインするために自分で書いたCSSが意図しない表示になることがありますので、上手にリセットCSSを活用すると良いでしょう。

ワンポイントアドバイス

リセットCSSは育てていきましょう。サイト制作毎に、また更新やリニューアル毎に案件の運用方針や世の中のトレンドなどに合わせて育てていくと良いでしょう。また、リセットCSSにも流行りがあります。扱う記述は良く調べてから使ってみましょう。

参考サイト

第4回成績考査

8月13日の5限目までに、Webページを提出してください。
サイト内容は、自由です。
※是非、就職活動に活かせる作品を作成してみてください。

次回の成績考査に向けて

研修メモ

覚書

2021年7月28日（水）

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

2021年7月28日By admin 学科レイアウトデザイン基礎

-本日のアジェンダ-

1限目
学科レイアウトデザイン基礎⑤
デベロッパーツールについて

2限目
学科レイアウトデザイン基礎⑤
プロパティと値について

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

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

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

本日のテーマ

後はプロパティと値をひたすら書く

プロパティと値について

プロパティ（property）とは適用するスタイルの種類のことです。上記の例では色を指定するcolorプロパティの値（value）にblueを指定しています。 CSSでは他にも様々なプロパティが用意されているので、適用するスタイルに応じて使い分けます。
ひとつのセレクタに対して複数のスタイル指定する場合には、スタイル宣言をセミコロン（ ; ）で区切って記述します。セミコロン（ ; ）は宣言同士の区切り記号なので最後は必要ありませんが、付けても誤りではありません。後からスタイル宣言を追加したり、スタイル宣言の順序を入れ替える可能性などを考慮して付けておくのが一般的です。

ワンポイントアドバイス

後は、デベロッパーツールでプロパティと値をひたすら書くです。
レイアウトに関するCSSは、HTMLの上から下に対して、影響をもたらす場合があります。（marginとか）デザイン（デザインラフ）の上から作っていくと、変な間違い等の見落としを回避し易いです。

参考サイト

第4回成績考査

8月13日の5限目までに、Webページを提出してください。
サイト内容は、自由です。
※是非、就職活動に活かせる作品を作成してみてください。

次回の成績考査に向けて

研修メモ

覚書

2021年7月29日（木）

学科 XD基礎①

2021年7月29日By admin 学科 XD基礎

-本日のアジェンダ-

1限目
学科 XD基礎①
XDについて

2限目
学科 XD基礎①
XDの使い方について

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

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

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

本日のテーマ

adobe XD です。

adobe XD とは？

Adobe XDは、アドビが販売しているベクターベースのプロトタイピング作成ツールである。ウィキペディア

ワンポイントアドバイス

XDはまだ求人票で必要なスキルと掲載は少ないですが、取り入れている企業と、取り入れているデザイナーさんは増えています。
まずは、基本操作と利点などをしっかりと確認しておきましょう。

参考サイト

第4回成績考査

8月13日の5限目までに、Webページを提出してください。
サイト内容は、自由です。
※是非、就職活動に活かせる作品を作成してみてください。

次回の成績考査に向けて

研修メモ

覚書

2021年7月30日（金）

学科 XD基礎②

2021年7月30日By admin 学科 XD基礎

-本日のアジェンダ-

1限目
学科 XD基礎②
データ連携について

2限目
学科 XD基礎②
XDの使い方について

3限目
学科 XD基礎②
課題制作

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

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

本日のテーマ

aiやpsdデータの取り入れ方

XD データ連携について

Adobe XD では、Photoshop や Illustrator などの他のアドビアプリケーションからデザイン素材を読み込むことができます。XD では、これらのデザイン素材をさらに拡張することも、これらのデザイン素材を使用してインタラクティブプロトタイプを作成することもできます。

ワンポイントアドバイス

実際のお仕事では、お客様とのやり取りに合わせて連携方法が変わるでしょう。必要に応じて、ai（Illustrator）なのかpsd（Photoshop）がいいのか、XDがいいのか、お客様に合わせて判断していきましょう。

参考サイト

就職活動に向けて

情報収集に役立つ参考サイト

第4回成績考査

8月13日の5限目までに、Webページを提出してください。
サイト内容は、自由です。
※是非、就職活動に活かせる作品を作成してみてください。

次回の成績考査に向けて

研修メモ

覚書

2021年8月2日（月）

実技 XD実習①

2021年8月2日By admin 実技 XD実習

-本日のアジェンダ-

1限目
実技 XD実習①
スマホサイトの制作について

2限目
実技 XD実習①
スマホサイトの制作について

3限目
実技 XD実習①
課題制作

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

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

本日のテーマ

スマホサイトの制作について

Adobe XDでは、webサイトや、モバイルアプリなどのデザインに適した、オールインワンのUX/UIソリューションと言われています。デザイン、プロトタイプ、共有、すべてをXDでおこない活用することで、デザイナーはより早く、正確に、高い品質で作業できます。

ワンポイントアドバイス

XDを使ってスマホサイトのデザインを構築するのが、昨今のXD利用の最も実践的な利用方法でしょう。aiやpsdでも作れてXDでもワイヤーフレームやデザインラフを制作で来ていると理想的でしょう。

参考サイト

第4回成績考査

8月13日の5限目までに、Webページを提出してください。
サイト内容は、自由です。
※是非、就職活動に活かせる作品を作成してみてください。

次回の成績考査に向けて

研修メモ

覚書

2021年8月3日（火）

実技 XD実習②

2021年8月3日By admin 実技 XD実習

-本日のアジェンダ-

1限目
実技 XD実習②
共有機能について

2限目
実技 XD実習②
XDの機能について

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

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

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

本日のテーマ

XDの共有機能について

「共有」は、作業チームのコミュニケーションをスムーズにしたり、情報伝達を容易にしたりする機能です。1つのWebサイトやアプリを作る際には、多くの人の意見をとりまとめたり、必要に応じて修正を加えたりする必要があります。Adobe XDにはそんなチームの共同作業をスムーズに進めるための各種機能が含まれています。

ワンポイントアドバイス

XDの共有機能は、会社お勤めになってから利用すると良いですが、出来る事と出来ない事、注意点を確認しておきましょう。

※訓練施設のアカウントは施設アカウントなのでこのPCではやらないでください。お仕事の時やご自身のアカウントで行いましょう。

参考サイト

その他参考サイト

第4回成績考査

8月13日の5限目までに、Webページを提出してください。
サイト内容は、自由です。
※是非、就職活動に活かせる作品を作成してみてください。

次回の成績考査に向けて

研修メモ

覚書

2021年8月4日（水）

実技 WEBデザイン実習①

2021年8月4日By admin 実技 WEBデザイン実習

-本日のアジェンダ-

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

2限目
実技 WEBデザイン実習①
Dreamweaver の使い方について

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

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

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

本日のテーマ

Dreamweaverです。

Dreamweaverについて

Adobe Dreamweaver（アドビドリームウィーバー）は、ひとことで言うとホームページ制作ソフトです。
編集機能やレイアウトの表示機能、ファイル管理機能など、制作や更新作業に必要な機能がひとまとめになっている、統合ソフトウェアとなります。
アドビシステムズのホームページでは、“Webデザインソフトウェア、HTMLエディター”となっています。“Webオーサリングツール”や“Webサイト作成ソフト”などとも呼ばれます。ホームページは基本的に「HTML＋画像」なので、頑張れば「メモ帳＋ペイント」でもなんとか作れます。しかし、作業効率などやミスの防止などを考えると、専用ソフトを利用した方が効果的です。

ワンポイントアドバイス

Dreamweaverの歴史は長いです。いま世にいるデザイナーのほとんどの方がDreamweaverを過去に使った又は習った事のあるケースが多いです。ただし、昨今ではDreamweaverの需要は落ちています。
その理由は、様々ですがこれからの希望職に合わせて、習得してみてください。

参考サイト

第4回成績考査

8月13日の5限目までに、Webページを提出してください。
サイト内容は、自由です。
※是非、就職活動に活かせる作品を作成してみてください。

次回の成績考査に向けて

研修メモ

覚書

2021年8月5日（木）

実技 WEBデザイン実習②

2021年8月5日By admin 実技 WEBデザイン実習

-本日のアジェンダ-

1限目
実技 WEBデザイン実習②
Dreamweaverでコーディングについて

2限目
実技 WEBデザイン実習②
Dreamweaver の使い方について

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

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

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

本日のテーマ

Dreamweaverでコーディングです。

Dreamweaverについて

ワンポイントアドバイス

Dreamweaverは機能が多すぎるのが難点です。Webサイト制作で必要な個所、又は一長一短の箇所をしっかりと把握しておきましょう。

参考サイト

第4回成績考査

8月13日の5限目までに、Webページを提出してください。
サイト内容は、自由です。
※是非、就職活動に活かせる作品を作成してみてください。

次回の成績考査に向けて

研修メモ

覚書

2021年8月6日（金）

実技 WEBデザイン実習③

2021年8月6日By admin 実技 WEBデザイン実習

-本日のアジェンダ-

1限目
実技 WEBデザイン実習③
便利機能について

2限目
実技 WEBデザイン実習③
Dreamweaver の使い方について

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

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

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

本日のテーマ

Dreamweaverの便利な機能の確認

Dreamweaverについて

ワンポイントアドバイス

置換機能やコードヒントなど便利な機能もありますのでしっかりポイントを押さえておきましょう。

参考サイト

第4回成績考査

8月13日の5限目までに、Webページを提出してください。
サイト内容は、自由です。
※是非、就職活動に活かせる作品を作成してみてください。

次回の成績考査に向けて

研修メモ

覚書

2021年8月7日（土）

実技 WEBデザイン実習④

2021年8月7日By admin 実技 WEBデザイン実習

-本日のアジェンダ-

1限目
実技 WEBデザイン実習④
DreamweaverのFTP機能について

2限目
実技 WEBデザイン実習④
Dreamweaver の使い方について

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

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

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

本日のテーマ

FTP機能について

Dreamweaverについて

ワンポイントアドバイス

DWでもサーバにUPする機能が付いています。使いどころと注意点をしっかり理解して必要に応じて使用しましょう。

参考サイト

第4回成績考査

8月13日の5限目までに、Webページを提出してください。
サイト内容は、自由です。
※是非、就職活動に活かせる作品を作成してみてください。

次回の成績考査に向けて

研修メモ

覚書

2021年8月10日（火）

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

2021年8月10日By admin 実技スマートフォンサイト作成実習 “実技スマートフォンサイト作成実習①”の編集

-本日のアジェンダ-

1限目
実技スマートフォンサイト作成実習①
Viewportついて

2限目
実技スマートフォンサイト作成実習①
Media Queriesについて

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

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

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

本日のテーマ

スマホ対応はCSSの延長戦です。

レスポンシブWEBデザイン（RWD）とは？

「レスポンシブWEBデザイン（Responsive WEB Design）」は、PC、タブレット、スマートフォンなど、デバイスの画面サイズよってResponsive=反応するWEBデザインという意味で、WEBサイトを単一のHTML（ワンソース）で実現する制作手法です。ブラウザのスクリーンサイズを基準にCSSでレイアウトすることで、デバイスごとに専用サイトを用意することなく、マルチスクリーンに対応したWEBサイトを制作できます。

サンプルページ（レスポンシブWebデザイン基礎）

ワンポイントアドバイス

昨今のWebサイトでレスポンシブWebデザインは必須とも言える技術になります。使い方が様々ですが、特にメディアクエリはCSSの基礎理解がとても重要になります。シンプルに整理して覚えていきましょう。

参考サイト

Viewport とは？

viewport（ビューポート）とは、日本語に訳すと「表示領域」という言葉がしっくりくると思います。例えば、デスクトップ環境（PCなど）のブラウザなどでは、ブラウザウインドウの表示領域がviewportになります。… 表示のされ方は、制作者がmeta要素のviewportで指定することができます。

ワンポイントアドバイス

viewport はサイト制作の時最初の1度しか書かないので、単純に入れ忘れに注意しましょう。

参考サイト

Media Queries とは？

メディアクエリは、CSS スタイルに適用できるシンプルなフィルタです。メディアクエリを使用すると、画面の種類、幅、高さ、向き、解像度など、コンテンツをレンダリングするデバイスの特性に基づいて、スタイルを容易に変更できます。

ワンポイントアドバイス

メディアクエリは様々な記述方法がありますが、まずは1つのルールで書いてみましょう。

参考サイト

第4回成績考査

8月13日の5限目までに、Webページを提出してください。
サイト内容は、自由です。
※是非、就職活動に活かせる作品を作成してみてください。

次回の成績考査に向けて

以下のアジェンダは未使用（講義内容は下記で実施）

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

-本日のアジェンダ-

1限目
実技スマートフォン作成実習①
Viewportについて

2限目
実技スマートフォン作成実習①
Media Queries

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

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

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

本日のテーマ

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

レスポンシブWebデザイン（RWD）

レスポンシブWebデザインは、Webデザインの手法のひとつでWebページを閲覧者の画面サイズまたはウェブブラウザに応じて表示表示内容を調整する手法です。

レスポンシブWebデザイン基礎

参考サイト

viewport

viewport（ビューポート）は、Webページの表示領域を示します。PC環境であればブラウザのウィンドウ領域が該当しスマホ環境の時はスマホ画面領域が該当します。但し、スマホの場合は物理的な画面領域（解像度）と論理的な画面領域（画像度）が異なることがあるので注意が必要です。

参考サイト

Media Queries

Media Queries （メディアクエリ）は、CSS スタイルに適用できるシンプルなフィルタです。メディアクエリを使用すると、画面の種類、幅、高さ、向き、解像度など、コンテンツをレンダリングするデバイスの特性に基づいて、スタイルを容易に変更できます。

参考サイト

成績考査に向けて

8月13日（金）の5時限目までに各自の企画サイトをレスポンシブWebデザイン対応させてHTMLサーバーのトップフォルダにアップロードしてください。

便利ツール（サイト制作用）

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

研修メモ

今後のスケジュール

8月13日：成績考査（5時限目終了までにスマホ対応済みのWebサイトをHTMLサーバーにアップロードを実施）

覚書

レスポンシブWebデザイン（「マルチデバイス対応について」で説明）
RWD対応を実例を使って説明
ブレイクポイント設定の考え方（スマホの画面サイズ一覧）
Retinaディスプレイ
- imgタグは2倍の大きさのイメージを用意して半分のwidthを指定
- Webページ読み込み負荷を縮小化させるためにimgタグのsrcset属性を使用すると良い
- Photoshopでの2倍、3倍の画像書き出し方法

2021年8月11日（水）

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

2021年8月11日By admin 実技スマートフォンサイト作成実習 “実技スマートフォンサイト作成実習②”の編集

-本日のアジェンダ-

1限目
実技スマートフォンサイト作成実習②
Box modelの確認

2限目
実技スマートフォンサイト作成実習②
UI/UXについて

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

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

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

本日のテーマ

Box model のおさらいが大事です！

レスポンシブWEBデザイン（RWD）とは？

サンプルページ（レスポンシブWebデザイン基礎）

ワンポイントアドバイス

Box model のおさらい

Web 開発では、CSS ボックスモデルは、HTML 要素がブラウザーエンジンでどのようにモデル化され、それらの HTML 要素のサイズが CSS プロパティからどのように導出されるかを指します。これは、HTML Web ページを構成するための基本的な概念です。ウィキペディア（英語)

ワンポイントアドバイス

ボックスモデルで大切なことは、見た目では無くCSSのコードで記述した数値を頭でしっかり描く事が重要になります。
見た目だけ良ければという考えにならないように気を付けましょう。

参考サイト

UI/UX とは？

さまざまデバイスに対応したコンテンツを作るには、環境・時間・空間・性別・年齢・人数…等々
それらを「User Interface：ユーザインターフェイス」や「User Experience：ユーザエクスペリエンス」と
いう言葉で表現されています。ここで活きるのは「体験という経験」になるでしょう。

ワンポイントアドバイス

「使い易い」「役に立つ」「解りやすい」をポイントにデザイン設計を考えてみましょう。

参考サイト

第4回成績考査

8月13日の5限目までに、Webページを提出してください。
サイト内容は、自由です。
※是非、就職活動に活かせる作品を作成してみてください。

次回の成績考査に向けて

以下のアジェンダは未使用（講義内容は下記で実施）

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

-本日のアジェンダ-

1限目
実技　スマートフォンサイト作成実習②
ハンバーガーメニューの実装

2限目
実技　スマートフォンサイト作成実習②
ハンバーガーメニューの実装

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

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

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

本日のテーマ

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

レスポンシブWebデザイン（RWD）

レスポンシブWebデザイン基礎

参考サイト

ハンバーガーメニュー

主にスマートフォンやタブレット端末に対応したWebサイトにおけるナビゲーションメニューの表示形式の一つ。アイコンは画面の左上隅か右上隅に配置されていることが多く、アイコンをクリックまたはタップすることでメニューが表示されることから「折り畳みメニュー」と呼ばれることもある。

参考サイト

成績考査に向けて

8月13日（金）の5時限目までに各自の企画サイトをレスポンシブWebデザイン対応させてHTMLサーバーのトップフォルダにアップロードしてください。

便利ツール（サイト制作用）

研修メモ

覚書

2021年8月12日（木）

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

2021年8月12日By admin 実技スマートフォンサイト作成実習 “実技スマートフォンサイト作成実習③”の編集

-本日のアジェンダ-

1限目
実技スマートフォンサイト作成実習③
実機検証ついて

2限目
実技スマートフォンサイト作成実習③
Webサイトの納品について

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

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

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

本日のテーマ

実機検証は最後にしっかりと

レスポンシブWEBデザイン（RWD）とは？

サンプルページ（レスポンシブWebデザイン基礎）

ワンポイントアドバイス

実機検証について

スマホによる実機検証は、新しく開発したアプリやWebサイトを利用者が実際に使う端末機を使ってテストを行うことで、問題や不具合を発見し、品質を向上させるもの。世にWebサイトやアプリをリリースするための重要な作業の一つです。

ワンポイントアドバイス

サイトが出来たら、出来る限りの実機検証を行ってみましょう。
実機でしかないバグや見た目の違いが多くありますので、サイトが一通り形になったら実機検証を出来る範囲で行ってみましょう。

参考サイト

Webサイトの納品について

サイトが完成したら後は納品です。納品方法は色々なパターンがありますので、ご依頼を頂いたお客様としっかりと確認をして納品を行いましょう。

ワンポイントアドバイス

FTPでサーバにUPして納品となるのが一般的ですが、データ納品となる場合もよくあります。ファイル名や無駄なファイルが残っていないように気を付けて納品を行いましょう。

参考サイト

第4回成績考査

8月13日の5限目までに、Webページを提出してください。
サイト内容は、自由です。
※是非、就職活動に活かせる作品を作成してみてください。

次回の成績考査に向けて

以下のアジェンダは未使用（講義内容は下記で実施）

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

-本日のアジェンダ-

1限目
実技　スマートフォンサイト作成実習③
ブレイクポイントについて

2限目
実技　スマートフォンサイト作成実習③
画像の解像度について

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

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

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

本日のテーマ

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

レスポンシブWebデザイン（RWD）

レスポンシブWebデザイン基礎

参考サイト

ブレイクポイント

ブレイクポイントとは、CSSソース内で適用スタイルを区切る位置のことです。たいていは画面の横幅サイズを使ってブレイクポイントが作られます。レスポンシブWebデザインを採用する際には、ある画面サイズを境界にしてスタイルを分割したい場合があります。そのサイズがブレイクポイントです。

参考サイト

画像の解像度（Retinaディスプレイ）

RetinaディスプレイとはMacやiPhoneなどのApple製品に搭載されている高精細ディスプレイのことです。Retinaとは英語で「網膜」という意味があり、Appleの公式サイトでは「Retinaディスプレイのピクセル密度はとても高く、通常画面を見るときの距離では、人間の目で一つ一つのピクセルを見分けることはできません。そのため、コンテンツが色鮮やかに細部まで再現され、画面の美しさに圧倒されます。」とも紹介されています。

参考サイト

成績考査に向けて

8月13日（金）の5時限目までに各自の企画サイトをレスポンシブWebデザイン対応させてHTMLサーバーのトップフォルダにアップロードしてください。

便利ツール（サイト制作用）

研修メモ

覚書

納品時の注意事項追加：必ずチェックサイトのチェックを実施するとこ！
HTML-CSS講座間違い：colmn（uが不足！）
HTML-CSS講座のCSSにフォント指定を実施

2021年8月13日（金）

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

2021年8月13日By admin 実技スマートフォンサイト作成実習 “実技スマートフォンサイト作成実習④”の編集

-本日のアジェンダ-

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

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

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

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

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

本日のテーマ

成績考査です。

第4回成績考査

本日の5限目までに、Webページを提出してください。
サイト内容は、自由です。
※是非、就職活動に活かせる作品を作成してみてください。

以下のアジェンダは未使用（講義内容は下記で実施）

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

-本日のアジェンダ-

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

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

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

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

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

本日のテーマ

本日は成績考査です。

レスポンシブWebデザイン（RWD）

レスポンシブWebデザイン基礎

参考サイト

成績考査

本日（8月13日（金））の5時限目までに各自の企画サイトをレスポンシブWebデザイン対応させてHTMLサーバーのトップフォルダにアップロードしてください。

便利ツール（サイト制作用）

研修メモ

覚書

2021年8月14日（土）

学科　SNS運用基礎

2021年8月14日By admin その他 “学科　SNS運用基礎”の編集

-本日のアジェンダ-

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

2限目
学科　SNS運用基礎
WebサイトとSNSの使い方について

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

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

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

本日のテーマ

WebサイトでのSNSの活用法についてです。

SNS とは?

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

https://youtube.com/watch?v=ihnUg0_eS8Q%3Fstart%3D32%26feature%3Doembed

ワンポイントアドバイス

Webを利用するポイントとして、「Webサイト」「ブログ」「SNS」はWeb運用として重要なコンテンツの３つです。役割と特徴をしっかりと把握して、Webに関わるお仕事に関われるようにしましょう。

参考サイト

SNSの埋め込み方

他サイトコンテンツの利用方法

埋め込み例
https://samplesdl.me/training_html-css/sns.html

第5回成績考査

9月16日5限目までに、紙用（pdf）ポートフォリオを提出してください。
ポートフォリオの内容は、自由です。
※是非、就職活動に活かせる作品を作成してみてください。

投稿ナビゲーション

研修メモ

覚書

2021年8月16日（月）

学科　WEB動画基礎

2021年8月16日By admin その他

-本日のアジェンダ-

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

2限目
学科　WEB動画基礎
WebサイトでYouTubeの使い方について

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

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

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

本日のテーマ

WebサイトでのYouTubeの活用法についてです。

YouTubeにつて

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

videoとiframeタグ

WEBサイトに動画を埋め込む方法は２つあります。
①iframeタグを使用する（youtubeなどの動画サイトから読み込む）
②videoタグを使用する（動画ファイルをアップロードして読み込む）

①iframeタグを使用する（youtubeなどの動画サイトから読み込む）

記述例
<iframe width="410" height="200" src="https://www.youtube.com/embed/9No-FiEInLA" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen>

②videoタグを使用する（動画ファイルをアップロードして読み込む）

記述例
<video src="sample.mp4"></video>

参考サイト

その他、埋め込みについては下記を参考に！

SNSの埋め込み方

第5回成績考査

研修メモ

覚書

2021年8月17日（火）

学科 JavaScript基礎

-本日のアジェンダ-

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

2限目
学科 JavaScript基礎
JJavaScript 使い方について

3限目
学科 JavaScript基礎
課題作成

4限目
学科 JavaScript基礎
課題作成

5限目
学科 JavaScript基礎
課題作成

本日のテーマ

JavaScriptの活用法についてです。

JavaScript とは？

JavaScriptはスクリプト言語のひとつでありNetscape Communications社によって開発されたプログラミング言語ですが、標準化され現在ではほとんどのブラウザの標準スクリプト言語として使用されています。JavaScriptを使用することでWebページに動きを与えたり算術などの処理を行うことが可能になります。JavaScriptはクライアント（ブラウザ）のスクリプト言語として発展して来ましたが近年ではサーバーサイドでも稼働するものもあります。JavaScriptの言語仕様はECMAScriptとして標準化されています。

参考サイト

jQuery とは？

jQueryは、ウェブブラウザ用のJavaScriptコードをより容易に記述できるようにするために設計されたJavaScriptライブラリです。jQueryは、JavaScriptライブラリのデファクトスタンダードであると言われています。
jQueryは、以下の特徴を持ちます。

ブラウザの違いを意識せずに処理を記述できます。
HTML文書（DOM：Document Object Model）に簡単にアクセスできます。
Ajax処理（サーバーとの非同期通信）が簡単に記述できます。

参考サイト

JavaScriptでの記述

JavaScriptを記述する時の基本事項を理解しましょう。

参考サイト

第5回成績考査

研修メモ

提供した説明ファイルの誤り

誤り
％
倫理（2か所）ga
//のコメント記述が2行ある

jQueryの説明ファイルの誤り

t.jsのサンプルの</script>が改行されていない

2021年8月18日（水）

実技　JavaScript（jQuery）実習①

-本日のアジェンダ-

1限目
実技　JavaScript（jQuery）実習①
jQueryについて

2限目
実技　JavaScript（jQuery）実習①
jjQuery 使い方について

3限目
実技　JavaScript（jQuery）実習①
作品制作

4限目
実技　JavaScript（jQuery）実習①
作品制作

5限目
実技　JavaScript（jQuery）実習①
作品制作

本日のテーマ

jQueryの活用法についてです。

jQueryについて

jQueryを利用する時の基本事項を理解しましょう。

参考サイト

jQueryの利用方法

jQueryを利用する時は実装するための参考サイトを検索し利用方法を理解しましょう。
検索は、「jQuery （実装したいキーワード）」で検索します。
良く使うキーワードの例は、以下の通りです。

スライダー
カルーセル
ハンバーガーメニュー
ライトボックス
ドリルダウン
フェード
スクロール
など

参考サイト

第5回成績考査

研修メモ

覚書

2021年8月19日（木）

実技　JavaScript（jQuery）実習②

本日のアジェンダ-

1限目
実技　JavaScript（jQuery）実習②
HTML・CSS・jsについて

2限目
実技　JavaScript（jQuery）実習②
クライアントサイドスクリプトについて

3限目
実技　JavaScript（jQuery）実習②
課題作成

4限目
実技　JavaScript（jQuery）実習②
課題作成

5限目
実技　JavaScript（jQuery）実習②
課題作成

本日のテーマ

jQueryを自分のサイトに導入しましょう

jQueryの導入

jQueryを自分のサイトに導入して動きのあるサイトを作りましょう。

参考サイト

jQueryの利用方法

スライダー
カルーセル
ハンバーガーメニュー
ライトボックス
ドリルダウン
フェード
スクロール
など

参考サイト

第5回成績考査

研修メモ

覚書

2021年8月20日（金）

学科サーバーサイドプログラム基礎

-本日のアジェンダ-

1限目
学科サーバーサイドプログラム基礎
サーバーサイドプログラムについて

2限目
学科サーバーサイドプログラム基礎
WordPressのサーバについて

3限目
学科サーバーサイドプログラム基礎
課題作成

4限目
学科サーバーサイドプログラム基礎
課題作成

5限目
学科サーバーサイドプログラム基礎
課題作成

本日のテーマ

WordPressのより深いお話です。

事前準備（サーバーの契約と開設）

サーバーサイドプログラミングを行うためにはレンタルサーバーとの契約が必要です。

参考サイト

サーバーサイドの仕組み

Webページには固定のHTMLが設定されているページ（静的ページ）と要求発生時にHTMLを作成するページ（動的ページ）があります。静的ページと動的ページの違いを理解しましょう。

参考サイト

サーバーサイドスクリプトとクライアントサイドスクリプト

スクリプト（プログラミング）にはサーバー側で動くものとクライアント側（PC側）で動くものがあります。違いについて理解しましょう。

参考サイト

フォームの作成

サーバーサイドプログラミングを行うためにはプログラムが処理するために使用する入力情報が必要です。情報を入力するためのフォーム作成方法を理解しましょう。

参考サイト

学習環境のための参考サイト（MAMPとXAMPP）

サーバーサイドプログラミングを学習するためのサーバー環境をPC内に構築することもできます。この環境を作成しておくことでネットワーク環境がない所でも学習を行うことが可能になります。

参考サイト

第5回成績考査

研修メモ

覚書

inputのサンプルがあるといいですね。

講義の注意事項

WordPressサーバーの引越しをするためのアカウント作成（財産の引越しを実施／アカウント作成は自宅で実施）
今日からの4日間はWordPressの引越しをしながらサーバーサイドの勉強を実施
静的ページと動的ページ
レスポンシブ対応（再確認）
サーバーサイドの勉強
PHPの勉強（構文）
WordPressの独自テーマ作成（2日間）
webedu keigo@m / n15

サーバーサイドの仕組み

PHP入門

WordPressオリジナルテーマ作成

WordPressサーバーの引越し手順

アカウント作成（メールアドレス登録→個人情報登録）
HTML、PHP、WordPressサーバーの有効化
学校WordPressへ引越しプラグインのインストール（本日実施）
学校WordPressのバックアップ実施（本日実施）
個人WordPressへ引越しプラグインのインストール
個人WordPressへインポート実施
個人WordPressへログイン（学校アカウント）
個人WordPressから学校管理アカウントの削除

2021年8月21日（土）

学科 PHP基礎

-本日のアジェンダ-

1限目
学科 PHP基礎
PHP について

2限目
学科 PHP基礎
WordPressのPHPでの役割について

3限目
学科 PHP基礎
課題作成

4限目
学科 PHP基礎
課題作成

5限目
学科 PHP基礎
課題作成

本日のテーマ

WordPressはphpで出来ています。

サーバーサイドスクリプトとクライアントサイドスクリプト

スクリプト（プログラミング）にはサーバー側で動くものとクライアント側（PC側）で動くものがあります。違いについて理解しましょう。

参考サイト

サーバサイドスクリプト

PHPやPerlといったプログラミング言語があります。これらの言語はWebサーバ上で動作します。このことから、これらの言語を「サーバサイドスクリプト」と呼びます。何らかの操作を実行すると、Webサーバにデータが送信され、サーバの中のプログラムが処理を行い、結果をブラウザに返します。

クライアントサイドスクリプト

一方、JavaScriptでは、記述したHTMLファイルはWebサーバ上でも公開されますが、ブラウザさえあれば実行することが可能です。Webサーバは必須ではありません。これは、Webブラウザ内でプログラムが実行されるためです。このようなスクリプトのことを「クライアントサイドスクリプト」と呼びます。

PHPとは

PHPとは動的にWebページを生成することができるサーバーサイドのスクリプト言語です。他のプログラミング言語と比較して仕様や文法が簡単なため習得しやすいと言われています。またMySQLなどのデータベースとの連携が容易なことなどから、WordPressを含めたWebアプリケーションの開発にもよく使われる有名なスクリプト言語でもあります。

参考サイト

PHP入門

PHPはプログラミング言語なのでIT技術者が利用するのが一般的です。但し、WordPressがPHPで作成されていることもありWordPressの独自テーマ作成などを行う時にPHPに接する機会もあります。

第5回成績考査

研修メモ

覚書

2021年8月23日（月）

実技 CMS構築実習①

-本日のアジェンダ-

1限目
実技 CMS構築実習①
WordPressのテーマについて

2限目
実技 CMS構築実習①
WordPressのテーマの役割について

3限目
実技 CMS構築実習①
課題作成

4限目
実技 CMS構築実習①
課題作成

5限目
実技 CMS構築実習①
課題作成

本日のテーマ

WordPressのテーマの仕組みを確認しましょう。

WordPressについて

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

参考サイト

HTML・CSSからオリジナルテーマを作成

WordPressのオリジナルテーマを作成する手順を理解しましょう。

参考サイト

第5回成績考査

研修メモ

覚書

参考サイト

オリジナルテーマ作成資料をDropBoxからダウンロードしましょう。
「資料→【4】コーディング→wordpress_オリジナルテーマ作成_20200622.pdf」をダウンロードしてください。
「資料→【4】コーディング→task_ohama_20210421.zip」をダウンロードして中に格納してある「task_ohama_20210421」フォルダをデスクトップにコピーしてください。

2021年8月24日（火）

職業人講話①

2021年8月24日By admin その他 “職業人講話①”の編集

-本日のアジェンダ-

1限目
職業人講話①
業界のお話

2限目
職業人講話①
業界のお話

3限目
職業人講話①
業界のお話

4限目
職業人講話①
業界のお話

5限目
職業人講話①
業界のお話

本日のテーマ

本日は職業人講話です。

ザクロバッカについて

ZAQRO-BACCA合同会社はサービス企業です。
私たちは怠慢になることをせず、常にお客様の事を考え顧客満足度を高めます。
プロ意識を持って、考え、行動し自己管理の下にお客様と共に成長していきます。

サイトURL

新宿・中野のWEBサイト制作・ECコンサルはZAQROBACCA

研修メモ

覚書

2021年8月26日（木）

実技 CMS構築実習②

-本日のアジェンダ-

1限目
実技 CMS構築実習②
テーマのカスタマイズについて

2限目
実技 CMS構築実習②
テーマのカスタマイズについて

3限目
実技 CMS構築実習②
課題作成

4限目
実技 CMS構築実習②
課題作成

5限目
実技 CMS構築実習②
課題作成

本日のテーマ

WordPressのテーマのカスタマイズを理解しましょう。

WordPressについて

参考サイト

テーマのカスタマイズについて

テーマのカスタマイズを行うには、以下の方法があります。（実際のカスタマイズ時には、テーマが提供するカスタイマイズ機能で対応できないかを確認後に実施してください）

テーマファイルを直接編集（テーマのバージョンアップに対応できないので使用しない方が良い）
- 「外観→テーマエディタ」を使ってコードを変更
- テーマファイルをダウンロードして直接編集
追加CSSを使って編集（CSS編集用のプラグイン有り）
子テーマを作成

参考サイト

第5回成績考査

2021年8月26日（木）［元の予定］

実技 CMS構築実習②

-本日のアジェンダ-

1限目
実技 CMS構築実習②
オリジナルテーマの構造

2限目
実技 CMS構築実習②
オリジナルテーマの作成

3限目
実技 CMS構築実習②
課題作成

4限目
実技 CMS構築実習②
課題作成

5限目
実技 CMS構築実習②
課題作成

本日のテーマ

WordPressのテーマの仕組みを確認しましょう。

WordPressについて

参考サイト

HTML・CSSからオリジナルテーマを作成

WordPressのオリジナルテーマを作成する手順を理解しましょう。

参考サイト

研修メモ

覚書

引越し大作戦は全員終了です。（来週の月曜日に手順の再確認を行います）
5/5（木）：授業有り、5/17（お休み）に変更されているので注意してください。
キャリコンを来週から始めます。（最後のキャリコンです。就職に向けて頑張ってください。）
明日は来所日です。（給付金の資料は後程、齋藤先生がお持ちします）

オリジナルテーマの作成について

WordPressらしいオリジナルテーマを作成

オリジナルテーマ作成資料をDropBoxからダウンロードしましょう。
「資料→【4】コーディング→task_ohama_20210422.zip」をダウンロードして中に格納してある「task_ohama_20210422」フォルダをデスクトップにコピーしてください。

2021年8月27日（金）

学科 WEBマーケッティング基礎

-本日のアジェンダ-

1限目
学科 WEBマーケティング基礎
WEBマーケティングについて

2限目
学科 WEBマーケティング基礎
Googleアナリティクスについて

3限目
学科 WEBマーケティング基礎
作品制作

4限目
学科 WEBマーケティング基礎
作品制作

5限目
学科 WEBマーケティング基礎
作品制作

本日のテーマ

Googleアナリティクスで効果測定を理解しておきましょう。

マーケッティングとは？

ビジネスを成功させるためにはマーケッティング活動が重要です。まずは、マーケティング活動の一般論について理解しましょう。

参考サイト

WEBマーケッティングとは？

最近はWebを使用したマーケッティング活動が重要視されています。Webマーケッティング活用の基本について理解しましょう。

参考サイト

SEOについて

SEOとは？

Webページを作ったら、誰もが多くの人に見てもらいたいと思うでしょう。趣味で作ったWebページなら、お友達に見せるだけでもいいかもしれませんが、ネットショップやアフィリエイトなど、事業としてやりたい場合は訪問者を増やす施策が必要です。普通はインターネットに公開しただけでは誰にも見てもらえませんから、訪問者を呼び込む何らかの方法が必要になるのです。そこで、注目されているのがSEOと呼ばれる方法です。

SEO（エスイーオー）というのは Search Engine Optimization の頭文字を取ったもので、検索エンジン最適化と呼ばれています。これは検索エンジンの検索結果の上位に表示されるようにするテクニックです。現在インターネット利用者は必要な情報を探すために Yahoo! や Google といった検索サービスを利用している方が多いです。そして、利用者のほとんどが検索結果の１ページ目か２ページ目までしか見ていない傾向があります。つまり、これら検索サービスの上の方に表示されれば、インターネット利用者の多くを効率的に自分のWebページに呼び込むことが出来るというわけです。

SEMとは？

SEMとは Search Engine Marketing （検索エンジンマーケティング）の略でインターネット上での市場調査を行う事を指します。自社サイトのターゲットとユーザーのニーズを把握しどのようなキーワードでの検索結果に上位表示されれば最適なのかを詳しく調査します。検索エンジンの検索結果の上位に表示されるようにサイトの構成を整備するSEO(検索エンジン最適化)や、検索連動型広告などによる広告掲載などもSEMに含まれます。

LPOとは？

LPOは「Landing Page Optimization」の略で「ランディングページ最適化」と言います。広告や外部サイトからリンクを辿って最初に表示されるページをランディングページと呼びます。初めて訪れたユーザーに適切な導線（ユーザーの視線やカーソル位置を想定した流れ）や便利な検索機能を提供しコンバージョンレートを上げる為に最適なサイト構成に整備します。

参考サイト

Webデザイナー（コードを書く仕事）で必要なSEO

SEO対策を意識したコーディングと言うものは、まず正確にHTMLを記述しなくてはなりません。HTMLと言うものは多少間違った記述が行われていても、取り敢えずはウェブページとして表示されるわけです。しかし、検索エンジンは正しいHTMLで記述されていないと評価を低くしてしまい、SEOに対してはマイナス要素となってしまうのです。その為HTMLソースコーダーにはSEO対策を意識したHTMLの知識が必要になると言う事なのです。

参考サイト

被リンクについて

被リンクの扱いはとても要注意です！！まだまだ理解されていない企業、制作会社がまだ多いです。SEO対策でとても重要な内容になります。

参考サイト

SNSについて

最近は、SNSを利用したマーケッティングも活性化しています。マーケッティング断面でのSNS活用方法を理解しましょう。

参考サイト

Googleアナリティクス

Google Analyticsは、Googleが無料で提供するWebページのアクセス解析サービス。元々はGoogleが2005年に買収した、米国のWeb解析ソリューションプロバイダー・Urchin社の技術を利用している。

参考サイト

Googleウェブマスターツール（Google Search Console）について

第5回成績考査

研修メモ

覚書

情報：ブラウザのスーパーリロードについて

HTML/CSSをサーバーにアップしたのだけども画面が乱れる（更新されていない）現象が発生することがあります。これは、PCに保存されているキャッシュが原因のことがあります。スーパーリロードを行えば解消されますので覚えておいてください。ホームページの変更依頼を受けて修正を行なったが修正されていないとクレームをもらった時の原因のこともありますので注意してください。「スーパーリロード」は「フルリロード」や「強制再読み込み」と呼ばれることもあります。

ブラウザを更新してもCSSが反映されない！？そんな時は「スーパーリロード」をお試しください。 | フリーランスWEB屋の備忘録

確認：WordPressの引越しについて

WordPressの引越しを行う時の手順は以下の通りとなりますのでサーバー管理者として再確認をしてください。

引越し元のWordPressに「All-in-One WP Migration」というプラグインをインストールし有効化を実施
「All-in-One WP Migration」というメニューが追加されるので、このメニューから「エクスポート」を選択
エクスポート先に「ファイル」を選択し「ダウンロード」ボタンをクリックしファイルを保存
［XFREEの場合］：「失敗サーバーに問題が発生しました」が発生するのでFTPを使用してファイルを取り出し（FTPを有効にしてファイルを取り出す手順は下記の※1を参照）
引越し先のWordPressに「All-in-One WP Migration」というプラグインをインストールし有効化を実施
「All-in-One WP Migration」というメニューが追加されるので、このメニューから「インポート」を選択
インポート元に「ファイル」を選択しエクスポートしたファイルを選択（ファイルアップロードが開始）
インポート開始の確認ウィンドウが表示されるので「開始」をクリック
インポート完了の確認ウィンドウが表示されるので「完了」をクリック
「ログアウト」してインポート元のユーザー情報でログインを実施
サイト内容が引越しされていることを確認（学校のバックアップをインポートした時は「test」ユーザーを削除）

※1：XFREEでFTPを有効にしてエクスポートファイルを取り出す方法
（ 1. ～ 7. は1回だけ実施）

XFREEの管理者画面にログイン
WordPressの管理パネルに移動
対象のWordPressIDの「設定」をクリック
「FTPアカウント設定」をクリック
パスワードを入力、利用設定：有効、全てのファイル・フォルダにアクセスすると設定し「設定変更（確認）」をクリック
確認画面が表示されるので「設定編集（確定）」をクリック
「FTPアカウント設定」をクリックした時に表示される情報を使用してFFFTPのホスト情報を設定（ホストの設定名：サーバー名称（自由）、ホスト名：FTPホスト名、ユーザー名：FTPアカウント名、パスワード：設定したパスワード）
FFFTPで「接続」を実施
サーバー側のフォルダで「wp-content」→「ai1wm-backups」を選択し「<サーバーURL>-<日付>-<・・・>.wpress」というファイルを取り出し
エクスポートファイルは複数作成されるので不要になったものは削除（ディスク容量が不足します）

2021年8月30日（月）

実技ポートフォリオ作成実習

-本日のアジェンダ-

1限目
実技　ポートフォリオ作成実習
ポートフォリオ制作について

2限目
実技　ポートフォリオ作成実習
ポートフォリオ制作について

3限目
実技　ポートフォリオ作成実習
作品制作

4限目
実技　ポートフォリオ作成実習
作品制作

5限目
実技　ポートフォリオ作成実習
作品制作

本日のテーマ

紙ポートフォリオを作成しましょう

紙ポートフォリオの必要性

面接時は紙ポートフォリオが有用（迅速な対応が可能／面接担当者のデジタルリテラシーに非依存）
掲載内容を相手に合わせて調整できる
迫力がある（フライヤーや名刺などの紙媒体を現物に近い形で提示可能）

参考サイト

ポートフォリオの記載事項

表紙
目次
自己紹介（氏名、生年月日、顔写真、経歴、保有資格、強みなど）
保有スキル（業務スキルやスキルレベルも記載）
作品（必要に応じて中扉／作品の説明やアピールポイントを記載）
裏表紙

紙ポートフォリオの作成手順

ポートフォリオ構成を決定
掲載する制作物を整理（必要に応じてカラー設定をCMYK、解像度を300～350ppiに変更）
ページ割りを決定（見開きにする時は左右を意識）
表紙とページのラフデザインを決定
ページデザインの作成
表紙、目次、中扉、裏表紙の作成

参考サイト

注意事項

媒体型式：製本するかポケットファイルにするか（自作、ネット、店舗（キンコーズなど））
大きさとページ数：A4で15～25ページ程度（背景色を付ける時はB4にトンボ付きで作成しカット）
紙媒体：厚めの上質紙かコート紙

ワンポイント

サイトのファーストビューが見えるようにPCやスマホの画面キャプチャを入れるのが良いですが、よりデザイン性を高めるため機器のデバイスイメージにはめ込みをするのがお勧めです。（下記のサイトからのダウンロードは容量が大きいので自宅で実施してください）

Devices from Facebook Design

第5回成績考査

研修メモ

覚書

デバイスイメージ活用例紹介
大浜と橋本さんの紙ポートフォリオ紹介

2021年8月31日（火）

実技デザイン総合制作実習①

2021年8月31日By admin 実技デザイン総合制作実習 “実技デザイン総合制作実習①”の編集

-本日のアジェンダ-

1限目
実技デザイン総合制作実習①
修了制作

2限目
実技デザイン総合制作実習①
修了制作

3限目
実技デザイン総合制作実習①
修了制作

4限目
実技デザイン総合制作実習①
修了制作

5限目
実技デザイン総合制作実習①
修了制作

修了制作のテーマ

修了制作は1限目から5限目まで制作の時間です。
皆さんがそれぞれ就職に向けてしっかりと作品をまとめる時間として有効な時間となるように、残りの時間を過ごしていきましょう。

第5回成績考査

研修メモ

覚書

2021年9月1日（水）

実技デザイン総合制作実習②

2021年9月1日By admin 実技デザイン総合制作実習 “実技デザイン総合制作実習②”の編集

-本日のアジェンダ-

1限目
実技デザイン総合制作実習②
修了制作

2限目
実技デザイン総合制作実習②
修了制作

3限目
実技デザイン総合制作実習②
修了制作

4限目
実技デザイン総合制作実習②
修了制作

5限目
実技デザイン総合制作実習②
修了制作

修了制作のテーマ

第5回成績考査

研修メモ

覚書

2021年9月2日（木）

実技デザイン総合制作実習③

2021年9月2日By admin 実技デザイン総合制作実習 “実技デザイン総合制作実習③”の編集

-本日のアジェンダ-

1限目
実技デザイン総合制作実習③
修了制作

2限目
実技デザイン総合制作実習③
修了制作

3限目
実技デザイン総合制作実習③
修了制作

4限目
実技デザイン総合制作実習③
修了制作

5限目
実技デザイン総合制作実習③
修了制作

修了制作のテーマ

第5回成績考査

研修メモ

覚書

2021年9月3日（金）

実技デザイン総合制作実習④

2021年9月3日By admin 実技デザイン総合制作実習 “実技デザイン総合制作実習④”の編集

-本日のアジェンダ-

1限目
実技デザイン総合制作実習④
修了制作

2限目
実技デザイン総合制作実習④
修了制作

3限目
実技デザイン総合制作実習④
修了制作

4限目
実技デザイン総合制作実習④
修了制作

5限目
実技デザイン総合制作実習④
修了制作

修了制作のテーマ

第5回成績考査

研修メモ

覚書

2021年9月4日（土）

実技デザイン総合制作実習⑤

2021年9月4日By admin 実技デザイン総合制作実習 “実技デザイン総合制作実習⑤”の編集

-本日のアジェンダ-

1限目
実技デザイン総合制作実習⑤
修了制作

2限目
実技デザイン総合制作実習⑤
修了制作

3限目
実技デザイン総合制作実習⑤
修了制作

4限目
実技デザイン総合制作実習⑤
修了制作

5限目
実技デザイン総合制作実習⑤
修了制作

修了制作のテーマ

第5回成績考査

研修メモ

覚書

2021年9月6日（月）

実技デザイン総合制作実習⑥

2021年9月6日By admin 実技デザイン総合制作実習 “実技デザイン総合制作実習⑥”の編集

-本日のアジェンダ-

1限目
実技デザイン総合制作実習⑥
修了制作

2限目
実技デザイン総合制作実習⑥
修了制作

3限目
実技デザイン総合制作実習⑥
修了制作

4限目
実技デザイン総合制作実習⑥
修了制作

5限目
実技デザイン総合制作実習⑥
修了制作

修了制作のテーマ

第5回成績考査

研修メモ

覚書

2021年9月7日（火）

実技デザイン総合制作実習⑦

2021年9月7日By admin 実技デザイン総合制作実習 “実技デザイン総合制作実習⑦”の編集

-本日のアジェンダ-

1限目
実技デザイン総合制作実習⑦
修了制作

2限目
実技デザイン総合制作実習⑦
修了制作

3限目
実技デザイン総合制作実習⑦
修了制作

4限目
実技デザイン総合制作実習⑦
修了制作

5限目
実技デザイン総合制作実習⑦
修了制作

修了制作のテーマ

第5回成績考査

研修メモ

覚書

2021年9月8日（水）

実技デザイン総合制作実習⑧

2021年9月8日By admin 実技デザイン総合制作実習 “実技デザイン総合制作実習⑧”の編集

-本日のアジェンダ-

1限目
実技デザイン総合制作実習⑧
修了制作

2限目
実技デザイン総合制作実習⑧
修了制作

3限目
実技デザイン総合制作実習⑧
修了制作

4限目
実技デザイン総合制作実習⑧
修了制作

5限目
実技デザイン総合制作実習⑧
修了制作

修了制作のテーマ

第5回成績考査

研修メモ

覚書

2021年9月9日（木）

実技デザイン総合制作実習⑨

2021年9月9日By admin 実技デザイン総合制作実習 “実技デザイン総合制作実習⑨”の編集

-本日のアジェンダ-

1限目
実技デザイン総合制作実習⑨
修了制作

2限目
実技デザイン総合制作実習⑨
修了制作

3限目
実技デザイン総合制作実習⑨
修了制作

4限目
実技デザイン総合制作実習⑨
修了制作

5限目
実技デザイン総合制作実習⑨
修了制作

修了制作のテーマ

第5回成績考査

研修メモ

覚書

2021年9月10日（金）

実技デザイン総合制作実習⑩

2021年9月10日By admin 実技デザイン総合制作実習 “実技デザイン総合制作実習⑩”の編集

-本日のアジェンダ-

1限目
実技デザイン総合制作実習⑩
修了制作

2限目
実技デザイン総合制作実習⑩
修了制作

3限目
実技デザイン総合制作実習⑩
修了制作

4限目
実技デザイン総合制作実習⑩
修了制作

5限目
実技デザイン総合制作実習⑩
修了制作

修了制作のテーマ

第5回成績考査

研修メモ

覚書

2021年9月13日（月）

実技デザイン総合制作実習⑪

2021年9月13日By admin 実技デザイン総合制作実習 “実技デザイン総合制作実習⑪”の編集

-本日のアジェンダ-

1限目
実技デザイン総合制作実習⑪
修了制作

2限目
実技デザイン総合制作実習⑪
修了制作

3限目
実技デザイン総合制作実習⑪
修了制作

4限目
実技デザイン総合制作実習⑪
修了制作

5限目
実技デザイン総合制作実習⑪
修了制作

修了制作のテーマ

第5回成績考査

研修メモ

覚書

2021年9月14日（火）

実技デザイン総合制作実習⑫

2021年9月14日By admin 実技デザイン総合制作実習 “実技デザイン総合制作実習⑫”の編集

-本日のアジェンダ-

1限目
実技デザイン総合制作実習⑫
修了制作

2限目
実技デザイン総合制作実習⑫
修了制作

3限目
実技デザイン総合制作実習⑫
修了制作

4限目
実技デザイン総合制作実習⑫
修了制作

5限目
実技デザイン総合制作実習⑫
修了制作

修了制作のテーマ

第5回成績考査

研修メモ

覚書

2021年9月15日（水）

実技デザイン総合制作実習⑬

2021年9月15日By admin 実技デザイン総合制作実習 “実技デザイン総合制作実習⑬”の編集

-本日のアジェンダ-

1限目
実技デザイン総合制作実習⑬
修了制作

2限目
実技デザイン総合制作実習⑬
修了制作

3限目
実技デザイン総合制作実習⑬
修了制作

4限目
実技デザイン総合制作実習⑬
修了制作

5限目
実技デザイン総合制作実習⑬
修了制作

修了制作のテーマ

第5回成績考査

研修メモ

覚書

2021年9月16日（木）

実技デザイン総合制作実習⑭

2021年9月16日By admin 実技デザイン総合制作実習 “実技デザイン総合制作実習⑭”の編集

-本日のアジェンダ-

1限目
実技デザイン総合制作実習⑭
成績考査

2限目
実技デザイン総合制作実習⑭
成績考査

3限目
実技デザイン総合制作実習⑭
成績考査

4限目
実技デザイン総合制作実習⑭
成績考査

5限目
実技デザイン総合制作実習⑭
成績考査

修了制作のテーマ

第5回成績考査

研修メモ

覚書

2021年9月17日（金）

実技デザイン総合制作実習⑮

2021年9月17日By admin 実技デザイン総合制作実習 “実技デザイン総合制作実習⑮”の編集

-本日のアジェンダ-

1限目
実技デザイン総合制作実習⑮
成績考査

2限目
実技デザイン総合制作実習⑮
成績考査

3限目
実技デザイン総合制作実習⑮
成績考査

4限目
実技デザイン総合制作実習⑮
成績考査

5限目
実技デザイン総合制作実習⑮
成績考査

発表会

本日は皆さんの作品（ポートフォリオ）を発表してください。
最後は誉めあって終わりましょう。

PCの中身について

本日の訓練修了後にPCの中身を削除します。
PCのお引越しの方法を確認しておきましょう。

研修メモ

覚書

ポートフォリオ発表方法

ファイルサイズの大きい順に前に出て発表（PC操作は講師）
発表が終わったら講師からコメント
他の生徒はコメント記載用紙にコメントを記載
全員の発表が終わったらコメント記載用紙を回収し宛先別に再編集
DropBoxの各人のフォルダにコメントを格納しアナウンス実施

PCクリーン

Crome → 設定（右上） → パスワード → プライバシーとセキュリティ → 保存したパスワード → ・・・から個別に削除
Crome → 設定（右上） → プライバシーとセキュリティ → 閲覧履歴データの削除 → 期間：全機関 → データを削除
Crome → 設定（右上） → ブックマーク → ブックマークマネージャ → ・・・からエクスポート
Crome → 設定（右上） → ブックマーク → ブックマークマネージャ → ブックマークを削除
ffftp → 接続 → 接続情報の削除
エクスプローラ → PC配下のフォルダ（3Dオブジェクト、ダウンロード、デスクトップ、ドキュメント、ピクチャ、ピクチャ、ビデオ、ミュージック） → フィル削除
ゴミ箱 → 開いて内容を確認 → ゴミ箱を空にする
XD → クラウドドキュメント → 削除

PC再設定（次のクラスに向けて）

「午前」でログイン
Adobe Creative Cloudで「ログアウト」を実施
「午前」をログアウト
「管理者（deauxx）」でログイン
「設定」→「アカウント」→「家族とその他のユーザー」→「午前」→「削除」を実施
システム再起動
「管理者（deauxx）」でログイン
「設定」→「アカウント」→「家族とその他のユーザー」→「その他のユーザーをこのPCに追加」→「このユーザーのサインイン情報がありません」→「Microsoft アカウントを持たないユーザーを追加する」→ユーザー名：「午前」→パスワード：「01」→パスワードを忘れた場合：質問を上位から3個選択し答えに「あ」、「い」、「う」→「次へ」を実施
「管理者（deauxx）」をログアウト
「午前」でログイン
アイコンの作成（確認）
Adobe Creative Cloudで「ログイン」を実施
再起動し「午前」でログインできることを確認
シャットダウンを実施

2021年9月18日（土）

修了式・職業人講話②

2021年9月18日By admin その他 “修了式・職業人講話②”の編集

-本日のアジェンダ-

1限目
職業人講話②
就職に向けての話

2限目
修了式

3限目
修了式

研修メモ

覚書

ポートフォリオ発表方法（新）

名簿順に前に出て発表（PC操作は講師）
発表が終わったら前々の発表者、前の発表者、講師、他にコメントのある人からコメント

ポートフォリオ発表方法（旧）

ファイルサイズの大きい順に前に出て発表（PC操作は講師）
発表が終わったら講師からコメント
他の生徒はコメント記載用紙にコメントを記載
全員の発表が終わったらコメント記載用紙を回収し宛先別に再編集
DropBoxの各人のフォルダにコメントを格納しアナウンス実施

PCクリーン

Crome → 設定（右上） → プライバシーとセキュリティ → パスワード → 保存したパスワード → ・・・から個別に削除
Crome → 設定（右上） → プライバシーとセキュリティ → 閲覧履歴データの削除 → 期間：全期間 → データを削除
Crome → 設定（右上） → ブックマーク → ブックマークマネージャ → ・・・からエクスポート
Crome → 設定（右上） → ブックマーク → ブックマークマネージャ → ブックマークを削除
ffftp → 接続 → 接続情報の削除
エクスプローラ → PC配下のフォルダ（3Dオブジェクト、ダウンロード、デスクトップ、ドキュメント、ピクチャ、ピクチャ、ビデオ、ミュージック） → フィル削除
ゴミ箱 → 開いて内容を確認 → ゴミ箱を空にする
XD → クラウドドキュメント → 削除

PC再設定（次のクラスに向けて）

「午前」でログイン
Adobe Creative Cloudで「ログアウト」を実施
「午前」をログアウト
「管理者（deauxx）」でログイン
「設定」→「アカウント」→「家族とその他のユーザー」→「午前」→「削除」を実施
システム再起動
「管理者（deauxx）」でログイン
「設定」→「アカウント」→「家族とその他のユーザー」→「その他のユーザーをこのPCに追加」→「このユーザーのサインイン情報がありません」→「Microsoft アカウントを持たないユーザーを追加する」→ユーザー名：「午前」→パスワード：「01」→パスワードを忘れた場合：質問を上位から3個選択し答えに「あ」、「い」、「う」→「次へ」を実施
「管理者（deauxx）」をログアウト
「午前」でログイン
アイコンの作成（確認）
Adobe Creative Cloudで「ログイン」を実施
再起動し「午前」でログインできることを確認
シャットダウンを実施

202104開講-昼B-0014

2021年4月20日（火）

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

-本日のアジェンダ-

研修メモ

覚書

2021年4月21日（水）

学科 安全衛生 学科 就職支援

–本日のアジェンダ–

本日のポイント

最初の準備として

ジョブカードについて

参考サイト

履歴書とは？

参考サイト

職務経歴書とは？

参考サイト

自己紹介

他己紹介

ワンポイントアドバイス！

研修メモ

覚書

2021年4月22日（木）

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

-本日アジェンダ-

本日のポイント

文字おこしのポイントについて

参考サイト

参考サイト

研修メモ

覚書

2021年4月24日（土）

WEBプログラミング基礎②

-本日アジェンダ-

本日のポイント

文字おこしのポイントについて

参考サイト

研修メモ

覚書

2021年4月26日（月）

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

-本日アジェンダ-

本日のポイント

コンサルタントとは？

参考サイト

研修メモ

覚書

2021年4月27日（火）

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

-本日アジェンダ-

本日のポイント

見積 とは？

参考サイト

サイトマップ（情報設計）とは？

研修メモ

覚書

2021年4月28日（水）

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

-本日のアジェンダ-

本日テーマ

本日のIllustratorの基本操作

新規作成・開く

保存(ai)・別名で保存（pdf）

参考サイト

ワンポイントアドバイス

アートボード

参考サイト

選択ツール

参考サイト

図形ツール

参考サイト

パスファインダーツール

参考サイト

プロパティパネル

ズームツール

本日の課題

研修メモ

覚書

2021年4月29日（木）

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

学科安全衛生学科就職支援

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

見積とは？

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

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

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