ToolDeck

スラグ生成器

任意のテキストをクリーンなURL対応スラグに変換

サンプルを試す
セパレーター

入力テキスト

スラグ

ローカルで実行 · シークレットの貼り付けも安全
スラグがここに表示されます…

URLスラグとは?

URLスラグとは、ウェブアドレスの中で特定のページを人間が読める形で識別する部分です。URLが https://example.com/blog/my-first-post の場合、スラグは my-first-post にあたります。スラグ生成器はページのタイトルや説明文を、小文字・数字・ハイフン(または別のセパレーター)のみで構成される文字列に変換します。このプロセスではスペースの除去、アクセント記号や発音区別符号の削除、特殊文字の除去、連続する空白の単一セパレーターへの正規化が行われます。

スラグ生成はコンテンツ管理システム、静的サイトジェネレーター、ブログプラットフォーム、そしてユーザー入力からURLを導出するあらゆるアプリケーションにおける標準的な処理です。WordPress、Ghost、Hugo、Next.js、Djangoはすべてスラグ生成のロジックを内蔵しています。読みやすいURLはユーザビリティと検索エンジン最適化の両方を向上させるためです。適切に形成されたスラグは、ユーザーがリンクをクリックする前にページの内容を伝えます。

「スラグ」という用語は新聞出版業界に由来し、制作中の記事を識別するための短いラベルとして使われていました。ウェブ開発においても、スラグは同じ機能を果たします。長いタイトルや名前から導出される、コンパクトで一意のURL安全な識別子です。スラグはプログラムで導出されるため、信頼性の高いスラグ生成器はすべてのページとロケールで一貫性を保証します。

このスラグ生成器を使う理由

URLスラグを手作業で作成するとミスが起きやすいです。アクセント記号の削除忘れ、二重ハイフンの残存、Unicode入力のエッジケース見落としなどが、壊れた見栄えの悪いURLにつながります。このツールはこれらの問題を自動的に処理します。

即時変換
任意のテキストを貼り付けるか入力するだけで、スラグがリアルタイムで更新されます。フォーム送信もページ再読み込みも不要です。複数の記事タイトルや商品名のスラグをまとめて確認する際に便利です。
🔒
プライバシー優先の処理
スラグ生成の処理はすべてブラウザ内で実行されます。入力したテキストがページ外に送信されることはないため、下書きのタイトル、社内プロジェクト名、未発表の商品名も安全に変換できます。
⚙️
出力のカスタマイズ
ハイフン・アンダースコア・ドットのセパレーターから選択できます。小文字変換のオン・オフも切り替え可能です。さまざまなフレームワークやCMSで一般的なスラグ規則に対応しています。
🌐
Unicodeとアクセント処理
この生成器はNFD正規化を適用してアクセント付き文字から発音区別符号を除去します。Caféはcafeに、naïveはnaiveになります。音訳できない非ラテン文字は適切に除去されます。

スラグ生成器の活用例

フロントエンドエンジニア — ルート設計
React Router、Next.js、Nuxtの動的ルートセグメントを配線する前に、ページルート用の一貫したスラグを生成します。特殊文字を含むタイトルがクリーンなパスを生成するか確認できます。
バックエンドエンジニア — データベース識別子
人間が読める識別子が必要なデータベースレコード用のURL安全なスラグを作成します。スラグは /api/products/wireless-headphones のようなREST APIエンドポイントで数値IDとともにセカンダリキーとして機能します。
DevOps — 設定ファイルの命名
サービス名や環境ラベルを、特殊文字が許可されていない設定ファイル・Dockerイメージタグ・Kubernetesリソース名に使えるファイルシステム安全な文字列に変換します。
QAエンジニア — テストデータ生成
テストケースのタイトルからスラグのバリエーションをすばやく生成して、ステージング環境でのURLルーティング・リダイレクトルール・canonicalタグの動作を検証します。
データエンジニア — カラム名の正規化
CSVやExcelのインポートから得られる乱雑なカラムヘッダーを、データベーススキーマやデータパイプラインで使用できる一貫したスネークケースまたはケバブケースの識別子に正規化します。
学習者 — CMSとブログプロジェクト
WordPressやJekyll、またはカスタムCMSでブログを構築する際に、スラグ生成の仕組みを学べます。このツールを使って手動で作成したスラグを参照実装と比較してみましょう。

