新・元地方の中規模印刷会社で苦悩するWebデザイナー改めWebディレクターの日記

自由な20代、窮屈な30代を経て、遂に40代になっちまったWebディレクター&パソコン講師の覚書と思う言(こと)。略称【ちほちゅう】

*

Webデザインのテンプレートは60px×12カラムで横幅960px

   

  • このエントリーをはてなブックマークに追加

1年以上前の記事です。内容が古い可能性があります。

これはWebデザイナーの常識なのでしょうか?
実は、最近知りました。
Webデザイナーやめて5年目になるのですがすっかりデザインの常識が抜け落ちちゃってるみたいです。

スポンサーリンク
 

某所(というかツイッターなのですが)でWebデザインのテンプレートは横幅960pxにするとよいと聞きました。
具体的には以下のように60pxのカラムが20pxのマージンを挟んで12個並ぶ12カラムのスタイルです。
左右の外側に10pxづつのマージンも発生します。
Webデザインレイアウトグリッド

この場合、カラム数によって横幅が何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)対応にしようと企んでいるため。
一度テンプレートいじると途中で変更するの大変じゃないですか。
そのために下地をしっかりつくっておこうとこういうわけです。

 - デザイン, 覚え書き

アドセンス広告メイン

Message

メールアドレスが公開されることはありません。

  関連記事

待ってたサイトが遂に出た!無料画像素材の検索エンジン「タダピク」

1年以上前の記事です。内容が古い可能性があります。最近はあまりそういうサイトを見 …

最近PVが伸びないのはGunosy(グノシー)対策してないから? Gunosy(グノシー)にブログを掲載させるコツ

1年以上前の記事です。内容が古い可能性があります。最近、PVが頭打ち。それどころ …

Instagram(インスタグラム)でミニチュア風写真が撮れた

1年以上前の記事です。内容が古い可能性があります。一時期流行っていたミニチュア風 …

GREE(グリー)に入会する方法【スマートフォン編】

1年以上前の記事です。内容が古い可能性があります。退会する方法だけ書いてるのもな …

猫に与えちゃ(食べさせては)いけないもの【ペロ追悼企画】

1年以上前の記事です。内容が古い可能性があります。先日、一番最初に飼い始めたうち …

CMSで使うHTML内のリンクは「絶対パス」でも「相対パス」でもなく「サイトルート相対パス」がベスト【WordPress】

1年以上前の記事です。内容が古い可能性があります。WordPressはじめ、CM …

海外で携帯サイトをやる人は注意

1年以上前の記事です。内容が古い可能性があります。海外での携帯サイトサーフィン( …

最もシンプルなオリジナルのリセットCSSを考えてみた【Webデザイン】

1年以上前の記事です。内容が古い可能性があります。そろそろHTML5が正式に勧告 …

みかんの早剥き動画。まずは半分に割る【和歌山剥き】

1年以上前の記事です。内容が古い可能性があります。冬はこたつにみかんです。 うち …

立ち方にも意味がある。謙虚な立ち方、威圧的な立ち方

1年以上前の記事です。内容が古い可能性があります。これ、意識しておくといろいろ役 …

血液型オヤジ