タグ一覧のページのファイル名が日本語

Eleventyでは、タグに日本語を利用できる柔軟さの反面、標準のまま使用すると、タグ一覧ページのURLに日本語のタグ名がそのまま入ってしまいます。

日本語のURLは、BASE64エンコードされる為、昨今のシステム的には問題になる機会は減りましたが、可読性にかけ、一部の検索エンジンでは、省かれる可能性もあります。その為、英語やローマ字での表記が推奨されています。

結論

  • 日本語タグはそのままだとURLに不向き
  • ローマ字（スラッグ）に変換して使うのが実務では必須

なぜ日本語タグを変換するのか？

EleventyではタグをそのままURLに使うことが多いです。

例えば👇

タグ：はじめて → URL：/tags/はじめて/

一見問題なさそうですが…

問題点

  • URLがエンコードされる → /tags/%E3%81%AF%E3%81%98%E3%82%81%E3%81%A6/
  • SNSで見づらい
  • SEO的にも不利になりやすい

実務でのおすすめ構成

  • タグは日本語でOK tags: ["はじめて"]

  • URLはローマ字 /tags/hajimete/

  • 表示は日本語

👉 「表示」と「URL」を分離するのがポイント

よくある落とし穴

  • ❌ そのまま日本語URLにする 見づらい コピペしづらい

  • ❌ 手動でローマ字を書く tags: ["hajimete"]

👉 管理が面倒＆ミスが増える

解決方法

👉 ローマ字に変換する（slug化）

これを実現するには、若干のカスタマイズが必要です。

👉 カスタマイズには、以下の２つの方法をとることが可能です。

前提（２つの方法）

  1. ライブラリ（Wanakanaなど）を使う方法 Wanakana等のツールを導入し、使用する。

  2. 読み替え表などを自作する方法（軽量） 読み替え表などを作成し、使用する。

ライブラリ（Wanakanaなど）を使う方法

一番簡単で実務的なのは、wanakanaを使う方法です。

最初に、サイト用フォルダーにて、Node.js経由で wanakana ツールを導入します。

npm install wanakana

.eleventy.js に、wanakanaを利用して、ローマ字変換用のカスタムフィルター（slugJa）を追加します。

              ：
const wanakana = require("wanakana");
              ：
module.exports = function (eleventyConfig) {
              ：
  eleventyConfig.addFilter("slugJa", function(str) {
    if (!str) return "";

    // ひらがな・カタカナ → ローマ字
    let result = wanakana.toRomaji(str);

    // URL用に整形
    return result
      .toLowerCase()
      .replace(/\s+/g, "-");
  });
              ：
};

テンプレートやページ作成時に、カスタムフィルター（slugJa）を使用します。

---
title: 全タグ一覧
date: 2026-05-15
layout: layout.njk
---

<h1>🔖 {{ title }}</h1>

<ul>
  {% for tag in collections.tagList %}
    <li>
      <a href="/tags/{{ tag | slugJa }}/">#{{ tag }}</a>
      <small>({{ collections[tag].length }} 件)</small>
    </li>
  {% endfor %}
</ul>

変換例

日本語 ローマ字
はじめて hajimete
JavaScript javascript
フロントエンド furontoendo

読み替え表などを自作する方法（軽量）

読み替え表などを作成し、使用する。

Eleventyには、_data フォルダーに定義した JavaScript や JSON のデータを起動時に読み込む機能があります。 読み込まれたデータは、テンプレートや collections からグローバルに参照可能です。

👉 読み替え表などの利用に最適です。

srcディレクトリ配下に _data フォルダーを作成し、作成した _data フォルダー配下に、読み替え表（tagDefine.js）を定義します。

module.exports = {
  "はじめて": {
    yomi: "hajimete"
  },
  "２回目": {
    yomi: "2-kaime"
  },
  "JavaScript": {
    yomi: "javascript"
  },
};

テンプレートやページ作成時に読み替え表（tagDefine）を使用します。

---
title: 全タグ一覧
date: 2026-05-15
layout: layout.njk
---

<h1>🔖 {{ title }}</h1>

<ul>
  {% for tag in collections.tagList %}
    <li>
      <a href="/tags/{{ tagDefine[tag].yomi }}">#{{ tag }}</a>
      <small>({{ collections[tag].length }} 件)</small>
    </li>
  {% endfor %}
</ul>

２つの方法の比較表

では、どちらを使うのが良いのでしょうか？

下記に２つの方法の比較を示します。

観点 ライブラリ（Wanakanaなど）を使う方法 読み替え表などを自作する方法
元データ 日本語タグ（自動変換） 日本語＋slugを手動定義
正確性 △（読み・英語がズレる） ◎（完全に意図通り）
シンプルさ ◎（実装が簡単） △（初期設計が必要）
実務適性 ○（小〜中規模向け） ◎（本番・長期運用向け）

もう一歩踏み込んだ違い

ライブラリ（Wanakanaなど）を使う方法

👉 「楽だけど制御できない」

  • 実装は数行で終わる
  • ただし…
    • 漢字の読みがブレる
    • 英語として不自然
    • URL変更リスクあり

読み替え表などを自作する方法

👉 「手間だけど完全にコントロールできる」

実務での重要ポイント

一番大事な違い

👉 URLが固定されるかどうか

ライブラリ（Wanakanaなど）を使う方法

  • 後から変わる可能性あり
  • SEOに弱い

読み替え表などを自作する方法

  • 完全固定
  • SEOに強い
  • リンク切れ防止

実務の結論

👉 「最初から読み替え表」もしくは、「最初はライブラリ（Wanakanaなど） → 固まったら読み替え表に移行」が最強

規模別おすすめ

小規模・個人ブログ

👉 ライブラリ（Wanakanaなど）を使う方法でもOK

  • スピード重視
  • 記事数が少ない

中〜大規模・長期運用

👉 読み替え表などを自作する方法一択

  • URLは資産
  • 後から変更できない

一言でまとめると

  • ライブラリ（Wanakanaなど）を使う方法 = 自動生成
  • 読み替え表などを自作する方法 = 設計されたURL

まとめ

  • 日本語タグはそのままだとURLに不向き
  • 表示とURLは分けて考える
  • ローマ字変換（slug化）が必要
  • ライブラリ（Wanakanaなど）を使う方法は簡単で便利だが、読み替え表などを自作する方法を使うのが実務向き

(つづく)