202111開講-昼A前-0344

2021年11月15日（月）

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

-本日のアジェンダ-

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

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

2021年11月16日（火）

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

–本日のアジェンダ–

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

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

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

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

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

本日のポイント

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

最初の準備として

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

ジョブカードについて

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

参考サイト

履歴書とは？

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

参考サイト

職務経歴書とは？

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

参考サイト

自己紹介

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

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

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

2021年11月17日（水）

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

-本日アジェンダ-

1限目
学科 WEBプログラミング基礎
そもそもWEBとは？

2限目
学科 WEBプログラミング基礎
そもそもWEBとは？

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

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

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

本日のポイント

Webとは？

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

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

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

WEBサイトの種類

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

2021年11月22日（月）

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

-本日アジェンダ-

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

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

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

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

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

本日のポイント

6ヶ月間の制作の企画を考え、とにかくアイデアを書き出しましょう。

コンサルタントとは？

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

参考サイト

～ご提案～

WEBサイト制作全般

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

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

サイトマップとは？

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

本日の課題

明日の1限目終了時点での企画書を、DropboxにUPしてください。
ファイル名は、task_xxxx_20211123.txtです。
※xxxxはアルファベット小文字でお名前を入力してください。
提出先フォルダ・・・
WEBデザイナー養成(午前)科 / 提出 /【0344】企画 11月23日(火)

https://samplesdl.me/deau-f/?page_id=7&embed=true#?secret=gue4X6Zulf

ttps://samplesdl.me/deau-f/?page_id=7&embed=true#?secret=gue4X6Zulf

2021年11月23日（火）

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

-本日アジェンダ-

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

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

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

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

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

本日のポイント

企画は最初が大事

発表に向けて、企画書をまとめましょう。

WEB業界のお仕事

本日の課題

1限目終了時点での完成した企画書をDropboxにUPしてください。
ファイル名は、task_xxxx_20211123.txtです。

提出先フォルダ・・・
WEBデザイナー養成(午前)科 / 提出 /【0344】完成企画11月23日(火)

https://samplesdl.me/deau-f/?page_id=7&embed=true#?secret=NfF2Pjieqg

https://samplesdl.me/deau-f/?page_id=7&embed=true#?secret=NfF2Pjieqg

2021年11月29日（月）

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

-本日のアジェンダ-

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

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

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

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

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

本日のテーマ

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

本日のIllustratorの基本操作

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

新規作成・開く

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

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

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

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

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

参考サイト

ワンポイントアドバイス

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

アートボード

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

参考サイト

選択ツール

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

参考サイト

図形ツール

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

参考サイト

パスファインダーツール

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

参考サイト

プロパティパネル

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

ズームツール

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

本日の課題

とにかく何かを描いて、作品を「pdf（最小ファイルサイズ）」で保存してDropboxのご自身のフォルダにUPしてください。
ファイル名は、task_xxxx_20211129.pdfです。
(xxxxの部分はご自身の名前のローマ字表記、小文字)
※pdfのファイルは必ず「最小ファイルサイズ」でUPしてください。

https://samplesdl.me/deau-f/?page_id=7&embed=true#?secret=GjFKPLeY3U

https://samplesdl.me/deau-f/?page_id=7&embed=true#?secret=GjFKPLeY3U

2021年11月30日（火）

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

-本日のアジェンダ-

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

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

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

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

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

本日テーマ

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

本日のIllustratorの基本操作

  • 塗りと線
  • ダイレクト選択ツール
  • パス「アンカーポイント」「ハンドル」「セグメント」
  • リフレクトツールと回転ツール
  • 変形の繰り返し「Ctrl+D」
  • シェイプ形成ツール
  • レイヤーパネル

オブジェクトの塗りと線

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

参考サイト

ダイレクト選択ツール

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

参考サイト

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

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

参考サイト

リフレクトツール

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

参考サイト

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

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

シェイプ形成ツール

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

参考サイト

レイヤーパネル

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

参考サイト

本日の課題

とにかく何かを描いて、作品を「pdf（最小ファイルサイズ）」で保存してDropboxのご自身のフォルダにUPしてください。
ファイル名は、task_xxxx_20211130.pdfです。
(xxxxの部分はご自身の名前のローマ字表記、小文字)
※pdfのファイルは必ず「最小ファイルサイズ」でUPしてください。

-引き続きの基本操作-

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

新規作成・開く

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

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

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

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

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

参考サイト

ワンポイントアドバイス

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

アートボード

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

参考サイト

選択ツール

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

参考サイト

図形ツール

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

参考サイト

パスファインダーツール

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

参考サイト

プロパティパネル

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

ズームツール

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

https://samplesdl.me/deau-f/?page_id=7&embed=true#?secret=Yk9tP29Vtv

2021年12月01日（水）

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

-本日のアジェンダ-

1限目
学科 グラフィックデザイン基礎③
基本操作について

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

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

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

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

本日テーマ

画像をトレースしてみましょう。

本日のIllustratorの基本操作

  • ペンツール
  • 曲線ツール
  • カラー
  • スウォッチパネル
  • スポイト
  • 配置（テンプレートにチェック）

ペンツール

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

参考サイト

曲線ツール

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

参考サイト

カラー

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

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

参考サイト（Ai）

参考サイト（Ps）

スウォッチパネル

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

参考サイト（Ai）

参考サイト（Ps）

スポイトツール

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

参考サイト（Ai）

参考サイト（Ps）

本日の課題

画像をトレースした作品を「pdf（最小ファイルサイズ）」で保存してDropboxのご自身のフォルダにUPしてください。
ファイル名は、task_xxxx_20211201.pdfです。
(xxxxの部分はご自身の名前のローマ字表記、小文字)

https://samplesdl.me/deau-f/?page_id=7&embed=true#?secret=xkeFYeGPxH

https://samplesdl.me/deau-f/?page_id=7&embed=true#?secret=xkeFYeGPxH

-引き続きの基本操作-

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

オブジェクトの塗りと線

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

参考サイト

ダイレクト選択ツール

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

参考サイト

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

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

参考サイト

シェイプ形成ツール

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

参考サイト

レイヤーパネル

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

参考サイト

その他の便利機能参考サイト

新規作成・開く

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

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

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

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

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

参考サイト

ワンポイントアドバイス

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

アートボード

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

参考サイト

選択ツール

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

参考サイト

図形ツール

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

参考サイト

パスファインダーツール

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

参考サイト

プロパティパネル

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

ズームツール

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

2021年12月06日（月）

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

-本日のアジェンダ-

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

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

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

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

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

本日のテーマ

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

トリミングとは？

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

本日のPhotoshopの基本操作

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

ファイルの作成方法

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

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

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

写真素材（練習用）

保護中: 練習用素材

練習用素材を集めたページへのリンクです。
※パスワード保護中

選択範囲

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

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

参考サイト

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

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

参考サイト

ワンポイントアドバイス

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

レイヤーパネル

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

参考サイト

レイヤーマスクについて

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

参考サイト

描画色と背景色

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

参考サイト

ブラシツールとは？

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

参考サイト

切り抜きツールとは？

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

参考サイト

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

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

参考サイト

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

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

参考サイト

本日の課題

とにかく2つの写真を合成して「jpg」のデータをDropboxのご自身のフォルダにUPしてください。
ファイル名は、task_xxxx_20211206.jpgです。
(xxxxの部分はご自身の名前のローマ字表記、小文字)
※ネット上の写真には権利がありますので、あくまでも課題用として取り扱ってください。

https://samplesdl.me/deau-f/?page_id=7&embed=true#?secret=4hWUEmzgaN

https://samplesdl.me/deau-f/?page_id=7&embed=true#?secret=4hWUEmzgaN

■無料写真素材のサイト

2021年12月07日（火）

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

投稿日: 2021-12-07 作成者: master

-本日のアジェンダ-

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

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

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

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

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

本日のテーマ

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

レタッチとは？

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

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

  • パッチツール
  • コピースタンプツール
  • スポット修復ブラシツール
  • 修復ブラシツール
  • コンテンツに応じた移動ツール
  • ぼかしツール
  • シャープツール
  • 指先ツール
  • 覆い焼きツール
  • 焼き込みツール
  • スマートオブジェクト（レイヤーをラスタライズ）
  • カンバスサイズ
  • 画像解像度

レタッチについて

引き続きの基本操作

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

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

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

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

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

参考サイト

・カンバスサイズ

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

参考サイト

・画像解像度

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

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

参考サイト

ファイルの作成方法

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

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

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

写真素材（練習用）

保護中: 練習用素材

練習用素材を集めたページへのリンクです。
※パスワード保護中

選択範囲

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

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

参考サイト

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

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

参考サイト

ワンポイントアドバイス

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

レイヤーパネル

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

参考サイト

レイヤーマスクについて

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

参考サイト

描画色と背景色

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

参考サイト

ブラシツールとは？

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

参考サイト

切り抜きツールとは？

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

参考サイト

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

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

参考サイト

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

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

参考サイト

本日の課題

とにかく何かを描いた作品の「jpg」データをDropboxのご自身のフォルダにUPしてください。
ファイル名は、task_xxxx_20211207.jpgです。
(xxxxの部分はご自身の名前のローマ字表記、小文字)

https://samplesdl.me/deau-f/?page_id=7&embed=true#?secret=NhpPmtXNGT

https://samplesdl.me/deau-f/?page_id=7&embed=true#?secret=NhpPmtXNGT

■無料写真素材のサイト

2021年12月08日（水）

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

-本日のアジェンダ-

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

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

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

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

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

本日のテーマ

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

色調補正とは？

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

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

  • 明るさ・コントラスト
  • レベル補正
  • トーンカーブ
  • 色相・彩度
  • カラーバランス
  • 白黒
  • アンシャープマスク
  • クリッピングマスク
  • 調整レイヤー
  • ヒストリーパネル
https://samplesdl.me/deau-f/%e8%89%b2%e8%aa%bf%e8%a3%9c%e6%ad%a3%e3%81%ab%e3%81%a4%e3%81%84%e3%81%a6/embed/#?secret=21DBtObE5E

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

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

写真素材（練習用）

保護中: 練習用素材

練習用素材を集めたページへのリンクです。
※パスワード保護中

■無料写真素材のサイト

アンシャープマスク

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

参考サイト

クリッピングマスク

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

参考サイト

調整レイヤー

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

参考サイト

ヒストリーパネル

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

参考サイト

本日の課題

編集した合成写真の「jpg」データをDropboxのご自身のフォルダにUPしてください。
ファイル名は、task_xxxx_20211208.jpgです。
(xxxxの部分はご自身の名前のローマ字表記、小文字)

引き続きの基本操作

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

レタッチについて

  • スマートオブジェクト（レイヤーをラスタライズ）
  • カンバスサイズ
  • 画像解像度
  • 選択範囲
  • レイヤーパネル
  • クリッピングマスク
  • ブラシツール
  • 描画色と背景色
  • ファイルの移動とコピー
  • 切り抜きツール
  • 自由変形（ctrl + T）
  • Web用に保存（従来）

2021年12月13日（月）

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

-本日のアジェンダ-

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

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

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

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

5限目
学科 グラフィックデザイン基礎⑦
作品講評

本日のテーマ

本日は成績考査

5限目に講評を行います。

第1回成績考査

Dropboxから【0344】第1回成績考査＞grade-check_〇〇〇〇_20211213.ai」をダウンロードして、
「イラスト」「写真」「配色」を取り入れた作品を作成してください。
テーマは「喜怒哀楽」です。

出来たものを、「pdf（最小ファイルサイズ）」で保存して4限目終了までにDropboxにUPしてください。
ファイル名は、grade-check_xxxx_20211213.pdfです。
(xxxxの部分はご自身の名前のローマ字表記、小文字)

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

2021年12月14日（火）

学科 DTP基礎

-本日のアジェンダ-

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

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

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

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

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

本日のテーマ

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

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

参考資料

ドロップボックス
資料＞【2】デザインに必要な素材の作成＞「学科 DTP基礎 12月14日(火)」に、
作品制作のポイントをまとめた資料があります。

今後の日程

  • 12月15日(水)　ピクトグラム
  • 12月21日(火)　ロゴ
  • 12月22日(水)　アクセスマップ
  • 12月27日(月)　名刺
  • 12月28日(火)　DM
  • 12月29日(水)　全作品の納品日（成績考査）

本日の課題

ドロップボックス
資料＞【2】デザインに必要な素材の作成＞「学科 DTP基礎 12月14日(火)」＞「work_xxxx_20211214.txt」に各作品の企画内容をまとめて、それぞれの作品の方向性をしっかりとイメージし、制作を進めていきましょう。

2021年12月15日（水）

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

-本日のアジェンダ-

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

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

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

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

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

本日のテーマ

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

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

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

参考サイト

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

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

まずはじめに…

ガイドの作成をしましょう。
1. アートボード を用意する
　 例:A4サイズ（ 210 × 297 ミリ,CMYK ）
2. 正方形（線無し）を用意する
3.「編集＞環境設定＞一般＞（キー入力）」 でキー移動の値を変更
4．Alt＋矢印キーで図形を複製
5.「表示＞ガイド＞ガイドの作成」でガイドを作成する
6. レイヤーパネルはロックし名前「ガイド」を付けて管理しましょう。

本日の基本操作

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

アウトライン

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

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

定規・ガイド

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

参考サイト

スマートガイド

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

参考サイト

環境設定（キー入力）

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

参考サイト

〜今までの基本操作〜

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

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

参考サイト

本日の課題

ピクトグラムを作成し、４限目終了までにDropboxにUPしてください。
5限目に講評を行います。

提出先・・・ 提出 / 【0344】ピクトグラム12月15日(水)
ファイル名は、work_xxxx_20211215.pdfです。
(xxxxの部分はご自身の名前のローマ字表記、小文字)
※pdfのファイルは必ず「最小ファイルサイズ」でUPしてください。

2021年12月20日（月）

ハローワーク来所日①

2021年12月21日（火）

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

-本日のアジェンダ-

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

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

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

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

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

本日のテーマ

ロゴを作ってみましょう

ロゴとは？

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

参考サイト

ロゴ制作のポイント

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

本日の基本操作

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

文字ツールとは？

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

ポイント文字の入力

文字ツールで、画面の好きなところをクリックすると、カーソル（Iビーム）が表示されます。そのまま、文字を入力すれば、クリックした部分を先頭に文字が入力されていきます。

エリア文字の入力

一定の幅で文章を折り返したい場合は、エリア文字を使います。文字ツールで、画面内を斜めにドラッグすると、文字を入力するためのテキストエリアが出来上がります。

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

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

参考サイト（Ai）

参考サイト（Ps）

文字パネルとは？

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

参考サイト（Ai）

参考サイト（Ps）

字形パネルとは？

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

参考サイト（Ai）

参考サイト（Ps）

段落とは？

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

参考サイト（Ai）

参考サイト（Ps）

整列パネル

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

参考サイト

変形パネル

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

参考サイト

パス上文字ツール

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

参考サイト

アウトライン表示

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

参考サイト

〜引き続きの基本操作〜

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

アウトライン

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

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

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

定規

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

参考サイト

スマートガイド

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

参考サイト

環境設定（キー入力）

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

参考サイト

提案の考え方について

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

デザインの基本として

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

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


参考サイト

【2】文字デザイン

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

