ビジネス向けWEBサイトをつくる

ブログのコンテンツ幅を考える

本ページはプロモーションが含まれています

無料ブログテーマ「Cocoon」のデザインを考える際、初期設定のコンテンツ幅が気になりました。

「Cocoon」の初期設定を見てみるとコンテンツ幅は800pxとなっています。

「simplicity2」などは680pxしかありませんでしたので、ずいぶん大きくなりました。

時代の推移と共にブログのコンテンツ幅は大きくなる傾向があります。

スマホでサイトが見られることが多くなっているので、コンテンツ幅はあまり気にしなくていいというのが結論です。

しかし、こだわりを持って見ると、けっこう面白い話題なのかもしれません。

このページでは、私が使用している各ブログのコンテンツ幅を比べ、ブログのコンテンツ幅の決め方を考えてみます。

【PR】「Theme3」では、企業サイトのWordPressテーマに「 ワードプレステーマTCD 」をオススメしています。
WordPressテーマ「SOLARIS」の詳細をTCDのページで見る

レスポンシブ対応
カスタム投稿タイプ「お知らせ」「企業情報」「サービス」「プロジェクト」
高速化設定(絵文字読み込み・コード最適化)
他、機能多数。

ご購入は以下のバナーリンクページの購入ボタンをクリックしてください。

デフォルトのコンテンツ幅を比較

私が使用しているブログテーマのコンテンツ幅を比較してみます。

ここでの「コンテンツ幅」はサイドバーを含まないメイン領域です。

テーマコンテンツ幅変更設定の有無
SANGO712pxなし
JIN:R740px740pxと680pxの選択
STORK19 728pxなし
Arkhe740pxあり
SWELL812pxあり
Cocoon800pxあり

以上のようにまちまちです。

「JIN:R」と「Arkhe」が740pxなのは偶然ではないと思います。

「Twenty Seventeen」も1カラムだと740pxになります。

【PR】「Theme3」では、企業サイトのWordPressテーマに「 ワードプレステーマTCD 」をオススメしています。
WordPressテーマ「SOLARIS」の詳細をTCDのページで見る

レスポンシブ対応
カスタム投稿タイプ「お知らせ」「企業情報」「サービス」「プロジェクト」
高速化設定(絵文字読み込み・コード最適化)
他、機能多数。

ご購入は以下のバナーリンクページの購入ボタンをクリックしてください。

コンテンツ幅740pxとは

「JIN:R」と「Arkhe」のサイドバーを含めた幅サイト幅を比較して見ます。

テーマサイドバー幅サイト幅
JIN:R320px1200px
Arkhe312px1100px

サイドバーやサイト幅は差があります。

そこで、「740px」という幅が意味を持っていると推測できます。

私の考えでは、おそらく画面サイズに基づいていると思います。

スマホはフレキシブルに対応するのが当たり前なので、おそらくPCかタブレットの画面幅由来です。

そこで、「世界中のデスクトップ画面解像度の統計」「世界中のタブレット画面解像度の統計」を調べてみました。

世界中のデスクトップ画面解像度の統計(2022年6月~2023年6月)

順位解像度シェア
11920×108022.93%
21366×76815.28%
31536×86410.36%
41440×9006.8%
51280×7205.38%
6810×7202.98%

出典:デスクトップ画面解像度:statcounter調べ

PCの場合横幅が問題なので「740px」はPC画面の解像度からの由来ではありません。

強いていえばシェア第2位の「1366×768(WXGA)」が関係があるかもしれないということです。

では、タブレットの解像度を見てみましょう。

世界中のタブレット画面解像度の統計(2022年6月〜2023年6月)

順位解像度シェア
1768×102426.93%
2810×10809.3%
3800×12806.74%
41280×8006.69%
5820×11804.76%
6601×9624.05%

出典:タブレット画面解像度:statcounter調べ

タブレットを見るとピンときます。

スマホ対応のレスポンシブデザインを考える際、ブレイクポイント(画面幅でデザインを切り替えるポイント)を設定します。

スマホとスマホ以外(タブレット)を切り替えるブレイクポイントとして採用することが多いのが「768px」です。

このブレイクポイントで余白を付けて表示出来るコンテンツ幅が「740px」というわけです。

