202012開講-昼A-0408

2020年12月21日（月）

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

-本日のアジェンダ-

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

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

2020年12月22日（火）

科 安全衛生 学科 就職支援

–本日のアジェンダ–

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

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

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

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

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

本日のポイント

学習環境について理解しましょう。

最初の準備として

お帰りの前に…

  • USBメモリにデスクトップにあるデータを移動させましょう。（デスクトップは綺麗にしておきましょう。）
  • PCは必ずシャットダウンをして「電源が切れたのを確認してから」モニターを閉じてください。

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

ジョブカードについて

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

参考サイト

ジョブ・カードとは｜ジョブ・

履歴書とは？

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

参考サイト

職務経歴書とは？

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

参考サイト

自己紹介

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

他己紹介

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

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

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

研修メモ

研修資料

2020年12月23日（水）

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

-本日アジェンダ-

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

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

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

4限目
学科 WEBプログラミング基礎①
WEBサイト制作の進め方について

5限目
学科 WEBプログラミング基礎①
WEBサイト制作の進め方について

本日のポイント

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

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

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

ネット検索テクニックの小ネタ

WEBサイトの種類

WEBサイトデザインの参考サイト

研修メモ

覚書

2020年12月24日（木）

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

-本日アジェンダ-

1限目
学科 WEBプログラミング基礎②
Webで使われる技術

2限目
学科 WEBプログラミング基礎②
Webで使われる技術

3限目
学科 WEBプログラミング基礎②
Webサイトの種類について

4限目
学科 WEBプログラミング基礎②
Webサイトの企画

5限目
学科 WEBプログラミング基礎②
Webサイトの企画

本日のポイント

Webサイトを企画していきましょう。

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

ネット検索テクニックの小ネタ

WEBサイトの種類

WEBサイトデザインの参考サイト

研修メモ

研修資料

2020年12月25日（金）

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

-本日のアジェンダ-

1限目
学科 WEBコンサルティング基礎①
企画のリサーチ

2限目
学科 WEBコンサルティング基礎①
企画のリサーチ

3限目
学科 WEBコンサルティング基礎①
企画のライティング

4限目
学科 WEBコンサルティング基礎①
企画のライティング

5限目
学科 WEBコンサルティング基礎①
企画のライティング

本日のテーマ

Webサイトの企画を進めましょう

～ご提案～

WEBサイト制作全般

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

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

サイトマップとは？

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

～素材集め～

無料写真素材のサイト

研修メモ

研修資料

2020年12月26日（土）

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

-本日アジェンダ-

1限目
学科 WEBコンサルティング基礎①
企画のプレゼン

2限目
学科 WEBコンサルティング基礎①
企画のプレゼン

3限目
学科 WEBコンサルティング基礎①
企画のプレゼン

4限目
学科 WEBコンサルティング基礎①
企画のブラッシュアップ

5限目
学科 WEBコンサルティング基礎①
企画のブラッシュアップ

本日のテーマ

Webサイトの企画を発表しましょう

WEB業界のお仕事

研修メモ

覚書

2020年12月28日（月）

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

-本日アジェンダ-

1限目
学科 グラフィックデザイン基礎①
オブジェクトと変形

2限目
学科 グラフィックデザイン基礎①
パスファインダー

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

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

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

本日のテーマ

Illustratorを使ってみましょう。

本日のキーワード

  • 新規作成
  • 保存
  • 別名で保存　>ファイルの種類：PDF >　最小ファイルサイズで保存
  • アートボード
  • オブジェクト
  • 図形ツール（長方形ツール・楕円形ツール・多角形ツール・スターツール・直線ツール）
  • プロパティパネル > 塗り・線
  • 重ね順
  • パスファインダー（合体・前面オブジェクトで型抜き・交差…等）
  • 選択ツール　※黒矢印
  • ダイレクト選択ツール　※白矢印 (アンカー・パス・ハンドル)
  • リフレクトツール
  • 回転ツール＋変形の繰り返し「Ctrl+D」
  • 曲線ツール

研修メモ

覚書

2021年1月4日（月）

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

-本日のアジェンダ-

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

2限目
学科 グラフィックデザイン基礎②
選択とマスク

3限目
学科 グラフィックデザイン基礎②
レイヤーマスク

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

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

本日のテーマ

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

トリミングとは、暗室やコンピュータ上での写真の画像処理において、画面の一部だけを切り出す加工を指す。

 フリー百科事典『ウィキペディア（Wikipedia）』

■写真加工のおススメ操作

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

１．スマートオブジェクト

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

２．レイヤーマスク

「選択」⇒
「レイヤーパネル > レイヤーマスク」⇒
「ブラシツール（本日はクイック選択ツールを使用） 白・黒でマスクを編集 」

■写真素材（練習用）

■無料写真素材のサイト

※利用時する前に、権利を確認（規約を一読）しましょう。

■Photoshop　操作のキーワード

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

研修メモ

研修資料

2021年1月5日（火）

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

本日のアジェンダ

1限目
学科 グラフィックデザイン基礎③
復習

2限目
学科 グラフィックデザイン基礎③
塗りと線

3限目
学科 グラフィックデザイン基礎③
ペンツールと曲線ツール

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

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

本日のテーマ

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

Illustrator操作のキーワード

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

研修メモ

覚書

2021年1月6日（水）

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

本日のアジェンダ

1限目
学科 グラフィックデザイン基礎④
前回の復習

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

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

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

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

本日のテーマ

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

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

 レタッチとは｜ CREATURE INC. BLOG

■Photoshop　操作のキーワード

  • メニュー > 開く
  • メニュー > 保存（psd）
  • メニュー > 書き出し > Web用に保存（jpg）
  • 移動ツール
  • クイック選択ツール（※ 選択の解除は Ctrl+D ）
  • レイヤーパネル
  • スマートオブジェクトに変換
  • スマートオブジェクト ⇔ レイヤーのラスタライズ 【New】
  • レイヤーマスク
  • ブラシツール
  • 自由変形（Ctrl+T）
  • 切り抜きツール【New】
  • 消しゴムツール【New】

レタッチ関連

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

□ 写真素材（練習用）

■無料写真素材のサイト

※利用時する前に、権利を確認（規約を一読）しましょう。

研修メモ

覚書

2021年1月7日（木）

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

-本日のアジェンダ-

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

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

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

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

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

本日のテーマ

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

Illustrator操作のキーワード

  • 新規作成
  • 保存
  • 複製で保存　>ファイルの種類：PDF >　最小ファイルサイズで保存
  • アートボード
  • 配置（テンプレートにチェック）
  • 図形ツール（長方形ツール・楕円形ツール・多角形ツール・スターツール・直線ツール）
  • プロパティパネル > 塗り・線
  • 右クリック>重ね順
  • パスファインダー（合体・前面オブジェクトで型抜き・交差…等）
  • 選択ツール　※黒矢印です
  • ダイレクト選択ツール　※白矢印です （アンカーポイント・パス・ハンドル）
  • アンカーポイントツール
  • 曲線ツール
  • ペンツール
  • ハサミツール
  • リフレクトツール
  • 回転ツール＋変形の繰り返し「Ctrl+D」
  • 右クリック>連結
  • シェイプ形成ツール【New】
  • グループ化・解除
  • レイヤーパネル
  • レイヤーの新規作成・追加・削除、重ね順の変更
  • レイヤーの名称変更
  • レイヤーオプション 【New】 　※サムネイル右クリックです

スポイトツール

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

参考サイト

研修メモ

覚書

2021年1月8日（金）

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

-本日アジェンダ-

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

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

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

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

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

本日のテーマ

色調補正をしてみましょう。

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

  • クイック選択ツール
  • 選択とマスク

□ 参考サイト

□写真素材（練習用）

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

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

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

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

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

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

よくつかう調整レイヤー

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

□ 参考サイト

□写真素材（練習用）

研修メモ

覚書

2021年1月15日（金）

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

本日のアジェンダ

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

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

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

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

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

本日のテーマ

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

Illustrator操作のキーワード

  • 新規作成
  • 保存
  • 複製で保存　>ファイルの種類：PDF >　最小ファイルサイズで保存
  • アートボード
  • 配置（テンプレートのチェック有無）
  • 図形ツール（長方形ツール・楕円形ツール・多角形ツール・スターツール・直線ツール）
  • プロパティパネル > 塗り・線
  • 右クリック>重ね順
  • パスファインダー（合体・前面オブジェクトで型抜き・交差…等）
  • 選択ツール　※黒矢印です
  • ダイレクト選択ツール　※白矢印です （アンカーポイント・パス・ハンドル）
  • アンカーポイントツール
  • 曲線ツール
  • ペンツール
  • ハサミツール
  • リフレクトツール
  • 回転ツール＋変形の繰り返し「Ctrl+D」
  • 右クリック>連結
  • シェイプ形成ツール
  • グループ化・解除
  • レイヤーパネル
  • レイヤーの新規作成・追加・削除、重ね順の変更
  • レイヤーの名称変更 　※レイヤー名称ダブルクリックです
  • レイヤーオプション 　※サムネイルダブルクリックです
  • 文字ツール【New】
  • 文字パネル 【New】
  • 書式のアウトライン 【New】

フォントについて

参考サイト

Typekit（ Adobe Fonts ）

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

参考サイト

研修メモ

覚書

2021年1月16日（土）

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

本日のアジェンダ

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

2限目
学科 グラフィックデザイン基礎⑧
【Illustrator】配置、リンクと埋込

3限目
学科 グラフィックデザイン基礎⑧
【Photoshop】スマートオブジェクト・ ピクセル・シェイプ

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

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

本日のテーマ

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

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

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

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

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

ベクターデータとは？

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

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

リンクと埋込

文字のアウトライン

Illustrator操作のキーワード

  • 新規作成
  • 保存
  • 複製で保存　>ファイルの種類：PDF >　最小ファイルサイズで保存
  • アートボード
  • 配置（テンプレートのチェック有無）
  • 配置（リンクのチェック有無） 【New】
  • 図形ツール（長方形ツール・楕円形ツール・多角形ツール・スターツール・直線ツール）
  • プロパティパネル > 塗り・線
  • 右クリック>重ね順
  • パスファインダー（合体・前面オブジェクトで型抜き・交差…等）
  • 選択ツール　※黒矢印です
  • ダイレクト選択ツール　※白矢印です （アンカーポイント・パス・ハンドル）
  • アンカーポイントツール
  • 曲線ツール
  • ペンツール
  • ハサミツール
  • リフレクトツール
  • 回転ツール＋変形の繰り返し「Ctrl+D」
  • 右クリック>連結
  • シェイプ形成ツール
  • グループ化・解除
  • レイヤーパネル
  • レイヤーの新規作成・追加・削除、重ね順の変更
  • レイヤーの名称変更 　※レイヤー名称ダブルクリックです
  • レイヤーオプション 　※サムネイルダブルクリックです
  • 文字ツール
  • 文字パネル
  • 書式のアウトライン

研修メモ

覚書

2021年1月18日（月）

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

本日のアジェンダ

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

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

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

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

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

本日のテーマ

オリジナルキャラクターを描いてみましょう

パペットワープ

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

参考サイト

線幅ツール

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

参考サイト

課題

Illustratorでオリジナルキャラクターを作成（名前もつけてください）し、喜怒哀楽のバリエーションをもたせてください。
PDF形式で出力してください。
ファイル名：task_〇〇〇〇_yyyymmdd.pdf 　
　　※yyyymmddは本日日付、20210118等
Dropboxの以下の場所にアップロードしてください。
　　提出＞【作品】キャラクターデザイン_20210118

参考サイト

Illustrator操作のキーワード

  • 新規作成
  • 保存
  • 複製で保存　>ファイルの種類：PDF >　最小ファイルサイズで保存
  • アートボード
  • 配置（テンプレートのチェック有無）
  • 配置（リンクのチェック有無）
  • 図形ツール（長方形ツール・楕円形ツール・多角形ツール・スターツール・直線ツール）
  • プロパティパネル > 塗り・線
  • 右クリック>重ね順
  • パスファインダー（合体・前面オブジェクトで型抜き・交差…等）
  • 選択ツール　※黒矢印です
  • ダイレクト選択ツール　※白矢印です （アンカーポイント・パス・ハンドル）
  • アンカーポイントツール
  • 曲線ツール
  • ペンツール
  • ハサミツール
  • リフレクトツール
  • 回転ツール＋変形の繰り返し「Ctrl+D」
  • 右クリック>連結
  • シェイプ形成ツール
  • パペットワープ 【New】
  • 線幅ツール 【New】
  • グループ化・解除
  • レイヤーパネル
  • レイヤーの新規作成・追加・削除、重ね順の変更
  • レイヤーの名称変更 　※レイヤー名称ダブルクリックです
  • レイヤーオプション 　※サムネイルダブルクリックです
  • 文字ツール
  • 文字パネル
  • 書式のアウトライン

研修メモ

覚書

  • キャラクターデザインのPDFを提出

2021年1月19日（火）

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

-本日のアジェンダ-

1限目
学科 グラフィックデザイン基礎⑩
事前準備

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

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

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

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

本日のテーマ

本日は成績考査です。

■成績考査内容

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

研修メモ

研修資料

2021年1月20日（水）

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

本日のアジェンダ

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

2限目
学科 グラフィックデザイン基礎⑪
Photoshopの復習

3限目
学科 グラフィックデザイン基礎⑪
Photoshopのベクトルマスク

4限目
学科 グラフィックデザイン基礎⑪
課題制作（合成写真）

5限目
学科 グラフィックデザイン基礎⑪
課題制作（合成写真）

本日のテーマ

Photoshopのマスクを使いましょう。

【Photoshop】操作のキーワード

  • 移動ツール
  • スマートオブジェクト
  • 自由変形（Ctrl + T）
  • クイック選択ツール
  • レイヤーマスク
  • ブラシツール（白黒）
  • クリッピングマスク
  • 調整レイヤー
  • グループ化 （Ctrl + G） 【New】

【Photoshop】マスクについて

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

【Photoshop】ベクトルマスク

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

 https://ferret-plus.com/3466

【Photoshop】パスパネル

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

 https://saruwakakun.com/design/photoshop/panel

【Photoshop】操作のキーワード

  • ペンツール群
  • パスコンポーネント選択ツール
  • パス選択ツール
  • 長方形ツール、角丸長方形ツール、楕円形ツール…
  • カスタムシェイプツール
  • シェイプ・パス・ピクセル
  • パスパネル
  • ベクトルマスク

□写真素材（練習用）

研修メモ

覚書

2021年1月21日（木）

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

本日のアジェンダ

1限目
学科 グラフィックデザイン基礎⑫
PhotoShopの復習

2限目
学科 グラフィックデザイン基礎⑫
PhotoShop の復習

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

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

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

本日のテーマ

フォトショップの総復習です

【Photoshop】操作のキーワード

  • 移動ツール
  • スマートオブジェクト
  • 自由変形（Ctrl + T）
  • クイック選択ツール
  • 自動選択ツール【New】
  • レイヤーマスク
  • ブラシツール（白黒）
  • クリッピングマスク
  • 調整レイヤー
  • グループ化 （Ctrl + G）

ブラシツール

ブラシのプリセットは、サイズ、シェイプ、硬さなどの特性が定義された保存済みのブラシ先端です。プリセットブラシは、よく使用する特性と共に保存することができます。オプションバーのツールプリセットメニューから選択できるブラシツールのツールプリセットも保存できます。

参考サイト

消しゴムツール

「消しゴムツール」は、消したい場所でカーソルをクリックしたりドラッグしたりして画像の一部を消去することのできるツールです。

参考サイト

研修メモ

覚書

2021年1月22日（金）

学科 DTP基礎

-本日のアジェンダ-

1限目
学科 DTP基礎①
ピクトグラムについて

2限目
学科 DTP基礎①
Illustratorの操作補足

3限目
学科 DTP基礎①
作品制作

4限目
学科 DTP基礎①
作品制作

5限目
学科 DTP基礎①
作品制作

本日のテーマ

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

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

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

参考サイト

課題

Illustratorでピクトグラムを作成（名前もつけてください）してください。
ファイル名：work_〇〇〇〇_yyyymmdd.pdf 　
　　※yyyymmddは本日日付、20210118等
提出場所： Dropbox
　　提出＞【作品】ピクトグラム20210122

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

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

Illustrator操作のキーワード

  • 新規作成
  • 保存
  • 複製で保存　>ファイルの種類：PDF >　最小ファイルサイズで保存
  • アートボード
  • 配置（テンプレートとリンク）
  • 編集メニュー > 環境設定 > 一般、キー入力【New】
  • 長方形ツール・楕円形ツール・多角形ツール・スターツール・直線ツール
  • 変形パネル > 線幅と効果を拡大・縮小 【New】
  • プロパティパネル > アピアランス> 塗り・線
  • 整列パネル【New】
  • （オブジェクト右クリック）>重ね順
  • パスファインダーパネル（合体・前面オブジェクトで型抜き・交差…等）
  • 選択ツール　※黒矢印です
  • ダイレクト選択ツール　※白矢印です （アンカーポイント・パス・ハンドル）
  • アンカーポイントツール
  • 曲線ツール
  • ペンツール
  • ハサミツール
  • リフレクトツール
  • 回転ツール＋変形の繰り返し「Ctrl+D」
  • （オブジェクト右クリック）>連結、単純化
  • シェイプ形成ツール
  • パペットワープ ツール
  • 線幅ツール
  • グループ化 「Ctrl + D」 ・解除 「Ctrl + Shift + D」
  • レイヤーパネル
  • レイヤーの新規作成・追加・削除、重ね順の変更
  • レイヤーの名称変更 　※レイヤー名称ダブルクリックです
  • レイヤーオプション 　※サムネイルダブルクリックです
  • 文字ツール
  • 文字パネル
  • 書式のアウトライン

研修メモ

研修資料

2021年1月25日（月）

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

本日のアジェンダ

1限目
実技 イラストロゴ作成実習①
デザイナーの心得について

2限目
実技 イラストロゴ作成実習①
グラフィックソフトのデータ管理について

3限目
実技 イラストロゴ作成実習①
命名規則について

4限目
実技 イラストロゴ作成実習①
ファイル整理について

5限目
実技 イラストロゴ作成実習①
本日のまとめ

本日のテーマ

グラフィックソフトとの付き合い方について

グラフィックソフトのデータ管理について

企業で働く場合、PCが支給される事がほとんどです。
そんな時に気を付けておくポイントと同僚や上司がどんなところを見ているのか注意しなければならないのか、また面接で技術テストがあった場合、担当者がどんな所を見ているのかについて考えてみましょう。

1．グラフィックソフトのレイヤーについて

