訓練49日目　学科 ECサイトデザイン基礎①

本日のアジェンダ

1限目
学科 ECサイトデザイン基礎①
ECサイトとは？

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

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

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

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

本日のテーマ

ECのお仕事を理解しましょう

本日のレポート

EC（eコマース）について

EC（eコマース）とは？

「eコマース」とは、インターネットなどのネットワークを介して契約や決済などを行う取引形態のことで、インターネットでものを売買することの総称である。

“eコマース＝電子取引”の内容は大きく3つに分けられます。

  • 企業同士の取引を B to B
  • ネットショップなどの企業と消費者間の取引を B to C
  • オンラインオークションなどの消費者同士の取引を C to C
    ※一般的にeコマースと言った場合には、多くの場合この「B to C」の取引を指すことが多い。

ECの仕事ってどんなもの？

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

  2. プロモーション作業（売上を取るための仕事）
    • 必要な知識と技術
      ・バナー作成（Photoshop ・簡単なＨＴＭＬとＣＳＳの知識）
      ・ランディングページの作成（Photoshop ・簡単なＨＴＭＬとＣＳＳの知識）
      ・メルマガ作成（Photoshop ・簡単なＨＴＭＬとＣＳＳの知識）
      ・商品知識（その商品の知識はもちろん、業界の知識）
      ・モール内の知識（楽天やヤフー、アマゾンの知識）

  3. 店舗経営（店舗を運営する仕事）
    • 必要な知識と技術
      ・商品知識（その商品の知識はもちろん、業界の知識）
      ・モール内の知識（楽天やヤフー、アマゾンの知識）
      ・在庫管理や人員管理、経営に関わる業務が出来る方
      ・ＥＣ業務のその１の商品登録が出来る又は指示できる
      ・ＥＣ業務のその２のプロモーション作業が出来る又は指示出来る

EC業界の仕事のまとめ

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

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

バナー作成について

バナーとは？

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

バナー作りの上達のコツは、とにかくひたすら数多く見て作る！
限られたスペースで伝えたいことを的確に表現するのは、なかなか難しいものです。
実際のECサイトを直接見るのはもちろん、デザインの参考になるギャラリーサイトなども多くあります。
アイデアに煮詰まったときはもちろん、引き出しを増やすという意味でも、普段から様々な作品を見ておきましょう。

伝える3つの要素

  1. メッセージ（端的な文書やコピー）
  2. イメージ（雰囲気を持つ写真やイラスト）
  3. アテンド（ご案内の内容）

Photoshop【マスク】について

マスク機能とは？

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

リテイクとは？

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

リテイクとは、re = 「再び」とtake = 「撮る」を合わせた言葉で、写真や映画の撮影のやり直しのこと。
その撮影によって得られたフィルムやビデオ素材自体を指すこともある。再撮とも。

リテイクに強いデザイナーがしていること

  • 非破壊データで行う
    • スマートオブジェクト化（Photoshop）
      ※背景をコピー⇒背景のコピーをスマートオブジェクトに変換⇒背景を非表示⇒保存
      ※実際に作りたいサイズより大きいサイズの画像を用意する

  • 拡大縮小が出来る形式を利用
    • Illustratorならベクターデータなのでそのまま利用
    • Photoshopならシェイプの利用または上記のスマートオブジェクト化

  • バックアップと復元する方法を徹底的に！
    • そもそも元データのバックアップ
    • 戻る機能をしっかりと活用
    • 「ヒストリーパネル（Photoshop）」なんかも上手く使いましょう。
      作業の履歴をさかのぼったり、特定の状態に戻ったりするための機能
      メニューの「ウィンドウ」＞「ヒストリー」で表示

  • レイヤーをしっかり管理する
    • マスク機能の確認は（レイヤーパネルで把握します）
    • 調整レイヤーを利用するこの内容は別の動画で説明します。

マスクについては直感的ではなく「理屈」で覚えるべし！

様々なマスク機能

  1. レイヤーマスク（Photoshop）/選択範囲からマスク
    • グレースケールの明度 (白黒に塗り分けられた濃淡) によって、ピクセルの不透明度に換算します。
    • グラデーション、濃淡を利用してぼかすことも可能です。
      • グラデーションマスクのやり方：2個の画像を重ねる⇒重ねる上の画像に空のレイヤーマスク⇒マスクを選択したままグラデーションツール

  2. ベクトルマスク（Photoshop）/パスからマスク
    • 解像度に依存しないパスであり、レイヤーの内容を切り取ります。
    • パスからマスクをする為、奇麗なラインが欲しいマスクに最適です。
    • モデルさん等の体のラインをベジェ曲線で引いた箇所に最適で、修正・調整も簡単。
      ・淡い描画部分（髪の毛などの毛並み）には不向き

  3. クリッピングマスク（Photoshop）/図形からマスク
    • あるレイヤーの透明部分を使用して、その上のレイヤーにマスクを適用する機能です。
    • 既に決まった形の所に画像を当て込んだりして使える為、仮の写真部分等に利用する事が多い。
    • 後から写真の入れ替えが必要な箇所の利用が多いのでレイヤー管理にご注意ください。
    • テクニックとして、文字をクリッピングマスクして装飾した文字表現が出来たりもします。

感想

Photoshopの機能についてよく理解していない部分を今日学べたと思う。
次回サムネイル作りで実際に手を動かしてしっかりスキルにしたい。


タイトルとURLをコピーしました