← Posts

縦書きWebの勉強会に参加してきました

2026-04-17
参加ログ
Views (30d)
--PV
Word Count
7,911chars
Reading Time
16min
Published
32days ago

個人的な趣味として、デザインに直接関係なさそうな勉強会にも参加するようにしています。
今回はその一環で参加した、縦書きWebについての勉強会で聞いた内容をまとめます。
東アジアの縦書き文化、Mastodonの縦書き実装、縦書きWebを身近にする技術、という構成。備忘録として書き残しておく。

イベント概要#

connpassの説明を引用して紹介します。

今の Web における縦書きは、どこまできているのか、何が足りてないのか。
我々日本に生まれ、縦書きの教科書と原稿用紙で読み書きを習った Web エンジニアは、そこにどう貢献ができるのか。
現状の把握と今後の展望について、確認する会を小さくやります。
#縦書き_study - connpass

発表者と内容は以下の通り。1,2個目が同じ人ですがミスではありません。

冒頭でberlysiaさんから「縦書きWebの現在地概略」として導入があり、そのあと上記3本の発表が続く流れでした。

@itoh_shimon: Mastodonにおける縦書きの諸課題#

300文字概要#

EPUB3での縦書き対応の歴史から入り、Mastodonに縦書きを後付けで入れるうえで必要だった作業の報告。CSSでwriting-modeを指定すれば済む話ではなく、CSSの外側に問題が広がっていく、というのが発表の芯になっていた。投稿の折りたたみ判定に使っているelement.clientHeightが縦書きでは意味合いが変わるため幅の確認が必要になった話、横書き親要素の中に縦書き子要素を置いたときに文頭が浮いてしまう話、方向性を持つ絵文字や画像、顔文字やAAなど書字方向が変わると意味まで壊れる要素の話、東アジア以外の開発者コミュニティへの説明と保守体制の担保まで、階層を順に追っていく内容だった。保守担保としてStorybookでビジュアルレグレッションテストを導入している話も紹介されていた。

感想#

私も昔mastodonを使っていたので興味深かった。

特に面白かったのは、開発を進める上で考えないといけなかったところとして紹介されていた、アジア以外の人に縦書きを理解してもらうことが必要なところ。だよね〜って感じ。

あとは書字方向による意味の変化（👈とか↑とか矢印とか）の話も良かった。UIに発想を広げると、ボタンにつけがちなchevronアイコンも影響を受けそう。単純に方向を切り替えられるように作っておかないといけないし、名称に~right,~leftとかつけちゃいがちだけどその辺も変わってくるのかもな〜と考えながら聞いていた。

横書きと縦書きの両方に対応したサービスを作るとしたら、

  • コンテナの書字方向をどう決めるか（言語検出、ユーザー指定、投稿時ヒント）
  • 方向性を持つアセットを対応させるか
  • ナビゲーションの意味を言語ロケールに従わせるか書字方向に従わせるか

なんてことも考えないといけなくなりそうだ。

これに伴って視線の動きとかもややこしくなる。本文が左から右に改行される縦書きだった場合、ボタンの位置はどこになるのか。ほかのセッションでも話があったりしたが、この辺りの標準的なセオリーは確立されていないところがあるので、やったもんがちなところがあるそう。

デザイナーはどうしてんの？？？

セッション中でも触れられていたが、日本国内で参考になるとしたらpixivさんが筆頭だろうか。

pixivが2015年に同じ問題を解いている。pixivは全半角句読点や括弧などを自動変換する「おせっかい機能」を実装。
pixiv小説縦書き機能 開発の裏側。

追加で知りたかったこと：writing-modeってなにさ#

縦書きの実現方法としてこの勉強会でもよく触れられていたwriting-modeを調べてみる。正直に言って、私はこの勉強会に参加するまでwriting-modeの存在を知らなかった。

writing-mode - MDN Web Docsによるとwriting-modeはテキストの行方向を横書きにするか縦書きにするかと、ブロックが積み重なる方向を決めるCSSプロパティ。取りうる値は以下の5つ。

