1限目
学科 ECサイトデザイン基礎②
バナーとは？

2限目
学科 ECサイトデザイン基礎②
レイアウトデザインのポイント

3限目
学科 ECサイトデザイン基礎②
模写バナー制作に向けて

4限目
学科 ECサイトデザイン基礎②
模写バナー制作に向けての情報収集

5限目
学科 ECサイトデザイン基礎②
模写バナー制作に向けての情報収集

本日のテーマ

模写バナーの制作準備です。
優れたデザインを徹底的に真似るプロセスが、
デザインの基礎を作り上げてくれます。
文字だけのバナーも良い練習になります。

印刷物との違いはサイズが決まっていないということ。
実務でサイズが決まっていることはあまりなく、状況やサイトごとに変わるので柔軟に対応できる様になっておく。

縦・横　正方形

技術テストがある就職活動では１時間でバナーで作成する、ということがある。

面積が大きいスペース→メッセージ性が強い
見せたいメッセージ、画像を目立たせるレイアウトを意識。

心の余裕が余白にも現れる…

ゆとりあるデザインを心がける。

１段落に１つの資料、の様にブロックごとにまとめる。

揃えて整理整頓。

同ジャンル、類似商品で関連性を持たせる。
イメージ、世界観、フォント

同じルールで同じ表現。

同じ表現を反復して作成していく能力を身につけよう！

他が整っている前提で一部分を目立たせることで際立つ。

①ジャンプ率
②イラスト・写真
③背景
④ギザギザ・吹き出し

デザインが良くても、メッセージが伝わらなければ人に伝わることはないから注意。

・可読性　読みやすい線の太さ　背景と文字の配色　
・可認性　ゴシックは可認性が高い→読むというより見て欲しい時に有効
・判読性　誤読・誤解をさせない漢字の使い方。余白もうまく利用する。

カラーコードが１違うだけで違う色。

色使いは自然、が良い。
違和感を感じる配色・邪魔する配色はあまり良くない。

素敵なバナーを模写して配色やメッセージを参考にしてみる。

【資料】

カリキュラム資料 ダウンロード用サイト
https://samplesdl-web.com/doc/

下記のファイルをダウンロードしましょう。
「デザインの考え方」の教科書④.pdf」

【動画】「デザインの考え方」の教科書④

バナー／バナー広告とは？

バナー広告とは、Webサイトやアプリの広告枠に表示される「画像の広告」のことです。看板（Banner）のような見た目からそう呼ばれています。近年は「動画形式」も見られます。

主な特徴は、視覚的に訴えかける「画像」と「キャッチコピー」を組み合わせて、一目で商品の魅力を伝えられる点です。クリックすると、その商品の詳細ページ（販売サイトなど）へ直接ジャンプする仕組みになっています。

文字だけの広告に比べて印象に残りやすく、ブランドのイメージを伝えやすいのが強みです。

参考サイト

ワンポイントアドバイス

著作権保護対象となる画像素材、キャッチコピー、ブランドロゴなどの流用はNGです。商用利用はもちろん、ポートフォリオや練習であってもトラブルの原因になることがありますので気をつけましょう。

参考にする際は構成要素の“形”に着目し、
中身は必ず自作しましょう。

本日の課題

①模写したいバナーのスクショや画像を名前をつけて保存し、
②模写制作に使用するために、できるだけ元画像に似ている画像素材などを収集しましょう。

※目標2つ以上を目指しましょう。
Photoshopでどのようにすれば再現できるか考えながら素材探しをしましょう。