サイト幅に迷ったら広告のサイズに合わせて作っちゃおう

更新日 2022/07/04 02:06:07

ウェブサイトを設計に悩まされるサイトの幅。ウェブ業界ではもう幅はいくつかの候補テンプレートのようなものが用意されており、主に広告のサイズとモバイルのブレイクポイントに合わせて作られているのが多いです。

コンテンツ幅は0から無限大に決めることができますが、PCの主流なモニターのサイズがフルHDで横1920px縦1080pxとなっております。4Kモニター（横4096px縦2160px）や変わったサイズのウルトラワイドモニター（横2560px×縦1080px）もありますが、値段が高めとなったり、基準にしちゃうとこれより小さいサイズでは見切れてしまいます。

現状は圧倒的に利用数が多いフルHDサイズを基準に、0から1920pxまでの幅で決めちゃいましょう。

広告サイズで決める ウェブ上の広告といえば有名なのが「Google AdSense」サイトを運営したことがある人は一度は聞いたことはないでしょうか。Google AdSenseで使用できる広告のサイズは決まっておりこのURLから確認することができる

広告サイズに関するガイド

日本で利用できるGoogle AdSense広告サイズは以下の通りで太字は高い成果を得られることができるサイズのようです。

300×250 336×280 728×90 300×600 320×100 320×50 468×60 234×60 120×600 120×240 160×600 300×1050 970×90 970×250 250×250 200×200 180×150 125×125 広告を１つ置くということでもなく２つ並べて置くことも想定できると良いですね。例えば336×250の広告を２つ置くには672pxのサイズが必要になってきます。

また忘れてはならないのが、広告周りの余白分を確保することです。672pxならば桁よくするため、理由は何でも良いので余白を追加して700px分を確保して、広告の位置を調整すると良いですね

高い成果を得られるサイズの中でも一番大きい横幅サイズが728pxでもよいかもしれません。

ブレイクポイントで決める 広告サイズでコンテンツ幅を決めてしまってもよいですが、ブレイクポイントで幅を決めることもできます。

ブレイクポイントとは、画面のサイズによってデザインを変えるポイントです。例えばスマホ表示とタブレット表示とパソコン表示とありますね。スマホの画面サイズは320px〜480px、タブレットの画面サイズは768px〜1023、パソコン表示の画面サイズは1024px〜と一般的に言われています。

ブレイクポイントを使ったデザインは作成に手間がかかってしまうことも多いので実際にはスマホとタブレットはセットで、PC表示と分けていると思います。