ふりがな（ルビ）付きHTMLの作り方

2026.02.11

HTML アクセシビリティ無料ツール

ふりがな付きのWebページを作りたい場面

Webサイトでふりがな（ルビ）が必要になる場面は意外と多くあります。

教育コンテンツ: 子ども向けの学習サイトや日本語学習者向け教材
アクセシビリティ対応: 読みが難しい漢字への配慮（人名・地名・専門用語）
公的機関のサイト: やさしい日本語で書かれた行政情報ページ

HTMLには <ruby> タグというルビ専用の要素が用意されていますが、すべての漢字に手作業でタグを書くのは現実的ではありません。

この記事では、無料ツールでふりがなを自動生成し、HTMLに組み込む方法を具体的な手順で解説します。

HTMLのrubyタグの基本

ふりがなを表示するHTMLの基本構造は以下のとおりです。

<ruby>漢字<rt>かんじ</rt></ruby>

要素	役割
`<ruby>`	ルビの親要素。対象テキストとふりがなをまとめる
`<rt>`	ルビテキスト。ふりがなの内容を記述する
`<rp>`	ルビ非対応ブラウザ向けの括弧（省略可）

<rp> を含めた記述はこうなります。

<ruby>漢字<rp>(</rp><rt>かんじ</rt><rp>)</rp></ruby>

ルビ非対応の環境では「漢字(かんじ)」と表示されるフォールバックが効きます。主要なモダンブラウザ（Chrome、Firefox、Safari、Edge）はすべて <ruby> タグに対応しているため、一般的な用途では <rp> は省略しても問題ありません。

ふりがなジェネレーターで自動生成する

操作手順

ふりがなジェネレーターにアクセスする
テキスト入力欄に日本語の文章を貼り付ける
出力形式を選択する（HTMLルビタグ / 括弧形式 / ひらがなのみ）
変換結果をコピーして、HTMLファイルやCMSのエディタに貼り付ける

形態素解析エンジン（kuromoji.js）がブラウザ内で動作するため、入力テキストがサーバーに送信されることはありません。

3つの出力形式の使い分け

形式	出力例	適した用途
HTMLルビタグ	`<ruby>東京<rt>とうきょう</rt></ruby>`	Webサイト・ブログ記事
括弧形式	東京（とうきょう）	メール、Word文書、プレーンテキスト
ひらがなのみ	とうきょう	読み上げ原稿、音声合成の入力

HTMLルビタグ形式が最も利用頻度が高いでしょう。ブログ記事にルビを追加する場合は、この形式の出力をそのままHTMLエディタに貼り付けられます。

変換結果の確認ポイント

自動変換は完璧ではありません。以下のケースで読み間違いが起きやすいので、出力後に目視確認してください。

ケース	例	よくある誤変換
同音異義語	「生」	なま / いきる / うまれる
人名	「田中」	辞書にある読みは正しいが、珍しい名前は要確認
固有名詞	「渋谷」	一般的な地名は対応済みだが、新しい施設名など
当て字	「大人」	おとな / たいじん

実践: ブログ記事にルビを追加する

WordPressの場合

WordPressのブロックエディタ（Gutenberg）では、「カスタムHTML」ブロックにルビタグ付きのHTMLを直接貼り付けられます。

ふりがなジェネレーターで「HTMLルビタグ」形式に変換
WordPressの投稿編集画面を開く
「+」ボタンから「カスタムHTML」ブロックを追加
変換結果を貼り付ける
「プレビュー」タブでルビの表示を確認する

静的HTML / Next.jsの場合

ルビタグはそのままHTMLに記述できます。Markdownベースのブログでは、HTMLタグがそのまま描画される環境であれば利用可能です。

<p>
  <ruby>東京都<rt>とうきょうと</rt></ruby>
  <ruby>渋谷区<rt>しぶやく</rt></ruby>にオフィスがあります。
</p>

CSSでルビのスタイルを調整する

ルビのデフォルトスタイルはブラウザによって異なります。統一感を出すには以下のCSSが有効です。

ruby {
  ruby-align: center;
}

rt {
  font-size: 0.5em;
  color: #666;
}

font-size: 0.5em でルビの文字サイズを親文字の半分に設定します。色をグレーにすると本文の読みやすさを妨げません。

ふりがなとHTMLエンティティの組み合わせ

ルビタグ内で特殊文字を使う場合は、HTMLエンティティ変換でエスケープ処理が必要です。

例えば、ルビの対象テキストに < や > が含まれる場合:

<!-- NG: ブラウザがタグと誤認する -->
<ruby>A<B<rt>エー・ビー</rt></ruby>

<!-- OK: エンティティに変換 -->
<ruby>A&lt;B<rt>エー・ビー</rt></ruby>

一般的な日本語テキストでこの問題が起きることは稀ですが、技術文書やプログラミング教材では注意が必要です。

アクセシビリティとSEOへの効果

スクリーンリーダーとの関係

<ruby> タグは、主要なスクリーンリーダー（NVDA、VoiceOverなど）でルビテキストが読み上げられます。ただし、読み上げの挙動はスクリーンリーダーの実装によって異なるため、重要な読みについてはタグに加えて括弧表記を併記する方法も検討してください。

SEOへの影響

<ruby> タグ内のテキストは検索エンジンにインデックスされます。ルビを追加すること自体が直接的なランキング要因にはなりませんが、ユーザー体験の向上（読みやすさ、滞在時間）を通じて間接的にSEOに寄与する可能性があります。

まとめ

ふりがな（ルビ）付きHTMLの作り方を紹介しました。

HTMLの <ruby> タグと <rt> タグでルビを表現する
ふりがなジェネレーターで漢字のルビを自動生成する
出力形式は用途に合わせて選択（HTMLルビタグ / 括弧形式 / ひらがなのみ）
変換後は固有名詞や同音異義語を目視確認する
特殊文字が含まれる場合はHTMLエンティティ変換でエスケープする

教育コンテンツやアクセシビリティ改善のために、まずは読みの難しい固有名詞からルビを追加してみてください。