クリックされるバナーをデザインする実践テクニック vol1

■バナー制作習得はWebデザイナーへの第一歩!

デザイナー候補としてWeb制作会社に就職しても、いきなりサイトのデザインを任される事はありません!バナー制作が一人前になって初めてTOP画像や、ページのカンプ制作をまかされるようになります。しかしながら、小さな世界に飛び先の内容を凝縮する仕事ですから、実は大きなトップ画像をつくったり、ランディングページのグラフィックを作るよりむしろテクニックのいる仕事なのです。この授業では、小さな世界「バナー」で飛び先のページ全てを表現するテクニックを学びます。

■バナーの種類

サイトの中でクリックをうながすために設置される場合と、別のサイトに貼ってもらって、本家サイトに誘致するための物があります。それぞれの場合の情報の選びかたを学びます。

■バナー広告とは

別のサイトに張って、サイトに誘導する物です。色々な種類のバナー広告の仕組みやWeb広告のASP(アフィリエイトサービスプロバイダ)について学びます。バナー広告は広告の宿命で、嫌われ者になりやすいのです。ウザがられず、目に飛び込み、そして押してもらうためのテクニックを学びます。

■バナーのサイズは決まっている!

バナー広告の出稿先によって、サイズが決まっています。一つのとび先に向うバナーは通常いくつかのサイズを制作します。それぞれのサイズのバナーの重さが決まっていますので、その重さの中でいかに画像を劣化させないで制作するかがポイントになってきます。

■受講にあたって準備するもの

adobe Photoshop (ヴァージョンは問いません)

・お持ちでない方は、下記のサイトに従って、30日間無料お試し版をダウンロードしてください。

https://creative.adobe.com/ja/products/download/photoshop

・WindowsでもMacでもインストールできますが、メモリ(Ram)は2GM以上入っている事が望ましいです。

・初めてに触れる人は、以下のトレーニングサイトでチュートリアルやビデオを全て見てPhotoshopの基本操作を知っておいてください。動画の通りにできるようになる必要はありません。Photoshopではどんな事ができるか知っておきましょう。

https://helpx.adobe.com/jp/photoshop.html

■バナー甲子園:関連授業一覧

PhotoshopでWebデザインするときの悩みに答えます
バナーからはじめるクライアントワーク vol1
バナーからはじめるクライアントワーク vol2
クリックされるバナーをデザインする実践テクニック vol1
クリックされるバナーをデザインする実践テクニック vol2
※バナー甲子園の案件はこちら
http://crowdworks.jp/public/jobs/147765

詳細を開く
クリックされるバナーをデザインする実践テクニック vol1
2014年9月13日公開
01:30:00
クリックされるバナーをデザインする実践テクニック vol2
2014年9月14日公開
01:30:00
  • 自己紹介&アジェンダ
  • 02:26
  • 生徒さんが制作したバナーをチェック
  • 16:52
  • 先生が制作したバナーをチェック
  • 02:04
  • バナー実例制作
  • 00:33
  • バナーに文字を入れてみよう
  • 01:57
  • 文字のカーニングをしてみよう
  • 07:58
  • バナーに商品写真を入れてみよう
  • 11:13
  • 商品写真をシルエットにしてみよう
  • 09:05
  • バナーにワンポイントデザインを入れてみよう
  • 04:18
  • サイトのページを使って制作する意味とは
  • 02:15
  • スライス切り出しを使って必要なバナーを保存しよう
  • 09:44
  • バナー案件を実際に投稿してみよう
  • 04:17
  • Q:「太字を選んでも太さが物足りなく、でもフォントサイズは上げたくない」場合はフォントの種類を変えるしかないでしょうか?
  • 00:54
  • Q:文字組みに関してイラレのほうが有利に思うので、フォトショでの文字組みにはいつも不安をおぼえます。バナーに関してはフォトショのほうがいいのでしょうか?
  • 03:04
  • Q:「押されないバナーと押されるバナーの違い」をもう一度教えていただけると助かります!よろしくお願いします!
  • 01:06
  • Q:スライスするときにいつもガイドライン引いてから切り出すのですが、ガイドを使わないほうが良いケースありますか?
  • 00:41
  • Q:自動選択ツールで思うように画像が選択できない時は チマチマやるしかないでしょうか。
  • 01:04
  • Q:作る画像がぼやけてしまいます。大きく作って縮小する方法もありですか?
  • 01:07
  • Q:イラレで作ったバナーをフォトショでjpgに変換しても、バナーとしても大丈夫でしょうか?
  • 01:10
  • Q:バナーの勉強は、やはりたくさんのバナーを見てたくさん作ることでしょうか。
  • 01:18
  • Q:バナーを作っていると、つい情報過多でくどくなってしまうのですが、シンプルにすると地味になってしまいます。適切なバランスを見極められるようになるにはどうしたらいいでしょうか?
  • 01:30
  • Q:バナーデザインの流行などはありますか?
  • 01:05
  • Q:限られた重さで画像を書き出す時、劣化しないで重さをおさえるおすすめのプラグインはありますか?
  • 01:20
  • レポート課題発表
