webサイト制作の勉強|2018年9月クラス用ブログ

webサイト制作の勉強に関する解説ブログです。

バナーの制作

Webデザイナーとして任される最初の仕事として代表的なものがバナー広告の制作です。

バナーのサイズ

広告の場合、ある程度はサイズに規定があります。仕事の場合大抵クライアントの方から指定があります。1種類のバナーに対し様々なサイズを用意する場合もあるので、色々なサイズに適したレイアウトのパターンを覚えておきましょう。

300×250(Yahoo!/Google)PC/スマホ ※推奨

728×90(Yahoo!/Google)PC ※推奨

160×600(Yahoo!/Google)PC ※推奨

336×280(Google)PC ※推奨

320×50(Yahoo!/Googleスマホ ※推奨

320×100(Yahoo!/Googleスマホ ※推奨

文字を入れてみる

決めたサイズとメインカラーで背景レイヤーを作り、文言を入れてみる。

優先順位とジャンプ率

入れた文言に対し、訴求したい順に優先順位を決め、文字サイズやジャンプ率をここで決めましょう。

文字のジャンプ率で印象は大きく変わる

ferret-plus.com


tsutawarudesign.com




バナー全体のデザイン

フォントの種類や色、テーマに沿ったデザインを作っていきましょう。
中々アイデアが出ない場合は既存のバナーを参考にしましょう。



uxmilk.jp


既存のバナー制作

既存のバナーをモデルにし、バナー画像を作成する。


ローソンフレッシュのバナー
サイズ:300x250

f:id:yachin29:20150116233657g:plain






通信制 科学技術学園高等学校のバナー
サイズ:300x250

f:id:yachin29:20161125092848j:plain



フリー素材

食材・料理や野菜・果物のフリー写真素材 無料画像のフード・フォト

www.pakutaso.com