推測ですが、間違いないでしょう。

各テーマのブレイクポイントを検証すれば確証が強まるかもしれませんが、ここでは省きます。

コンテンツ幅の考え方だけは、おさえてください。

【PR】「Theme3」では、企業サイトのWordPressテーマに「 ワードプレステーマTCD 」をオススメしています。
WordPressテーマ「SOLARIS」の詳細をTCDのページで見る

レスポンシブ対応
カスタム投稿タイプ「お知らせ」「企業情報」「サービス」「プロジェクト」
高速化設定(絵文字読み込み・コード最適化)
他、機能多数。

ご購入は以下のバナーリンクページの購入ボタンをクリックしてください。

コンテンツ幅728pxとは

「STORK19」のコンテンツ幅は「728px」です。

機能としては、変更することもできません。

この「728px」という幅はいったいどこから来るのでしょうか?

「728px」という幅でピンと来た方もいらっしゃるでしょう。

これは、「リーダーボード」というバナーの横幅です。

「リーダーボード」は「728×90pix」の大きさと定められています。

「STORK19」は「リーダーボード」 がきちんと入る幅で作られているのです。

ちなみにバナーはオンライン広告の業界団体IAB(Interactive Advertising Bureau)によって、国際標準が定められています。

IABガイドライン

IABガイドラインは以下です。

※「リーダーボード」 は、幅・高さ・アスペクト比が太字。

アドユニット名幅 / px高さ / pxアスペクト比
レクタングルとポップアップ
ミディアムレクタングル3002506:5
スクエアポップアップ2502501:1
バーティカルレクタングル2404003:5
ラージレクタングル3362806:5
レクタングル1801506:5
3:1 レクタングル3001003:1
ポップアンダー72030012:5
バナーとボタン
フルバナー4686078:10
ハーフバナー2346039:10
マイクロバー883188:31
ボタン1120904:3
ボタン2120602:1
バーティカルバナー1202401:2
スクエアボタン1251251:1
リーダーボード72890728:90
スカイスクレイパー
ワイドスカイスクレイパー1606001:3.75
スカイスクレイパー1206001:5
ハーフページ3006001:2

出典:「バナー」フリー百科事典 ウィキペディア日本語版(2023年7月30日取得)

また、「STORK19」や「Cocoon」はサイドバーが「ラージレクタングル」のサイズ「336pix」に設定されています。

STORK19 」や「Cocoon」はアフィリエイトを強く意識した設計であることが、分かります。

まとめ

このページで見てきたように、ブログのコンテンツ幅は各ブログテーマの設計思想がよく表れています。

コンテンツ幅やサイト幅を変更出来る機能を搭載したテーマもありますが、変更する際には、バナーや閲覧されるブラウザーのことを考慮して変更しましょう。

時代が変われば設計思想も変化していき、コンテンツ幅やサイト幅も変わっていくでしょう。

長くブログを運営していく上では、「Arkhe」や「SWELL」、「Cocoon」のように、コンテンツ幅が変更出来ると便利だと思います。

【PR】「Theme3」では、企業サイトのWordPressテーマに「 ワードプレステーマTCD 」をオススメしています。
WordPressテーマ「SOLARIS」の詳細をTCDのページで見る

レスポンシブ対応
カスタム投稿タイプ「お知らせ」「企業情報」「サービス」「プロジェクト」
高速化設定(絵文字読み込み・コード最適化)
他、機能多数。

ご購入は以下のバナーリンクページの購入ボタンをクリックしてください。

プロモーション

戦略的WEBサイト構築方法

戦略的WEBサイト構築方法
WEB担当者にオススメ

WEBサイトをビジネス戦略のPDCAサイクルに組み込むための考え方と、サイトを内製化する方法を分かりやすく解説します。

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

twenty − 15 =

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)

ABOUT US
lin記事を書いている人
はじめまして。「lin」です。クリエイティブディレクター兼グラフィックデザイナーとして活動しています。おかげさまで、キャリア25年以上になりました。「Theme3」は、私が企画デザイン事務所スラッシュディーの仕事で得たノウハウを公開します。
※以下は私が活動している企業情報にリンクしています。