1限目
学科 ECサイトデザイン基礎①
ECサイトとは？
2限目
学科 ECサイトデザイン基礎①
ECのお仕事とバナー作成について
3限目
学科 ECサイトデザイン基礎①
マスクについて
4限目
学科 ECサイトデザイン基礎①
サムネイル制作に向けての情報収集
5限目
学科 ECサイトデザイン基礎①
サムネイル制作に向けての情報収集
本日のテーマ
ECのお仕事を理解しましょう
ECサイト
ECサイトとは？
ECサイトとは、自社の商品やサービスを、インターネット上に置いた独自運営のウェブサイトで販売するサイトのことである。ECとは英語: electronic commerceの略。 複数の企業や個人商店がインターネット上の1か所で出店する形態のウェブサイトは、電子商店街の項目を参照。
モール系ＥＣ
- 楽天
- Amazon
- ヤフーショッピング
ＥＣの仕事ってどんなもの？
ＥＣの業務その１ 商品登録について
単純に商品ページの作成です。
必要な知識と技術
- 簡単なページデザイン（Photoshop ・簡単なＨＴＭＬとＣＳＳの知識）
- サムネイル画像の作成（Photoshop）
- 基本情報の登録（Excel）
- 個人情報の管理方法（アカウント管理・ＦＴＰの理解）
- 一括登録であればＣＳＶデータを使います。（Access）
ＥＣの業務その２ プロモーション作業
簡単に言いますと、売上を取るための仕事です。
必要な知識と技術
- バナー作成（Photoshop ・簡単なＨＴＭＬとＣＳＳの知識）
- ランディングページの作成（Photoshop ・簡単なＨＴＭＬとＣＳＳの知識）
- メルマガ作成（Photoshop ・簡単なＨＴＭＬとＣＳＳの知識）
- 商品知識（その商品の知識はもちろん、業界の知識）
- モール内の知識（楽天やヤフー、アマゾンの知識）
ＥＣの業務その３ 店舗経営
簡単に言いますと、店舗を運営する仕事です。
必要な知識と技術
- 商品知識（その商品の知識はもちろん、業界の知識）
- モール内の知識（楽天やヤフー、アマゾンの知識）
- 在庫管理や人員管理、経営に関わる業務が出来る方
- ＥＣ業務のその１の商品登録が出来る又は指示できる
- ＥＣ業務のその２のプロモーション作業が出来る又は指示出来る
ＥＣの業務番外編 店舗リニューアル
たま～に、店舗リニューアルの仕事があります
- ＥＣ業務のその１の商品登録が出来る
- ＥＣ業務のその２のプロモーション作業が出来る
- ＥＣ業務のその３の店舗経営の理解と知識がある
ただし、全部一人でやる事は少ないです。
- 商品登録をする方とか
- 一括商品登録や在庫連動をする方とか
- トリミング作業をする方とか
- メルマガ作成やSNSの発信をする方とか
- 売上アップの提案やコンサルティングをする方とか
- バナー作成をひたすらする方とか
- 商品の写真撮影やライティングをする方とか
- 在庫管理や商品開発などをする方とか
- ＥＣサイト運営の店長代理をする方とか
ＥＣ業界のビジネスモデルは・・・
- 残業が少ない❕❕
求人票で探す時、Webデザイナーというよりは、販売業として掲載されて
いる場合が多いです。
例えば、前職の流れで求人を探していたら、ECサイトの管理やサポート、
簡単な商品登録や運用更新業務の「スタッフを募集中」と掲載されてい
る場合もありますので、様々な角度から求人を探してみましょう。
ＥＣ業界の仕事のまとめ
良い話
- 専門性のある商売の経験が高いレベルで重宝されます。
- データベースを扱える知識があるととても重宝されます。
- 技術レベルはある程度あれば十分な企業が多いです。
- 在宅可能な仕事がとても多い。
微妙な話
- ルーチンワークが多いです。
- 業務時間がシフト制の場合が多いです。
バナー作成について
バナーとは、広告や宣伝のために使う画像で、クリックしてもらって、あらかじめ設定しておいたリンク先のページを見せることが目的です。
バナー作りの上達のコツは、とにかくひたすら数多く見て作る
限られたスペースで伝えたいことを的確に表現するのは、なかなか難しいものです。実際にある楽天市場やAmazon等のECサイトを直接見るのはもちろん、デザインの参考になるギャラリーサ
イトなども多くあります。アイデアに煮詰まったときはもちろん、引き出しを増やすという意味でも、普段から様々な作品を見ておきましょう。
伝える3つの要素として…
- メッセージ（端的な文書やコピー）
文字（文字列）で伝えなければならない事を表現しましょう。端的に伝わる文言を考えてみましょう。
- イメージ（雰囲気を持つ写真やイラスト）
イメージ、画像やイラストを使って雰囲気を表現しましょう。パッと見ただけで世界観が伝わるようにしましょう。
- アテンド（ご案内の内容）
詳しくはこちらや、応募期間を記載して、コンテンツを求めている方をしっかりとご案内しましょう。
検索からの誘導
サムネイル画像について
サムネイルとは、スマートフォンやパソコン、InstagramなどのSNS、YouTubeなどの動画サイトを利用する際に表示される小さいサイズの画像です。 クリックして中身を確認しなくても、目で見たときにその内容が一瞬で分かるような、実際よりサイズを縮小して表示した画像をサムネイルと呼んでいます。
サムネイル画像の制約と作成のポイント
楽天市場では2019年3月に「商品画像登録ガイドライン」を出店者向けに定めた新ルールを決め、それを守られていないと違反点数が加算され、累積点数に応じてペナルティが課されることになったりします。
Amazonの場合は、商品画像にはメイン画像とサブ画像の2種類がありそれぞれの規則や特徴によって使い分けが必要となったりします。
このように各媒体でルールが取り決められている場合があるので注意して作成をしてみましょう。
メルマガやSNSからの誘導
- ３％の転換率
各広告や、メールマガジン、Facebook、Twitter、Instagram、LINE、YouTubeなどのSNS、これらの転換率は３％と言われています。
一見たった３％と思ってしまうかもしれませんが、メルマガ会員が１０，０００人であれば、３００人、フォロワーが１0,000人いれば300人の計算になります。要するに、例えばECサイトに３００人誘導し顧客となる。そして客単価が５，０００円なら1,500,000円の売り上げになる。
その売り上げ予想が出来るという事は、人件費や仕入れ数の計算を予測できる。という仕組みが成立するのです。
動画コンテンツからの誘導
- YouTubeのCMなど
誘導先のページ
LP（ランディングページ）や、商品ページの特定のページに誘導をして、そのページより、「会員登録」や「カートからの購入」、「メール」や「お電話」からの顧客となるように案内をしたりをするページへ、しっかりとご案内しましょう。
LP（ランディングページ）について
ランディングページ（Landing Page）とは、検索結果や広告などを経由して訪問者が最初にアク
セスするページのことです。訪問者がホームページに着地する（land）イメージからこの名前がつきました。略してLPとも呼ばれます。LP（ランディングページ）の目的は、ユーザーに購入や申し込みといった「コンバージョンをしてもらうこと」です。LPはWeb広告のリンク先ページです。
ここまでご説明したWeb広告と連動させて運用するものですので、バナーはこのLPなどの
「誘導先のページ」をしっかりと意識をして作成してみましょう。
Webデザイナーのお仕事で最も多く、需要が高い、商業デザインの能力が問われるのが、このWeb広告というビジネス形態です。
そして具体的なお仕事として、「バナー」が作れる。「LP」が作れる。そして集客が取れる。
これが求められます。まずはバナーをしっかりと作れるように勧めていきましょう。
- STEP① サムネイル画像
まずはサムネイル画像で商品を理解しましょう。
検索一覧に表示される
購入記録にも掲載されます。
他社比較されるときにも掲載されます。
正確な商品情報を表現するのがサムネイルです。
作業のポイントは、正確な「トリミング」です。
- STEP② テーマによるバナー
ジャンル・業種によるデザインの違いを知りましょう。
制限時間は５０分
とにかく様々なジャンルのバナーを作成してみましょう。
ヒントは「レイアウト」「文字」「配色」ジャンルによって
特徴が異なるのを確認しながら作成してみましょう。
- STEP③ バナーを当て込む
作成確認時の基本として、ページに当て込みましょう。
バナーを作成したら、クライアントさまへの確認の時には
実際に掲載するページをスクリーンショットをして、そこに
作成したバナーを当て込んで見ましょう。
単純に違和感が無ければ正解です。
世界観の維持を意識して作成しましょう。
- STEP④ サイズ違いのバナー
サイズ違いのバナーを自在に作りましょう。
様々なサイズのバナーを作成してみましょう。
ポイントは、「レイアウト」「文字」「配色」の意識
「見やすさ」は絶対要素
例えば、小さいバナーなら文言を減らす
大きいバナーなら掲載量を増やす
目的を見失わないように作成してみましょう。
楽天サムネイルガイドライン
マスクについて
マスク機能とは？
「マスク機能」は、画像や図形などのオブジェクトを自由な形に切り抜くことができる機能です。しかし『切り抜く』といっても実際にオブジェクトを消しているわけではなく、不要な部分を覆い隠しているようなイメージが近いです。
Illustratorのマスクとは何ですか？
Illustrator における「マスク」は、オブジェクトを抜き型（マスク）で切り抜いて、
部分的に非表示にし（隠し）印刷しないようにする機能を言います。
「マスク」も使い方で様々な効果をを生み出します。
Photoshopのマスクとは何ですか？
マスクとは、画像を直接修正・編集することなく余分な箇所を覆い隠す機能のことです。
直接いじらなくとも表示、非表示ができるので後からの修正したい時に非常に便利な機能になります。
また、いくつかの作成方法があり、特徴や作成手順が異なります
出来るデザイナーはリテイクに強い！！
リテイクとは？
「リテイク」とは、撮影や録音など収録をやり直すこと・また撮り直した作品そのもののことです。
類似語：出戻り・修正・やり直し・再調整・作り直しなど等…
ビジネス用語の「リテイク」とは？
「リテイク」と は、「再びテイクすること」、つまり、スタッフが一番恐れる言葉、「再撮」です。
リテイクに強いデザイナーはこうしてる！？
非破壊データで行う
・スマートオブジェクト化（Photoshop）
※必要に応じた大きな写真（ビットマップデータ）を利用
拡大縮小が出来る形式を利用
・Illustratorならベクターデータなのでそのまま利用
・Photoshopならシェイプの利用または上記のスマートオブジェクト化
バックアップと復元する方法を徹底的に！
・そもそも元データのバックアップ
・戻る機能をしっかりと活用
・「ヒストリーパネル（Photoshop）」なんかも上手く使いましょう。
レイヤーをしっかり管理する
・マスク機能の確認は（レイヤーパネルで把握します）
・調整レイヤーを利用する
※この内容は別の動画で説明します。
マスク機能
- レイヤーマスク
選択範囲から取るマスクです。
アプリケーション
Photoshop
- 仕組み
レイヤーマスクの仕組みは、グレースケールの明度 (白黒に塗り分けられた濃淡) によって、ピクセルひとつひとつの不透明度に換算します。
たとえば、明度 0 % の黒は、不透明度 0 %、明度 50 % のグレーは、不透明度 50 %、明度 100 % の白は、不透明度 100 % です。
レイヤーマスクでのグラデーションの効果
グラデーションの黒い部分はマスクレイヤーのコンテンツを隠し、グラデーションの白い部分はマスクレイヤーのコンテンツを表示します。
黒と白の間にあるグレーのグラデーションによってレイヤーマスクのかかり具合が徐々に変化し、画像が滑らかかつ自然にブレンドします。
- 特長
選択範囲からマスクをする為、奇麗に選択範囲が取れれば自在にマスクできます。
またグラデーション、濃淡を利用してぼかすことも可能です。
逆に、奇麗な曲線や直線には不向きかもしれません。
- 使いどころ
・とにかく多岐にわたる
・髪の毛などの毛並みには最適
・「被写体から選択」等のAI（Adobe Sensei：マシンラーニング）の機能からは最適
- ベクトルマスク
パスから取るマスクです。
アプリケーション
Photoshop
- 仕組み
ベクトルマスクは解像度に依存しないパスであり、レイヤーの内容を切り取ります。
ベクトルマスクは通常、ピクセルベースのツールを使用して作成するよりも精度が高くなります。
ベクトルマスクは、ペンツールまたはシェイプツールを使用して作成します。
- 特長
パスからマスクをする為、奇麗なラインが欲しいマスクに最適です。
モデルさん等の体のラインをベジェ曲線で引いた箇所に最適で、修正・調整も簡単。
逆に、淡い描画部分（髪の毛などの毛並み）には不向きかもしれません。
- 使いどころ
・とにかく多岐にわたる
・モデルさんの身体のライン等で最適
・電化製品等のアンカーポイントの少ない直線や曲線に最適
- パスパネル
選択範囲とパスを保存しておけます。
アプリケーション
Photoshop
- 仕組み
パスパネル（ウィンドウ／パス）には、保存されたパスごとの名前とサムネール画像、現在の作業用パスおよび現在のベクトルマスクが一覧表示されます。サム
ネールの表示をオフにすると、パフォーマンスが向上します。
パスを表示するには、まずそのパスをパスパネルで選択する必要があります
- 特長
パスを保存できるので、「パスから選択範囲」「選択範囲からパス」を作成することが出来る
レイヤーマスクとベクトルマスクの使い分けとセットで理解しておきましょう。
- 使いどころ
・パスを保存して2次利用
・パスから選択範囲の作成
・選択範囲からパスの作成
- クリッピングマスク
図形から取るマスクです。
アプリケーション
Photoshop
- 仕組み
クリッピングマスクとは、あるレイヤーの透明部分を使用して、その上のレイヤーにマスクを適用する機能です。
※Photoshopは下のレイヤーの形に切り抜かれる
- 特長
既に決まった形の所に画像を当て込んだりして使える為、仮の写真部分等に利用する事が多い。
後から写真の入れ替えが必要な箇所の利用が多いのでレイヤー管理にご注意ください。
テクニックとして、文字をクリッピングマスクして装飾した文字表現が出来たりもします。
- 使いどころ
・とにかく多岐にわたる
・仮デザインや入れ替えのある画像箇所
・調整レイヤーでの利用
- クイックマスクモード
ブラシを使ってトリミングをする機能です。
アプリケーション
Photoshop
- シェイプマスク
画像をドラック＆ドロップするだけのマスクです。
アプリケーション
XD
コメント