– 本日のアジェンダ –
1限目
学科 ECサイトデザイン基礎①
ECサイトとは？

2限目
学科 ECサイトデザイン基礎①
ECのお仕事とバナー作成について

3限目
学科 ECサイトデザイン基礎①
マスクについて

4限目
学科 ECサイトデザイン基礎①
サムネイル制作に向けての情報収集

5限目
学科 ECサイトデザイン基礎①
サムネイル制作に向けての情報収集

本日のテーマ

ECの仕事への理解

○ECサイト

ECサイトとは、自社の商品やサービスを、インターネット上に置いた独自運営のウェブサイトで販売するサイトのことである。ECとは英語: electronic commerceの略。複数の企業や個人商店がインターネット上の1か所で出店する形態のウェブサイトは、電子商店街の項目を参照。ウィキペディア

例：Amazon・楽天市場

１）ＥＣの業務商品登録について
２）ＥＣの業務プロモーション作業
３）ＥＣの業務店舗経営
４）ＥＣの業務〈番外編〉店舗リニューアル
【作成物】
【制作のポイントと授業日】
○マスクについて

１）ＥＣの業務商品登録について

・簡単なページデザイン（Photoshop ・簡単なＨＴＭＬとＣＳＳの知識）
・サムネイル画像の作成（Photoshop）
・基本情報の登録（Excel）
・個人情報の管理方法（アカウント管理・ＦＴＰの理解）
・一括登録であればＣＳＶデータ（Access）

２）ＥＣの業務プロモーション作業

・バナー作成（Photoshop ・簡単なＨＴＭＬとＣＳＳの知識）
・ランディングページの作成（Photoshop ・簡単なＨＴＭＬとＣＳＳの知識）
・メルマガ作成（Photoshop ・簡単なＨＴＭＬとＣＳＳの知識）
・商品知識（その商品の知識はもちろん、業界の知識）
・モール内の知識（楽天やヤフー、アマゾンの知識）

３）ＥＣの業務店舗経営

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

４）ＥＣの業務〈番外編〉店舗リニューアル

・ＥＣ業務のその１の商品登録が出来る
・ＥＣ業務のその２のプロモーション作業が出来る
・ＥＣ業務のその３の店舗経営の理解と知識がある

【作成物】

・バナー

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

必要なもの）

①メッセージ（端的な文書）　②イメージ（写真やイラスト）　③アテンド（ご案内の内容）例：「詳しくはこちら」

・サムネイル（次回の授業で作成）

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

※楽天市場のサムネイルは規約が多いので要確認

【制作のポイントと授業日】

STEP①サムネイル画像　〈学科 ECサイトデザイン基礎②5/23〉

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

STEP② テーマによるバナー〈実技 ECサイトデザイン実習①②5/22・5/24〉

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

STEP③ バナーを当て込む〈実技 ECサイトデザイン実習③5/28〉

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

STEP④ サイズ違いのバナー〈実技 ECサイトデザイン実習④5/30〉

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

○マスクについて

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

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

〈マスク機能について〉

・レイヤーマスク

選択範囲からマスク

最も基本的なマスクで、レイヤーにグレースケールでマスクを適用し、非破壊的な編集を可能にします。
白い部分が可視、黒い部分が非可視となり、マスクの濃度で透明度を調整できます。
レイヤーのコンテンツを部分的に隠したり、表示したりするのに最適です。

・ベクトルマスク

パスからマスク
※便利なパスパネルを活用

ベクターパス（線や形状）を使ってマスクを作成する機能です。
レイヤーマスクよりもシャープで正確なエッジを必要とする場合に適しています。
Illustratorなどのベクター編集ソフトでよく使用される機能です。

作業用パス〉

・クリッピングマスク

図形からマスク
※IllustratorとPhotoshopの違いを確認

あるレイヤーの範囲内で、他のレイヤーのコンテンツを表示または隠すための機能です。
クリッピングマスクにするレイヤーは、マスクするレイヤーの前に配置する必要があります。
クリッピングマスクを使用すると、レイヤーの形状や配置を制御することができます。

・グラデーションマスク

2つの画像をなじませる

１）画像を二つ用意する

２）レイヤーマスクを追加

３）グラデーション

４）カーソルをドラッグ

・クイックマスクモード

ちょっと使い道が違うマスク

・シェイプマスク

これは簡単だけどそれしかできない

選択範囲を素早く作成するためのモードです。
選択範囲を元に、レイヤーマスクやクリッピングマスクを作成することができます。