URLスラッグ変換ツール
任意のテキストを英小文字・数字・ハイフンのみで構成されるURLスラッグ(kebab-case)に自動変換します。記号やスペースは自動的にハイフンへ統一され、ひらがな・カタカナの簡易ローマ字変換にも対応しているため、日本語の見出しからでもSEOフレンドリーなURLやファイル名、ブログのパーマリンクを簡単に作成できます。
変換例
| 変換前 | 変換後 |
|---|---|
| Hello World! | hello-world |
| café | cafe |
| ___multiple---spaces here___ | multiple-spaces-here |
| がっこう (ひらがな・カタカナをローマ字化) | gakkou |
URLスラッグとは
URLスラッグとは、Webページのアドレス(URL)の一部として使われる、短く簡潔な識別文字列のことです。ブログ記事のタイトルや商品名のような人間向けの長い文章を、そのままURLに含めるとアクセス性や見た目が悪化するため、英小文字・数字・ハイフンだけで構成された読みやすい文字列に変換して使うのが一般的です。このツールは入力したテキストを解析し、記号やスペースをハイフンに統一し、アルファベットをすべて小文字化することで、そのままURLパスとして利用できるkebab-case形式のスラッグを自動生成します。
このツールは日本語の見出しにも対応しています。「ひらがな・カタカナをローマ字化」オプションをONにすると、ひらがな・カタカナを簡易的なローマ字に変換したうえでスラッグ化します。ただし漢字は読み方が一意に定まらないため機械的なローマ字変換の対象外とし、除去する設計にしています。生成された文字列はブラウザ内のJavaScriptだけで処理され、サーバーへは送信されません。
URLスラッグ変換ツールの使い方
- 変換したいテキストを入力する 記事タイトルや商品名など、URLに使いたい文字列を入力欄に貼り付けます。
- 日本語の場合はローマ字化をONにする ひらがな・カタカナを含む場合は「ひらがな・カタカナをローマ字化」にチェックを入れると自動でローマ字に変換されます。
- 出力欄でスラッグを確認する 入力するたびにリアルタイムでkebab-case形式のURLスラッグが下の出力欄に表示されます。
- 必要に応じて手動で調整する 漢字を含む場合は除去されるため、意味が通るように単語を補うなど出力後に手直しします。
- コピーしてCMSやシステムに貼り付ける コピーボタンでクリップボードに保存し、パーマリンク設定欄などに貼り付けます。
使いこなすためのヒント
- 生成されたスラッグは英小文字・数字・ハイフンのみで構成されるため、URLのパス・ファイル名・CSSのクラス名など幅広い用途でそのまま安全に使えます。
- 漢字は自動でローマ字化できないため、変換の過程でスラッグから除去されます。日本語の見出しを使う場合は「ひらがな・カタカナをローマ字化」をONにしてから、必要に応じて手動で調整してください。
- 「は」「へ」のように助詞として使われる仮名は、文脈に関わらず単純な読み(ha/he)でローマ字化されます。「こんにちは」がkonnichihaになるのはこのためで、気になる場合は出力後に手動で修正してください。
- 連続する記号・スペース・アンダースコアは1つのハイフンにまとめられ、先頭・末尾のハイフンは自動的に削除されます。
- コピーボタンでクリップボードに変換結果をコピーできるので、CMSやスプレッドシートへの貼り付け作業がスムーズになります。
URLスラッグ変換ツールの活用シーン
ブログ記事のパーマリンク作成
WordPressなどのCMSで記事タイトルを入力すると自動生成されるスラッグが冗長・不自然になりがちな場合、このツールで整えた文字列を手動で設定し直すのに使えます。
ECサイトの商品ページURL設計
商品名をそのままURLに使うと文字化けや長すぎるURLの原因になるため、商品名を簡潔なスラッグに変換してSEOに配慮したパスを作成できます。
ファイル名・画像名の統一
アップロードする画像やドキュメントのファイル名を、スペースや全角文字を含まない安全な形式に揃えるのに使えます。
CSSクラス名・HTML要素IDの生成
見出しのテキストからページ内リンク用のアンカーIDやCSSクラス名を作る際、英数字とハイフンだけの安全な文字列に変換できます。
多言語サイトのURL統一
日本語の見出しを持つページを英語URLに統一したい場合、ローマ字化オプションを使って読みやすいURLパスの草案を作成できます。
用語集
- スラッグ(slug)
- URLの一部として使われる、記事や商品などを識別するための短い文字列のことです。新聞・出版業界で記事に付けていた仮の識別名が語源とされ、WordPressなどのCMSで一般的な用語になりました。
- ケバブケース(kebab-case)
- 単語をハイフン(-)でつなぐ命名規則のことです。串焼き(ケバブ)のように単語が串刺しになって見えることが名前の由来で、URLスラッグの標準的な形式として広く使われています。
- スネークケース(snake_case)
- 単語をアンダースコア(_)でつなぐ命名規則のことです。プログラムの変数名でよく使われますが、Googleはハイフンほど単語の区切りとして認識しないとされており、URLスラッグにはあまり推奨されません。
- パーマリンク
- ページの永続的なURLのことです。WordPressなどのCMSでは記事ごとにパーマリンクの形式を設定でき、その中にスラッグが組み込まれます。
- ローマ字化
- ひらがな・カタカナなどの日本語の音をアルファベット表記に変換する処理のことです。このツールでは簡易的な変換に留め、読み方が複数存在する漢字は対象外としています。
- NFKD正規化
- Unicode文字列の正規化形式の一つで、アクセント記号付きの文字(é等)を基本の文字(e)と結合文字(アクセント記号)に分解する処理です。このツールはこの分解を利用してアクセント記号を除去しています。
よくある質問
余談ですが ― スラッグとkebab-caseの話
「スラッグ(slug)」という用語は、新聞・出版業界で記事に付ける短い識別名を指す言葉として使われていたのが由来とされています。Webの世界では、記事タイトルなどの人間が読む文字列を、URLの一部として使える短く簡潔な識別子に変換したものを指すようになりました。WordPressをはじめとする多くのCMSが「スラッグ」という用語をそのまま管理画面の項目名として採用しており、ブログ記事のパーマリンク設定などで見かけたことがある人も多いはずです。
URLのスラッグにはハイフン区切り(kebab-case)とアンダースコア区切り(snake_case)のどちらを使うか、という議論が長く続いてきました。Googleは「ハイフンは単語の区切りとして認識するが、アンダースコアは単語を連結した1つの文字列として扱う」という趣旨のガイダンスを出しており、検索エンジンにとって「my-blog-post」は3つの単語として、「my_blog_post」は1つの単語として解釈されやすい傾向があります。この違いから、SEOを意識するサイトの多くはkebab-caseを採用しています。
日本語のテキストを英語圏向けのURLに変換する作業は、単純なアルファベットへの置き換えでは済まない難しさがあります。ひらがな・カタカナは音を表す表音文字なので機械的にローマ字化できますが、漢字は同じ字でも読み方が複数存在する(例:「今日」は「きょう」とも「こんにち」とも読める)ため、文脈を理解しない限り正しい読みを一意に決定できません。このツールが漢字を変換せずそのまま除去する設計になっているのは、精度の低い誤った読みを機械的に生成するよりも、除去した上でユーザー自身に確認してもらう方が安全という判断によるものです。