学科【オンライン】2025.10.18

授業内容

• ECサイトとは？
• ECのお仕事とバナー作成について
• マスクについて
• サムネイル制作に向けての情報収集

本日のツール

• レイヤーマスク
• ベクトルマスク
• クリッピングマスク

習得内容

• ECサイトとは？

ECとは「Electronic Commerce」のこと。インターネットなどのネットワークを介して契約や決済などを行う取引形態のことで、インターネットでものを売買することの総称である。
モール系ＥＣは主に「楽天」「Amazon」「Yahoo」がある。

• ECのお仕事とバナー作成について

■ＥＣの仕事ってどんなもの？
何が必要とされるのかと言えば、その業種のノウハウや高い商品知識、詳しい商品の特長などが求められる。
またECの世界では、その知識技術はネットにはあまり載っていない。その為、その業種での実践経験、趣味で得た詳しい知識がここで役に立つかもしれない。
現状Web業界の仕事の半分は、ECの仕事ととなっている。

▢ＥＣの業務その１ 商品登録について（商品ページの作成）
・簡単なページデザイン（Photoshop ・簡単なＨＴＭＬとＣＳＳの知識）
・サムネイル画像の作成（Photoshop）
・基本情報の登録（Excel）
・個人情報の管理方法（アカウント管理・ＦＴＰの理解）
・一括登録であればＣＳＶデータを使います。（Access）

▢ＥＣの業務その２ プロモーション作業（売上を取るための仕事）
・バナー作成（Photoshop ・簡単なＨＴＭＬとＣＳＳの知識）
・ランディングページの作成（Photoshop ・簡単なＨＴＭＬとＣＳＳの知識）
・メルマガ作成（Photoshop ・簡単なＨＴＭＬとＣＳＳの知識）
・商品知識（その商品の知識はもちろん、業界の知識）
・モール内の知識（楽天やヤフー、アマゾンの知識）

▢ＥＣの業務その３ 店舗経営
・商品知識（その商品の知識はもちろん、業界の知識）
・モール内の知識（楽天やヤフー、アマゾンの知識）
・在庫管理や人員管理、経営に関わる業務が出来る方
・ＥＣ業務のその１の商品登録が出来る又は指示できる
・ＥＣ業務のその２のプロモーション作業が出来る又は指示出来る

▢ＥＣの業務番外編 店舗リニューアル（アパレルサイトなどで季節ごとに商品が変わるときなど）
・ＥＣ業務のその１の商品登録が出来る
・ＥＣ業務のその２のプロモーション作業が出来る
・ＥＣ業務のその３の店舗経営の理解と知識がある

■ＥＣ業界のビジネスモデル
求人票で探す時、Webデザイナーというよりは、販売業として掲載されている場合が多い。
例えば、前職の流れで求人を探していたら、ECサイトの管理やサポート、簡単な商品登録や運用更新業務の「スタッフを募集中」と掲載されている場合もあるので、様々な角度から求人を探してみよう。

■ＥＣ業界の仕事のまとめ
【良い話】
・専門性のある商売の経験が高いレベルで重宝される。
・データベースを扱える知識があるととても重宝される。
・技術レベルはある程度あれば十分な企業が多い。
・在宅可能な仕事がとても多い。
【微妙な話】
・ルーチンワークが多い。
・業務時間がシフト制の場合が多い。

■バナー作成について

▢バナーとは
広告や宣伝のために使う画像で、クリックしてもらって、あらかじめ設定しておいたリンク先のページを見せることが目的。

▢バナー作りの上達のコツは数多く見て作る
限られたスペースで伝えたいことを的確に表現するのは、なかなか難しいもの。実際にある楽天市場やAmazon等のECサイトを直接見るのはもちろん、デザインの参考になるギャラリーサイトなども多くある。アイデアに煮詰まったときはもちろん、引き出しを増やすという意味でも、普段から様々な作品を見ておこう。

▢伝える3つの要素

