Webデザインのテンプレートは60px×12カラムで横幅960px
1年以上前の記事です。内容が古い可能性があります。
これはWebデザイナーの常識なのでしょうか?
実は、最近知りました。
Webデザイナーやめて5年目になるのですがすっかりデザインの常識が抜け落ちちゃってるみたいです。
某所(というかツイッターなのですが)でWebデザインのテンプレートは横幅960pxにするとよいと聞きました。
具体的には以下のように60pxのカラムが20pxのマージンを挟んで12個並ぶ12カラムのスタイルです。
左右の外側に10pxづつのマージンも発生します。

この場合、カラム数によって横幅が何pxになるのかを代表的なバナーサイズとともに表にしてみまいた。
カラム 数 |
横幅 (px) |
収まる広告サイズ |
1 | 60 | |
2 | 140 | 120×600 (Skyscraper) |
3 | 220 | 160×600 (Wide Skyscraper) |
4 | 300 | 300×250 (Medium Rectangle) |
5 | 380 | |
6 | 460 | |
7 | 540 | 468×60 (Full Banner) |
8 | 620 | |
9 | 700 | |
10 | 780 | 728×90 (Leaderboard) |
11 | 860 | |
12 | 940 |
Pitta(ピッタ)でもオススメバナーサイズとしている「300×250 (Medium Rectangle)」はピタっと収まるようです。
他のサイズは微妙ですが、ま、致し方ないかと。
一部では1カラム54pxでマージンが30pxの12カラム=横幅978pxの方がいいんじゃないかということを言っている人もいるようです。
□ 960 Grid System is Getting Old
これだと、外側のムダなマージンが出ないという利点がありますね。
でも僕は上記理由、及び計算しやすい点から960pxを使っていこうと思います。
ちなみに、何故、今さらこんなネタを扱ったかというと、PLOT-FACTORYをワードプレス(WordPress)対応にしようと企んでいるため。
一度テンプレートいじると途中で変更するの大変じゃないですか。
そのために下地をしっかりつくっておこうとこういうわけです。
アドセンス広告メイン
関連記事
-
-
タコ足配線の恐怖
1年以上前の記事です。内容が古い可能性があります。会社のNAS(簡易データサーバ …
-
-
フォトショップ(Photoshop)でWebデザイン、角丸シェイプを使うときは「ピクセルにスナップ」にチェック!
1年以上前の記事です。内容が古い可能性があります。Webデザイナーとして当然なん …
-
-
Flickr(フリッカー)でALBUMS(アルバム)のスライドショーの埋込みソースを入手する方法
1年以上前の記事です。内容が古い可能性があります。写真共有サイトのFlickr( …
-
-
iPhoneのホームボタンの反応が鈍くなった時の対処法
1年以上前の記事です。内容が古い可能性があります。最近、僕のiPhone(アイフ …
-
-
カラーインクジェットプリンタでモノクロ印刷も考えている人は注意。なんと、黒インクだけじゃ印刷できないのが一般的
1年以上前の記事です。内容が古い可能性があります。この仕様はぶっちゃけ、詐欺じゃ …
-
-
「livedoor Blog(ライブドアブログ)」で「Twitter Cards」対応がめちゃくちゃ簡単になっていた
1年以上前の記事です。内容が古い可能性があります。先日、「Twitter Car …
-
-
ワードプレス(WordPress)でコンテンツをデザインする方法 #wp
1年以上前の記事です。内容が古い可能性があります。トップページができたら引き続き …
-
-
Illustrator、Photoshopが起動しない。「コンピューターにMSVCR100.dll(MSVCR110.dll)が無いためプログラムを開始できません」の対処法
1年以上前の記事です。内容が古い可能性があります。年明け早々、自分のパソコンの「 …
-
-
FFFTPでサイト定義(ホストの設定)をする方法
1年以上前の記事です。内容が古い可能性があります。先日、Dreamweaverで …
-
-
WordPress(ワードプレス)のURL表記をHTML表記にする方法 #wp
1年以上前の記事です。内容が古い可能性があります。牛歩戦術でゆっくりと進んでいる …