IllustratorやPhotoshopを使ってお仕事をしていく場合、一番大事なのは「リテイクに強い」ファイルを作れるかが最も重要になります。
面接での技術テストや、企業に勤めてから担当者や上司・同僚が見ている、見られているのはズバリ！「レイヤー」です。
大切なポイントとして、第3者が見ても解りやすレイヤー管理を気を付けて行ってみましょう。

ポイント！

・レイヤーパネルを常に表示できる状態で作業を行ってみましょう。
・グループ化を上手く利用してみましょう。
・制作時間の区切り毎などに整理をする事を心がけてみましょう。

2．ファイルの管理と整理について

ファイル管理の整備は作業効率を上げるのはもちろん、技術者として信頼や効率的にスキルアップするコツでもあり、様々な職場環境に対応するテクニックでもあります。特に以下の内容に気を付けてみましょう。

ポイント！

・ファイル名の付け方にルールを付けてみましょう
・保存先のルールを考えてみましょう
・PCに負担をかけない方法を徹底しましょう

3.PCの取り扱いと個人情報の取り扱いについて

お勤めになったら、企業からPCが支給されると思います。取り扱いと管理には十分に気を付けましょう。また、昨今はリモートで業務を行わなければならない事も多いです。ご自身でアップデートやネットワーク環境の整備を行っていく事も必要になるでしょう。正しい知識と調べ方と確認方法を確認しておきましょう。

ポイント！

・アップデートはこまめに確認しスケジュール確認しておきましょう。
・ネットワーク、インターネット環境を理解しておきましょう。
・会社環境でのPC環境のルールを把握しておきましょう。

研修メモ

研修資料

2021年1月27日（水）

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

本日のアジェンダ

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

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

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

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

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

本日のテーマ

ロゴを作ってみましょう

■ロゴとは

■ロゴ制作のアイデア出し

  • どんなサービスか
  • シンボル（絵）・ロゴタイプ （文字） の有無
  • シンボルのモチーフは何か※手書きオススメ
  • コンセプト ※ 自分の言葉でまとめて保存しておこう

参考：maoma_manual_20210127.pdf

■ロゴ提案※1/28予定

スマイルシナジー株式会社 ｜ ロゴデザイン・作成
ロゴデザインのご提案資料
※『ロゴ提案』等で検索

課題

Illustratorで、ご自身の企画のロゴを作成し提案してください。 明日(1/27)の3限目終了までの提出とします。
提出場所： Dropbox
　　提出＞【作品】ロゴ_20210128
ファイル名：work_〇〇〇〇 _20210128.pdf

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

Illustrator操作のキーワード

  • 新規作成
  • 保存
  • 複製で保存　>ファイルの種類：PDF >　最小ファイルサイズで保存
  • アートボード
  • 配置（テンプレートとリンク）
  • 編集メニュー > 環境設定 > 一般、キー入力【New】
  • 長方形ツール・楕円形ツール・多角形ツール・スターツール・直線ツール
  • 変形パネル > 線幅と効果を拡大・縮小 【New】
  • プロパティパネル > アピアランス> 塗り・線
  • 整列パネル
  • （オブジェクト右クリック）>重ね順
  • パスファインダーパネル（合体・前面オブジェクトで型抜き・交差…等）
  • 効果（ワープ） 【New】
  • アピアランスの分割 【New】 
  • 選択ツール　※黒矢印です
  • ダイレクト選択ツール　※白矢印です （アンカーポイント・パス・ハンドル）
  • アンカーポイントツール
  • 曲線ツール
  • ペンツール
  • ハサミツール
  • リフレクトツール
  • 回転ツール＋変形の繰り返し「Ctrl+D」
  • （オブジェクト右クリック）>連結、単純化
  • シェイプ形成ツール
  • パペットワープ ツール
  • 線幅ツール
  • グループ化 「Ctrl + D」 ・解除 「Ctrl + Shift + D」
  • レイヤーパネル
  • レイヤーの新規作成・追加・削除、重ね順の変更
  • レイヤーの名称変更 　※レイヤー名称ダブルクリックです
  • レイヤーオプション 　※サムネイルダブルクリックです
  • 文字ツール
  • 文字パネル
  • パス上文字ツール 【New】 
  • 書式のアウトライン

研修メモ

研修資料

2021年1月28日（木）

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

本日のアジェンダ

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

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

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

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

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

本日のテーマ

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

■ロゴとは

■ロゴ制作のアイデア出し

  • どんなサービスか
  • シンボル（絵）・ロゴタイプ （文字） の有無
  • シンボルのモチーフは何か※手書きオススメ
  • コンセプト ※ 自分の言葉でまとめて保存しておこう

参考：maoma_manual_20210127.pdf

■ロゴ提案

バリエーションを増やしましょう。

ロゴストック｜ロゴマークのデザインギャラリー
ロゴをつくる前の基礎知識！ロゴの構成要素とスタイルの分類を抑える
スマイルシナジー株式会社 ｜ ロゴデザイン・作成
ロゴデザインのご提案資料
※『ロゴ提案』等で検索

課題

Illustratorで、ご自身の企画のロゴを作成し提案してください。
今日(1/28)の3限目終了までの提出とします。
提出場所： Dropbox
　　提出＞【作品】ロゴ_20210128
ファイル名：work_〇〇〇〇 _20210128.pdf

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

Illustrator操作のキーワード

  • 新規作成
  • 保存
  • 複製で保存　>ファイルの種類：PDF >　最小ファイルサイズで保存
  • アートボード
  • 配置（テンプレートとリンク）
  • 編集メニュー > 環境設定 > 一般、キー入力
  • 長方形ツール・楕円形ツール・多角形ツール・スターツール・直線ツール
  • 変形パネル > 線幅と効果を拡大・縮小
  • プロパティパネル > アピアランス> 塗り・線
  • 整列パネル
  • （オブジェクト右クリック）>重ね順
  • パスファインダーパネル（合体・前面オブジェクトで型抜き・交差…等）
  • 効果（ワープ）
  • アピアランスの分割
  • 選択ツール　※黒矢印です
  • ダイレクト選択ツール　※白矢印です （アンカーポイント・パス・ハンドル）
  • アンカーポイントツール
  • 曲線ツール
  • ペンツール
  • ハサミツール
  • リフレクトツール
  • 回転ツール＋変形の繰り返し「Ctrl+D」
  • （オブジェクト右クリック）>連結、単純化
  • シェイプ形成ツール
  • パペットワープ ツール
  • 線幅ツール
  • グループ化 「Ctrl + D」 ・解除 「Ctrl + Shift + D」
  • レイヤーパネル
  • レイヤーの新規作成・追加・削除、重ね順の変更
  • レイヤーの名称変更 　※レイヤー名称ダブルクリックです
  • レイヤーオプション 　※サムネイルダブルクリックです
  • 文字ツール
  • 文字パネル
  • パス上文字ツール
  • 書式のアウトライン

研修メモ

覚書

2021年1月29日（金）

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

-本日のアジェンダ-

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

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

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

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

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

本日のテーマ

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

課題

Illustratorで、アクセスマップを作成し提案してください。（A4のpdfです。）
今日(1/28)の5限目終了までの提出とします。
提出場所： Dropbox
　　提出＞【作品】アクセスマップ_20210129
ファイル名：work_〇〇〇〇 _20210129.pdf

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

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

■デザインについて

■データ受け渡しの注意点※2/1予定

Illustrator操作について

■ アピアランス

■ クリッピングマスク

操作のキーワード

  • 新規作成
  • 保存
  • 複製で保存　>ファイルの種類：PDF >　最小ファイルサイズで保存
  • アートボード
  • 配置（テンプレートとリンク）
  • 編集メニュー > 環境設定 > 一般、キー入力
  • 長方形ツール・楕円形ツール・多角形ツール・スターツール・直線ツール
  • 変形パネル > 線幅と効果を拡大・縮小
  • プロパティパネル > アピアランス> 塗り・線
  • 整列パネル
  • （オブジェクト右クリック）>重ね順
  • パスファインダーパネル（合体・前面オブジェクトで型抜き・交差…等）
  • 効果（ワープ）
  • アピアランスパネル【New】
  • アピアランスの分割
  • 選択ツール　※黒矢印です
  • ダイレクト選択ツール　※白矢印です （アンカーポイント・パス・ハンドル）
  • アンカーポイントツール
  • 曲線ツール
  • ペンツール
  • ハサミツール
  • リフレクトツール
  • 回転ツール＋変形の繰り返し「Ctrl+D」
  • （オブジェクト右クリック）>連結、単純化
  • シェイプ形成ツール
  • パペットワープ ツール
  • 線幅ツール
  • グループ化 「Ctrl + D」 ・解除 「Ctrl + Shift + D」
  • レイヤーパネル
  • レイヤーの新規作成・追加・削除、重ね順の変更
  • レイヤーの名称変更 　※レイヤー名称ダブルクリックです
  • レイヤーオプション 　※サムネイルダブルクリックです
  • レイヤーの クリッピングマスク 【New】　
  • 文字ツール
  • 文字パネル
  • パス上文字ツール
  • 書式のアウトライン

研修メモ

研修資料

2021年2月1日（月）

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

-本日のアジェンダ-

1限目
実技 イラストロゴ作成実習⑤
発表会

2限目
実技 イラストロゴ作成実習⑤
配色について

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

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

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

本日のテーマ

アクセスマップを”提案”してみましょう。

課題

Illustratorで、アクセスマップを2つ以上作成し提案してください。（A4のpdfです。）
今日(2/1)の5限目終了までの提出とします。
提出場所： Dropbox
　　提出＞【作品】アクセスマップ_20210201
ファイル名：work_〇〇〇〇 _20210201.pdf

バリエーション違いのヒント:
２つMAPのコンセプトをはっきりさせてみよう。
　・かわいい vs かっこいい…
　・20代女性向け vs 全ての年代・性別向け…
　・国内向け vs 訪日ゲスト向け…
　・自分の初回制作版 vs 改善後…
　・チラシやWebサイトのイメージから逆算…
※『アクセスマップ　〇〇〇』で画像検索するのもアリです。
〇〇〇は、『街歩き』『美容院』 『カフェ』等

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

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

■ 配色デザイン

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

参考サイト

■ ILLUSTRATOR操作のキーワード 

操作ポイントの補足

  • 新規作成
  • 保存
  • 複製で保存　>ファイルの種類：PDF >　最小ファイルサイズで保存
  • アートボード
  • 配置（テンプレートとリンク）
  • 編集メニュー > 環境設定 > 一般、キー入力
  • 長方形ツール・楕円形ツール・多角形ツール・スターツール・直線ツール
  • 変形パネル > 線幅と効果を拡大・縮小
  • プロパティパネル > アピアランス> 塗り・線
  • 整列パネル
  • （オブジェクト右クリック）>重ね順
  • パスファインダーパネル（合体・前面オブジェクトで型抜き・交差…等）
  • 効果（ワープ）
  • アピアランスパネル【New】
  • アピアランスの分割
  • 選択ツール　※黒矢印です
  • ダイレクト選択ツール　※白矢印です （アンカーポイント・パス・ハンドル）
  • アンカーポイントツール
  • 曲線ツール
  • ペンツール
  • ハサミツール
  • リフレクトツール
  • 回転ツール＋変形の繰り返し「Ctrl+D」
  • （オブジェクト右クリック）>連結、単純化
  • シェイプ形成ツール
  • パペットワープ ツール
  • 線幅ツール
  • グループ化 「Ctrl + D」 ・解除 「Ctrl + Shift + D」
  • レイヤーパネル
  • レイヤーの新規作成・追加・削除、重ね順の変更
  • レイヤーの名称変更 　※レイヤー名称ダブルクリックです
  • レイヤーオプション 　※サムネイルダブルクリックです
  • レイヤーの クリッピングマスク 【New】　
  • 文字ツール
  • 文字パネル
  • パス上文字ツール
  • 書式のアウトライン

■ aiデータの入稿用時の注意点

研修メモ

覚書

2021年2月2日（火）

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

-本日のアジェンダ-

1限目
実技 イラストロゴ作成実習⑥
名刺作成の下準備

2限目
実技 イラストロゴ作成実習⑥
文字組について

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

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

5限目
実技 イラストロゴ作成実習⑥
作品制作

本日のテーマ

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

課題

Illustratorで、名刺の縦・横を作成してください。（A4のpdfで提出す。）
今日(2/2)の5限目終了までの提出とします。
提出場所： Dropbox
　　提出＞【作品】名刺_20210202
ファイル名：work_〇〇〇〇 _20210202.pdf
※ 個人情報は提出しないでください！！！

名刺に必要な情報（例）

利用シーンに応じて、必要な項目を取捨選択して、グルーピングしてみましょう。
・氏名
・氏名欧文表記
・氏名ふりがな
・ロゴ
・屋号・会社名（部署名）
・会社のキャッチフレーズ
・役職・肩書き
・住所
・電話番号
・FAX
・メールアドレス
・SNS(Twitter、Instagram)
・WEBサイトURL
・WEBサイトバーコード
・顔写真、似顔絵
・仕事内容
・営業時間や定休日
等

■ 名刺の制作について

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

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

■ ILLUSTRATOR操作のキーワード 

操作ポイント（ガイドとトリムマーク）

操作ポイント（レイヤーのクリッピングマスク）

文字パネル

字形パネル 

  • 新規作成
  • 保存
  • 複製で保存　>ファイルの種類：PDF >　最小ファイルサイズで保存
  • アートボード
  • 配置（テンプレートとリンク）
  • 編集メニュー > 環境設定 > 一般、キー入力
  • 長方形ツール・楕円形ツール・多角形ツール・スターツール・直線ツール
  • 変形パネル > 線幅と効果を拡大・縮小
  • プロパティパネル > アピアランス> 塗り・線
  • 整列パネル
  • （オブジェクト右クリック）>重ね順
  • パスファインダーパネル（合体・前面オブジェクトで型抜き・交差…等）
  • 効果（ワープ）
  • アピアランスパネル
  • アピアランスの分割
  • 選択ツール　※黒矢印です
  • ダイレクト選択ツール　※白矢印です （アンカーポイント・パス・ハンドル）
  • アンカーポイントツール
  • 曲線ツール
  • ペンツール
  • ハサミツール
  • リフレクトツール
  • 回転ツール＋変形の繰り返し「Ctrl+D」
  • （オブジェクト右クリック）>連結、単純化
  • シェイプ形成ツール
  • パペットワープ ツール
  • 線幅ツール
  • グループ化 「Ctrl + D」 ・解除 「Ctrl + Shift + D」
  • レイヤーパネル
  • レイヤーの新規作成・追加・削除、重ね順の変更
  • レイヤーの名称変更 　※レイヤー名称ダブルクリックです
  • レイヤーオプション 　※サムネイルダブルクリックです
  • （レイヤーの）クリッピングマスク 【New】
  • 文字ツール
  • 文字パネル
  • パス上文字ツール
  • 書式のアウトライン

研修メモ

研修資料

2021年2月3日（水）

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

-本日のアジェンダ-

1限目
実技 写真合成・補正加工実習①
発表会

2限目
実技 写真合成・補正加工実習①
画像解像度について

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

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

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

本日のテーマ

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

課題

Illustratorで、DMを作成してください。（A4のpdfで提出です。）
今日(2/3)の5限目終了までの提出とします。
提出場所： Dropbox
　　提出＞【作品】名刺_20210203
ファイル名：work_〇〇〇〇 _20210203.pdf

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

EPSとは？

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

CMYKとRGB 

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

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

参考サイト

画像解像度について

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

DM制作のレシピ

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

１．企画を決める。
どんなシーンで利用されるハガキか
例：
・リピートのお客様に向けてキャンペーンをお知らせする。
・来店したお客様へ、近隣に店舗をOPENしたことを案内する
・ワークショップや個展をお知らせする

２．掲載する情報を整理する。
　店名・ロゴ・キャッチコピー・オープン日・
　店内写真・サービスや商品の写真…
※主題となる項目が何か考えよう

３．Illustratorでデザインを作る
（写真が入るところをグレーにしておく）
写真と文字のレイアウト、に注意しながらレイアウトしてみましょう。

４．下準備：Photoshopで写真の画像補正をする
レタッチ、合成、色調補正　等で整える
RGB→CMYK・・・イメージ＞モード
画像解像度を印刷用（300dpi～）・・・イメージ＞画像解像度
※アップサンプル(72dpi→ 300dpi )の場合、再サンプルにチェック

５．PhotoshopのpsdデータをIllustratorに配置
配置（リンク）をしながらイラストレーター側で確認する。
入稿時、 配置 （埋込み）指定かどうかを確認する。

６．IllustratorをPDFで保存し提出

参考サイト

研修メモ

研修資料

2021年2月4日（木）

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

-本日のアジェンダ-

1限目
実技 写真合成・補正加工実習②
企画の整理と要素の優先順位付け

2限目
実技 写真合成・補正加工実習②
DMのブラッシュアップ

3限目
実技 写真合成・補正加工実習②
DMのブラッシュアップ

4限目
実技 写真合成・補正加工実習②
チラシの制作について

5限目
実技 写真合成・補正加工実習②
チラシの掲載情報の整理

本日のテーマ

印刷物に掲載する情報を考えましょう。

課題

DMを Illustratorで 作成してください。（pdfで提出です。）
①企画の整理　②要素の優先付けをしてみましょう
今日(2/4)の３限目終了までの提出とします。
提出場所： Dropbox
　　提出＞【作品】DM_20210204
ファイル名：work_〇〇〇〇 _20210204.pdf

DM作成の時に、デザイン要素（ 配色・文字・余白・写真・レイアウト）で悩んだ方へ…

まずは、１．企画の整理　２．要素の優先順位付けをしてみよう！！！！

その上で…

■文字を活かしやすい 写真素材について考えてみよう（写真素材の調達は、中々難しいです）。
　練習素材：
　写真ページはこちら
　※pass

■小技集
　・プロ直伝！Illustrator（イラレ）で写真の上の文字を読みやすくする6つのテクニック
　・写真背景の上に文字をのせた際、文字を見やすくする方法
　・写真に重ねた文字を見やすくデザインする9つのコツ
　※『写真 文字 イラレ』『イラストレーター 写真の上に文字』等で検索

課題

Illustratorで、チラシ（フライヤー）を作成してください。
pdfで提出です。
5限目修了時までに提出です。

スケジュールと提出場所：
Dropbox
　【作品】フライヤー（デザインカンプ）_20210205
　【作品】フライヤー（中間報告）_20210208
　【作品】フライヤー（最終稿）_20210209

ファイル名：
　 work_〇〇〇〇 _yyyymmdd.pdf

チラシ制作の流れ

参考サイト

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

レイアウトデザイン

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

研修メモ