参考サイト

【3】配色デザイン

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

参考サイト

ワンポイントアドバイス

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

本日の課題

ロゴを作成し、４限目終了までにDropboxにUPしてください。
5限目に講評を行います。

提出先・・・ 提出 / 【0344】ロゴ12月21日(火)
ファイル名は、work_xxxx_20211221.pdfです。
(xxxxの部分はご自身の名前のローマ字表記、小文字)
※pdfのファイルは必ず「最小ファイルサイズ」でUPしてください。

2021年12月22日（水）

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

-本日のアジェンダ-

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

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

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

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

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

本日のテーマ

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

アクセスマップ とは？

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

参考サイト

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

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

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

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

レイアウトデザイン

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

参考サイト

本日の基本操作

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

線パネル

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

参考サイト

アピアランスパネル

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

参考サイト

スタイライズ

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

参考サイト

クリッピングマスク

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

参考サイト

アウトライン

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

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

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

参考サイト

参考サイト

アピアランスの分割

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

参考サイト

本日の課題

アクセスマップを作成し、４限目終了までにDropboxにUPしてください。
5限目に講評を行います。

提出先・・・ 提出 / 【0344】アクセスマップ12月22日(水)
ファイル名は、work_xxxx_20211222.pdfです。
(xxxxの部分はご自身の名前のローマ字表記、小文字)
※pdfのファイルは必ず「最小ファイルサイズ」でUPしてください。

2021年12月27日（月）

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

投稿日: 2021-12-27 作成者: master

-本日のアジェンダ-

1限目
実技 写真合成・補正加工実習①
トリムマークについて

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

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

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

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

本日のテーマ

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

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

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

名刺作成の参考サイト

【おススメフォント】

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

【2】文字デザイン

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

参考サイト

本日の基本操作

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

トリムマーク

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

参考サイト

パスのオフセット

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

参考サイト

配置

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

参考サイト

Adobe Fonts （Typekit ）

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

参考サイト

引き続きの基本操作

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

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

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

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

参考サイト

本日の課題

名刺を作成し、４限目終了までにDropboxにUPしてください。
5限目に講評を行います。

提出先・・・ 提出 / 【0344】名刺12月27日(月)
ファイル名は、work_xxxx_20211227.pdfです。
(xxxxの部分はご自身の名前のローマ字表記、小文字)
※pdfのファイルは必ず「最小ファイルサイズ」でUPしてください。

2021年12月28日（火）

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

-本日のアジェンダ-

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

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

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

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

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

本日のテーマ

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

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

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

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

参考サイト

【3】配色デザイン

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

参考サイト

本日の基本操作

  • 画像解像度
  • モード
  • 配置
  • 文字ツール(Ps)

画像解像度

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

参考サイト

モード

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

参考サイト

配置

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

参考サイト

文字ツール

参考サイト（Ps）

【おススメフォント】

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

引き続きの基本操作

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

本日の課題

DMを作成し、４限目終了までにDropboxにUPしてください。
5限目に講評を行います。

提出先・・・ 提出 / 【0344】DM12月28日(火)
ファイル名は、work_xxxx_20211228.pdfです。
(xxxxの部分はご自身の名前のローマ字表記、小文字)
※pdfのファイルは必ず「最小ファイルサイズ」でUPしてください。

2021年12月29日（水）

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

-本日のアジェンダ-

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

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

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

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

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

本日のテーマ

成績考査です。

第2回成績考査

Dropbox「第2回成績考査＞grade-check_〇〇〇〇_20211229.ai」をダウンロードして各作品を作成し、４限目終了までにDropboxにUPしてください。
5限目に講評を行います。

提出先・・・ 【0344】第2回成績考査
ファイル名は、grade-check_xxxx_20211229.pdfです。
(xxxxの部分はご自身の名前のローマ字表記、小文字)
※pdfのファイルは必ず「最小ファイルサイズ」でUPしてください。

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

2022年01月04日（火）

学科　ECサイト運用基礎①

-本日のアジェンダ-

1限目
学科 ECサイト運用基礎①
WordPressについて・ユーザー作成

2限目
学科 ECサイト運用基礎①
記事の投稿・更新について

3限目
学科 ECサイト運用基礎①
テーマについて

4限目
学科 ECサイト運用基礎①
WordPressでポートフォリオを作ってみよう

5限目
学科 ECサイト運用基礎①
WordPressでポートフォリオを作ってみよう

本日のテーマ

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

WordPressとは

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

WORDPRESS の記事

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

WORDPRESSのテーマ

https://samplesdl.me/deau-g/?page_id=83&embed=true#?secret=zWoUVfvDBG

https://samplesdl.me/deau-g/?page_id=83&embed=true#?s

https://samplesdl.me/deau-g/?page_id=168&embed=true#?secret=F2Xdy0cNud

https://samplesdl.me/deau-g/?page_id=168&embed=true#?secret=F2Xdy0cNud

https://samplesdl.me/deau-f/%e4%bb%96%e3%82%b5%e3%82%a4%e3%83%88%e3%82%b3%e3%83%b3%e3%83%86%e3%83%b3%e3%83%84%e3%81%ae%e5%88%a9%e7%94%a8%e6%96%b9%e6%b3%95/embed/#?secret=XL28o8jxNE

https://samplesdl.me/deau-f/%e4%bb%96%e3%82%b5%e3%82%a4%e3%83%88%e3%82%b3%e3%83%b3%e3%83%86%e3%83%b3%e3%83%84%e3%81%ae%e5%88%a9%e7%94%a8%e6%96%b9%e6%b3%95/embed/#?secret=XL28o8jxNE

https://samplesdl.me/deau-f/%e3%83%a1%e3%83%87%e3%82%a3%e3%82%a2%ef%bc%88%e5%9f%ba%e7%a4%8e%ef%bc%89/embed/#?secret=Ocbrdld4uh

https://samplesdl.me/deau-f/%e3%83%a1%e3%83%87%e3%82%a3%e3%82%a2%ef%bc%88%e5%9f%ba%e7%a4%8e%ef%bc%89/embed/#?secret=Ocbrdld4uh

ワンポイントアドバイス

Webデザイナーとして応募の際にポートフォリオサイトとして、最もよく使われていると言われているのが、WordPressです。また国内のWebサイト利用で最も利用されているCMSがWordPressです。まずはその特徴と内容を理解しておきましょう。

今後の予定

WordPress・ポートフォリオ関連の今後の予定は、以下の通りです。
・1/4（火）：WordPressの使用法理解（本日）
・1/12（水）：ポートフォリオ内容の検討（オンライン）
・1/17（月）：ポートフォリオ作成 （オンライン）
・1/24（月）：ポートフォリオ作成 （オンライン）
・2/9（水） ：ポートフォリオ作成 （オンライン）
・3/1（火）：成績考査（作成したWordPressサイト提出）

作成するWordPressサイトには、以下の内容を記載してください。
・ポートフォリオ
・「学科 グラフィックデザイン基礎①～⑦」の訓練ブログ（1/31開始）
・「学科 HTML基礎 ①～④ 」の訓練ブログ （1/31開始）
・「学科 CSS基礎①～④」の訓練ブログ （2/8開始）

本日の課題

WordPressのテーマを選定し本日の記事をUPしてください。

注：このクラスは、事情によりWordPressの授業をしましたが通常のクラスでは以下の内容です。

学科　ECサイト運用基礎①

-本日のアジェンダ-

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

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

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

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

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

本日のテーマ

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

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

  • レイヤースタイル
  • ブレンドモード
  • 塗りつぶしツール

レイヤースタイル

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

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

参考サイト

ブレンドモード

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

参考サイト

塗りつぶしツール

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

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

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

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

  • レイアウト/文字/配色
  • カンバスサイズ
  • Web用に書き出し（ jpg gif png ）
https://samplesdl.me/deau-e/%e3%83%90%e3%83%8a%e3%83%bc%e5%88%b6%e4%bd%9c%e3%81%ae%e9%80%b2%e3%82%81%e6%96%b9/embed#?secret=PRlEIShfQ5

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

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

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

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

参考サイト

ECサイトについて

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

参考サイト

バナー広告とは？

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

参考サイト

ワンポイントアドバイス

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

本日の課題

「クリスマス」をテーマにバナー（模写）を作成してみましょう。
サイズは自由です。
作成したバナーを4限目終了までにドロップボックスにUPしてください。
※提出先・・・提出＞【0266】バナー模写① 12月2日(木)
※ファイル名は、bnr_xxxx_20211202.jpg

2022年01月05日（水）

学科　ECサイト運用基礎②

-本日のアジェンダ-

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

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

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

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

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

本日のテーマ

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

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

  • レイヤースタイル
  • ブレンドモード
  • 塗りつぶしツール

レイヤースタイル

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

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

参考サイト

ブレンドモード

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

参考サイト

塗りつぶしツール

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

文字ツール

Photoshopで文字入力をする場合に使用するツールです。Illustratorのように文字パネルを使用してフォントやトラッキング、ベースラインなど細かく設定ができます。

https://samplesdl.me/deau-f/%e6%96%87%e5%ad%97%e5%85%a5%e5%8a%9bps/embed/#?secret=NJpaMhN0c4

https://samplesdl.me/deau-f/%e6%96%87%e5%ad%97%e5%85%a5%e5%8a%9bps/embed/#?secret=NJpaMhN0c4

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

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

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

  • レイアウト/文字/配色
  • カンバスサイズ
  • Web用に書き出し（ jpg gif png ）
https://samplesdl.me/deau-f/%e3%83%90%e3%83%8a%e3%83%bc%e5%88%b6%e4%bd%9c%e3%81%ae%e9%80%b2%e3%82%81%e6%96%b9/embed/#?secret=0ly1kqf1u0

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

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

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

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

参考サイト

ECサイトについて

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

参考サイト

バナー広告とは？

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

参考サイト

ワンポイントアドバイス

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

本日の課題

「バレンタイン」をテーマにバナー（模写）を作成してみましょう。
サイズは自由です。
作成したバナーを4限目終了までにドロップボックスにUPしてください。
※提出先・・・提出＞【0344】バナー模写① 1月5日(水)
※ファイル名は、bnr_xxxx_20220105.jpg

2022年01月06日（木）

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

-本日のアジェンダ-

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

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

3限目
学科　ECサイトデザイン基礎①
バナー模写練習

4限目
学科　ECサイトデザイン基礎①
バナー模写練習

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

本日のテーマ

バナー「模写」で練習しましょう

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

  • シェイプ・パス・ピクセル
  • 描画ツール
  • パス選択ツール

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

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

参考サイト

描画ツール

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

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

参考サイト

パス選択ツール

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

参考サイト

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

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

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

  • 枠作成（レイヤースタイル）
  • グラデーション（レイヤースタイル）
  • 境界線（レイヤースタイル）
  • 光と影（レイヤースタイル）
  • レイアウト/文字/配色
  • カンバスサイズ
  • Web用に書き出し（ jpg gif png ）
https://samplesdl.me/deau-d/%e3%83%90%e3%83%8a%e3%83%bc%e5%88%b6%e4%bd%9c%e3%81%ae%e9%80%b2%e3%82%81%e6%96%b9/embed#?secret=QADb0c2Z03

本日の課題

「ファッション」をテーマにバナー（模写）を作成してみましょう。
レイアウトは正方形(250px×250px)です。
作成したバナーを5限目終了までにドロップボックスにUPしてください。
※提出先・・・提出＞【0344】バナー模写② 1月6日(木)
※ファイル名は、bnr_xxxx_20220106.jpg

2022年01月10日（月）

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

-本日のアジェンダ-

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

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

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

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

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

本日のテーマ

オリジナルでバナーを作成してみましょう

マスクについて

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

参考サイト

本日の基本操作と復習

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

被写体を選択（Ps）

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

参考サイト

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

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

参考サイト

パスパネル （Ps）

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

参考サイト

パス選択ツール

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

参考サイト

ベクトルマスク（Ps）

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

参考サイト

選択範囲の反転 （Ps）

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

参考サイト

境界線をぼかす （Ps）

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

参考サイト

フィルター（Ps）

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

参考サイト

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

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

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

  • 枠作成（レイヤースタイル）
  • グラデーション（レイヤースタイル）
  • 境界線（レイヤースタイル）
  • 光と影（レイヤースタイル）
  • レイアウト/文字/配色
  • カンバスサイズ
  • Web用に書き出し（ jpg gif png ）
https://samplesdl.me/deau-d/%e3%83%90%e3%83%8a%e3%83%bc%e5%88%b6%e4%bd%9c%e3%81%ae%e9%80%b2%e3%82%81%e6%96%b9/embed#?secret=I13BdWIIOK

本日の課題

「贈答品」をテーマにバナーを作成してみましょう。
サイズは自由です。できるだけたくさん作ってみましょう。
作成したバナーを5限目終了までにドロップボックスにUPしてください。
※提出先・・・提出＞【0265】バナー オリジナル作成 1月10日(月)
※ファイル名は、bnr_xxxx_2022011006.jpg

2022年01月11日（火）

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

-本日のアジェンダ-

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

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

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

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

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

本日のテーマ

いっぱい作りましょう

デザインの上達方法

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

本日の課題

自由テーマでできるだけたくさんバナーを作成してみましょう。
サイズも自由です。
作成したバナーを4限目終了までにドロップボックスにUPしてください。
※提出先・・・提出＞【0344】バナー オリジナル作成 1月11日(火)
※ファイル名は、bnr_xxxx_20220111.jpg

2022年01月12日（水）

実技　ポートフォリオ制作実習①

-本日のアジェンダ-

1限目
実技 ポートフォリオ作成実習①
ポートフォリオについて

2限目
実技 ポートフォリオ作成実習①
ポートフォリオの記載内容について

3限目
実技 ポートフォリオ作成実習①
WordPressでポートフォリオを作ってみよう

4限目
実技 ポートフォリオ作成実習①
WordPressでポートフォリオを作ってみよう

5限目
実技 ポートフォリオ作成実習①
WordPressでポートフォリオを作ってみよう

本日のテーマ

WordPressを使ったポートフォリオ内容を考え、制作に入りましょう

ポートフォリオとは

ポートフォリオは、色々な意味がありますがWebデザイナーとしての狭義の意味では、デザイナーやクリエイターが実績や実力を示す作品集です。就職活動の武器として使用できるポートフォリオを作っていきましょう。

参考サイト

ポートフォリオの記載内容

  • 目次
  • 自己紹介（プロフィール）
  • 保有スキル
  • 得意分野
  • 作品紹介（成果物と説明）
  • 後書き（あいさつ）

参考サイト

ワンポイントアドバイス

ポートフォリオの作成と言っても、最初は掲載する作品がないと思うかもしれません。でも、心配ありません。ここの訓練で作成したものや作成するものを整理して掲載することでちゃんとしたポートフォリオが作成できます。目指す就職先の分野も考慮してポートフォリオの構成を考えてみてください。

今後の予定

WordPress・ポートフォリオ関連の今後の予定は、以下の通りです。
・1/4（火）：WordPressの使用法理解（終了）
・1/12（水）：ポートフォリオ内容の検討（オンライン）（本日）
・1/17（月）：ポートフォリオ作成 （オンライン）
・1/24（月）：ポートフォリオ作成 （オンライン）
・2/9（水） ：ポートフォリオ作成 （オンライン）
・3/1（火）：成績考査（作成したWordPressサイト提出）

