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

1限目
学科 グラフィックデザイン基礎②
Illustratorの基本操作の復習

2限目
学科 グラフィックデザイン基礎②
Photoshopの選択範囲について

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

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

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

【講師用カリキュラム情報】
※このブロックは公開時は非表示になります。削除しないでください。
※講師用の情報（注記）を追記して頂いても大丈夫です。
ストーリー：オンラインで座学
内容1：復習と予習
内容2：Wordpressへのまとめ
内容3：
課題：なし

【注記】
・WordPress部分は「学科 CMS構築基礎①」に転記済み。（2024/8/13：大浜）

本日のテーマ

グラフィックツールの予習と復習です

【資料】

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

下記のファイルをダウンロードしましょう。
1.「グラフィックツールの教科書①.pdf」　
2.「グラフィックツールの教科書②.pdf」

【動画①】グラフィックツールの教科書① [Illustrator]

【動画②】グラフィックツールの教科書② [Photoshop]

トリミングとは？(Photoshop)

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

次回のPhotoshopの基本操作

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

ファイルの作成方法

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

選択範囲

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

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

参考サイト

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

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

参考サイト

レイヤーパネル

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

参考サイト

レイヤーマスクについて

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

参考サイト

描画色と背景色

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

参考サイト

ブラシツールとは？

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

参考サイト

切り抜きツールとは？

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

参考サイト

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

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

参考サイト

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

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

参考サイト

ワンポイントアドバイス

次回は、Photoshopで選択範囲の取り方を行います。
覚えておく用語が多いので、名前だけでも把握しておきましょう。

レタッチとは？(Photoshop)

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

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

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

参考サイト

・パッチツール

パッチツールとは、画像上の不要なものを、画像上の他の部分をパッチのように使って削除したりして画像を修復するツールです。

参考サイト

・コピースタンプツール

コピースタンプツールとは、画像の一部分を別の場所に複製することができるツールです。そのまま画像を重ねるイメージです。

参考サイト

修復ブラシツール

修復ブラシツールとは、修復したい箇所の上に、重ねたい画像の部分をブラシで塗り重ねるようなツールです。周りの画像となじむような処理がされます。

参考サイト

スポット修復ブラシツール

スポット修正ブラシツールとは、写真内の汚れやキズ、シミなど小さな範囲をすばやくキレイに修復することができるツールです。 

参考サイト

コンテンツに応じた移動ツール

コンテンツに応じた移動ツールとは、写真の一部を選んで位置を変えることができます。

参考サイト

ぼかしツール

ぼかしツールとは、画像のぼかしたところをただブラシでなぞるだけで簡単に画像をぼかすことができるツールです。

参考サイト

シャープツール

シャープツールとは、ドラッグした部分を鮮明にするツールです。

参考サイト

指先ツール

指先ツールとは、指先でこすったような効果を加えるツールです。油絵のようなイラストレーションを描きたいときや、ぶれた動きをつくりたいときなどに便利です。

参考サイト

覆い焼きツール

覆い焼きツールとは、ドラッグした部分を「明るく」するツールです。

焼き込みツール

焼き込みツールとは、ドラッグした部分を「暗く」するツールです。

参考サイト

ワンポイントアドバイス

次回は、Photoshopでレタッチを行います。
画像に様々な変化を加えられる事を学んで行きましょう。
また逆に、出来ない事も理解していきましょう。

本日の課題

オンラインは課題無しです。
※不明点等は次の来校日に質問出来るようにまとめておいてください。

学科 CMS構築基礎①【オンライン】

-本日のアジェンダ-

1限目
学科 CMS構築基礎①
WordPressとは？

2限目
学科 CMS構築基礎①
WordPressとは？

3限目
学科 CMS構築基礎①
WordPressの活用について

4限目
学科 CMS構築基礎①
WordPressの活用について

5限目
学科 CMS構築基礎①
本日の講義のまとめ

【講師用カリキュラム情報】
※このブロックは公開時は非表示になります。削除しないでください。
※講師用の情報（注記）を追記して頂いても大丈夫です。
ストーリー：Wordpressの自主運用スタート
内容1：Wordpress使い方について
内容2：ポートフォリオについて
内容3：
課題：なし

【注記】
・WordPressの説明用に修正しました。（2024/8/13：大浜）

本日のテーマ

WordPressを活用しましょう

【資料】

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

下記のファイルをダウンロードしましょう。
1.「Wordpress活用法の教科書①.pdf」
2.「Wordpress活用法の教科書②.pdf」
3.「Wordpress活用法の教科書③.pdf」
4.「Wordpress活用法の教科書④.pdf」