研修資料

2021年2月5日（金）

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

-本日のアジェンダ-

1限目
実技 写真合成・補正加工実習③
企画の整理と要素の優先順位付け

2限目
実技 写真合成・補正加工実習③
DMのブラッシュアップ

3限目
実技 写真合成・補正加工実習③
作品制作（デザインカンプ）

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

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

本日のテーマ

A4両面チラシをつくりましょう。

課題

Illustratorで、チラシ（フライヤー）を作成してください。
pdfで提出です。
5限目修了時までに提出です。

スケジュールと提出場所：
Dropbox
　【作品】フライヤー（デザインカンプ）_20210205
　【作品】フライヤー（中間報告）_20210208
　【作品】フライヤー（最終稿）_20210209

ファイル名：
　 work_〇〇〇〇 _yyyymmdd.pdf

チラシ制作の流れ

参考サイト

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

・チラシ・フライヤーの無料デザインテンプレート一覧
・チラシのデザインテンプレートで初心者もプロの仕上がり！
　※『チラシ デザインテンプレート』等で検索

レイアウトデザイン

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

文字

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

研修メモ

覚書

  • フライヤーのデザインカンプを提出

2021年2月8日（月）

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

-本日のアジェンダ-

1限目
実技 写真合成・補正加工実習④
写真素材について

2限目
実技 写真合成・補正加工実習④
文字の表現について

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

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

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

本日のテーマ

デザインカンプを元にチラシを制作しましょう。

課題

Illustratorで、チラシ（フライヤー）を作成してください。
pdfで提出です。
5限目修了時までに提出です。
スケジュールと提出場所：
Dropbox
　【作品】フライヤー（デザインカンプ）_20210205
　【作品】フライヤー（中間報告）_20210208
　【作品】フライヤー（最終稿）_20210209

ファイル名：
　 work_〇〇〇〇 _yyyymmdd.pdf

チラシ制作の流れ

参考サイト

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

・チラシ・フライヤーの無料デザインテンプレート一覧
・チラシのデザインテンプレートで初心者もプロの仕上がり！
　※『チラシ デザインテンプレート』等で検索

写真素材について

利用時には権利を確認（規約を一読）しましょう。

フリー素材（例）
・【2019年版】フリー写真素材のおすすめサイト完全まとめ58選【商用利用無料】
・無料の写真素材はフリー素材のぱくたそ
・食材・料理や野菜・果物のフリー写真素材 無料画像のフード・フォト

有料の素材（例）
・画像・写真・ベクター画像・動画・音楽素材 | Shutterstock
・写真素材・ストックフォト | 日本最大級の画像素材サイト – PIXTA

レイアウトデザイン

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

文字デザイン

長い文章を書くとき、文字が小さければ読みにくいのは当たり前です。なるべく文字を大きくすることは、ユニバーサルデザインのために欠かすことができません。とはいえ、読みやすい書体を選んで、大きな文字で書けば、必ず読みやすい文章ができるわけでもありません。ちょっとしたレイアウトや文字の使い方によって、読みやすくも読みにくくもなります。

・プロ直伝！Illustrator（イラレ）で写真の上の文字を読みやすくする6つのテクニック
・写真背景の上に文字をのせた際、文字を見やすくする方法
・写真に重ねた文字を見やすくデザインする9つのコツ
　※『写真 文字 イラレ』『イラストレーター 写真の上に文字』等で検索

ADOBE FONTSについて

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

・ Illustrator ヘルプ | フォントとタイポグラフィ

研修メモ

覚書

  • フライヤーの中間提出

2021年2月9日（火）

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

-本日のアジェンダ-

1限目
実技 写真合成・補正加工実習⑤
グラデーションパネル

2限目
実技 写真合成・補正加工実習⑤
文字のアウトライン

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

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

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

本日のテーマ

チラシを仕上げましょう。

課題

Illustratorで、チラシ（フライヤー）を作成してください。
pdfで提出です。
5限目修了時までに提出です。
スケジュールと提出場所：
Dropbox
　【作品】フライヤー（デザインカンプ）_20210205
　【作品】フライヤー（中間報告）_20210208
　【作品】フライヤー（最終稿）_20210209

ファイル名：
　 work_〇〇〇〇 _yyyymmdd.pdf

チラシ制作の流れ

参考サイト

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

・チラシ・フライヤーの無料デザインテンプレート一覧
・チラシのデザインテンプレートで初心者もプロの仕上がり！
　※『チラシ デザインテンプレート』等で検索

写真素材について

利用時には権利を確認（規約を一読）しましょう。

フリー素材（例）
・【2019年版】フリー写真素材のおすすめサイト完全まとめ58選【商用利用無料】
・無料の写真素材はフリー素材のぱくたそ
・食材・料理や野菜・果物のフリー写真素材 無料画像のフード・フォト

有料の素材（例）
・画像・写真・ベクター画像・動画・音楽素材 | Shutterstock
・写真素材・ストックフォト | 日本最大級の画像素材サイト – PIXTA

レイアウトデザイン

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

文字デザイン

長い文章を書くとき、文字が小さければ読みにくいのは当たり前です。なるべく文字を大きくすることは、ユニバーサルデザインのために欠かすことができません。とはいえ、読みやすい書体を選んで、大きな文字で書けば、必ず読みやすい文章ができるわけでもありません。ちょっとしたレイアウトや文字の使い方によって、読みやすくも読みにくくもなります。

デザインに関すること：
・文章 – 伝わるデザイン
・デザイン初心者向け！やりがちなダサいデザインを手っ取り早く回避するチェックポイント

写真と文字の関係：
・プロ直伝！Illustrator（イラレ）で写真の上の文字を読みやすくする6つのテクニック
・写真背景の上に文字をのせた際、文字を見やすくする方法
・写真に重ねた文字を見やすくデザインする9つのコツ
　※『写真 文字 イラレ』『イラストレーター 写真の上に文字』等で検索

ADOBE FONTSについて

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

Illustrator操作の補足

グラデーション

・【Illustrator・基礎】グラデーションツール３種の違い
・だんだん透明になっていく画像を作りたい！～Illustrator編～
　※『イラレ　半透明』等で検索
・グラデーションガイド、グラデーションスライダーが出ない
　※グラデーションスライダーの出し方を忘れるときがあります。

アピアランス（効果）

・Illustrator（イラストレーター）で文字にボカシの入った白フチを付ける一番カンタンな方法
　※『イラレ　文字　ぼかし』等で検索

研修メモ

覚書

  • フライヤーの最終提出

2021年2月10日（水）

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

-本日のアジェンダ-

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

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

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

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

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

本日のテーマ

本日は成績考査です

■成績考査内容

ドロップボックスにある「grade-check_○○○○_20210210.ai」に
これまでに作成した作品を添付し、PDF形式で提出してください。
※ファイルの「 ○○○○ 」はご自身の名前に変えて提出して下さい。
5限目終了15分前（14時45分）までに、ドロップボックス「【0408】第２回成績考査」のフォルダに提出してください。

研修メモ

研修資料

2021年2月11日（木）

学科 ECサイト運用基礎①

-本日のアジェンダ-

1限目
学科 ECサイト運用基礎①
Illustratorのまとめ

2限目
学科 ECサイト運用基礎①
Illustratorのまとめ

3限目
学科 ECサイト運用基礎①
Illustratorのまとめ

4限目
学科 ECサイト運用基礎①
作品制作

5限目
学科 ECサイト運用基礎①
作品制作

本日のテーマ

総復習をしましょう。

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

入稿の注意点

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

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

参考サイト

研修メモ

覚書

2021年2月12日（金）

学科 ECサイト運用基礎②

-本日のアジェンダ-

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

2限目
学科 ECサイト運用基礎②
バナーとは

3限目
学科 ECサイト運用基礎②
Photoshopの調整レイヤー

4限目
学科 ECサイト運用基礎②
作品制作

5限目
学科 ECサイト運用基礎②
作品制作

本日のテーマ

バナーについて学びましょう

ECサイトとは？

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

参考サイト

広告宣伝費について

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

バナーとは？

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

Photoshopの操作

  • （横書き・縦書き）文字ツール
  • 長方形ツール
  • 整列ツール
  • ガイド
  • レイヤースタイル（境界線・ カラーオーバーレイ・ 光彩（外側） ）【New】

Photoshopでバナーを作成し、jpeg形式で提出してください。
5限目修了時までに提出です。
提出場所（ Dropbox ）：
　【作品】バナー①_20210212
ファイル名：
　 work_〇〇〇〇 _yyyymmdd-1.jpg
　work_〇〇〇〇 _yyyymmdd-2.jpg
　…

【お題】バレンタインバナー
サイズ：横： 750px × 縦： 375 px
リンク先：バレンタイン用の特集ページ
文言：2021　バレンタイン特集　St. Valentine’s Day 　2.14　

研修メモ

覚書

  • バレンターンデーバナーを提出

作品例

2021年2月15日（月）

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

-本日のアジェンダ-

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

2限目
学科 ECサイトデザイン基礎①
デザインについて

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

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

5限目
学科 ECサイトデザイン基礎①
講評

本日のテーマ

デザインをフェイクしましょう

コロンブスの卵

コロンブスの卵（コロンブスのたまご、英語: Egg of Columbus または Columbus’ egg、イタリア語: Uovo di Colombo [ˈwɔːvo di koˈlombo]）とは、どんなに素晴らしいアイデアや発見も、ひとたび衆目に触れた後には非常に単純あるいは簡単に見えることを指す成句である。少なくとも15世紀から使われてきた表現であるが、その語源とされる逸話についてはいささか疑念が持たれている。その逸話とは、ある席で「誰でも西へ航海すればアメリカ大陸に行き当たるのだから、アメリカ大陸の発見は大した業績ではない」と言われたコロンブスは、相手に卵を立ててみよと応じた。相手が諦めると、コロンブスはテーブルに卵の先端を打ち付けて平らにすることで立ててみせた、というものである。

ECサイトとは？

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

参考サイト

広告宣伝費について

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

バナーとは？

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

レイヤースタイル（Ps）について

レイヤーに対して手軽に様々な表現が可能になる必須テクニックです。

マスクについて

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

参考サイト

Retina対応について

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

研修メモ

作品例

2021年2月16日（火）

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

-本日のアジェンダ-

1限目
学科 ECサイトデザイン基礎②
ECサイトのファッション系バナー

2限目
学科 ECサイトデザイン基礎②
レイヤースタイルについて

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

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

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

本日のテーマ

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

本日の課題１

ドロップボックスにある『見本の素材』をダウンロードし、模写したバナーをJPEG形式（低画質）で提出してください。
サイズ：350px × 350px（正方形）
提出先：【作品】バナー③_20210216-1
ファイル名： work _〇〇〇〇_ 20210216-1.jpg
※ 『見本の素材』は、上記フォルダに格納しています。

本日の課題２

・お題：ECサイトに掲載するファッション系バナーを作成
・”楽天ランキング2020″ に表示されているバナーデザイン（レイアウト・配色）を参考につくりましょう。
　楽天市場トップ > 楽天年間ランキング2020 > レディースファッション
　楽天市場トップ > 楽天年間ランキング2020 > メンズファッション
・リンク先：各商品購入ページ（写真画像を取得しましょう）
・提出先：【作品】バナー③_20210216-2
・ 5限目修了時に提出

■提出ファイル
デザインを参考にするバナー：
work _〇〇〇〇_ 20210216-2-before.jpg （またはpng）
作成したバナー：
work _〇〇〇〇_ 20210216-2-after.jpg

Photoshopの操作

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

画像取得時の留意点

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

拡張子「WebP（ウェッピー）」のファイルをJPEGやPNGなどに変換する方法
WEBP JPG 変換 – 画像ファイルをオンラインで変換する
WEBPをJPGに変換

研修メモ

研修資料

2021年2月17日（水）

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

-本日のアジェンダ-

1限目
学科 ECサイトデザイン基礎②
ECサイトのファッション系バナー

2限目
学科 ECサイトデザイン基礎②
レイヤースタイルについて

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

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

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

本日のテーマ

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

本日の課題１

ドロップボックスにある『見本の素材』をダウンロードし、模写したバナーをJPEG形式（低画質）で提出してください。
サイズ：350px × 350px（正方形）
提出先：【作品】バナー③_20210216-1
ファイル名： work _〇〇〇〇_ 20210216-1.jpg
※ 『見本の素材』は、上記フォルダに格納しています。

本日の課題２

・お題：ECサイトに掲載するファッション系バナーを作成
・”楽天ランキング2020″ に表示されているバナーデザイン（レイアウト・配色）を参考につくりましょう。
　楽天市場トップ > 楽天年間ランキング2020 > レディースファッション
　楽天市場トップ > 楽天年間ランキング2020 > メンズファッション
・リンク先：各商品購入ページ（写真画像を取得しましょう）
・提出先：【作品】バナー③_20210216-2
・ 5限目修了時に提出

■提出ファイル
デザインを参考にするバナー：
work _〇〇〇〇_ 20210216-2-before.jpg （またはpng）
作成したバナー：
work _〇〇〇〇_ 20210216-2-after.jpg

Photoshopの操作

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

画像取得時の留意点

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

拡張子「WebP（ウェッピー）」のファイルをJPEGやPNGなどに変換する方法
WEBP JPG 変換 – 画像ファイルをオンラインで変換する
WEBPをJPGに変換

研修メモ

作品例

2021年2月18日（木）

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

-本日のアジェンダ-

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

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

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

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

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

本日のテーマ

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

本日の課題

・お題：贈答品（食品）。
　楽天トップ＞ジャンル（食品・スイーツ）＞スイーツ・お菓子
・リンク先：実在する商品購入ページ（楽天以外でも良いです。写真画像はリンク先ページから取得しましょう）
・ サイズは不問です。
・ 2商品以上作りましょう。
・提出先：【作品】バナー⑤_20210218
・ 作成したバナーのファイル名： work_〇〇〇〇_20210218_1.jpg
　※ 〇〇〇〇はお名前です。
　※複数作成するので末尾に数値を付けてください。

画像取得時の留意点

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

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

Photoshopの操作

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

練習用素材

参考サイト

バナー集

研修メモ

作品例

2021年2月19日（金）

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

-本日のアジェンダ-

1限目
実技　ECサイトデザイン実習②
リサイズについて

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

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

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

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

本日のテーマ

サイズ違いで作ってみましょう

・国際規格バナーサイズ
・【2021年最新】GDN・YDNバナーサイズ一覧

本日の課題

・お題：贈答品（食品）。
　楽天トップ＞ジャンル（食品・スイーツ）＞スイーツ・お菓子
・リンク先：実在する商品購入ページ（楽天以外でも良いです。写真画像はリンク先ページから取得しましょう）
・ サイズは不問です。
・ work_〇〇〇〇_20210219.psdのサイズに作成しましょう。
・提出先：【作品】バナー⑥_20210219
・ 作成したバナーのファイル名： work_〇〇〇〇_20210219.jpg
　※ 〇〇〇〇はお名前です。

参考サイト

バナー集

『バナー集』で検索しましょう。
・バナーデザイン専門ギャラリーサイト
・イラストバナーデザインまとめサイト
・イケてるバナーをデザインするための「3つの秘訣」
・Pinterest　※アカウント登録が必要（学校の環境で閲覧しないでください）

研修メモ

覚書

2021年2月22日（月）

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

-本日のアジェンダ-

1限目
実技 ECサイトデザイン実習③
バナーの確認について

2限目
実技 ECサイトデザイン実習③
バナーの元データについて

3限目
実技 ECサイトデザイン実習③
バナーの納品方法について

4限目
実技 ECサイトデザイン実習③
ポートフォリオサイトでバナーの見せ方について

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

本日のテーマ

確認と納品

バナー制作の進め方

バナーとは？

バナー (banner) はウェブページ上で他のウェブサイトを紹介する役割をもつ画像（アイコンの一種）のこと。 主に広告・宣伝用に作られ、ウェブサイトへのハイパーリンク用にも利用される。 画像にはリンクを張り、クリックするとそのバナーが紹介するサイトを表示するようになっている。 横長帯状のものが一般的だが、近年は縦長のものや正方形に近いものも多い。

制作工程

  1. 作品全体の要素確認をする
  2. 文言内容の構図（レイアウト）決める
  3. 画像素材の補正・調整
  4. 画像当て込み文字の読みやすさの調整
  5. 全体のバランスを整える

【ポイント】
リテイク（修正や出戻り）に強いデータにしておくこと
レイヤーパネルの整理整頓
2パターン以上のパターンのアイデアを持つこと

1.作品全体の要素確認をする

作品作りを円滑に行う最大のコツは、最初に要件定義をしっかりまとめる事かと思います。「掲載箇所」「サイズ」「文言」「画像」「使用頻度」等をしっかり初期段階で確認しておきましょう。

必要な技術と知識の例として
  • 「カンバスサイズ」
  • 「画像解像度」
  • 「CMYKとRGB」

2.文言内容の構図（レイアウト）決める

内容が固まったら、構図（レイアウト）を考えましょう。この工程では見せる順番を決める事、まずは色を使わず骨組みだけにして、構図を考えてみましょう。

必要な技術と知識の例として
  • 「文字パネル」「段落パネル」
  • 「定規」「ガイド」
  • 「移動ツール」
  • 「レイヤーパネル」

3.画像素材の補正・調整

画像の補正とサイズ調整を行いましょう。大事なことは3つ
「レタッチ」「色調補正」「トリミング」をしっかり行いましょう。
また、バナー制作時間を左右するのはココです！効率の良い作業を行うためには、この工程の工夫と予測をしておきましょう。

必要な技術と知識の例として
  • 「レタッチ」
    • パッチツール・ 切り抜きツール・コピースタンプツール・スポット修復ブラシツール・ 修復ブラシツール・コンテンツに応じた移動ツール・ぼかしツール・シャープツール・指先ツール・覆い焼きツール・焼き込みツール
  • 「色調補正」
    • 明るさ・コントラスト・レベル補正・トーンカーブ・色相・彩度・カラーバランス・白黒
  • 「 トリミング」
    • 長方形選択ツール・楕円形選択ツール・なげなわツール・多角形選択ツール・マグネット選択ツール・自動選択ツール・クイック選択ツール
  • 「マスク」
    • クリッピングマスク・レイヤーマスク・ベクトルマスク・クイックマスクモード
  • 「アンシャープマスク」

4.画像当て込み文字の読みやすさの調整

画像と文字が同じ作品に収める工程です。気を付ける事は
「文字の読みやすさ」と「世界観の維持」です。
文字は読めなくては目的が達成できなくなり、作品の雰囲気や世界観を壊してしまっても意味がありません。バランスよくデザインを考えてみましょう。