作成するWordPressサイトには、以下の内容を記載してください。
・ポートフォリオ
・「学科 グラフィックデザイン基礎①～⑦」の訓練ブログ（1/31開始）
・「学科 HTML基礎 ①～④ 」の訓練ブログ （1/31開始）
・「学科 CSS基礎①～④」の訓練ブログ （2/8開始）

2022年01月17日（月）

実技　ポートフォリオ制作実習②

-本日のアジェンダ-

1限目
実技 ポートフォリオ作成実習②
ポートフォリオについて

2限目
実技 ポートフォリオ作成実習②
ポートフォリオの記載内容について

3限目
実技 ポートフォリオ作成実習②
WordPressでポートフォリオを作ってみよう

4限目
実技 ポートフォリオ作成実習②
WordPressでポートフォリオを作ってみよう

5限目
実技 ポートフォリオ作成実習②
WordPressでポートフォリオを作ってみよう

本日のテーマ

ポートフォリオ内容を考えましょう

ポートフォリオとは

ポートフォリオは、色々な意味がありますがWebデザイナーとしての狭義の意味では、デザイナーやクリエイターが実績や実力を示す作品集です。就職活動の武器として使用できるポートフォリオを作っていきましょう。

参考サイト

ポートフォリオの記載内容

  • 目次
  • 自己紹介（プロフィール）
  • 保有スキル
  • 得意分野
  • 作品紹介（成果物と説明）
  • 後書き（あいさつ）

参考サイト

ワンポイントアドバイス

ポートフォリオの作成と言っても、最初は掲載する作品がないと思うかもしれません。でも、心配ありません。ここの訓練で作成したものや作成するものを整理して掲載することでちゃんとしたポートフォリオが作成できます。目指す就職先の分野も考慮してポートフォリオの構成を考えてみてください。

今後の予定

WordPress・ポートフォリオ関連の今後の予定は、以下の通りです。
・1/4（火）：WordPressの使用法理解（終了）
・1/12（水）：ポートフォリオ内容の検討（オンライン）（終了）
・1/17（月）：ポートフォリオ作成 （オンライン）（本日）
・1/24（月）：ポートフォリオ作成 （オンライン）
・2/9（水） ：ポートフォリオ作成 （オンライン）
・3/1（火）：成績考査（作成したWordPressサイト提出）

作成するWordPressサイトには、以下の内容を記載してください。
・ポートフォリオ
・「学科 グラフィックデザイン基礎①～⑦」の訓練ブログ（1/31開始）
・「学科 HTML基礎 ①～④ 」の訓練ブログ （1/31開始）
・「学科 CSS基礎①～④」の訓練ブログ （2/8開始）

本日の課題

目指す分野を意識してポートフォリオの構成を考えてください
（提出は不要です）

2022年01月19日（水）

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

-本日のアジェンダ-

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

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

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

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

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

本日のテーマ

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

写真の権利について

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

参考サイト

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

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

参考サイト

本日の課題

自由テーマでできるだけたくさんバナーを作成してみましょう。
サイズも自由です。
作成したバナーを4限目終了までにドロップボックスにUPしてください。
※提出先・・・提出＞【0344】バナー オリジナル作成 1月19日(水)
※ファイル名は、bnr_xxxx_20220119.jpg

2022年01月20日（木）

ハローワーク来所日②

2022年01月24日（月）

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

-本日のアジェンダ-

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

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

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

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

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

本日のテーマ

ポートフォリオサイトの基本部を完成させましょう

ポートフォリオとは

ポートフォリオは、色々な意味がありますがWebデザイナーとしての狭義の意味では、デザイナーやクリエイターが実績や実力を示す作品集です。就職活動の武器として使用できるポートフォリオを作っていきましょう。

参考サイト

ポートフォリオの記載内容

  • 目次
  • 自己紹介（プロフィール）
  • 保有スキル
  • 得意分野
  • 作品紹介（成果物と説明）
  • 後書き（あいさつ）

参考サイト

ワンポイントアドバイス

ポートフォリオの作成と言っても、最初は掲載する作品がないと思うかもしれません。でも、心配ありません。ここの訓練で作成したものや作成するものを整理して掲載することでちゃんとしたポートフォリオが作成できます。目指す就職先の分野も考慮してポートフォリオの構成を考えてみてください。

今後の予定

WordPress・ポートフォリオ関連の今後の予定は、以下の通りです。
・1/4（火）：WordPressの使用法理解（終了）
・1/12（水）：ポートフォリオ内容の検討（オンライン）（終了）
・1/17（月）：ポートフォリオ作成 （オンライン）（終了）
・1/24（月）：ポートフォリオ作成 （オンライン）（本日）
・2/9（水） ：ポートフォリオ作成 （オンライン）
・3/1（火）：成績考査（作成したWordPressサイト提出）

作成するWordPressサイトには、以下の内容を記載してください。
・ポートフォリオ
・「学科 グラフィックデザイン基礎①～⑦」の訓練ブログ（1/31開始）
・「学科 HTML基礎 ①～④ 」の訓練ブログ （1/31開始）
・「学科 CSS基礎①～④」の訓練ブログ （2/8開始）

本日の課題

WordPressサイトにポートフォリオを構築してください

2022年01月25日（火）

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

-本日のアジェンダ-

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

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

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

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

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

本日のテーマ

馴染んでください

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

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

ワンポイントアドバイス

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

本日の課題

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

バナーを作成しスクリーンショットした画像に当て込んで下さい。
作成した作品を4限目終了までにドロップボックスにUPしてください。
5限目に講評を行います。
※提出先・・・提出＞【0344】あて込みバナー作成 1月25日(火)
※ファイル名は、bnr_xxxx_20220125.jpg

2022年01月26日（水）

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

-本日のアジェンダ-

1限目
実技　ECサイトデザイン実習④
成績考査

2限目
実技　ECサイトデザイン実習④
成績考査

3限目
実技　ECサイトデザイン実習④
成績考査

4限目
実技　ECサイトデザイン実習④
成績考査

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

本日のテーマ

成績考査です

ワンポイントアドバイス

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

本日の課題

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

バナーのサイズ違いを展開して作成して下さい。
【サイズ展開】
・750px x 290px
・250px x 250px
・320px x 100px
・320px x 50px
・120px x 600px （縦長）
今までに作成したバナーから、別サイズを展開してもOKです。
作成したバナーを4限目終了までにご自身のWordpressに新規固定ページを作成してUPしてください。
5限目に講評を行います。

WordPressへの成績考査の上げ方

ご自身のWordPressに成績考査用のバナーを投稿していただきます。
手順は以下の通りです。

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

②タイトル（タイトルを追加の部分）に「第三回成績考査」、次の投稿にお名前（漢字フルネーム）を入力して下さい。

③以降のブロックにバナー画像をブロックエディタ「画像」にてアップロードし、キャプション部分にそのバナーサイズを記載して下さい。
キャプションが出ない場合は、その下に通常の文章の投稿でも構いません。
これをサイズ違いバナー、５種分繰り返して下さい。

④投稿設定のパーマリンクのURLスラッグに下記を設定して下さい。
grade-check_お名前(ローマ字)_20220126

※URLスラッグに入力が出てこない場合は、作成した固定ページをいったん下書きに保存し、下部「※パーマリンクのURLスラッグが出ない場合」の方法にて設定を変更してから再度公開して下さい。

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

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

※パーマリンクのURLスラッグが出ない場合

そのテーマのデフォルトの表示設定によっては、URLスラッグが表示されない場合があります。この場合は設定を以下のように変更して下さい。

①WordPressの左メニューの中の「設定」の中のパーマリンクを開いて下さい。

②共通設定の中の「投稿名」にチェックを入れ「変更を保存」にして下さい。

③作成した固定ページに戻ると、パーマリンクのURLスラッグが入力可能になります。

2022年01月31日（月）

学科 HTML基礎①

-本日のアジェンダ-

1限目
学科 HTML基礎①
ページのソースとデベロッパーツールについて

2限目
学科 HTML基礎①
基本タグとヘッダー領域

3限目
学科 HTML基礎①
見出し（h1～h6）と段落（p）

4限目
学科 HTML基礎①
HTMLのまとめ

5限目
学科 HTML基礎①
グラフィックツールの復習

本日のテーマ

まずHTMLのソースコードの見方を理解しましょう。

ページのソースについて

ホームページのソースとは？ 普段何気なく見ているホームページなどのウェブページは、HTMLやCSSというマークアップ言語からできています。 これらの言語で書かれたファイルのことを「ソースファイル」と呼び、例えばHTMLで書かれたファイルを「HTMLソース」といいます。

参考サイト

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

デベロッパーツールはGoogle Chromeに標準で搭載されているデバッグツールで、WebサイトのHTML構成や表示スピード、通信状況などを確認できます。 特別なツールやプログラムを使わずブラウザのみで手軽に利用でき、エンジニアの私もWebサービスの開発やテスト、デザインのチェックを行うときに頻繁に使っています。

参考サイト

ワンポイントアドバイス

ソースコードは実際に記述したコードの内容で、デベロッパーツールはブラウジングされた内容として出力されます。コードの誤り等を見つけるのに便利ですので、しっかり使いこないしてみましょう。

htmlの記述【基本タグ】

  • <!doctype html>
  • <html>∼</html>
  • <head>∼</head>
  • <body>∼</body>

サンプルページ（htmlの記述【基本タグ】）

doctype宣言とは？

HTML5におけるDOCTYPE宣言はあまり意味を持たないとされていますが、 作成した文書がHTML5によるものであることを、ブラウザなどに明示的に伝えるために記述しておいたほうが良いでしょう。

DOCTYPE宣言が無いと、一般的なブラウザではレンダリングモードが互換モード（Quirks mode）となります。 互換モードのブラウザではCSSの解釈が標準と異なるため、制作者の意図しないレイアウトになってしまう場合があります。 ブラウザに標準モード（Standards mode）で解釈させる場合には、DOCTYPE宣言を記述する必要があります。 IE6も含めて、主要なブラウザでは文書の先頭に <!DOCTYPE html> と記述することで標準モードとなります。

参考サイト

ワンポイントアドバイス

楽天のショッピングサイトなどのテンプレートでは、 DOCTYPE宣言が無く互換モードになり、CSSが思うように使えなくなる場合があります。
その場合やむを得ず、違う方法を使わなければならない場合がありますので、お仕事で担当した時は、 DOCTYPE宣言は必ず確認しておきましょう。

<html>∼</html>

<html>タグは、HTML文書であることを示す際に使用します。 <html>～</html>で定義されるhtml要素は、文書のルート（根っこ）となる要素で、HTML文書の内容が始まることを表します。 <html>～</html>の直下には、 <head>と <body>がそれぞれ一つづつ必要となります。

<head>∼</head>

<head>タグは、文書のヘッダ情報を表す際に使用します。 ヘッダ情報とは、その文書に関する情報のことです。 head要素を正確に定義するなら、「そのHTML文書に関するメタデータを集めたもの」ということになります。

<body>∼</body>

<body>タグは、文書の本体を表す際に使用します。 文書の本体とはブラウザ上に表示されるメインコンテンツのことです。

htmlの記述【ヘッダー領域】

  • <meta>
  • <title>∼</title>
  • <link>

サンプルページ（htmlの記述【head】）

<meta>

<meta>タグは、その文書に関する情報（メタデータ）を指定する際に使用します。 メタデータとは、“情報に関する情報”のことですが、HTMLの仕様では“その文書に関する様々な情報”を意味します。

ワンポイントアドバイス

<meta charset=”UTF-8″> の文字コードの指定は実は必須要素ではありませんが、サイト制作時にはほとんどの場合記述しておきましょう。
主に文字化けの原因となる事を回避する目的として記載しておくタグと覚えておいてよいでしょう。

<title>∼</title>

<title>タグは、文書にタイトルをつける際に使用します。 <title>タグで文書のタイトルを指定する場合には、一つの文書に一つだけ、<head>～</head>の中に配置します。 一つの文書内で複数の<title>を指定することはできません。<title>～</title>に指定する文書のタイトルは、 検索エンジンの検索結果画面やユーザーの利用するブラウザのブックマーク欄などに表示されるので、文書の内容を表すものを指定する必要があります。

ワンポイントアドバイス

<title>∼</title> はとにかくSEOに直結します。検索エンジンで検索した時の一覧に表示される文字列に反映されますので、タイトル（題名）はよく考えて作成しましょう。

<link>タグは、リンクする外部リソースを指定する際に使用します。 外部リソースとは、例えば、HTMLファイル、CSSファイルなど、現在の文書ファイルに関連している外部ファイルのことです。 <link>タグは、<head>～</head>の中に記述します。
<link>タグを指定する場合には、href属性とrel属性が必須です。 href属性とrel属性が指定されていない場合には、<link>タグの指定は無効となります。 href属性には、リンクする外部ファイルのURLを指定します。

参考サイト

htmlの記述【見出し（h1～h6）と段落（p）】

  • 見出し「h1～h6」
  • 段落「p」
  • 改行「br」

サンプルページ（htmlの記述【body】）

見出し「h1～h6」について

<h1>・<h2>・<h3>・<h4>・<h5>・<h6>タグは、見出しを付ける際に使用します。数値が小さいほど高いランクの見出しとなります。 <h1>が最も高位の大見出しで、<h6>が最も低位の小見出しです。 同じ数値のものが複数ある場合には同じランクとなります。

ワンポイントアドバイス

h1タグ以外は、特に使用回数に制限はありません。h2やh3などは大きな見出しとなることが多いためたくさん使われると思います。「h1タグは1ページで一回の使用で抑え、数字の順序をしっかり守ること」これを守っていれば使用になんら問題はありません。ただ、html5の場合は1ページにh1タグが複数あっても問題ありません。

参考サイト

段落「p」ついて

<p>タグは、ひとつの段落（パラグラフ）であることを表す際に使用します。<p>タグは、段落よりもふさわしい要素がある場合には使用するべきではありません。

ワンポイントアドバイス

マークアップに悩んだらとにかく「p」にしましょう。

改行「br」について

<br>タグは、改行する際に使用します。<br>は、例えば詩や住所などのように、改行が実際にコンテンツの一部を成すような場合にのみ使用します。 文の長さを揃えたりレイアウトを整えるなどのスタイリング目的に<br>を使用してはいけません。

ワンポイントアドバイス

スペースを取る為に改行「br」を使うのは文法的にNGです。レイアウトとしてスペースを空けたいときはCSSで行いましょう。

特殊文字

ウェブページに特殊文字や記号を表示させるには専用の文字コードが必要となります。 その内容と特徴を確認しておきましょう。

参考サイト

改行とタブとスペースについて

HTML文章中の改行とタブとスペースにもルールがあります。
下記参考サイトより確認しておきましょう。

改行とタブとスペースの見本

本日の課題①

wordpressのサイトに、本日学んだ内容を「投稿ページ」にまとめてください。
投稿日は、本日の日時で設定してください。
※ページタイトルに「議題」は必ず入れましょう。

本日の課題②

グラフィックデザイン基礎の内容をページにまとめてください。
投稿日は、該当する「学科　グラフィックデザイン基礎」の日時にしてください。
※ページタイトルに「議題」は必ず入れましょう。

2022年02月01日（火）