スラグ生成のルールと文字処理

スラグ生成は予測可能な一連の変換ステップに従います。各ステップを理解することで、予期しない出力のデバッグや独自のslugify関数の実装に役立ちます。

  1. 1. Unicode正規化(NFD)
    合成文字を基底文字と結合マークに分解します。たとえば é(U+00E9)は e と結合アキュートアクセント(U+0301)になります。これにより次のステップで発音区別符号を除去できるようになります。
  2. 2. 発音区別符号の除去
    Unicode結合発音区別符号ブロック(U+0300〜U+036F)のすべての文字を除去します。このステップ後、caféはcafeに、ÑはNになります。
  3. 3. 特殊文字の除去
    文字・数字・空白・ハイフン以外のすべての文字をスペースに置換します。これにより句読点・記号・ASCII相当のない文字が除去されます。
  4. 4. 先頭・末尾の空白削除と空白の統合
    先頭と末尾の空白を削除し、連続するスペース・アンダースコア・ハイフンの列を1つの選択したセパレーターに統合します。
  5. 5. 大文字小文字とセパレーターの適用
    小文字に変換(オプション)し、選択したセパレーター文字(ハイフン -、アンダースコア _、またはドット .)で単語を結合します。

文字変換リファレンス

下の表はスラグ生成時に一般的な文字がどのように処理されるかを示しています:

入力出力適用ルール
Hello Worldhello-worldLowercase + space → hyphen
Café au Laitcafe-au-laitNFD normalization strips é → e
naïve résuménaive-resumeMultiple diacritics removed
Price: $9.99!price-9-99Symbols ($, !, :) removed
too many too-manyWhitespace trimmed and collapsed
one--two___threeone-two-threeMixed separators collapsed
Привет мирprivet-mirCyrillic (if transliteration) or removed
file_name.txtfile-name-txtDots and underscores replaced
React & Vuereact-vueAmpersand removed
2026-03-302026-03-30Digits and hyphens preserved

コード例

主要な言語とフレームワークでのスラグ生成の実装例です。各例ではUnicode正規化・発音区別符号の除去・セパレーターの挿入を処理しています。

JavaScript
function slugify(text, separator = '-') {
  return text
    .normalize('NFD')                   // decompose accented chars
    .replace(/[\u0300-\u036f]/g, '')    // strip diacritics
    .toLowerCase()
    .replace(/[^\w\s-]/g, ' ')          // drop special chars
    .trim()
    .replace(/[\s_-]+/g, separator)     // collapse whitespace → separator

  // slugify('Café au Lait')      → "cafe-au-lait"
  // slugify('Hello World', '_')  → "hello_world"
}

// Node.js alternative using the `slugify` npm package:
// npm install slugify
// const slugify = require('slugify')
// slugify('Hello World', { lower: true, strict: true }) → "hello-world"
Python
import re
import unicodedata

def slugify(text: str, separator: str = '-') -> str:
    """Convert text to a URL-safe slug."""
    text = unicodedata.normalize('NFD', text)
    text = text.encode('ascii', 'ignore').decode('ascii')  # strip non-ASCII
    text = text.lower()
    text = re.sub(r'[^\w\s-]', ' ', text)
    text = text.strip()
    text = re.sub(r'[\s_-]+', separator, text)
    return text

# slugify('Café au Lait')      → "cafe-au-lait"
# slugify('Hello World', '_')  → "hello_world"

# Alternative: python-slugify (pip install python-slugify)
# from slugify import slugify
# slugify('Café au Lait')  → "cafe-au-lait"
Go
package main

import (
	"regexp"
	"strings"
	"unicode"

	"golang.org/x/text/unicode/norm"
	"golang.org/x/text/transform"
	"golang.org/x/text/runes"
)

