2025/4/25 「ポートフォリオ作成基礎③【オンライン】」の記録です。
講師：小谷先生
EC（eコマース）とは？
「EC＝Electronic Commerce」の略で、インターネット上で行われる売買全般を指します。
特に「B to C（企業→消費者）」の取引が主流とされ、楽天市場やAmazon、Yahoo!ショッピングなどが代表的なモール型ECです。
EC業界で求められるスキルとは？
Webデザインスキルだけでは不十分
-
Photoshop・Illustrator操作の基本は必須
-
HTML/CSSの基礎知識も必要
-
それに加えて「商品知識」「業界理解」「ユーザー目線」が求められる
ECでは「売る力」＝「ユーザーに伝わるデザイン」が重要です。単にオシャレなだけでなく「買いたくなる」構成が求められます。
ECサイトの3つの主な業務
1. 商品登録（バックエンド作業）
-
商品ページ作成（画像加工・HTML/CSS）
-
サムネイル作成
-
情報登録（ExcelやCSV使用）
-
アカウント・FTPなどの管理
2. プロモーション（売上アップ施策）
-
バナー制作／LP作成
-
メルマガ配信
-
モール知識（楽天・Yahoo等）
-
商品知識・業界トレンドの理解
3. 店舗運営（EC店長業務）
-
在庫・人員管理
-
他部署や業者との連携
-
チームへの指示出しと進行管理
EC現場で役立つ専門知識やポジション
「全部できる人」は少数派。以下のように分業されていることも多いです。
-
商品登録／在庫連携
-
トリミング専任
-
SNS・メルマガ発信担当
-
バナー職人
-
商品写真＆ライティング担当
-
店舗全体のコンサル役 など
EC業界の仕事環境・ビジネスモデル
メリット
-
専門性が重宝される
-
技術より「理解力・実務力」が武器になる
-
在宅・リモート案件も多い
注意点
-
ルーチンが多い
-
シフト制勤務もある
また、制作業務は「単発」ではなく「継続型」の契約（例：月額20万円で運用など）が多いのも特徴です。
【実技】ECバナー制作に必要な考え方
バナーに必要な3要素
-
メッセージ：端的な言葉・コピー
-
イメージ：写真やイラストで世界観を演出
-
アテンド：「詳しくはこちら」「応募期間」などの案内
バナー制作のステップ
STEP①：商品理解とサムネイル
-
正確なトリミング
-
比較される場面を想定しながら作成
STEP②：ジャンルに合わせたバナー作成
-
実技で複数ジャンルを経験
-
レイアウト・配色・フォントの使い分け
STEP③：ページ当て込み確認
-
実際の掲載予定ページに配置して違和感をチェック
STEP④：サイズ違いバナーの展開
-
サイズによって情報量と見せ方を変える
-
レイアウト／文字設計／配色の再調整
SNS・動画などからの集客導線
-
メルマガやSNSからECサイトに誘導
-
広告は「つながりと文脈」が重要
-
YouTubeやInstagramなども販促に活用できる
SNSや動画の転換率（CV率）は約3%。
1万人のフォロワーから300人が顧客になると想定し、売上計算も可能です。
LP（ランディングページ）とWeb広告の関係
LPとは？
-
広告クリック後に遷移する「縦長の営業ページ」
-
目的は「購入・登録・問い合わせ」などのコンバージョン
Web広告とセットで運用されるため、バナー制作では必ず「誘導先ページ」の世界観を意識して作成します。
【まとめ】今後のステップとして
-
バナー制作力は、Webデザイナーの「即戦力」
-
LP制作・商品登録・プロモーションまで一連の流れを意識
-
実務を想定した課題に慣れておくことがカギ
了解！こちらは「マスク機能」について学んだ内容を、WordPress用の記事としてまとめ直したものだよ。構成は見出しごとに分けて、読みやすく整理＆要点を押さえてあるよ。
マスク機能とは？｜画像加工に欠かせない基本テクニック【講義レポート】
1. そもそもマスクって何？
マスク機能とは、「画像やオブジェクトの一部を隠す（＝見せたい部分だけ表示する）」ための仕組み。
削除するのではなく、**“非破壊で隠す”**という考え方が基本です。
- Photoshop：画像を隠す（非破壊編集）
- Illustrator：図形の形で切り抜く（見た目の制御）
後からの編集・調整にも強く、商業デザイナーにとって「リテイク（修正）」に対応しやすい超重要スキルです！
2. マスク機能の種類と使い分け
【1】レイヤーマスク（Photoshop）
- 作成方法：選択範囲から作成
- 特徴：明度で表示・非表示を調整（黒＝非表示、白＝表示）
- 適した用途：髪の毛やグラデーションなど、自然なぼかし表現
- アドバイス：トリミングの基本！Photoshopの必須スキル
【2】ベクトルマスク（Photoshop）
- 作成方法：パスから作成（ペンツール、シェイプツール）
- 特徴：ベクターデータなので、精密で拡大しても劣化しない
- 適した用途：体のライン・製品の形など、綺麗な曲線や直線に最適
- アドバイス：Illustrator感覚で正確なマスクを作成したいときに◎
【3】クリッピングマスク（Photoshop・Illustrator共通）
- Photoshop：下のレイヤーの形に切り抜かれる
- Illustrator：上のレイヤーの形に切り抜かれる
- 特徴：仮の画像差し込み・文字装飾などでよく使う
- 注意点：レイヤーの順番に注意！IllustratorとPhotoshopで逆
【4】クイックマスクモード（Photoshop）
- 特徴：選択範囲を色で視覚的に表示できる
- 用途：複雑な選択範囲のトリミング時に便利
- アドバイス：視覚的に確認できるから初心者にも◎
【5】シェイプマスク（Adobe XD）
- 特徴：XDでの唯一のマスク手法。シンプル操作で画像をマスク
- 注意点：「XDではこれしかできない」ことを理解して使おう
【おまけ】パスパネル（Photoshop）
- 用途：パスや選択範囲を保存／再利用する機能
- アドバイス：マスク作成の前段階として使うと効率アップ！
3. リテイクに強くなる！マスク機能の利点
マスクを使いこなせば、こんなトラブルも怖くない！
- 編集後でも元画像が生きている
- スマートオブジェクトとの併用で自由度アップ
- レイヤー構造での管理がしやすくなる
- 「戻る」「履歴」「ヒストリーパネル」で操作も安心
4. マスクの習得ポイント
- 「直感」ではなく「理屈」で理解すべし！
- IllustratorとPhotoshopで挙動や見た目が違うので要注意
- 配布された.aiや.psdのファイルを正しく読めるように、レイヤー構造をチェックする癖をつけよう
5. まとめ：実務で困らないマスクの理解を！
| マスク種類 | 特徴 | 使用アプリ |
|---|---|---|
| レイヤーマスク | 選択範囲から、明度で表示制御 | Photoshop |
| ベクトルマスク | パスからマスク、正確なラインに強い | Photoshop |
| クリッピングマスク | 形で切り抜く、仮画像や差し替えに便利 | PS・AI両方 |
| クイックマスク | 選択範囲の補助に、視覚的に確認しながら作業 | Photoshop |
| シェイプマスク | XDでの唯一のマスク方法 | Adobe XD |
実務でも使えるヒント
- 「髪の毛」にはレイヤーマスク＋AI選択
- 「商品の体裁」にはベクトルマスクやクリッピングマスク
- 複雑な素材編集には、パスと選択範囲を保存しておくと効率UP！
