シングルカラムとフォントサイズとコンテンツ幅と。

最近見る機会が増えてきた気がするシングルカラム。ディスプレイサイズと本文テキストから、少し考えてみたいと思います。

個人的にも好きなレイアウトですが、色々考えることができます。特に本文テキストと正面から向き合うことになりそうなあたりは悩みどころでしょう。

習慣どうり、今までどうりの設定だけではうまくいかないなら、思い切って変えてみるのもよいと思います。

PCディスプレイサイズとシングルカラム

昨今、ディスプレイの大きさは横に大きくのびているように思います。正方形に近い昔のディスプレイをそのまま大きくした形は多くはないはずですものね。

この横長ディスプレイにブラウザを展開してWEBを閲覧する訳ですが、ディスプレイサイズの拡大に伴ってサイトの横幅も増えています。しかし、本文テキストの読みやすさという点においては、既に横幅の限界は超えているのだと思います。

特にシングルカラムレイアウトではこの問題が顕著に現れるはずです。

テキストの横幅

結論に近いですが、文字を読みやすい行の幅によって、シングルカラムの横幅が決まってしまいます。

一行に何文字が読みやすい、というセオリー的なものはWEBが出来る前から印刷の分野でいわれてきた（少し調べましたが、最初に誰が言い出したのかはわかりませんでした）ものですが、WEBにもいろいろとあるようです。どれが真実なのか？というのは実はあまり意味がありません。とりあえず作った本人が読みやすいと思う文字数にすることが第一歩だと思うからです。

さて、少し横道に逸れましたが話を元に戻します。

PCの横長ディスプレイでシングルカラムを見ると、一行の文字数が多いか横幅が大きいかという印象があります。心理的な問題もあり、左右に余白が空きすぎるからかもしれません。スペースの無駄遣いにも思えて、読みやすさからは遠ざかり横幅を広げてしまうのかもしれません。こうなっては非常に読みにくいサイトになってしまいます。

シングルカラムにする以上、テキストの見栄えに対する意識は最大級の関心事でなければいけません。なぜなら、サイドバーなどの左右の装飾もないのので、本文しか画面にない状態が続くわけですから。

フォントサイズ

個人的には、フォントサイズに関してシングルカラムは良い影響を与えていると思います。または、与えれられると期待しています。

2カラムでも3カラムでもかまいませんが、これらは幅のせめぎ合いでした。必然的に本文テキストを小さくして、一画面の本文表示量を増やそうとしてしまいます。これではフォントサイズを上げるなどもっての他でしょう。

ですが、シングルカラムなら気にする必要はありません。気軽に16pxやそれ以上のサイズを試せますし、実際に導入できるでしょう。文字サイズが大きければPC以外でも閲覧しやすくなるでしょうから、いろいろと良い効果もありそうです。

フォントサイズとテキストの横幅

デザインにもよるのですが、仮に単色の背景色のみにシングルカラムの本文が見える状態だとします。

この場合、14pxと16pxでは見え方に違いがあり、テキストの横幅の許容範囲にも違いが出ます。基本的には、文字が大きい方が全体の横幅はやや広めにできるでしょう。逆に、横幅が狭ければ文字サイズは小さめの方が読みやすいとも思いますが。

実験用にページを作ってみましたので、参考までにご覧くださいませ。フォントサイズを横幅の組み合わせで何となくご理解いただけると思いますので。

[追記 2013.6.10]
下記のリンク先のページに、行間を調整するline-heightと字間を調整するletter-spacingとpタグのmargin-bottomを追加しました。字間調整はあまりしないとは思いますが、せっかくなので追加です。

• シングルカラムのフォントサイズと横幅実験用[別窓]

結び

シングルカラムを採用する際は、フォントサイズとコンテンツ幅の関係にも注意を払うべきでしょう。ちょっとしたことで読みやすくなるはずですから。

なお、読みやすさはユーザーのためだけではありません。仮に自サイトが16pxでアクセスしたユーザーが「読みやすい」と感じれば、14pxの他サイトに移動した際に不満を感じて再訪してもらえる可能性もあります。同じようなことを書いているなら読みやすい方が良いですものね。

ただ、以前も書きましたがテクニックをそのまま取り入れても効果的ではありません。「一行は◯文字が最適」などの情報は、参考にしつつ自分なりのポイントまで搾る作業がかかせないでしょう。

3カラムの可能性

今回の内容をふまえると、3カラムにも今まで以上の可能性が感じられます。単純な話ですが、左右にカラムが存在することで結果的にメインカラムがシングルと同じように見せられますから。

シングルカラム採用による左右の余白を埋めやすいですし、「左右が空きすぎて怖い！」という方にはお勧めできるかもしれません。