func slugify(text string) string {
	// NFD normalize and strip diacritics
	t := transform.Chain(norm.NFD, runes.Remove(runes.In(unicode.Mn)), norm.NFC)
	result, _, _ := transform.String(t, text)

	result = strings.ToLower(result)
	re := regexp.MustCompile(`[^\w\s-]+`)
	result = re.ReplaceAllString(result, " ")
	result = strings.TrimSpace(result)
	re = regexp.MustCompile(`[\s_-]+`)
	result = re.ReplaceAllString(result, "-")
	return result
}

// slugify("Café au Lait") → "cafe-au-lait"
// slugify("Hello World")  → "hello-world"
PHP
function slugify(string $text, string $separator = '-'): string {
    // Transliterate non-ASCII characters
    $text = transliterator_transliterate(
        'Any-Latin; Latin-ASCII; Lower()', $text
    );
    // Remove anything that is not a word char, space, or hyphen
    $text = preg_replace('/[^\w\s-]/', ' ', $text);
    $text = trim($text);
    $text = preg_replace('/[\s_-]+/', $separator, $text);
    return $text;
}

// slugify('Café au Lait')      → "cafe-au-lait"
// slugify('Hello World', '_')  → "hello_world"

よくある質問

スラグとURLパスの違いは何ですか?
URLパスはドメイン後のフルセグメント(例:/blog/2026/my-post)です。スラグはそのパス内で特定のリソースを識別する人間が読める部分で、通常は最後のセグメント(my-post)です。スラグはタイトルから導出されることが多く、パスの残りの部分はサイトのルーティング構造を反映します。
スラグ生成は中国語やアラビア語のような非ラテン文字をどのように処理しますか?
NFD正規化と発音区別符号除去を使用する標準的なスラグ生成器は、非ラテン文字を音訳できません。漢字やアラビア文字にはASCII相当がないため、特殊文字のクリーンアップステップで除去されます。スラグに非ラテン文字のコンテンツを保持するには、limax(JavaScript)、unidecodeバックエンドを使用したpython-slugify、またはカスタムマッピングテーブルのような音訳ライブラリが必要です。
URLスラグにはハイフンとアンダースコアのどちらを使うべきですか?
Googleはハイフンを単語の区切り文字として扱いますが、アンダースコアは単語の結合文字として扱います。スラグ my-first-post は3つの単語(my、first、post)として読まれますが、my_first_post は1つのトークンとして読まれます。SEOの観点では、URLスラグにはハイフンが標準的な選択です。アンダースコアはファイル名・データベースカラム・プログラミングの識別子で一般的に使われ、変数名として安全な結合文字として機能します。
URLスラグはどのくらいの長さが適切ですか?
Googleは検索結果でURLを約60文字表示してから切り捨てます。短いスラグほど読みやすく、共有・入力しやすいです。3〜6単語を目安にしてください。意味が変わらない場合は冠詞や前置詞(the、a、an、and、or、in)を省略しましょう:how-to-build-nextjs-app は how-to-build-a-next-js-app-in-2026 より優れています。
スラグ生成とURLエンコードは同じですか?
いいえ。URLエンコード(パーセントエンコード)はスペースを %20 のようなパーセント記号を使った3文字列に置換します。スラグ生成は安全でない文字を完全に除去または置換し、エンコードの痕跡のないクリーンな文字列を生成します。スラグにはパーセント記号・スペース・特殊文字が含まれません。URLエンコードは元のコンテンツを保持し、スラグ生成は新しいものに変換します。
異なる2つのタイトルが同じスラグになることはありますか?
あります。句読点・アクセント記号・大文字小文字のみが異なるタイトルは同じスラグに収束することがよくあります。たとえば「Résumé Tips」と「Resume Tips」はどちらも resume-tips になります。CMSやデータベースの文脈では、衝突が発生した際に数値サフィックス(resume-tips-2)を付加する一意性チェックが必要です。
WordPressやDjangoでスラグを生成するにはどうすればよいですか?
WordPressは sanitize_title() を使って投稿タイトルから自動的にスラグを生成します。投稿エディターでスラグを編集することもできます。DjangoはDjango.utils.textに slugify() 関数を提供しており、ASCII入力に対して適切に動作します。Unicodeのサポートには allow_unicode=True を渡してください。どちらのプラットフォームもデータベースにスラグをフルタイトルと並べて保存します。