学科 HTML基礎②

-本日のアジェンダ-

1限目
学科 HTML基礎②
タグ分類について

2限目
学科 HTML基礎②
リストとテーブルについて

3限目
学科 HTML基礎②
画像とリンクについて

4限目
学科 HTML基礎②
HTMLのまとめ

5限目
学科 HTML基礎②
グラフィックツールの復習

本日のテーマ

タグの役割と特性を確認しましょう。

タグ分類について

  • セクション分類タグ
  • コンテンツ分類タグ
  • テキスト分類タグ

セクショニング・コンテンツについて

CSS3から登場のセクショニング・ コンテンツのタグは、より細かい役割を指定する時に使いましょう。

セクションニングタグ一例

<section>∼</section>一つのセクションであることを示す
<nav>∼</nav>ナビゲーションであることを示す
<header>∼</header>ヘッダであることを示す
<footer>∼</footer>フッタであることを示す

コンテンツタグ一例

<div>∼</div>ひとかたまりの範囲として定義する
<main>∼</main>メインコンテンツであることを示す

サンプルページ（htmlの記述【body】）

参考サイト

テキストの意味を持つタグについて

<a>～</a>のタグのようにテキストに意味を持たせることが出来るタグがいくつか用意されています。必要に応じて使用してみましょう。

テキストの意味

<em>∼</em>強勢する（アクセントを付ける）箇所を表す
<strong>∼</strong>強い重要性を表す
<small>∼</small>免責・警告・著作権などの注釈や細目を表す
<i>∼</i>声や心の中で思ったことなど、他と区別したいテキストを表す
<b>∼</b>文書内のキーワードや製品名など、他と区別したいテキストを表す
<span>∼</span>ひとつの範囲として定義する

参考サイト

ワンポイントアドバイス

「div」「span」とタグは「意味を持たない」という意味を持っています。CSSで文法の意味を持たないレイアウト が必要な時に使いましょう。

ブロックレベル要素とインライン要素について

要素の多くは、ブロックレベル要素とインライン要素に分類されます。
■ブロックレベル要素
文書の骨組みとなる要素です（例えば見出しや段落など）。このタイプの要素は、body要素の直接の子要素として配置することができます。
■インライン要素
文章中の一部として扱われる要素です（例えばリンクや文字の強調など）。このタイプの要素は、通常はブロックレベル要素内で使用します。
※ただし、HTML5ではブロックレベル要素とインライン要素という考え方はなくなっていますので、あくまでも性質を持っていると考えておきましょう。

参考サイト

リストとテーブルについて

リスト「ul ol li」について

<ul>タグはunordered listの略で、順序のないリストを表示する際に使用します。 リスト項目は、<li>タグで指定します。
<ul>タグで作成されるのは順序のないリストなので、リスト項目の順序を変えても文書の意味は変わりません。 順序のあるリストを作成する際には<ol>タグを使用してください。

<ol>タグはordered listの略で、順序のあるリストを表示する際に使用します。 リスト項目は、<li>タグで指定します。
<ol>タグで作成されるのは順序のあるリストなので、リスト項目の順序を変えると文書の意味が変わってしまうはずです。 順序のないリストを作成する際には<ul>タグを使用してください。

サンプルページ（htmlの記述【リスト】）

テーブルタグについて

「TABLE」とは<tr>、<th>、<td>などと組み合わせて表を作成するためのタグです。表の基本的な構造は<table>～</table>の中に<tr>～</tr>で表の横部分を指定し、その中に<th>～</th>や<td>～</td>で表題や縦軸を指定してセルを定義します。この時ヘッダセルのテキストは、一般的なブラウザでは太字になりセンタリングされます。
<table>はしばし、レイアウトのために使用されることがあります。しかし本来の使用方法ではありませんので、レイアウトで同様の効果が欲しい場合はスタイルシートを利用するとよいでしょう。

参考サイト

ワンポイントアドバイス

楽天やヤフーショッピングの商品ページでテーブルレイアウトが必要になる場合があります。EC関連のお仕事をする場合は、想定しておきましょう。

画像とリンクについて

画像について

<img>タグは、画像を表示する際に使用します。 必須属性のsrc属性で画像ファイルのURLを指定します。一般的なブラウザで表示できる画像フォーマットとしては、PNG・GIF・JPEGがよく利用されています。 他にも、ウェブ用のベクター画像フォーマットであるSVGや、単一ページのPDF・アニメPNG・アニメGIFなどをsrc属性の値として指定できます。
alt属性には、画像が利用できない環境向けのテキストを指定します。 HTML5ではalt属性は必須ではありませんが、指定しておけばアクセシビリティーが高まるでしょう。

参考サイト

ワンポイントアドバイス

Webサイトを重くする（表示スピードの低下）の大きな原因の一つは画像サイズです。WebサイトにUPする画像はPhotoshopやIllustratorでしっかりと画像の最適化をしてUPしましょう。

パス（URL）について

「パス」とは、使用するファイルなどが有る場所を示す文字列です（パソコンでは、フォルダ名の経路を示す文字列です）。
「URL」とは、パス（フォルダ）名にファイル名を加えた文字列です。

サンプルページ（パス）

ワンポイントアドバイス

リンクには「絶対パス」と「相対パス」というのがあります。
単純に説明すると…
絶対パスは「http（https）」から始まるURL（パス）の事
相対パスは「現在のファイル位置」から見たURL（パス）の事
になります。サイトの構造や運用方法によって使い分けが必要になる事がありますので、この2種類を覚えておきましょう。

参考サイト

リンクについて

<a>タグは、ハイパーリンクを指定する際に使用します。 ウェブページ内のテキストや画像などを<a>～</a>で囲んで必要な属性値を指定してやることで、 ハイパーリンクの始点（出発点）や終点（到達点）とすることができます。

<a>は、anchor（アンカー）の略です。 anchorを日本語にすると“船の錨・つなぎ止めて固定する”といった意味になります。 <a>は、指定した場所同士をつなぐことで関連する情報同士を結び付け、ユーザーに情報間の移動手段を提供する重要なタグです。

ワンポイントアドバイス

SEO（検索エンジン最適化）の最も重要なタグの一つです。検索エンジンは、リンクを辿ってWebサイトを評価していきます。
まずは、リンク<a>～</a>で囲う文言は、リンク先のページの意味と同一になるように意識してみましょう。

参考サイト

ターゲット指定とは？

a要素に target="" を追加すると、リンク先の文書をどのフレーム（ウィンドウ）に表示するかを指定できます。

ワンポイントアドバイス

外部リンクを設定する時は自身のサイトからの離脱回避という意味と、他所のサイトの引用をしているという意味を込めて「 target=” _blank ” 」 新規のウィンドウに表示 に表示にしましょう。

要素と属性とその値について

HTML の要素は属性を持ちます。ユーザーが望む基準を満たすために、さまざまな方法で要素を構成したり、動作を調整したりする追加の値です。

<要素名 属性="属性値">
開始タグの要素名の後ろに半角スペースを開ける
属性の後ろに=（イコール）を付ける
属性値は"（ダブルクオート）で囲む

参考サイト

本日の課題①

wordpressのサイトに、本日学んだ内容を「投稿ページ」にまとめてください。
投稿日は、本日の日時で設定してください。
※ページタイトルに「議題」は必ず入れましょう。

本日の課題②

グラフィックデザイン基礎の内容をページにまとめてください。
投稿日は、該当する「学科　グラフィックデザイン基礎」の日時にしてください。
※ページタイトルに「議題」は必ず入れましょう。

2022年02月02日（水）

学科 HTML基礎③

-本日のアジェンダ-

1限目
学科 HTML基礎③
マークアップについて

2限目
学科 HTML基礎③
タグチェッカーについて

3限目
学科 HTML基礎③
SEOについて

4限目
学科 HTML基礎③
HTMLのまとめ

5限目
学科 HTML基礎③
グラフィックツールの復習

本日のテーマ

タグチェッカーを活用しましょう。

マークアップについて

マークアップとは、文書構造（テキスト）や視覚表現（装飾）などの情報を、コンピューターが正しく認識できるように、タイトルや見出しなどの各構成要素に「タグ」と呼ばれる識別のための目印を使い、意味付けを行っていくことを意味します。

ワンポイントアドバイス

Web関連の求人情報で、マークアップエンジニアという職種があります。マークアップエンジニアというのは、専門知識を必要とする仕事ではあります。Webサイト制作で、フロント寄りの領域を扱うことから、エンジニアやプログラミングとは大きく業務内容が異なります。
マークアップエンジニアは、制作現場で数多く求められている職種です。 未経験者であってもある程度の勉強や実践経験を積めば、募集企業によって十分チャレンジが可能な職種と言われています。

参考サイト

タグチェッカーについて

正確なHTMLが書けているか、自分の目ですべてをチェックするのはとても大変作業です。とはいえ、適切なHTMLが書けていないとレイアウト崩れの素となったり、修正に大幅に時間がかかったりなど決していいことはありません。そんな時に活用したいのがHTMLのエラーチェックツールです。

ワンポイントアドバイス

マークアップエンジニアやコーダーの求人応募をして、見られるのはソースコードです。最低限のやっておくべき事として文法エラーは減らしておきましょう。

参考サイト

SEOについて

検索エンジン最適化とは、検索エンジンのオーガニックな検索結果において、特定のウェブサイトが上位に表示されるよう、ウェブサイトの構成などを調整すること。また、その手法の総称。 サーチエンジン最適化ないし検索エンジン対策とも呼ばれ、ウェブポジショニングと同義である。

ワンポイントアドバイス

まずは正しい文法理解と記述を理解していきましょう。その次に目的であるSEO（検索エンジン最適化）を考えてより良いサイト構築・設計を考えていきましょう。

参考サイト

本日の課題①

wordpressのサイトに、本日学んだ内容を「投稿ページ」にまとめてください。
投稿日は、本日の日時で設定してください。
※ページタイトルに「議題」は必ず入れましょう。

本日の課題②

グラフィックデザイン基礎の内容をページにまとめてください。
投稿日は、該当する「学科　グラフィックデザイン基礎」の日時にしてください。
※ページタイトルに「議題」は必ず入れましょう。

2022年02月07日（月）

学科 HTML基礎④

-本日のアジェンダ-

1限目
学科 HTML基礎④
CSSの読み込み方について

2限目
学科 HTML基礎④
FTPサーバーについて

3限目
学科 HTML基礎④
FTPサーバーの取り扱いについて

4限目
学科 HTML基礎④
HTMLのまとめ

5限目
学科 HTML基礎④
グラフィックツールの復習

本日のテーマ

タグチェッカーを活用しましょう。

CSSの読み込み方について

CSSを書く方法（場所）は3パターンあります。それぞれメリット・デメリットがあるため、この3パターンを組み合わせてCSSを書いていくのが良いでしょう。

パターン①「 外部ファイル 」

1つめの方法は、外部ファイルのCSSから読み込む方法です。つまり、CSSファイルを別に作り、HTMLファイルから読み込むということです。この作成したCSSファイルは外部スタイルシート（外部CSS）と呼ばれます。ウェブサイトを作る時にはこれが最も一般的な方法です。

パターン②「 styleタグ」

2つめの方法はHTMLファイルのheadタグ内に<style>〜</style>を書き、その中にCSSを書く方法です。

パターン③「 style属性を使う 」

3つめは、HTMLのタグにstyle属性を書く方法です。文字にサクッと色をつけたり、線を引いたりするときには便利ですが、タグにいちいち書き込む必要がありやや手間がかかります。また、後からまとめてデザインを変更することもできません。

ワンポイントアドバイス

基本的には外部ファイルで作成しましょう。また外部ファイルは1ファイルにまとめるのがベストですが、管理や運営方法を考えて使い分けましょう。

参考サイト

FTPサーバーについて

FTPサーバとは、FTPを使用してファイルの送受信を行うサーバのことである。 ファイルのアップロード・ダウンロードにはFTPクライアントソフトウェアが必要だが、最近のウェブブラウザにはこれが組み込まれている場合が多い。 

ワンポイントアドバイス

サーバーについては、案件ごとにどのサーバーを利用しているかしっかりと確認を取ってから制作依頼を受けましょう。サーバーによって基本的な設定が異なったり細かい違いがありますので、確認作業をしっかりと行いましょう。

参考サイト

本日の課題①

wordpressのサイトに、本日学んだ内容を「投稿ページ」にまとめてください。
投稿日は、本日の日時で設定してください。
※ページタイトルに「議題」は必ず入れましょう。

本日の課題②

グラフィックデザイン基礎の内容をページにまとめてください。
投稿日は、該当する「学科　グラフィックデザイン基礎」の日時にしてください。
※ページタイトルに「議題」は必ず入れましょう。

本日の課題③

サンプルファイルをFTPでサーバーにUPして、Wordpressの記事に投稿してください。

2022年02月08日（火）

学科 CSS基礎①

-本日のアジェンダ-

1限目
学科 CSS基礎①
CSSの記述【文字】

2限目
学科 CSS基礎①
セレクタの得点について

3限目
学科 CSS基礎①
コメントアウトについて

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

5限目
学科 CSS基礎①
グラフィックツールの復習

本日のテーマ

「セレクタ」「プロパティ」「値」の基本構造を理解しましょう。

CSSとは？

Cascading Style Sheetsは、HTMLやXMLの要素をどのように修飾するかを指示する仕様の一つで、World Wide Web Consortium がとりまとめ勧告する。文書の構造と体裁を分離させるという理念を実現するために提唱されたスタイルシートの具体的な仕様の一つ。 ウィキペディア

ワンポイントアドバイス

CSSとHTMLの両方を駆使してWebサイトを構築していきますが、HTMLとCSSは開発元が異なります。単純に密接な関係なのに記述ルールと役割が異なります。
まずはしっかりとルールの違いに気を付けて学んでいきましょう。

CSSの記述ルールの基本として

セレクタ｛
プロパティ :値;
｝

※この「 セレクタ」「 プロパティ 」「値」の構成をしっかり意識して使い方を学んでいきましょう。

CSSのブラウザ対応について

HTMLやCSSを学ぶ際に最も気を付けなければならない事は、ブラウザに対応しているかどうかです。ここまでご紹介したHTMLのタグはほぼどのブラウザにも対応したタグです。逆に考えてもらうと、HTMLのタグもCSSのタグもここで学ぶ以上のタグが存在します。

ワンポイントアドバイス

検索などで独自に調べたタグは要注意です！非推奨やブラウザでは非対応ブラウザが存在したり、PCでは使えるがスマートフォンではNGのタグがあります。
特にCSSは、使えないタグは見た目の実装を不可能にします。
まずは、広く使われている、どのブラウザでも対応している基本のタグをしっかりと把握していきましょう。

参考サイト

CSSの記述【文字】

まずは文字の装飾や大きさ位置などを指定するCSSから覚えていきましょう。
文字に関するCSSの特徴は、正しく記述したら必ず見た目が変わります。
もし、変わらない時はHTMLの記述が誤っているなど他に原因があるかもしれません。注意して記述の練習をしていきましょう。

ワンポイントアドバイス

デザインしたサイトの文字情報はSEO対策として出来る限り画像文字にはぜずテキスト文字にするイメージをしっかり持って「どんな事ができるのか？」を確認しておきましょう。

サンプルページ（CSSの記述【文字】）

