はてブ 
pocket 
twitter
960pxグリッドシステムの崩壊はフリーダムとデザインフルの入り口なのか？
に選定していただきました。✌('ω')✌
- 2013-6-10
- webデザイン
- 1
偉そうなことを言わせてもらえば、疑うことから始まるんじゃないですかね？
前回まさかの「続く」で終わった記事の続きを書きますよと。過去記事よろしければ。
さて、僕は基本的にデフォルトのまま何かを使うってコトはまず有りません。無類のカスタマイズ好きな人だからです。
ツールは自分の手になじんで初めて意味を持つと思ってますので、ソフトだろうが、ハードだろうが、できる限り改造を施したいと思ってます。
前回の記事でも触れましたが、webサイトで一般的に組まれている横幅は960pxが基準になっていると僕は思ってます。
カスタマイズ好きの僕です、当然、ブログのデザインだって手を入れまくっています。
仕事でもブログのカスタマイズやサイトの組み立てをしているのですが、どう考えても960pxでは納まらないよなぁと、常々思っているんです。
納まらない理由は「広告」。おそらくブログで収益を上げてみようかと考えたことがある方なら、同様の疑問にぶつかることも有ると思いますので、書きます。
おそらく一般的な960pxのシステムで組まれたブログ
メインカラム620px、サイドバー300pxで組まれたブログが一般的なブログの形じゃないかと思います。
メインカラム640px、サイドバー280pxで組まれた960も有ると思いますが、後述する広告との兼ね合いから、サイドバーは300pxに決まるのではないかと、僕は思ってます。
グリッドレイアウトを採用してデザインすると、諸々の要素がきっちり美味くまとまるので、知っておくこと自体は大事ではないかなぁと思ってます。
でもまあ、これだけがすべてじゃないよね。
ブログと広告の関係
アメブロとか、はてなブログとか、無料系のブログサービスだと限界があるかも知れませんが、ある程度自分でどうにでもなるCMSでブログを組んでいる場合、ブログをデザインする際、広告をどうするかなぁ？って考える人もいるでしょう。
ご多分に漏れず当ブログprasmもGoogleAdSenseやアマゾンのアソシエイト等の広告を配置しています。
少なくとも僕の場合は、ブログのデザインを組むときに、広告のサイズを折り込んでデザインしようとします。
収益性を高めるって目的もあります。ありますし、ありますが、肝心の記事が広告によって読みにくくなったりしないようにという配慮のために、ブログの骨格を考える意味合いも含みます。
だったら広告外して好きにデザインしたら？と、考える人もいると思います。ごもっとも。
しかしまあ、何かしら制約をもうけて、その制約の中でアレやこれやするのが、僕は楽しいんです。
ブログデザインに組み込む広告スタイル
やや脱線しますが、最近Googleアドセンスの広告に
「ビッグバナー（大）（970×90）」
というサイズの広告が選択可能になりました。970って数字は横幅で、当然単位はpxです。
おわかりの通り、もう既にこの広告を選択しようと思った瞬間に、960pxのシステムは採用できません。
ビッグバナー大は当ブログのタイトル下に設置してます。
過去記事にも書きましたが、当ブログでは980pxの横幅で組まれています。
メインカラム645px、サイドバー335pxのまあ言えば、変形の960システムで組まれています。理由はまあいろいろありますが、大きく言えば、メインカラムとサイドバーの空きの幅の問題で、少し広めに開けるために数字が変わっています。
ブログの場合、メインカラムとサイドバーの関係だけ考えればほとんど問題がないのでどの幅で組もうが、特に問題はありませんが、メインとサイド以外に、2分割4分割等の絡む分けが必要になってくるサイトの場合、素直に960pxのグリッドを採用した方が話しが早いと僕も思います。
サイドバーに広告を組み込もうと考えれば、自ずとサイズは決まってしまう
さて、サイドバーのサイズに関しては、広告を組み込もうと決めた瞬間にサイズは決まると思います。
googleアドセンスやアマゾンアソシエイトのバナー広告、もちろんサイズはたくさんありますが、一般的な横幅は「300px」がやはり多いです。
このサイズの選定にはサイドバーとの親和性が決め手になっていることはまあ、間違いないと思います。
もちろん他にも広告のサイズはいろいろとあると思いますが、サイドバーに広告を仕込むことを決定するのであれば、広告のサイズにフィットするサイドバーサイズにした方が、自然です。
自然でありすぎたら広告に目がとまらないデメリットもありますが、個人的にはきっちりとこの広告の見た目までコントロールしているブログのほうが、運営が成功していると思います。サイドバーの幅の決定だけの問題なので、そんなに難しくはないかなという印象でもあります。
見て見ぬふりは出来ないけど、邪魔になってもらっても困る
ブログで収益を上げること自体は全く何も問題がないと僕は思ってます。むしろ広告以外にちゃんと収益化できる仕組みが生まれればなぁといつも思っている訳です。
ファーストビューという考え方
あなたが何かのリンクをクリックして記事にたどり着いたとき、ブログが表示されます。そのとき画面に表示されているものが、ファーストビューです。
ファーストビューはまあ、ブログやサイトの第一印象です。そこに表示されている内容次第でブログを好きになってくれるかが決まる場合もあります。
もちろん読みたいのは記事の本文なのですが、ファーストビューで損をしてしまうとせっかくの記事の印象さえ左右されてしまうので、気を配りたいものです。
収益性の高そうな広告配置
僕個人の感覚なので、参考程度に。
よく見るタイトル下に広告を2つ配置したブログレイアウトです。
どうして収益性が高いのかは後述。
ファーストビューに広告が3つ確実に入ってきます。
広告位置は、高ければ高いほどクリックされる
広告の位置とクリック率 | グーグルアドセンスの使い方(GoogleAdSenseで稼ぐためのHP作成ガイド)_
クリック率が高い広告をHTMLの最初に記述することでAdsenseの収益アップを図る | ぼくらのアドセンスブログ_
広告単価は上にあるモノが高い
表示位置が高いモノほど目に入るし、広告単価も高いので、収益性が上がるという寸法になってます。
上に書いたよく見る収益性の高そうな広告レイアウトがどうして収益性が高いのかの理由は、これがすべてです。
しかしながら
タイトル直下のAdSenseを外してサイト評価を上げる | アフィリエイト野郎_
もしあなたが収益性よりも、集客性、ファンになってもらうことに意識をむけるのならば、見やすいレイアウト、見やすいブログレイアウトを心がける必要があるかも知れません。
僕の場合はこの広告の配置と、ブログデザインの親和性を高めるために
レクタングル中300px 250px以外のサイズの広告もブログデザインには率先して組み込んでいく必要があるなぁと思っています。
まとめ
ブログ運営をしていく中で、広告で収益化を目指すことを志す方もいると思いますが、今自分が組んでいるブログの横幅の中でのみあれこれ仕様とすると、無理が出たり、上に書いているようにファーストビューでの広告の目立ち度や、広告の浮き具合、フィットしない感じに問題を感じることがあるかも知れません。
もちろん広告のレイアウトだけでなく、ブログやサイトを作るときに、960pxの呪縛を突破すれば、もう少し自由にやりたいことが出来るようになるかも知れませんね。
面白いサイズや、面白いレイアウトっていうだけで、僕は「おっ！」と思います。なるほどこう来たかぁ！と。
使いやすいこと、見やすいことに意識をおいていろいろチャレンジしてみると、もっと自分のブログやサイトが好きになるかも知れません。この辺あれこれするだけでご飯が3杯はいける僕ですからね。
こういう考えもあるよと、参考になれば幸いです、はい。
文：シンタロヲフレッシュ
一緒に読んで欲しい記事