必要な技術と知識の例として
  • 「レイヤースタイル」
    • ドロップシャドウ・シャドウ（内側）・光彩（外側）・光彩（内側）・べベルとエンボス「輪郭」「テクスチャ」・サテン・カラーオーバーレイ・グラデーションオーバーレイ・パターンオーバーレイ・境界線・塗りつぶしツール
    • レイヤースタイルのコピー・レイヤースタイルのペースト
  • 「文字パネル」
    • フォント選び・太さの調整
  • 「描画ツール」
    • 長方形ツール・角丸長方形ツール・楕円形ツール・多角形ツール・カスタムシェイプツール
    • ペンツール・パス選択ツール・アンカーポイント切り替えツール

5.全体のバランスを整える

最後に全体の調整を行いましょう。そこで気を付ける事は、作っている本人は目が慣れてしまっているという事です。実際に見る人（ユーザー）は1~3秒程度しか見ません。制作する人は目を休めたり、一度違う作品を作ったり目をリフレッシュする事も大事な技術です。
後は、複数パターンの作り方のコツは、「2」「3」「4」の工程を見直す事です。
「2」の構図にまだ工夫の余地があるのか？
「3」の画像の扱いや種類に工夫の余地があるのか？
「4」の文字の見せ方・もともと求められている世界観を表現できているのか？
これらを考え更に良いものを作れるようにアイデアを創造してみましょう。

必要な技術と知識の例として
  • 「Web用に保存（従来）」「書き出し形式」
  • 「別名で保存」
  • 「ズームツール」
  • 「 Print Screen（プリントスクリーン） 」

参考サイト

研修メモ

作品例

2021年2月23日（火）

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

-本日のアジェンダ-

1限目
実技 ECサイトデザイン実習④

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

3限目
実技 ECサイトデザイン実習④
LPとは？

4限目
実技 ECサイトデザイン実習④
psdの納品について

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

本日のテーマ

プレゼンについて

バナー制作の進め方

バナーとは？

バナー (banner) はウェブページ上で他のウェブサイトを紹介する役割をもつ画像（アイコンの一種）のこと。 主に広告・宣伝用に作られ、ウェブサイトへのハイパーリンク用にも利用される。 画像にはリンクを張り、クリックするとそのバナーが紹介するサイトを表示するようになっている。 横長帯状のものが一般的だが、近年は縦長のものや正方形に近いものも多い。

制作工程

  1. 作品全体の要素確認をする
  2. 文言内容の構図（レイアウト）決める
  3. 画像素材の補正・調整
  4. 画像当て込み文字の読みやすさの調整
  5. 全体のバランスを整える

【ポイント】
リテイク（修正や出戻り）に強いデータにしておくこと
レイヤーパネルの整理整頓
2パターン以上のパターンのアイデアを持つこと

1.作品全体の要素確認をする

作品作りを円滑に行う最大のコツは、最初に要件定義をしっかりまとめる事かと思います。「掲載箇所」「サイズ」「文言」「画像」「使用頻度」等をしっかり初期段階で確認しておきましょう。

必要な技術と知識の例として
  • 「カンバスサイズ」
  • 「画像解像度」
  • 「CMYKとRGB」

2.文言内容の構図（レイアウト）決める

内容が固まったら、構図（レイアウト）を考えましょう。この工程では見せる順番を決める事、まずは色を使わず骨組みだけにして、構図を考えてみましょう。

必要な技術と知識の例として
  • 「文字パネル」「段落パネル」
  • 「定規」「ガイド」
  • 「移動ツール」
  • 「レイヤーパネル」

3.画像素材の補正・調整

画像の補正とサイズ調整を行いましょう。大事なことは3つ
「レタッチ」「色調補正」「トリミング」をしっかり行いましょう。
また、バナー制作時間を左右するのはココです！効率の良い作業を行うためには、この工程の工夫と予測をしておきましょう。

必要な技術と知識の例として
  • 「レタッチ」
    • パッチツール・ 切り抜きツール・コピースタンプツール・スポット修復ブラシツール・ 修復ブラシツール・コンテンツに応じた移動ツール・ぼかしツール・シャープツール・指先ツール・覆い焼きツール・焼き込みツール
  • 「色調補正」
    • 明るさ・コントラスト・レベル補正・トーンカーブ・色相・彩度・カラーバランス・白黒
  • 「 トリミング」
    • 長方形選択ツール・楕円形選択ツール・なげなわツール・多角形選択ツール・マグネット選択ツール・自動選択ツール・クイック選択ツール
  • 「マスク」
    • クリッピングマスク・レイヤーマスク・ベクトルマスク・クイックマスクモード
  • 「アンシャープマスク」

4.画像当て込み文字の読みやすさの調整

画像と文字が同じ作品に収める工程です。気を付ける事は
「文字の読みやすさ」と「世界観の維持」です。
文字は読めなくては目的が達成できなくなり、作品の雰囲気や世界観を壊してしまっても意味がありません。バランスよくデザインを考えてみましょう。

必要な技術と知識の例として
  • 「レイヤースタイル」
    • ドロップシャドウ・シャドウ（内側）・光彩（外側）・光彩（内側）・べベルとエンボス「輪郭」「テクスチャ」・サテン・カラーオーバーレイ・グラデーションオーバーレイ・パターンオーバーレイ・境界線・塗りつぶしツール
    • レイヤースタイルのコピー・レイヤースタイルのペースト
  • 「文字パネル」
    • フォント選び・太さの調整
  • 「描画ツール」
    • 長方形ツール・角丸長方形ツール・楕円形ツール・多角形ツール・カスタムシェイプツール
    • ペンツール・パス選択ツール・アンカーポイント切り替えツール

5.全体のバランスを整える

最後に全体の調整を行いましょう。そこで気を付ける事は、作っている本人は目が慣れてしまっているという事です。実際に見る人（ユーザー）は1~3秒程度しか見ません。制作する人は目を休めたり、一度違う作品を作ったり目をリフレッシュする事も大事な技術です。
後は、複数パターンの作り方のコツは、「2」「3」「4」の工程を見直す事です。
「2」の構図にまだ工夫の余地があるのか？
「3」の画像の扱いや種類に工夫の余地があるのか？
「4」の文字の見せ方・もともと求められている世界観を表現できているのか？
これらを考え更に良いものを作れるようにアイデアを創造してみましょう。

必要な技術と知識の例として
  • 「Web用に保存（従来）」「書き出し形式」
  • 「別名で保存」
  • 「ズームツール」
  • 「 Print Screen（プリントスクリーン） 」

参考サイト

研修メモ

作品例

2021年2月25日（木）

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

-本日のアジェンダ-

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

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

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

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

5限目
実技 ECサイトデザイン実習⑤
作品発表

本日のテーマ

GIFアニメーション

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

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

本日のキーワード

  • GIF画像で保存
  • GIFアニメ
  • Photoshop「タイムライン」
  • トゥイーン
  • レイヤーパネル
  • パペットワープ
  • カンバスサイズ

参考サイト

パペットワープ（Photoshop）

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

参考サイト

パペットワープ（Illustrator）

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

参考サイト

研修メモ

作為品例

2021年2月26日（金）

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

-本日のアジェンダ-

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

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

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

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

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

本日のテーマ

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

WordPressとは

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

WordPress の記事

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

WordPressのテーマ

研修メモ（WordPress Day1）

事前準備

  • Xfreeアカウント作成、WordPressサイト開設
  • 座席表にURLの追記、DropBoxへのアップロード

WordPressの訓練目的と目標

  • 作成するのは、ポートフォリオと訓練記録（訓練ブログ）が共存したサイト
  • 目的は、就職時に使えるポートフォリオの作成とWordPressに慣れるための訓練記録
  • 訓練記録があると実際に就職時に使えない！
    →訓練記録も武器にする（日々の投稿（ブログ）の例として使用）
    →一時的にブログ部分を非表示に設定
    →自分で作成したサイトにポートフォリオ部分だけを引っ越し
  • 成績考査（3/17）は、ポートフォリオと訓練記録が共存したサイト
  • サイトの記載内容が不足している時は追加してもらう
  • 例えば、訓練記録の記載内容が不足している時は過去に遡って記載

WordPressとは

  • CMSとは（利点）
  • WordPressの利用
  • ポートフォリオの重要性
  • ポートフォリオサイトとしての活用

ユーザー作成

  • 座席表のダウンロード
  • 管理画面の表示
  • ユーザーの作成（権限）
  • サイト運用

記事

  • 投稿記事
  • 固定記事（投稿記事との違い）
  • 記事内容（見出し・段落・画像・カテゴリとタグ）
  • メディアライブラリィ（画像の自動生成）

テーマ

  • テーマの検索（自作も可）
  • テーマの変更（Fukasawa／Noa Liteなど）
  • テーマのインストールしすぎに注意（不要なテーマは削除）

その他

2021年2月27日（土）

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

-本日のアジェンダ-

1限目
実技　ユーザーインターフェイス作成実習②
ブロックエディタの活用について

2限目
実技　ユーザーインターフェイス作成実習②
ブロックエディタの活用について

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

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

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

本日のテーマ

ブロックエディタを使いこなそう

参考サイト

ブロックエディタの活用

研修メモ（WordPress Day2）

ブロックエディタの主要機能

  • ブロックエディターのツールバーを上の固定位置に表示（右上の・・・）
  • 「段落、見出し、リスト」は、基本の項目
  • 復改の入力方法
  • リンクの設定方法
  • 「コード、整形済テキスト、詩」は同じようなブロック（複数の空白をそのまま表示）
  • 「テーブル」は、表組型式を作成
  • 「カバー」は、テキストをオーバレイした画像を配置
  • 「画像、ギャラリー」は、写真掲載の基本（ギャラリーのリンクはプラグイン（Gallery Custom Links）が必要）
  • 「メディアと文章」は、写真と文章を並べる
  • 「ファイル」は、PDFファイルなどのダウンロードを配置
  • 「ボタン」は、リンクを作成するのに便利
  • 「カラム」は、横方向に複数欄を作成し、それぞれのメディアを指定可
  • 「続きを読む」は、抜粋に表示する範囲を指定
  • 「ページ区切り」は、別ページにする時に指定
  • 「区切り」は、文章と文章の間に水平線を表示
  • 「スペーサー」、空間を作成
  • 「ウィジェット」では、色々な表示部品を指定（Contact Form、カレンダー、カテゴリ、最新の投稿など）
  • 「ソーシャルアイコン」は、SNSへのリンクボタンを指定
  • 「埋め込み」の中では「YouTube」が使える

事後作業

  • 管理者ユーザー（test）のパスワード変更（訓練番号（4桁）を付与）

2021年3月1日（月）

学科 HTML基礎①

-本日のアジェンダ-

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

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

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

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

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

本日のテーマ

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

マークアップ とは？ 

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

参考サイト

表の作成について

パスについて

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

便利ツール

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

研修メモ

覚書

2021年3月2日（火）

学科 HTML基礎②

-本日のアジェンダ-

1限目
学科 HTML基礎②
HTMLのul・liタグ

2限目
学科 HTML基礎②
CSSの記述方法

3限目
学科 HTML基礎②
色のプロパティとpadding

4限目
学科 HTML基礎②
練習課題

5限目
学科 HTML基礎②
練習課題

本日のテーマ

CSSを書いてみましょう。

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

h1～ h6・ p ・img ・ul(li)

CSSの基本文法

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

参考サイト

CSSのwidth（幅）とheight（高さ）の指定方法をマスターしよう

便利ツール

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

研修メモ

覚書

2021年3月3日（水）

学科 HTML基礎③

-本日のアジェンダ-

1限目
学科 HTML基礎③
セレクタをまとめる

2限目
学科 HTML基礎③
widthとheight

3限目
学科 HTML基礎③
ボックスモデル

4限目
学科 HTML基礎③
課題制作

5限目
学科 HTML基礎③
課題制作

本日のテーマ

CSSを書いてみましょう。

【復習】昨日までのHTMLタグ（body内）

h1～ h6・ p ・img ・ul(li)

【復習】昨日までのCSSプロパティ

color・background-color・border
list-style
width
paddding

CSSの基本文法

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

参考サイト

CSSのwidth（幅）とheight（高さ）の指定方法をマスターしよう
【CSS】box-sizing:border-boxの使い方｜効かない時は？

便利ツール

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

研修メモ

覚書

2021年3月4日（木）

学科 HTML基礎④

-本日のアジェンダ-

1限目
学科 HTML基礎④
固定ページについて

2限目
学科 HTML基礎④
プラグインについて

3限目
学科 HTML基礎④
バックアップについて

4限目
学科 HTML基礎④
作品の掲載について

5限目
学科 HTML基礎④
作品の掲載について

本日のテーマ

作品を掲載しましょう

参考サイト

固定ページの活用

プラグインの活用

バックアップ

その他

個人でWordPressサイトを立ち上げる時は下記のサイトを参照してみてください。

研修メモ（WordPress Day3）

WordPress訓練の目的と目標（再確認）

  • 作成するのは、ポートフォリオと訓練記録（訓練ブログ）が共存したサイト
  • 目的は、就職時に使えるポートフォリオの作成とWordPressに慣れるための訓練記録
  • 訓練記録があると実際に就職時に使えない！
    →訓練記録も武器にする（日々の投稿（ブログ）の例として使用）
    →一時的にブログ部分を非表示に設定
    →自分で作成したサイトにポートフォリオ部分だけを引っ越し
  • 成績考査（3/17）は、ポートフォリオと訓練記録が共存したサイト
  • サイトの記載内容が不足している時は追加してもらう
  • 例えば、訓練記録の記載内容が不足している時は過去に遡って記載

カスタマイズ

  • トップページの画像を変更（カスタマイズ）
  • アイキャッチ
  • カテゴリやタグの設定（カテゴリの例）：音楽（Music）、ビデオ（Video）、ゲーム（Game）
  • トップページに画像を表示（アイキャッチ画像の設定）
  • メニューの作成方法：トップページ（Top）、プロフィール（Profile）、バナー（Banner）、カード・名刺（Card）、マップ（Map）
  • 固定ページをトップページに設定

プラグイン（紹介だけ／自己責任で使用）

  • フォーム作成（Contact Form 7）
  • パスワード設定（Password Protected、Hide My Site）
    →学校のサイトはパスワードを設定しない（個人情報はマスク（伏せ文字）をかけておいてください）
    →パスワードを設定する時は「deau」に設定
  • ブロックエディタ（Classic Editor）
  • 画像圧縮
  • トップに戻る（WPFront Scroll Top）
  • ギャラリー画像にリンク（Gallery Custom Links）

バックアップ

  • WordPress機能
  • プラグイン（All-in-One WP Migration、BackWPup）
    →Xfreeではエラーが発生するのでftpで「wp-content＞ai1wm-backups」からファイルを取得

2021年3月5日（金）

学科 HTML基礎⑤

-本日のアジェンダ-

1限目
学科 HTML基礎⑤
WordPressのインストール

2限目
学科 HTML基礎⑤
WordPressのカスタマイズ

3限目
学科 HTML基礎⑤
デザインの完成度向上について

4限目
学科 HTML基礎⑤
デザインの完成度向上について

5限目
学科 HTML基礎⑤
デザインの完成度向上について

本日のテーマ

WordPressの仕組みを知ろう

参考サイト

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

個人でWordPressサイトを立ち上げる時は下記のサイトを参照してみてください。

XFREE以外の無料レンタルサーバー

WordPressの初期設定

その他（豆知識）

WordPressの子テーマ

アイキャッチ画像とサムネール画像

ギャラリー画像にリンク

PCでサーバー環境

研修メモ（WordPress Day4）

Webサイトの仕組み

サーバーインストール

  • レンタルサーバーの紹介
  • レンタルサーバーの契約（契約作業は自宅で！）
  • レンタルサーバーの管理画面

注意事項

  • 素材の管理・バックアップの重要性
  • アイキャッチ画像とサムネイル画像の説明
  • 子テーマの説明

大浜のポートフォリオ紹介

先輩のポートフォリオサイト紹介

  • http://deau00010.wp.xdomain.jp/（小松さん）
  • http://deau00001.wp.xdomain.jp/（九条さん）
  • http://deau00014.wp.xdomain.jp/（新井さん）
  • http://deau00002.wp.xdomain.jp/（中村さん）

生徒使用のテーマ名

  • Mystic
  • WP Portfolio

2021年3月8日（月）

学科 HTML基礎⑥

-本日のアジェンダ-

1限目
学科 HTML基礎⑥
marginとpadding

2限目
学科 HTML基礎⑥
marginの相殺

3限目
学科 HTML基礎⑥
aタグと疑似クラス

4限目
学科 HTML基礎⑥
課題制作

5限目
学科 HTML基礎⑥
課題制作

本日のテーマ

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

便利ツール

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

marginとpaddingの違い

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

マージンの相殺

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

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

疑似クラス

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

研修メモ

覚書

2021年3月9日（火）

学科 HTML基礎⑦

-本日のアジェンダ-

1限目
学科 HTML基礎⑦
backgroundプロパティ

2限目
学科 HTML基礎⑦
display:blockと display:inline

3限目
学科 HTML基礎⑦
spanタグについて

4限目
学科 HTML基礎⑦
仕様まとめ

5限目
学科 HTML基礎⑦
仕様まとめ

本日のテーマ

displayプロパティについて

便利ツール

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

SPANタグ

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

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

研修メモ

覚書

2021年3月10日（水）

学科 CSS基礎①

-本日のアジェンダ-

1限目
学科 CSS基礎①
文書構造を伝える新しいタグ

2限目
学科 CSS基礎①
IDセレクタとCLASSセレクタ

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

4限目
学科 CSS基礎①
positionプロパティ

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

本日のテーマ

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

便利ツール

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

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

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

リセットCSS

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

文字のサイズ

まずは何も書いていないHTMLファイルに、フォントサイズを指定しないでテキストを配置してみてください。そこに表示されたのがブラウザのデフォルトの設定です。ほとんどのブラウザでは、htmlとbodyタグのフォントサイズは100%で表示されます。

[CSS]フォントサイズの指定方法の基礎知識からレスポンシブに適した指定方法までやさしく解説

box-sizing

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

CSSのwidth（幅）について

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

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

研修メモ

覚書

2021年3月11日（木）

学科 CSS基礎②

-本日のアジェンダ-

1限目
学科 CSS基礎②
デザインとカスタマイズについて

2限目
学科 CSS基礎②
デザインとカスタマイズについて

3限目
学科 CSS基礎②
デザイン向上と作品掲載について

4限目
学科 CSS基礎②
デザイン向上と作品掲載について

5限目
学科 CSS基礎②
デザイン向上と作品掲載について

本日のテーマ

サイトの完成度を上げましょう