1.メッセージ（端的な文書やコピー）
　文字（文字列）で伝えなければならない事を表現する。端的に伝わる文言を考えてみよう。
2.イメージ（雰囲気を持つ写真やイラスト）
　イメージ、画像やイラストを使って雰囲気を表現。パッと見ただけで世界観が伝わるようにする。
3.アテンド（ご案内の内容）
　「詳しくはこちら」や、応募期間を記載して、コンテンツを求めている方をしっかりとご案内する。

▢他のWebページからの誘導
バナー広告は、様々な媒体で展開できる広告。他のサイト、SNS、ブログ等のWebページから、目的のページへ案内（誘導）する事が目的。誘導先へ正しく案内できるようにしよう。

▢画像サイズのバリエーションを意識しよう
他のサイトから誘導を行うので、誘導元と誘導先のサイト（ページ）の世界観を意識して、バナーを作成する必
要がある。まずは同じバナーでも様々なバナーサイズに対応出来るようにしよう。

▢様々なサイズに対応するポイントは3つ
１．レイアウトデザイン
　　※面積を意識しよう。
２．文字デザイン
　　※フォントの種類と表現を意識しよう。
３．配色デザイン
　　※同じ色にする。

■各コンテンツからの誘導

▢検索からの誘導
リスティング広告と呼ばれる、GoogleやYahoo!といった検索エンジンの、検索結果の
画面に表示されるテキストも広告とよばれる。また、サイト内にある検索からも誘導する事ができるので、こちらからの誘導も意識してみよう。

▢メルマガやSNSからの誘導
SNSには情報をユーザーと共有できる機能があり、この機能により、情報や口コミが広く拡散されるため、商品やサービスの認知度アップが見込める。またECサイトへの導線を作ることで顧客をECサイトへ誘導できるため、広告費の削減になる。

▢動画コンテンツからの誘導
動画投稿プラットフォームの最大手であるYouTubeは、超大型メディアで日本国内ユーザー数6,500万人越え、全世界では20億人越えのユーザー数となっている。業界、業種、企業規模など関係なく使えるツールといえる。

▢誘導先のページ
LP（ランディングページ）や、商品ページの特定のページに誘導をして、そのページより、「会員登録」や「カートからの購入」、「メール」や「お電話」からの顧客となるように案内をしたりをするページへ、しっかりとご案内しよう。

■サムネイル画像について
サムネイルとは、スマートフォンやパソコン、InstagramなどのSNS、YouTubeなどの動画サイトを利用する際に
表示される小さいサイズの画像。 クリックして中身を確認しなくても、目で見たときにその内容が一瞬で分かるような、実際よりサイズを縮小して表示した画像をサムネイルと呼んでいる。

▢サムネイル画像の制約と作成のポイント
楽天市場では2019年3月に「商品画像登録ガイドライン」を出店者向けに定めた新ルールを決め、それを守られていないと違反点数が加算され、累積点数に応じてペナルティが課されることになったりする。
Amazonの場合は、商品画像にはメイン画像とサブ画像の2種類がありそれぞれの規則や特徴によって使い分けが必要となったりする。
このように各媒体でルールが取り決められている場合があるので注意して作成をしてみよう。

■固定客への誘導
SNSはユーザーと企業がダイレクトにつながり、コミュニケーションを図ることができるツール。
双方向の交流ができることは、ユーザーのロイヤリティを高められる。ユーザーからのダイレクトメッセージに丁寧に応えたり、商品のレビュー投稿にコメントしたり、リツイートしたりと、細かな対応を重ねていくことで、ユーザーのファン化を促す。

▢３％の転換率
各広告や、メールマガジン、Facebook、Twitter、Instagram、LINE、YouTubeなどのSNS、これらの転換率は３％と言われている。一見たった３％と思ってしまうかもしれないが、メルマガ会員が10,000人であれば、300人、フォロワーが１0,000人いれば300人の計算になる。要するに、例えばECサイトに300人誘導し顧客となる。そして客単価が5,000円なら1,500,000円の売り上げになる。
その売り上げ予想が出来るという事は、人件費や仕入れ数の計算を予測できる。という仕組みが成立する。