値説明
horizontal-tb初期値。横書き。ブロックは上から下に積まれる
vertical-rl縦書き。ブロックは右から左に積まれる。日本語や繁体字の伝統的な縦書きに対応
vertical-lr縦書き。ブロックは左から右に積まれる。モンゴル文字向けに予約された値
sideways-rl全文字を右向きに横倒しにして縦に並べる。英語のラベルなどを縦に回転させる装飾用途
sideways-lr全文字を左向きに横倒しにして縦に並べる。同じく装飾用途

sideways-*は装飾目的で文字を横倒しにするためのもので、本格的な縦書きというより見出しを縦向きに置くときの道具。文字の向きを細かく制御するにはtext-orientation（mixed・upright・sideways）を併用するっぽい。

writing-modeでやっていることは、あくまで文字の並べ方を回転させること。文章を変えてくれたりはしないので、方向性を持つ絵文字、矢印アイコン、顔文字・AA、「右が未来／左が過去」のようなUIの表示位置を決める理屈は破綻する。

追加で知りたかったこと：書字方向と視線の流れ#

UIに限らずデザインを考える上での普遍的な法則として「人間はZ/N/F型に視線を動かす。それを考慮して情報を配置しろ」みたいにいわれることがある。

Z型は開始点が左上→右上→左下→右下となる動き、N型は日本語の縦書きのように右上→右下→左上→左下の順に視線が動くというものだ。F型というのはまた別の話で、内容をあまり読まず斜めにざっと流し見するときの視線の動きだ。

個人的には、これらのパターンは書字方向に由来したものだと理解していた。仮にそうであるなら、書字方向が変われば視線の流れも変わるのでは？と疑問を持った。アラビア語やヘブライ語のようなRTLの言語圏では右上→左上→右下→左下に流れる「逆Z型」、モンゴル語の縦書きが身近な人なら左上→左下→右上→右下となる「逆N型」になりそうなものだ。

調べてみると、実際に逆転する例が報告されていた。

我々が最近行った視線追跡調査では、アラビア語のような右から左に読む言語では、人々は反転したF字型のパターンで読むことが明らかになった（これは我々が予測していたものの、この調査以前には確認されていなかった）。
F-Shaped Pattern of Reading on the Web: Misunderstood, But Still Relevant (Even on Mobile) - NN/G

あまりちゃんと読んでいないが、長く読んでいた言語によって視線の動きにバイアスがあることを示す博士論文も見つけた。

~~読み書きの際に個人の目と手が特定の方向に動く年数は、読み書きの領域外の事柄にいくつかの影響を及ぼす可能性がある。(雑日本語訳)
An Eye Tracking Study to Investigate the Influence of Language and Text Direction on Multimedia

所持方向は確かに影響を与えるようだ。ただ、日本語でも同じように結局レイアウトなどで視線を誘導することが可能なので、絶対的なものというわけではなさそう。

スッキリ。

@itoh_shimon: 中国語、韓国語、モンゴル語の縦書き#

300文字概要#

CJK+モンゴル語の縦書き事情を概観する発表。中国語は繁体字圏で縦横併用、簡体字圏は横書きが原則（ただし洒落た印象で縦書きにする書籍も少しある）、韓国語はホン・ミンヒさんの国漢文混用体の例を起点に、30〜40年前までは縦書きも使われたが現在はほぼ横書き、という整理から始まった。モンゴル語は歴史的に複数の文字が試され、伝統的に根付いたのが左縦書きのモンゴル文字で、現代は主にキリル文字が使われつつ、書道・記念碑・お酒のラベルなど文化的な場面でモンゴル文字が残っていること、直近は義務教育への組み込みや利用頻度を増やす法令など再導入の動きがあることが紹介された。内モンゴル自治区のSNS Bainuがモンゴル文字に全面対応している実例、おまけとしてベトナム語の縦書き事情（伝統的には漢字とチュノムの右縦書き、現代はラテン文字中心）も触れられていた。

感想#

縦書きって東アジアは漢字を使う国とあと数国くらいだろと思っていたので、その辺の解像度が上がりましたね。