参考サイト

ショートハンドについて

CSSのプロパティにはまとめて記述するための「ショートハンド」という書き方が用意されています。

ワンポイントアドバイス

CSSの記述はショートハンドという短縮して記述できる書き方があります。お仕事で誰かが作成したサイトを編集する時に、両方を理解しておく必要がありますので、しっかりと覚えておきましょう。

参考サイト

セレクタの得点について

はじめに. セレクタには優先順位があり、点数計算して高得点のものが適用されるます。
同点の場合は後にあるもの、更にStyle属性、Style要素、外部ファイルなど、CSSで特につまづく優先順位のルールを正しく理解していきましょう。

サンプルページ（セレクタの得点）

ワンポイントアドバイス

セレクタは計算ルールも考えて管理しやすいようにセレクタだけを見て何処をCSSでどの要素をコントロールしているかが解りやすくなるように意識して書くと良いでしょう。

参考サイト

「id」と「class」について

HTMLにスタイルシート(CSS)を適用する方法には、class属性を使う方法と、id​属性を使う方法があります。
idはそのページ内で1回のみ、classは複数回使用しても大丈夫です。
また、idとclassの値は自由につけることが出来ますが、命名規則をよく考えて指定しましょう。

ID、Class名の付け方には法則があり、半角英数、-（ハイフン）、_（アンダースコア）の組み合わせで名前をつけます。 どんな名称でも使用できますが、どのような設定なのか、内容が判別しやすい名前にするのがよいでしょう。 大文字と小文字どちらでも利用できますが、基本は小文字で統一します。

ワンポイントアドバイス

企業に提出するポートフォリオサイトなどにWebサイトを提出した場合、特に見られているのが、「id」と「class」です。命名規則とセレクタの管理方法が雑であったり計画性が無かったりするのはマイナス要因しかありませんので注意しましょう。

参考サイト

コメントアウトについて

コメントアウトとは … プログラミングにおける「コメント」とは、プログラムのソースコード上で「実行させない部分」のことです。 

ワンポイントアドバイス

HTMLのコメントアウトは、表示させない
CSSのコメントアウトは、プログラムを実行させない
言語の特徴で意味が異なるので注意しましょう。

参考サイト

本日の課題①

wordpressのサイトに、本日学んだ内容を「投稿ページ」にまとめてください。
投稿日は、本日の日時で設定してください。
※ページタイトルに「議題」は必ず入れましょう。

本日の課題②

グラフィックデザイン基礎の内容をページにまとめてください。
投稿日は、該当する「学科　グラフィックデザイン基礎」の日時にしてください。
※ページタイトルに「議題」は必ず入れましょう。

2022年02月09日（水）

実技 ポートフォリオ作成実習③

-本日のアジェンダ-

1限目
実技 ポートフォリオ作成実習③
WordPressでポートフォリオを作ってみよう

2限目
実技 ポートフォリオ作成実習③
WordPressでポートフォリオを作ってみよう

3限目
実技 ポートフォリオ作成実習③
WordPressでポートフォリオを作ってみよう

4限目
実技 ポートフォリオ作成実習③
WordPressでポートフォリオを作ってみよう

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

本日のテーマ

ポートフォリオサイトの基本部を完成させましょう

ポートフォリオとは

ポートフォリオは、色々な意味がありますがWebデザイナーとしての狭義の意味では、デザイナーやクリエイターが実績や実力を示す作品集です。就職活動の武器として使用できるポートフォリオを作っていきましょう。

参考サイト

ポートフォリオの記載内容

  • 目次
  • 自己紹介（プロフィール）
  • 保有スキル
  • 得意分野
  • 作品紹介（成果物と説明）
  • 後書き（あいさつ）

参考サイト

ワンポイントアドバイス

ポートフォリオの作成と言っても、最初は掲載する作品がないと思うかもしれません。でも、心配ありません。ここの訓練で作成したものや作成するものを整理して掲載することでちゃんとしたポートフォリオが作成できます。目指す就職先の分野も考慮してポートフォリオの構成を考えてみてください。

今後の予定

WordPress・ポートフォリオ関連の今後の予定は、以下の通りです。
・1/4（火）：WordPressの使用法理解（終了）
・1/12（水）：ポートフォリオ内容の検討（オンライン）（終了）
・1/17（月）：ポートフォリオ作成 （オンライン）（終了）
・1/24（月）：ポートフォリオ作成 （オンライン）（終了）
・2/9（水） ：ポートフォリオ作成 （オンライン） （本日）
・3/1（火）：成績考査（作成したWordPressサイト提出）

作成するWordPressサイトには、以下の内容を記載してください。
・ポートフォリオ
・「学科 グラフィックデザイン基礎①～⑦」の訓練ブログ（1/31開始）
・「学科 HTML基礎 ①～④ 」の訓練ブログ （1/31開始）
・「学科 CSS基礎①～④」の訓練ブログ （2/8開始）

本日の課題

WordPressサイトにポートフォリオを構築してください

2022年02月14日（月）

学科 CSS基礎②

-本日のアジェンダ-

1限目
学科 CSS基礎②
ボックスモデルについて

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

3限目
学科 CSS基礎②
横並び（float）について

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

5限目
学科 CSS基礎②
グラフィックツールの復習

本日のテーマ

ボックスモデルについて

width と height について

単純にボックスに幅と高さを持たせるタグになります。ただし、幅と高さが持てるのは、ブロックレベル要素になります。
また、Webサイトの性質上細かなルールがいくつも存在します。
まずはしっかりとボックスモデルの基礎となるという事を意識しておきましょう。

サンプルページ（CSSの記述【配置】）

ワンポイントアドバイス

幅（width）については、ある程度指定した数値が反映されますが、高さ（height）の指定については、複雑なルールがあります。
高さ（height）は、基本ニュートラルに設定し、やむを得ない場合のみ絶対値を指定すると覚えておくと、よいかもしれません。

参考サイト

border と padding と margin について

要素の中身（内容）があり、そのまわりの余白がpaddingです。 そのまわりにはborder（線）があり、それより外側の余白がmarginです。 … この図のようなCSSの余白の考え方はボックスモデルと呼ばれます。 なお、要素に対してwidthとheightの値を指定した場合には、要素の中身の部分の大きさが変わります。

サンプルページ（CSSの記述【ボックス】）

ワンポイントアドバイス

CSSで最も理解度が求められるタグが「border」「padding」「margin」です。CSSの理解の最重要ポイントになりますので、しっかりと理解と確認をしておきましょう。また、役割を分けるのも制作のコツです。
borderは、罫線の装飾
paddingは、内側の余白
marginは、ボックスとボックスとの距離
というように、役割を明確にしておきましょう。

参考サイト

ボックスモデルについて

英語から翻訳-Web 開発では、CSS ボックス モデルは、HTML 要素がブラウザー エンジンでどのようにモデル化され、それらの HTML 要素のサイズが CSS プロパティからどのように導出されるかを指します。これは、HTML Web ページを構成するための基本的な概念です。 ウィキペディア（英語)

ボックスモデルとは HTMLのすべての要素は高さ、幅を持った四角形の中心にコンテンツ（文章、画像等）が入っています。 … ボックスモデルは、コンテンツを中心に4つの要素（コンテンツ, border, magrin, padding)で構成されています。

参考サイト

背景について

backgroundプロパティは、背景に関する指定をまとめて行う際に使用します。 指定の順序は問われません。また、必要のない指定は省略可能です。

サンプルページ（画像）

参考サイト

「img」と「background」の違いについて

コーディングをする時「img」と「background」で画像をどちらとして使用するのかがとても重要になります。「img」はHTMLなので文法の意味を持ち、「 background 」はCSSなので、見た目の話しだけになります。
サイトデザインの重要ポイントになりますので注意しておきましょう。

横並び（float）について

floatプロパティは、指定された要素を左または右に寄せて配置する際に使用します。 後に続く内容は、その反対側に回り込みます。

clear について

clearプロパティは、floatの回り込みを解除するプロパティです。 clearプロパティは、float指定した要素の次の要素に指定します。 float要素が連続している場合、一番最後のfloat要素の次の要素に指定します。

ワンポイントアドバイス

floatは約十数年ぐらいの間、CSSのレイアウトで横並びをさせる手法として多くのサイトで利用されていました。現在ではそれに代わる手法がいくつか用意されていますが、長い間多くのデザイナーさん達が使ってきているので、現サイトの更新業務としては、まだまだ遭遇する可能性が高いので、しっかりとその仕組みを理解しておきましょう。

参考サイト

float を clear する方法について

floatを解除する方法はいくつかありますが、抑えておきたい方法として３つはしっかり覚えておきましょう。

① float を clear する方法について「 clear 」を使う

floatを指定した要素の後に来る要素にclearを指定する
関係性は必ず同階層である事（親子関係では適用されない）

② float を clear する方法について「 clearfix 」を使う

float している要素の親要素に、疑似要素の:afterを利用し下記のように記述します。
※①のようにclear出来ない場合にこちらを使うと良いでしょう。

セレクタ:after {
display: block;
clear: both;
content: “”;
}

③ float を clear する方法について「 overflow: hidden;  」を使う

float している要素の親要素に、overflow: hidden;を使うと適用できます。
※ただし厳密には文法として変であるという説もありますので、仕様変更やバグに気を付けて利用しましょう。

参考サイト

サンプルページ（レイアウト見本）

サンプルページ（横並びについて）

本日の課題①

wordpressのサイトに、本日学んだ内容を「投稿ページ」にまとめてください。
投稿日は、本日の日時で設定してください。
※ページタイトルに「議題」は必ず入れましょう。

本日の課題②

グラフィックデザイン基礎の内容をページにまとめてください。
投稿日は、該当する「学科　グラフィックデザイン基礎」の日時にしてください。
※ページタイトルに「議題」は必ず入れましょう。

2022年02月15日（火）

学科 CSS基礎③

-本日のアジェンダ-

1限目
学科 CSS基礎③
positionについて

2限目
学科 CSS基礎③
displayの種類について

3限目
学科 CSS基礎③
overflow について

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

5限目
学科 CSS基礎③
グラフィックツールの復習

本日のテーマ

配置について

positionについて

positionについては、使い方を誤るとややこしくなりますので、基本的な3つの使い方と使い分けをしっかりと覚えておきましょう。

  1. position:relative; （相対位置）
  2. position:absolute; （絶対位置）
  3. position:fixed; （固定位置）

サンプルページ（CSSの記述【配置】）

サンプルファイル（positionの基本の使い方）

サンプルファイル（positionの使い方）

ワンポイントアドバイス

position タグは、コーディングをする時に設計を複雑にしてしまいます。計画的に行うか、最後に行うなどして工夫すると良いでしょう。

参考サイト

displayについて

displayタグを使う事で、様々なレイアウトを可能にします。まずはブロックレベル要素とインライン要素の違いと特徴をしっかりと確認しておきましょう。

サンプルファイル（ displayの種類について ）

参考サイト

overflow について

overflowは、これまでのタグでも注意は必要でしたが、特に気を付ける事としてブラウザ依存する（ブラウザ毎にデザインが異なる）という点に注意しましょう。

サンプルファイル（ overflow見本）

参考サイト

本日の課題①

wordpressのサイトに、本日学んだ内容を「投稿ページ」にまとめてください。
投稿日は、本日の日時で設定してください。
※ページタイトルに「議題」は必ず入れましょう。

本日の課題②

グラフィックデザイン基礎の内容をページにまとめてください。
投稿日は、該当する「学科　グラフィックデザイン基礎」の日時にしてください。
※ページタイトルに「議題」は必ず入れましょう

2022年02月16日（水）

学科 CSS基礎④

-本日のアジェンダ-

1限目
学科 CSS基礎④
CSSの記述【疑似クラス・疑似要素】

2限目
学科 CSS基礎④
CSSの記述【リスト】CSSの記述【表】

3限目
学科 CSS基礎④
その他のCSSについて

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

5限目
学科 CSS基礎④
グラフィックツールの復習

本日のテーマ

CSSはその他にもいろいろあります。

疑似クラス・疑似要素 について

擬似クラスとは … 擬似クラスとは指定の要素が特定の状態である場合にスタイルを適用させるセレクタです。 文章構造の範囲外にある情報によってスタイルを変化させることができます。
 擬似要素とは、要素の一部に対してスタイルを適用できる指定方法です。 HTML​の要素を擬似的にCSSで設定するので、コーディングに手を加えることなく装飾を適用することができます。

ワンポイントアドバイス

疑似クラス・疑似要素はここまで学んだ基本的なCSSを更に効果的に使う為の技術です。ここまで学んだ内容を復習しながら使うと良いでしょう。

サンプルファイル（ CSSの記述【疑似クラス・疑似要素】）

参考サイト

リスト や 表 について

リスト項目やテーブル（表）のHTMLのタグに対して、それぞれのCSSがあります。文法と見た目の特徴に合わせて上手に使っていきましょう。

サンプルファイル（ CSSの記述【リスト】）

サンプルファイル（ CSSの記述【表】）

参考サイト

様々なCSSについて

ここまで学んだCSS以外にも様々なCSSがあります。また新しいものも出てきます。ただしブラウザによって使えるタグが異なったり、デバイス依存もあります。OSにも影響もあります。日々変わる業界の動向にアンテナを張っていきましょう。

ワンポイントアドバイス

まずはこれまで学んだCSSをしっかりと覚えてまずは、「知る」次に「使う」そしてお仕事で「使いこなす」を目指しましょう。
コツとしては、「自分なりにまとめる」をしっかりと定期的に行うと良いでしょう。

参考サイト

本日の課題①

wordpressのサイトに、本日学んだ内容を「投稿ページ」にまとめてください。
投稿日は、本日の日時で設定してください。
※ページタイトルに「議題」は必ず入れましょう。

本日の課題②

グラフィックデザイン基礎の内容をページにまとめてください。
投稿日は、該当する「学科　グラフィックデザイン基礎」の日時にしてください。
※ページタイトルに「議題」は必ず入れましょう。

2022年02月18日（金）

ハローワーク来所日③

2022年02月21日（月）

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

-本日のアジェンダ-

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

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

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

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

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

本日のテーマ

Webサイト制作にあたり、まずはワイヤーフレームを作成しましょう。

Webサイトとは？

ウェブサイトは、World Wide Web 上にあり、一般に特定のドメイン名の下にある複数のウェブページの集まりのこと。サイトと呼ばれることもある。企業などの団体が自身を紹介するため自ら構築したサイトを、その団体の公式サイトなどと呼ぶ。 ホームページと呼ばれることもあるが、この用法は誤用とされる場合もある。 ウィキペディア

参考サイト

LP（ランディングページ）とは？

ランディングページ最適化はコンバージョン最適化、もしくはコンバージョン率最適化と呼ばれるより広範なインターネットマーケティング手法の一つであり、セールスリードや顧客となりうるウェブサイト訪問者の比率を向上させることを目的としている。 ウィキペディア

ワンポイントアドバイス

未経験でいきなりWebサイトを作るよう業務を指示する制作会社はありません。もし言って来たら疑ってください。個人レベルや担当者がWebサイト制作の知識理解が足りない等で、依頼されるなどの事は逆によくあるかもしれませんのでお気を付けください。
そこで、まずは最初の一歩としてチャレンジするのであればLP（ランディングページ）のような、1ページのページ制作をしっかりと行ってみると良いでしょう。