【動画：Wordpress活用法の教科書①.pdf】

【動画：Wordpress活用法の教科書②.pdf】

【動画：Wordpress活用法の教科書③.pdf】

【動画：Wordpress活用法の教科書④.pdf】

WordPressとは？

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

参考サイト

CMSとは？

コンテンツ管理システムは、ウェブコンテンツを構成するテキストや画像などのデジタルコンテンツを統合・体系的に管理し、配信など必要な処理を行うシステムの総称。2005年頃より一般的に普及したといわれる。コンテンツマネージメントシステムとも呼ばれる。 ウィキペディア。

参考サイト

WordPressの活用

本訓練では、訓練の全般に渡ってWordPressを活用していきます。

  • ポートフォリオの作成
  • 日々の学びのまとめ
  • 成績考査結果の提出
  • その他

また、就職先でWordPressの知識を必要としているところも多数ありますので、日々の作業を通してWordPressを使用するスキルも習得してください。

WordPressの初期設定

まず皆さん用のアカウントを用意してあります。講師の指示に従って初期設定を行ってください。初期設定が出来たら、投稿ページを作成してみましょう。

ログインURLについて

まずURLに
/wp-login.php
付け加えてください。

※ワードプレスのログインURLは初期設定の場合はサイトURLのあとに「/wp-login.php」を付けたものになります。

権限について

WordPressはいくつかの権限に分けることが出来ます。運用方法に合わせてうまく使い分けていくと便利です。

参考サイト

投稿ページとは？

WordPressの投稿ページとは、WordPressというCMS （Content Management Systemの略） を利用して、簡単にページを作れる仕組みです。Webページの仕組みをここから確認していきましょう。投稿ページは、日時ごとにページを作成することが出来ます。

投稿ページの主な項目

  1. タイトル
  2. 文章入力とブロック(クラシックの追加)
  3. ステータスと公開状態
  4. 公開する・更新する・予約する
  5. パーマリンク

タイトル

ページの見出しやページタイトルに反映します。
また、投稿一覧ページやトップページの記事一覧の箇所に反映されます。
ページのタイトルになる事を想定した見出しを考えましょう。
※検索エンジンのキーワードに重要な存在になります。

文章入力とブロック

ページの内容の部分になります。
「段落」「見出し2～６」「リスト・番号付きリスト」等を選ぶことが出来ます。
更に
「文字の揃え位置（右揃え・真ん中揃え・左揃え）」
「太字」や「イタリック」
「リンク」・「新しいタブで開く」
「打消し線」
の設定が可能です。

参考サイト

WordPressのテーマとは？

WordPressのテーマとは、Webサイト全体のテンプレートのことです。テーマは複数のファイルの集合体で、デザインなどの内容が一式セットになっています。
そのため、テーマを変更すれば複雑な処理を行うことなく、Webサイトのデザインや構成、機能などを変えることができます。

参考サイト

ワンポイントアドバイス

テーマは後からでも変えられます。自作も出来ます。ただし細かい事は他人が作ったモノなので、思っていたのと違うときは、別のテーマに変更しましょう。

ウィジェットとは？

WordPressのウィジェットとは、Webサイトのサイドバーやフッターにさまざまなパーツを設置できる機能です。 記事検索、最近の投稿、人気記事一覧、カテゴリー、タグ一覧、プロフィール…など、さまざまな機能を持ったパーツを設置することができます。

参考サイト

ワンポイントアドバイス

ウィジェットを使えば、簡単に検索機能やカレンダーを設置できます。
ポートフォリオサイトとして、企業担当さんが「あなたの学んだ技術」を探しやすいように工夫をしてみましょう！

WordPressのメディアとは？

メディアライブラリとは、WordPressにアップロードされた画像を保管している場所のことです。すでにアップロード済みの画像を記事に挿入する場合、この「メディアライブラリ」という機能を利用します。
WordPressの投稿画面から「ブロックの追加」を選択した後、「メディアライブラリ」を押下してください。

参考サイト

ワンポイントアドバイス

時系列を残して成長を見せましょう！
投稿ページは、いつ作成した作品であることを残す

固定ページとは？

投稿ページは、時系列を意識したページ構成になるのに対して、固定ページは、メニューなどに固定して使うページです。個人ブログでは、「著者プロフォール」、「このブログについて」、「プライバシーポリシー」などのページで、企業サイトでは「会社概要」、「商品情報」、「お問い合わせ」などのページになります。

