-本日のアジェンダ-
1限目
学科 ECサイトデザイン基礎①
ECサイトとは？
2限目
学科 ECサイトデザイン基礎①
ECのお仕事とバナー作成について
3限目
学科 ECサイトデザイン基礎①
マスクについて
4限目
学科 ECサイトデザイン基礎①
サムネイル制作に向けての情報収集
5限目
学科 ECサイトデザイン基礎①
サムネイル制作に向けての情報収集
ＥＣ（eコマース）とは？
そもそも「eコマース」の「e」とは、「Electronic」の略であり、「eコマース」とはつまり、「Electronic Commerce」のことである。
また、「eコマース」の「e」には小文字が当てられているのには理由があり、単語の先頭が小文字で始まると、何かやってくれる、格好いいというイメージとは別に、科学の電子は通常「e」と小文字で表現することが由来になっていると言われている。
「eコマース」とは、インターネットなどのネットワークを介して契約や決済などを行う取引形態のことで、インターネットでものを売買することの総称である。
“eコマース＝電子取引”の内容は大きく3つに分けられます。
- 企業同士の取引を B to B
- ネットショップなどの企業と消費者間の取引を B to C
- オンラインオークションなどの消費者同士の取引を C to C
※一般的にeコマースと言った場合には、多くの場合この「B to C」の取引を指すことが多い。
Ｂ＝Business（ビジネス）企業・業者・仕事
Ｃ＝Customer（カスタマー）一般消費者・顧客・お客様
ＥＣの仕事ってどんなもの？
主にＷｅｂの仕事が中心ではあるが当然ながら、Webデザイナーに最も必要なのはWebデザインのスキル。
制作日数やコストといった制限の中で、デザインでクライアントの魅力を伝え、ターゲットに行動させなければならない。
消費者のニーズは多様化し、商品やサービスも企業からの押しつけでなく、ユーザー目線の開発
が求められるようになった。
商業デザインはユーザーニーズに沿って行い、需要は年々増加。
Webサイトには、「売上増加」「ブランディング」「顧客コミュニケーション」など、それぞれ目的があ
る。
アクセス解析やサイト分析など、Webマーケティングに関連した知識があれば、そういった
Webサイトの課題に対し、解決の提案ができる。
そこでECサイトというジャンル。
ただIllustratorやPhotoshopのソフトが扱えるだけでは通用しない。
では何が必要とされるのかと言えば、その業種のノウハウや高い商品知識、詳しい商品の特長など
が求められる。
またECの世界ではその知識技術はネットにはあまり載っていません。その業種での実践経験、趣味
で得た詳しい知識がここで役に立つかもしれない。
ＥＣの業務その１ 商品登録について
単純に商品ページの作成
必要な知識と技術は
・簡単なページデザイン（Photoshop ・簡単なＨＴＭＬとＣＳＳの知識）
・サムネイル画像の作成（Photoshop）
・基本情報の登録（Excel）
・個人情報の管理方法（アカウント管理・ＦＴＰの理解）
・一括登録であればＣＳＶデータを使います。（Access）
ＥＣの業務その２ プロモーション作業
簡単に言うと、売上を取るための仕事
必要な知識と技術は
・バナー作成（Photoshop ・簡単なＨＴＭＬとＣＳＳの知識）
・ランディングページの作成（Photoshop ・簡単なＨＴＭＬとＣＳＳの知識）
・メルマガ作成（Photoshop ・簡単なＨＴＭＬとＣＳＳの知識）
・商品知識（その商品の知識はもちろん、業界の知識）
・モール内の知識（楽天やヤフー、アマゾンの知識）
ＥＣの業務その３ 店舗経営
簡単に言うと、店舗を運営する仕事
必要な知識と技術は
・商品知識（その商品の知識はもちろん、業界の知識）
・モール内の知識（楽天やヤフー、アマゾンの知識）
・在庫管理や人員管理、経営に関わる業務が出来る方
・ＥＣ業務のその１の商品登録が出来る又は指示できる
・ＥＣ業務のその２のプロモーション作業が出来る又は指示出来る
ＥＣの業務番外編 店舗リニューアル
店舗リニューアルの仕事
必要な知識と技術は
・ＥＣ業務のその１の商品登録が出来る
・ＥＣ業務のその２のプロモーション作業が出来る
・ＥＣ業務のその３の店舗経営の理解と知識がある
ＥＣ業界の仕事のまとめ
【良い話】
・専門性のある商売の経験が高いレベルで重宝されている。
・データベースを扱える知識があるととても重宝されている。
・技術レベルはある程度あれば十分な企業が多い。
・在宅可能な仕事がとても多い。
【微妙な話】
・ルーチンワークが多い。
・業務時間がシフト制の場合が多い。
バナー作成について
伝える3つの要素として
1.メッセージ（端的な文書やコピー）
文字（文字列）で伝えなければならない事を表現。
端的に伝わる文言を考えてみる事。
2.イメージ（雰囲気を持つ写真やイラスト）
イメージ、画像やイラストを使って雰囲気を表現。
パッと見ただけで世界観が伝わるようにする事。
3.アテンド（ご案内の内容）
詳しくはこちらや、応募期間を記載して、
コンテンツを求めている方をしっかりとご案内。
他のWebページからの誘導
画像サイズのバリエーションを意識
他のサイトから誘導を行う訳なので、誘導元と誘導先の
サイト（ページ）の世界観を意識して、バナーを作成する必
要がある。
まずは同じバナーでも様々なバナーサイズに対応出来るよ
うにする。
また様々なサイズに対応するポイントは3つ。
１．レイアウトデザイン
※面積を意識。
２．文字デザイン
※フォントの種類と表現を意識。
３．配色デザイン
※同じ色
STEP① サムネイル画像
まずはサムネイル画像で商品を理解
学科 ECサイトデザイン基礎②
検索一覧に表示される
購入記録にも掲載。
他社比較されるときにも掲載。
正確な商品情報を表現するのがサムネイル。
作業のポイントは、正確な「トリミング」。
STEP② テーマによるバナー
ジャンル・業種によるデザインの違いを知る
実技 ECサイトデザイン実習①
実技 ECサイトデザイン実習②
制限時間は５０分
とにかく様々なジャンルのバナーを作成。
ヒントは「レイアウト」「文字」「配色」ジャンルによって
特徴が異なるのを確認しながら作成。
STEP③ バナーを当て込む
作成確認時の基本として、ページに当て込みする
実技 ECサイトデザイン実習③
バナーを作成したら、クライアントさまへの確認の時には
実際に掲載するページをスクリーンショットをして、そこに
作成したバナーを当て込んで見る事。
単純に違和感が無ければ正解。
世界観の維持を意識して作成。
STEP④ サイズ違いのバナー
サイズ違いのバナーを自在に作る
実技 ECサイトデザイン実習④「成績考査」
様々なサイズのバナーを作成。
ポイントは、「レイアウト」「文字」「配色」の意識
「見やすさ」は絶対要素。
例えば、小さいバナーなら文言を減らす
大きいバナーなら掲載量を増やす
目的を見失わないように作成。