タイトルまたはテキスト

スラッグ

URLスラッグジェネレーターとは？

ブログ記事「JavaScriptでURLを解析する方法 — カフェオーナーのためのガイド（2026年版）」を書き、そのURLパスが必要になりました。%E2%80%94は使いたくないし、スペースも、大文字小文字を区別するサーバーで壊れる大文字も避けたい。欲しいのは javascriptdeurlwokaisekisuruhouhou-cafeownernotamenoguide-2026（あるいは英語タイトルからなら how-to-parse-a-url-in-javascript-a-cafe-owners-guide-2026-edition）です。このツールがそれをやります。タイトルを貼り付けて、スラッグをコピーするだけ。この用語自体は出版業界が起源です — 語源はWikipediaのスラッグの項目を参照してください。

アルゴリズムは標準的なものです。小文字に変換し、String.prototype.normalize('NFD')でUnicode文字をベース文字＋結合マークに分解。マークを除去（つまり é は e になる）。一般的なリガチャは手動で処理 — æ は ae、ø は o、ß は ss、ł は l。英数字以外の連続を1つのハイフンに置換。前後のハイフンを削除。80文字で単語境界にて打ち切り、単語の途中で切れたスラッグにならないようにする。

なぜkebab-caseか？ハイフンが慣例だからです。GoogleのURL構造ガイドラインは、URLでの単語区切りにアンダースコアではなくハイフンを推奨しています — 検索エンジンはハイフンを単語境界として解析します。RFC 3986はURLパスの予約されない文字（英字、数字、ハイフン、ピリオド、アンダースコア、チルダ）を定義しており、ほとんどのスラッグ慣例はそのサブセットに収まります。Snake_case（my_post_title）やTitle-Case-Slug（My-Post-Title）も見かけますが、kebab-caseの小文字がクリーンURLの実践からほとんどのCMSのデフォルトまで、どこでもデフォルトです。

スラッグジェネレーターの使い方

3ステップ。それぞれがこのページのボタンに対応します。

タイトルを貼り付けるかサンプルを読み込む

左パネルにタイトル、見出し、商品名、または任意のテキストを入れます。サンプルをクリックすると、emダッシュ、アクセント、括弧を含む現実的な例が読み込まれます — 単純なスラッグコードを壊すような種類のタイトルです。サンプル入力：

How to Parse a URL in JavaScript — A Café Owner's Guide (2026 Edition)

何でも来い — 絵文字、アクセント付き文字、スマートクォート、emダッシュ、ダブルハイフン、複数のスペース。スラッグはきれいに出てきます。

スラッグを読む

右パネルに、入力するそばからスラッグが表示されます。小文字、ハイフン区切り、ASCIIのみ、単語境界で80文字に制限。入力にスラッグ化可能な文字が含まれていない場合（例：絵文字のみや句読点のみ）、混乱する空の結果ではなく、わかりやすいメッセージが表示されます。

コピーまたはダウンロード

コピーをクリックしてスラッグをクリップボードに送るか、ダウンロードで .txt ファイルとして保存します。新しいタイトルでやり直すには、入力パネルのクリアを使ってください。

実際に使う場面

ブログ記事のURL

CMSが自動でスラッグを生成するけど、それが汚い — アクセントの処理が間違っていたり、アンダースコアを残したり、スマートクォートを処理しなかったり。タイトルをここに貼り付け、きれいなスラッグを取得し、URLフィールドに貼り戻す。WordPress、Ghost、自作のNext.jsブログ、スラッグを上書きできるものなら何でも動きます。

EコマースのカテゴリーURLや商品URL

Marco Rivera が「Crème Brûlée Set — 4 Pack (Limited Edition)」という新商品を追加。URLは /products/creme-brulee-set-4-pack-limited-edition であるべきで、/products/Crème+Brûlée+Set+%E2%80%94+4+Pack+%28Limited+Edition%29 ではありません。スラッグ化して差し込むだけ。

人間が入力したタイトルからのファイル名

アップロードされたドキュメントをディスクに保存していて、顧客が「Q4 Report — Final (v3).docx」とタイトルを入力。これをファイル名にしたくはありません。タイトルをスラッグ化し、.docx を追加してファイル書き込み。S3キー、issueタイトルからGitHubブランチ名、プロジェクト名からSlackチャンネル名にも同様に使えます。

別のCMSからのコンテンツ移行

Priya Patel が古いCMSから新しいCMSへ800記事を移行中で、元のタイトルはエンコーディングがバラバラ — アクセント付き、なし、2018年のリデザイン時の絵文字付きなど混在。各タイトルをスラッガーに通し、重複を削除すれば、リダイレクト表用の新しいURLマップが完成します。

よくある質問

なぜアクセントをパーセントエンコードせず除去するのですか？

スラッグは人間が読めるためのものだからです。スラッグ内の café は実URLでは %C3%A9 となり、ブラウザバーで見た目が悪く、チャットでのコピペが壊れ、技術に詳しくない読者を混乱させます。ASCIIに削ぎ落とすことでURLは読みやすく、SEOフレンドリーに保たれます。NFD正規化がその分解を行う標準的な方法です。

中国語、アラビア語、ヒンディー語などの非ラテン文字はどうですか？

NFDは表意文字や、ベース＋結合マークの構造を持たない文字を分解しません。なので中国語のタイトルはここで空のスラッグになり、「スラッグ化可能な文字なし」のメッセージが表示されます。非ラテン文字には2つの選択肢があります：先に音訳する（ICUやunidecodeのようなライブラリを使う）か、URLに元の文字を使う — 現代のブラウザとGoogleはURL内のUnicodeを問題なく扱います、見た目はやや劣りますが。

なぜ80文字で打ち切るのですか？

厳密なルールはありませんが、パスセグメントが約80文字を超えるURLは、メール、SNSプレビュー、印刷物で改行が悪くなり始めます。Googleのガイダンスは具体的な数を示していませんが、「シンプルで説明的な」URLを推奨しています — 長いものはどちらでもありません。この上限は単語の途中での切断を避けるため、80文字より前の最後のハイフンを探します。

絵文字に対応していますか？

はい。絵文字は他の英数字以外の文字とともに除去されます。なので「🎉 New Launch! 🚀」は new-launch になります。スラッグが空になった場合（絵文字のみの入力）、壊れたURLではなく、わかりやすい空スラッグの注記が表示されます。

タイトルをURLエンコードするのとの違いは？

URLエンコードは全文字を保持しつつ、安全でないものをエスケープします — スペースは %20、アクセントはパーセントエスケープされたUTF-8バイトになります。結果は有効なURLですが読めません。スラッグは別物：その場にふさわしくない文字を捨てた、人間に優しいパスセグメントです。クエリパラメータにはURLエンコード、パスセグメントにはスラッグを使います。WHATWG URL Standardに両方の正確な定義があります。

kebab-caseとsnake_caseはどちらを使うべき？

URLにはkebab-case（my-post-title） — それが慣例で、検索エンジンが単語区切りとして扱うものです。Snake_case（my_post_title）は変数名やデータベース識別子には適していますが、URLではアンダースコアが単語の一部として扱われることが多く、SEOを損ないます。このツールはkebabがデフォルトです。snakeが必要なら、出力のハイフンを置換してください。

その他のURL・テキストツール

スラッグはURLの一部分です。組み合わせて使えるツールはこちら：