2025年12月 – ページ 6 – 【0317】DEAUアカデミー WEBデザイナー養成科

– 本日のアジェンダ –

1限目
学科 ECサイトデザイン基礎①
ECサイトとは？

2限目
学科 ECサイトデザイン基礎①
ECのお仕事とバナー作成について

3限目
学科 ECサイトデザイン基礎①
マスクについて復習

4限目
学科 ECサイトデザイン基礎①
サムネイル制作に向けての情報収集

5限目
学科 ECサイトデザイン基礎①
サムネイル制作に向けての情報収集

【講師用カリキュラム情報】
※このブロックは公開時は非表示になります。削除しないでください。
※講師用の情報（注記）を追記して頂いても大丈夫です。
ストーリー：ECとマスクについて
内容1：ECの説明（動画総再生時間：約56分）
内容2：マスクの説明（動画総再生時間：約95分）
内容3：情報収集の時間
課題：なし　

【注釈】
・動画ボリュームが多いです。配分バランスにご注意ください。
・今回は実技 ECサイトデザイン実習①を先に終えているため、復習ベースで講義展開いただくと良いかと思います。
・まとめの時間では世の中のECサイトや、用途別のバナーの種類を調査する時間をとるのも良いかと思います。(2025/11/27:中野)

———–2025.12.08 変更Memo
サムネの準備　加えてください
※動画が多いので、時間配分にご注意ください。

本日のテーマ

ECのお仕事を理解しましょう

ECサイト

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

参考サイト

【資料】

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

下記のファイルをダウンロードしましょう。
1.「デザインの考え方」の教科書⑤.pdf
2. マスクについて.pdf

【動画①】「デザインの考え方」の教科書⑤

ECとは？
https://youtu.be/FT7g0ruH7Eg（7:44）
EC業界のお仕事ってどんなもの？ (前半)
https://youtu.be/tdqsIO8IKuk（15:01）
EC業界のお仕事ってどんなもの？ (後半)
https://youtu.be/Lv6acH3zGZs（9:35）
バナー作成のポイント①
https://youtu.be/5ESkln7ceXg（10:59）
バナー作成のポイント②
https://youtu.be/Awu6KiqlzoI（12:48）

ワンポイントアドバイス

まずは様々な作品を見て見ましょう。
見て真似をしてまた見るの繰り返しが上達のコツです！

【動画②】マスクについて

マスク機能とは・リテイクとは (8:25)
https://youtu.be/ZAZOw42bqvY
非破壊データで行う(7:20)
https://youtu.be/T6YueLz5Hc8
拡大縮小ができる形式を利用 (7:10)
https://youtu.be/IlIEM44mIxY
バックアップと復元する方法を徹底的に！(5:01)
https://youtu.be/TGiKZecEnL4
レイヤーをしっかり管理する(6:59)
https://youtu.be/TK41xPqYxPE
ワンポイントアドバイス「マスクは理屈で覚える」(2:51)
https://youtu.be/AVwmTlCWuc4
マスク機能① レイヤーマスク(10:19)
https://youtu.be/tJ7KVhu4LJo
マスク機能② ベクトルマスク(11:02)
https://youtu.be/E4Qh5n3X95k
おまけパスパネル(12:09)
https://youtu.be/RQeJA0YGSQs
マスク機能③ クリッピングマスク(11:17)
https://youtu.be/w745LFgkB_Q
番外編1 クイックマスクモード(5:23)
https://youtu.be/nN1UmZ5ZgNw
番外編2 シェイプマスク(3:01)
https://youtu.be/eTbKK82BWrs
まとめ(3:58)
https://youtu.be/zHGAQscV69A

参考サイト

マスクについて

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

参考サイト

レイヤーマスクについて

レイヤーマスクは、レイヤーに追加する機能です。画像の一部を隠したい場合に使用します。白黒に塗り分けられた画像から、表示する部分と、隠す部分の「マスク領域」を指定します。レイヤーマスク自体が、ドキュメントに表示されることはありません。対象となる画像の一部が、切り抜いた型紙を通り抜けて、背景に投影されるようなイメージです。

特長と使い方

選択範囲からのマスク
白から黒の領域（中間色は半透明）
曖昧なトリミングに有効

参考サイト

ベクトルマスクについて

ベクトルマスクは、ペンツールやシェイプを使用して作成するマスクです。ベクトルマスクは、画像の拡大や収縮を繰り返しても、マスクが劣化しないので、解像度を気にすることなく編集できます。

特長と使い方

パスからのマスク
シェイプ（Illustratorと同じイメージ）を使う
奇麗な曲線を描く時に有効

参考サイト

パスパネル

パスパネル（ウィンドウ／パス）には、保存されたパスごとの名前とサムネール画像、現在の作業用パスおよび現在のベクトルマスクが一覧表示されます。サムネールの表示をオフにすると、パフォーマンスが向上します。パスを表示するには、まずそのパスをパスパネルで選択する必要があります。

参考サイト

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

クリッピングマスクとは、マスクが適用されるレイヤーをグループ化したものです。一番下のレイヤー（ベースレイヤー）がグループ全体の表示範囲を定義します。例えば、ベースレイヤーにシェイプがあり、その上のレイヤーに写真があり、一番上のレイヤーにテキストがあるとします。写真とテキストは、ベースレイヤー上のシェイプのアウトラインを通してだけ表示されると、ベースレイヤーの不透明度を継承します。

特長と使い方

図形（文字も可能）からのマスク
他のレイヤーに影響する
Illustratorにもあるので注意

参考サイト

ワンポイントアドバイス

マスクはデータを維持したまま作業を進める方法として、最も使われる手法です。逆に他人が作成したデータを編集しなければならない時に、「わからない」が発生するポイントがここです。しっかりと理解を高めておきましょう。

スマートオブジェクト

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