カテゴリー: 学科　ECサイトデザイン基礎

学科 ECサイトデザイン基礎②

-本日のアジェンダ-

1限目
学科 ECサイトデザイン基礎②
ECサイトのファッション系バナー

2限目
学科 ECサイトデザイン基礎②
レイヤースタイルについて

3限目
学科 ECサイトデザイン基礎②
バナー作成

4限目
学科 ECサイトデザイン基礎②
バナー作成

5限目
学科 ECサイトデザイン基礎②
バナー作成

本日のテーマ

良いバナーのレイアウトや工夫を参考にしましょう。

本日の課題１

ドロップボックスにある『見本の素材』をダウンロードし、模写したバナーをJPEG形式（低画質）で提出してください。
サイズ：350px × 350px（正方形）
提出先：【作品】バナー③_20210216-1
ファイル名： work _〇〇〇〇_ 20210216-1.jpg
※ 『見本の素材』は、上記フォルダに格納しています。

本日の課題２

・お題：ECサイトに掲載するファッション系バナーを作成
・”楽天ランキング2020″ に表示されているバナーデザイン（レイアウト・配色）を参考につくりましょう。
　楽天市場トップ > 楽天年間ランキング2020 > レディースファッション
　楽天市場トップ > 楽天年間ランキング2020 > メンズファッション
・リンク先：各商品購入ページ（写真画像を取得しましょう）
・提出先：【作品】バナー③_20210216-2
・ 5限目修了時に提出

■提出ファイル
デザインを参考にするバナー：
work _〇〇〇〇_ 20210216-2-before.jpg （またはpng）
作成したバナー：
work _〇〇〇〇_ 20210216-2-after.jpg

Photoshopの操作

  • （横書き・縦書き）文字ツール
  • 長方形ツール
  • 整列ツール（〇〇揃え・〇〇方向に分布【New】）
  • ガイド
  • レイヤースタイル（境界線・ カラーオーバーレイ・ 光彩（外側）・ドロップシャドウ【New】）
  • アートボードツール
  • 書き出し形式…（①ファイル＞書き出し②レイヤー右クリック）
  • グラデーションツール（レイヤーマスクへの適用）【New】
  • レイヤーの不透明度と塗り（境界線の掛け方）【New】

画像取得時の留意点

Chromeで、画像を右クリック＞「名前をつけて画像を保存」をしようとして、WebP形式のファイルだった場合
①画像を右クリック >「新しいタブで画像を開く」
②新しいタブのURLを画像の形式（JPG等）に変更する。
③ 「名前をつけて画像を保存」

拡張子「WebP（ウェッピー）」のファイルをJPEGやPNGなどに変換する方法
WEBP JPG 変換 – 画像ファイルをオンラインで変換する
WEBPをJPGに変換

学科 ECサイトデザイン基礎①

-本日のアジェンダ-

1限目
学科 ECサイトデザイン基礎①
ECサイトについて

2限目
学科 ECサイトデザイン基礎①
デザインについて

3限目
学科 ECサイトデザイン基礎①
バナー作成

4限目
学科 ECサイトデザイン基礎①
バナー作成

5限目
学科 ECサイトデザイン基礎①
講評

本日のテーマ

デザインをフェイクしましょう

コロンブスの卵

コロンブスの卵（コロンブスのたまご、英語: Egg of Columbus または Columbus’ egg、イタリア語: Uovo di Colombo [ˈwɔːvo di koˈlombo]）とは、どんなに素晴らしいアイデアや発見も、ひとたび衆目に触れた後には非常に単純あるいは簡単に見えることを指す成句である。少なくとも15世紀から使われてきた表現であるが、その語源とされる逸話についてはいささか疑念が持たれている。その逸話とは、ある席で「誰でも西へ航海すればアメリカ大陸に行き当たるのだから、アメリカ大陸の発見は大した業績ではない」と言われたコロンブスは、相手に卵を立ててみよと応じた。相手が諦めると、コロンブスはテーブルに卵の先端を打ち付けて平らにすることで立ててみせた、というものである。

ECサイトとは？

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

参考サイト

広告宣伝費について

広告宣伝費とは、事業や商品の広告を作る費用・宣伝にかかる費用のことを指します。 基本的に、広告宣伝費の消費税区分は「課税」です。 販促のためのポスターやチラシ・カタログ等の印刷物、 看板、試供品やティッシュのサンプリング、ダイレクトメール、 テレビ・ラジオ・インターネット広告にかける費用などがこれにあたります。

バナーとは？

バナー広告とは、インターネット広告のうち、画像やアニメーションによって表現する広告の総称である。 バナー広告では、あらかじめ決められたサイズ内でリンク付きの画像を表示し、クリックすることで広告主のWebサイトへ誘導されるようになっている。

レイヤースタイル（Ps）について

レイヤーに対して手軽に様々な表現が可能になる必須テクニックです。

マスクについて

Photoshopのマスクのかけ方は、大きく分けて、『クリッピングマスク』、『レイヤーマスク』、『ベクトルマスク』の3種類があります。
それと選択ツールの調整で使うクイックマスクモードがあります。

参考サイト

Retina対応について

Retinaディスプレイは、アップル製品のうち、100〜160ppi程度であった従来のディスプレイ解像度の、およそ倍の解像度、高画素密度のディスプレイを指す名称である。「Retina」は英語で「網膜」という意味で、画素が細かく人間の目で識別できる限界を超えている、ということから命名された。