参考サイト

ワイヤーフレームとは？

ワイヤーフレームとは、webページのレイアウトを定める設計図のことです。
webサイトの制作現場で聞かないことがない、といえる単語であり、サイト制作において決して欠かせない要素です。
単に「ワイヤー」と呼ぶことも多いです。

制作のポイント

・使用ソフトはPhotoshopです。
・サイズはPC基準です。規格は世の中のサイト例を参考にしてみましょう。
【サイズ例】ページ幅1280px、コンテンツ幅960px
・まずは色を入れず、白黒で制作しましょう。
・余白を意識し、サイズバランスもWEBサイトの完成形と同じにしましょう。(実務ではpxピクセル単位で仕上げます)
・バナー制作と同じく、①掲載が必要な内容(情報)を先にしっかりまとめる②情報の順番づけ③レイアウトを考える手順で制作すると良いでしょう。そのレイアウトが、HTMLとCSSというルールに変わるだけです。

ワンポイントアドバイス

ワイヤーフレームの段階では、お仕事の契約成立に至っていない場合が多いです。逆を言えば、しっかりとしたワイヤーフレームを作成できるという事は、「仕事を獲得できる力がある」という証明にもなります。お客様のご要望（相手の気持ち）をしっかり理解する事を心掛けて制作をしてみましょう。

参考サイト

UI/UX とは？

さまざまデバイスに対応したコンテンツを作るには、環境・時間・空間・性別・年齢・人数…等々
それらを「User Interface：ユーザインターフェイス」や「User Experience：ユーザエクスペリエンス」と
いう言葉で表現されています。ここで活きるのは「体験という経験」になるでしょう。

ワンポイントアドバイス

「使い易い」「役に立つ」「解りやすい」をポイントにデザイン設計を考えてみましょう。

参考サイト

本日の課題

ワイヤーフレームの作成

白黒のワイヤーフレームを作成し、4限目終了までにドロップボックスにUPしてください。5限目に講評を行います。
※ファイル名は、work_xxxx_20220122.jpg

2022年02月22日（火）

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

-本日のアジェンダ-

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

2限目
学科 レイアウトデザイン基礎②
HTML/CSSをイメージしたレイアウト考案について

3限目
学科 レイアウトデザイン基礎②
HTML/CSSをイメージしたレイアウト考案について

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

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

本日のテーマ

コーディングの準備をしましょう①

デザインラフとは？

ラフは、WEBサイトを作る上で、レイアウトなどのイメージを作り、チーム内やクライアントと共有するためのものです。 割と重要なものになります。 いきなりワイヤーフレームを作ったり、デザイン案を作ったりというケースもありますが事前にラフを作っておくことにより、より一層スムーズに制作が進められるようになります。

ワンポイントアドバイス

ワイヤーフレームの次はデザインラフを提出する事がよくある制作の流れです。デザインラフは画像でサイトの仕上がりをお客様に見せる為です。逆を言えば、デザインラフはしっかりと完成形をイメージして制作する必要があります。コーディングというお仕事は、デザインラフ通りに再現する事が求められます。HTML/CSSをしっかりと意識して作成をしましょう。

デザインラフの例

制作のポイント

実務では・・・
デザインラフの制作はお客様と、多くのやり取りが必要になるでしょう。
デザインは必ず複数パターンの提案（最低2パターン）をして、お客様とのイメージの共有を具現化して行けるよう進めましょう。

参考サイト

第4回成績考査

3月1日の成績考査4限目終了までに、WEBページのデザインラフを提出してください。
WEBページの内容は、自由です。
※是非、就職活動に活かせる作品を作成してみてください。
※提出方法はデータ保存したデザインラフのWordpress投稿です。

2022年02月23日（水）

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

-本日のアジェンダ-

1限目
学科 レイアウトデザイン基礎③
ボックスモデルの確認

2限目
学科 レイアウトデザイン基礎③
レスポンシブWEBデザインについて

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

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

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

本日のテーマ

コーディングの準備をしましょう②
ボックスモデルのおさらいが大事です！

Box model のおさらい

Web 開発では、CSS ボックス モデルは、HTML 要素がブラウザー エンジンでどのようにモデル化され、それらの HTML 要素のサイズが CSS プロパティからどのように導出されるかを指します。これは、HTML Web ページを構成するための基本的な概念です。 ウィキペディア（英語)

ワンポイントアドバイス

ボックスモデルで大切なことは、見た目では無くCSSのコードで記述した数値を頭でしっかり描く事が重要になります。
見た目だけ良ければという考えにならないように気を付けましょう。

参考サイト

レスポンシブWEBデザイン（RWD）とは？

「レスポンシブWEBデザイン（Responsive WEB Design）」は、PC、タブレット、スマートフォンなど、デバイスの画面サイズよってResponsive=反応するWEBデザインという意味で、WEBサイトを単一のHTML（ワンソース）で実現する制作手法です。ブラウザのスクリーンサイズを基準にCSSでレイアウトすることで、デバイスごとに専用サイトを用意することなく、マルチスクリーンに対応したWEBサイトを制作できます。

資料・・・
Dropbox / 資料 /【4】コーディング /「マルチデバイス対応の教科書」

サンプルページ（レスポンシブWebデザイン基礎）

ワンポイントアドバイス

昨今のWebサイトでレスポンシブWebデザインは必須とも言える技術になります。使い方が様々ですが、特にメディアクエリはCSSの基礎理解がとても重要になります。シンプルに整理して覚えていきましょう。

〜 デザインラフのおさらい 〜

デザインラフとは？

ラフは、WEBサイトを作る上で、レイアウトなどのイメージを作り、チーム内やクライアントと共有するためのものです。 割と重要なものになります。 いきなりワイヤーフレームを作ったり、デザイン案を作ったりというケースもありますが事前にラフを作っておくことにより、より一層スムーズに制作が進められるようになります。

ワンポイントアドバイス

ワイヤーフレームの次はデザインラフを提出する事がよくある制作の流れです。デザインラフは画像でサイトの仕上がりをお客様に見せる為です。逆を言えば、デザインラフはしっかりと完成形をイメージして制作する必要があります。コーディングというお仕事は、デザインラフ通りに再現する事が求められます。HTML/CSSをしっかりと意識して作成をしましょう。

デザインラフの例

制作のポイント

実務では・・・
デザインラフの制作はお客様と、多くのやり取りが必要になるでしょう。
デザインは必ず複数パターンの提案（最低2パターン）をして、お客様とのイメージの共有を具現化して行けるよう進めましょう。

参考サイト

第4回成績考査

3月1日の成績考査4限目終了までに、WEBページのデザインラフを提出してください。
WEBページの内容は、自由です。
※是非、就職活動に活かせる作品を作成してみてください。
※提出方法はデータ保存したデザインラフのWordpress投稿です。

2022年02月28日（月）

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

-本日のアジェンダ-

1限目
学科 レイアウトデザイン基礎④
パターン展開について

2限目
学科 レイアウトデザイン基礎④
デザインの3大要素について

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

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

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

本日のテーマ

パターン違いのデザインラフ(第2案目)を作成しましょう

ワンポイントアドバイス

いま一度デザインの3大要素を意識して、今あるデザインからのパターン展開を考えてみましょう。

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

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

参考サイト

【2】文字デザイン

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

参考サイト

【3】配色デザイン

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

参考サイト

第4回成績考査

3/1の成績考査4限目終了までに、WEBページのデザインラフを提出してください。
WEBページの内容は、自由です。
※提出は1パターンで構いませんが、パターン展開ができた方は複数提出していただいても構いません。
※是非、就職活動に活かせる作品を作成してみてください。
※提出方法はデータ保存したデザインラフのWordpress投稿です

2022年03月01日（火）

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

-本日のアジェンダ-

1限目
学科 レイアウトデザイン基礎⑤
成績考査

2限目
学科 レイアウトデザイン基礎⑤
成績考査

3限目
学科 レイアウトデザイン基礎⑤
成績考査

4限目
学科 レイアウトデザイン基礎⑤
成績考査

5限目
学科 レイアウトデザイン基礎⑤
講評

本日のテーマ

成績考査です

第4回成績考査

本日の4限目終了までに、WEBページのデザインラフを提出してください。
WEBページの内容は、自由です。
※是非、就職活動に活かせる作品を作成してみてください。
※提出方法はデータ保存したデザインラフのWordpress投稿です。

WordPressへの成績考査の上げ方

ご自身のWordPressに成績考査用のバナーを投稿していただきます。
手順は以下の通りです。

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

②タイトル（タイトルを追加の部分）に「第四回成績考査」、次のブロックにお名前（漢字フルネーム）を入力して下さい。

③以降のブロックにバナー画像をブロックエディタ「画像」にてアップロードして下さい。

④投稿設定のパーマリンクのURLスラッグに下記を設定して下さい。
grade-check_お名前(ローマ字※姓のみ)_20220301

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

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

2022年03月02日（水）

学科 XD基礎

-本日のアジェンダ-

1限目
学科 XD基礎
XDについて

2限目
学科 XD基礎
XDの使い方について

3限目
学科 XD基礎
データ連携について

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

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

本日のテーマ

adobe XD です。

adobe XD とは？

Adobe XDは、アドビが販売しているベクターベースのプロトタイピング作成ツールである。 ウィキペディア

ワンポイントアドバイス

XDはまだ求人票で必要なスキルと掲載は少ないですが、取り入れている企業と、取り入れているデザイナーさんは増えています。
まずは、基本操作と利点などをしっかりと確認しておきましょう。

参考サイト

XD データ連携について

Adobe XD では、Photoshop や Illustrator などの他のアドビアプリケーションからデザイン素材を読み込むことができます。XD では、これらのデザイン素材をさらに拡張することも、これらのデザイン素材を使用してインタラクティブプロトタイプを作成することもできます。

ワンポイントアドバイス

実際のお仕事では、お客様とのやり取りに合わせて連携方法が変わるでしょう。必要に応じて、ai（Illustrator）なのかpsd（Photoshop）がいいのか、XDがいいのか、お客様に合わせて判断していきましょう。

参考サイト

第5回成績考査について

3月30日(水)の5限目までに、Webページを提出してください。
提出は完成形ではなく、「途中の段階」で結構です。
今後卒業までの期間を使って完成形を目指してみてください。

※WEBページはFFFTPでHTMLサーバーにアップしてください。
※サイト内容は自由です。是非、就職活動に活かせる作品を作成してみてください。

2022年03月07日（月）

実技 XD実習

-本日のアジェンダ-

1限目
実技 XD実習
スマホサイトの制作について

2限目
実技 XD実習
プロトタイプのフロー設定と共有機能について

3限目
実技 XD実習
課題制作

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

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

本日のテーマ①

スマホサイトの制作について

スマホサイトの制作について

Adobe XDでは、webサイトや、モバイルアプリなどのデザインに適した、オールインワンのUX/UIソリューションと言われています。デザイン、プロトタイプ、共有、すべてをXDでおこない活用することで、デザイナーはより早く、正確に、高い品質で作業できます。

ワンポイントアドバイス

XDを使ってスマホサイトのデザインを構築するのが、昨今のXD利用の最も実践的な利用方法でしょう。aiやpsdでも作れてXDでもワイヤーフレームやデザインラフを制作で来ていると理想的でしょう。

参考サイト

本日のテーマ②

XDの共有機能について

XDの共有機能について

「共有」は、作業チームのコミュニケーションをスムーズにしたり、情報伝達を容易にしたりする機能です。1つのWebサイトやアプリを作る際には、多くの人の意見をとりまとめたり、必要に応じて修正を加えたりする必要があります。Adobe XDにはそんなチームの共同作業をスムーズに進めるための各種機能が含まれています。

ワンポイントアドバイス

XDの共有機能は、会社お勤めになってから利用すると良いですが、出来る事と出来ない事、注意点を確認しておきましょう。

※訓練施設のアカウントは施設アカウントなのでこのPCではやらないでください。お仕事の時やご自身のアカウントで行いましょう。

参考サイト

その他参考サイト

第5回成績考査について

3月30日(水)の5限目までに、Webページを提出してください。
提出は完成形ではなく、「途中の段階」で結構です。
今後卒業までの期間を使って完成形を目指してみてください。

※WEBページはFFFTPでHTMLサーバーにアップしてください。
※サイト内容は自由です。是非、就職活動に活かせる作品を作成してみてください。

2022年03月08日（火）

実技 WEBデザイン実習①

-本日のアジェンダ-

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

2限目
実技 WEBデザイン実習①
Dreamweaver の使い方とコーディングについて

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

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

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

本日のテーマ

Dreamweaverです。

Dreamweaverについて

Adobe Dreamweaver（アドビドリームウィーバー）は、ひとことで言うとホームページ制作ソフトです。
編集機能やレイアウトの表示機能、ファイル管理機能など、制作や更新作業に必要な機能がひとまとめになっている、統合ソフトウェアとなります。
アドビシステムズのホームページでは、“Webデザインソフトウェア、HTMLエディター”となっています。“Webオーサリングツール”や“Webサイト作成ソフト”などとも呼ばれます。ホームページは基本的に「HTML＋画像」なので、頑張れば「メモ帳＋ペイント」でもなんとか作れます。しかし、作業効率などやミスの防止などを考えると、専用ソフトを利用した方が効果的です。

ワンポイントアドバイス

Dreamweaverの歴史は長いです。いま世にいるデザイナーのほとんどの方がDreamweaverを過去に使った又は習った事のあるケースが多いです。ただし、昨今ではDreamweaverの需要は落ちています。
その理由は、様々ですがこれからの希望職に合わせて、習得してみてください。

参考サイト

第5回成績考査について

3月30日(水)の5限目までに、Webページを提出してください。
提出は完成形ではなく「途中の段階」で結構です。
今後、卒業までの期間を使って完成形を目指してみてください。

※WEBページはFFFTPでHTMLサーバーにアップしてください。
※サイト内容は自由です。是非、就職活動に活かせる作品を作成してみてください。

就職活動に役立つサイト

情報収集に役立つ参考サイト

2022年03月09日（水）

実技 WEBデザイン実習②

-本日のアジェンダ-

1限目
実技 WEBデザイン実習②
Dreamweaverの便利機能について

2限目
実技 WEBデザイン実習②
DreamweaverのFTP機能について

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

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

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

本日のテーマ

Dreamweaverの便利な機能の確認

Dreamweaverについて

Adobe Dreamweaver（アドビドリームウィーバー）は、ひとことで言うとホームページ制作ソフトです。
編集機能やレイアウトの表示機能、ファイル管理機能など、制作や更新作業に必要な機能がひとまとめになっている、統合ソフトウェアとなります。
アドビシステムズのホームページでは、“Webデザインソフトウェア、HTMLエディター”となっています。“Webオーサリングツール”や“Webサイト作成ソフト”などとも呼ばれます。ホームページは基本的に「HTML＋画像」なので、頑張れば「メモ帳＋ペイント」でもなんとか作れます。しかし、作業効率などやミスの防止などを考えると、専用ソフトを利用した方が効果的です。

ワンポイントアドバイス

置換機能やコードヒントなど便利な機能もありますのでしっかりポイントを押さえておきましょう。

参考サイト

FTP機能について

ワンポイントアドバイス

