日本で一番美しい自動生成OGPを作った（と、本気で思っている）

こんにちは、noteのCDO（Chief Design Officer）の宇野です。

先日公開した「note質問箱」のOGP画像に、1デザイナーとして、こだわれるだけこだわってみました。

先に言っておくと、これは「すごいものを作りました」という自慢話ではありません。手で一文字ずつ詰めた組版と比べたら、まだまだまだまだ、足元にも及ばない。

でも、機械的に・自動で・どんな文章が来ても、ここまではやれる。その「ここまで」を、現時点でかなり遠くまで押し込めたんじゃないか。ぶっちゃけ、いま日本で一番きれいに組まれた自動生成OGPなんじゃないか、と本気で思っています。

なので、その話を書きます。

こういう組版は、ずっと「見送られてきた」

OGPを自動生成する機能自体は、別に珍しくありません。noteにも昔からあったし、いろんなサービスに当たり前についています。

ただ、ユーザーが何を書くか、こちらには予測できない。短い質問もあれば、改行したくなるほど長い質問もある。固有名詞も、記号も、英数字も混ざる。そのすべてに対して破綻しない文字組みをしようとすると、考えることが一気に増えます。

そして正直に言うと、その面倒くささに対して、「実装の工数」と「デザイナーの小さなこだわり」が、ずっと見合ってこなかった。

「ここの文字詰め、もうちょっとどうにかしたいんですよね」 「……それ、何日かかります？」

このやり取りの先で、たいていデザイナーのこだわりは、そっと見送られてきたわけです。優先順位の問題として、それはまったく正しい判断でした。

何が変わったのか

変わったのは、AIで実装ができるようになったことです。

今回のOGPは、next/og という、ReactのコンポーネントとしてレイアウトをそのままHTMLのように書いて画像化できる仕組みで作っています。

https://nextjs.org/docs/app/api-reference/functions/image-response

新しい環境・新しいフレームワークだったこともあって、僕は1デザイナーとして、組版のロジックそのものに手を突っ込めました。

ただ、誤解されたくないのですが、僕がコードをガリガリ書いたわけではないんですよね。やったのは、もっとデザイナーらしい仕事でした。

「こういうときは、こう組むのが自然だよね」 「この文字とこの文字が並んだら、ほんの少しだけ詰めてほしい」 「助詞だけが行末に取り残されるのは、なんか気持ち悪い」

——そういう、デザイナーが頭の中だけで処理している暗黙のルールを、一つずつ言語化して、覚え込ませていく。その感覚で、OGPの組版ロジックができあがっていきました。

道具に「自分の美意識」を教え込む作業。これはもう、立派にデザインの仕事だと思っています。

どこに、どうこだわったのか

具体的に、何を仕込んだのか。いくつか紹介させてください。

文字の「幅」で考える。 日本語は文字種によって見た目の幅がぜんぜん違います。全角の漢字と、半角の英数字と、句読点とでは、占める幅がまるでちがう。だから「何文字か」ではなく、文字種ごとに重みをつけた「幅の合計」で、収まるかどうかを判定するようにしました。

サイズは、潔く諦めながら決める。 短い質問は大きく、長い質問は小さく。フォントサイズを何段階か用意して、大きいほうから順に「組んでみて、見切れたり行バランスが崩れたら一段下げる」。合格した瞬間に確定して、それ以上は探さない。延々と最適解を探させると保守が破綻するので、ここは潔さが大事です。

改行は、AIの判断を「直してあげる」。 日本語の改行位置は、Googleの BudouX という分かち書きエンジンにお願いしています。

ただ、そのまま使うと、たまに日本語として不自然な切れ方をするんですよね。引用符の途中で割れたり、語尾だけ取り残されたり。なので、AIにたくさんのパターンを出させてうまくいかないケースを拾い、補正の辞書を足していく、ということをしています。エンジンの知見は活かしつつ、明らかに変なところだけ、そっと直す。

一文字だけ、行に取り残さない。 組版用語で「孤立行」「寡婦行」と呼ぶのですが、先頭行や末尾行に文字が1〜2個だけ寂しく残るのって、すごく見栄えが悪い。あれを検知して、前後の行との結合を試みます。

省略の「…」にも、こだわる。 どうしても入りきらないときは末尾を「…」で省略するのですが、ここで「noteを…」のように助詞だけ残ると、すごく雑に切られた印象になる。なので、助詞の前が漢字や英数字なら助詞ごと削る、かなで終わるなら助詞を残す、という細かい判断を入れています。

そして、文字を「詰める」。 ここはデザイナーなら、ニヤッとしてもらえるところかもしれません。たとえば「デザイン」ってカタカナで打つと、文字と文字の間が妙に空いて見える。「ザ」と「イ」のあいだ、もうちょっと詰めたくなりませんか。ああいうのを、特定の文字ペアごとに、ほんのわずかに詰めていきます。