参考サイト

テーマのデザインとカスタマイズ

表の作成・ページ内リンクなど

研修メモ（WordPress Day5）

表作成

  • ブロックエディタ
  • 表（テーブル）作成プラグイン（Table Press）
  • 表ソフト
  • HTML記述（お勧めしない）

ページ内リンクを作成

  • カスタムHTMLで記述
  • 表題であれば「高度な設定」で指定

大浜のポートフォリオサイトのカスタマイズ内容説明

  • シンプルなページに！
  • テーマは「Fukasawa」を使用
  • サイドバーのタイトルの置き換え（追加CSS）
  • サイドバーのメインメニューの置き換え（ウィジェットと追加CSS）
  • サイドバーの写真を丸く（追加CSS）
  • サイドバーのテーマ提供者表示の削除（追加CSS）
  • サイドバーを左側から右側に変更（追加CSS）
  • トップページを固定ページに置き換え（トップページのメニュー名変更）
  • トップページにアピールメッセージを記載
  • トップページの写真に縁取り（丸くするのは基本機能でOK、縁取りは追加CSS）
  • トップページの写真位置を中央（追加CSS）
  • トップページの写真のリンク明確化（追加CSSでhover時の透明度を指定）
  • プロフィールの表はブロックエディタの表機能を使用（幅設定と飾りは追加CSS）
  • 作品掲載の中の隙間調整（追加CSS）
  • 教育記録（ブロックエディタ、特定のカテゴリのみ表示）
  • 先頭に戻るボタンを追加（プラグイン）
  • URLをページ名称にするためにパーマリンクとスラッグを設定
  • サイトアイコンの設定（外観→カスタマイズ→サイトの基本情報→サイトアイコン）

注意事項

  • 追加CSSはテーマ変更を行うと消えてしまうのでバックアップ（保存）しておくこと（テキストエディタを使用）
  • 追加CSSを管理するプラグインも有り
  • 直接ソースを変更する方法もあるがバージョンアップ対応などの問題もありお勧めしない→子テーマを活用（特にHTMLの修正が必要な場合）

2021年3月12日（金）

学科 CSS基礎③

-本日のアジェンダ-

1限目
学科 CSS基礎③
サイトレビューについて

2限目
学科 CSS基礎③
サイトレビューについて

3限目
学科 CSS基礎③
デザイン向上と作品掲載について

4限目
学科 CSS基礎③
デザイン向上と作品掲載について

5限目
学科 CSS基礎③
デザイン向上と作品掲載について

本日のテーマ

ポートフォリオ・訓練記録サイトのレビュー

  • デザインの考え方を説明しましょう
  • 工夫したところ、苦労したところを発表しましょう
  • 良いところをほめましょう
  • 他の人のデザインの良いところは自分の作品の参考にしましょう

参考サイト

テーマのデザインとカスタマイズ

研修メモ（WordPress Day6）

デザイン中間レビューについて

  • デザインの考え方を説明しましょう
  • 工夫したところ、苦労したところ、今後の予定を発表しましょう
  • 良いところをほめましょう
  • 他の人のデザインの良いところは自分の作品の参考にしましょう

覚書

  • FTP研修用のパスワード収集（各人にパスワードを決めてもらう）（英字で始まる英数8～16文字）

2021年3月13日（土）

学科 CSS基礎④

-本日のアジェンダ-

1限目
学科 CSS基礎④
tableタグについて

2限目
学科 CSS基礎④
tableタグの練習問題について

3限目
学科 CSS基礎④
tableタグの練習問題について

4限目
学科 CSS基礎④
サイトの完成度向上について

5限目
学科 CSS基礎④
サイトの完成度向上について

本日のテーマ

tableタグを理解しましょう

本日は、HTML/CSS（tableタグ）を勉強します。
DropBoxを開いて「資料 → 【4】コーディング」から「task_ohama_20210313.zip」をダウンロードしてください。
ダウンロードが完了したらzipファイル内のフォルダをデスクトップにコピーしてください。

参考サイト

表の作成について

HTMLの文法チェック

研修メモ（WordPress Day7）

覚書

  • FTP研修用のパスワード収集（各人にパスワードを決めてもらう）（英字で始まる英数8～16文字）
  • スタイルシートに誤りあり→tableの記述が多いところが二か所あった！

2021年3月15日（月）

学科 CSS基礎⑤

-本日のアジェンダ-

1限目
学科 CSS基礎⑤
dlタグについて

2限目
学科 CSS基礎⑤
dlタグの練習問題について

3限目
学科 CSS基礎⑤
dlタグの練習問題について

4限目
学科 CSS基礎⑤
サイトの完成度向上について

5限目
学科 CSS基礎⑤
サイトの完成度向上について

本日のテーマ

dlタグを理解しましょう

本日は、HTML/CSS（dlタグ）を勉強します。
DropBoxを開いて「資料 → 【4】コーディング」から「task_ohama_20210315.zip」をダウンロードしてください。
ダウンロードが完了したらzipファイル内のフォルダをデスクトップにコピーしてください。

参考サイト

dlタグについて

研修メモ（WordPress Day8）

覚書

2021年3月16日（火）

学科 CSS基礎⑥

-本日のアジェンダ-

1限目
学科 CSS基礎⑥
HTML/CSSのTipsについて

2限目
学科 CSS基礎⑥
HTML/CSSのTipsについて

3限目
学科 CSS基礎⑥
サイトの完成度向上について

4限目
学科 CSS基礎⑥
サイトの完成度向上について

5限目
学科 CSS基礎⑥
サイトの完成度向上について

本日のテーマ

WordPressサイトを完成に向けて編集・掲載を進めましょう

本日は、HTML/CSSのTipsを説明します。
DropBoxを開いて「資料 → 【4】コーディング」から「task_ohama_20210316.zip」をダウンロードしてください。
ダウンロードが完了したらzipファイル内のフォルダをデスクトップにコピーしてください。

WordPressサイトのデザインを完成させコンテンツの掲載（過去に作成した作品掲載や訓練記録の投稿）を行いサイトを完成させましょう。
明日（3月17日）の5時限目までにコンテンツを最新状態にしてください。（成績考査の対象）

参考サイト

テーマのデザインとカスタマイズ

::afterと:afterの違い

研修メモ（WordPress Day8）

覚書

::afterと:afterの違い

2021年3月17日（水）

学科 CSS基礎⑦

-本日のアジェンダ-

1限目
学科 CSS基礎⑦
サイトの仕上げについて

2限目
学科 CSS基礎⑦
サイトの仕上げについて

3限目
学科 CSS基礎⑦
サイトの仕上げについて

4限目
学科 CSS基礎⑦
サイトの仕上げについて

5限目
学科 CSS基礎⑦
サイトの仕上げについて

本日のテーマ

WordPressサイトを完成させましょう【成績考査の対象】

WordPressサイトのデザインを完成させコンテンツの掲載（過去に作成した作品掲載や訓練記録の投稿）を行いサイトを完成させましょう。
本日（3月17日）の5時限目までにコンテンツを最新状態にしてください。（成績考査の対象）
成績考査のため一旦サイト修正は凍結させてください。但し、訓練記録については3月18日以降も引き続き継続投稿してください。

レンタルサーバー比較

3月14日現在（キャンペーン情報を含みますので申し込み時は確認願います）

名称Xfreeスターサーバー（フリープラン）XREA Free
URLhttps://www.xfree.ne.jp/https://www.star.ne.jp/free/https://www.xrea.com/
運営会社エックスサーバー株式会社ネットオウル株式会社GMOデジロック株式会社
費用無料無料無料
ディスク容量2GB2GB1GB
独自ドメイン5個1個10個
独自SSL不可不可可
メールアカウントなしなし100個
広告表示PC：なし
タブレット/スマホ：有り		PC：なし
タブレット/スマホ：有り		あり
その他
名称XserverスターサーバーXREA PlusLOLIPOP
URLhttps://www.xfree.ne.jp/https://www.star.ne.jp/https://www.xrea.com/https://www.xrea.com/
運営会社エックスサーバー株式会社ネットオウル株式会社GMOデジロック株式会社GMOペパボ株式会社
費用900円～/月200円～/月191円～/月275円～/月
ディスク容量300GB50GB100GB100GB
独自ドメイン無制限50個64個100個
独自SSL無料無料無料無料
メールアカウント無制限500個100個無制限
広告表示なしなしなしなし
その他ドメイン無料
初期費用無料		ドメイン無料
初期費用無料		ドメイン無料
初期費用無料

プラン比較

研修メモ（WordPress Day9）

資料

  • 資料

2021年3月18日（木）

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

-本日のアジェンダ-

1限目
学科 レイアウトデザイン基礎①
Webサイト作成手順について

2限目
学科 レイアウトデザイン基礎①
サーバーへのアップロード について

3限目
学科 レイアウトデザイン基礎①
FFFTPの使い方について

4限目
学科 レイアウトデザイン基礎①
サイトレイアウト検討

5限目
学科 レイアウトデザイン基礎①
サイトレイアウト検討

本日のテーマ

FTPでサーバーコンテンツを操作できるようになりましょう

  • サーバー環境
  • FTPの仕組み
  • FTP（FFFTP）の設定
  • サーバーへの接続
  • サーバーへのアップロード／ダウンロード

参考サイト

Webサイトの作成手順

サーバーへのアップロード

FFFTPの使い方

サーバー接続情報（サーバー管理者から入手する情報）

ホスト名sv3.html.xdomain.ne.jp
ユーザー名deau30xx.html.xdomain.jp （xxは出席番号）
パスワード（申請値）
URLhttp://deau30xx.html.xdomain.jp （xxは出席番号）

研修メモ

覚書

  • 作品制作を進める（Webサイト作成の手順）
  • サーバーの知識を身に着けよう
  • LinuxとWindowsの違い（価格！）
  • iPhone、iPad、Mac、Android、Crome BookもLinux
  • データセンター（情報漏洩・海外・LINEは韓国と中国）
  • Linuxで注意すること（ファイル名の大文字、小文字・ファイルのアクセス権）

2021年3月19日（金）

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

-本日のアジェンダ-

1限目
学科 レイアウトデザイン基礎②
サイトマップについて

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

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

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

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

本日のテーマ

サイト制作にスケジュール管理は重要！

オリジナルサイト作成のスケジュール

①デザインカンプ作成 →大淵が担当します！

  • 内容決定
  • サイトマップ（今回は省略）
  • ワイヤーフレーム
  • デザインラフ(PC、SP)
  • コーディングの設計図

②コーディング

③レスポンシブ対応

④アップロード

提出物と提出先(DROPBOX)

①-1.内容決定

task_〇〇〇〇_20201225.txtのままで良い場合は、そのままアップ。
内容を変更する場合は、今日の日付でアップ。

【作品】オリジナルサイト_20210319_内容決定

①-2.サイトマップ

「ホームページの内容と構成を整理するためにまとめられた構成図」と「検索エンジンがホームページ内のURLを集めるためのxmlサイトマップ」の２つがあります。

今回は省略

①-3.ワイヤーフレーム

まずは、カラム数とサイト幅を決めましょう。

ワイヤーフレームはフォトショップで作成します。提出はjpgです。
サイトの幅と高さは自由ですが、こだわりがなければ下記で作成しましょう。
サイト幅・・・960px
ファイルの横幅・・・1280px

１、フォトショップを開き、コンテンツ幅(960px)でファイルを新規作成※アートボードは外しておく
２、レイヤーを新規作成して、塗りつぶしツールで適当な色で全面を塗る
３、編集＞カンバスサイズでファイル幅（1280px）にする
４、塗りつぶしてできた四角の両端にガイドを引く
５、長方形ツール・グレースケールでレイアウトを決める

カンバスの横中央にガイドを引く
表示＞新規ガイド＞垂直方向50%

コピーライトの書き方
［©マーク（©は環境依存文字なので（C）でもOK）］［著作物を最初に発行した年］［著作権者の名前］

© 2015 FAINPIXAR

▼HTMLの例(footer内に書かれることが多い)

<p><small>&copy; 2015 FAINPIXAR</small></p>

htmlの記述【body】

【作品】オリジナルサイト_20210322_ワイヤーフレーム

研修メモ

覚書

2021年3月22日（月）

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

-本日のアジェンダ-

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

2限目
学科 レイアウトデザイン基礎③
デザインカンプについて

3限目
学科 レイアウトデザイン基礎③
DTPとWEBの違い

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

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

オリジナルサイト課題

3月22日（月）「ワイヤーフレーム」1限までに提出、「カンプPC」制作
3月23日（火）「カンプPC&SP」制作→5限までに提出
3月24日（水）発表&修正、「HTML設計図」5限までに提出

▼ワイヤーフレームの例（https://web-kanji.com/より）
デザイン要素や写真はまだ入れません。内容の整理が目的です！

【作品】オリジナルサイト_20210322_ワイヤーフレーム

本日のテーマ

PCのデザインカンプに取り掛かりましょう。
「配置」「文字」「配色」を意識してデザインしましょう

①-4.デザインカンプ(PC)

チラシ制作を思い出して、「配置」「文字」「配色」について考えてみましょう。

【配置＝レイアウト】
余白・揃える・まとめる

【文字】
フォントの種類・大きさ・エリア

※IllustratorやPhotoshopの単位の設定をpxにしてから作業を行うとスムーズです。

【配色】
ベース・メイン・アクセント、読みやすさ

DTPデザインとの違いは、ファイルの大きさ（特に高さ）が自由なこと、ファーストビューが重要視されること、後から変更ができることです。
この要素を意識してデザインしてみましょう。

カンプ段階ではファーストビューは高さ550px程度にしましょう。

文字の指定例

・フォントカラー　#333333
・フォントサイズ
　記事タイトル：40px
　大見出し：32px
　小見出し：24px
　本文：16px程度(14〜18px)
・行間　1.5〜2.0
・一行に30文字〜50文字

CSSでの指定

body{
    color: #333333;
    font-size: 16px;
    line-height: 1.7;
}
h1{
    font-size: 40px;
}
h2{
    font-size: 32px;
}
h3{
    font-size: 24px;
}

【提出のファイル名】
work_xxxxx_20210323_pc.jpg

jpgファイルをブラウザで見て、ファーストビューの見え方・文字の大きさを確認しましょう。

【作品】オリジナルサイト_20210323_デザインカンプ

研修メモ

作品例

2021年3月23日（火）

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

-本日のアジェンダ-

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

2限目
学科 レイアウトデザイン基礎④
スマホのカンプについて

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

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

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

本日のテーマ

PCとSPのデザインラフを完成させましょう。

①-5.スマホラフ

各デバイスの画面サイズ

端末ポイントRetinaピクセル
iPhone X
iPhone XS
iPhone 11 Pro		375×81231125×2436
iPhone XR
iPhone 11		414×8962828×1792
iPhone 12
iPhone 12 Pro		390×84431170×2532
iPhone XS Max
iPhone 11 Pro Max		414×89631242×2688
iPhone 12 Pro Max428×92631284×2778

今回は、スマホラフを幅414pxで作成しましょう。

【覚えておきましょう！】
画像を書き出す際は2〜3倍にします。写真やアイコンは非破壊データ（パスやスマートオブジェクト化）にして起きましょう。

【作品】オリジナルサイト_20210323_デザインカンプ
※PCとSPのjpgを提出してください。

課題の評価点

①隣接

要素をグループ化しましょう。画像とそのテキストの関係性の様に、関連する項目は近くに置く。別の項目とは距離を取る様に。

②グリッド

左寄せ、中央寄せ、右寄せ。揃えるとこを決めましょう。
頭を揃えましょう。

③ルール

同じレベルの物はデザインにルールを持たせましょう。

④コントラスト

文字の大きさや配色に強弱を付けましょう。
タイトルと本文のジャンプ率を意識する。色の組み合わせは読みやすいコントラストにしましょう。（例：黄色に白は避ける。）

⑤F型

ユーザーの目線の動きを意識しましょう。左から右へ、上から下へ目線が動きます。ファーストビューでサイトの要点が伝わる様に。

研修メモ

作品例

2021年3月24日（水）

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

-本日のアジェンダ-

1限目
学科 レイアウトデザイン基礎⑤
デザインカンプの講評

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

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

4限目
学科 レイアウトデザイン基礎⑤
マークアップについて

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

本日のテーマ

コーディングに向けて手順を確認しましょう

ラフを修正でき次第、下記フォルダにアップしてください。

【作品】オリジナルサイト20210324カンプ完成

①-5.コーディングの設計図

コーディングの前にラフ上でマークアップを書いてみましょう。

１、ラフをJPGで書き出し、そのJPGをPhotoshopで開きます。
２、画像のレイヤーを透明度70%にする。
３、タグを書き込んでいきましょう。
４、JPGで保存

どのタグが適切か考えましょう（使わないタグがあってもOKです）

▼レイアウトに関するタグ

<header>
<main>
<footer>
<nav>
<section>

▼意味のある主なタグ

<h1>
<h2>
<h3>
<h4>
<h5>
<h6>
<p>
<ul><li>
<ol><li>
<dl><dt><dd>
<table><tr><th><td>
<img>

▼CSSの記述の際、必要になった時に使うタグ

<div> ・・・ブロック要素
<span> ・・・インライン要素

意味がわからなくなったら下記のページを参考に！

htmlの記述【body】

【作品】オリジナルサイト_20210324_設計図

研修メモ

作品例

設計図

2021年3月25日（木）

学科 XD基礎①

-本日のアジェンダ-

1限目
学科 XD基礎①
【XD】基本操作

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

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

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

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

本日のテーマ

XDを使ってみましょう

Adobe XDについて

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

便利ツール

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

研修メモ

覚書

2021年3月29日（月）

学科 XD基礎②

-本日のアジェンダ-

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

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

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

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

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

本日のテーマ

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

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

【XD】リピートグリッド

便利ツール （サイト制作用）

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

研修メモ

覚書

2021年3月30日（火）

実技 XD実習①

-本日アジェンダ-

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

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

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

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

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

本日のテーマ

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

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

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

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

を繰り返すことで、完成度を上げるやり方です。

 「分かりそう」で「分からない」でも「分かった」気になれるIT用語辞典

便利ツール

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

研修メモ

覚書

2021年3月31日（水）

実技 XD実習②

-本日アジェンダ-

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

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

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

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

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

本日のテーマ

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

RETINAディスプレイについて

画像の書き出しについて

SVGとは

画像といえば「ラスタ形式」のPNG、JPEG（JPG）、GIFなどがおなじみですが、SVGは「ベクトル形式」で画像を描画しています。
「ラスタ形式」ではピクセルを縦横に並べ、色や輝度などをそれぞれの点に情報として与える方法で画像を描画しており、拡大縮小することによって画質が劣化したりギザギザになってしまいます。編集には不向きな上に、ファイルサイズが大きくなってしまうというデメリットがあります。