■LP（ランディングページ）について
ランディングページ（Landing Page）とは、検索結果や広告などを経由して訪問者が最初にアクセスするページのこと。訪問者がホームページに着地する（land）イメージからこの名前がついた。略してLPとも呼ばれる。LP（ランディングページ）の目的は、ユーザーに購入や申し込みといった「コンバージョンをしてもらうこと」。LPはWeb広告のリンク先ページ。
ここまでご説明したWeb広告と連動させて運用するものなので、バナーはこのLPなどの「誘導先のページ」をしっかりと意識をして作成してみよう。
Webデザイナーのお仕事で最も多く、需要が高い、商業デザインの能力が問われるのが、このWeb広告というビジネス形態。そして具体的なお仕事として、「バナー」が作れる。「LP」が作れる。そして集客が取れる。これが求められる。まずはバナーをしっかりと作れるように勧めていこう。

■Web広告のスキル習得の流れ

▢STEP① サムネイル画像
検索一覧に表示される
購入記録にも掲載される。
他社比較されるときにも掲載される。
正確な商品情報を表現するのがサムネイル。
作業のポイントは、正確な「トリミング」。

▢STEP② テーマによるバナー
制限時間は５０分
とにかく様々なジャンルのバナーを作成してみよう。
ヒントは「レイアウト」「文字」「配色」ジャンルによって特徴が異なるのを確認しながら作成してみよう。

▢STEP③ バナーを当て込む
バナーを作成したら、クライアントさまへの確認の時には実際に掲載するページをスクリーンショットをして、そこに作成したバナーを当て込んでみよう。単純に違和感が無ければ正解。世界観の維持を意識して作成してみよう。

▢STEP④ サイズ違いのバナー
様々なサイズのバナーを作成してみよう。
ポイントは、「レイアウト」「文字」「配色」の意識、「見やすさ」は絶対要素例えば、小さいバナーなら文言を減らす、大きいバナーなら掲載量を増やす。目的を見失わないように作成してみよう。

• マスクについて

どんな場面でどのマスク機能を使用するのかを理解しておく！

■マスク機能とは
「マスク機能」は、画像や図形などのオブジェクトを自由な形に切り抜くことができる機能。
しかし『切り抜く』といっても実際にオブジェクトを消しているわけではなく、不要な部分を覆い隠しているようなイメージが近い。

▢Illustratorのマスクとは
Illustrator における「マスク」は、オブジェクトを抜き型（マスク）で切り抜いて、部分的に非表示にし（隠し）印刷しないようにする機能。
▢Photoshopのマスクとは
マスクとは、画像を直接修正・編集することなく余分な箇所を覆い隠す機能のこと。
直接いじらなくとも表示、非表示ができるので後からの修正したい時に非常に便利な機能になる。
また、いくつかの作成方法があり、特徴や作成手順が異なる。

■出来るデザイナーはリテイクに強い！！

▢非破壊データで作業を行う
スマートオブジェクト化（Photoshop）
画像を複製し、元の画像はレイヤーパネルで非表示設定にして、複製した画像のレイヤーを右クリックして「スマートオブジェクトの作成」を選択する（スマートオブジェクトを解除する時はラスタライズを選択する）
※必要に応じた大きな写真（ビットマップデータ）を利用

▢拡大縮小が出来る形式を利用
・Illustratorならベクターデータなのでそのまま利用
・Photoshopならシェイプの利用または上記のスマートオブジェクト化
※Photoshopで画像の縮小をしてから拡大すると画像のドットが荒くなってしまう為、スマートオブジェクトの作成をしておく必要がある。

▢バックアップと復元する方法を徹底的に！
・そもそも元データのバックアップ
・戻る機能をしっかりと活用
・「ヒストリーパネル（Photoshop）」も上手く使う。
※ヒストリーパネルの下のスナップショットアイコンを押すと今までやった作業を保存できる。

▢レイヤーをしっかり管理する
・マスク機能の確認は（レイヤーパネルで把握）
・調整レイヤーを利用する
※レイヤーパネルは常に出して作業する。

