投稿者: admin

実技 ECサイトデザイン実習③

-本日のアジェンダ-

1限目
実技 ECサイトデザイン実習③
バナーの確認について

2限目
実技 ECサイトデザイン実習③
バナーの元データについて

3限目
実技 ECサイトデザイン実習③
バナーの納品方法について

4限目
実技 ECサイトデザイン実習③
ポートフォリオサイトでバナーの見せ方について

5限目
実技 ECサイトデザイン実習③
バナー作成

本日のテーマ

確認と納品

バナー制作の進め方

バナーとは？

バナー (banner) はウェブページ上で他のウェブサイトを紹介する役割をもつ画像（アイコンの一種）のこと。 主に広告・宣伝用に作られ、ウェブサイトへのハイパーリンク用にも利用される。 画像にはリンクを張り、クリックするとそのバナーが紹介するサイトを表示するようになっている。 横長帯状のものが一般的だが、近年は縦長のものや正方形に近いものも多い。

制作工程

  1. 作品全体の要素確認をする
  2. 文言内容の構図（レイアウト）決める
  3. 画像素材の補正・調整
  4. 画像当て込み文字の読みやすさの調整
  5. 全体のバランスを整える

【ポイント】
リテイク（修正や出戻り）に強いデータにしておくこと
レイヤーパネルの整理整頓
2パターン以上のパターンのアイデアを持つこと

1.作品全体の要素確認をする

作品作りを円滑に行う最大のコツは、最初に要件定義をしっかりまとめる事かと思います。「掲載箇所」「サイズ」「文言」「画像」「使用頻度」等をしっかり初期段階で確認しておきましょう。

必要な技術と知識の例として
  • 「カンバスサイズ」
  • 「画像解像度」
  • 「CMYKとRGB」

2.文言内容の構図（レイアウト）決める

内容が固まったら、構図（レイアウト）を考えましょう。この工程では見せる順番を決める事、まずは色を使わず骨組みだけにして、構図を考えてみましょう。

必要な技術と知識の例として
  • 「文字パネル」「段落パネル」
  • 「定規」「ガイド」
  • 「移動ツール」
  • 「レイヤーパネル」

3.画像素材の補正・調整

画像の補正とサイズ調整を行いましょう。大事なことは3つ
「レタッチ」「色調補正」「トリミング」をしっかり行いましょう。
また、バナー制作時間を左右するのはココです！効率の良い作業を行うためには、この工程の工夫と予測をしておきましょう。

必要な技術と知識の例として
  • 「レタッチ」
    • パッチツール・ 切り抜きツール・コピースタンプツール・スポット修復ブラシツール・ 修復ブラシツール・コンテンツに応じた移動ツール・ぼかしツール・シャープツール・指先ツール・覆い焼きツール・焼き込みツール
  • 「色調補正」
    • 明るさ・コントラスト・レベル補正・トーンカーブ・色相・彩度・カラーバランス・白黒
  • 「 トリミング」
    • 長方形選択ツール・楕円形選択ツール・なげなわツール・多角形選択ツール・マグネット選択ツール・自動選択ツール・クイック選択ツール
  • 「マスク」
    • クリッピングマスク・レイヤーマスク・ベクトルマスク・クイックマスクモード
  • 「アンシャープマスク」

4.画像当て込み文字の読みやすさの調整

画像と文字が同じ作品に収める工程です。気を付ける事は
「文字の読みやすさ」と「世界観の維持」です。
文字は読めなくては目的が達成できなくなり、作品の雰囲気や世界観を壊してしまっても意味がありません。バランスよくデザインを考えてみましょう。

必要な技術と知識の例として
  • 「レイヤースタイル」
    • ドロップシャドウ・シャドウ（内側）・光彩（外側）・光彩（内側）・べベルとエンボス「輪郭」「テクスチャ」・サテン・カラーオーバーレイ・グラデーションオーバーレイ・パターンオーバーレイ・境界線・塗りつぶしツール
    • レイヤースタイルのコピー・レイヤースタイルのペースト
  • 「文字パネル」
    • フォント選び・太さの調整
  • 「描画ツール」
    • 長方形ツール・角丸長方形ツール・楕円形ツール・多角形ツール・カスタムシェイプツール
    • ペンツール・パス選択ツール・アンカーポイント切り替えツール

5.全体のバランスを整える

最後に全体の調整を行いましょう。そこで気を付ける事は、作っている本人は目が慣れてしまっているという事です。実際に見る人（ユーザー）は1~3秒程度しか見ません。制作する人は目を休めたり、一度違う作品を作ったり目をリフレッシュする事も大事な技術です。
後は、複数パターンの作り方のコツは、「2」「3」「4」の工程を見直す事です。
「2」の構図にまだ工夫の余地があるのか？
「3」の画像の扱いや種類に工夫の余地があるのか？
「4」の文字の見せ方・もともと求められている世界観を表現できているのか？
これらを考え更に良いものを作れるようにアイデアを創造してみましょう。

必要な技術と知識の例として
  • 「Web用に保存（従来）」「書き出し形式」
  • 「別名で保存」
  • 「ズームツール」
  • 「 Print Screen（プリントスクリーン） 」

参考サイト

学科 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」は英語で「網膜」という意味で、画素が細かく人間の目で識別できる限界を超えている、ということから命名された。