DWでもサーバにUPする機能が付いています。使いどころと注意点をしっかり理解して必要に応じて使用しましょう。

参考サイト

第5回成績考査について

3月30日(水)の5限目までに、Webページを提出してください。
提出は完成形ではなく「途中の段階」で結構です。
今後、卒業までの期間を使って完成形を目指してみてください。

※WEBページはFFFTPでHTMLサーバーにアップしてください。
※サイト内容は自由です。是非、就職活動に活かせる作品を作成してみてください。

就職活動に役立つサイト

情報収集に役立つ参考サイト

2022年03月14日（月）

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

-本日のアジェンダ-

1限目
実技 スマートフォンサイト作成実習①
Viewportついて

2限目
実技 スマートフォンサイト作成実習①
Media Queriesについて

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

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

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

本日のテーマ

スマホ対応はCSSの延長線です。

レスポンシブWEBデザイン（RWD）とは？

「レスポンシブWEBデザイン（Responsive WEB Design）」は、PC、タブレット、スマートフォンなど、デバイスの画面サイズよってResponsive=反応するWEBデザインという意味で、WEBサイトを単一のHTML（ワンソース）で実現する制作手法です。ブラウザのスクリーンサイズを基準にCSSでレイアウトすることで、デバイスごとに専用サイトを用意することなく、マルチスクリーンに対応したWEBサイトを制作できます。

サンプルページ（レスポンシブWebデザイン基礎）

ワンポイントアドバイス

昨今のWebサイトでレスポンシブWebデザインは必須とも言える技術になります。使い方が様々ですが、特にメディアクエリはCSSの基礎理解がとても重要になります。シンプルに整理して覚えていきましょう。

参考サイト

Viewport とは？

viewport（ビューポート）とは、日本語に訳すと「表示領域」という言葉がしっくりくると思います。例えば、デスクトップ環境（PCなど）のブラウザなどでは、ブラウザウインドウの表示領域がviewportになります。… 表示のされ方は、制作者がmeta要素のviewportで指定することができます。

ワンポイントアドバイス

viewport はサイト制作の時最初の1度しか書かないので、単純に入れ忘れに注意しましょう。

参考サイト

Media Queries とは？

メディアクエリは、CSS スタイルに適用できるシンプルなフィルタです。メディアクエリを使用すると、画面の種類、幅、高さ、向き、解像度など、コンテンツをレンダリングするデバイスの特性に基づいて、スタイルを容易に変更できます。

ワンポイントアドバイス

メディアクエリは様々な記述方法がありますが、まずは1つのルールで書いてみましょう。

参考サイト

本日の提出物はありません。

2022年03月15日（火）

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

-本日のアジェンダ-

1限目
実技 スマートフォンサイト作成実習②
実機検証ついて

2限目
実技 スマートフォンサイト作成実習②
Webサイトの納品について

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

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

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

本日のテーマ

実機検証は最後にしっかりと

レスポンシブWEBデザイン（RWD）とは？

「レスポンシブWEBデザイン（Responsive WEB Design）」は、PC、タブレット、スマートフォンなど、デバイスの画面サイズよってResponsive=反応するWEBデザインという意味で、WEBサイトを単一のHTML（ワンソース）で実現する制作手法です。ブラウザのスクリーンサイズを基準にCSSでレイアウトすることで、デバイスごとに専用サイトを用意することなく、マルチスクリーンに対応したWEBサイトを制作できます。

サンプルページ（レスポンシブWebデザイン基礎）

ワンポイントアドバイス

昨今のWebサイトでレスポンシブWebデザインは必須とも言える技術になります。使い方が様々ですが、特にメディアクエリはCSSの基礎理解がとても重要になります。シンプルに整理して覚えていきましょう。

実機検証 について

スマホによる実機検証は、新しく開発したアプリやWebサイトを利用者が実際に使う端末機を使ってテストを行うことで、問題や不具合を発見し、品質を向上させるもの。 世にWebサイトやアプリをリリースするための重要な作業の一つです。

ワンポイントアドバイス

サイトが出来たら、出来る限りの実機検証を行ってみましょう。
実機でしかないバグや見た目の違いが多くありますので、サイトが一通り形になったら実機検証を出来る範囲で行ってみましょう。

参考サイト

Webサイトの納品 について

サイトが完成したら後は納品です。納品方法は色々なパターンがありますので、ご依頼を頂いたお客様としっかりと確認をして納品を行いましょう。

ワンポイントアドバイス

FTPでサーバにUPして納品となるのが一般的ですが、データ納品となる場合もよくあります。ファイル名や無駄なファイルが残っていないように気を付けて納品を行いましょう。

参考サイト

本日の提出物はありません。

2022年03月18日（金）

ハローワーク来所日④

2022年03月22日（火）

学科 SNS運用基礎

-本日のアジェンダ-

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

2限目
学科　SNS運用基礎
WebサイトとSNSの使い方について

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

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

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

本日のテーマ

WebサイトでのSNSの活用法についてです。

SNS とは?

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

https://youtube.com/watch?v=aOymOiQdNaE%3Ffeature%3Doembed

ワンポイントアドバイス

Webを利用するポイントとして、「Webサイト」「ブログ」「SNS」はWeb運用として重要なコンテンツの３つです。役割と特徴をしっかりと把握して、Webに関わるお仕事に関われるようにしましょう。

参考サイト

SNSの埋め込み方

埋め込み例
https://samplesdl.me/training_html-css/sns.html

本日の提出物はありません。

2022年03月23日（水）

学科 WEB動画基礎

-本日のアジェンダ-

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

2限目
学科　WEB動画基礎
WebサイトでYouTubeの 使い方について

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

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

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

本日のテーマ

WebサイトでのYouTubeの活用法についてです。

YouTubeにつて

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

VIDEOとIFRAMEタグ

WEBサイトに動画を埋め込む方法は２つあります。
①iframeタグを使用する（youtubeなどの動画サイトから読み込む）
②videoタグを使用する（動画ファイルをアップロードして読み込む）

①IFRAMEタグを使用する（YOUTUBEなどの動画サイトから読み込む）

記述例
<iframe width="410" height="200" src="https://www.youtube.com/embed/9No-FiEInLA" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen>

②VIDEOタグを使用する（動画ファイルをアップロードして読み込む）

記述例
<video src="sample.mp4"></video>

参考サイト

その他、埋め込みについては下記を参考に！

SNSの埋め込み方

本日の提出物はありません。

2022年03月28日（月）

学科　JavaScript基礎

-本日のアジェンダ-

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

2限目
学科　JavaScript基礎
JavaScript 使い方について

3限目
学科　JavaScript基礎
課題作成

4限目
学科　JavaScript基礎
課題作成

5限目
学科　JavaScript基礎
課題作成

本日のテーマ

JavaScriptの活用法についてです。

JavaScript とは？

JavaScriptはスクリプト言語のひとつでありNetscape Communications社によって開発されたプログラミング言語ですが、標準化され現在ではほとんどのブラウザの標準スクリプト言語として使用されています。JavaScriptを使用することでWebページに動きを与えたり算術などの処理を行うことが可能になります。JavaScriptはクライアント（ブラウザ）のスクリプト言語として発展して来ましたが近年ではサーバーサイドでも稼働するものもあります。JavaScriptの言語仕様はECMAScriptとして標準化されています。

参考サイト

2022年03月29日（火）

実技 JavaScript（jQuery）実習①

-本日のアジェンダ-

1限目
実技 JavaScript（jQuery）実習①
jQuery について

2限目
実技 JavaScript（jQuery）実習①
jQueryの使い方について

3限目
実技 JavaScript（jQuery）実習①
課題作成

4限目
実技 JavaScript（jQuery）実習①
課題作成

5限目
実技 JavaScript（jQuery）実習①
課題作成

本日のテーマ

jQueryの活用法についてです。

jQueryについて

jQueryを利用する時の基本事項を理解しましょう。

参考サイト

jQueryの利用方法

jQueryを利用する時は実装するための参考サイトを検索し利用方法を理解しましょう。
検索は、「jQuery （実装したいキーワード）」で検索します。
良く使うキーワードの例は、以下の通りです。

  • スライダー
  • カルーセル
  • ハンバーガーメニュー
  • ライトボックス
  • ドリルダウン
  • フェード
  • スクロール
  • など

参考サイト

jQueryの導入

jQueryを自分のサイトに導入して動きのあるサイトを作りましょう。

参考サイト

第5回成績考査について

明日の5限目までに、Webページを提出してください。
提出は完成形ではなく、「途中の段階」で結構です。
今後卒業までの期間を使って完成形を目指してみてください。

※WEBページはFFFTPでHTMLサーバーにアップしてください。
※サイト内容は自由です。是非、就職活動に活かせる作品を作成してみてください。

2022年03月30日（水）

実技 JavaScript（jQuery）実習②

-本日のアジェンダ-

1限目
実技 JavaScript（jQuery）実習②
成績考査

2限目
実技 JavaScript（jQuery）実習②
成績考査

3限目
実技 JavaScript（jQuery）実習②
成績考査

4限目
実技 JavaScript（jQuery）実習②
成績考査

5限目
実技 JavaScript（jQuery）実習②
成績考査

本日のテーマ

成績考査です

第5回成績考査

本日の5限目までに、Webページを提出してください。
提出は完成形ではなく、「途中の段階」で結構です。
今後卒業までの期間を使って完成形を目指してみてください。

※WEBページはFFFTPでHTMLサーバーにアップしてください。
※サイト内容は自由です。是非、就職活動に活かせる作品を作成してみてください。

★ 提出時のお願い★

<head></head>タグ内のタイトルを「お名前(フルネーム)」に変更して提出して下さい。

【記述例】
<head>
<meta charset=”utf-8”>
<title>提出 太郎</title> ←★ここです
<meta name=……>
<link rel=……>
<link href=……>
</head

2022年03月31日（木）

学科 WEBマーケティング基礎

-本日のアジェンダ-

1限目
学科 WEBマーケティング基礎
WEBマーケティング について

2限目
学科 WEBマーケティング基礎
Googleアナリティクスについて

3限目
学科 WEBマーケティング基礎
課題作成

4限目
学科 WEBマーケティング基礎
課題作成

5限目
学科 WEBマーケティング基礎
課題作成

本日のテーマ

Googleアナリティクス で効果測定を理解しておきましょう。

マーケッティングとは？

ビジネスを成功させるためにはマーケッティング活動が重要です。まずは、マーケティング活動の一般論について理解しましょう。

参考サイト

WEBマーケッティングとは？

最近はWebを使用したマーケッティング活動が重要視されています。Webマーケッティング活用の基本について理解しましょう。

参考サイト

SEOについて

SEOとは？

Webページを作ったら、誰もが多くの人に見てもらいたいと思うでしょう。趣味で作ったWebページなら、お友達に見せるだけでもいいかもしれませんが、ネットショップやアフィリエイトなど、事業としてやりたい場合は訪問者を増やす施策が必要です。普通はインターネットに公開しただけでは誰にも見てもらえませんから、訪問者を呼び込む何らかの方法が必要になるのです。そこで、注目されているのがSEOと呼ばれる方法です。

SEO（エスイーオー）というのは Search Engine Optimization の頭文字を取ったもので、検索エンジン最適化と呼ばれています。これは検索エンジンの検索結果の上位に表示されるようにするテクニックです。現在インターネット利用者は必要な情報を探すために Yahoo! や Google といった検索サービスを利用している方が多いです。そして、利用者のほとんどが検索結果の１ページ目か２ページ目までしか見ていない傾向があります。つまり、これら検索サービスの上の方に表示されれば、インターネット利用者の多くを効率的に自分のWebページに呼び込むことが出来るというわけです。

SEMとは？

SEMとは Search Engine Marketing （検索エンジンマーケティング） の略で インターネット上での市場調査を行う事を指します。 自社サイトのターゲットとユーザーのニーズを把握し どのようなキーワードでの検索結果に上位表示されれば最適なのかを詳しく調査します。 検索エンジンの検索結果の上位に表示されるようにサイトの構成を整備するSEO(検索エンジン最適化)や、 検索連動型広告などによる広告掲載などもSEMに含まれます。

LPOとは？

LPOは「Landing Page Optimization」の略で「ランディングページ最適化」と言います。 広告や外部サイトからリンクを辿って最初に表示されるページをランディングページと呼びます。 初めて訪れたユーザーに適切な導線（ユーザーの視線やカーソル位置を想定した流れ）や便利な検索機能を提供し コンバージョンレートを上げる為に最適なサイト構成に整備します。

参考サイト

Webデザイナー（コードを書く仕事）で必要なSEO

SEO対策を意識したコーディングと言うものは、まず正確にHTMLを記述しなくてはなりません。HTMLと言うものは多少間違った記述が行われていても、取り敢えずはウェブページとして表示されるわけです。しかし、検索エンジンは正しいHTMLで記述されていないと評価を低くしてしまい、SEOに対してはマイナス要素となってしまうのです。その為HTMLソースコーダーにはSEO対策を意識したHTMLの知識が必要になると言う事なのです。

参考サイト

被リンクについて

被リンクの扱いはとても要注意です！！まだまだ理解されていない企業、制作会社がまだ多いです。SEO対策でとても重要な内容になります。

参考サイト

SNSについて

最近は、SNSを利用したマーケッティングも活性化しています。マーケッティング断面でのSNS活用方法を理解しましょう。

参考サイト

Googleアナリティクス

Google Analyticsは、Googleが無料で提供するWebページのアクセス解析サービス。 元々はGoogleが2005年に買収した、米国のWeb解析ソリューションプロバイダー・Urchin社の技術を利用している。

参考サイト

Googleウェブマスターツール（Google Search Console）について

第5回成績考査

5月12日5限目までに、紙用（pdf）ポートフォリオを提出してください。
ポートフォリオの内容は、自由です。
※是非、就職活動に活かせる作品を作成してみてください。

2022年04月04日（月）

学科 サーバーサイドプログラム基礎

-本日のアジェンダ-

1限目
学科 サーバーサイドプログラム基礎
サーバーサイドプログラム について

2限目
学科 サーバーサイドプログラム基礎
WordPressのサーバ について

3限目
学科 サーバーサイドプログラム基礎
課題作成

4限目
学科 サーバーサイドプログラム基礎
課題作成

5限目
学科 サーバーサイドプログラム基礎
課題作成

本日のテーマ

WordPressのより深いお話です。

サーバーサイドスクリプトとクライアントサイドスクリプト

スクリプト（プログラミング）にはサーバー側で動くものとクライアント側（PC側）で動くものがあります。違いについて理解しましょう。

参考サイト

サーバサイドスクリプト

PHPやPerlといったプログラミング言語があります。これらの言語はWebサーバ上で動作します。このことから、これらの言語を「サーバサイドスクリプト」と呼びます。何らかの操作を実行すると、Webサーバにデータが送信され、サーバの中のプログラムが処理を行い、結果をブラウザに返します。

クライアントサイドスクリプト

一方、JavaScriptでは、記述したHTMLファイルはWebサーバ上でも公開されますが、ブラウザさえあれば実行することが可能です。Webサーバは必須ではありません。これは、Webブラウザ内でプログラムが実行されるためです。このようなスクリプトのことを「クライアントサイドスクリプト」と呼びます。

事前準備（サーバーの契約と開設）