開く
PhotoshopでWebデザインするときの悩みに答えます
2014年9月13日公開
01:30:00
  • 自己紹介&アジェンダ
  • 03:14
  • 初期設定に関する質問:これだけはやっておくと間違いないという設定があれば教えて下さい!
  • 19:54
  • レイヤーカンプに関する質問:実際の現場でレイヤーカンプ機能は活用されているのでしょうか?
  • 11:27
  • パターンに関する質問:よくつかうテクスチャはどんなものがありますか?
  • 16:03
  • 切り抜きに関する質問:Photoshopでの切り抜きについて沢山の情報があって結局どんな方法でやったらいいのでしょうか?
  • 08:58
  • フォントに関する質問:フォント配置に悩みがあります。
  • 09:12
  • テキストに関する質問:「テキスト」は複数選択して色の変更ができますが、「シェイプ」はひとつひとつ色を変更することしかできません。
  • 03:28
  • Q:jpgの上に4px*4pxのパターンを置いて、圧縮時のノイズを軽減するとのことですが、実装するときにはjpgに合成して書き出すのかCSSなどでパターンをかぶせるのか、どうしたらよいでしょうか。
  • 01:12
  • Q:Photoshopに似てるソフトでフリーのソフトや安価なソフトがありますが、基本的に何が違いますか?WEB制作するのにPhotoshopではなくて、フリーソフトなど使用しても大丈夫でしょうか?
  • 01:31
  • Q:Photoshopに慣れるための練習方法などはありますか?
  • 03:35
  • Q:編集>自由変形を選択した時にオプションメニューに出てくるWの単位が%になっていますが、これを初期設定でpxに直す方法はありますか?
  • 06:14
  • Q:画質の悪さを誤魔化す方法はテクスチャを重ねる以外に何かありますか?
  • 04:31
  • レポート課題発表
開く
【Photoshop特訓】バナーからはじめるクライアントワーク vol.1
2014年9月11日公開
01:30:00
  • 【前半】授業
  • 00:00
  • 自己紹介&アジェンダ
  • 01:16
  • 絶対に必要な情報
  • 04:59
  • クラウドワークスによる案件のお話
  • 09:50
  • はじめてのデザイナーに送るハズレにくいヒアリング
  • 04:14
  • 打ち合せに慣れているデザイナーレベル中級編
  • 06:17
  • 打ち合せに慣れているデザイナーレベル上級編
  • 03:04
  • 仮説を立てよう:仮説を立てることで自分のデザイン理論を築きあげていく
  • 09:00
  • イメージボード:頭の中のイメージをみんなで共有する
  • 02:17
  • 資料を引き出しに
  • 01:26
  • トレース:審美眼は作ることで成長する
  • 10:17
  • 元データを見て技術を盗む
  • 16:28
  • Q:不採用実績もたまりますか?
  • 00:45
  • Q:トレースした作品をフェイスブックなどに公開して意見を聞く場合、著作権とかまずい事にならないように気をつける事はありますか?
  • 02:09
  • Q:かっこいいサイトをお気に入りに入れているんですが、たまりにたまってきちゃってどうやって整理していますか?
  • 01:28
  • Q:「今すぐ作って欲しい!」くらい時間的余裕ナシでやってくる案件にはどのように対処されていますか?
  • 01:36
  • Q:フォトショとイラレ、どちらを重点的に使っているのですか?
  • 01:10
  • Q:RSSリーダーは何を使ってますか?
  • 00:44
  • Q:イシジマ先生やマサトさんのヒアリングでの失敗談があればおしえてください!
  • 03:46
  • Q:二時間もイラストボードにかけられるほどの予算がついていない案件はどうしますか?最初からうけない感じですか?
  • 01:35
  • レポート課題発表
開く
こんな人にオススメ
WEBデザイナー(初心者)

バナー制作が出来るようになりたい方

スライド資料
授業で使用するファイル

授業の中で、実際にヒアリングシートを使用しますので、授業前にダウンロードしておいてください。

※授業以外での利用は禁止します。

担当の先生
学生代表
  • 未定

    未定

関連授業