＜概要＞
⚫︎ECサイトとは？
⚫︎ECのお仕事とバナー作成について
⚫︎マスクについて
⚫︎サムネイル制作に向けての情報収集
＜講義のまとめ、ポイント、感想など＞
⚫︎ECサイトについて
EC（eコマース）とは？：
「Electronic Commerce」のこと。
インターネットなどのネットワークを介して契約や決済などを行う取引形態のこと、インターネットでものを売買することの総称。
eコマース＝電子取引には3つの区分があり、一般的にeコマースと言った場合には、多くの場合「B to C」の取引を指すことが多い。
・企業同士の取引 B to B
・ネットショップなどの企業と消費者間の取引 B to C
・オンラインオークションなどの消費者同士の取引 C to C
ECといえば…
ECの仕事とは？
①商品登録：商品ページの作成
必要な知識と技術
-簡単なページデザイン（Photoshop ・簡単なHTMLとCSSの知識）
-サムネイル画像の作成（Photoshop）
-基本情報の登録（Excel）
-個人情報の管理方法（アカウント管理・FTPの理解）
-一括登録であればCSVデータを使います。（Access）
②プロモーション作業：売上を取るための仕事
必要な知識と技術
-バナー作成（Photoshop ・簡単なHTMLとCSSの知識）
-ランディングページの作成（Photoshop ・簡単なHTMLとCSSの知識）
-メルマガ作成（Photoshop ・簡単なHTMLとCSSの知識）
-商品知識（その商品の知識はもちろん、業界の知識）
-モール内の知識（楽天やヤフー、アマゾンの知識）
③店舗経営：店舗を運営する仕事
必要な知識と技術
-商品知識（その商品の知識はもちろん、業界の知識）
-モール内の知識（楽天やヤフー、アマゾンの知識）
-在庫管理や人員管理、経営に関わる業務が出来る方
-①の商品登録が出来る又は指示できる
-②のプロモーション作業が出来る又は指示出来る
④（番外編）店舗リニューアル
必要な知識と技術
-①の商品登録が出来る
-②のプロモーション作業が出来る
-③の店舗経営の理解と知識がある
上記を一人で行うこともあるが、一般には分業制で行うことが多い。
★EC業界のビジネスモデル
単発ではなく継続型で受注することが多い。
「1年契約で毎月20万で「〇〇〇」やりますよ」という形で契約し、継続収入を得るという制作会社がほとんど。
「売上〇〇万円を超えたら〇〇％下さい。」という契約をしている企業もある。
ECのお仕事の両面
【良い話】
・専門性のある商売の経験が高いレベルで重宝される。
・データベースを扱える知識があるととても重宝される。
・技術レベルはある程度あれば十分な企業が多い。
・在宅可能な仕事がとても多い。
【微妙な話】
・ルーチンワークが多い。
・業務時間がシフト制の場合が多い。
ECのお仕事に必須の【バナー制作】について
バナーとは広告や宣伝のために使う画像で、クリックしてもらってあらかじめ設定しておいたリンク先のページを見せることが目的。
上達のコツはとにかく数多く見て作ること。
限られたスペースで伝えたいことを的確に表現するのは、なかなか難しく、一見かんたんに見えるバナーにも制作のコツや制作者のこだわりが詰まっている。
制作する際は基本正方形、700×700が多い。
また制作時間はリテイク含めて一つ1時間。
入れるべき3つの要素
①メッセージ（端的な文書やコピー）
文字（文字列）で伝えなければならない事を表現する。
端的に伝わる文言を考えてみる。
②イメージ（雰囲気を持つ写真やイラスト）
イメージ、画像やイラストを使って雰囲気を表現する。
パッと見ただけで世界観が伝わるようにする。
③アテンド（ご案内の内容）
「詳しくはこちら」等や応募期間を記載して、コンテンツを求めている方をしっかりと案内する。
うまく伝わるバナーを作るには、「つながり」を意識することが重要。
・誘導元と誘導先の世界観を意識する
・同じ内容のバナーでも様々な場面でつながりを作るだめ、色々なサイズに対応できるようにレイアウト、文字、配色のデザインを考える
・サムネイル画像として内容を正しく伝える意識を持つ
※楽天市場では2019年3月に「商品画像登録ガイドライン」を出店者向けに定めた新ルールを決め、それを守られていないと違反点数が加算され、累積点数に応じてペナルティが課されることになった。
Amazonの場合は、商品画像にはメイン画像とサブ画像の2種類があ理、それぞれの規則や特徴によって使い分けが必要となる。
作成はただデザインを意識するだけではなく、そのような知識も取り入れる必要がある。
・SNSやメルマガなどは、すでに顧客やファンデある人に対しての誘導線を作る＝双方間のコミュニケーションを活かすというマーケティング知識を持っておく。
※各広告や、メールマガジン、Facebook、Twitter、Instagram、LINE、YouTubeなどのSNS、これらの転換率は３％と言われている。
メルマガ会員が10,000人であれば、300人、フォロワーが10,000人いれば300人。
要するに、例えばECサイトに300人誘導し顧客となる。
そして客単価が5,000円なら1,500,000円の売り上げになる。
その売り上げ予想が出来るということは、人件費や仕入れ数の計算を予測できる。
という仕組みが成立する。
・広告宣伝費とは、商品やサービスを不特定多数への認知（広告宣伝）を目的として支出する経費のことで、テレビCMや新聞、インターネット広告やパンフレット・リーフレット・ホームページ等の制作、ダイレクトメールの宣伝費などが当てはまる。
中でも、従来のテレビCMなどの場合は、数十秒のCMを流すだけ
で、数百万円、数千万円という膨大な予算が必要な一方で、動画プラットフォーム最大手であるYouTubeであっても動画広告は1日 1,000 円程度の低予算から始めることが可能であり、安価で手軽に広告を開始することができるため、動画コンテンツからの誘導は非常に有効（低リスク）。
・誘導先の一つに「LP（ランディングページ）」がある。
訪問者が最初に着地する「Land」が由来。
LPサイトの目的はコンバージョン（購入や申し込みなど、アクティブなユーザーになってもらうこと）。
LPとバナーは連動しており、Webデザイナーのお仕事で最も多く、需要が高い、商業デザインの能力が問われるのが、このWeb広告というビジネス形態のため、しっかりと身につける必要がある。
【バナーの作成方法（ECの仕事をイメージしたもの）】
①サムネイル画像作成で商品を理解する
サムネイル画像とは、正確な商品情報を表現するものであり、正確なトリミング技術が必要とされる。
★以下マスク機能はトリミングにとても重要な技術
②テーマによるバナー作成でジャンル、業種によるデザインの違いを知る
③作成確認の基本として、ページにバナーを当てこむ
上記のつながりがしっかりとあるか、世界観がリンクしているか。
④サイズ違いのバナーを自在につくれるようになる
⚫︎マスクについて
マスク機能：
画像や図形などのオブジェクトを自由な形に切り抜くことができる機能。
実際にオブジェクトを消しているわけではなく、マスクという言葉通り不要な部分を覆い隠しているようなイメージが近い。
レイヤー→レイヤーマスクorベクトルマスクを開く。
IllustratorとPhotoshopのマスク機能
Illustrator における「マスク」：
オブジェクトを抜き型（マスク）で切り抜いて部分的に非表示にし（隠し）印刷しないようにする機能。
使い方で様々な効果をを生み出す。
Photoshopにおけるマスク：
画像を直接修正・編集することなく余分な箇所を覆い隠す機能のこと。
直接いじらなくとも表示、非表示ができるので後からの修正したい時に非常に便利。
いくつかの作成方法があり、特徴や作成手順が異なる。
★なぜマスク機能は重要なのか？
→できるデザイナーは「リテイク」に強い。
※商業デザイナーは特例なくリテイクに強くならなければならない。
→リテイクに強いデザイナーは重宝される。
★「リテイクに強い」スキル・考え方とは？
①非破壊データで作業を行う
・スマートオブジェクト化（Photoshop）
※必要に応じた大きな写真（ビットマップデータ）を利用
②拡大縮小ができる形式を利用する
・Illustratorならベクターデータなのでそのまま利用
・Photoshopならシェイプの利用または上記のスマートオブジェクト化
※Photoshopで「pixel」はあまり使わない。
「shape」にしておく。
③バックアップと復元方法を徹底的に管理している
・そもそも元データのバックアップ
・戻る機能をしっかりと活用
・「ヒストリーパネル（Photoshop）」等も上手く使う。
※ヒストリーパネルを表示させている間の履歴のみ残り、パネルを消去すると履歴は残らない。
④レイヤーをしっかり管理する
・マスク機能の確認はレイヤーパネルで把握する
・調整レイヤーを利用する
※IllustratorとPhotoshopのレイヤー機能は少し異なる
【マスク機能一覧】
・レイヤーマスク
使用可能ソフト：Photoshop
選択範囲から取るマスク。
グレースケールの明度 (白黒に塗り分けられた濃淡) によって、ピクセルひとつひとつの不透明度に換算し、黒がその部分を隠す、白はその部分を表示させる。
選択範囲からマスクをする為、奇麗に選択範囲が取れれば自在にマスクでき、またグラデーション、濃淡を利用してぼかすことも可能。
逆に、奇麗な曲線や直線には不向きな面もある。
使用例）髪の毛などの毛並み/「被写体から選択」等のAI（Adobe Sensei：マシンラーニング）の機能から →繊細なものに向いている
・ベクトルマスク
使用可能ソフト：Photoshop
パスから取るマスク。
解像度に依存しないパスでレイヤーの内容を切り取りるため、ピクセルベースのツールを使用して作成するよりも精度が高くなる。
ベクトルマスクは、ペンツールまたはシェイプツールを使用して作成する。
パスからマスクをする為、奇麗なラインが欲しいマスクに最適で、修正・調整も簡単。
一方で淡い描画部分（髪の毛などの毛並み）には不向き。
使用例）モデルさんの身体のライン等/電化製品等のアンカーポイントの少ない直線や曲線 →くっきりした輪郭のものに向いている
※パスの数を指定できる。
小さい数字だと荒くなるが、シンプル。
大きな数字になればシェイプに沿って緻密になる一方で、ピクセルに沿ってしまうためガタガタになる。
（・パスパネル）
使用可能ソフト：Photoshop
選択範囲とパスを保存しておけるパネルのことで、保存されたパスごとの名前とサムネール画像、現在の作業用パスおよび現在のベクトルマスクが一覧表示される。
サムネールの表示をオフにすると、パフォーマンスが向上。
パスを表示するには、まずそのパスをパスパネルで選択する必要がある。
パスを保存できるので、「パスから選択範囲」「選択範囲からパス」を作成することが出来る。
・クリッピングマスク
使用可能ソフト：Photoshop・Illustrator ※使い方の違いあり
図形から取るマスク。
・Photoshopの場合
あるレイヤーの透明部分を使用して、その上のレイヤーにマスクを適用する。
※下のレイヤーの形に切り抜かれる。※
文字をクリッピングマスクして装飾した文字表現なども可能。
使用例）仮デザインや入れ替えのある画像箇所 ※後から写真の入れ替えが必要な箇所の利用が多いのでレイヤー管理に注意。 /調整レイヤーでの利用
・Illustratorの場合
簡単に言えば切り抜き機能。
実際には切り抜いているわけではなく、隠したいところを隠し、見せたいところを見せている状態。
※上のレイヤーの形に切り抜かれる。※
使用例）仮デザインや入れ替えのある画像箇所/Illustratorには「レイヤーマスク」と「ベクトルマスク」が無いので重宝する機能。
→型で抜きたいもの、2つの画像を馴染ませたいものに向いている
・クイックマスクモード
使用可能ソフト：Photoshop
ブラシを使ってトリミングをする機能で、選択範囲を色の濃さで表示する。
後にレイヤーマスクをする為、細かな選択範囲を取りたい時に利用することが多い。
色を変えられるので視覚的に見やすく作業が出来る場合がある。
使用例）奇麗な選択範囲を取る為の作業/色味の解りにくい写真
（・シェイプマスク）
使用可能ソフト：XD ※いずれ習うのでおまけ程度に覚えられればOK
マスクとして使用するシェイプを描画した後、それをクリップしたいオブジェクトの上に重ねて、シェイプとオブジェクト両方を選択します。
使用例）仮デザインや入れ替えのある画像箇所/クリッピングマスクと考え方は同じだが、XDには他のマスク機能がないため重宝する。
★マスク機能は直感ではなく理屈で把握する。
覚えるべき技術として慣れる必要がある。