ECサイトとバナー制作について学ぶ 4.22

今日はECサイトとバナー制作について学びました。

「ECサイトの運営のお仕事」と言っても、実際に行われる業務は多種多様であるという点がとても興味深かったです。

これからバナー作成の課題が続くので、今日学んだ「ECサイトの特徴」を考慮した作品作りを心がけたいです。

■ECに関わる業務

①商品登録

 ・簡単なページデザイン(Photoshop ・簡単なHTMLとCSSの知識)

 ・サムネイル画像の作成(Photoshop)

 ・基本情報の登録(Excel)

 ・個人情報の管理方法(アカウント管理・FTPの理解)

 ・一括登録であればCSVデータを使います。(Access)

②プロモーション業務

 ・バナー作成(Photoshop ・簡単なHTMLとCSSの知識)

 ・ランディングページの作成(Photoshop ・簡単なHTMLとCSSの知識)

 ・メルマガ作成(Photoshop ・簡単なHTMLとCSSの知識)

 ・商品知識(その商品の知識はもちろん、業界の知識)

 ・モール内の知識(楽天やヤフー、アマゾンの知識)

③店舗経営

・商品知識(その商品の知識はもちろん、業界の知識)
・モール内の知識(楽天やヤフー、アマゾンの知識)
・在庫管理や人員管理、経営に関わる業務が出来る方
・EC業務のその1の商品登録が出来る又は指示できる
・EC業務のその2のプロモーション作業が出来る又は指示出来る

※求人票には「販売業」と書いてあることが多い

※基本的には分担制で複数人で運営。具体的には下記の仕事がある。

  • 商品登録をする方とか
  • 一括商品登録や在庫連動をする方とか
  • トリミング作業をする方とか
  • メルマガ作成やSNSの発信をする方とか
  • 売上アップの提案やコンサルティングをする方とか
  • バナー作成をひたすらする方とか
  • 商品の写真撮影やライティングをする方とか
  • 在庫管理や商品開発などをする方とか
  • ECサイト運営の店長代理をする方とか

■EC業界の仕事まとめ

○おすすめな点

 ・専門性のある商売の経験が高いレベルで重宝されます。
 ・データベースを扱える知識があるととても重宝されます。
 ・技術レベルはある程度あれば十分な企業が多いです。
 ・在宅可能な仕事がとても多い。

○懸念点

 ・ルーチンワークが多いです。
 ・業務時間がシフト制の場合が多いです。

■バナー制作について

 ①バナーの3つの要素

  ・メッセージ(端的な文書やコピー)

   →見た人に何を「伝えたいのか」「させたいのか」

   →情報の優先度を設定すると作りやすい

  ・イメージ(雰囲気を持つ写真やイラスト)

  ・アテンド(ご案内の内容)

 ②「つながり」を意識

  ・入り口(バナー)から目的までのプロセス

  ・デザインの統一感

■ECサイトのお客さんをどこから誘導するか

 ①他のWebページからの誘導

  ・画像サイズのバリエーションを意識してバナーを作成しよう

 ②検索からの誘導

  ・サムネイル画像の作成が必要

 ③メルマガやSNSからの誘導

  ・固定客がターゲット

 ④動画コンテンツからの誘導

 ※誘導先はLP(ランディングページ)であることが多い

  LP:訪問者が最初にアクセスするページ。ユーザーに購入や申し込みなどのコンバージョン(結果)を目的とする。

■バナー作成練習の4ステップ

 ①サムネイル画像

  ・トリミングをマスターしよう

 ②テーマによるバナー制作

  ・目標は50分1個のペースでの作成

  ・サムネイル画像とバナーは連動(統一感)があるといい

   →ポートフォリオに載せる場合も連動させたサムネイル画像、バナー、LPがあるといい。

 ③バナーに当て込む

  ・違和感がないか確認

 ④サイズ違いのバナーを作成

(参考)バナー作成のコツ

 ・作成するときは、過去自分がそのECサイトを使った理由を考える。

  →お客さんが何を求めているのかを考えながら作成

■リテイクしやすくするための工夫

①非破壊データを使う

 ・Photoshop:スマートオブジェクト化

②拡大縮小ができる形式を使う

 ・Photoshop:「シェイプの利用」または「スマートオブジェクト化」

③バックアップと復元する方法

 ・バックアップの徹底

 ・ヒストリーパネルの利用

④レイヤーをしっかり管理する

 ・マスク機能の確認

 ・調整レイヤーを利用する

 ※レイヤーパネルは常に出しておこう

(補足)マスクは理屈で覚えよう

 ・理屈が分かっていないと作業効率が落ちる

 ・マスクの理屈:仕組みの理解、特長の理解、使いどころの理解

■マスク機能

①レイヤーマスク(基本)

 ・なめらかに抜きとることができる

 ・毛並みのあるものが得意

 ・「被写体からの選択」の機能も得意

②ベクトルマスク

 ・ピクセルベースのツールよりも精度が高い

 ・アンカーポイントの少ない直線や曲線に最適

 ・毛並みのある被写体は苦手

③クリピングマスク(Photoshop)

 ・下のレイヤーの形にマスクが形成される

・仮デザインや入れ替えのある画像箇所でも使用される

(補足1)クイックマスクモード

 ・選択範囲を入りの濃さで表示する機能

 ・細かな選択をしたいときにおすすめ

(補足2)シェイプマスク(XD)

 ・クリッピングマスクとほぼ同じ機能