一方「ベクトル形式」で描画されるSVGファイルは、パスやテキスト、シェイプなどの集合を画像として扱うため、拡大や縮小をしても画質が劣化しません。近年主流となっているレスポンシブデザインと相性がよく、PCで見てもSPで見ても変わらない画質で表示させることができます。

SVGファイルとは？特徴・作成・変換方法を知ろう！

便利ツール

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

研修メモ

覚書

2021年4月1日（木）

実技 WEBデザイン実習①

-本日のアジェンダ-

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

2限目
実技 WEBデザイン実習①
DWの機能

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

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

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

本日のテーマ

Dreamweaverを触ってみましょう

Adobe Dreamweaver

Adobe Dreamweaver（アドビ ドリームウィーバー）は、アドビシステムズが販売しているWebオーサリングツールです。旧称はMacromedia Dreamweaverであり、かつての開発会社はマクロメディアでした。高機能なWebオーサリングツールで、有償ツールの中では、最も有名なWEBオーサリングツールであり、デファクトスタンダードツールとして有名です。
※Webオーサリングツール＝いわゆるウェブページ作成ソフトのこと

メリット

ウェブサイトを作成するにあたって必要な下記ソフトの両方の機能が備わっていて、かつ高機能な為、効率的にコーディングができます。

  • テキストエディタ（Terapadなど）
  • FTPクライアント（FFFTPなど）

便利な機能

  • コードとデザインの分割（ウィンドウ＞ワークスペースのレイアウト　標準）
  • コードヒント（環境設定＞コードヒント）
  • コメントの適用と削除（左のツールバー）
  • ソースフォーマット（左のツールバー）
  • インデント機能（環境設定＞コードフォーマット）
  • リンクファイルとの連携（上のタブ）
  • ファイルを横断して検索/置換（検索）

▼リセットCSSの一例