作成方法は、投稿ページと同様ですが、以下が投稿ページとは異なります。

  • 一覧ページが自動で作成されません
  • タグやカテゴリーが使えません
  • ページの親子関係が作れます
  • 基本は、同じページを修正して使い続けます

固定ページを企業向けページとして用意

ポートフォリオは「デザイナーが実績をアピールするための作品集」ですが応募企業へのアピールの意味も含めて応募企業向けの固定ページを作成しましょう。
求職活動において、ポートフォリオサイトのトップページを見せても「ウチの会社で出来る技術は何処にある？」となればそれで終わりです。当たり前ですが、企業側が探してくれるわけはありません。しっかりと、その企業に向けたページを用意しましょう。権利や守秘義務を意識しパスワード設定をした固定ページを利用しましょう。

求人票の宿題をまとめるのが固定ページ

時系列を残して成長を見せましょう！投稿ページは、いつ作成した作品であることを残すことが出来ます。自身の成長を見せる事で、成長曲線を見せる事が出来ます。
ポートフォリオサイトとして、自身の成長曲線を見せる事で、就職活動のとき、企業担当へ未知なる仕事への可能性を感じさせましょう！

投稿ページと固定ページ

使いやすい（見やすい）ポートフォリオサイトにするためには、投稿ページと固定ページの使い分けや適切なメニュー設定が必要です。

参考サイト

ブロックエディタ

ブロックエディタの機能を理解して思い通りのページを作成できるようになりましょう。

ブロックエディタの主要機能
  • テキスト→「段落、見出し、リスト」（改行入力、リンク設定）
  • テキスト→「コード、整形済テキスト、詩」（複数の空白や改行をそのまま表示）
  • テキスト→「テーブル」：表組型式を作成
  • メディア→「画像、ギャラリー」：写真掲載の基本
  • メディア→「カバー」：テキストをオーバレイした画像を配置
  • メディア→「メディアとテキスト」：写真と文章を並べる
  • メディア→「ファイル」：PDFファイルなどのダウンロードを配置
  • デザイン→「ボタン」：リンクを作成するのに便利
  • デザイン→「カラム」：横方向に複数欄を作成し、それぞれのメディアを指定可
  • デザイン→「続き」：抜粋に表示する範囲を指定
  • デザイン→「ページ区切り」：別ページにする時に指定
  • デザイン→「区切り」：文章と文章の間に水平線を表示
  • デザイン→「スペーサー」：空間を作成
  • ウィジェット→「ウィジェット」：色々な表示部品を指定
  • ウィジェット→「ソーシャルアイコン」：SNSへのリンクを作成
  • 埋め込み→「埋め込み」：代表的なサイトへのリンクを作成
参考サイト

日々の学びのまとめ

日々の訓練内容を日々の学びのまとめとして投稿ページにまとめてください。

この日々の学びのまとめは、以下の目的で使用できます。

  • 訓練内容の整理と確認・復習で使用
  • 企業へ訓練実績のアピール

日々の学びのまとめ作成時は、以下の事項を注意して作成しましょう。

  • 適切なタイトルを設定（日付や訓練名だけでは内容か把握できません）
  • 適切な投稿日を設定（投稿日で表示順が決定されます）
  • タグやカテゴリーを設定（投稿のグルーピングができます）

ポートフォリオの作成

Webデザイナーの就活で使用するポートフォリオとは、これまで作成してきた作品を1つのファイルにまとめた「作品集」のことをいいます。自分のスキルや個性を評価してもらう資料であり就活時に提出が求められます。履歴書だけでは伝わらない技術力やセンスなどを視覚的にアピールできます。

参考サイト

成績考査結果の提出

WordPressは、成績考査結果の提出先としても使用します。成績考査で出された課題の作成を行い作成結果をWordPressの固定ページに提出してもらいます。具体的な固定ページの作成方法および提出方法は、成績考査の時に説明します。

ワンポイントアドバイス

ポートフォリオサイトの記事は、訓練校での6カ月間で何をやって過ごしていたかの証明になります。
未経験の方であれば、何を学んでいたのか、自身が普段どんな生活をしているのか、
企業担当者が知りたいのは、「どんな人物なのか？」です。
日々の訓練で学んだ事だけではなく、遊びに行った事や、プライベートで読んだ本、見たYouTubeなどの動画なども載せて自分らしい作品にして行きましょう。

本日の課題

企画でまとめた内容を投稿ページにしてみましょう。
※時系列は訓練日にしておくと良いです。