英語圏のメディアを見ていた時に「記事の幅」について思ったことがあったので、まとめておく。
記事幅の狭いメディアを見つけた
「vpn best」というキーワードで上位サイトを眺めていたら、こちらのサイト（The best VPN service in 2023）が気になった。
PCで見ていたのだが、ページが表示されて一番最初に思ったのが「記事幅が狭いな」ということ。
調べてみると600pxだった。日本語で運営されているメディアの記事幅（PC）は一般的にサイドバーありの場合で750px〜800px、ワンカラムだと900px前後が主流なので、かなり狭めだといえる。
しかし、最初は違和感があったが、スクロールして内容を見ていると「読みやすい」ことに気付いた。
記事がPCいっぱいに広がっているとインパクトはあるのだが、全て読むためには目線や首を左右に動かす必要がある。
しかし、記事幅が広いと顔と目線を固定して読むことができる。実際に600pxはだいたい顔の幅くらいなので、記事の端から端までが自然と視界に入る幅なのだろう。読んでいて楽だなという感覚を感じた。
目線や首の移動など大したことないと思うかもしれないが、意外にストレスに感じることに気付いた。
また、最近はスマホでのインターネットの閲覧の機会が増えているため、狭いカラムで縦にページをスクロールして見るという行動に慣れていたというのも1つの要因かもしれない。
カラム幅の調整でユーザービリティを改善
最近ロングコンテンツのユーザービリティ低下について考えていたので、PCの場合はカラムの幅を600px前後に狭くするというのは1つ取り入れてみても良いかもしれないと思った。
ユーザービリティの低下を抑えるために記事内リンクの設置や記事の上部に追従する目次など＋αの施策を考えてがちだが、カラムを狭くするという簡単な方法でユーザーのストレスを減らせるならコスパの良い施策だと思う。
適切なカラム幅は？
ちなみに、同じ「vpn best」でヒットしたこちらのサイト（9 Best VPN Services in 2023 — Our Experts Tested 300+ VPNs）は800px程度ある。特別UI/UXに問題のあるサイトではないのだが、改めて目線や首の左右の移動という観点で見てみると、記事を読むためには目線や顔を動かす必要があることに気付く。
一般的には狭めの700pxでもやや移動が発生する。しかし、スマホに近い500pxや450pxなど600px以下はさすがに狭すぎるという印象が強かった。目線や顔を動かさないで楽に読めるという点では600px程度が適切かもしれない。
カラム幅を狭くする注意点
ただし、カラムを狭くすると1列に収まる文字数が減るためページが縦に長くなる。そのため、カラム幅に合わせた文字サイズや行間の調整などは必要となるだろう。
さらに、カラム幅を狭くすると余白が多くなったり、画像のサイズも小さくなったりするため、そのあたりがマイナスにならないかは検証する必要がありそう。
以上、カラム幅とユーザービリティについて新しい発見があったので、まとめてみた。
最近はワンカラムで900px程度と広めに設定していたサイトが多かったので、これを機にカラム幅を見直してみようと思う。