■マスク機能

▢レイヤーマスク（Photoshop）
選択範囲から取るマスク
▲特長
選択範囲からマスクをする為、奇麗に選択範囲が取れれば自在にマスクできる。
またグラデーション、濃淡を利用してぼかすことも可能。
逆に、奇麗な曲線や直線には不向き。
▲使いどころ
・とにかく多岐にわたる
・髪の毛などの毛並みには最適
・「被写体から選択」等のAI（Adobe Sensei：マシンラーニング）の機能からは最適

▲操作

▢ベクトルマスク（Photoshop）
パスから取るマスク
※レイヤーマスクでやりづらい時はベクトルマスクを使用してみる。
▲特長
パスからマスクをする為、奇麗なラインが欲しいマスクに最適。
モデルさん等の体のラインをベジェ曲線で引いた箇所に最適で、修正・調整も簡単。
逆に、淡い描画部分（髪の毛などの毛並み）には不向き。
▲使いどころ
・とにかく多岐にわたる
・モデルさんの身体のライン等で最適
・電化製品等のアンカーポイントの少ない直線や曲線に最適

▲操作
パスは最後閉じてくり抜く形を作成する

▢パスパネル（Photoshop）
選択範囲とパスを保存しておける
▲特長
パスを保存できるので、「パスから選択範囲」「選択範囲からパス」を作成することが出来る
レイヤーマスクとベクトルマスクの使い分けとセットで理解しておきましょう。
▲使いどころ
・パスを保存して2次利用
・パスから選択範囲の作成
・選択範囲からパスの作成
※IllustratorのパスをコピーしてPhotoshopに持ってくることも可能

▲操作

▢クリッピングマスク（Photoshop）
図形から取るマスク
▲特長
既に決まった形の所に画像を当て込んだりして使える為、仮の写真部分等に利用する事が多い。
後から写真の入れ替えが必要な箇所の利用が多いのでレイヤー管理に注意。
テクニックとして、文字をクリッピングマスクして装飾した文字表現が出来る。
▲使いどころ
・とにかく多岐にわたる
・仮デザインや入れ替えのある画像箇所
・調整レイヤーでの利用

▲操作

▢クリッピングマスク（Illustrator）
図形から取るマスク
▲特長
既に決まった形の所に画像を当て込んだりして使える為、仮の写真部分等に利用する事が多い。
後から写真の入れ替えが必要な箇所の利用が多いのでレイヤー管理に注意。
テクニックとして、文字をクリッピングマスクして装飾した文字表現が出来る。
▲使いどころ
・とにかく多岐にわたる
・仮デザインや入れ替えのある画像箇所
・Illustratorには「レイヤーマスク」と「ベクトルマスク」が無いので重宝する。

▢クイックマスクモード（Photoshop）
選択範囲を色の濃さで表示する機能
ツールパネルの一番下のアイコンをダブルクリックすると色の濃さや色の設定ができる
▲特長
後にレイヤーマスクをする為、細かな選択範囲を取りたい時に利用する事が多い
色を変えられるので視覚的に見やすく作業が出来る場合がある
▲使いどころ
・奇麗な選択範囲を取る為の作業
・色味の解りにくい写真

▢シェイプマスク（XD）
画像をドラック＆ドロップするだけのマスク
▲特長
XDのマスク機能でクリッピングマスクと考え方は同じ
▲使いどころ
・とにかく多岐にわたる
・仮デザインや入れ替えのある画像箇所
・XDには「レイヤーマスク」と「ベクトルマスク」が無いので重宝する。

• サムネイル制作に向けての情報収集

■STEP① サムネイル画像
検索一覧に表示される
購入記録にも掲載される。
他社比較されるときにも掲載される。
正確な商品情報を表現するのがサムネイル。
作業のポイントは、正確な「トリミング」。

■サムネイル制作について
何が売りか（送料無料や50％オフなど）目についてほしい順のカラー、大きさ、レイアウト
商品の魅力を引き立たせる、ボタンを押させる画像に仕上げる
内容は割とシンプルにできている