で、ここが今回いちばん「今更だけど面白い」ところで——。

本来こういうカーニングは、いまどきフォント自身がペアの詰め量データを持っていて、CSSでわりときれいに効かせられます。ところが今回の next/og（内部で Satori というエンジンが動いています）の制約上、そのカーニングデータを参照できないんですよね。

なので、めちゃくちゃ力技で、「この文字とこの文字が並んだら、これだけ詰める」というペアの辞書を自前で持たせました。

この発想、実は弊社CXOの深津さんが14年前に作っていた、HTML文字詰めライブラリ「FLAutoKerning.js」とまったく同じなんです。

普通のWebサイトだと、ユーザーがどんなフォントで見るか分からないから、こういうペア辞書はちょっと使いにくい。でも今回は画像生成で、フォントを Noto Sans に固定しているので、ある程度の精度を出せる。画像生成だからこそ、逆にこだわりやすかった領域でした。14年前の力技の思想が、AI時代の画像生成でそのまま蘇る。なかなか面白いですよね。

約物は、フォントに任せる。 ついでに言うと、句読点や括弧（約物）の処理は、これに強い YakuHanJP というフォントに任せています。鉤括弧などの全角アキを半角に詰めてくれるフォントで、これを敷くだけで文字組みの間延びがかなり解消されます。

カーニング処理を入れるのが大変な場合は、最低限これだけでもやっておくと全然違います！！

なぜ、誰も気にしないところにこだわるのか

ここがいちばん書きたかったところです。

OGPの組版なんて、良し悪しをほとんどの人は意識しません。でもこれ、裏を返すと「悪くても意識されない」ということなんです。

そもそも、本や小説の改行位置を思い出してみてください。あれは単語単位できれいに割ったりはしていません。むしろそれが定石で、下手に単語で揃えると、長い文章はかえって読みにくくなる。だからnoteの本文でも、そういうことはやっていません。

でも、OGPは話が別です。

タイムラインに流れてくるOGPって、0.1秒単位で「認識」が進む世界なんですよね。じっくり読もうとすれば、どんな組み方でも文字は読める。でも、読もうと思っていないのに、スッと頭に入ってくる——その差がすごく大事だと思っています。

ぶっちゃけ、これはCTRは上がります。まあ、こういう現象はきれいにABテストできないので、確かめづらいんですけどね。

そしてもう一つ。OGPに出る言葉は、クリエイターが書いた質問や回答、つまり「作品」です。だから、一文字でも多く表示したい。でも、字数を詰めた結果、雑に切れて伝わらなくなるのも避けたい。この「多く出す」と「ちゃんと伝わる」の両立を、最後まで諦めたくなかった。

これは「3日かけた話」じゃなくて、「1日でできた話」だ

ここまで読むと、さぞ時間をかけたように見えるかもしれません。

でも、満足いくところまで、ほぼ1日です。しかも僕が実際に手を動かした、いわゆるディレクション作業は、1時間くらい。「ここはこう」「これは違う」と判断を渡していたら、できあがっていました。

これ、すごく象徴的だなと思っていて。

こういう細部の作業は、「やった方がいい」ことを、みんな昔から知っていました。技術的にできそうだということも、分かっていた。でも、コスパが合わなかったんですよね。

「こだわりどころを知っている人」と「実装できる人」が両方そろわないといけない。それが別々の人だと、コミュニケーションのコストだけで割に合わない。さらに言えば、実装そのものにここまで時間をかけるのも、やっぱり合わない。

正直、「これに1週間かけていいですか」と言われたら、僕も判断は迷います。でも、それを1日でできてしまった。これは、やっぱりすごく良かった。

デザイナーが、ここまでこだわっていい時代

こういうところの差を、自分の手でつけられる。これはやっぱり、デザインの力だと思うんですよね。

デザイナーがコードを書く意味って、こういうところにあるんじゃないか、と最近よく思います。そしてそれは、必ずユーザー体験に効いてくる部分です。

魔法のような技術を使ったわけではありません。やったのは、デザイナーが昔から頭の中でやってきた当たり前のことを、ただ言葉にして、道具に教えただけ。深津さんが14年前にやっていたことと、本質は何も変わっていない。ただ、その「当たり前」が、ようやく工数の壁のこちら側に降りてきた。

誰も気にしない0.1秒のために、デザイナーが本気を出していい。そういう時代が、来たんだと思います。

とはいえ、全部を機械的にやっている以上、まだうまくいかないケースも正直あります。そこは随時フィードバックをもらいながら、もっと良いものにしていきたい。

note質問箱のOGP、もしどこかで見かけたら、ちょっとだけ文字組みを眺めてみてください。