【セッションタイトル】
ふりがな付きWebコンテンツのベストプラクティスを探す旅

アルファサード株式会社の野田 純生と申します。よろしくお願いします。「ふりがな付きWebコンテンツのベストプラクティスを探す旅 2023年版」ということでお話をさせていただきます。

まず、ルビとふりがなにまつわる雑学を二つほどお話します。
ルビとは平安時代の初期から使われている。漢文で一、二点とかレ点とかふりがなとか覚えていますか？もともと宝石のルビーが語源になっています。活字の大きさがルビーと呼ばれていたことからつけられました。

戦前は新聞などにも総ルビといってふりがながふってあったんですが「路傍の石」とかで有名な山本有三さんが、ふりがな廃止論を1939年に言われました。
誰もが読める文章を最初から書けというような主旨でふりがな廃止論というのもありました。1946年に当用漢字表、現在は常用漢字ですが、この表の漢字で書き表せない言葉は別の言葉に変えるとかかな書きにして、
ふりがなは原則として使わないというようなことが言われまして、この影響が大きいんです。この時まではふりがなは非常に一般的だったんです。この時に漢字の数を絞る代わりに、ふりがなは使わないという方針が出されました。

ふりがなはいらないのか？という話ですが、これはNHKのニュースサイトに載っている事例です。「試験問題にルビ？学習障害に合理的配慮広がる」ということで、学習障害のある生徒に対して合理的配慮として試験問題にふりがなを振った事例が載っています。

ふりがなは先ほどの例ですけど、学習障害者への情報保障。
常用漢字や当用漢字というのは結局数字を絞った代わりに約2,000文字くらいで教育とか学習を前提にしているということです。

しかし、日本に住む外国人が増加している背景があります。あと、子どもにとってのふりがなですね。実際に2,000字習うのは中学三年間を終えた後です。
これはちょっと前に話題になりましたけど未曾有を「みぞゆう」とか読む大臣がいたりすると困るので夜遅くまで国会の答弁やQ＆Aの原稿にはふりがなをふってるらしいという話を僕は聞いたことがあります。

外国人でいうとJLPTのN2、つまり五段階の上から二番目で1,000字くらいなのでやっと半分ですね。N4では300字ぐらいの漢字をマスターしています。小学校卒業時点では1,000字なので、大体半分ですね。
だから公用文とか新聞は基本的にはJLPTのN2とか小学校卒業したての人は半分わからない漢字が、そのまま載せられているということになります。

ここからWebとルビのお話にうつります。
ご存知の通りrubyというタグがありまして、rt要素の中にふりがなになるテキストをふるとルビがふられます。これは各ブラウザでそのままふりがなを振ったものを並べているんですけど、そろわないんですね。
特にFireFoxだと距離が割と空いていて。
その他のブラウザだとちょっと近すぎるっていうようなイメージがあります。

まずルビをデザインするときは親文字とルビの距離とか行間を調整します。デフォルトではちょっと近いですね。

それからモノルビと熟語ルビとグループルビというどの単位にルビをふるかですね。この左の例で言うと「多文化」と「共生」にルビをふってるんですけど「共」と「生」の字がまるみのせいでちょっと空きが出て、
右側の多文化共生にふっているんですよね。左の方がどの漢字をどう読むかを学ぶのにはいいんでしょうけど、デザイン的には右の方が読みやすかったりします。

これをやり過ぎると、この福岡出入国在留管理局という長い単位でふりがなを振ると
ふりがなが二行になってしまって、余計に見にくいみたいなことになる。

それからフォーカスリングがガタついて気持ち悪いという例で、ふりがなをふることによって、こんな感じでガタつくこともあります。

読みやすく美しくルビをデザインしたいということで、当社で運営している「やさにちウォッチ」というメディアのふりがなのデザインです。親文字との距離を適度にあけるとかルビの色を変える、区切りがわかりやすいように。
あと標準より少し大きめで、行間広め、ふりがなを消せるようにしてあります。
逆にディスレクシアの人はルビがあることで読みにくいケースもあるので、できるだけ離したり、色を変えたり、消すことができたりという選択肢を持たせるようにしています。

問題はここからなんですが、やさにちウォッチを公開したときに検索エンジンの検索結果を見るとこんな感じに

講座こうざのなまえは災害さいがい時じに役立つやくだつやさしい日本語にほんごです


みたいになってて。検索への影響は誰もわからない訳なんですけど、ちょっとやっぱり二の足踏むですね。こんな感じでインデックスされてるんじゃないかということで。

それからコマンド問題っていってブラウザ内のテキスト検索で引っかからなくなる。
これはブラウザによるんですけど、CSSでふりがな消してもだめです。

SafariとVoiceoverで音声読み上げをした時なんですけど、スクリーンリーダーは重複して読み上げるので総ルビですべてにルビをふっているコンテンツはかなり聞きづらい。

それからFireFoxとVoiceOverでは読み上げの順番が、ルビ全部読んで下の行を読んでみたいな、ちょっと変な読み上げ方になる。
スタイルシートでルビを消したらうまく行くかなと思ってやってみても、実は読み飛ばされたり、段落読みをVoiceOverキー＋Pでやると途中で止まってしまう事象があります。あんまり相性がよくない。

解決した事例として今日ご紹介させていただくのが、このウェブサイトです。
「東京都多文化共生ポータルサイト」のウェブサイトで東京で生活する外国人や支援者に向け、さまざまな情報を発信しているウェブサイトです。これが2023年3月末にリニューアルでお手伝いをさせていただきました。
全ての日本語コンテンツに、全てふりがながついています。日本語、英語以外に関してはAI多言語機械翻訳を導入しています。このサイトは、ふりがなのサイズを少し大きめにしてます。
60%。行間と親文字の距離を調整している。平仮名を消したり付けたりするボタンを付けてます。あとフォーカスリングのガタツキ問題を改善するような工夫をしています。
わかち書きは手動でやってるんですけど、ルビは基本的に自動でつくような仕組みにしています。一部を除き、基本的にって書いてあるのは
意図しないルビが付けられる部分だけエディタで編集したりもしくは辞書に登録できるような仕組みを、これは弊社のCMSの管理画面ですけど、そういう形にしています

HTMLに直接ルビをマークアップしないようにしました。これによってスムーズに読み上げをして検索フレンドリーなコンテンツになっています。
実際にはテキストノードに対してルビをふったものをジェイソン形式でファイルに埋め込んでいて、それをジャバスクリプトで置き換える形にしています。ふりがな消した状態で読み上げすると非常にスムーズに読み上げられます。
このへんは弊社のPowerCMSＸで自動化をしている事例になります。

最後にアルファサード株式会社では人材募集しています。フルリモートワークを可能にしています。それから日本語が苦手な人にはやさしい日本語で対応します。ということでちょっと最後に宣伝だけさせていただきます。

この2023年版と最初に謳ったのは、ブラウザとか標準化とかこれからの改善を期待してということで、こういうノウハウはもう数年後にはいらなくなっていることを願ってということで締めさせていただきます。
以上となります。