サーバーサイドプログラミングを行うためにはレンタルサーバーとの契約が必要です。

参考サイト

サーバーサイドの仕組み

Webページには固定のHTMLが設定されているページ（静的ページ）と要求発生時にHTMLを作成するページ（動的ページ）があります。静的ページと動的ページの違いを理解しましょう。

参考サイト

フォームの作成

サーバーサイドプログラミングを行うためにはプログラムが処理するために使用する入力情報が必要です。情報を入力するためのフォーム作成方法を理解しましょう。

参考サイト

第6回成績考査

5月12日4限目終了までに、紙用（pdf）ポートフォリオを提出してください。
ポートフォリオの内容は、自由です。
※是非、就職活動に活かせる作品を作成してみてください。

2022年04月05日（火）

学科 PHP基礎

-本日のアジェンダ-

1限目
学科 PHP基礎
PHP について

2限目
学科 PHP基礎
WordPressのPHPでの役割について

3限目
学科 PHP基礎
課題作成

4限目
学科 PHP基礎
課題作成

5限目
学科 PHP基礎
課題作成

本日のテーマ

WordPressはphpで出来ています。

PHPとは

PHPとは動的にWebページを生成することができるサーバーサイドのスクリプト言語です。他のプログラミング言語と比較して仕様や文法が簡単なため習得しやすいと言われています。またMySQLなどのデータベースとの連携が容易なことなどから、WordPressを含めたWebアプリケーションの開発にもよく使われる有名なスクリプト言語でもあります。

参考サイト

PHP入門

PHPはプログラミング言語なのでIT技術者が利用するのが一般的です。但し、WordPressがPHPで作成されていることもありWordPressの独自テーマ作成などを行う時にPHPに接する機会もあります。

第6回成績考査

5月12日4限目終了までに、紙用（pdf）ポートフォリオを提出してください。
ポートフォリオの内容は、自由です。
※是非、就職活動に活かせる作品を作成してみてください。

2022年04月06日（水）

実技 CMS構築実習①

-本日のアジェンダ-

1限目
実技 CMS構築実習①
WordPressの構造

2限目
実技 CMS構築実習①
WordPressサーバーへのFTP接続

3限目
実技 CMS構築実習①
課題作成

4限目
実技 CMS構築実習①
課題作成

5限目
実技 CMS構築実習①
課題作成

本日のテーマ

WordPressの構造を理解しましょう

WordPressについて

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

参考サイト

WordPressの構造

WordPressは、PHPを使用して作成されています。WordPressを使用してサイト作成を行う場合には、WordPressのインストールフォルダの内容を操作する場合も発生しますので、WordPressインストール先のフォルダ構造を理解しておきましょう。

参考サイト

第5回成績考査

5月12日4限目終了までに、紙用（pdf）ポートフォリオを提出してください。
ポートフォリオの内容は、自由です。
※是非、就職活動に活かせる作品を作成してみてください。

2022年04月11日（月）

実技 CMS構築実習②

-本日のアジェンダ-

1限目
実技 CMS構築実習②
WordPressのテーマについて

2限目
実技 CMS構築実習②
WordPressのテーマの役割について

3限目
実技 CMS構築実習②
課題作成

4限目
実技 CMS構築実習②
課題作成

5限目
実技 CMS構築実習②
課題作成

本日のテーマ

WordPressのテーマの仕組みを確認しましょう。

WordPressについて

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

参考サイト

HTML・CSSからオリジナルテーマを作成

WordPressのオリジナルテーマを作成する手順を理解しましょう。

参考サイト

第6回成績考査

5月12日4限目終了までに、紙用（pdf）ポートフォリオを提出してください。
ポートフォリオの内容は、自由です。
※是非、就職活動に活かせる作品を作成してみてください。

2022年04月13日（水）

実技 CMS構築実習③

-本日のアジェンダ-

1限目
実技 CMS構築実習③
テーマのカスタマイズについて

2限目
実技 CMS構築実習③
テーマのカスタマイズについて

3限目
実技 CMS構築実習③
課題作成

4限目
実技 CMS構築実習③
課題作成

5限目
実技 CMS構築実習③
課題作成

本日のテーマ

WordPressのテーマのカスタマイズを理解しましょう。

WordPressについて

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

参考サイト

テーマのカスタマイズについて

テーマのカスタマイズを行うには、以下の方法があります。（実際のカスタマイズ時には、テーマが提供するカスタイマイズ機能で対応できないかを確認後に実施してください）

  • テーマファイルを直接編集（テーマのバージョンアップに対応できないので使用しない方が良い）
    • 「外観→テーマエディタ」を使ってコードを変更
    • テーマファイルをダウンロードして直接編集
  • 追加CSSを使って編集（CSS編集用のプラグイン有り）
  • 子テーマを作成

参考サイト

第6回成績考査

5月12日4限目終了までに、紙用（pdf）ポートフォリオを提出してください。
ポートフォリオの内容は、自由です。
※是非、就職活動に活かせる作品を作成してみてください。

2022年04月15日（金）

職業人講話①

-本日のアジェンダ-

1限目
職業人講話①
業界のお話

2限目
職業人講話①
業界のお話

3限目
職業人講話①
業界のお話

4限目
職業人講話①
業界のお話

5限目
職業人講話①
業界のお話

本日のテーマ

本日は職業人講話です。

ザクロバッカについて

ZAQRO-BACCA合同会社はサービス企業です。
私たちは怠慢になることをせず、常にお客様の事を考え顧客満足度を高めます。
プロ意識を持って、考え、行動し自己管理の下にお客様と共に成長していきます。

サイトURL

第6回成績考査

5月12日4限目終了までに、紙用（pdf）ポートフォリオを提出してください。
ポートフォリオの内容は、自由です。
※是非、就職活動に活かせる作品を作成してみてください。

2022年04月16日（土）

実技 デザイン総合制作実習①

-本日のアジェンダ-

1限目
実技 デザイン総合制作実習①
修了制作

2限目
実技 デザイン総合制作実習①
修了制作

3限目
実技 デザイン総合制作実習①
修了制作

4限目
実技 デザイン総合制作実習①
修了制作

5限目
実技 デザイン総合制作実習①
修了制作

修了制作のテーマ

修了制作は1限目から5限目まで制作の時間です。
皆さんがそれぞれ就職に向けてしっかりと作品をまとめる時間として有効な時間となるように、残りの時間を過ごしていきましょう。

第6回成績考査

5月12日4限目終了までに、紙用（pdf）ポートフォリオを提出してください。
ポートフォリオの内容は、自由です。
※是非、就職活動に活かせる作品を作成してみてください。

2022年04月20日（水）

ハローワーク来所日⑤

2022年04月26日（火）

実技 デザイン総合制作実習②

-本日のアジェンダ-

1限目
実技 デザイン総合制作実習②
修了制作

2限目
実技 デザイン総合制作実習②
修了制作

3限目
実技 デザイン総合制作実習②
修了制作

4限目
実技 デザイン総合制作実習②
修了制作

5限目
実技 デザイン総合制作実習②
修了制作

修了制作のテーマ

修了制作は1限目から5限目まで制作の時間です。
皆さんがそれぞれ就職に向けてしっかりと作品をまとめる時間として有効な時間となるように、残りの時間を過ごしていきましょう。

第6回成績考査

5月12日4限目終了までに、紙用（pdf）ポートフォリオを提出してください。
ポートフォリオの内容は、自由です。
※是非、就職活動に活かせる作品を作成してみてください。

2022年04月27日（水）

実技 デザイン総合制作実習③

-本日のアジェンダ-

1限目
実技 デザイン総合制作実習③
修了制作

2限目
実技 デザイン総合制作実習③
修了制作

3限目
実技 デザイン総合制作実習③
修了制作

4限目
実技 デザイン総合制作実習③
修了制作

5限目
実技 デザイン総合制作実習③
修了制作

修了制作のテーマ

修了制作は1限目から5限目まで制作の時間です。
皆さんがそれぞれ就職に向けてしっかりと作品をまとめる時間として有効な時間となるように、残りの時間を過ごしていきましょう。

第6回成績考査

5月12日4限目終了までに、紙用（pdf）ポートフォリオを提出してください。
ポートフォリオの内容は、自由です。
※是非、就職活動に活かせる作品を作成してみてください

2022年04月28日（木）

実技 デザイン総合制作実習④

-本日のアジェンダ-

1限目
実技 デザイン総合制作実習④
修了制作

2限目
実技 デザイン総合制作実習④
修了制作

3限目
実技 デザイン総合制作実習④
修了制作

4限目
実技 デザイン総合制作実習④
修了制作

5限目
実技 デザイン総合制作実習④
修了制作

修了制作のテーマ

修了制作は1限目から5限目まで制作の時間です。
皆さんがそれぞれ就職に向けてしっかりと作品をまとめる時間として有効な時間となるように、残りの時間を過ごしていきましょう。

第6回成績考査

5月12日4限目終了までに、紙用（pdf）ポートフォリオを提出してください。
ポートフォリオの内容は、自由です。
※是非、就職活動に活かせる作品を作成してみてください。

2022年05月06日（金）

実技 デザイン総合制作実習⑤

-本日のアジェンダ-

1限目
実技 デザイン総合制作実習⑤
修了制作

2限目
実技 デザイン総合制作実習⑤
修了制作

3限目
実技 デザイン総合制作実習⑤
修了制作

4限目
実技 デザイン総合制作実習⑤
修了制作

5限目
実技 デザイン総合制作実習⑤
修了制作

修了制作のテーマ

修了制作は1限目から5限目まで制作の時間です。
皆さんがそれぞれ就職に向けてしっかりと作品をまとめる時間として有効な時間となるように、残りの時間を過ごしていきましょう。

第6回成績考査

5月12日4限目終了までに、紙用（pdf）ポートフォリオを提出してください。
ポートフォリオの内容は、自由です。
※是非、就職活動に活かせる作品を作成してみてください。

2022年05月07日（土）

実技 デザイン総合制作実習⑥

-本日のアジェンダ-

1限目
実技 デザイン総合制作実習⑥
修了制作

2限目
実技 デザイン総合制作実習⑥
修了制作

3限目
実技 デザイン総合制作実習⑥
修了制作

4限目
実技 デザイン総合制作実習⑥
修了制作

5限目
実技 デザイン総合制作実習⑥
修了制作

修了制作のテーマ

修了制作は1限目から5限目まで制作の時間です。
皆さんがそれぞれ就職に向けてしっかりと作品をまとめる時間として有効な時間となるように、残りの時間を過ごしていきましょう。

第6回成績考査

5月12日4限目終了までに、紙用（pdf）ポートフォリオを提出してください。
ポートフォリオの内容は、自由です。
※是非、就職活動に活かせる作品を作成してみてください。

2022年05月09日（月）

実技 デザイン総合制作実習⑦

-本日のアジェンダ-

1限目
実技 デザイン総合制作実習⑦
修了制作

2限目
実技 デザイン総合制作実習⑦
修了制作

3限目
実技 デザイン総合制作実習⑦
修了制作

4限目
実技 デザイン総合制作実習⑦
修了制作

5限目
実技 デザイン総合制作実習⑦
修了制作

修了制作のテーマ

修了制作は1限目から5限目まで制作の時間です。
皆さんがそれぞれ就職に向けてしっかりと作品をまとめる時間として有効な時間となるように、残りの時間を過ごしていきましょう。

第6回成績考査

5月12日4限目終了までに、紙用（pdf）ポートフォリオを提出してください。
ポートフォリオの内容は、自由です。
※是非、就職活動に活かせる作品を作成してみてください。

2022年05月10日（火）

実技 デザイン総合制作実習⑧

-本日のアジェンダ-

1限目
実技 デザイン総合制作実習⑧
修了制作

2限目
実技 デザイン総合制作実習⑧
修了制作

3限目
実技 デザイン総合制作実習⑧
修了制作

4限目
実技 デザイン総合制作実習⑧
修了制作

5限目
実技 デザイン総合制作実習⑧
修了制作

修了制作のテーマ

修了制作は1限目から5限目まで制作の時間です。
皆さんがそれぞれ就職に向けてしっかりと作品をまとめる時間として有効な時間となるように、残りの時間を過ごしていきましょう。

第6回成績考査

5月12日4限目終了までに、紙用（pdf）ポートフォリオを提出してください。
ポートフォリオの内容は、自由です。
※是非、就職活動に活かせる作品を作成してみてください。

2022年05月11日（水）

実技 デザイン総合制作実習⑨

-本日のアジェンダ-

1限目
実技 デザイン総合制作実習⑨
修了制作

2限目
実技 デザイン総合制作実習⑨
修了制作

3限目
実技 デザイン総合制作実習⑨
修了制作

4限目
実技 デザイン総合制作実習⑨
修了制作

5限目
実技 デザイン総合制作実習⑨
修了制作

修了制作のテーマ

修了制作は1限目から5限目まで制作の時間です。
皆さんがそれぞれ就職に向けてしっかりと作品をまとめる時間として有効な時間となるように、残りの時間を過ごしていきましょう。

第6回成績考査

5月12日4限目終了までに、紙用（pdf）ポートフォリオを提出してください。
ポートフォリオの内容は、自由です。
※是非、就職活動に活かせる作品を作成してみてください。

2022年05月12日（木）

実技 デザイン総合制作実習⑩

-本日のアジェンダ-

1限目
実技 デザイン総合制作実習⑩
成績考査

2限目
実技 デザイン総合制作実習⑩
成績考査

3限目
実技 デザイン総合制作実習⑩
成績考査

4限目
実技 デザイン総合制作実習⑩
成績考査

5限目
実技 デザイン総合制作実習⑩
成績考査

第6回成績考査

5月12日4限目終了までに、紙用（pdf）ポートフォリオを提出してください。
Dropboxの提出>【0344】第6回成績考査 フォルダに以下のファイル名を付けてアップロードして下さい。
grade-check_(姓のみローマ字)_20220512
ポートフォリオの内容は、自由です。
※是非、就職活動に活かせる作品を作成してみてください。

2022年05月13日（金）

実技 デザイン総合制作実習⑪

-本日のアジェンダ-

1限目
実技 デザイン総合制作実習⑪
修了制作

2限目
実技 デザイン総合制作実習⑪
修了制作

3限目
実技 デザイン総合制作実習⑪
修了制作

4限目
実技 デザイン総合制作実習⑪
修了制作

5限目
実技 デザイン総合制作実習⑪
修了制作

修了制作のテーマ

本日は皆さんの作品（ポートフォリオ）を発表してください。
最後は誉めあって終わりましょう。

PCの中身について

本日の訓練修了後にPCの中身を削除します。
PCのお引越しの方法を確認しておきましょう。

2022年05月14日（土）

修了式・職業人講話②

-本日のアジェンダ-

1限目
職業人講話②
就職に向けての話

2限目
修了式

3限目
修了式

ごあいさつ

皆さん6か月間お疲れ様でした。本日は修了式です。
訓練はこれで修了しますが、就職に向けて引き続き頑張っていきましょう。
世の中まだまだ大変ですが、皆さんの今後のご活躍とご発展を心よりお祈り申し上げます。

この投稿へのコメント

コメントはありません。

コメントを残す

メールアドレスが公開されることはありません。 ※ が付いている欄は必須項目です

この投稿へのトラックバック

トラックバックはありません。

トラックバック URL