/* リセットCSS
------------------------------------------------------------*/
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,form,input,textarea,p,th,td,select,header,nav,section,footer {
	margin: 0;
	padding: 0;
	color: #333;
	line-height: 1.6;
	word-wrap: break-word;
	box-sizing: border-box;
}
address,em,i {
	font-style: normal;
}
strong,th,b {
	font-weight: normal;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
hr {
	display: none;
}
h1,h2,h3,h4,h5,h6 {
	font-size: 100%;
	font-weight: normal;
}
img {
	border: 0;
}
li {
	list-style-type: none;
}
small{
	font-size: 100%;
}
iframe {
	border: 0;
}
a{
	text-decoration:none;
}
/* リセットCSSここまで
------------------------------------------------------------*/

研修メモ

覚書

2021年4月2日（金）

実技 WEBデザイン実習②

-本日のアジェンダ-

1限目
実技 WEBデザイン実習②
DOMについて

2限目
実技 WEBデザイン実習②
挿入について

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

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

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

本日のテーマ

Dreamweaverでマークアップしましょう

DOMパネル

【point】HTML文書の構造がわかりやすい！

  • 複数をタグで囲う事ができる
  • タグを複製できる
  • id名、class名をつける事ができる
  • 要素名を変更できる

挿入パネル

【point】HTMLの記述に便利です！

  • クリックでタグを挿入できる
  • 開始タグと終了タグをセットで記述できる
  • タグで囲う事ができる

DWを使ってマークアップしましょう！

▼HTML構造（設計図）

<aside> …… 余談・補足情報のセクションであることを示す

▼デザインの都合上必要であればdivで囲って、さらにclass名をつけましょう。

①mainとasideを横並びにする為に、親要素が必要です。
　→mainとasideをdivで囲います。class名content-wrap

②headerは幅960px、その外側に幅100%の背景グレーのボックスを作ります。
　→headerをdivで囲います。class名header-wrap

なぜclass名をつけるのか？

この場合、divが２つ存在することになるので、ヘッダーのdivとコンテンツのdivを区別する為に名前をつけてあげます！

最低限のリセットCSS

/*リセットCSS*/
* {
    box-sizing: border-box;
}
body,h1,h2,h3,h4,h5,h6,p,ul,ol,li,dl,dd {
    margin: 0;
}
ul,ol {
    padding: 0;
    list-style: none;
}
img {
    max-width: 100%;
    vertical-align: bottom;
    border: none;
}
/*この上は変更しない*/

imgにmax-width: 100%;

imgタグはwidthを指定しないと画像本来の大きさで表示します。
<div><img src="photo.jpg" alt=""></div>
例えば、divが親要素でphoto.jpgが幅800pxの場合、
divに幅400pxを指定してもphoto.jpgははみ出して本来の大きさで表示してしまいます。

そこで、cssで全部のimgにmax-width: 100%;を指定し、画像を親要素からはみ出ないようにしておきましょう。

max- min-

max-width: 100%;は、最大の幅が親要素の100%
つまり100%以上にならない＝はみ出さない

中央寄せのCSSについて

text-align:center;
中のインライン要素（文字や写真）を中央に寄せる

margin:0 auto;
そのボックス自体が中央に移動する
※widthと一緒に使いましょう。

研修メモ

覚書

2021年4月3日（土）

実技 WEBデザイン実習③

-本日のアジェンダ-

1限目
実技 WEBデザイン実習③
CSSデザイナーパネルについて

2限目
実技 WEBデザイン実習③
CSSの記述

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

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

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

本日のテーマ

DreamweaverでCSSを記述しましょう

CSSデザイナーパネル

CSSの記述に便利です！

  • スタイルシートの紐付けができる（ソース）
  • セレクタを追加できる
  • コードへ移動できる
  • CSSを追加・変更できる（プロパティ）

▼昨日マークアップしたHTML(body内)

<div class="header-wrap">
    <header>
        <h1>ロゴ</h1>
        <nav>
            <ul>
                <li><a href="#">アイテム１</a></li>
                <li><a href="#">アイテム１</a></li>
                <li><a href="#">アイテム１</a></li>
                <li><a href="#">アイテム１</a></li>
                <li><a href="#">アイテム１</a></li>
            </ul>
        </nav>
    </header>
</div>
<div class="content-wrap">
    <main>新規 main タグの内容がここに入ります</main>
    <aside>新規 aside タグの内容がここに入ります</aside>
</div>
<footer><small>コピーライト</small></footer>

CSSデザイナーパネルで、CSSのセレクターを記述していきましょう。
セレクターを書いたら、下記の見た目になるようにプロパティと値を入れていきましょう。

CSSの記述おすすめ手順

①背景色を指定

②横並びにする
1>headerのロゴとナビ
2>ナビのリスト
3>.content-wrapのmainとaside

③幅を指定

④余白を指定
背景色の内側に余白をつけたい場合はpadding
外側に付けたい場合はmargin

.header-wrap {
	background-color: #eeeeee;
	padding: 30px 0;
	margin-bottom: 50px;
}
.header-wrap header {
	overflow: hidden;
	width: 960px;
	margin: 0 auto;
}
.header-wrap header h1 {
	float: left;
}
.header-wrap header nav {
	float: right;
}
.header-wrap header nav ul {
	overflow: hidden;
}
.header-wrap header nav ul li {
	float: left;
	list-style: none;
	margin-left: 30px;
}
.header-wrap header nav ul li a {}
.content-wrap {
	overflow: hidden;
	width: 960px;
	margin: 0 auto;
	margin-bottom: 50px;
}
.content-wrap main {
	background-color: #cccccc;
	float: left;
	width: 70%;
	padding: 5%;
	box-sizing: border-box;
}
.content-wrap aside {
	background-color: #cccccc;
	float: right;
	width: 25%;
	padding: 5%;
	box-sizing: border-box;
}
footer {
	background-color: #000000;
	color: #ffffff;
	text-align: center;
}
footer small {}

float（横並びの指定方法その１）

横並びにしたいブロックにfloat:left;またはfloat:right;を記述。
その親のブロックにoverflow:hidden;でフロート解除をしましょう。

flexbox（横並びの指定方法その２）

親要素に display: flex; を指定するだけで、中の子要素が横並びになります。
さらにどのように並ぶのか指定できます。

例＞　親要素に下記を記述すると、子要素は横並び、かつ両端ピッタリで均等間隔
display: flex;
justify-content: space-between;

研修メモ

覚書

2021年4月5日（月）

実技 WEBデザイン実習④

-本日のアジェンダ-

1限目
実技 WEBデザイン実習④
positionについて

2限目
実技 WEBデザイン実習④
サイトの定義

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

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

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

本日のテーマ

DreamweaverでCSSを記述しましょう

《画像に文字を重ねてみましょう》

画像を背景とする

▼HTML

<div class="photo">
    <h1>MY WEB SITE</h1>
</div>

▼CSS

.photo {
    background-image: url(images/photo.jpg);
    background-size: cover;
    text-align: center;
    padding: 250px 0;
}

background-size: cover;
背景がボックスを覆います。※ただし画像は切れます。

background-size: contain;
画像が切れずに全体を表示します。※ただし隙間ができます。

positionを使う

positionプロパティを使うと、場所を動かしたり固定したり重ねたりする事ができます。

  • position:static;・・・初期値（何も指定してないのと一緒。）
  • position:relative;・・・相対（本来いる場所からどの位動かすか。）
  • position:absolute;・・・絶対（画面の左上が基準。ただし親要素にrelativeを指定するとそこが基準になる。）
  • position:fixed;・・・固定（スクロールしても動かない。）
  • CSSのpositionを総まとめ！absoluteやfixedの使い方は？

POSITIONで重ねてみましょう

▼HTML

<div class="wrap">
    <div class="area1">エリア１</div>
    <div class="area2">エリア２</div>
    <div class="area3">エリア３</div>
</div>

▼CSS

.wrap {
}
.area1 {
    background-color: yellow;
    width: 600px;
    height: 600px;
}
.area2 {
    background-color: pink;
    width: 300px;
    height: 300px;
}
.area3 {
    background-color: aqua;
    width: 150px;
    height: 150px;
}

▼今日のHTMLソースの完成（答え）

<div class="photo">
	<h1>MY WEB SITE</h1>
</div>
<div class="wrap">
	<div class="area1">エリア１</div>
	<div class="area2">エリア２</div>
	<div class="area3">エリア３</div>
</div>

▼今日のCSSソースの完成（答え）

* {
	margin: 0;
	padding: 0;
}
.photo {
	background-image: url(images/photo.jpg);
	background-repeat: no-repeat;
	background-size: contain;
	background-position: center top;
	background-color: #000000;
	height: 20vh;
	padding: 40vh 0;
	display: flex;
	align-items: center;
}
h1 {
	color: #FFFFFF;
	text-align: center;
	width: 100%;
	font-size: 50px;
}
.wrap {
	position: relative;
}
.area1 {
	position: absolute;
	top: 100px;
	background-color: yellow;
	width: 600px;
	height: 600px;
}
.area2 {
	position: absolute;
	left: 150px;
	top: 150px;
	background-color: pink;
	width: 300px;
	height: 300px;
}
.area3 {
	position: absolute;
	left: 350px;
	top: 350px;
	background-color: aqua;
	width: 150px;
	height: 150px;
}

ヘッダーやページトップボタンを固定してみましょう

Chromeの検証ツールを使って、見た目の変化をみましょう

position見本

DWのメリット

ウェブサイトを作成するにあたって必要な下記ソフトの両方の機能が備わっていて、かつ高機能な為、効率的にコーディングができます。

  • テキストエディタ（Terapadなど）
  • FTPクライアント（FFFTPなど） ←【今日の講義】サイトの管理

サイト定義

Dreamweaver では、HTML ドキュメントおよびドキュメントに関連するイメージファイルや CSS ファイルなど、Web サイトを構成するすべての素材をひとつのフォルダにまとめて管理します。このすべてを含めたフォルダは “サイト” と呼ばれます。そして、Dreamweaver でこのフォルダの位置を指定することを “サイトを定義する” と表現します。

ローカルルートフォルダ
作業中のファイルを格納する、主にローカルコンピュータ上に配置されるフォルダです。Dreamweaver 上では、このフォルダを “ローカルサイト” として表示します。このフォルダはネットワークサーバ上に配置することもできます。

リモートフォルダ
通常、Web サーバが実行されているコンピュータ上に配置されるフォルダです。Dreamweaver 上では、このフォルダを “リモートサイト” として表示します。

オリジナルサイトをサーバーにアップしてみましょう。

今回はDWではなく、FFFTPでアップします。
DWはコーディングからアップロードまで行うことができますが、業務ではコーディングはDW、アップはFFFTPでというケースもあります。

【本日の課題】

  • フォルダ名は「html20210405」
  • ファイル名は「index.html」
  • URLが「http://deau30xx.html.xdomain.jp/html20210405/」となります。※xxは個別番号

研修メモ

覚書

2021年4月6日（火）

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

-本日のアジェンダ-

1限目
実技 スマートフォン作成実習①
Viewportについて

2限目
実技 スマートフォン作成実習①
Media Queries

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

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

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

本日のテーマ

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

viewport

viewport（ビューポート）とは、日本語に訳すと「表示領域」という言葉がしっくりくると思います。例えば、デスクトップ環境（PCなど）のブラウザなどでは、ブラウザウインドウの表示領域がviewportになります。… 表示のされ方は、制作者がmeta要素のviewportで指定することができます。
viewportとはなにか？

Media Queries

メディアクエリは、CSS スタイルに適用できるシンプルなフィルタです。メディアクエリを使用すると、画面の種類、幅、高さ、向き、解像度など、コンテンツをレンダリングするデバイスの特性に基づいて、スタイルを容易に変更できます。

WEB制作課題のポイント

  • PC全画面表示の場合、メインコンテンツの幅を一定のサイズ（例：960px）に納め、ブラウザ中央に表示してください。
    ※ 一定のサイズは、 960pxでなくても問題ありません。
  • ブラウザの横幅を 一定のサイズ（例：960px） 以下に狭めてもレイアウトが崩れないようにしてください。また、ブラウザの横幅を縮めた時に、できるだけスクロールバーがでないように調整してください。
  • 縦長画面のスマートフォンを想定 （例：480px） し、体裁よく見えるようデザインを工夫してください。
    ※ サイズは、 480pxでなくても問題ありません。

便利ツール （サイト制作用）

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

研修メモ

覚書

2021年4月7日（水）

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

-本日のアジェンダ-

1限目
実技　スマートフォンサイト作成実習②
アイキャッチの実装

2限目
実技　スマートフォンサイト作成実習②
アイキャッチの実装

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

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

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

本日のテーマ

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

WEB制作課題のポイント

  • PC全画面表示の場合、メインコンテンツの幅を一定のサイズ（例：960px）に納め、ブラウザ中央に表示してください。
    ※ 一定のサイズは、 960pxでなくても問題ありません。
  • ブラウザの横幅を 一定のサイズ（例：960px） 以下に狭めてもレイアウトが崩れないようにしてください。また、ブラウザの横幅を縮めた時に、できるだけスクロールバーがでないように調整してください。
  • 縦長画面のスマートフォンを想定 （例：480px） し、体裁よく見えるようデザインを工夫してください。
    ※ サイズは、 480pxでなくても問題ありません。

本日の5限終了までに、サーバーアップをお願いします。

アイキャッチいろいろ

アイコンフォント

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

画像＋テキスト

便利ツール （サイト制作用）

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

研修メモ

覚書

2021年4月8日（木）

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

-本日のアジェンダ-

1限目
実技　スマートフォンサイト作成実習③
マルチデバイス対応について

2限目
実技　スマートフォンサイト作成実習③
マルチデバイス対応について

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

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

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

本日のテーマ

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

WEB制作課題のポイント

  • PC全画面表示の場合、メインコンテンツの幅を一定のサイズ（例：960px）に納め、ブラウザ中央に表示してください。
    ※ 一定のサイズは、 960pxでなくても問題ありません。
  • ブラウザの横幅を 一定のサイズ（例：960px） 以下に狭めてもレイアウトが崩れないようにしてください。また、ブラウザの横幅を縮めた時に、できるだけスクロールバーがでないように調整してください。
  • 縦長画面のスマートフォンを想定 （例：480px） し、体裁よく見えるようデザインを工夫してください。
    ※ サイズは、 480pxでなくても問題ありません。

本日はの5限終了までに、サーバーアップをお願いします。

HTMLの特殊文字

以下の場合、特別な書き方をする必要があります。
　・コピーライト©や「&」
　・文字として 「<」や「>」を を表示させたい場合 （HTMLの中に半角の「<」や「>」を記入すると、HTMLタグの一部だと認識されてしまう）

・HTML5タグリファレンス |特殊文字リファレンス

コピーライトについて
・年号と©マークと何が必要？Copyright（コピーライト）表記の正しい書き方
・ HTML5タグリファレンス | small

便利ツール （サイト制作用）

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

研修メモ

覚書

2021年4月9日（金）

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

-本日のアジェンダ-

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

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

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

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

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

本日のテーマ

本日は成績考査です。

WEB制作課題(マルチデバイス対応)のポイント

  • PC全画面表示の場合、メインコンテンツの幅を一定のサイズ（例：960px）に納め、ブラウザ中央に表示してください。
    ※ 一定のサイズは、 960pxでなくても問題ありません。
  • ブラウザの横幅を 一定のサイズ（例：960px） 以下に狭めてもレイアウトが崩れないようにしてください。また、ブラウザの横幅を縮めた時に、できるだけスクロールバーがでないように調整してください。
  • 縦長画面のスマートフォンを想定 （例：480px） し、体裁よく見えるようデザインを工夫してください。
    ※ サイズは、 480pxでなくても問題ありません。

本日はの5限終了までに、サーバーアップをお願いします。

便利ツール （サイト制作用）

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

研修メモ

覚書

2021年4月12日（月）

学科 SNS運用基礎

-本日のアジェンダ-

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

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

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

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

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

本日のテーマ

SNSの埋込について

SNS とは?

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

企業向けアカウント

WEBサービスに置いて、SNSは広報・宣伝・顧客とのコミュニケーションの手段です。
SNSで発信することで、利益に上手く繋げましょう。

研修メモ

覚書

2021年4月13日（火）

学科 WEB動画基礎

-本日のアジェンダ-

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

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

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

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

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

本日のテーマ

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

YOUTUBEにつて

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

参考サイト

VIDEOとIFRAMEタグ

便利ツール （サイト制作用）

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

研修メモ

覚書

2021年4月15日（木）

学科 JavaScript基礎

-本日のアジェンダ-

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

2限目
学科 JavaScript基礎
jQueryの取り入れ方

3限目
学科 JavaScript基礎
jQueryの記法について

4限目
学科 JavaScript基礎
作品制作

5限目
学科 JavaScript基礎
作品制作

本日のテーマ

ページトップボタンをjQueryで実装しよう

JavaScriptとは

【超入門】JavaScriptとは？できること・基本をわかりやすく解説

jQueryとは

jQuery（ジェイクエリー）は、ウェブブラウザ用のJavaScriptコードをより容易に記述できるようにするために設計された軽量なJavaScriptライブラリである。
引用元:ja.wikipedia.org

JavaScript初心者のためのjQuery入門

jQuery
jQuery公式サイト
jQuery日本語リファレンスの例
jQuery リファレンス

研修メモ

覚書

2021年4月16日（金）

実技 JavaScript（jQuery）実習①

本日のアジェンダ-

1限目
実技　JavaScript（jQuery）実習①
jQueryの記法について

2限目
実技　JavaScript（jQuery）実習①
jQuery（ハンバーガーメニュー＋ナビゲーションドロワー）の利用

3限目
実技　JavaScript（jQuery）実習①
作品制作

4限目
実技　JavaScript（jQuery）実習①
作品制作

5限目
実技　JavaScript（jQuery）実習①
作品制作

本日のテーマ

jQueryを自分のサイトに導入してみましょう。

jQueryとは

JavaScript初心者のためのjQuery入門

jQuery
jQuery公式サイト
jQuery日本語リファレンスの例
jQuery リファレンス

研修メモ

覚書

2021年4月17日（土）

実技 JavaScript（jQuery）実習②

本日のアジェンダ-

1限目
実技　JavaScript（jQuery）実習②
jQueryプラグイン（カルーセル）の利用

2限目
実技　JavaScript（jQuery）実習②
jQueryプラグイン （カルーセル） の利用

3限目
実技　JavaScript（jQuery）実習②
jQueryの利用

4限目
実技　JavaScript（jQuery）実習②
作品制作

5限目
実技　JavaScript（jQuery）実習②
作品制作

本日のテーマ

jQueryプラグインを自分のサイトに導入してみましょう。

jQueryとは

JavaScript初心者のためのjQuery入門

jQuery
jQuery公式サイト
jQuery日本語リファレンスの例
jQuery リファレンス

研修メモ

覚書

2021年4月19日（月）

学科 サーバーサイドプログラム基礎

-本日のアジェンダ-

1限目
学科 サーバーサイドプログラム基礎
サーバーサイドプログラムについて

2限目
学科 サーバーサイドプログラム基礎
サーバーサイドプログラムについて

3限目
学科 サーバーサイドプログラム基礎
作品制作

4限目
学科 サーバーサイドプログラム基礎
作品制作

5限目
学科 サーバーサイドプログラム基礎
作品制作

本日のテーマ

サーバーサイドプログラミングの概要を理解しましょう
（フォームを作成してみましょう）

事前準備（サーバーの契約と開設）

サーバーサイドの仕組み

サーバーサイドスクリプトとクライアントサイドスクリプト

フォームの作成

学習環境のための参考サイト（MAMPとXAMPP）

研修メモ

覚書

  • WordPressサーバーの引越しをするためのアカウント作成（財産の引越しを実施／アカウント作成は自宅で実施）
  • 今日からの4日間はWordPressの引越しをしながらサーバーサイドの勉強を実施
  • 静的ページと動的ページ
  • レスポンシブ対応（再確認）
  • サーバーサイドの勉強
  • PHPの勉強（構文）
  • WordPressの独自テーマ作成（2日間）
  • webedu keigo@m / n15

サーバーサイドの仕組み

PHP入門

WordPressオリジナルテーマ作成

WordPressサーバーの引越し手順

  • アカウント作成（メールアドレス登録→個人情報登録）
  • HTML、PHP、WordPressサーバーの有効化
  • 学校WordPressへ引越しプラグインのインストール（本日実施）
  • 学校WordPressのバックアップ実施（本日実施）
  • 個人WordPressへ引越しプラグインのインストール
  • 個人WordPressへインポート実施
  • 個人WordPressへログイン（学校アカウント）
  • 個人WordPressから学校管理アカウントの削除

【0330】のアジェンダ

サーバサイドスクリプト

PHPやPerlといったプログラミング言語があります。
これらの言語はWebサーバ上で動作します。このことから、これらの言語を「サーバサイドスクリプト」と呼びます。
何らかの操作を実行すると、Webサーバにデータが送信され、サーバの中のプログラムが処理を行い、結果をブラウザに返します。

クライアントサイドスクリプト

一方、JavaScriptでは、記述したHTMLファイルはWebサーバ上でも公開されますが、ブラウザさえあれば実行することが可能です。
Webサーバは必須ではありません。
これは、Webブラウザ内でプログラムが実行されるためです。
このようなスクリプトのことを「クライアントサイドスクリプト」と呼びます。

必要な知識として

合わせて（更に上級編）

それを整理すると

  1. まずプログラムが動くサーバーを用意
  2. PHPやCGIのプログラムファイルを用意
  3. HTML・CSS （JavaScriptで動作） でデザインをカスタマイズする

参考サイト

WordPressとは

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

参考サイト

インストールしてみましょう。

PHPとは

PHPとは動的にWebページを生成することができるサーバーサイドのスクリプト言語です。他のプログラミング言語と比較して仕様や文法が簡単なため習得しやすいと言われています。またMySQLなどのデータベースとの連携が容易なことなどから、WordPressを含めたWebアプリケーションの開発にもよく使われる有名なスクリプト言語でもあります。

参考サイト

2021年4月20日（火）

学科 PHP基礎

-本日のアジェンダ-

1限目
学科 PHP基礎
サーバーサイドスクリプト

2限目
学科 PHP基礎
PHPとは

3限目
学科 PHP基礎
作品制作

4限目
学科 PHP基礎
作品制作

5限目
学科 PHP基礎
作品制作

本日のテーマ

PHPの概要を理解しましょう
（今日は雰囲気を理解してもらえればOK！）

サーバサイドスクリプト

PHPやPerlといったプログラミング言語があります。これらの言語はWebサーバ上で動作します。このことから、これらの言語を「サーバサイドスクリプト」と呼びます。何らかの操作を実行すると、Webサーバにデータが送信され、サーバの中のプログラムが処理を行い、結果をブラウザに返します。

クライアントサイドスクリプト

一方、JavaScriptでは、記述したHTMLファイルはWebサーバ上でも公開されますが、ブラウザさえあれば実行することが可能です。Webサーバは必須ではありません。これは、Webブラウザ内でプログラムが実行されるためです。このようなスクリプトのことを「クライアントサイドスクリプト」と呼びます。

サーバーサイドスクリプトとクライアントサイドスクリプト

PHPとは

PHPとは動的にWebページを生成することができるサーバーサイドのスクリプト言語です。他のプログラミング言語と比較して仕様や文法が簡単なため習得しやすいと言われています。またMySQLなどのデータベースとの連携が容易なことなどから、WordPressを含めたWebアプリケーションの開発にもよく使われる有名なスクリプト言語でもあります。

PHP入門

参考サイト

学習環境のための参考サイト（MAMPとXAMPP）

研修メモ

覚書

2021年4月21日（水）

実技 CMS構築実習①

-本日のアジェンダ-

1限目
実技 CMS構築実習①
オリジナルテーマの構造

2限目
実技 CMS構築実習①
オリジナルテーマの作成

3限目
実技 CMS構築実習①
作品制作

4限目
実技 CMS構築実習①
作品制作

5限目
実技 CMS構築実習①
作品制作

本日のテーマ

HTML・CSSをオリジナルテーマにしてみましょう

WordPressについて

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

HTML・CSSからオリジナルテーマを作成

オリジナルテーマ作成資料をDropBoxからダウンロードしましょう。
「資料→【4】コーディング→wordpress_オリジナルテーマ作成_20200622.pdf」をダウンロードしてください。
「資料→【4】コーディング→task_ohama_20210421.zip」をダウンロードして中に格納してある「task_ohama_20210421」フォルダをデスクトップにコピーしてください。

研修メモ

覚書

学習環境のための参考サイト

WordPressの引越し

WordPressサイトはどうやって引っ越しする？移行方法を解説
※『WordPress　移行』等で検索

参考サイト

WordPress Codex 日本語版
【テーマ自作】WordPress オリジナルテーマの作り方と基本

2021年4月22日（木）

実技 CMS構築実習②

-本日のアジェンダ-

1限目
実技 CMS構築実習②
オリジナルテーマの構造

2限目
実技 CMS構築実習②
オリジナルテーマの作成

3限目
実技 CMS構築実習②
作品制作

4限目
実技 CMS構築実習②
作品制作

5限目
実技 CMS構築実習②
作品制作

本日のテーマ

WordPressらしいオリジナルテーマを作成しましょう

functions.phpの保存形式（昨日の宿題）

オリジナルテーマの作成について

WordPressらしいオリジナルテーマを作成

オリジナルテーマ作成資料をDropBoxからダウンロードしましょう。
「資料→【4】コーディング→task_ohama_20210422.zip」をダウンロードして中に格納してある「task_ohama_20210422」フォルダをデスクトップにコピーしてください。

研修メモ

覚書

  • 引越し大作戦は全員終了です。（来週の月曜日に手順の再確認を行います）
  • 5/5（木）：授業有り、5/17（お休み）に変更されているので注意してください。
  • キャリコンを来週から始めます。（最後のキャリコンです。就職に向けて頑張ってください。）
  • 明日は来所日です。（給付金の資料は後程、齋藤先生がお持ちします）

WordPressについて

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

インストールしてみましょう。

学習環境のための参考サイト

WordPressの引越し

WordPressサイトはどうやって引っ越しする？移行方法を解説
※『WordPress　移行』等で検索

参考サイト

WordPress Codex 日本語版
【テーマ自作】WordPress オリジナルテーマの作り方と基本

2021年4月24日（土）

職業人講話①

-本日のアジェンダ-

1限目
職業人講話①
業界のお話について

2限目
職業人講話①
業界のお話について

3限目
職業人講話①
業界のお話について

4限目
職業人講話①
業界のお話について

5限目
職業人講話①
業界のお話について

ザクロバッカについて

ZAQRO-BACCA合同会社はサービス企業です。
私たちは怠慢になることをせず、常にお客様の事を考え顧客満足度を高めます。
プロ意識を持って、考え、行動し自己管理の下にお客様と共に成長していきます。

サイトURL

2021年4月26日（月）

学科 WEBマーケッティング基礎

-本日のアジェンダ-

1限目
学科 WEBマーケティング基礎
Googleアナリティクスについて

2限目
学科 WEBマーケティング基礎
Googleアナリティクスについて

3限目
学科 WEBマーケティング基礎
作品制作

4限目
学科 WEBマーケティング基礎
作品制作

5限目
学科 WEBマーケティング基礎
作品制作

本日のテーマ

Googleアナリティクスについて

マーケッティングとは？

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の知識が必要になると言う事なのです。

ウェブページのHTMLソースコーダーとブラウザの解析
HTMLはHyperTextMarkupLanguageと言う意味を持つものです。HTMLはウェブページを表示する時の記述言語であり、ブラウザはこのHTML文書を先頭から読み込み解析を行っていきます。
そしてユーザーが見る画面を表示させているのです。HTML文書の中にはユーザーが目にする事が出来る文字列や画像と言った物が記述されています。

画像に関しては、リンクが貼られているに過ぎませんが、その画像が何処にあるのかなどのリンクの情報がHTML文書の中に記述されているのです。これらのHTMLを記述するのはHTMLソースコーダーと呼ばれる人々がHTML文書を記述しているのですが、ユーザーが目にする事のないタグと呼ばれるものがHTML文書の中にはあるわけです。
ブラウザはHTML文書を読み込む時に先頭から読み込んで行きますが、このタグと言うものはブラウザが解析を行うものであり、ユーザーが目にするものはその解析結果に過ぎないのです。

正しいキーワード選定をしましょう。

SEOの基本といえばキーワード選定から始まりますが（その前に市場・ユーザー調査があるという話は置いておき）、今回はGoogleアナリティクスを活用した効果的なキーワード選定の方法を具体的に紹介してくれた記事をサーチエンジンランドから紹介します。意外と検索ボリュームや個人の感覚で決めがちなキーワード選定、せっかくSEOをするならきちんと正しいキーワードを選びたい。 — SEO Japan

まず、こんな記事を・・・

被リンクについて

被リンクの扱いはとても要注意です！！
まだまだ理解されていない企業、制作会社がまだ多いです。
SEO対策でとても重要な内容になります。

SNSについて

Googleアナリティクス

Google Analyticsは、Googleが無料で提供するWebページのアクセス解析サービス。 元々はGoogleが2005年に買収した、米国のWeb解析ソリューションプロバイダー・Urchin社の技術を利用している。

Googleウェブマスターツール（Google Search Console）について

SEOチェックツール

参考サイト

情報：ブラウザのスーパーリロードについて

HTML/CSSをサーバーにアップしたのだけども画面が乱れる（更新されていない）現象が発生することがあります。これは、PCに保存されているキャッシュが原因のことがあります。スーパーリロードを行えば解消されますので覚えておいてください。ホームページの変更依頼を受けて修正を行なったが修正されていないとクレームをもらった時の原因のこともありますので注意してください。「スーパーリロード」は「フルリロード」や「強制再読み込み」と呼ばれることもあります。

確認：WordPressの引越しについて

WordPressの引越しを行う時の手順は以下の通りとなりますのでサーバー管理者として再確認をしてください。

  1. 引越し元のWordPressに「All-in-One WP Migration」というプラグインをインストールし有効化を実施
  2. 「All-in-One WP Migration」というメニューが追加されるので、このメニューから「エクスポート」を選択
  3. エクスポート先に「ファイル」を選択し「ダウンロード」ボタンをクリックしファイルを保存
  4. ［XFREEの場合］：「失敗 サーバーに問題が発生しました」が発生するのでFTPを使用してファイルを取り出し（FTPを有効にしてファイルを取り出す手順は下記の※1を参照）
  5. 引越し先のWordPressに「All-in-One WP Migration」というプラグインをインストールし有効化を実施
  6. 「All-in-One WP Migration」というメニューが追加されるので、このメニューから「インポート」を選択
  7. インポート元に「ファイル」を選択しエクスポートしたファイルを選択（ファイルアップロードが開始）
  8. インポート開始の確認ウィンドウが表示されるので「開始」をクリック
  9. インポート完了の確認ウィンドウが表示されるので「完了」をクリック
  10. 「ログアウト」してインポート元のユーザー情報でログインを実施
  11. サイト内容が引越しされていることを確認（学校のバックアップをインポートした時は「test」ユーザーを削除）

※1：XFREEでFTPを有効にしてエクスポートファイルを取り出す方法
（ 1. ～ 7. は1回だけ実施）

  1. XFREEの管理者画面にログイン
  2. WordPressの管理パネルに移動
  3. 対象のWordPressIDの「設定」をクリック
  4. 「FTPアカウント設定」をクリック
  5. パスワードを入力、利用設定：有効、全てのファイル・フォルダにアクセスすると設定し「設定変更（確認）」をクリック
  6. 確認画面が表示されるので「設定編集（確定）」をクリック
  7. 「FTPアカウント設定」をクリックした時に表示される情報を使用してFFFTPのホスト情報を設定（ホストの設定名：サーバー名称（自由）、ホスト名：FTPホスト名、ユーザー名：FTPアカウント名、パスワード：設定したパスワード）
  8. FFFTPで「接続」を実施
  9. サーバー側のフォルダで「wp-content」→「ai1wm-backups」を選択し「<サーバーURL>-<日付>-<・・・>.wpress」というファイルを取り出し
  10. エクスポートファイルは複数作成されるので不要になったものは削除（ディスク容量が不足します）

研修メモ

覚書

  • スタイルシート変更時のブラウザのリロードについて
  • WordPress引越しの手順再確認
  • Googleにサイト情報登録

2021年4月27日（火）

実技 ポートフォリオ作成実習

-本日のアジェンダ-

1限目
実技　ポートフォリオ作成実習
ポートフォリオ制作について

2限目
実技　ポートフォリオ作成実習
ポートフォリオ制作について

3限目
実技　ポートフォリオ作成実習
作品制作

4限目
実技　ポートフォリオ作成実習
作品制作

5限目
実技　ポートフォリオ作成実習
作品制作

本日のテーマ

紙ポートフォリオを作成しましょう

紙ポートフォリオの必要性

  • 面接時は紙ポートフォリオが有用（迅速な対応が可能／面接担当者のデジタルリテラシーに非依存）
  • 掲載内容を相手に合わせて調整できる
  • 迫力がある（フライヤーや名刺などの紙媒体を現物に近い形で提示可能）

参考サイト

ポートフォリオの記載事項

  • 表紙
  • 目次
  • 自己紹介（氏名、生年月日、顔写真、経歴、保有資格、強みなど）
  • 保有スキル（業務スキルやスキルレベルも記載）
  • 作品（必要に応じて中扉／作品の説明やアピールポイントを記載）
  • 裏表紙

紙ポートフォリオの作成手順

  1. ポートフォリオ構成を決定
  2. 掲載する制作物を整理（必要に応じてカラー設定をCMYK、解像度を300～350ppiに変更）
  3. ページ割りを決定（見開きにする時は左右を意識）
  4. 表紙とページのラフデザインを決定
  5. ページデザインの作成
  6. 表紙、目次、中扉、裏表紙の作成

参考サイト

注意事項

  • 媒体型式：製本するかポケットファイルにするか（自作、ネット、店舗（キンコーズなど））
  • 大きさとページ数：A4で15～25ページ程度（背景色を付ける時はB4にトンボ付きで作成しカット）
  • 紙媒体：厚めの上質紙かコート紙

ワンポイント

サイトのファーストビューが見えるようにPCやスマホの画面キャプチャを入れるのが良いですが、よりデザイン性を高めるため機器のデバイスイメージにはめ込みをするのがお勧めです。（下記のサイトからのダウンロードは容量が大きいので自宅で実施してください／必要な人はUSBメモリで提供します）

研修メモ

覚書

  • 今後の予定説明（①中間提出有り、②成績考査が最終提出だが事前確認予定（5/11）、③2日間で発表会を実施、④最終日はPC使用不可）
  • Webサイト作成の提案（①自分の作成パターンを作る、②ポートフォリオネタを増やす、③デザインカンプに忠実に作成する）
  • デバイスイメージ活用例紹介
  • 大浜、橋本さん、大原さんの紙ポートフォリオ紹介

2021年4月28日（水）

実技　デザイン総合制作実習①

-本日のアジェンダ-

1限目
実技　デザイン総合制作実習①
就職に向けてのお話

2限目
実技　デザイン総合制作実習①
修了制作

3限目
実技　デザイン総合制作実習①
修了制作

4限目
実技　デザイン総合制作実習①
修了制作

5限目
実技　デザイン総合制作実習①
修了制作

本日のテーマ

仕事を取るにはその1「市場調査をしましょう」

主な求人媒体

※求人サイトは必ず会員登録をしましょう！

その他参考サイト

研修メモ

覚書

2021年4月29日（木）

実技　デザイン総合制作実習②

-本日のアジェンダ-

1限目
実技　デザイン総合制作実習②
就職に向けてのお話

2限目
実技　デザイン総合制作実習②
修了制作

3限目
実技　デザイン総合制作実習②
修了制作

4限目
実技　デザイン総合制作実習②
修了制作

5限目
実技　デザイン総合制作実習②
修了制作

本日のテーマ

応募を進めていきましょう！

主な求人媒体

※求人サイトは必ず会員登録をしましょう！

その他参考サイト

研修メモ

覚書

2021年4月30日（金）

実技　デザイン総合制作実習③

-本日のアジェンダ-

1限目
実技　デザイン総合制作実習③
就職に向けてのお話

2限目
実技　デザイン総合制作実習③
修了制作

3限目
実技　デザイン総合制作実習③
修了制作

4限目
実技　デザイン総合制作実習③
修了制作

5限目
実技　デザイン総合制作実習③
修了制作

本日のテーマ

応募を進めていきましょう！

主な求人媒体

※求人サイトは必ず会員登録をしましょう！

その他参考サイト

研修メモ

覚書

2021年5月5日（木）

実技　デザイン総合制作実習④

-本日のアジェンダ-

1限目
実技　デザイン総合制作実習④
修了制作

2限目
実技　デザイン総合制作実習④
修了制作

3限目
実技　デザイン総合制作実習④
修了制作

4限目
実技　デザイン総合制作実習④
修了制作

5限目
実技　デザイン総合制作実習④
セミナーについてのお話など

本日のテーマ

デザイナーとしての生活について

セミナーとは？

  1. 大学の教育方法の一つ。先生の指導のもとに学生が集まってする共同研究。演習。
  2. 一般に、研究講習会。 「経営―」▷ 「ゼミナール」とも言う。 seminar

【ワンポイント！】
技術セミナーは最低6割知っている知識の内容のセミナーに参加しましょう。
質疑応答はありますが、登壇者は決められたセッション（時間内）に話す内容が決まっているので、基本知識が無いと意味不明で終わることがあります。

スクールとは？

スクール (school) は英語で「学校」の意味。ギリシャ語のscholé（学ぶ場所）に由来。

また日本では、法律上「学校」と称すことができない無認可校が「スクール」と称することがある。

【ワンポイント！】
スクールは有料で高額です。何を学びたいのか、後にどうなるのかを明確にしておかないと得をしないケースが多いです。

書籍について

【ワンポイント！】
技術には賞味期限があります。ただ基本の1～10を学ぶのには丁度よかったりもします。これもセミナーと同じく最低6割以上基本知識知っている書籍を選んで読んでみると良いかと思います。
一番のおススメは、立ち読みです！

ネット検索について

【ワンポイント！】
便利でピンポイントの情報を調べられますが、「誤報」が多いです。
更新履歴や情報の発信元などに注意して調べてみましょう。

セミナー・スクール等の一例

ポートフォリオはコミュニケーションの機会です。

本当によく考えられているポートフォリオは「伝え方」「伝える情報」に無理や無駄がなく、それでいてそれを作った本人の魅力を十分に備えているとよいでしょう。

参考サイト

お仕事の順として

未経験者の場合、Webデザイン会社に入社して、いきなり初日からWebデザインを任されることはほとんどありません。
何をするかのイメージをしっかりと準備を進めていきましょう。

参考サイト

決算について

決算とは、一定期間の収入・支出を計算し、利益又は損失を算出すること。一般的には予算の対義語であるが、財政学では予算過程の一つとして捉えられる。 ウィキペディア

就職活動と決算時期について

主な求人媒体

※求人サイトは必ず会員登録をしましょう！

その他参考サイト

研修メモ

覚書

2021年5月6日（木）

実技　デザイン総合制作実習⑤

-本日のアジェンダ-

1限目
実技　デザイン総合制作実習⑤
Webサイト作成時のTipsについて

2限目
実技　デザイン総合制作実習⑤
Webサイト作成時のTipsについて

3限目
実技　デザイン総合制作実習⑤
修了制作

4限目
実技　デザイン総合制作実習⑤
修了制作

5限目
実技　デザイン総合制作実習⑤
修了制作

本日のテーマ

Webサイト作成時のTipsを再確認しましょう。

Webサイト作成時のTipsについて

Webサイト作成時に悩む・調べるなどが考えられる項目について説明します。本項目は3月16日にHTML・CSSのTipsとして一度説明しましたが類似項目で悩んでいる人がいるので復習の意味も含めて再度説明します。

Webサイト作成時のTips説明資料をDropBoxからダウンロードしましょう。
「資料→【4】コーディング→task_ohama_20210506.zip」をダウンロードして中に格納してある「task_ohama_20210506」フォルダをデスクトップにコピーしてください。

ポートフォリオ（紙版）の作成スケジュールについて

紙版のポートフォリオの作成スケジュールは、以下の通りとなりますので計画的に進めてください。提出はPDF（最小圧縮）で指定のDropBoxに格納してもらいます。

  • 5月11日：ポートフォリオの中間提出（途中の状態で可）
  • 5月15日：ポートフォリオ（発表会用）の提出
  • 5月18日：ポートフォリオの発表会、ポートフォリオの最終提出（成績考査）
  • 5月19日：ポートフォリオの発表会、PCファイル削除
  • 5月20日：修了式（PC使用不可）

研修メモ

覚書

  • 紙ポートフォリオ（PDF）は途中版提出：5/11、最終版（成績考査版）：5/18です。
  • 5/18、5/19は紙ポートフォリオの発表会となりますので5/15までに提出できるように進めてください。（成績考査版としては5/18まで再提出可能です）
  • 5/19は発表会の後にPCのデータ消去作業を行いますのでバックアップ用のUSBメモリを忘れずに持ってきてください。（データ消去作業後（5/20を含めて）はPCを使用できません）

2021年5月7日（金）

実技　デザイン総合制作実習⑥

-本日のアジェンダ-

1限目
実技　デザイン総合制作実習⑥
Webアプリケーションについて

2限目
実技　デザイン総合制作実習⑥
Webアプリケーションについて

3限目
実技　デザイン総合制作実習⑥
修了制作

4限目
実技　デザイン総合制作実習⑥
修了制作

5限目
実技　デザイン総合制作実習⑥
修了制作

本日のテーマ

Webアプリケーションの概要を確認しましょう。（その１）

Webアプリ（JavaScript）訓練の教材について

DropBoxを開いて「資料 → 【4】コーディング」から「task_ohama_20210507.zip」をダウンロードしてください。
ダウンロードが完了したらzipファイル内のフォルダをデスクトップにコピーしてください。
以下の3つの教材が格納されています。

キッチンタイマーとビンゴマシーンは自作なので自由に使用して頂いて問題ありません。
ぷよぷよゲームについてはJavaScriptの勉強用に提供されているものです。
使用にあたっては以下のサイトを確認してください。

研修メモ

覚書

  • メディクエリの閾値
  • Flexbox vs CSS Grid
  • animation / transition / transform
  • アニメーション

2021年5月8日（土）

実技　デザイン総合制作実習⑦

-本日のアジェンダ-

1限目
実技　デザイン総合制作実習⑦
Webアプリケーションについて

2限目
実技　デザイン総合制作実習⑦
Webアプリケーションについて

3限目
実技　デザイン総合制作実習⑦
修了制作

4限目
実技　デザイン総合制作実習⑦
修了制作

5限目
実技　デザイン総合制作実習⑦
修了制作

本日のテーマ

Webアプリケーションの概要を確認しましょう。（その２）

Webアプリ（JavaScript）訓練の教材について

本日使用するファイルは、昨日（5月7日）にダウンロードしたファイルです。ファイルが無い時は以下のダウンロードを実施してください。

DropBoxを開いて「資料 → 【4】コーディング」から「task_ohama_20210507.zip」をダウンロードしてください。
ダウンロードが完了したらzipファイル内のフォルダをデスクトップにコピーしてください。
以下の3つの教材が格納されています。

  • timer：キッチンタイマー
  • bingo：ビンゴマシーン
  • puyopuyo：ぷよぷよゲーム

キッチンタイマーとビンゴマシーンは自作なので自由に使用して頂いて問題ありません。
ぷよぷよゲームについてはJavaScriptの勉強用に提供されているものです。
使用にあたっては以下のサイトを確認してください。

Webサイト作成テクニック

ブレイクポイントの設定値

備忘録（昨日の話）

ポートフォリオ（紙版）の作成スケジュールについて

紙版のポートフォリオの作成スケジュールは、以下の通りとなりますので計画的に進めてください。提出はPDF（最小圧縮）で指定のDropBoxに格納してもらいます。

  • 5月11日：ポートフォリオの中間提出（途中の状態で可）
  • 5月15日：ポートフォリオ（発表会用）の提出
  • 5月18日：ポートフォリオの発表会、ポートフォリオの最終提出（成績考査）
  • 5月19日：ポートフォリオの発表会、PCファイル削除
  • 5月20日：修了式（PC使用不可）

研修メモ

覚書

レイアウトデザインの考察

ホームページ作成で稼ぐ

Webサイト開発の勉強からサイト開設まで

2021年5月10日（月）

実技　デザイン総合制作実習⑧

-本日のアジェンダ-

1限目
実技　デザイン総合制作実習⑧
Illustratorの小技

2限目
実技　デザイン総合制作実習⑧
修了制作

3限目
実技　デザイン総合制作実習⑧
修了制作

4限目
実技　デザイン総合制作実習⑧
修了制作

5限目
実技　デザイン総合制作実習⑧
修了制作

本日のテーマ

Illustratorの小技を使ってスピードアップしてみよう

便利なショートカットキー

  • Ctrl+F　前面にコピー（同じ座標にコピー）
  • Ctrl+B　背面にコピー
  • Ctrl+D　 直前の変形を繰り返し
  • Ctrl+y　 アウトライン表示とプレビュー表示を切り替え

>Illustrator作業の効率化！覚えておきたいショートカットキーとカスタマイズ

>これで作業効率が劇的に上がる！Illustratorのショートカットキー早見表

研修メモ

覚書

2021年5月11日（火）

実技　デザイン総合制作実習⑨

-本日のアジェンダ-

1限目
実技　デザイン総合制作実習⑨
CSSアニメーションについて

2限目
実技　デザイン総合制作実習⑨
CSSアニメーションについて

3限目
実技　デザイン総合制作実習⑨
修了制作

4限目
実技　デザイン総合制作実習⑨
修了制作

5限目
実技　デザイン総合制作実習⑨
修了制作

本日のテーマ

CSSアニメーションの概要を確認しましょう。

CSSアニメーションの訓練教材について

本日は、CSSアニメーションの概要を確認します。
DropBoxを開いて「資料 → 【4】コーディング」から「task_ohama_20210511.zip」をダウンロードしてください。
ダウンロードが完了したらzipファイル内のフォルダをデスクトップにコピーしてください。

アニメーションが印象に残るサイト（参考）

ポートフォリオ（紙版）の作成スケジュールについて

紙版のポートフォリオの作成スケジュールは、以下の通りとなりますので計画的に進めてください。
本日の中間提出はDropBoxの中間提出は「提出→【作品】ポートフォリオ（中間報告）_20210511」に5時限目の終了までにPDF（最小圧縮）で格納してください。ファイル名は「〇〇〇〇_20210511.pdf」に設定してください。（〇〇〇〇は氏名）

  • 5月11日：ポートフォリオの中間提出（途中の状態で可）
  • 5月15日：ポートフォリオ（発表会用）の提出
  • 5月18日：ポートフォリオの発表会、ポートフォリオの最終提出（成績考査）
  • 5月19日：ポートフォリオの発表会、PCファイル削除
  • 5月20日：修了式（PC使用不可）

研修メモ

覚書

2021年5月12日（水）

実技　デザイン総合制作実習⑩

-本日のアジェンダ-

1限目
実技　デザイン総合制作実習⑩
Photoshopの小技

2限目
実技　デザイン総合制作実習⑩
修了制作

3限目
実技　デザイン総合制作実習⑩
修了制作

4限目
実技　デザイン総合制作実習⑩
修了制作

5限目
実技　デザイン総合制作実習⑩
修了制作

本日のテーマ

Photoshopの小技を使ってスピードアップしてみよう

●ブラシの太さショートカット（CS5から実装）

alt　を押しながら左右に右クリックでドラッグ　：　ブラシサイズの変更
alt　を押しながら上下に右クリックでドラッグ　：　ブラシのぼかしのサイズ変更

>知ってると効率があがる！ブラシツールなどで使える描画系ツールのショートカット

●ズーム

alt　押しながらマウスホイール

>マウスホイールでズームする

●鏡面反射の表現

>Photoshopで鏡面反射の効果を付ける方法【初心者向け】

研修メモ

覚書

2021年5月13日（木）

実技　デザイン総合制作実習⑪

-本日のアジェンダ-

1限目
実技　デザイン総合制作実習⑪
就職に向けてのお話

2限目
実技　デザイン総合制作実習⑪
修了制作

3限目
実技　デザイン総合制作実習⑪
修了制作

4限目
実技　デザイン総合制作実習⑪
修了制作

5限目
実技　デザイン総合制作実習⑪
修了制作

本日のテーマ

応募書類、面接準備のブラッシュアップをしよう

●志望動機に盛り込みたい事柄

  1. どうしてやりたいのか
  2. この先どうなっていたいか
  3. 何が貢献できるのか
  4. どうして貴社なのか

１から３までは基本変わらないので一度作ってしまえば使いまわせると思います。

４は短くても構いませんので必ず付け加えるようにしましょう。

●面接でよく聞かれること

  1. 簡単な自己紹介をお願いします。
  2. 弊社に入って何がしたいですか
  3. 将来的にどうなっていたいですか
  4. 何か質問ありますか

１から４それぞれ答えを用意しておいて損のない質問だと思います。

４の何か質問ありますかの回答で個人的に効果的だなと感じたのは

「もし入社出来ましたら一日でも早く御社に貢献したいと考えております。そのために一番必要なことはなんですか」

また、自分の勉強のために聞けそうな雰囲気であればポートフォリオの感想やアドバイスなど聞いてみてもいいと思います。

研修メモ

覚書

2021年5月14日（金）

実技　デザイン総合制作実習⑫

-本日のアジェンダ-

1限目
実技　デザイン総合制作実習⑫
Flexboxについて

2限目
実技　デザイン総合制作実習⑫
Flexboxについて

3限目
実技　デザイン総合制作実習⑫
修了制作

4限目
実技　デザイン総合制作実習⑫
修了制作

5限目
実技　デザイン総合制作実習⑫
修了制作

本日のテーマ

Flexboxを活用しましょう

Flexboxの訓練教材について

本日は、Flexboxの概要を確認します。また、先日説明したCSSアニメーションの補足説明を実施します。
DropBoxを開いて「資料 → 【4】コーディング」から「task_ohama_20210514.zip」をダウンロードしてください。
ダウンロードが完了したらzipファイル内のフォルダ（2個）をデスクトップにコピーしてください。

要素を並べるには

ポートフォリオ（紙版）の作成スケジュールについて

紙版のポートフォリオの作成スケジュールは、以下の通りとなりますので計画的に進めてください。

  • 5月11日：ポートフォリオの中間提出（途中の状態で可）【完了】
  • 5月15日：ポートフォリオ（発表会用）の提出
  • 5月18日：ポートフォリオの発表会、ポートフォリオの最終提出（成績考査）
  • 5月19日：ポートフォリオの発表会、PCファイル削除
  • 5月20日：修了式（PC使用不可）

研修メモ

覚書

2021年5月15日（土）

実技　デザイン総合制作実習⑬

-本日のアジェンダ-

1限目
実技　デザイン総合制作実習⑬
CSSセレクタの再確認について

2限目
実技　デザイン総合制作実習⑬
修了制作

3限目
実技　デザイン総合制作実習⑬
修了制作

4限目
実技　デザイン総合制作実習⑬
修了制作

5限目
実技　デザイン総合制作実習⑬
修了制作

本日のテーマ

CSSセレクタの記述方法を再確認しましょう。

CSSセレクタについてについて

ポートフォリオ（紙版）の作成スケジュールについて

紙版のポートフォリオの作成スケジュールは、以下の通りとなりますので計画的に進めてください。
本日の発表会用ポートフォリオ提出は、DropBoxの「提出→【作品】ポートフォリオ（発表会用）_20210515」に5時限目の終了までにPDF（最小圧縮）で格納してください。ファイル名は「〇〇〇〇_20210515.pdf」に設定してください。（〇〇〇〇は氏名）

  • 5月11日：ポートフォリオの中間提出（途中の状態で可）【完了】
  • 5月15日：ポートフォリオ（発表会用）の提出
  • 5月18日：ポートフォリオの発表会、ポートフォリオの最終提出（成績考査）
  • 5月19日：ポートフォリオの発表会、PCファイル削除
  • 5月20日：修了式（PC使用不可）

研修メモ

覚書

2021年5月18日（火）

実技　デザイン総合制作実習⑭

-本日のアジェンダ-

1限目
実技　デザイン総合制作実習⑭
成績考査

2限目
実技　デザイン総合制作実習⑭
成績考査

3限目
実技　デザイン総合制作実習⑭
成績考査

4限目
実技　デザイン総合制作実習⑭
成績考査

5限目
実技　デザイン総合制作実習⑭
成績考査

本日のテーマ

最後の成績考査です。

研修メモ

覚書

2021年5月19日（水）

実技　デザイン総合制作実習⑮

-本日のアジェンダ-

1限目
実技　デザイン総合制作実習⑮
発表会

2限目
実技　デザイン総合制作実習⑮
発表会

3限目
実技　デザイン総合制作実習⑮
発表会

4限目
実技　デザイン総合制作実習⑮
発表会

5限目
実技　デザイン総合制作実習⑮
発表会

本日のテーマ

発表会です。

研修メモ

ポートフォリオ発表方法

  • ファイルサイズの大きい順に前に出て発表（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年5月20日（木）

修了式


1限目
職業人講話②
就職に向けての話

2限目
修了式

3限目
修了式

この投稿へのコメント

コメントはありません。

コメントを残す

メールアドレスが公開されることはありません。 ※ が付いている欄は必須項目です

この投稿へのトラックバック

トラックバックはありません。

トラックバック URL