このブログをどうデザインしたか

10月の最初の数日です。手元の動画を仕上げながら、SNSでどう振る舞うかも一から考え直しています。このブログは、そんなバタバタの真ん中で生まれました。

ポートフォリオはショーウィンドウのように保っておきたいと思っています。仕事は少なく、いいものだけ、長い説明はなし。ところが仕事をしていると、僕はしょっちゅう何かを調べたり、試したり、ときには途中で投げ出したりしています。その部分は、これまでどこにも置き場がありませんでした。ショーウィンドウに並べればウィンドウが崩れるし、並べなければそのまま消えていく。結局、二つを分けることにしました。

では、読まれるブログとはどんな姿をしているのか。最初に頭に浮かぶものは決まっています。カード型のグリッド……大きなカバー画像……スクロールすると浮かび上がる文章……。正直に言うと、そのどれが読むことの役に立つのか、僕は知りませんでした。だから、そこから始めました。

人は読んでいない、拾い読みしている

Nielsen Norman Groupは何年も視線計測の調査を続けていますが、結果はあまり変わりません。画面の文章を一語ずつ読む人は少数派で、たいていの人は拾い読みしています。¹（僕もそうです。白状しておきます。）いちばん効率のいい拾い読みの型を、彼らは「レイヤーケーキ型」と呼んでいます。目は見出しから見出しへと跳び、気になる節があればその中に入っていきます。²

ここから僕が受け取ったことは単純です。見出しだけを読む人にも、記事が何を言っているのかが伝わらなければいけない。そこで、どの記事にも冒頭に一文の要約を置きました。トップページにも、日付とタイトルと一行の説明しかありません。記事をひとつも開かなくても、僕が何に取り組んでいて、どう考えているのかが見えるようにしたかったのです。

もうひとつ、人によっては違和感があるかもしれない決めごとがあります。ここには「下書き」や「アイデア段階」といったラベルはありません。途中までの調査でも、書くと決めたら完成した文章として書きます。読む人にとって真剣に見えないものを公開する意味が、僕にはわからないからです。

1行の長さはどれくらいがいいか

Baymardがまとめた研究によると、楽に読める1行は50〜75文字です。³ アクセシビリティの基準であるWCAGは、80文字を上限としています。⁴

この数字を自分の目で確かめたくて、読みやすさで知られるブログを14個開き、文字サイズと行間、本文の段の幅をひとつずつ測りました。楽に読めるものは、どれも同じ範囲に収まっていました。Craig Modのサイトは文字が20ピクセルで段の幅が746。Mediumは20と680。Everyは20と736。

逆に、Dan Luuのサイトは反面教師になる例です。広い画面では1行が224文字にまで伸び、行末から次の行頭へ戻るあいだに目が迷子になります。いい文章がよくないページで無駄になってしまう、いちばんわかりやすい形だと僕は思います。

このブログの文字サイズは、パソコンで20ピクセル、スマートフォンで17ピクセルです。行間は文字サイズの1.55倍、本文の段は680ピクセル。トルコ語の本文で測ると、1行に65〜70文字ほどが入ります。ご存じのとおりトルコ語は単語が長いので、英語の文章よりも少し早めに改行されます。それでも推奨の範囲には収まっています。

カードはやめてリストに

ブログのトップページでいちばんよく見かけるのは、カード型のグリッドです。記事ごとに箱がひとつ、箱ごとに画像がひとつ。NN/gによれば、カードは種類の違うコンテンツを並べるのには向いています。でもブログ記事のように似たもの同士を拾い読みするには、リストより探しにくく、場所もとります。⁵ 見た目の問題もあります。どの記事にも画像を用意しなければならなくなると、そのうち内容と関係のない画像を置くようになってしまうんです。

僕はリストを選びました。年ごとにまとめて、各行に日付とタイトルと一文だけ。

ショーウィンドウは暗く、ここは明るく

ポートフォリオは暗い背景で、ここは明るい背景です。理由はNN/gのある知見にあります。通常の視力では、明るい背景のほうが読むときの成績がよく、その差は文字が小さくなるほど大きくなるそうです。⁶ 長い文章を読む場所なら、僕にはそれで十分でした。スマートフォンやパソコンがダークモードなら、サイトも暗い表示で開きます。右上のボタンでいつでも切り替えられます。

置いていないもの、開けておいた扉

ポップアップも、ニュースレターの登録欄も、コメント欄も、広告もありません。Cookieも使っていないので、Cookieの同意バナーもありません。フォントさえ、ほかのサーバーから読み込んでいません。

測ったサイトでは、こうしたものがどれだけ人を疲れさせるかがはっきり見えました。Everyのある記事ページには、固定された層が同時に五つありました。上部のバー、Cookieの帯、登録のポップアップ、そして隅に出る箱が二つ。Substackのある記事では、購読を四回すすめられました。Linearのページは217個の別々のスクリプトを読み込んでいました。そして、そのどれも文章を読みやすくはしていません。

その代わり、開けたままにしてある扉がひとつあります。AIのボットです。検索をするボットも、モデルの学習用にサイトを巡回するボットも、ここには入れます。僕の文章がモデルの学習に使われることが自分のためになるなら、その扉を閉める理由はありません。

なぜ別のアドレスなのか

最初はburakreis.blogのような、まったく別のドメインを考えました。年に20ドル。今のところは払いたくありませんでした。そのあと、Googleではサブドメインにも別のサイト名をつけられると知りました。⁷ ブログはいま、blog.designedbyburak.comにあります。ポートフォリオのメニューには、ここへのリンクを置いていません。ショーウィンドウをすっきりさせておきたいからです。でも、誰が書いているかはここのどのページにも書いてあって、二つのサイトはお互いを知っています。

1行が長すぎる、文字が小さいなど、何か気になるところがあればメールをください。hello@designedbyburak.com

追記：この記事を書きながら、ブログをとても幅の狭い画面でも開いてみたところ、上のメニューがページからはみ出していました。直しました。それにしても、最初のバグがちょうどこの記事を書いている最中に出てきたのは、ちょっと可笑しかったです。