2026年3月24日　実技 ECサイトデザイン実習①

2026年7月
月	火	水	木	金	土	日
	1	2	3	4	5
6	7	8	9	10	11	12
13	14	15	16	17	18	19
20	21	22	23	24	25	26
27	28	29	30	31

1限目
実技 ECサイトデザイン実習①
Photoshopの機能について

2限目
実技 ECサイトデザイン実習①
Photoshopの機能について

3限目
実技 ECサイトデザイン実習①
サムネイル作成

4限目
実技 ECサイトデザイン実習①
サムネイル作成

5限目
実技 ECサイトデザイン実習①
サムネイル講評

※課題制作用に商品の画像をお借りしました。

無機質を表現し、シンプルながら強いデザインを作成したくて、ブルー系で配色をしてみました。
水の部分は滴のレイアウトを考慮し、滴を増やしたり大きさを変えながら複製し、流れている様な配置にしました。

水滴をレタッチするのに少し苦労しました・・・

使用ソフト：Photoshop
制作時間：７０分

こちらも強いデザインを制作してみたくて黒ベースで赤を基調に強いイメージを出すように心がけました。

女性の顔で唇に艶があるものを選び、唇に目が行くような素材を選びました。
文字は少し装飾をし、目立たたせ、かつ高級感が出るように工夫しました。

使用ソフト：Photoshop
制作時間：５０分

本日のテーマ

サムネイル画像の制作について

サムネイル画像とは？

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

参考サイト

基本的なマスクは3種類

『レイヤーマスク』、『ベクトルマスク』『クリッピングマスク』

参考サイト

レイヤーマスクについて

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

特長と使い方

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

参考サイト

ベクトルマスクについて

ベクトルマスクとは、画像の一部を「パス」で切り抜いたり、隠したりする機能です。
最大のメリットは、ペンツールなどで描いた滑らかな線を維持できる点です。通常のマスク（ラスタライズされたもの）とは違い、数式で形を記録しているため、拡大・縮小しても輪郭がぼやけたりギザギザになったりしません。
「後から形を微調整したい」「ロゴやアイコンをパキッと綺麗に切り抜きたい」という時に非常に便利な、修正に強い手法です。

特長と使い方

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

参考サイト

パスパネル

パスが保存できる: 描いたパスに名前をつけて保存し、いつでも呼び出せるようにできます。
選択範囲への変換: 描いた精密な輪郭線を、「パスを選択範囲に切り替える」ボタン一つで「選択範囲」に切り替えられます。
※「作業用パス」という名前のままだと、次に新しいパスを描いた時に上書きされて消えてしまいます。パネル内の「作業用パス」をダブルクリックして名前を付けて保存するのが、データを守る鉄則です。

参考サイト

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

Photoshopのクリッピングマスクとは、一言で言うと「上のレイヤー（画像）を、下のレイヤー（シェイプやテキスト）の形に切り抜いて表示させる機能」です。
この機能の特徴は、元の画像データの「はみ出した部分は隠しているだけ」という点です。そのため、後から上のレイヤーの画像の位置をずらしたり、下のレイヤーの枠の形を変えたりといった微調整が自由自在に行えます。

特長と使い方

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

参考サイト

スマートオブジェクト（復習）

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