学科 ECサイトデザイン基礎①【オンライン】2025年11月17日

2025年12月12日 最終更新日時 : 2025年12月12日 arisa

講師：若松　勇次　先生

– 本日のアジェンダ –

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

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

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

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

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

本日のテーマ

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

ECサイト

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

参考サイト

【資料】

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

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

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

ワンポイントアドバイス

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

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

参考サイト

マスクについて

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

参考サイト

レイヤーマスクについて

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

特長と使い方

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

参考サイト

ベクトルマスクについて

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

特長と使い方

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

参考サイト

パスパネル

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

参考サイト

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

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

特長と使い方

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

参考サイト

ワンポイントアドバイス

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

スマートオブジェクト

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

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

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

本日の課題

本日の課題提出はありません。
サムネイル制作に向けて、集めた参考サイトや素材のリンクをメモしておきましょう。

【タイトル】
⭐️日常を切り取るdaily vlog サムネイル制作

【目的】
視聴者が一目で動画の内容をイメージできるようにし、クリックへの誘導につなげることを目的とした。
特に、スマートフォン表示でも認識しやすい明るく軽いデザインで、日常系動画の世界観をシンプルに伝えることを目指した。

【ターゲット】
日常系のVlogコンテンツを気軽に楽しみたい視聴者。
複雑な情報よりも、直感で内容を理解したいライトユーザー層を想定した。
年齢で区切らず、「明るい雰囲気の動画を好む人」という視聴姿勢を基準に設定している。

【制作環境】
・PC：Windows（Canva ブラウザ版使用）
・インターネット環境：オンライン制作・保存
・WordPress への掲載を想定したデータ管理

【使用ツール】
・Canva：サムネイル全体のレイアウト、文字配置、装飾・色の調整
・Adobe Illustrator：後ろ姿の猫を鉛筆&筆ツールで描きました

【制作時間】
・サムネイルレイアウト調整：約1〜1.5時間
・猫イラスト制作、全体の仕上げ・微調整：約30分
　合計：約2時間前後

【レビュー】
カラー・余白・写真の配置バランスを意識し、日常Vlogらしい軽やかさを表現できた。
中央のオーバル写真を大きく配置することで主役を明確にし、左右の文字の間隔・装飾線の太さを調整することで視線誘導が自然になるよう工夫した。
また、自作の猫イラストをアクセントとして配置したことで、デザイン全体に柔らかい雰囲気を加えました。
WordPress での掲載を想定し、ファイル形式やサイズにも配慮しながら制作を進めました。

【タイトル】
⭐️触れたくなる肌感　スキンケア商材サムネイル制作

【目的】
スキンケア商材を紹介するため、人物写真と製品写真を自然に合成し、統一感のあるサムネイル画像を制作することを目的とした。

【ターゲット】
美容・スキンケアに関心のある大人の女性を想定。

【制作環境・使用ツール】
Adobe Photoshop 2025
レイヤーマスク、ブラシ、トーンカーブ、自然な彩度、カラーバランスを使用。

【制作時間】
約1時間30分

【制作内容（レビュー）】
人物写真と製品写真をレイヤーマスクで合成し、境界部分をぼかして違和感を軽減した。
その後、トーンカーブで明るさを調整し、自然な彩度とカラーバランスで全体の色味を統一した。
柔らかい雰囲気を保ちつつ、製品が見やすいサムネイルに仕上げました。

＼ 最新情報をチェック ／

カテゴリー
訓練日誌

コメントを残す

メールアドレスが公開されることはありません。 ※ が付いている欄は必須項目です

前の記事
実技 ECサイトデザイン実習⑤　2025年12月2日
2025年12月12日
次の記事
実技 WEBディレクション実習 2025年12月11日
2025年12月12日