日本語でもそうですが、縦書き、横書きオンリーの国はないというのが学び。

国によっては政策も絡むので生物。まめなキャッチアップが必要と知ることができて良かったです。勉強になりました。

今回のセッションでは直接関係ありませんが、質疑や#縦書きstudyの投稿では始終モンゴル語関係の話題が盛り上がってましたね。楽しかった。

@berlysia: 縦書きWebを身近なものにするために#

300文字概要#

縦書きと横書きは二択ではなくグラデーションだ、という整理から入り、縦書きを素朴にWebに持ち込むと横スクロールになって既存のデバイスやデザイン資産と乖離することに言及した。代替策としてCSS Multi-column Layoutで縦書きを縦スクロールに乗せる戦略、横スクロールを扱うときの入力デバイス不和と方向変換テクニックが紹介された。「仕様は最低限ある、面倒だけどできる。足りないのは当事者」という普及論で締められ、writing-modeやMulti-column、Logical Propertiesなどが「遊び道具」として渡される構成になっていた。

感想#

技術的な課題を整理するところから始まった発表ですが、技術面の課題以上に「縦書きWebのイメージがない→コンテンツが生まれない→開発資産が蓄積されない」という循環を断つことが必要だ、と語られていました。

今必要なのは縦書きを使って遊ぶこと。
自分の文章で、自分のデザインで使ったら面白いか、新しいことができるか。当事者として困る人を増やしたい。アイデアが生まれるには探索が必要だ。縦書きアクティブユーザーを増やしたい。

そこから遊び道具を渡してくれる展開は良かったですね。遊んでみよ。

  • CSS Writing Modes
    • writing-mode
    • text-orientation
  • CSS Multi-column Layout
    • 「縦書き」らしいことは大抵できる
  • 縦スクロールする縦書き
  • 横スクロールを扱いやすくする
    • 方向変換テクニック
  • フォントの向き
    • 縦書きHTMLにおける文字の向きはどのように定まるか
    • 縦横を切替・混合するなら
  • CSS Logical Properties And Values

話題に出たサイト・ツール リスト#

会場で言及された具体的なサイト・ツール群。後日確認用のメモ。

縦書きWebの実例#

  • 西尾維新公式サイト ─ 現在は見られず。Internet Archive経由で確認する必要あり。
  • 縦書きWeb普及委員会 ─ 総務省主導で始まった縦書き推進プロジェクト。CSS Writing Modes仕様解説を公開。
  • 伝統工芸系サイト全般 ─ 縦書きが採用されているケースが多い。具体的サイト名は会場で特定されず。
  • blog.berlysia.net ─ 発表者のブログ。マルチカラム縦書きの実装例。
  • Hollo ─ ホン・ミンヒ氏の単一ユーザーActivityPubサーバー。国漢文混用体対応。
  • Bainu ─ 中国内モンゴル自治区のSNS。全面モンゴル文字対応。

縦書きエディタ・執筆ツール#

  • Nola ─ ブラウザで動く縦書き小説執筆エディタ。
  • 一太郎 ─ ジャストシステムのワープロ。日本語組版に強い。
  • 脚本家制作のエディタ ─ 助監督・脚本家以外は無償利用可という条件のもの。名称は会場で特定されず（続編スクリプトエディタやO’s Editorなどが候補か）。
  • Kingsoft Office ─ モンゴル文字の縦書き対応があるとの言及。

仕様・標準文書#

発表者関連記事・資料#

書籍#

  • 『EPUB戦記』小林龍生 ─ EPUB3縦書き対応をめぐるW3C・IDPFでの交渉記録。
  • 『横書き登場 - 日本語表記の近代』屋名池誠 ─ berlysia資料で引用。日本語横書きの歴史書。

おわりに#

書字方向は技術だけの話ではなくて、文字の歴史、政治、表現の次元、全部が絡んでいる題材だった。縦書きWebはまだまだ成長途中なんだなと知れたのも良かった。

自分も個人ブログに縦書きに関係した機能を追加してみるかどうかちょっと悩んでいる。

このブログが誰かの参考になれば幸いです。終わり。