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

ファリカテクニカルアカデミーのwebサイト制作科の授業解説ブログです。フェリカテクニカルアカデミーは池袋にある求職者支援訓練の学校です。

バナーの制作

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


www.uniad.co.jp

バナーのサイズ

広告の場合、ある程度はサイズに規定があります。仕事の場合大抵クライアントの方から指定があります。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

インターネット広告について

Web広告とは、「インターネットの媒体上に掲載される広告」のことです。
広告枠を持つWebサイトや検索エンジンの検索結果ページ、メール、SNSなど、あらゆる媒体に掲載され、web広告やオンライン広告、デジタル広告と呼ばれることもあります。



dentsu-ho.com


上の記事にあるように2020年のインターネット広告費はマスメディア4媒体(テレビ、ラジオ、新聞、雑誌)とほぼ同じです。マスメディア4媒体の広告費は6年連続で減少していますが、インターネット広告費は年々増加しています。

インターネット広告の種類

ディスプレイ広告(ターゲット広告)

ディスプレイ広告とは、年齢や性別、地域、過去のWebサイト閲覧履歴などでターゲティングを行うことで、まだ自社のサービスや商品を知らない潜在層に適したWeb広告だと言えます。

リスティング広告

リスティング広告とは、ユーザーがGoogleYahoo!といった検索エンジンを使用して検索した際に表示されるページに、検索キーワードに応じて表示されるWeb広告です。ユーザーが広告をクリックして初めて料金が発生するクリック課金型であることも大きな特徴です。

純広告・バナー広告

純広告とは、特定のWebサイトの広告枠を買い取って掲載するWeb広告のことです。テキストや画像、動画での広告表示が可能で、バナー広告と呼ばれることもあります。

動画広告

動画広告とは、動画コンテンツを配信するWeb広告です。テキストや画像と比較して伝えられる情報量が多く、目を引きやすいため、効果の出やすい広告として多くの企業が取り組んでいます。特にYouTubeの動画に差し込まれるCMのような15秒程度の短い「TrueView広告」は今非常に需要が高くなっています。

digitalidentity.co.jp



バナーサイズについて

www.uniad.co.jp

CSS基礎2

CSSの基礎で一番解りにくいのが、marginとpaddingの違いです。

margin

marginとは要素の外側に出来る隙間の事です。

padding

paddingとは要素の内側に出来る隙間です。

言葉にすると一見簡単に思えますが、実際にレイアウトしてみるとシンプルなレイアウトではどちらでも結果として思い通りの形になるケースが多いため、上手く使い分けが出来ないままなんとなく使い続け、いざ複雑なレイアウトを始めると、使い分けが出来ていないせいで苦労する、というケースをよく目にします。なので、今のうちからmarginとpaddingの違いをしっかりと理解しておきましょう。


marginとpaddingは共に4つの方向別に指定する事が出来ます。

margin-top
margin-bottom
margin-left
margin-right

padding-top
padding-bottom
padding-left
padding-right

また、ショートハンドという省略した形でコーディングしていく機会も多いので、ショートハンドの形も一緒に覚えて行きましょう。



f:id:yachin29:20160720132056g:plain



近接の法則

bulan.co

余白の設定

CSSの基礎で一番解りにくいのが、marginとpaddingの違いです。

margin

marginとは要素の外側に出来る隙間の事です。

padding

paddingとは要素の内側に出来る隙間です。

言葉にすると一見簡単に思えますが、実際にレイアウトしてみるとシンプルなレイアウトではどちらでも結果として思い通りの形になるケースが多いため、上手く使い分けが出来ないままなんとなく使い続け、いざ複雑なレイアウトを始めると、使い分けが出来ていないせいで苦労する、というケースをよく目にします。なので、今のうちからmarginとpaddingの違いをしっかりと理解しておきましょう。


marginとpaddingは共に4つの方向別に指定する事が出来ます。

margin-top
margin-bottom
margin-left
margin-right

padding-top
padding-bottom
padding-left
padding-right

また、ショートハンドという省略した形でコーディングしていく機会も多いので、ショートハンドの形も一緒に覚えて行きましょう。



f:id:yachin29:20160720132056g:plain


近接の法則

bulan.co




f:id:yachin29:20210824000433p:plain
f:id:yachin29:20210824000500p:plain
f:id:yachin29:20210824000518p:plain
f:id:yachin29:20210824000550p:plain
f:id:yachin29:20210824000613p:plain

ヘッダー画像の制作

header画像の作成

photoshopのフィルター機能やレイヤースタイルなどを使い、header画像を作成しましょう。
f:id:yachin29:20090609115035j:plain


f:id:yachin29:20151008200723p:plain


使用するテキスト

Café Italia Melbourne; Café Italia, Carlton; Get Menu, Reviews, Contact, Location, Phone Number, Maps and more for Café Italia Restaurant on Zomato.


使用素材
f:id:yachin29:20210524154427j:plain