自分のYouTube動画を海外にも届けたい――そう考えたとき、字幕だけでなく 吹き替え音声 があると視聴体験は大きく変わります。以前はプロのナレーターに依頼するか、自分で外国語を話す必要がありましたが、ElevenLabsのTTS APIの登場で状況が変わりました。

この記事では、私が実際に運用している YouTube動画の多言語吹き替え音声を自動生成するワークフロー を、再現可能な形で紹介します。使うのはClaude、Python、ffmpeg、ElevenLabs API。テキスト処理の中核をClaudeが担い、音声生成と加工をPython + ffmpegが自動化します。特別な機材は不要で、個人クリエイターでも始められます。

:::ad

:::toc

• ワークフロー全体像
• 前提環境と事前準備
  • 必要なツール・アカウント
  • ElevenLabs APIキーの取得
• Claudeの活用：なぜLLMが不可欠なのか
  • Pythonだけでは限界がある理由
  • Claudeを推奨する理由
• Step 1：字幕（テキスト）を作成する
  • 文字起こしの方法
  • 前処理：Python＋Claudeの二段構え
• Step 2：Claudeで翻訳字幕を作成しTTS最適化する
  • 翻訳のポイント
  • TTS向け最適化ルール
• Step 3：ElevenLabs APIで音声を生成する
  • APIの基本仕様
  • Pythonスクリプトの実装
  • キャッシュとリトライ戦略
• Step 4：ffmpegでタイムライン構築
  • 速度調整（atempo）
  • 無音ベース＋adelayで絶対時刻配置
  • amixによるミックスダウン
• Step 5：マスタリングと品質検証
  • ゲイン調整とピークリミッタ
  • レポートによる品質確認
• Step 6：Premiere ProでBGM・SEと合成する
• Step 7：YouTube Studioへのアップロード
• コストと運用の目安
• まとめ

:::

:::ad

ワークフロー全体像 {#workflow-overview}

このワークフローは7つのステップで構成されています。

動画ファイル
  ↓ Step 1: 文字起こし + Python前処理 + Claude整形
日本語テキスト
  ↓ Step 2: Claudeで翻訳 + TTS最適化
吹き替え用字幕 (_en_dub.srt)
  ↓ Step 3: ElevenLabs TTS API
cue単位の音声ファイル (.mp3)
  ↓ Step 4: ffmpegタイムライン構築（★単純連結ではなく絶対時刻配置）
タイムライン音声 (.wav)
  ↓ Step 5: マスタリング
吹き替え音声 (.mp3)
  ↓ Step 6: Premiere Proで主音声ミュート + BGM・SE合成
完成版吹き替え音声 (.mp3)
  ↓ Step 7: アップロード
YouTube Studio（吹き替え音声トラック）

各ステップで使用するツールは以下の通りです。

Step 1〜2の テキスト処理フェーズ がこのワークフローで最も知的労力がかかる部分で、ここにClaude（LLM）の力が不可欠です。Step 3〜5はスクリプトとffmpegによる自動処理です。

前提環境と事前準備 {#prerequisites}

必要なツール・アカウント {#required-tools}

以下のツールとアカウントを事前に用意します。

• Claude（Anthropic）— 翻訳・テキスト最適化の中核ツール
• Python 3.10以上
• ffmpeg / ffprobe（パスが通った状態）
• ElevenLabsアカウント（Starter Plan以上）
• Premiere Pro（文字起こし用、Whisperでも代替可）
• Pythonライブラリ: requests, python-dotenv、（Whisper使用時はfaster-whisperも）

pip install requests python-dotenv faster-whisper

ElevenLabs APIキーの取得 {#api-key-setup}

1. ElevenLabsでアカウントを作成
2. ダッシュボードの Profile + API Key セクションからAPIキーをコピー
3. サイドバーの「ボイス」→「探索」から、言語やカテゴリ（ナレーション、会話的など）でフィルタリングして気に入った音声を見つける
4. 音声の詳細画面からVoice IDをコピー

プロジェクトのルートに.envファイルを作成し、APIキーとVoice IDを設定します。

ELEVENLABS_API_KEY=sk-xxxxxxxxxxxxxxxxxxxxxxxx
ELEVENLABS_VOICE_ID_EN=UgBBYS2sOqTuMpoF3BR0
ELEVENLABS_VOICE_ID_KR=PDoCXqBQFGsvfO0hNkEs

上記のVoice IDは、私が実際に使用している音声です。ElevenLabsのボイスライブラリから試聴して気に入ったものを選びました。

Voice IDは秘密情報ではなく、ElevenLabsの公開ライブラリにある音声のIDなので、そのまま使っていただいても構いません。もちろん、ご自身のチャンネルに合う音声を探して差し替えるのがおすすめです。

使用可能な音声の一覧は、ElevenLabs APIの/voicesエンドポイントで確認できます。

import requests, os
from dotenv import load_dotenv

load_dotenv()
api_key = os.getenv("ELEVENLABS_API_KEY")

resp = requests.get(
    "https://api.elevenlabs.io/v1/voices",
    headers={"xi-api-key": api_key},
)
for v in resp.json()["voices"]:
    print(f"{v['voice_id']}  {v['name']}  ({v['category']})")

Claudeの活用：なぜLLMが不可欠なのか {#claude-role}

このワークフローでは、Python + ffmpegによる自動処理だけでなく、 Claude（LLM）が中核的な役割 を担います。

Pythonだけでは限界がある理由 {#python-limitation}

文字起こしの前処理や翻訳字幕の作成には、 文脈を理解した判断 が必要です。Pythonスクリプトで機械的にできるのはフィラー除去や文字列置換などの定型処理まで。以下のような作業はPythonでは対応できません。

• 文脈に基づくテキスト整形: 話者の意図を汲んで口語を読みやすい文章に再構成する
• 翻訳: ニュアンスを維持した自然な多言語翻訳
• TTS最適化: 指定された秒数枠に収まるよう、意味を保ったままテキストを圧縮する
• 固有名詞の文脈判断: 同じ音でも文脈によって正しい表記が異なるケース

つまり、このワークフローは 「Pythonで機械的に処理できる部分」と「LLMに意味理解を任せる部分」の二段構え で成り立っています。

Claudeを推奨する理由 {#why-claude}

翻訳や吹き替え用字幕の作成にはChatGPT（GPT-5.4）でも同等のことは可能です。ただし、 吹き替え用字幕の作成（TTS最適化）においてはClaudeが明確に優れている と感じています。

吹き替え用字幕の作成では「この文を3.5秒枠に収まるよう、15語以内で意味を保って圧縮してください」といった制約付きの指示が大量に発生します。Claudeはこうした 指定された時間枠に良い具合にテキストを圧縮する器用さ に長けています。単に文を短くするだけでなく、TTSが読み上げたときの自然さ（息継ぎの位置、contractionの使い方、列挙の圧縮）まで考慮した出力が安定して得られます。

このフロー構築時に実際にClaudeで吹き替え用字幕を作成したところ、181cueの字幕が146cueに最適化され（19.3%削減）ました。1cueずつの速度比（テキスト長 / 表示時間）がすべて1.3倍以内に収まるよう調整するという繊細な作業を、Claudeは高い精度でこなしてくれます。

Step 1：字幕（テキスト）を作成する {#step1-whisper}

文字起こしの方法 {#transcription}

吹き替えの起点となる日本語テキストを用意します。方法は大きく2つあります。

方法1: Premiere Proの文字起こし機能（おすすめ）

私が実際に使っているのはこちらです。Premiere Proには 音声のテキスト変換 機能が組み込まれており、映像のコンテキストも考慮した高精度な文字起こしが得られます。手順は簡単で、Premiere Proのキャプションパネルから「文字起こし」を実行し、結果を テキスト(.txt)形式でエクスポート するだけです。

Premiere Proの文字起こしは動画の映像情報も解析に使うため、Whisper単体と比べて固有名詞や専門用語の認識精度が高く感じます。すでにPremiere Proで編集している場合は、追加のセットアップなしですぐに使えるのも大きなメリットです。

なお、Premiere Proにもフィラーワード（「えー」「あのー」等）を自動除去する機能がありますが、 これを適用せずにそのままエクスポートする ことを推奨します。フィラー除去を適用するとタイムコードが細分化されすぎてしまい、このあとClaude に渡して意味理解ベースの整形を行う際に、文脈の把握精度が落ちる可能性があります。フィラーの除去はClaude側で文脈を見ながら行うほうが、結果的に品質の高いテキストが得られます。

方法2: Whisper（faster-whisper）を使う方法

Premiere Proがない環境では、faster-whisperが強力な代替手段です。GPUがあればlarge-v3-turboモデルで高速かつ高精度な文字起こしが可能です。

python transcribe.py "input_video.mp4" "output_dir/" \
    --model large-v3-turbo \
    --language ja \
    --beam-size 5

from faster_whisper import WhisperModel

model = WhisperModel("large-v3-turbo", device="cuda", compute_type="float16")
segments, info = model.transcribe(
    "input_video.mp4",
    language="ja",
    beam_size=5,
    vad_filter=True,
    vad_parameters={"min_silence_duration_ms": 500},
    word_timestamps=True,
    temperature=0.0,
)

vad_filter=Trueで無音区間を自動検出し、セグメント分割が改善されます。出力はSRT形式で保存します。

どちらの方法でも、このあとの前処理と翻訳のステップは同じです。

前処理：Python＋Claudeの二段構え {#preprocessing}

文字起こしの生出力はそのままでは翻訳に使えません。前処理は Pythonで機械的に処理する段階 と Claudeで意味理解して整形する段階 の二段構えです。

第1段階：Pythonによる機械的な前処理

以下の3つはPythonスクリプトで自動化できます。

フィラー除去: 「えー」「あのー」「うーん」など、テキスト全体がフィラーだけで構成されるセグメントを丸ごと除去します。

FILLER_ONLY = {
    "はい", "はい。", "えー", "えーと", "えっと",
    "うーん", "うん", "あの", "あー", "おー",
    "そう", "そうです", "そうですね", "ね", "で",
}

if segment["text"].strip() in FILLER_ONLY:
    continue  # このセグメントを丸ごとスキップ

また、文頭のフィラー（「えーと、では次に...」の「えーと、」部分）も正規表現で除去します。

固有名詞の機械的な置換: Whisperは専門用語や固有名詞を高い確率で誤認識します。あらかじめ「誤認識パターン→正しい表記」の置換リストを用意しておきます。

# チャンネル固有の置換リストの例
REPLACEMENTS = [
    ("新学校", "進学校"),      # 同音異字
    ("元受け", "元請け"),      # 漢字誤り
    ("下受け", "下請け"),      # 漢字誤り
    ("チャンネル誤認識A", "正しいチャンネル名"),  # 固有名詞
]

for old, new in REPLACEMENTS:
    text = text.replace(old, new)

この置換リストは最初から完璧に作る必要はありません。字幕作成を繰り返す中で新しい誤認識パターンを見つけたら、Claudeに「この誤認識を対応表に追加しておいて」と指示しておけば、動画を作れば作るほど置換リストが充実し、前処理の精度が上がっていきます。

セグメント結合: 短すぎるセグメントは隣接セグメントと結合します。

def should_merge(current, next_seg, max_gap=0.8, max_duration=16.0, max_chars=160):
    gap = next_seg["start"] - current["end"]
    if gap > max_gap:       # 間が0.8秒以上空いていたら別セグメント
        return False
    if next_seg["end"] - current["start"] > max_duration:  # 結合後16秒超
        return False
    if len(current["text"] + next_seg["text"]) > max_chars:  # 結合後160字超
        return False
    return True

第2段階：Claudeによる意味理解ベースの整形

Pythonの機械処理を通しても、文字起こしの生テキストはまだ「話し言葉の書き起こし」のままです。実際の例を見てみましょう。

Whisper生出力（Python前処理後）:

えーとですね今日はまあ設定周りの話をちょっとしたいなと思ってまして
まあ結構つまずくポイントっていうかですねそのへんをまとめていきます

Claudeで整形した結果:

今回は設定周りでつまずきやすいポイントをまとめて解説します。

ここで起きていることは単なる「誤字修正」ではありません。

• 「えーとですね」「まあ」「ちょっと」「っていうかですね」→ 口語のフィラー的な表現を除去
• 2文にまたがっていた内容を1文に凝縮
• 話者の意図を汲み取り、翻訳しやすい明確な文に再構成

もう1つ、配信動画の冒頭部分の例です。

Whisper生出力:

はいみなさんこんにちは
今日はちょっと天気が良くてですね散歩がてら来たんですけど
まあそれはさておきですね今日の本題なんですが

Claudeで整形した結果:

（冒頭の挨拶・雑談を削除し、テーマ部分から開始）

配信動画では冒頭に挨拶や雑談が数分入ることが多いですが、吹き替え音声ではテーマに直結した内容だけが必要です。「ここからがテーマの本題」という判断はPythonにはできず、 文脈を理解するClaudeだからこそ可能な処理 です。

このように、前処理の第1段階（Python）でノイズを機械的に除去し、第2段階（Claude）で話し言葉を自然な文章に再構成するという流れが、翻訳精度を大きく左右します。

:::ad

Step 2：Claudeで翻訳字幕を作成しTTS最適化する {#step2-translation}

翻訳のポイント {#translation-tips}

前処理済みの日本語テキストを、Claudeに渡して対象言語に翻訳します。翻訳と同時に、TTS用の最適化も一括で指示するのが効率的です。

Claudeへの翻訳指示では、以下のポイントを明示します。

全言語共通:

• 話し言葉として自然な翻訳にすること。字幕翻訳とは異なり、TTSで読み上げるため書き言葉的な表現は避ける
• 各cueは表示時間の枠内でTTSが読み切れるテキスト量に収めること

英語の場合:

• contractions を積極使用（"can not" → "can't"、"do not" → "don't"）
• 冗長な表現をカット（"Furthermore" → "Also"、"In order to" → "To"）

韓国語の場合:

• 해요体（ヘヨチェ）に統一する。韓国語には丁寧さのレベルが異なる複数の文体があります。해요体は日本語の「〜です・〜ます」に相当するカジュアルな丁寧語で、YouTube動画の語りかけ口調に最も自然です。一方、합니다体（ハムニダチェ）はニュースや公式文書で使われるフォーマルな敬語で、TTSで読み上げると堅く不自然に聞こえます
• 漢語系の長い複合語はTTSが一息で読み上げてしまうため、分解して自然なリズムにする（例: 「충분조건」→「충분한 조건」）

実際の変換例を見てみましょう。

日本語（Claude整形済み）:

興味があるとか好きだなと思うこと以外、人ってそもそも長い時間はできないじゃないですか。

英語の吹き替え用字幕（_en_dub.srt、Claude作成）:

Other than things you're interested in or things you like,
you can't spend long hours on them, right?

韓国語の吹き替え用字幕（_kr_dub.srt、Claude作成）:

흥미가 있거나, 좋아하지 않으면
오랜 시간을 들일 수 없잖아요

Claudeは日本語の口語ニュアンス（「〜じゃないですか」という同意を求める語尾）を、英語では"right?"、韓国語では"〜잖아요"（해요体の同意表現）に適切に変換しています。こうした ニュアンスレベルの翻訳精度 が、機械翻訳ではなくClaudeを使う理由です。

TTS向け最適化ルール {#tts-optimization}

翻訳後の字幕をTTS用に最適化した「吹き替え用字幕」を作成します。ファイル名は動画名_en_dub.srtのように言語コード + _dubを付けて、表示用字幕と区別します。

核心ルール: 1cue = 1完結文

通常の字幕では1つの文が複数cueにまたがることがありますが、TTS用SRTでは 1つのcueに1つの完結した文 を入れます。TTSエンジンはcue単位で読み上げるため、文の途中で切れると不自然なイントネーションになります。

具体例で見てみましょう。元の日本語が「基礎練習を毎日続けることが上達の近道ですが、ただ量をこなすだけでは効率が悪い」という文だった場合、以下のように変換します。

通常の表示用字幕（_en.srt） — 画面に表示するための短い区切り:

1
00:00:03,200 --> 00:00:05,800
Practicing the basics every day

2
00:00:05,800 --> 00:00:08,500
is the fastest way to improve,

3
00:00:08,500 --> 00:00:11,200
but just doing a lot of practice
isn't very efficient.

TTS用の吹き替え字幕（_en_dub.srt） — 1cueに1完結文:

1
00:00:03,200 --> 00:00:11,200
Practicing basics daily is the fastest way to improve, but just doing a lot isn't efficient.

表示用字幕では3cueに分かれていた文を、吹き替え用字幕では1cueにまとめています。TTSは00:00:03,200の地点でこの1文を一息で読み上げるため、自然なイントネーションになります。

もう1つ、テキスト短縮の例も見てみましょう。

速度予測の目安（英語）

1語 ≈ 120-150ms
2秒枠 → 最大13-16語
3秒枠 → 最大20-25語
4秒枠 → 最大27-33語

cueの表示時間に対してテキストが長すぎると、速度調整の上限を超えて失敗します。上記の目安を参考にテキスト量を調整してください。

Step 3：ElevenLabs APIで音声を生成する {#step3-tts}

ここがこのワークフローの核心です。Dub SRTの各cueをElevenLabs APIに送り、音声ファイルを取得します。

APIの基本仕様 {#api-basics}

エンドポイント: POST https://api.elevenlabs.io/v1/text-to-speech/{voice_id}
認証ヘッダー: xi-api-key: <your-api-key>
レスポンス: audio/mpeg（MP3バイナリ）

リクエストボディ:

{
  "text": "The text to synthesize.",
  "model_id": "eleven_flash_v2_5",
  "voice_settings": {
    "stability": 0.5,
    "similarity_boost": 0.75
  }
}

stabilityは声の一貫性（高いほど安定、低いほど表現力豊か）、similarity_boostは選択した音声への忠実度を制御します。吹き替え用途では上記のバランスがおすすめです。

Pythonスクリプトの実装 {#python-script}

処理の全体フローは以下の通りです。

import requests, hashlib, json, re, subprocess
from pathlib import Path
from dotenv import load_dotenv

API_BASE = "https://api.elevenlabs.io/v1"

def tts_generate(api_key, voice_id, text, output_path,
                 model_id="eleven_flash_v2_5", max_retries=3):
    """1つのテキストからMP3音声を生成する"""
    url = f"{API_BASE}/text-to-speech/{voice_id}"
    headers = {
        "xi-api-key": api_key,
        "Content-Type": "application/json",
    }
    body = {
        "text": text,
        "model_id": model_id,
        "voice_settings": {"stability": 0.5, "similarity_boost": 0.75},
    }

    for attempt in range(max_retries):
        resp = requests.post(url, headers=headers, json=body,
                             stream=True, timeout=60)
        if resp.status_code == 200:
            with open(output_path, "wb") as f:
                for chunk in resp.iter_content(chunk_size=4096):
                    f.write(chunk)
            return
        if resp.status_code in (429, 500, 502, 503):
            wait = 2 ** (attempt + 1)
            time.sleep(wait)
            continue
        resp.raise_for_status()
    raise RuntimeError(f"TTS failed after {max_retries} retries")

SRT解析も自前で実装します。正規表現でcue番号、タイムスタンプ、テキストを抽出します。

SRT_BLOCK_RE = re.compile(
    r"(?ms)^\s*(\d+)\s*\n"
    r"(\d{2}:\d{2}:\d{2},\d{3}) --> (\d{2}:\d{2}:\d{2},\d{3})\s*\n"
    r"(.*?)(?=\n{2,}|\Z)"
)

def parse_ts(value):
    """SRTタイムスタンプをミリ秒に変換"""
    hh, mm, rest = value.split(":")
    ss, ms = rest.split(",")
    return ((int(hh) * 60 + int(mm)) * 60 + int(ss)) * 1000 + int(ms)

def parse_srt(path):
    text = Path(path).read_text(encoding="utf-8-sig")
    cues = []
    for m in SRT_BLOCK_RE.finditer(text):
        cues.append({
            "index": int(m.group(1)),
            "start_ms": parse_ts(m.group(2)),
            "end_ms": parse_ts(m.group(3)),
            "text": m.group(4).strip(),
        })
    return cues

各cueに対してtts_generate()を呼び出し、個別のMP3ファイルを取得します。

キャッシュとリトライ戦略 {#cache-and-retry}

APIコストを抑えるため、生成済み音声はキャッシュします。テキスト・Voice ID・モデルIDからSHA1ハッシュを生成し、キャッシュキーとして使います。

def build_cache_key(voice_id, model_id, text):
    payload = f"{voice_id}\n{model_id}\n{text}".encode("utf-8")
    return hashlib.sha1(payload).hexdigest()

cache_dir = Path("_tts_cache")
cache_dir.mkdir(exist_ok=True)

key = build_cache_key(voice_id, model_id, cue["text"])
cached = cache_dir / f"{key}.mp3"

if cached.exists():
    # キャッシュヒット → API呼び出しをスキップ
    shutil.copy(cached, output_path)
else:
    tts_generate(api_key, voice_id, cue["text"], cached, model_id)
    shutil.copy(cached, output_path)

テキストを修正するとハッシュが変わるため、旧キャッシュは自動的に無効化されます。テスト実行（最初の5cueだけ生成）で使ったキャッシュは本番実行でもそのまま再利用されるので、クレジットの無駄がありません。

Step 4：ffmpegでタイムライン構築 {#step4-timeline}

cue単位のMP3が揃ったら、ffmpegで1本のタイムライン音声にまとめます。

速度調整（atempo） {#speed-adjustment}

TTS音声の長さがcueの表示時間より長い場合、atempoフィルタで再生速度を調整します。

def adjust_speed(input_path, output_path, tempo):
    """WAV音声の再生速度をtempo倍に調整"""
    subprocess.run([
        "ffmpeg", "-y", "-hide_banner", "-loglevel", "error",
        "-i", str(input_path),
        "-filter:a", f"atempo={tempo:.4f}",
        "-c:a", "pcm_s16le", "-ar", "48000", "-ac", "2",
        str(output_path),
    ], check=True)

速度比（ratio）の判定基準は以下の通りです。

英語の場合は1.5倍まで許容できますが、1.3倍を超えると早口感が出始めます。

無音ベース＋adelayで絶対時刻配置 {#timeline-placement}

ここが タイムライン構築の肝 です。YouTubeの吹き替え音声は元動画と長さが完全一致していなければ登録できません。TTS音声を単純に前詰めで連結すると、cue間の無音区間が消えるため大抵の場合は元動画より短くなってしまい、アップロードが弾かれます。

そこで、まず動画全尺の無音WAVをベースとして作り、各cueの音声を SRTの開始時刻に基づいて絶対位置に配置 する方式を取ります。

# 動画全尺の無音WAVを生成
subprocess.run([
    "ffmpeg", "-y", "-hide_banner", "-loglevel", "error",
    "-f", "lavfi", "-i", "anullsrc=r=48000:cl=stereo",
    "-t", f"{total_duration_sec:.3f}",
    "-c:a", "pcm_s16le", "silence.wav",
], check=True)

各cueの音声にadelayフィルタを適用して、SRTの開始時刻（ミリ秒）に配置します。

# ffmpegフィルタグラフの例
[1:a]adelay=3200|3200[d0]    # cue1を3.2秒地点に配置
[2:a]adelay=8500|8500[d1]    # cue2を8.5秒地点に配置
[3:a]adelay=15000|15000[d2]  # cue3を15.0秒地点に配置

この方式により、途中のcueが失敗しても後続のタイミングがずれません。

amixによるミックスダウン {#mixdown}

最後にamixフィルタで無音ベースと全cueを合成します。

[0:a][d0][d1][d2]amix=inputs=4:duration=first:dropout_transition=0:normalize=0[out]

重要: normalize=0を必ず指定してください。デフォルトのnormalize=1だと各入力の音量が1/Nに正規化され、cue数が多い（例: 150cue）とほぼ無音になります。

cue数が多い場合は30cueずつバッチ処理し、段階的にミックスします。フィルタグラフが長くなるため、-filter_complex_scriptでファイル経由で渡すのが安全です。

:::ad

Step 5：マスタリングと品質検証 {#step5-mastering}

ゲイン調整とピークリミッタ {#gain-limiter}

タイムライン音声にゲインとリミッタを適用し、最終MP3を出力します。

def apply_mastering(input_path, output_path, gain_db=7.0, limit_db=-1.0):
    limit_linear = 10 ** (limit_db / 20)  # dBFSを線形値に変換
    subprocess.run([
        "ffmpeg", "-y", "-hide_banner", "-loglevel", "warning",
        "-i", str(input_path),
        "-filter:a", f"volume={gain_db:.2f}dB,alimiter=limit={limit_linear:.4f}",
        "-ar", "48000", "-ac", "2",
        "-c:a", "libmp3lame", "-b:a", "192k",
        str(output_path),
    ], check=True)

• volume=7.0dB: TTS音声は元動画より控えめな音量になりがちなので増幅します
• alimiter: ピークが-1.0dBFSを超えないようにクリッピングを防止します

レポートによる品質確認 {#quality-check}

生成結果をJSONレポートで確認します。

{
  "input_cues": 171,
  "ok_cues": 170,
  "silenced_cues": 0,
  "failed_cues": 0,
  "skipped_empty_cues": 1,
  "cache_hits": 5,
  "duration_ok": true,
  "max_ratio": 1.28
}

確認すべきポイントは以下の3つです。

• failed_cues = 0: すべてのcueが正常に生成されていること
• silenced_cues = 0: 無音で埋められたcueがないこと
• duration_ok = true: 出力MP3の長さが元動画と一致していること

最終検証として、ffmpegでデコードエラーがないことも確認します。

ffmpeg -v error -xerror -i output_dub.mp3 -f null NUL
# exit code 0 なら問題なし

Step 6：Premiere ProでBGM・SEと合成する {#step6-premiere}

Step 5で出力したMP3はTTS音声のみで、BGM（背景音楽）やSE（効果音）が含まれていません。ここでPremiere Proの編集済みタイムラインを活用します。

元動画の編集プロジェクトに吹き替え音声トラックを追加するだけで、通常の動画書き出しと吹き替え音声の書き出しを同じタイムラインから行えます。

書き出しの手順は以下の通りです。

1. 日本語動画の書き出し: 主音声（A1）+ BGM（A2）を有効にして通常通り動画（.mp4）をエクスポート
2. 英語吹き替え音声の書き出し: 主音声（A1）をミュートし、英語音声（A3）+ BGM（A2）の状態でオーディオのみ（.mp3）をエクスポート
3. 韓国語吹き替え音声の書き出し: 同様に韓国語音声（A4）+ BGM（A2）でエクスポート

最終的な出力は以下の3ファイルです。

• 動画名.mp4 — 日本語音声付き動画（YouTube本体にアップロード）
• 動画名_en_dub.mp3 — 英語吹き替え音声（BGM+SE含む）
• 動画名_kr_dub.mp3 — 韓国語吹き替え音声（BGM+SE含む）

この方式なら、トラックのミュート切り替えだけで各言語の音声を書き出せるので、言語が増えても手間はほとんど変わりません。視聴者が言語を切り替えたときも「音声だけが変わり、BGMやSEは同じ」という自然な体験になります。

さらに、元動画と各言語の吹き替え音声が同じタイムライン上にあるため、ここからショート動画を切り出す際にも吹き替え音声付きで書き出せます。ショート用に別途音声を用意する必要がなく、多言語ショート動画の量産にもそのまま対応できるのは大きなメリットです。

Step 7：YouTube Studioへのアップロード {#step7-upload}

1. YouTube Studioで対象動画の編集画面を開く
2. 「字幕」タブから対象言語を追加
3. 「ダブ（吹き替え）を追加」を選択
4. Step 6で作成した完成版MP3ファイルをアップロード

YouTubeの吹き替え音声は 元動画と長さが完全一致 していなければ登録できません。Step 4でタイムライン配置方式（単純連結ではなく、元動画のタイムコード位置にffmpegで各cueを配置）を採用したのはこのためです。この方式により、途中のcueが多少長くても短くても、全体の尺は常に元動画と一致します。

視聴者は動画の設定メニュー（歯車アイコン）から音声言語を切り替えて視聴できます。

コストと運用の目安 {#cost-estimation}

ElevenLabsのeleven_flash_v2_5モデルは 1文字あたり0.5クレジット です。

実測コスト（11分の動画）

実際に11分の動画を英語と韓国語に吹き替えたときの消費クレジットは以下の通りです。

ElevenLabsは 文字数課金 なので、1文字あたりの情報密度が高い言語ほどコスパが良くなります。

ドイツ語は複合語が長くなる傾向があるため、英語より割高になります。

日本円でのコスト感

1USD=158円として、11分の動画を英語+韓国語に吹き替えた場合のコストは以下の通りです。

Starter Planでも11分の動画1本あたり175円程度で2言語対応できます。月間30,000クレジットなので、同程度の動画なら月に4〜5本は処理できる計算です。

コスト削減のポイント

コスト削減の本質は テキスト文字数の削減 です。contractionの活用（"do not" → "don't"）や冗長な表現のカット（"Furthermore" → "Also"）で5〜10%の削減が見込めます。モデルやオーディオフォーマットの変更ではクレジット消費は変わりません。

まとめ {#conclusion}

この記事では、ElevenLabs APIとPython + ffmpegを組み合わせた多言語吹き替え音声の自動生成ワークフローを紹介しました。

全体の流れをおさらいします。

1. Premiere ProやWhisper で日本語テキストを生成し、Python + Claude で前処理・整形する
2. Claude で翻訳しTTS最適化された 吹き替え用字幕 を作成する
3. ElevenLabs API で各cueからMP3音声を生成する
4. ffmpeg のadelay + amixで絶対時刻ベースのタイムラインを構築する
5. ゲイン調整とリミッタで マスタリング し、吹き替え音声MP3を出力する
6. Premiere Pro で主音声をミュートし、BGM・SEと合成して完成版MP3を作成する
7. YouTube Studio に吹き替え音声としてアップロードする

このワークフローの肝は2つあります。1つ目は Claudeによるテキスト処理 （Step 1〜2）。口語の整形、ニュアンスを維持した翻訳、時間枠に合わせたテキスト圧縮――これらは意味理解が必要な作業であり、Pythonスクリプトだけでは実現できません。2つ目は 絶対時刻配置 （Step 4）。単純連結ではなくffmpegで元動画のタイムコード位置に各cueを配置する方式により、出力の尺が確実に元動画と一致します。YouTubeの吹き替え音声は元動画と長さが完全一致している必要があるため、この設計が不可欠です。

ElevenLabsは月額$5から、Claudeも無料プランから利用でき、個人チャンネルの多言語展開への敷居はかなり下がっています。海外視聴者へのリーチを広げたい方は、ぜひ試してみてください。

そこで、Booth商品に独自のタグを付与して整理・検索できるWebサービス「VRCFinder」を開発しました。この記事では、開発の経緯と仕組みについて紹介します。

:::post-link{url="https://vrcfinder.net/ja/" text="▶︎ VRCFinder - VRChat Booth検索補助サイト"}

:::ad

:::toc

• 開発のきっかけ
• VRCFinderの概要
• データ収集と独自タグの仕組み
• 主な機能
• 技術的な工夫
• 制作者の情報収集にも
• ガイドライン準拠について
• まとめ

:::

開発のきっかけ {#background}

VRChatは年々ユーザー数を伸ばしていて、メタバースプラットフォームとしての存在感が増しています。筆者もVRChat上で開催される技術・学術系の集会に積極的に参加していて、最新のAI技術や開発環境についての情報収集に活用しています。

VRChatの文化の中でも特に盛んなのが「改変」と呼ばれるアバターのカスタマイズです。ベースとなるアバターに衣装やアクセサリーを着せ替えたり、テクスチャを書き換えたりして、自分だけの見た目を作り上げる。この改変文化を支えているのが、クリエイターズマーケットBoothです。多くのクリエイターがVRChat向けのアバターや衣装、小物をBoothで販売していて、膨大な商品が集まっています。

ただ、BoothはVRChat専用のマーケットではありません。同人誌、音楽、ハンドメイド雑貨など、あらゆるジャンルの商品が出品されている総合マーケットプレイスです。VRChat関連はたくさんあるカテゴリの中の1つに過ぎません。

そのため、VRChatの衣装を探そうとしても、タグやカテゴリの検索結果にVRC以外の商品が混ざってきたり、VRChat特有の切り口（対応アバター、テイスト、体型など）で絞り込む手段がなかったりと、目的の商品にたどり着くまでに時間がかかる実情がありました。

Boothには日々たくさんのクリエイターが商品を出品していて、エコシステムとしてとても活発です。この商品データを、服装の種類やカラー、テイストといった切り口で整理して検索できたら便利だろうな、とはずっと思っていました。

そんな中、2025年10月にBoothがスクレイピングに関するガイドラインを更新しました。その中で、Boothのデータを活用した歓迎するアプリケーション例として「公開情報を収集し独自の検索やレコメンデーションに活用するアプリケーション」が挙げられていたんです。これを見て、自分が作りたかったものはまさにこれだと確信し、VRCFinderの開発に踏み切りました。（ガイドライン準拠の詳細は後述します）

:::ad

VRCFinderの概要 {#overview}

VRCFinderは、Boothに出品されているVRChat関連商品に独自のタグとキーワードを付与し、多角的に検索・閲覧できる無料のWebサービスです。アカウント登録は不要で、PCでもスマートフォンでも利用できます。

注意点として、VRCFinderはリアルタイムの検索サイトではありません。収集対象は2022年以降に発売された商品のうち、好き数（いいね数）500以上の商品で、定期的にデータを収集・分析して掲載しています。商品1つ1つにタグを付与する分析処理に時間がかかるため、対象年数も絞っています。

新着商品をいち早くチェックしたいなら、Boothを直接見るのが一番早いです。VRCFinderが得意なのは、たとえば「夏だから水着衣装を探したい」「ゴシック系の改変をしたいけど、どんな衣装があるだろう」といったシーンで、テイストや衣装タイプなどの切り口から関連商品をまとめて見つけること。シーズンや改変テーマが決まったときの商品探しを、より効率的にするためのサービスです。

:::post-link{url="https://vrcfinder.net/ja/" text="▶︎ VRCFinder - VRChat Booth検索補助サイト"}

データ収集と独自タグの仕組み {#how-it-works}

収集基準の背景

「2022年以降・好き数500以上」という基準は、現実的な運用ラインとして設定しています。基準を厳しくしすぎると掲載数が少なくなりますし、逆に緩くしすぎると対象商品が増えすぎて分析に時間がかかり、データの更新頻度が落ちてしまいます。掲載範囲と更新スピードのバランスを取った結果、この水準に落ち着きました。

タグ生成の流れ

独自タグの生成は、複数の情報源を組み合わせて行っています。

1. テキスト分析: 商品のタイトル・登録タグ・概要欄（説明文）から、対応アバターや衣装種別、特徴的なキーワードを抽出
2. 画像分析: サムネイル画像からカラーやテイスト（かわいい系、クール系など）を判定
3. 手動キュレーション: 自動分析の結果を精査し、誤分類の修正や不足タグの補完を実施

テキスト分析から画像分析へ

開発当初はテキスト分析のみでタグを生成していました。タイトルや概要欄から衣装種別や対応アバター名を抽出する仕組みです。これだけでもある程度は機能しましたが、テキストから得られる情報には限界がありました。

Boothの商品ページには、出品者が設定したタイトル・タグ・説明文が掲載されています。しかし、衣装のテイスト（かわいい系、クール系など）やメインカラー、装飾の特徴、体型の印象といった見た目から読み取れる情報は、商品ページに明記されていないことがほとんどです。出品者がわざわざ「この衣装はピンク系でかわいいテイストです」とは書かないですよね。

そこでサムネイル画像の分析を導入しました。画像を解析することで、衣装タイプ・テイスト・外見の特徴・カラー・装飾・体型といった、Boothの商品ページにも登録されていない客観的な情報をタグとして付与しています。これにより、「ゴシック系の衣装」「寒色系のロングコート」のような、抽象的なイメージからでも商品を探せるようになりました。

主な機能 {#features}

独自タグ・キーワード検索

Boothには存在しない独自のタグとキーワードで横断的に検索できます。「かわいい」「クール」「ゴシック」「和風」といったテイスト系のタグや、「ミニスカート」「ロングコート」「メイド服」といったアイテム種別のタグなど、直感的な言葉で商品を探せます。

対応モデル一覧

VRChatで人気のアバターモデルごとに、対応商品を一覧表示できます。自分が使っているアバターを選ぶだけで、そのアバター向けの衣装やアクセサリーを効率的に探せます。

カテゴリ・タグ一覧

ジャンルごとに整理されたカテゴリとタグの一覧ページを用意しています。「どんなタグがあるか分からない」という方でも、一覧から興味のあるタグをタップするだけで関連商品を閲覧できます。

テイスト・体型・カラーフィルタ

見た目の雰囲気（テイスト）、アバターの体型、メインカラーなどの条件で絞り込みが可能です。衣装だけでなくワールドの検索にも対応しています。改変のテーマが決まっているときに特に便利で、例えば「青基調で統一したい」ならカラーで青を選択するだけで、青色の衣装やワールドをまとめて見つけることができます。複数の条件を組み合わせれば、イメージにより近いアイテムに絞り込めます。

:::ad

技術的な工夫 {#technical}

ここでは、開発の中で実際にぶつかった課題と、その対応について紹介します。

ニュートラルな商品名の取得

Boothではクリエイターが独自に期間限定セールを行うことがあり、セール中は商品名の頭に「【50%OFF】」「【セール中】」といった文言を付けるのがBoothの文化です。

これ自体は購入者にとってありがたい情報なのですが、VRCFinderの商品一覧にそのまま表示すると、セール文言の分だけ本来の商品名が押し出されてしまい、レイアウトが崩れることが多発しました。しかもセールが終わると元の商品名に戻るので、表示が安定しません。

そこで、セール関連の文言を検出してリスト表示上では非表示にする処理を入れています。

タグの表記ゆれ統合

クリエイターさんの中には、タグに細かく商品の特性を登録してくれている方がいます。ただし、同じ意味でも表記が異なるケースが少なくありません。

• 「天使の輪」と「ヘイロー」
• 「手袋」と「グローブ」
• 「角」と「ホーン」
• 「Modular Avatar」と「ModularAvatar」
• 「魔法の杖」と「魔法杖」

これらをそのまま別のタグとして扱うと、検索結果が細分化されすぎてしまいます。「ヘイロー」で検索した人が「天使の輪」タグの商品を見逃すのはもったいない。VRCFinderでは、同義のタグを統合する辞書を用意して対応しました。

対応モデルの表記ゆれ対応

表記ゆれの問題は、対応アバターモデルの記載でも発生していました。例えば人気モデルの「Lapwing」は、クリエイターさんによって「ラプウィング」「ラップウイング」「ラップウィング」など、カタカナ表記にかなりのバラつきがあります。

Boothで地味に検索がしづらい原因の1つがこれです。正式名称で検索しても、別の表記で登録されている商品がヒットしません。VRCFinderでは対応モデルごとに表記ゆれの辞書を作成し、どの表記で登録されていても正しくキャッチアップできるようにしています。

制作者の情報収集にも {#for-creators}

VRCFinderは、もともと筆者自身がアセット制作のリサーチ目的で開発を始めたツールです。

独自タグで市場の商品を横断的に閲覧できるため、制作者にとっても便利なリサーチツールとして機能します。

• トレンドの把握: どんなテイストの衣装が人気なのか
• 競合調査: 特定のカテゴリにどれくらいの商品があるか
• ニッチの発見: まだ商品数が少ないカテゴリを見つける
• 対応アバターの選定: どのアバター向けの需要が大きいか

好き数500以上の人気商品に絞って掲載しているため、ユーザーに支持されているデザインの傾向やトレンドを把握するのにも役立ちます。結果として、制作者だけでなく購入者にとっても便利な検索ツールになりました。

ガイドライン準拠について {#guidelines}

VRCFinderのデータ収集は、Boothのガイドラインおよびスクレイピングに関するガイドラインの見直し（2025/10/10）に基づき、公開情報の範囲内で行っています。

Booth側が歓迎するアプリケーション例として「公開情報を収集し独自の検索やレコメンデーションに活用するアプリケーション」が挙げられており、VRCFinderはこの方針に沿って運用しています。

参考: Booth ガイドライン / スクレイピングに関するガイドラインの見直しについて (2025/10/10)

:::ad

まとめ {#conclusion}

VRChatのアセット制作者として、Boothの商品情報をもっと効率的にリサーチしたいという動機から始めた開発が、VRCFinderという形になりました。

Boothには素晴らしい商品がたくさんあります。VRCFinderはそのエコシステムの上に、検索の切り口を追加するツールです。テイスト・カラー・体型・対応モデルなど、多角的な条件で商品を探せることで、理想のアイテムとの出会いをサポートします。

今後も掲載商品の拡充やタグ精度の向上に取り組んでいきます。なお、VRCFinderは定期的に収集したデータを掲載しているため、価格や在庫などの最新情報は必ずBoothの商品ページでご確認ください。

:::post-link{url="https://vrcfinder.net/ja/" text="▶︎ VRCFinder - VRChat Booth検索補助サイト"}

「星々の幻境のチュートリアル動画、英語UIで全然分からない...」

そんな悩みを抱えていませんか？原神の「星々の幻境」は素晴らしいUGC（ユーザー作成コンテンツ）機能ですが、公式チュートリアルが英語UIのため、日本語でノードを探すのに苦労する方が多いようです。

本記事では、全チュートリアル動画の各ノード設定を日本語UIで撮影し、画像付きで解説します。動画と併せて活用すれば、スムーズに学習を進められます。

関連リンク：

• 星々の幻境 公式サイト
• 星々の幻境 公式X（旧Twitter）
• 星々の幻境 公式YouTube

:::toc

• 原神 - 星々の幻境とは
• クリエイターレベルについて
  • 解放される8つの主要機能
  • 各レベルで解放・拡張される機能
  • レベルアップ方法
• チュートリアル動画について
• 初めての幻境コンポーネントを作ろう
  • 2. カスタム変数の設定と変化
  • 4. プレイヤーノードグラフの構築
• 初めての幻境を作ろう
  • 2. 基本的なモーションデバイス
  • 3. エフェクト
  • 4. スキルとジョブ
  • 5. モンスターのステータスプリセット
  • 6. コリジョンとインタラクション
  • 7. ロジック設計
  • 8. 幻境を構築
  • 9. インターフェイス
• まとめ

:::

:::ad

原神 - 星々の幻境とは {#about-realm}

「原神 - 星々の幻境」は、2025年10月22日に原神に実装されたUGC（ユーザー作成コンテンツ）機能です。原神のアセットを使い、ビジュアルスクリプティング方式でオリジナルゲームを制作できます。

利用開始方法

1. 原神本編のプロローグをクリア
2. 「星々の幻境」モードがアンロック
3. 「自分の幻境」を選択
4. エディタ画面でノード編集開始

ノード編集は別ウィンドウで開き、ビジュアルノードを接続してゲームロジックを組み立てます。

:::ad

クリエイターレベルについて {#creator-level}

原神の星々の幻境では、一部機能の利用に「クリエイターレベル」が必要です。レベルは1～5まであり、各レベルで様々な機能が解放・拡張されます。

解放される8つの主要機能 {#creator-level-features}

クリエイターレベルに応じて、以下の8つの機能が段階的に解放・拡張されます：

1. クラウド保存機能 - 幻境データのクラウド保存
2. ヒラメキ応援プログラム - 創作支援プログラム
3. カスタムテキスト表示 - 独自テキストの表示
4. 綺麗なパフォーマンスボックス - パフォーマンス最適化機能
5. アチーブメント - 達成要素の実装
6. ステージ内データ機能 - ステージデータの管理
7. ランキング機能 - ランキングシステム
8. ランクシステム - プレイヤーランク機能

各レベルで解放・拡張される機能 {#creator-level-rewards}

レベルアップ方法 {#level-up-method}

星々の幻境には、幻境を遊んで得られる「幻境レベル」がありますが、これは「クリエイターレベル」とは別物です。ゲームをプレイしてもクリエイターレベルは上がりません。クリエイターレベルを上げるには、成長タスクを完了する必要があります。

クリエイターレベルをLv.2に上げる

クリエイターポータル内で「幻境コンポーネントクイズ挑戦」「幻境ステージクイズ挑戦」の2つのクイズに答えればOKです。チュートリアルを見れば簡単に答えられる内容なので、まずはレベル2を目標にしましょう。

Lv.3以降

作成した幻境を投稿し、一定数のプレイヤーに遊んでもらう必要があります。公式Discordなどで他クリエイターと交流しながら創作アイデアを広げていくのがオススメです。

報酬内容の変更について

クリエイターレベルの報酬内容は今後も更新される可能性があります。実際、2025年10月31日の調整で、宝箱を開くときの「開く」を表示するタブオプションがLv.3の報酬からLv.2に変更されました。

参考：クリエイターレベルと特典の調整について

:::ad

原神 - 星々の幻境 チュートリアル動画について {#tutorial-videos}

原神 - 星々の幻境のチュートリアル動画は、公式クリエイターポータル、YouTube、Xアカウントで公開されています。

2025年10月時点で投稿されている2つの動画シリーズ：

• 「初めての幻境コンポーネントを作ろう」 - コインを作成して5枚拾ってステージクリアする基本システムの学習
• 「初めての幻境を作ろう」 - 敵の出現、レベルアップ、宝箱開閉など複雑なコンポーネントの作成と連携の学習

どちらも理解しやすいチュートリアル動画ですが、英語UIで解説されているため、日本語で同じノードを探すのが意外と難しい場合があります。

本記事では、公式チュートリアルを補足する形で日本語UI版でのノード設定画像をまとめました。動画と併せてご覧いただければ、スムーズに学習を進められます。

:::ad

初めての幻境コンポーネントを作ろう {#first-component}

2. カスタム変数の設定と変化 {#component-02}

公式チュートリアル動画 https://www.youtube.com/watch?v=tXXd-y4qWnE

ノード「プレハブ_取得時のスコア獲得」

4. プレイヤーノードグラフの構築 {#component-04}

公式チュートリアル動画 https://www.youtube.com/watch?v=9tzrJLzuDGI

ノード「プレイヤー_幻境終了」

:::ad

初めての幻境を作ろう {#first-realm}

2. 基本的なモーションデバイス {#realm-02}

公式チュートリアル動画 https://www.youtube.com/watch?v=1EswERt2m3c

ノード「石畳起動」

ノード「石畳崩壊」

3. エフェクト {#realm-03}

公式チュートリアル動画 https://www.youtube.com/watch?v=I8F0bvl4jKY

ノード「松明を灯す」

4. スキルとジョブ {#realm-04}

公式チュートリアル動画 https://www.youtube.com/watch?v=yQoQn5IzJqc

ノード「戦闘能力を獲得」

5. モンスターのステータスプリセット {#realm-05}

公式チュートリアル動画 https://www.youtube.com/watch?v=It5UWLvC9fg

ノード「Lv40になる」

ノード「Lv90になる」

ノード「宝箱のアンロック」

ノード「宝箱を開く」

:::ad

6. コリジョンとインタラクション {#realm-06}

公式チュートリアル動画 https://www.youtube.com/watch?v=ZrlBqOkgLmE

ノード「松明を灯す」（変数追加版）

ノード「武器のロック解除」

ノード「鍵を拾ってゲートを開ける」

ノード「木のゲートを開ける」

ノード「幻境から退出」

7. ロジック設計 {#realm-07}

公式チュートリアル動画 https://www.youtube.com/watch?v=cL1VYOA5zDg

ノード「戦闘能力の獲得」（ヒルチャール出現版）

ノード「Lv40になるとき」（ヒルチャール対応版）

ノード「宝箱を開く」（鍵の出現版）

ノード「プレイヤー幻境終了」（エフェクト+終了装置有効化版）

:::ad

8. 幻境を構築 {#realm-08}

公式チュートリアル動画 https://www.youtube.com/watch?v=vHCWOKq8kTI

ノード「石畳起動」（5つの石畳を同時に作動版）

ノード「プレイヤー_幻境終了」（エフェクト追加版）

9. インターフェイス {#realm-09}

公式チュートリアル動画 https://www.youtube.com/watch?v=Z-f88zYNrlo

ノード「ポップアップ_幻境説明」「テキストボックス_武器を探す」「テキストボックス_鍵を探す」

※同じ構成で3つ作成し、プレハブインデックスだけ書き換える

:::ad

まとめ {#summary}

原神の「星々の幻境」は、大手ゲームタイトルである原神のアセットを使ってオリジナルゲームを制作できる画期的なUGC機能です。公式チュートリアル動画は非常に充実していますが、英語UIで解説されているため、日本語UIで同じノードを探すのに苦労することがあります。

本記事では、「初めての幻境コンポーネントを作ろう」「初めての幻境を作ろう」の2つのチュートリアルシリーズについて、日本語UIでの全ノード設定画面を画像付きで紹介しました。

これから星々の幻境を始める方へ

1. まずはチュートリアルから：公式の「初めての幻境コンポーネントを作ろう」シリーズで基本を学びましょう
2. クリエイターレベル2を目指す：2つのマーク試験に合格してLv.2に到達すれば、多くの機能が使えるようになります
3. 本記事を参考資料に：動画を見ながら本記事の画像を参照すれば、スムーズに学習を進められます

創作のヒント

星々の幻境では、原神の美麗なアセットを使って自由にゲームを制作できます。公式Discordでは他のクリエイターと交流したり、作品を共有したりできるので、積極的に参加してみるのもおすすめです。

クリエイターレベルを上げながら、様々な機能を使いこなして魅力的な幻境を制作してみてください。本記事が、原神 - 星々の幻境でのコンテンツ制作の助けになれば幸いです。

イラスト全体に色調補正をかける方法もあるんですが、肌の色や主線の色まで一緒に変わってしまうので、純粋な配色パターンの比較にはなりません。「肌と主線はそのままで、服と髪だけ変えたい」っていう、ちょっと細かい要望に応えるのが難しいんです。

そんなわけで、ブラウザで画像を読み込んで、残したい色を固定するだけで、ワンクリックで配色パターンを作れるツールを開発しました。

※サンプルイラストは管理人が描いたファンアートです

:::post-link{url="/ja/tools/character-color-pattern-maker/" text="▶︎ キャラクター配色パターンメーカー"}

:::ad

:::toc

• 配色パターン作りが面倒だった話
• どんなツール？
• できること
• 使い方
• 配色生成モードの種類
• 配色シートの活用方法
• 安心のブラウザ完結

:::

配色パターン作りが面倒だった話 {#introduction}

イラストを描いた後で「他の色だったらどうかな？」と試したくなることって、よくあるんですよね。でもそのためにレイヤーを複製してパーツごとに色を置き換えていく作業は、正直面倒です。

全体に色調補正をかける方法もありますが、肌の色や主線の色まで変わってしまって、純粋な配色の比較になりません。「肌と主線はそのままで、服と髪だけ変えたい」って思っても、手作業だと時間がかかります。

そんな悩みを解決するために、このツールを開発しました。ワンクリックで配色パターンを生成できて、偶然面白い色の組み合わせが見つかることもあります。

どんなツール？ {#what-is-ccpm}

イラストをアップロードして、ワンクリックで配色パターンを生成できるブラウザツールです。最大の特徴は、変更したくない色（肌、主線など）を固定して、不要な色（背景など）を除外できる点です。

これで、キャラの肌や髪の色はそのままに、服や小物の配色だけを変更できます。色彩理論に基づいたパターンや、ランダムで思いもよらない組み合わせも試せます。

:::post-link{url="/ja/tools/character-color-pattern-maker/" text="▶︎ キャラクター配色パターンメーカー"}

:::ad

できること {#features}

• 人間の知覚に近い色空間（CIELAB）でイラストを分析して、主要な色を抽出
• 主線の自動検出機能で、アウトラインの色を簡単に固定
• 画像をクリックして、変更したくない色を固定、不要な色を除外
• ランダム探索、色彩理論、パステル調など、多彩な配色生成モード
• 生成された配色をリアルタイムでプレビュー
• 変更前後のイラストと主要色をまとめた配色パターンシートをPNG画像でダウンロード
• すべての処理がブラウザ内で完結、イラストデータは外部に送信されない
• ドラッグ＆ドロップ対応で、シンプルな操作性

使い方 {#how-to-use}

基本的な流れは3ステップです。

1. 画像をアップロードする

配色を変更したいイラストを、画面左側にドラッグ＆ドロップするか、クリックしてファイルを選択します。背景が透過されたキャラ単体のイラストが最も効果的です。

2. 色を固定・除外する

画像が分析されたら、変更したくない色を設定します。元画像をクリックして、その部分の色を直接「固定」するのが直感的でおすすめ。

まず肌色や髪色をプレビュー上でクリックして固定。次に背景色などを除外。最後に自動検出された主線色も固定すれば精度が上がります。

3. 配色パターンを生成＆ダウンロード

「ランダム探索」や各種配色パターンボタンをクリックすると、固定・除外した色以外が新しい配色に変わります。同じボタンを連続でクリックすると、どんどん違うパターンが出てきます。気に入った配色が見つかったら、「配色シートをダウンロード」ボタンで保存しましょう。

配色生成モードの種類 {#palette-types}

いろんな配色パターンを試せるように、複数のモードを用意しています。

• ランダム探索: クリックするたびに、まったく新しい色の組み合わせを提案します。思わぬ発見があるかも。
• 色彩理論モード: アナロガス（類似色）やコンプリメンタリー（補色）など、色彩理論をベースにした配色を生成。まとまりがありつつ新鮮な印象になります。
• パステル調: 全体的に淡く、優しい色合いに変換。ファンシーな雰囲気を出したい時に。
• ビブラント: 彩度と明度を引き上げて、鮮やかで活き活きとした配色に。ポップで元気なキャラに合います。
• その他: 色を混ぜ合わせる「ブレンド」や、独創的な「クリエイティブ」モードなど、いろんなパターンを試せます。

配色シートの活用方法 {#advanced-tips}

好みの配色が見つかったら、「配色シートのダウンロード」ボタンを押してください。

ダウンロードできる配色パターンシートは、変更前後のイラストが一目で比較できて、主要なカラーコードも記載されています。

• デザイン資料として: 新しい配色案をチームやクライアントに提案する時の比較資料に。
• SNSでの共有: 「どの色が好き？」とフォロワーに聞くのにも使えます。
• セルフレビュー: いろんなパターンを見比べることで、自分の配色の好みや新しい可能性を発見できます。

安心のブラウザ完結 {#tech-info}

このツールは、プライバシーを最優先に設計しています。画像のアップロードから色彩分析、配色の生成、画像のダウンロードまで、すべての処理がブラウザ内で完結します。

イラストデータが外部のサーバーに送信・保存されることは一切ありません。オフライン環境でも、一度ページを読み込んでいれば基本的な機能は動作します。未公開の作品でも、安心して使えます。

:::post-link{url="/ja/tools/character-color-pattern-maker/" text="▶︎ キャラクター配色パターンメーカー"}

そんなわけで、描きかけの手のラフ画像を半透明でカメラ映像に重ねて、描きたい手のポーズと角度で撮影できる「ハンドトレスカメラ」を作りました。

すべての処理はブラウザ内で完結するので、画像や写真が外部に送信されることはありません。

:::post-link{url="/ja/tools/hand-trace-camera/" text="ハンドトレスカメラ"}

:::ad

:::toc

• 資料撮影の難しさ
• どんなツール？
• できること
• 使い方
• ブラウザで完結

:::

:::ad

資料撮影の難しさ {#introduction}

手は人体の中でも特に複雑な構造を持つパーツです。5本の指それぞれが3つの関節を持ち、手首の角度も含めると無限に近いポーズのバリエーションが存在します。

資料撮影でよくある悩み：

• 描きたい角度で自分の手を撮影するのは物理的に困難
• シャッターを押す動作でポーズが崩れてしまう
• ラフと実際の手の位置関係を確認しながら撮影するのが難しい
• 利き手と逆の手を撮影する際の不自然さ

「ハンドトレスカメラ」は、これらの問題を「ラフ画像のオーバーレイ表示」で解決します。

どんなツール？ {#what-is-htc}

描きかけの手のラフ画像を半透明でカメラ映像に重ね合わせることで、理想的な手の資料写真を撮影できるツールです。

「描きたい手のポーズが決まっているけど、正確な形が掴めない」「微妙な指の角度を確認したい」「手と物の持ち方を正確に描きたい」そんな時に使えます。

ラフ画像の透明度を自在に調整できるため、実際の手とラフを重ねて比較しながら、最適な角度とポーズを見つけられます。

:::post-link{url="/ja/tools/hand-trace-camera/" text="ハンドトレスカメラ"}

:::ad

できること {#features}

• アップロードした画像を半透明でカメラ映像に重ね合わせ、リアルタイムで確認しながら撮影可能
• 透明度を0〜100%の範囲で自由に調整。ラフと実写のバランスを細かくコントロール
• サイズ（10〜500%）、位置（X/Y軸）、回転（-180〜180度）を細かく調整して、ラフと実際の手をピッタリ合わせられる
• モバイルデバイスでは、1本指で移動、2本指でピンチ拡大・回転が可能
• フロント/バックカメラの切り替えに対応（複数カメラ搭載デバイス）
• 3:4の縦長アスペクト比で、900×1200ピクセルの高解像度PNG画像として保存
• すべての処理がブラウザ内で完結。画像や写真が外部サーバーに送信されない
• 画像の調整がすぐにプレビューに反映され、ストレスフリーな操作感

使い方 {#how-to-use}

基本的な流れは3ステップです。

1. ラフ画像をアップロード

描きかけの手のラフ画像をドラッグ＆ドロップ、またはクリックしてアップロードします。PNG、JPG、WEBP形式に対応。

2. 画像を調整してカメラを開始

透明度、サイズ、位置、回転を調整して、ラフと実際の手が重なるようにします。準備ができたら「カメラを開始」ボタンをクリック。

3. ポーズを合わせて撮影

実際の手をラフに合わせてポーズを取り、「撮影」ボタンをクリック。撮影した画像はプレビューで確認後、ダウンロードできます。

モバイルデバイスでは、画面をタッチして直感的に画像を調整できます。

:::ad

ブラウザで完結 {#privacy}

このツールは、ブラウザだけで全ての処理が完結するように作られています。特別なソフトウェアのインストールは必要ありません。

画像のアップロード、カメラ映像の処理、画像の合成まで、すべての処理がブラウザ内で行われます。アップロードしたラフ画像や撮影した写真が、外部のサーバーに送信・保存されることはありません。

:::post-link{url="/ja/tools/hand-trace-camera/" text="ハンドトレスカメラ"}

先日、Boothとitch.ioとSteamにて、AnimSprite Pixelizerという2Dゲーム開発効率化ツールをリリースしました。CLIP Studioなどで作画したキャラ歩行アニメーション等を、共通のピクセルサイズで一括変換してスプライトシート書き出しができるアプリです。

Boothとitch.ioは商品情報と画像を登録すれば、すぐに販売できます。しかしSteamは、事前にサポートチームの審査に合格する必要があります。

AnimSprite Pixelizerの場合、アプリ本体の審査は一発で合格しましたが、商品画像について何度か訂正を求められました。今回は、Steam販売に必要な14枚の画像とデザインの注意点についてまとめます。

:::post-link{url="/ja/product/animsprite-pixelizer/" text="AnimSprite Pixelizer"}

:::ad

:::toc

• なぜ14枚も必要なのか
• 必要な画像チェックリスト
• デザインの注意点
• 効率的な制作のコツ

:::

:::ad

なぜ14枚も必要なのか {#why-so-many-images}

「ストアの画像を用意するのメンドクサ！！」

Steam販売経験のあるクリエイターさんは100%同じ言葉を口にするでしょう。それもそのはず。Steamの審査には最低14枚ほどの画像を用意する必要があるんです。

「なんでそんなに必要なの！？」と思う人はSteamをよく見てみてください。

• 検索時のリストに表示される小さな画像（小型カプセル）
• フロントページ上部の特集画像（メインカプセル）
• 季節セールに表示される縦長の画像（垂直カプセル）
• ライブラリでゲームを選択したときに、プレイ時間などと一緒に表示される上部のヒーロー画像

これらすべてを準備しなければなりません。

しかも、これらの画像は厳格にサイズが決められています。例えば、ヘッダーカプセルは920×430px、小型カプセルは462×174pxです。完璧に同じサイズでなければなりません。SteamWorksでは、ドロップされた画像のサイズに基づいて各画像が設定されるため、少しでもサイズが違うと拒絶されます。

:::ad

必要な画像チェックリスト {#image-checklist}

登録に必要な画像のチェックリストを作成しました。これを見ながら、Photoshopなど画像作成ツールでキャンバスを作成してデザインしましょう。

Steamのストア情報に必要なグラフィックアセットは、「ストアアセット」「スクリーンショットアセット」「ライブラリアセット」の3種類です。下記のチェックリストを参考に制作しましょう。

※記事執筆時点（2025年7月）の指定サイズです。

ストアアセット

スクリーンショットアセット

• スクリーンショット: 1920×1080（推奨）× 最低5枚

ライブラリアセット

その他

• コミュニティアイコン: 184×184

:::ad

デザインの注意点 {#design-cautions}

画像サイズと同じく、デザインについても拒絶理由が存在するので注意しましょう。

⚠ 注意点A：「ロゴ以外の文字を乗せるな！」

実際にデザインをしていると、良かれと思ってテキストを追加したくなりますが、ロゴ以外の文字があると不合格になるので注意してください。下記のような小さな文字でもNGです。

マーケティング用コピーや引用など、ロゴ以外の文字情報を追加すると不合格になります。

⚠ 注意点B：「とにかく視認性を良く！」

上記の場合は「アプリの操作イメージを伝えたい」という思いからUIのスクショなどを組み込んでデザインしましたが不合格になりました。UI画像を削除して要素を大きく表示したら合格しました。

確かに客観的に見ても修正後のほうが視認性が良いですよね。サムネイルであることを意識しながらデザインするのが大切です。

効率的な制作のコツ {#conclusion}

今回の注意点を参考にしてもらえれば、Steamのストア情報もスムーズに登録できるはずです。

Steamサポートチームはかなり具体的に修正内容を通知してくれるので助かりました。画像サイズについて説明する記事はいくつもありますが、NGデザインについてはほぼ情報がなかったので、参考にしていただけると幸いです。

最初はヘッダーカプセル（920×430）あたりからデザインを始めて、完成したら別名保存をして、キャンバスサイズを変更して、要素の位置だけ整えて別名保存して、を繰り返せば、位置を変えるだけで複数のパターンを効率的に制作できます。

Steamストア申請で面倒なのは、SteamWorksアカウント取得時の税務情報の登録と、ストア画像の作成だと思うので、まずはここを乗り越えてゲームをリリースしましょう。

また、Steam販売に際してローカライズしたほうがよい言語については、以前の記事で解説しているので、そちらも御覧ください。

それとAnimSprite Pixelizerもヨロシクネ。自分で絵も描く2Dゲーム開発者の人にオススメです。

:::post-link{url="/ja/product/animsprite-pixelizer/" text="AnimSprite Pixelizer"}

:::ad

先日、Boothとitch.ioとSteamにて、AnimSprite Pixelizerという2Dゲーム開発効率化ツールをリリースしました。CLIP Studioなどで作画したキャラ歩行アニメーション等を、共通のピクセルサイズで一括変換してスプライトシート書き出しができるアプリです。

アプリが完成したあと、せっかくなので多言語化対応にも挑戦してみました。

ここで問題になるのが「どの言語にローカライズすべきか？」という点です。この記事では、個人・小規模でゲームを開発している方に向けて、どの言語を優先的に対応すべきかを、Steamが毎月公開している「Steam ハードウェア&ソフトウェア調査」のデータから分析していきます。

:::post-link{url="/ja/product/animsprite-pixelizer/" text="AnimSprite Pixelizer"}

:::post-link{url="https://store.steampowered.com/hwsurvey/" text="Steam ハードウェア&ソフトウェア調査"}

:::ad

:::toc

• Steam言語別データの最新状況
• トップ10言語と市場動向
• ローカライズの優先順位
• 実装で気をつけるポイント
• 多言語化を前提とした設計

:::

:::ad

Steam言語別データの最新状況 {#steam-language-data}

Steam公式の「Hardware & Software Survey」から得られた最新データによると、現在のSteam利用者の言語分布は以下のようになっています。任意参加の調査ですが、Steamにおける最も信頼性の高い公式統計です。

Steamハードウェア＆ソフトウェア 調査: June 2025

トップ10言語と市場動向 {#top-languages}

現在のSteam言語別利用者ランキングは以下のとおりです：

注目すべき市場トレンド

📈 成長している言語市場：

• 簡体中国語：+2.61%（最大の成長率）。中国国内のPCゲーム市場の成熟が背景にあると考えられます。
• ロシア語：+0.43%。インディーゲームとの親和性が高いとされる市場です。
• 韓国語：+0.27%。熱心なゲームコミュニティを持つ市場です。
• 繁体中国語：+0.07%
• タイ語：+0.07%

📉 減少している言語市場：

• 英語：-1.93%（最大の減少率）
• スペイン語（スペイン）：-0.40%
• ポルトガル語（ブラジル）：-0.35%
• ドイツ語：-0.19%

日本語ユーザー比率はわずか2.59%。世界の広さを感じますね。

最も注目すべきは、英語と簡体中国語で全体の63%以上のユーザーをカバーできるという点です。ローカライズをするなら、この2言語への対応は必須級と言えるでしょう。

特に簡体中国語ユーザーは近年急増しており、「黒神話: 悟空」が大きな話題となった2024年8月の調査では、簡体中国語が英語を抜いて1位になるという逆転現象も発生しました。

:::ad

ローカライズの優先順位 {#localization-strategy}

限られた開発リソースで、どの言語を優先すべきかを考えてみましょう。

Tier別優先度の考え方

🥇 Tier 1（必須レベル）

• 英語（36.31%）- 依然として最大のユーザーベース、グローバル標準言語
• 簡体中国語（26.73%）- 急成長中、将来性が極めて高い

この2言語だけで既に63%以上のユーザーをカバーできます。小規模チームや個人開発者は、まずこの2つに集中するのが最も効率的です。

🥈 Tier 2（高優先）

• ロシア語（9.46%）- 安定した成長傾向、大きなユーザーベース
• スペイン語（スペイン）（4.34%）- 減少傾向ですが依然として大きな市場。また、ラテンアメリカの広大なスペイン語圏ユーザーにもリーチできる可能性があります。
• ポルトガル語（ブラジル）（3.87%）- 南米の重要市場

🥉 Tier 3（中優先）

• ドイツ語（2.86%）- 欧州の主要市場
• 日本語（2.59%）- 高い購買力、品質を重視する市場
• フランス語（2.33%）- 欧州・カナダ市場

🌟 Tier 4（新興市場・将来性）

• 韓国語（1.48%）- 成長中（+0.27%）、ゲーム文化が発達
• 繁体中国語（1.39%）- 台湾・香港市場
• タイ語（0.88%）- 東南アジアの成長市場

段階的なローカライズ戦略

日本の個人開発者がローカライズを進める場合、下記のような段階的アプローチが現実的でしょう。

1. Phase 1：日本語・英語対応（開発者の母語＋グローバル標準）
2. Phase 2：簡体中国語を追加（最大の成長市場を狙う）
3. Phase 3：ロシア語、韓国語を追加（成長中の主要市場を押さえる）
4. Phase 4：その他のTier 2-3言語（スペイン語、ポルトガル語など）を順次追加

実装で気をつけるポイント {#practical-tips}

フォント対応

特に中国語、韓国語、日本語、タイ語などは、それぞれ専用のフォントが必要です。Webフォントやシステムフォントで対応できるか、あるいはフォントファイルを同梱する必要があるかを事前に確認しましょう。

文字数の変動

言語によってテキストの長さは大きく変わります。UIデザインはこれらの変動に対応できるよう、柔軟性を持たせることが重要です。

• 短くなる傾向：日本語、中国語、韓国語（表意文字）
• 長くなる傾向：ドイツ語、ロシア語（複合語や格変化）

ボタンやテキストボックスがはみ出さないよう、あらかじめ長めのテキストでテストしておくと安心です。

ドキュメントの整備（FAQ）

多言語化するということは、様々な言語でお問い合わせが届く可能性があるということです。すべての質問に個別対応するのは大変な労力です。あらかじめ想定される質問とその回答（Q&A）をドキュメントとしてまとめておき、対応言語に翻訳して公開しておきましょう。これにより、ユーザーは自己解決でき、開発者のサポート負担を大幅に軽減できます。

右から左へ記述する言語（RTL）

アラビア語やヘブライ語など、右から左へ記述する言語（RTL: Right-to-Left）に対応する場合、UI全体のレイアウト反転が必要になることもあります。Tier上位ではありませんが、将来的に対応する可能性があれば念頭に置いておくと良いでしょう。

多言語化を前提とした設計 {#conclusion}

今回の調査で、理想的にはランキング上位の10言語に対応できれば、大半のSteamユーザーにリーチできることがわかりました。

昨今はChatGPT、Claude、Geminiといった生成AIの活用により、非常に精度の高い翻訳が手軽に可能になっています。UIやシステムテキストであれば、AI翻訳だけでもかなりの品質が期待できるでしょう。もちろん、ストーリーやキャラクターの会話など、ゲームの没入感を左右する重要なテキストは、プロの翻訳家やネイティブスピーカーによるチェックが望ましいです。

重要なのは、開発の初期段階から多言語化を前提とした設計を心掛けることです。

テキストをプログラム内に直接書き込む（ハードコードする）のではなく、言語ごとのCSVファイルやJSONファイルから読み込む形式にしておけば、後から対応言語を増やすのが非常に容易になります。

フォントの準備や、文字数増減によるレイアウト崩れを防ぐUI設計など、事前に考慮すべき点はありますが、実装面のハードルはAIの進化によって着実に下がってきています。グローバル市場に挑戦するために、ぜひ多言語化を検討してみてください。

:::ad

前回の記事ではGodotの基礎学習についてまとめました。今回はその続編として、Udemyの「Godot4: Build a 2D Action-Adventure Game」を完走し、実践的な2Dアクションアドベンチャーゲームの開発に挑戦しました。

基本的なプレイヤー操作から、NPCとの対話、パズル、戦闘システムまで体系的に網羅されたコースです。この記事では、コースを通して学んだGodotの重要機能や概念を整理して共有します。

:::ad

:::toc

• コース概要
• Godotの重要機能・概念ノート
  • Process Mode：ポーズ機能の制御
  • CharacterBody2DのMotion Mode
  • InputMap：キーバインド管理
  • 入力処理の使い分け
  • move_and_slideとmove_toward
  • グループ：柔軟なオブジェクト判定
  • Collision Layers/Masks
  • Terrains：オートタイル作成
  • Marker2D：管理ノードの定番
  • Editable ChildrenとScene継承
  • Autoload：シーンをまたぐデータ管理
  • modulateによるホワイトフラッシュ
  • AnimatedSprite2D vs AnimationPlayer
• まとめ

:::

:::ad

コース概要 {#course-overview}

「Godot4: Build a 2D Action-Adventure Game」は、2Dアクションアドベンチャーゲームをゼロから作り上げる英語コースです。開発を進めるなかで、こんな疑問が自然に解消されていきます。

• エリア間の移動はどう実装する？
• オブジェクトを押す仕組みは？
• 開封済み宝箱の状態をどう保持する？
• NPCとの会話をどう管理する？
• 複数スイッチで開く扉の実装方法は？
• 被ダメ時のホワイトフラッシュはどうやる？

具体的なカリキュラムとしては、プレイヤーの8方向移動、Terrainsによるオートタイル環境構築、Y-Sortによる重なり順制御、RigidBody2Dの物理パズル、ダイアログシステム、Autoloadによるデータ永続化、敵AI＋ノックバック付き戦闘システムなどを一通りカバーしています。

前回紹介した「Godot Engineで気軽に2Dゲームを作ろう」より難易度は上がりますが、「ゲーム開発で本当に必要な知識」が詰まった良コースです。Udemyは頻繁にセールがあるので、お気に入り登録して狙うのがおすすめです。

:::post-link{url="https://trk.udemy.com/Oex4on" text="Godot4: Build a 2D Action-Adventure Game (Udemy)"}

:::ad

Godotの重要機能・概念ノート {#godot-deep-dive}

ここからは、コースで特に重要だと感じた機能を深堀りします。

Process Mode：ポーズ機能の制御 {#process-modes}

「NPCと会話中は背景の敵やプレイヤーは止めたいが、ダイアログの操作は続けたい」――ゲーム開発でよくあるこの要件を、Godotでは各ノードのProcess Modeで解決します。

• Pausable（デフォルト）: get_tree().paused = trueで停止する。プレイヤーや敵など、ゲーム世界のオブジェクト向け。
• Always: ポーズを無視して常に動作。会話中のNPCやUI、BGMに使う。
• When Paused: ポーズ中だけ動作。ポーズメニュー専用UIに最適。

UnityではTime.timeScale = 0でゲーム全体を止めつつ、個別のスクリプトでTime.unscaledDeltaTimeを使い分ける必要がありましたが、Godotではノード単位でProcess Modeを設定するだけ。非常にスマートです。

実装例：ダイアログ表示中にゲームをポーズする

※会話中はシーンが停止し、会話終了と同時に解除される

# NPC.gd
# このNPCノードのProcess Modeをインスペクターで "Always" に設定しておく

func _process(delta):
    if Input.is_action_just_pressed("interact") and can_talk:
        if is_dialog_active():
            close_dialog()
            get_tree().paused = false
        else:
            open_dialog()
            get_tree().paused = true

NPC自身は止めずにゲーム全体をポーズすることで、ダイアログの開閉を安全に処理できます。

:::ad

CharacterBody2DのMotion Mode {#motion-modes}

CharacterBody2DにはMotion Modeという設定があり、ゲームのジャンルに応じた物理挙動を切り替えられます。プロジェクト開始時に必ず確認すべき項目です。

• Grounded（デフォルト）: 重力が適用され、is_on_floor()が機能する。プラットフォーマーや横スクロールアクション向け。
• Floating: 重力なし、床の概念もなし。トップダウンのアクションゲームやシューティング向け。

# Player.gd (Motion Modeを "Floating" に設定)
extends CharacterBody2D

@export var speed: float = 200.0

func _physics_process(delta):
    var direction = Input.get_vector("move_left", "move_right", "move_up", "move_down")
    velocity = direction * speed
    move_and_slide()

設定を間違えると意図しない重力が発生したり、床判定がおかしくなるので注意。

:::ad

InputMap：キーバインド管理 {#input-map}

UnityではInput.GetKey(KeyCode.A)のようにキーを直接指定しがちですが、GodotのInput Map（プロジェクト設定 → Input Map）では「アクション名」を定義してキーを紐づけます。コードでは"move_left"のような抽象名で入力を扱うため、可読性が高く、キーコンフィグの実装も容易です。

func _process(delta):
    # 単発の入力（押した瞬間）
    if Input.is_action_just_pressed("interact"):
        open_chest()

    # 継続的な入力（押し続けている間）
    if Input.is_action_pressed("dash"):
        speed = DASH_SPEED
    else:
        speed = NORMAL_SPEED

    # 4方向を正規化されたVector2で取得（非常に便利）
    var direction = Input.get_vector("move_left", "move_right", "move_up", "move_down")
    velocity = direction * speed
    move_and_slide()

Input.get_vector()は4アクションから正規化されたVector2を返してくれるため、トップダウンの移動処理を1行で書けます。

:::ad

入力処理の使い分け {#input-processing}

InputMapでアクションを定義したら、入力の「状態」に応じて適切なメソッドを使い分けます。

:::post-link{url="https://docs.godotengine.org/ja/4.x/classes/class_input.html" text="Inputについて (Godot公式ドキュメント)"}

func _process(delta):
    # 1回限りのアクション
    if Input.is_action_just_pressed("jump"):
        if is_on_floor():
            velocity.y = JUMP_VELOCITY

    if Input.is_action_just_pressed("attack"):
        perform_attack()

    # 継続的なアクション
    if Input.is_action_pressed("dash"):
        current_speed = dash_speed
    else:
        current_speed = normal_speed

    # チャージ系：押している間ためて、離したら発動
    if Input.is_action_pressed("charge"):
        charge_power += charge_rate * delta
        charge_power = min(charge_power, max_charge)

    if Input.is_action_just_released("charge"):
        fire_charged_shot(charge_power)
        charge_power = 0.0

よくある間違いとして、is_action_pressed()で射撃を処理すると毎フレーム弾が発射されてしまいます。単発アクションには必ずis_action_just_pressed()を使いましょう。

:::ad

move_and_slideとmove_toward {#movement-functions}

Godotの移動処理で中心となる2つの関数です。

• move_and_slide(): CharacterBody2Dの主力。現在のvelocityに基づいて移動し、壁や床との衝突を自動処理してくれる。
• move_toward(target, delta): 現在の値を目標値に向かって少しずつ変化させる。滑らかな加速・減速に使う。

この2つの使い分けが重要になるのが、ノックバック実装の場面です。コースで実際にぶつかった問題を紹介します。

velocityを直接代入する方式だと、ノックバック中にプレイヤーが移動入力をした瞬間、ノックバック効果が一瞬で消えてしまいます。move_towardで段階的に速度を変化させることで、ノックバックが自然に減衰しながら通常移動に戻る挙動を実現できます。

# 直接代入だとノックバックが即消える
func move_player():
    var move_vector = Input.get_vector("move_left", "move_right", "move_up", "move_down")
    velocity = move_vector * move_speed  # ノックバックの速度が即上書きされる

# move_towardで段階的に変化させる
@export var acceleration: float = 500.0

func move_player():
    var move_vector = Input.get_vector("move_left", "move_right", "move_up", "move_down")
    var target_velocity = move_vector * move_speed
    velocity = velocity.move_toward(target_velocity, acceleration * delta)

# ノックバック処理
func apply_knockback(direction: Vector2, strength: float):
    velocity += direction * strength

move_towardの第2引数は「1フレームで目標にどれだけ近づくか」を指定します。acceleration * deltaの形で使うことで、フレームレートに依存しない滑らかな遷移が得られます。

:::ad

グループ：柔軟なオブジェクト判定 {#groups}

「攻撃が当たったオブジェクトが敵かどうか判定したい」――この要件に対して、Godotではグループを使います。

UnityのTagシステムに近い概念ですが、重要な違いがあります。Unityでは1つのGameObjectに1つのTagしか設定できませんでした。Godotのグループは複数設定可能なので、「このオブジェクトは "enemies" であり "damageable" でもある」といった柔軟な分類ができます。

設定方法はシンプルで、ノードのインスペクター → Nodeタブ → Groupsからグループ名を追加するだけ。コードではis_in_group()で判定します。

# Playerの攻撃判定用Area2Dに接続
func _on_sword_area_body_entered(body: Node2D):
    if body.is_in_group("enemies"):
        body.take_damage(attack_power)
    elif body.is_in_group("pushable"):
        pass  # 押せるオブジェクトの処理

:::ad

Collision Layers/Masks {#collision-system}

衝突判定をきちんと整理しないと、「プレイヤーの剣が味方にも当たる」「敵同士が引っかかる」といった問題が起きます。GodotのCollision Layers/Masksは、これを防ぐ仕組みです。

• Layer: そのオブジェクトが「どの層に存在するか」
• Mask: そのオブジェクトが「どの層と衝突判定を行うか」

たとえば、Player（Layer 1）、Enemies（Layer 2）、Weapons（Layer 3）と分けた場合：

# 武器のMaskで敵のみ検出するため、この関数には敵だけが入ってくる
func _on_weapon_area_body_entered(body):
    if body.is_in_group("enemies"):
        body.take_damage(attack_power)

「プロジェクト設定」→「Layer Names」で各レイヤーに名前を付けておくと、インスペクターでの設定が格段に分かりやすくなります。

:::ad

Terrains：オートタイル作成 {#terrains}

GodotのTerrains機能は、いわゆるオートタイルを驚くほど簡単に作れるシステムです。UnityでRule Tileを使ったことがある人なら、その手軽さに感動するはずです。

TileSetリソース内の「Terrains」タブで、タイルの各辺がどの地形タイプに接するかを視覚的にペイントするだけ。TileMapエディタでブラシツールを使えば、境界線を自動判定して適切なタイルを配置してくれます。

便利機能として、ランダムブラシ（ダイスアイコン）で複数タイルからランダム選択、確率制御で特定タイルの出現頻度調整、「F」キーで全タイルに衝突判定を一括適用などがあります。

:::ad

Marker2D：管理ノードの定番 {#marker2d}

Unityでは空のGameObjectにスクリプトをアタッチして「マネージャー」を作るのが定番でしたが、GodotではMarker2Dがその役割を担います。

Marker2Dは位置情報（Transform）だけを持つ最も軽量な2Dノードです。レンダリングも物理演算もないため、GameManagerやPuzzleManagerのようなシーン管理スクリプトの置き場所として最適です。Unityの空GameObjectと違い、エディタ上で十字マーカーが表示されるので視認性も良好です。

:::ad

Editable ChildrenとScene継承 {#scene-inheritance}

ベースシーンからバリエーションを作成する方法は2つあります。用途に応じた使い分けが重要です。

• Editable Children: シーンに配置したインスタンスを右クリック→「Editable Children」で中身を直接編集。変更はその配置先にのみ反映される。見た目やセリフだけ違うモブNPCの量産に便利。
• Scene Inheritance: ベースシーン（BaseNPC.tscn）を継承して新しいシーン（Shopkeeper.tscn）を作成。親の機能を引き継ぎつつ独自機能を追加できる。「話す」＋「売買する」機能を持つ商人NPCなど、機能的に異なる派生種に最適。

:::ad

Autoload：シーンをまたぐデータ管理 {#autoload}

「宝箱を開けてエリア移動して戻ってきたら、また閉じている」――シーン切替でデータが失われる問題は、GodotではAutoloadで解決します。UnityのDontDestroyOnLoad＋シングルトンに相当する機能です。

プロジェクト設定でスクリプトをAutoloadに登録すると、ゲーム起動時に自動読み込みされ、どのシーンからでもグローバルにアクセスできます。

# GameManager.gd (AutoLoadに登録)
extends Node

var opened_chests: Array[String] = []
var player_hp: int = 3
var player_spawn_position: Vector2

# TreasureChest.gd
extends StaticBody2D

@export var chest_id: String  # "forest_chest_01"などユニークIDを設定

func _ready():
    if GameManager.opened_chests.has(chest_id):
        play_open_animation(false)

func open_chest():
    GameManager.opened_chests.append(chest_id)
    play_open_animation(true)

プレイヤーのHP、スコア、インベントリ、クエスト進捗など、シーンをまたいで維持したいデータはすべてAutoloadで管理できます。

:::ad

modulateによるホワイトフラッシュ {#visual-effects}

ダメージを受けた瞬間に一瞬白く光る「ホワイトフラッシュ」は、プレイヤーへのフィードバックとして非常に効果的です。Godotではmodulateプロパティで簡単に実装できます。

modulateはノードとその子孫の色に乗算されるカラー値で、デフォルトは白(1, 1, 1)。値を大きくすると明るく、小さくすると暗くなります。CharacterBody2Dのmodulateを変更すれば、子のAnimatedSprite2Dも自動で色が変わるため、個別操作は不要です。

# Player.gd
func take_damage(amount):
    # ...ダメージ計算...
    flash_effect()

func flash_effect():
    modulate = Color(2, 2, 2)  # 白く光らせる
    await get_tree().create_timer(0.1).timeout  # 0.1秒待機
    modulate = Color(1, 1, 1)  # 元に戻す

await get_tree().create_timer(0.1).timeoutは、タイマーノードを追加せずに一時的な待機処理を1行で書ける便利な記法です。

:::ad

AnimatedSprite2D vs AnimationPlayer {#animation-systems}

Godotには主要な2Dアニメーションシステムが2つあり、用途で使い分けます。

AnimatedSprite2D

スプライトフレームアニメーション専用。歩行、攻撃、アイドルなど、スプライトシートの切り替えだけで完結するアニメーションに最適です。

if velocity.x > 0:
    $AnimatedSprite2D.play("move_right")
elif velocity.x < 0:
    $AnimatedSprite2D.play("move_left")
else:
    $AnimatedSprite2D.stop()

AnimationPlayer

位置、回転、スケール、任意のプロパティを同時制御できる汎用アニメーションシステム。UnityのAnimatorに近い存在で、剣を振る動作やUI演出、カメラワークなど複合的な制御に使います。

func attack():
    var player_animation: String = $AnimatedSprite2D.animation
    if player_animation == "move_right":
        $AnimatedSprite2D.play("attack_right")
        $AnimationPlayer.play("attack_right")  # 剣の位置・角度を制御

使い分けの指針

実際の開発では、キャラクターの基本動作にAnimatedSprite2D、武器やエフェクトの動作にAnimationPlayerを組み合わせて使うのが一般的です。

:::ad

まとめ {#conclusion}

今回のコースを通して、Godotの設計思想の一貫性と2D開発における強さを改めて実感しました。Process Mode、Motion Mode、Collision Layersといった概念が統一的に設計されており、「やりたいこと」に対する解決策がストレートに用意されています。

特に、Terrains、Y-Sort、move_and_slide()など、2Dゲーム開発で「こういう機能が欲しかった」という部分が標準搭載されている点は大きな魅力です。Unity経験者にとって、Godotは学習コストの低さと開発の快適さを両立した有力な選択肢だと感じました。

:::post-link{url="https://trk.udemy.com/Oex4on" text="Godot4: Build a 2D Action-Adventure Game (Udemy)"}

Godot Engineは、2014年にオープンソース化されたMITライセンスのゲーム開発エンジンです。2023年のUnity Runtime Fee騒動をきっかけに移行先として注目が集まり、知名度が一気に上がりました。

※学習中のUdemyコース「Godot4: Build a 2D Action-Adventure Game」

この記事では、Unity開発者がGodotを学ぶ際に役立つ情報をまとめています。Udemyコースの受講感想、Godotに触れて感じたこと、UnityとGodotの概念対応表、コードの書き方の違いなどを紹介します。

:::post-link{url="https://godotengine.org/ja/" text="Godot Engine 公式サイト"}

:::ad

:::toc

• Godot Engineに対するQ&A
• Udemy講座を受講した感想
• Godotに触れて感動したこと
• Unity開発者向け: Godotとの対応表
• Unity開発者向け: コードで見る違い
• まとめ

:::

:::ad

Godot Engineに対するQ&A {#godot-overview}

Godotを学び始める前、私にはいくつもの疑問がありました。「そもそもGodotって何がすごいの？」「ノードベースって難しくない？」「GDScriptって覚える価値あるの？」――同じ疑問を持つ方も多いはず。ここでは、学習前の疑問に対して実際に触れた今の自分が答えます。

Q. Godot Engineって？ 2014年にオープンソース化されたゲーム開発エンジン。MITライセンスで完全無料、ロイヤリティもなし。エンジン本体はC++製。

Q. UnityやUnreal Engineと比べた第一印象は？ とにかく軽い。v4.4.1時点でエンジン全体が約149MB。Unityのインストーラーを起動する間にGodotは開発を始められる。ただし日本語情報の少なさは覚悟が必要。

Q. Godotで作られた有名ゲームって？ 「Backpack Battles」「Backshot Roulette」「Unrailed 2: Back on Track」など。意外と知られたタイトルが並んでいる。公式サイトのShowcaseで一覧を確認でき、各年度のまとめ動画もおすすめ。

Q. ノードベースってなに？ 機能をノードの階層構造で構築する仕組み。たとえば物理判定のあるキャラクターなら、CharacterBody2Dノードの下にAnimatedSprite2D（アニメーション）とCollisionShape2D（衝突判定）を配置する。Unityでいうコンポーネントのアタッチに近い感覚なので、Unity経験者なら難しくない。

Q. ノードベースって自由度低くない？ ノードを継承して独自クラスを作れるので、コーディングの自由度はUnityやUnreal Engineと変わらない。

Q. GDScriptって何？ PythonベースのGodot独自言語。C#もサポートされているが、基礎学習ではGDScriptから始めるのが圧倒的に効率がいい。構文がシンプルで、エンジンとの統合も深い。

:::ad

Udemy講座を受講した感想 {#udemy-godot-course}

新しいエンジンを学ぶとき、私は公式ドキュメントに加えて動画チュートリアルを複数こなすようにしています。今回はUdemyの「Godot Engineで気軽に2Dゲームを作ろう」を受講し、6.5時間ほどで修了しました。

コースは基礎（プロジェクト設定、ノード・シーン理解、Windows/Web向けビルド）から始まり、後半ではオリジナル2Dゲームの開発に入ります。1動画1〜5分で要点を押さえてくれるため、テンポよく進められました。

※コースの手順で作成できるゲームの完成形

特に面白かったのは、穴掘り法アルゴリズムによる迷路のプロシージャル生成です。UI作成、データ保存、射撃システム、敵AIまで一通り実装し、タイトル→エリア選択→迷路→タイトルというゲームサイクルを完成させます。

※穴掘り法アルゴリズムの実行ログ

Godotの日本語コースはまだ少なく、ここまで整備されたカリキュラムは貴重です。まずこのコースで全体像をつかんでから、英語圏のより高度なコースに進むのがおすすめです。Udemyは頻繁にセールがあるので、お気に入りに登録しておくとよいでしょう。

学習中のTipsとして、Godotの独自仕様はChatGPTやClaudeに「Unity/Unreal Engineで例えると何に相当するか？」と聞きながら進めると理解が格段に早くなります。@export → SerializeField、get_tree().change_scene_to_file() → SceneManager.LoadScene のように既存の知識と紐づけるだけで、学習効率がまるで変わります。

:::post-link{url="https://trk.udemy.com/nXQoM9" text="Godot Engineで気軽に2Dゲームを作ろう (Udemy)"}

:::ad

Godotに触れて感動したこと {#godot-impressions}

コースを通じてGodotの設計思想に触れ、率直に感動しました。Unity/Unreal Engineとは明確に異なるアプローチで、特に2D開発では「こういうのが欲しかった」と思う場面が何度もありました。

• ノードとシグナルの直感性: Godotの核となる2つの概念。ノードで構造を作り、シグナルで通信する。この組み合わせに慣れると、UnityのGetComponent + UnityEventよりも流れるように実装できる感覚がある。
• 軽量さが生む快適さ: Unityはプロジェクトを開くだけで数十秒〜数分かかることがあるが、Godotは.exeをクリックして数秒で開発再開。コンパイルもほぼ一瞬なので、「ちょっと試す」のハードルが劇的に低い。
• シーンの再利用性: 最初は「シーン = Prefab + Scene」という概念に戸惑ったが、慣れるとUnityと同じ感覚で使える。GameManager的なものはMarker2Dにスクリプトをアタッチしてシーン化し、AutoLoadでシングルトン化すればOK。
• 2D専用機能の充実: TileMapやAnimatedSprite2Dなど、2D開発に特化したノードが最初から揃っている。Unityの2Dが「3Dエンジンの上に載せた2D」なのに対し、Godotの2Dはネイティブ。
• スプライトシート制作: Unityではスプライトのスライス→個別設定が必要だったが、Godotはグリッドアイコンから画像を選ぶだけでタイムラインに並ぶ。この手軽さは2Dゲーム開発者にとって大きい。
• タイルセット管理: 衝突判定を視覚的に設定でき、Physics Layerでタイルごとの当たり判定を効率的に管理できる。Unityのタイルマップ設定と比べて手順が少ない。

:::ad

Unity開発者向け: Godotとの対応表 {#unity-developers-api}

Unity開発者がGodotを学ぶとき、まず知りたいのは「Unityのあれは、Godotでは何にあたるのか？」でしょう。以下の対応表をざっと眺めてから学習を始めると、理解がスムーズになります。

あくまで「おおよその対応」です。細かい挙動は異なるので、実際に手を動かしながら違いを体感してみてください。

:::ad

Unity開発者向け: コードで見る違い {#unity-developers-code}

対応表で概念を押さえたら、次はコードの書き方を見比べてみましょう。GDScriptはPythonに似たインデントベースの構文で、C#と比べてコード量が少ないのが特徴です。Unity開発者が最初に戸惑いやすいのは、型宣言のスタイル、$記法によるノードアクセス、そしてシグナルの仕組みあたりでしょう。

例1：変数の公開と初期化 (@export vs [SerializeField])

ゲーム開発では「インスペクターで値を調整したい」場面が頻繁にあります。移動速度やジャンプ力をコード内にハードコーディングするのではなく、エディタ上でいつでも変更できるようにしたい――Unityでは[SerializeField]を使いますが、Godotでは@exportアノテーションが同じ役割を果たします。

また、UnityでStart()に書いていた初期化処理は、Godotでは_ready()に記述します。

Godot (GDScript)

# Player.gd
extends Node2D

@export var player_name: String = "Hero"
@export var speed: int = 100

# UnityのStart()に相当
func _ready():
    print("Player Name: ", player_name)
    print("Initial Speed: ", speed)

Unity (C#)

// Player.cs
using UnityEngine;

public class Player : MonoBehaviour
{
    [SerializeField] private string playerName = "Hero";
    [SerializeField] private int speed = 100;

    // Godotの_ready()に相当
    void Start()
    {
        Debug.Log("Player Name: " + playerName);
        Debug.Log("Initial Speed: " + speed);
    }
}

なお、毎フレーム処理は_process(delta)（UnityのUpdate()に相当）で記述します。引数のdeltaはUnityのTime.deltaTimeと同じくフレーム間の経過秒数で、フレームレートに依存しない動作を実現するために使います。

例2：物理演算の処理 (_physics_process vs FixedUpdate)

キャラクターを左右キーで移動させる、ゲーム開発の基本中の基本です。UnityではRigidbody2Dをアタッチし、Start()でGetComponentして変数に保持し、FixedUpdate()でvelocityを設定する――という3ステップが必要でした。

GodotのCharacterBody2Dはvelocityプロパティとmove_and_slide()を内蔵しているため、コンポーネント取得のボイラープレートが不要です。コードを見比べると、Godot側のシンプルさが際立ちます。

Godot (GDScript)

# Character.gd
extends CharacterBody2D

const SPEED = 300.0

# UnityのFixedUpdate()に相当
func _physics_process(delta):
    var direction = Input.get_axis("ui_left", "ui_right")
    velocity.x = direction * SPEED
    move_and_slide()  # Godotの便利な組み込み関数

Unity (C#)

// Character.cs
using UnityEngine;

[RequireComponent(typeof(Rigidbody2D))]
public class Character : MonoBehaviour
{
    [SerializeField] private float speed = 300.0f;
    private Rigidbody2D rb;

    void Start()
    {
        rb = GetComponent<Rigidbody2D>();
    }

    // Godotの_physics_process()に相当
    void FixedUpdate()
    {
        float moveInput = Input.GetAxis("Horizontal");
        rb.velocity = new Vector2(moveInput * speed, rb.velocity.y);
    }
}

例3：ノードの取得 ($ vs GetComponent)

「子オブジェクトのアニメーションを再生したい」「コリジョンを無効化したい」――こうした操作はゲーム開発で頻出します。UnityではGetComponentInChildren<T>()やtransform.Find()で参照を取得し、nullチェックを挟んでからアクセスするのが定番パターンです。

Godotの$記法（get_node()のシンタックスシュガー）はノードパスを直接書けるため、驚くほど簡潔です。ツリー構造が見えているぶん、どのノードにアクセスしているかも一目瞭然です。

Godot (GDScript)

# Player.gd
extends Node2D

func _ready():
    # $記法で子ノードに直接アクセス
    $AnimatedSprite2D.play("run")

    # get_node() を使う方法もある
    var collision_shape = get_node("CollisionShape2D")
    collision_shape.disabled = true

Unity (C#)

// Player.cs
using UnityEngine;

public class Player : MonoBehaviour
{
    void Start()
    {
        // 子オブジェクトからコンポーネントを取得
        Animator animator = GetComponentInChildren<Animator>();
        if (animator != null)
        {
            animator.Play("run");
        }

        // 名前で子オブジェクトを探す場合
        Transform collisionShape = transform.Find("CollisionShape");
        if (collisionShape != null)
        {
            collisionShape.gameObject.SetActive(false);
        }
    }
}

例4：シグナル (signal vs UnityEvent)

「プレイヤーがダメージを受けたらUIのHP表示を更新したい」――オブジェクト間の通知はゲームのあらゆる場面で必要になります。UnityではUnityEventやC#のeventで実装しますが、発信側と受信側の参照管理がやや煩雑になりがちです。

Godotのシグナルはこの問題をエレガントに解決しています。大きな特徴は2つ。エディタ上でノード同士の接続をGUIで設定できることと、発信側が受信側の存在を一切知らなくてよい疎結合な設計です。コードで接続する場合も.connect()一行で済みます。

Godot (GDScript)

# Player.gd
extends Node2D

signal health_changed(new_health)

var health: int = 100

func take_damage(damage: int):
    health -= damage
    health_changed.emit(health)  # シグナル発信

# UI.gd
extends Control

func _ready():
    var player = get_node("../Player")
    player.health_changed.connect(_on_health_changed)

func _on_health_changed(new_health: int):
    print("体力が ", new_health, " になりました")

Unity (C#)

// Player.cs
using UnityEngine;
using UnityEngine.Events;

public class Player : MonoBehaviour
{
    [SerializeField] private UnityEvent<int> onHealthChanged;

    private int health = 100;

    public void TakeDamage(int damage)
    {
        health -= damage;
        onHealthChanged?.Invoke(health);  // イベント発信
    }
}

// UI.cs
using UnityEngine;

public class UI : MonoBehaviour
{
    [SerializeField] private Player player;

    void Start()
    {
        player.onHealthChanged.AddListener(OnHealthChanged);
    }

    private void OnHealthChanged(int newHealth)
    {
        Debug.Log("体力が " + newHealth + " になりました");
    }
}

例5：シーン切り替え (change_scene_to_file vs SceneManager.LoadScene)

レベルクリア時に次のステージへ遷移する処理です。UnityではSceneManager.LoadScene()にシーン名を渡しますが、Build Settingsへのシーン登録が事前に必要でした。

Godotでは.tscnファイルへのパスを直接指定するだけでシーンを切り替えられます。Build Settingsのような登録ステップがないぶん、プロトタイピング時の取り回しが軽快です。

Godot (GDScript)

# GameManager.gd
extends Node

func level_complete():
    print("レベルクリア！")
    get_tree().change_scene_to_file("res://scenes/Level2.tscn")

Unity (C#)

// GameManager.cs
using UnityEngine;
using UnityEngine.SceneManagement;

public class GameManager : MonoBehaviour
{
    public void LevelComplete()
    {
        Debug.Log("レベルクリア！");
        SceneManager.LoadScene("Level2");
    }
}

:::ad

まとめ {#conclusion}

Godotは、特に2D開発者におすすめできるゲームエンジンです。スプライトやタイルセット管理ではUnity/Unreal Engineに対して明確な優位性があり、純粋な2DゲームはGodot、ライティング演出にこだわるならUnityという使い分けが良いと感じました。

エンジンとしての成熟度では、情報量・ストア環境・商業実績いずれもUnityやUnreal Engineが圧倒的です。しかし「Backpack Battles」や「Backshot Roulette」などGodot製タイトルは着実に増えており、Runtime Fee騒動で移行した開発者の作品が出揃えばシェアは伸びるでしょう。

オープンソースという点もユニークです。MayaとBlenderの関係を見ると、Godotにも化ける可能性はあります。UnityやUnreal Engineが無料で使える以上、Blenderほどの急速な浸透は難しいかもしれませんが、業界の受け皿として成長する余地は十分です。

私自身はUnityやUnreal Engineにも引き続き触れますが、Godotが第三の選択肢になり得ることを確認できたのは収穫でした。興味がある方はぜひ触れてみてください。

:::ad

かといって、Photoshopで自作するのもパスの操作が面倒だし…。「ただの吹き出し一つにこんなに時間かけるのもなぁ」と思って、結局ブラウザでサクッと作れるツールを作ってみました。

図形のフチをドラッグするだけでしっぽが生えてくる仕組みなので、数秒で好きな形の吹き出しが作れます。

:::post-link{url="/ja/tools/speech-bubble-studio/" text="▶︎ Speech Bubble Studio"}

:::ad

:::toc

• 吹き出し素材を探すのが面倒だった話
• どんなツール？
• できること
• 使い方
• どんな時に使える？

:::

:::ad

吹き出し素材を探すのが面倒だった話 {#introduction}

素材サイトで吹き出しを探すと、いくつか問題があって。まず、しっぽの向きが逆だったり、線の太さが自分のイラストと合わなかったり。モコモコした形が欲しいのに見つからなかったりします。

自分で作ろうとしても、Photoshopで楕円と三角形を組み合わせて、パスを結合して…ってやってると、「たかが吹き出し一つにこんなに時間かけるのか」って気持ちになるんですよね。

そんな経緯で、もっと手軽に吹き出しを作れるツールがあればいいなと思って開発しました。

どんなツール？ {#what-is-sbs}

ブラウザで吹き出しを作れるツールです。ベースの形や線のスタイルを選んだら、プレビュー画面のフチをドラッグするだけ。ドラッグした場所からしっぽが伸びてきて、先端の位置も自由に調整できます。

作った吹き出しは背景透過のPNG画像でダウンロードできます。

:::post-link{url="/ja/tools/speech-bubble-studio/" text="▶︎ Speech Bubble Studio"}

:::ad

できること {#features}

• プレビュー画面のフチをドラッグして、好きな場所にしっぽを生成・調整
• 楕円、四角、モコモコ、ギザギザなど、形状や線の太さ・色を自由に設定
• 「漫画風」「思考風」などのプリセットで、ワンクリックで設定を呼び出し
• 標準(1x)と高解像度(2x)を選択して、背景透過PNGで書き出し
• 作成した吹き出しは個人・商用問わず自由に利用OK（クレジット不要）
• スマホ・タブレットのタッチ操作にも対応

使い方 {#how-to-use}

基本的な流れは3ステップです。

1. ベースの形を調整する

右側の設定パネルで形や線のスタイルを決めます。プリセットから選ぶのが簡単ですが、幅や高さ、線の太さなども細かく調整できます。

2. しっぽを生やして調整する

左側のプレビュー画面で、図形のフチをクリック＆ドラッグします。その場所からしっぽが伸びてくるので、青いハンドルで先端の位置を調整します。

3. ダウンロードする

「書き出し」セクションで解像度（1x/2x）を選んで、「PNGでダウンロード」ボタンを押せば完成です。

どんな時に使える？ {#teq}

こんな場面で使えます。

• ブログやWebサイトの解説画像に: イラストや写真にセリフを添えたい時に便利です。
• YouTubeのサムネイルや動画内のテロップに: ゲーム実況や解説動画でキャラクターにセリフを言わせる演出に。
• SNS投稿の画像に: イラストや写真に吹き出しを追加するだけで、投稿が面白くなります。

:::ad

まとめ {#conclusion}

吹き出しを探したり自作したりする手間が面倒だったので、ドラッグするだけで作れるツールを開発しました。作成した吹き出しは個人・商用問わず自由に使えます。ブログ、動画、SNSなどで活用してもらえると嬉しいです。

:::post-link{url="/ja/tools/speech-bubble-studio/" text="▶︎ Speech Bubble Studio"}

:::ad

スポイトで色を拾うだけだと、全体の配色バランスは分かりません。「どの色が、どのくらいの面積を占めているのか？」を数値で把握できたら、自分の配色の癖や改善点が見えてくるはずです。

そんなわけで、イラストをアップロードするだけで、色の構成比率を円グラフで可視化できる『キャラ配色アナライザー』を開発しました。すべての処理がブラウザ内で完結するので、未公開の作品でも安心して分析できます。

※参考画像は管理人が描いたファンアートです。

:::post-link{url="/ja/tools/character-color-analyzer/" text="▶︎ キャラ配色アナライザー"}

:::ad

:::toc

• 配色バランスを知りたかった話
• どんなツール？
• できること
• 使い方
• 分析結果の活用方法
• 分析の仕組み
• 安心のブラウザ完結

:::

:::ad

配色バランスを知りたかった話 {#introduction}

イラストを描いていると、感覚で色を選んでいることが多いんですよね。「この色、いい感じかも」って塗っていって、完成した後に「でも客観的に見ると、どんなバランスなんだろう？」って気になります。

スポイトで色を拾っても、それは「その色が使われている」ことしか分かりません。「どの色が、どのくらいの面積を占めているのか？」という構成比率を知ることで、自分の配色の癖や、改善点が見えてくるはずです。

そんなわけで、色の構成比率を円グラフで可視化するツールを作りました。

どんなツール？ {#what-is-cca}

イラスト画像をアップロードすると、使われている色の種類とその構成比率を円グラフとリストで表示するツールです。

自分のイラストの配色バランスを数値で確認したい時に使えます。背景色など不要な色を分析から除外する機能もあるので、キャラクター本体の配色に絞って分析できます。

:::post-link{url="/ja/tools/character-color-analyzer/" text="▶︎ キャラ配色アナライザー"}

:::ad

できること {#features}

• 画像をドラッグ＆ドロップするだけで分析開始、サーバーに送信されない
• 分析結果を円グラフとパーセンテージで可視化
• 人間の知覚に近い「CIELAB色空間」とk-meansクラスタリングで色を抽出
• プレビュー画像上の不要な部分（背景など）をクリックして除外
• 除外した色をリストで管理、いつでも復帰可能
• 分析された色のHEXコードをワンクリックでコピー
• すべての処理がブラウザ内で完結、未公開作品でも安心
• PCでもスマートフォンでも利用可能

使い方 {#how-to-use}

基本的な流れは3ステップです。

1. 画像をアップロードする

分析したいイラスト画像を左側のエリアにドラッグ＆ドロップするか、クリックしてファイルを選択します。画像はサーバーに送信されず、ブラウザの中だけで分析されます。

2. 分析結果を確認＆設定を調整する

右側に色の構成比を示した円グラフとカラーリストが表示されます。左側のパネルで「抽出する色の数」をスライダーで調整できます。

3. 不要な色を除外する（任意）

背景など、キャラ本体と関係ない色を除外したい場合は、左側のプレビュー画像上の該当箇所をクリックします。クリックした領域の色が除外リストに追加され、分析結果がリアルタイムで更新されます。

分析結果の活用方法 {#usage-tips}

分析結果を使って、いろんな気づきが得られます。

• 自分の作品を客観視する: 完成したイラストを分析してみると、「思っていたより特定の色に偏ってるな」「アクセントカラーが弱かったかも」など、自分の配色の癖や改善点を発見できます。
• 配色の引き出しを増やす: 自分の過去の作品を分析して、「なぜこの配色は心地良いのか」を考えてみましょう。メインカラーとサブカラーの比率、アクセント色の使い方などを数値で把握することで、感覚的だった「センス」を具体的な「テクニック」として学べます。
• 配色リファレンス集を作る: いろんなイラストを分析して、その結果をストックしていくと、自分だけの配色リファレンス集が完成します。「元気なキャラは暖色系の比率が高い」「クールなキャラは無彩色をうまく使っている」など、実践的な配色ルールを学べます。

※配色見本として他人の作品を分析する場合は、私的利用の範囲に留めるなど、著作物の利用規約にご配慮ください。

:::ad

分析の仕組み {#advanced-features}

シンプルな見た目ですが、精度の高い分析のために技術を工夫しています。

人間の感覚に近い「CIELAB色空間」: 一般的なRGB値ではなく、人間の色の知覚モデルに近い「CIELAB」という色空間で色の計算を行っています。これで、「機械的に色が近い」ではなく「人間が見て色が似ている」と感じるピクセル同士を、より正確にグループ化できます。

平均色を賢く見つける「k-meansクラスタリング」: イラストには無数の色やグラデーションが存在します。その中から「イラストを代表する色」を抽出するために、k-meansというクラスタリング技術を利用しています。画像内のピクセルを自動的に指定された数の色のグループに分類し、それぞれのグループの平均的な色を抽出しています。

安心のブラウザ完結 {#tech-info}

このツールは、プライバシーを最優先に設計しています。画像の選択から分析、結果の表示まで、すべての処理がブラウザ内部で完結します。

画像データが外部のサーバーに送信・保存されることは一切ありません。オフラインの状態でも動作するので、未公開作品や個人的なイラストも、情報漏洩の心配なく安心して使えます。

:::post-link{url="/ja/tools/character-color-analyzer/" text="▶︎ キャラ配色アナライザー"}

:::ad

基本的な配色ルールは知っていても、そこから新しいアイデアを出すのは簡単じゃないです。「この髪色に合う服の色は？」「アクセントカラーはどうしよう？」って考え始めると、時間がかかります。

そんなわけで、ベースカラーを1色選ぶだけで、色彩理論に基づいた配色パターンを提案してくれる『キャラ配色ナビゲーター』を開発しました。

:::post-link{url="/ja/tools/character-color-navigator/" text="▶︎ キャラ配色ナビゲーター"}

:::ad

:::toc

• 配色のアイデア探しに困った話
• どんなツール？
• できること
• 使い方
• 配色パターンの種類
• パレット画像の活用方法
• ブラウザで完結

:::

:::ad

配色のアイデア探しに困った話 {#introduction}

キャラクターデザインで配色を考える時、いつも悩むんですよね。色の組み合わせって無限にあるから、「どれが一番いいんだろう？」って迷います。

暖色系の明るい色は「活発」な印象、寒色系の暗い色は「落ち着き」や「神秘性」を出せるのは知ってるんですが、実際に組み合わせを考え始めると、気づいたらいつも同じようなパターンになってしまいます。

新しい配色のアイデアが欲しいな、と思って、このツールを作りました。

どんなツール？ {#what-is-ccn}

ベースカラーを1色選ぶだけで、色彩理論に基づいた配色パターンを自動で提案してくれるツールです。

「髪の色は決まったけど、服の色はどうしよう…」「もっと目立つ色の組み合わせを知りたい！」「いつもと違う配色を試したい」そんな時に使えます。

提案されるパレットは、色の役割（ベース、アソート、アクセント）も考慮されているので、実際のデザイン作業にそのまま使えます。

:::post-link{url="/ja/tools/character-color-navigator/" text="▶︎ キャラ配色ナビゲーター"}

:::ad

できること {#features}

• 好きな色を1色選ぶだけで、複数の配色パターンを瞬時に生成
• モノクロマティック、アナロガス、コンプリメンタリー、トライアドなど、様々な配色理論を網羅
• 「穏やか・調和」「メリハリ・インパクト」など、テーマ別に配色を絞り込み
• 各パレット内の色が「ベースカラー」「アソートカラー」「アクセントカラー」としてどの程度の比率で使われるかの目安を表示
• 表示された色のHEXコードをワンクリックでコピー
• 気に入ったテーマの配色パターンをまとめて1枚のPNG画像として保存
• 各配色パターンの特徴や与える印象についての簡単な解説を表示
• 定番の配色理論だけでなく、思いがけない色の組み合わせも提案
• ブラウザだけで完結、ソフトのインストール不要
• シンプルなインターフェースで、誰でも簡単に使える

使い方 {#how-to-use}

基本的な流れは3ステップです。

1. ベースカラーを選ぶ

左側のコントロールパネルで、キャラクターのイメージを代表する「ベースカラー」を選択します。カラーピッカーで直感的に選ぶか、HEXコードを直接入力してください。

2. 配色テーマを選択

「配色テーマを選ぶ」セクションから、作りたい雰囲気に合わせてテーマを選択します。「穏やか・調和」「メリハリ・インパクト」「バランスの取れたカラフル」など、テーマを選ぶと、右側にそのテーマに合った配色パターンが自動的に表示されます。

3. パレットを確認・保存

生成されたカラーパレットを確認しましょう。各色の上にマウスカーソルを合わせると、HEXコードが表示され、クリックするとコピーできます。気に入った配色が見つかったら、「パレット画像を保存」ボタンで、現在表示されているテーマの配色パレット（最大8種類）をまとめて1枚の画像としてダウンロードできます。

配色パターンの種類 {#palette-types}

いろんな配色理論に基づいたパターンが提案されます。

• モノクロマティック配色 (Monochromatic):

単一の色相をベースに、明るさや鮮やかさだけを変化させて組み合わせる配色です。全体にまとまりが生まれ、落ち着いた印象になります。

• アナロガス配色 (Analogous):

色相環上で隣り合う、似た色同士で構成される配色です。自然で目に優しく、穏やかで親しみやすい印象になります。

• コンプリメンタリー配色 (Complementary):

色相環上で正反対に位置する補色同士を組み合わせる配色です。強い色の対比が生まれ、力強くダイナミックな印象を与えます。

• スプリットコンプリメンタリー配色 (Split Complementary):

ベースカラーに対して、その補色の両隣にある2色を組み合わせる配色です。補色ほど強くない、和らげた華やかさと安定感があります。

• トライアド配色 (Triadic):

色相環を三等分する位置にある3色を組み合わせる配色です。多様な色を使いながらも、均等なバランスで安定感があり、活気のある明るい印象になります。

• テトラディック配色 (Tetradic):

色相環上で長方形または正方形を形成する4色で構成する配色です。豊かで多様性に富んだ表現が可能ですが、色の配分や面積バランスの調整が重要になります。

これらの他にも、様々なバリエーションが提案されます。いろいろ試してみてください。

:::ad

パレット画像の活用方法 {#advanced-tips}

ダウンロードしたパレット画像は、配色見本として使うだけでなく、イラスト制作のワークフローに直接組み込むこともできます。

保存したパレット画像を、CLIP STUDIO PAINT、Photoshop、Procreate、SAIといったイラスト制作ソフトに、新規レイヤーとして読み込んでください。あとは、そのレイヤーからスポイトツールで色を拾うだけです。HEXコードを一つ一つ入力する手間が省けて、スピーディーに作画に反映できます。

ブラウザで完結 {#tech-info}

このツールは、ブラウザだけで全ての処理が完結するように設計されています。特別なアプリケーションのインストールは不要です。

色の選択、配色パターンの計算、パレット画像の生成といった処理は、すべてブラウザ内部で行われます（主にJavaScriptとHTML5 Canvas APIを利用）。入力されたベースカラーの情報や生成されたパレットデータが、外部のサーバーに送信されることはありません。

:::post-link{url="/ja/tools/character-color-navigator/" text="▶︎ キャラ配色ナビゲーター"}

:::ad

「もっと手軽に、自分で効果音を作れたらいいのに」と思って、ブラウザでサクッと効果音を生成できるツールを開発しました。

XYパッドをマウスで操作するだけで、直感的に音の高さや変化を調整できます。作成したサウンドはWAVファイルでダウンロードできて、商用利用もOKです。

:::post-link{url="/ja/tools/simple-sound-fx-generator/" text="シンプル効果音メーカー"}

:::ad

:::toc

• 効果音が欲しかった話
• どんなツール？
• できること
• 使い方
• サウンド調整のコツ
• ブラウザで完結

:::

:::ad

効果音が欲しかった話 {#overview}

ゲーム開発のプロトタイプを作ってる時、「ジャンプ音」とか「アイテム取得音」みたいな、ちょっとした効果音が欲しくなりますよね。フリー素材サイトで探すのもいいんですが、イメージに合うものを見つけるのに時間がかかることがあります。

「パッと自分で作れたら便利なのに」と思って、ブラウザで効果音を生成できるツールを開発しました。

どんなツール？ {#what-is-tool}

ブラウザで動作する効果音作成ツールです。XYパッドをマウスで操作するだけで、直感的に音の高さや変化を調整できます。

音の「波形」「持続時間」「音量」に加えて、「エンベロープ（音量の時間変化）」や「ピッチスライド（音程の変化）」も細かく調整できるので、多彩なサウンドを生み出せます。

レトロな2Dゲームでよく使われるような効果音のプリセットも用意しているので、サウンドデザインの知識がなくてもすぐに音を作り始められます。

できること {#features}

• XYパッドでマウスやタッチ操作、音の高さとピッチ変化をリアルタイムに調整
• 波形選択（サイン波、矩形波など）、持続時間、音量、ADSRエンベロープを自由にカスタマイズ
• 「ジャンプ」「シュート」「爆発」など、2Dゲーム用の効果音プリセットを搭載
• 作成したサウンドをWAVファイルで保存
• 個人・商用問わず、作成した効果音を自由に利用OK
• ブラウザだけで完結、ソフトのインストール不要

使い方 {#usage}

基本的な流れは3ステップです。

1. 基本の音づくり

左側の「サウンド設定」と「エンベロープ」で音の基本を決めます。「波形」を選んで、「持続時間」「音量」を設定。次に、「アタック（音の立ち上がり）」「ディケイ（最大音量から持続音への移行）」「サスティン（持続音の音量）」「リリース（音が消えるまでの余韻）」を調整します。

ポイント：エンベロープの各時間は、サウンド全体の持続時間より短く設定すると意図した音になりやすいです。

2. サウンドパッドで音を調整

右側の「サウンドパッド」で音の高さや変化を調整します。パッド上をマウスや指でドラッグすると、カーソルの位置に応じて音の高さ（Y軸）やピッチの変化（X軸）が変わります。いろいろ試して、面白い音を見つけてみましょう。

3. サウンドを再生＆ダウンロード

「再生」ボタンで作成した音を確認できます。納得のいくサウンドができたら「ダウンロード」ボタンで、WAVファイルとして保存できます。

プリセットを選んでから各パラメータを微調整するのもオススメです。

:::ad

サウンド調整のコツ {#sound-tips}

イメージに近い効果音を作るためのヒントです。

• XYパッドの使い方:
  • Y軸（上下）: 音の基本の高さ。上にいくほど高く、下にいくほど低くなります。
  • X軸（左右）: 音が鳴っている間のピッチの変化。左に行くほど開始音から下がり、右に行くほど上がります。中央付近ではピッチの変化は少なくなります。
• エンベロープ (ADSR) で音の印象を変える:
  • アタック (Attack): 短いと「タッ！」と歯切れの良い音、長いと「フワ～」と柔らかい立ち上がりに。
  • ディケイ (Decay) & サスティン (Sustain): ディケイが短くサスティンレベルが低いと「タンッ」と減衰する音、ディケイが長くサスティンレベルが高いと「パーン」と伸びる音になります。
  • リリース (Release): 短いと「プツッ」と音が切れ、長いと「ゥゥゥン…」と余韻が残ります。
• 波形の種類:
  • サイン波 (Sine): 丸く柔らかい音。笛や「ピュン」といった音に。
  • 矩形波 (Square): ファミコンのようなピコピコした音。レトロゲームの効果音に。
  • ノコギリ波 (Sawtooth): 「ジー」っというような倍音を多く含む鋭い音。爆発音の芯などに。
  • 三角波 (Triangle): サイン波より少し硬いが、矩形波よりは柔らかい中間的な音。

いろんなパラメータを組み合わせて、オリジナルサウンドを探求してみてください。

ブラウザで完結 {#implementation}

このツールは、ブラウザだけで全ての処理が完結するように作られています。特別なソフトウェアのインストールは必要ありません。

サウンドの生成には、ブラウザに搭載されている音声技術「Web Audio API」を利用しています。リアルタイムでの音の変化や、WAVファイルへの書き出しも、すべてブラウザ上で行われます。

:::post-link{url="/ja/tools/simple-sound-fx-generator/" text="シンプル効果音メーカー"}

:::ad

VRChatでは、2025年2月頃から「ぷにぷにアバター」と呼ばれる、2Dイラストがそのまま動き出したようなアバターをよく見かけるようになりました。

この流れのきっかけとなったのが、rio3dさんがBoothで公開した「[3Dモデル] #ぷにぷにあばたー ﾅｷﾞﾁｬﾝ」です。このアバターをベースにすることで、自分の描いたイラストをVRChatの3D空間で動かすことができます。

ペーパーマリオのように、平面的なキャラクターが立体空間を歩き回る姿はとてもユニークですよね。

今回は、この「#ぷにぷにあばたー ﾅｷﾞﾁｬﾝ」を例に、自分のイラストに差し替えてオリジナルのぷにぷにアバターを作成する手順を解説します。

改変に必要なもの：

• [3Dモデル] #ぷにぷにあばたー ﾅｷﾞﾁｬﾝ (Boothで購入)
• Unity + VRChat Creator Companion (VCC) がセットアップされた環境
• アバターにしたい自分のイラスト (後述する指定の形式で4種類)

手順はシンプルです。

1. 「#ぷにぷにあばたー ﾅｷﾞﾁｬﾝ」をUnityプロジェクトにインポートする
2. アバターに使われているイラスト（テクスチャ）を、自分の用意したイラストに差し替える
3. VRChatにアップロードする

たったこれだけで、あなたの描いたキャラクターがVRChatで動き出します。それでは、具体的な手順を見ていきましょう。

:::post-link{url="https://rio3d.booth.pm/items/6556549" text="[3Dモデル] #ぷにぷにあばたー ﾅｷﾞﾁｬﾝ (BOOTH)"}

:::ad

:::toc

• Unityに「ぷにぷにアバター」をインポートする
• 簡単！ぷにぷにアバターのイラスト差し替え手順
  • 差し替え用イラストの準備
  • Unity上でイラストファイルを上書き
  • Unityでの確認とVRChatへのアップロード

:::

:::ad

Step 1: Unityに「ぷにぷにアバター」をインポートする {#import-avatar}

まずは、Boothで購入した「#ぷにぷにあばたー ﾅｷﾞﾁｬﾝ」のフォルダに含まれている.unitypackageファイルを、あなたのVRChatプロジェクトのAssetsウィンドウにドラッグ＆ドロップしてインポートします。

インポートが完了したら、ProjectウィンドウのAssets/PUNIPUNI_AVATARフォルダ内にある「PUNI」という名前のPrefab（プレハブ）を、Hierarchyウィンドウ（シーン）にドラッグ＆ドロップして配置します。

この状態でVRChat Creator Companion (VCC) の手順に従ってアバターをアップロードすれば、オリジナルの「ﾅｷﾞﾁｬﾝ」ぷにぷにアバターとして使用できます。

Step 2: 簡単！ぷにぷにアバターのイラスト差し替え手順 {#modify-avatar}

ここからが本番の「改変」作業です。ぷにぷにアバターの見た目と動きは、主に以下の4枚のPNG画像（テクスチャ）によって制御されています。これらの画像を自分のイラストに差し替えるだけで、簡単にオリジナルアバターが作れます。

これらの画像は、UnityプロジェクトのAssets/PUNIPUNI_AVATAR/Materialsフォルダ内にあります。

• tex_nagi_default.png: 通常時（立っている時やアイドル状態）のイラスト
• tex_nagi_default_talk.png: 口パク時（話している時）のイラスト
• tex_nagi_walk_1.png: 歩行時アニメーション1枚目のイラスト
• tex_nagi_walk_2.png: 歩行時アニメーション2枚目のイラスト

VRChat内で実際に動かすと、通常時はdefault、話すとtalk、歩くとwalk_1とwalk_2が交互に表示されることで、アニメーションしているように見えます。

通常の3Dアバター改変のように複雑な位置調整などは不要です。最も簡単な改変方法は、この4つのファイルと全く同じファイル名で自分のイラストを用意し、元のファイルを上書きしてしまうことです。これにより、アバター内部の参照設定を維持したまま、見た目だけを自分のイラストに入れ替えることができます。

:::ad

2-1. 差し替え用イラストの準備 {#prepare-images}

まずは、上記4つの状態に対応する自分のイラストを用意します。ポイントは以下の通りです。

• 画像サイズ: 元のﾅｷﾞﾁｬﾝ画像は3035×3035ピクセルで作成されています。可能であれば、これと同じサイズでイラストを用意し、中央にキャラクターを配置するのがおすすめです。（異なるサイズでも動作しますが、表示がずれる可能性があります）
• ファイル名: 元のファイル名（tex_nagi_default.png など）と完全に同じ名前を付けます。
• ファイル形式: PNG形式（透過背景も利用可能）で保存します。

私は、以前作成したマヌカちゃんアバターの改変モデルを元に、以下のようなイラストを描いてみました。（当ブログのWebツール「ドット絵変換ツール」で少しドット絵風にしています）

:::post-link{url="/ja/tools/image-to-pixelization/" text="ドット絵変換ツール"}

（左から順に、通常、口パク、歩行1、歩行2）

描いた（または用意した）イラスト4枚に、それぞれ対応する元のファイル名を付けます。

2-2. Unity上でイラストファイルを上書き {#overwrite-files}

次に、Unityエディタ上で元のイラストファイルを特定し、用意した自分のイラストで上書きします。

1. UnityのProjectウィンドウで、Assets/PUNIPUNI_AVATAR/Materialsフォルダを開きます。

2. 中にある元のﾅｷﾞﾁｬﾝのPNGファイル（例: tex_nagi_default.png）のどれか一つを右クリックし、「Show in Explorer」（Macの場合は「Reveal in Finder」）を選択します。これにより、これらのファイルが保存されている実際のフォルダが開きます。

3. 開いたフォルダに、先ほど準備した自分のイラストPNGファイル4枚すべてをコピー＆ペースト（またはドラッグ＆ドロップ）します。

4. 「ファイル名は既に存在します」という警告が表示されるので、「ファイルを置き換える」を選択して、4つのファイルをすべて上書きします。

2-3. Unityでの確認とVRChatへのアップロード {#confirm-upload}

ファイルの上書きが完了したら、Unityエディタの画面に戻ります。Unityがファイルの変更を自動的に検知し、インポート処理を行います。少し待つと、ProjectウィンドウやSceneビューに表示されているアバターの見た目が、自分のイラストに変わっているはずです。

（↑Unity上で自分のイラストに置き換わりました）

ここまで確認できたら、あとは通常のVRChatアバターアップロード手順と同じです。VRChat SDK Control Panelを開き、「Build & Publish for Windows」ボタンを押して、アバターをアップロードしましょう。

これで、あなたのオリジナルイラストがVRChatで動く「ぷにぷにアバター」の完成です。

さあ、あなたの分身をVRChatの世界で歩き回らせてみましょう。

:::post-link{url="https://rio3d.booth.pm/items/6556549" text="[3Dモデル] #ぷにぷにあばたー ﾅｷﾞﾁｬﾝ (BOOTH)"}

:::ad

これまでChatGPT ProやClaude 3などを活用し、実装速度が既に10倍向上したと感じていましたが、Cursorを導入したことで、さらに10倍、つまり従来の100倍近いスピードアップを実感しています。すっかり「Cursor最高！」という状態です。

Cursorの最大の魅力は、エディタ内で直接AIと対話できる点です。コーディング中に「このコンポーネント群をリファクタリングして」とか、コンソールのエラーを貼り付けて「このエラーの原因と解決策を教えて」といった質問がその場で可能です。AIによるコード変更は、Gitのように差分が色分け表示されるため、意図しない修正を簡単に拒否できます。不足パッケージのインストールやファイルの削除も、ユーザーが「Accept」ボタンを押すことで初めて実行されるので安心です。

これらの機能はWeb版のChatGPTやClaudeでも可能ですが、Cursorはプロジェクト全体のファイル構造や依存関係をより深く理解した上で提案してくれるため、修正の精度が高く、開発体験が非常に快適です。

また、Web版のAIツールでは長い対話や大量のコード生成で応答が不安定になったり途切れたりすることがありますが、Cursorでは膨大な量の修正も一気に実行してくれます。

稀に（特に高性能モデルで）意図しない過度な修正が行われることもありますが、「Restore」機能で直前の指示時点まで簡単にファイル状態を戻せるため、安心して試行錯誤できます。（ただし、削除されたフォルダの復元は難しい場合があるので、Accept前のコードレビューは重要です）。

さて、ここからが本題です。

CursorのProプランには、高性能なプレミアムモデルを高速（Fast）で利用できる回数に、月500回という制限があります。

これは、AIへの指示（リクエスト）を月に500回まで高速処理できるチケットのようなものです。通常の使い方であれば十分な回数ですが、私のようにCursorの便利さに夢中になり、ツール開発や大規模リファクタリングに没頭すると、数日で上限に達してしまうこともあります。

上限を超えると、低速（Slow）モードでの利用は可能ですが、一度高速モードの快適さを知ってしまうと、なかなか耐えられません。

Cursorでは「プレミアムモデルの利用回数を増やす」という直接的なプランは提供されていません。上限を超えて高速モードを維持したい場合は、ユーザー自身がOpenAIやAnthropicなどのAPIキーを設定し、従量課金で利用する必要があります。

この記事では、「CursorでClaude APIを連携したい」と考えている方に向けて、Anthropic ConsoleでClaude APIキーを取得し、クレジットをチャージして、Cursorに設定するまでの具体的な手順を分かりやすく解説します。

:::ad

この記事の内容

1. Cursorのプレミアムモデルとは？制限と高速利用の仕組み
2. Anthropic APIキーの設定手順（アカウント作成からクレジット購入まで）
3. CursorとClaude APIを連携させる具体的な方法
4. API連携（従量課金）の仕組みと注意点
5. Claude API連携後の実際のコスト感と代替案
6. まとめ：CursorとClaude API連携で開発効率を維持
7. 追記：意外と使える？SlowModeという選択肢
8. 追記2：SlowModeの実情とGemini 2.5 Proという強力な選択肢 (2025年4月)

Cursorのプレミアムモデルとは？制限と高速利用の仕組み

Cursorには複数のAIモデルが組み込まれていますが、その中でも特に高性能なモデル群が「プレミアムモデル」と呼ばれています。代表的なものとしては以下が挙げられます。

• Claude 3.5 Sonnet（Anthropic社製）
• GPT-4 / GPT-4o（OpenAI社製）
• その他、最新の高性能モデル

これらのプレミアムモデルは、複雑なコード生成、高度なデバッグ支援、的確な質疑応答に優れており、標準モデルと比較して高い精度を発揮します。

Cursorの有料プラン「Proプラン」（月額$20、日本円で約3,000円 ※為替レートにより変動）では、これらのプレミアムモデルを**「fast（高速）」モードで月500回まで**利用できます。fastモードでは、AIへのリクエストが優先的に処理され、待ち時間なくスムーズに開発作業を進められます。

この月500回の制限を超過すると、自動的に**「slow（低速）」モード**へと切り替わります。slowモードでは、AIの応答に時間がかかるようになり、特にサーバー混雑時には数秒から数分の待機時間が発生することもあります。

しかし、Cursorの設定で**「Enable usage-based pricing（従量課金を有効にする）」**オプションをオンにすることで、500回を超えてもfastモードを維持できます。この場合、利用したAPIのトークン量（処理したテキストの量）に応じて、連携したAPIサービス（今回はAnthropic）に追加料金が発生する仕組みです。

「Enable usage-based pricing」を有効にすると、上記のような設定項目が表示されます。

ここで重要なのが**「Monthly Spending limit」**（月間支出上限）の設定です。これは、従量課金で発生するAPI利用料金が設定した上限額に達した場合、Cursor側で自動的にAPI利用を停止してくれる安全機能です。あくまでAPI利用料金の上限設定であり、CursorのProプラン料金（$20）とは別に、API連携先（AnthropicやOpenAI）へ直接API利用料金を支払う必要がある点に注意しましょう。

なお、Cursorの設定画面下部では、どのモデルを何回利用したかの詳細な履歴を確認できます。

「Included in Pro」と表示されているのが、Proプランに含まれる月500回のプレミアムモデル利用分です。一方、「User API Key」と表示されているのが、今回設定するようなユーザー自身のAPIキー（Claude APIなど）を利用した分、つまり従量課金が発生する利用分です。

履歴を見ると、「Aborted, Not Charged」（中断、課金なし）や「Errored, Not Charged」（エラー、課金なし）といった項目があることがわかります。これは、処理が途中でキャンセルされたり、エラーで完了しなかったりした場合には、API利用料金が発生しないことを示しており、利用者にとっては嬉しいポイントです。

:::ad

Anthropic APIキーの設定手順（アカウント作成からクレジット購入まで）

それでは、CursorでClaude 3.5 SonnetなどのAnthropic社製モデルを従量課金で利用するために必要な、Anthropic APIキーの設定手順をステップごとに解説します。

ステップ1：Anthropic Consoleでアカウントを作成する

• まず、Anthropicの公式サイト（console.anthropic.com）にアクセスします。
• 「Sign Up」ボタンをクリックし、メールアドレスとパスワードを設定してアカウントを作成します。その後、登録したメールアドレスに届く認証メールを確認し、認証を完了させます。
• ログイン後、必要に応じて氏名や組織名などの基本情報を入力します。

ステップ2：APIキーを取得する

• ログイン後、画面左側のメニューから「API Keys」を選択します。
• 「Create Key」ボタンをクリックします。
• APIキーを識別するための名前を入力します（例：「Cursor-Integration」など、分かりやすい名前を推奨）。
• APIキーが生成され、画面に表示されます。このキーは一度しか表示されないため、必ずコピーしてパスワードマネージャーなど安全な場所に保管してください。

ステップ3：支払い情報を設定し、クレジットを購入する

• 左側メニューの「Plans & Billing」に移動します。
• APIを利用するには、あらかじめクレジットを購入しておく必要があります。「Add Payment Method」をクリックし、クレジットカード情報を登録します。
• 次に、「Purchase credits」セクションでクレジットを購入します。お試しであれば、最低購入額の**$5**（日本円で約750円程度 ※レートにより変動）からで十分でしょう。
• クレジットが一定額を下回った際に自動で追加購入（チャージ）する「Auto-reload」機能もありますが、意図しない課金を防ぐため、最初は手動（OFF）にしておくことをお勧めします。

無事にクレジットの購入が完了すると、ダッシュボードに残高（例：$5.00）が表示されます。今後、Cursor経由でClaude APIを利用するたびに、ここから利用料金が差し引かれていきます。

「Auto Reload」設定では、「残高が$5を下回ったら、自動的に$10をチャージする」といった設定が可能です。頻繁にAPIを利用し、手動でのチャージが面倒な場合はONにすると便利ですが、まずは利用状況を見てから判断するのが良いでしょう。

:::ad

CursorとClaude APIを連携させる具体的な方法

Anthropic Consoleでの準備が整ったら、いよいよCursorとClaude APIを連携させます。手順は非常に簡単です。

ステップ1：CursorにAnthropic APIキーを登録する

• Cursorエディタを開き、メニューバー（または設定画面）から「Settings」>「Configure models」へと進みます。
• 設定項目の中から「Anthropic API Key」という欄を見つけます。
• 先ほどAnthropic Consoleで取得し、安全な場所に保存しておいたAPIキーをこの欄に貼り付けます。
• 設定を保存するために、「Save」や「Apply」といったボタンをクリックします（UIはバージョンによって若干異なる場合があります）。

ステップ2：連携を確認し、利用を開始する

• 設定が完了したら、実際にCursorでAI機能（コード生成、チャットなど）を使ってみましょう。特に、プレミアムモデル（Claude 3.5 Sonnetなど）を選択して試してみてください。
• もし既にProプランの月500回制限を超えている場合は、このAPI連携によって再び「fast」モードで応答が返ってくるはずです。
• 念のため、Anthropic Consoleの「Usage」や「Billing」ページで、トークン使用量とそれに応じたコストが発生しているかを確認すると確実です。

これで、CursorでClaude APIを利用するための連携設定は完了です。先述のCursorの利用履歴画面で「User API Key」としての利用が記録されていれば、正しく連携されています。

API連携（従量課金）の仕組みと注意点

初めてClaude APIのような外部APIと連携して従量課金サービスを利用する際に、知っておくべき基本的な仕組みと注意点をまとめました。

• 従量課金の仕組み：Cursor経由でClaude APIを利用するたびに、処理したテキスト量（トークン数）に応じて料金が発生し、Anthropic Consoleで購入したクレジット残高から自動的に差し引かれます。
• 残高不足に注意：クレジット残高がなくなると、CursorからAPIを利用できなくなる可能性があります（fastモードが使えなくなる、またはエラーになる）。定期的にAnthropic Consoleで残高を確認しましょう。
• 自動リチャージ（Auto Reload）：前述の通り、この機能はデフォルトでOFFになっています。ONにすると、残高が指定額以下になった際に自動でクレジットカードから追加チャージされるため便利ですが、予期せぬ高額請求を防ぐため、利用状況を把握するまではOFFのままか、慎重に設定額を決めることをお勧めします。
• コスト意識を持つ：API連携は技術的に簡単ですが、「使った分だけお金がかかる」という従量課金の性質を常に意識することが重要です。特に、大規模なコード生成や複数ファイルにまたがるリファクタリングを頻繁に行うと、想像以上にクレジットを消費する可能性があります。Anthropic Consoleで使用状況を定期的にモニタリングし、コストを把握しましょう。

これらの点を理解しておけば、安心してCursorとClaude APIの連携を活用できるはずです。

:::ad

Claude API連携後の実際のコスト感と代替案

API連携後の実際のコスト感：クレジットはどれくらい持つの？

実際にCursorとClaude APIを連携させて使ってみた感想として、気になるのは「$5のクレジットでどれくらい使えるのか？」という点だと思います。

私の使い方（複数ファイルにまたがるリファクタリングや、やや複雑なコード生成を頻繁に依頼する）では、$5のクレジットは思ったよりも早く消費される印象でした。感覚的には、集中的に使うと50回程度のリクエストで$5を使い切ってしまうこともありました。

これはかなりヘビーな使い方の場合です。もしProプランの月500回を使い切ったのと同じペースでAPI連携（従量課金）を500回利用した場合、API利用料金だけで$50（日本円で約7,500円程度）かかってしまう計算になります。もちろん、簡単な質問や短いコードの修正程度であれば、もっと少ないコスト（数百円程度）で済むでしょう。（そもそも、そのようなライトな使い方であれば、Proプランの月500回制限を超えることは稀かもしれません）。

コストを抑えるための代替案

Claude API連携のコストが思ったより高いと感じる場合、以下の代替案も検討に値します。

• 複数Cursorアカウント戦略：やや裏技的ですが、もう一つ別のアカウントでCursor Proプランを契約すれば、合計で月1,000回のプレミアムモデル高速利用枠を確保できます。API利用料金によっては、こちらの方が安上がりになる可能性があります（月額$20×2 = $40）。
• 他のAIコードエディタやAPIの活用：例えば、最近注目されている「Cline」のようなエディタでは、Claude APIよりも利用料金が格段に安いとされる「Deepseek」モデルなどを利用できる場合があります。定型的なコード生成やリファクタリングであれば、これらのモデルでも十分なケースがあり、コスト効率が良い可能性があります。
• ハイブリッド戦略（モデルの使い分け）：もし別途ChatGPT PlusやClaude Proなどを契約している場合、複雑な仕様の検討や高度な相談はそちらで行い、具体的なコーディング作業をCursor（や他のエディタ）の低コストなAPIで行う、という使い分けも有効です。例えば、Claudeで処理の方向性を固め、その指示をDeepseek API連携したエディタに渡して実装を進める、といった方法で、精度とコストのバランスを取れるかもしれません。

これらの代替案も視野に入れ、ご自身の開発スタイルや予算に合った最適な方法を見つけることが重要です。

まとめ：CursorとClaude API連携で開発効率を維持

この記事では、AIコードエディタCursorのProプランにおけるプレミアムモデルの月500回制限に達した後も、Claude APIと連携することで高速な応答性能（fastモード）を維持し、開発効率を落とさずに作業を続ける方法について解説しました。

Anthropic Consoleでのアカウント作成、APIキー取得、クレジット購入、そしてCursorへの設定手順を具体的に紹介しました。また、API連携（従量課金）の仕組みや注意点、実際のコスト感、そしてコストを抑えるための代替案についても触れました。

プログラミング作業の効率をさらに高めたい方、特にAIアシスタントをコーディングに積極的に活用したい開発者にとって、CursorとAPIの連携は試してみる価値のある選択肢です。ご自身の利用頻度や予算に応じて、今回紹介した方法や代替案を組み合わせ、最適な開発環境を構築してみてください。

:::ad

追記：意外と使える？SlowModeという選択肢

この記事を公開した後もCursorを継続して利用していますが、一つ新たな発見がありました。試しにAPI連携（従量課金）をOFFにし、プレミアムモデルの制限を超えた状態、つまり**「SlowMode」**でしばらく使ってみたのです。

その結果、「あれ？SlowModeでも意外と実用的なのでは？」と感じました。

多くのAIツールにおける「SlowMode」は、応答が非常に遅く、実用に耐えないことが多い印象ですが、CursorのSlowModeは、少なくとも私が試した限りでは、FastModeとの体感差がそれほど大きくありませんでした。

もちろん、SlowModeでも生成されるコードの品質や精度はFastModeと基本的に同等です。そのため、API連携による従量課金に切り替える前に、一度SlowModeを試してみて、その速度が本当にストレスに感じるかどうかを確認する価値は大いにありそうです。

ただし、時間帯やCursorサーバー側の負荷状況によっては、SlowModeの応答速度が低下する可能性は否定できません。

そこから考えられるのは、「普段はSlowModeで利用し、応答が遅いと感じた時だけ一時的に従量課金をONにする」という運用です。これにより、API利用料金を大幅に節約できる可能性があります。

結論として、Cursor Proプランの月500回制限を超えたからといって、必ずしもすぐにAPI連携（従量課金）に移行する必要はなく、「SlowModeで様子を見る」という選択肢も有効である、というのが追記情報です。

追記2：SlowModeの実情とGemini 2.5 Proという強力な選択肢 (2025年4月)

前回の追記で「SlowModeでも意外と使える」とお伝えしましたが、その後の利用で状況が変化しました。ある日、SlowModeでの応答に30秒以上かかるというケースに遭遇したのです。やはり、時間帯やサーバーの混雑状況によって、SlowModeの応答速度は大きく変動するようです。

この時は、前回の追記に書いた通り、一時的にClaude APIの従量課金をONにすることで、快適な高速応答に戻すことができました。SlowModeが遅いと感じた際の回避策として、従量課金オプションは有効です。

しかし、Cursor ProのFastモード（月500回）を使い切った後の選択肢は、SlowModeの我慢やClaude API連携（従量課金）だけではありません。最近、非常に強力な新しい選択肢が登場しました！

それが、Googleが2025年3月25日に発表した最新の大規模言語モデル「Gemini 2.5 Pro Experimental」です。この発表直後から大きな注目を集めている高性能モデルが、なんとCursorのエディタ内で利用可能になりました！

実際にいくつかのプロジェクトで試してみたところ、その性能は驚くほど高く、Claude 3.5 SonnetやGPT-4oといった既存の高性能モデルと比較しても遜色ない、あるいは場面によってはそれ以上と感じています。特に、Gemini 2.5 Proの最大の特徴である広大なコンテキストウィンドウ（一度に処理・記憶できる情報量）のおかげか、複数ファイルにまたがるような大規模なリファクタリング作業も、非常にスムーズかつ的確にこなしてくれます。

そして、現時点（2025年4月3日）で最も注目すべき点は、この**「Gemini 2.5 Pro Experimental」モデルが、Cursor上で無料で利用できる**ということです！

もしあなたがCursor ProプランのFastモード500回を使い切ってしまい、応答速度に不満を感じているなら、まずはClaude APIの従量課金や他の有料オプションを検討する前に、Cursorのモデル設定で「Gemini 2.5 Pro Experimental」を選択し、試してみることを強く推奨します。

無料で利用できるにも関わらず、非常に高い性能を持っているため、多くの場合、このモデルで十分に満足できる可能性があります。ぜひ、この新しい選択肢を活用してみてください。

:::ad

でも、わざわざ画像編集ソフトを開いて作るのも面倒だし、フリー素材を探すのも時間がかかります。「サイズと色を指定するだけで、パッと作れたらいいのに」と思って、ブラウザでサンプル画像を生成できるツールを開発しました。

サイズ・背景色・テキストを指定するだけで、即座にPNG画像をダウンロードできます。

:::post-link{url="/ja/tools/sample-image-generator/" text="▶︎ Sample Image Generator"}

:::ad

:::toc

• ダミー画像が必要だった話
• できること
• 使い方
• 対応フォーマット

:::

:::ad

ダミー画像が必要だった話 {#overview}

UI設計してる時、画像の仮置きが必要になる場面って結構ありますよね。ワイヤーフレームやプロトタイプを作ってる段階では、実際の画像はまだないことが多いです。

でも、わざわざ画像編集ソフトを開いて作るのも面倒。「800x600の灰色の画像」みたいな、シンプルなダミー画像をパッと作りたいだけなんです。

そんなわけで、ブラウザでサイズ・背景色・テキストを指定するだけで、PNG画像を即座に生成できるツールを作りました。

例えばこんな画像を作れます。

できること {#features}

• サイズ・背景色・テキスト色・文言を細かく指定
• テキスト非表示オプション
• テキストサイズを自動調整して、中央に配置
• 生成画像を即座にプレビュー・ダウンロード
• プリセットサイズやプリセットカラーを多数収録

使い方 {#usage}

1. サイズ設定 プリセットから選ぶか、幅・高さを数値で直接入力します。

2. 背景色設定 プリセットから選ぶか、カラーパレットから自由な色を指定します。

3. テキスト設定 表示のオン/オフ、文字列を指定できます。必要に応じてテキスト色を変更しましょう。

4. プレビュー & ダウンロード 設定を変えるとプレビューが自動更新されます。ダウンロードボタンでPNGファイルを取得できます。

対応フォーマット {#format}

現在はPNG形式の書き出しに対応しています。ブラウザがcanvas機能をサポートしていれば動作するため、デスクトップ/モバイルを問わず利用できます。

:::post-link{url="/ja/tools/sample-image-generator/" text="▶︎ Sample Image Generator"}

普段ボードゲームを遊ばない私ですが、年始に旧友らとプレイして、気がついたらドハマリしていました。

カタンは19枚の資源タイルを組み合わせたボード上で、プレイヤーが拠点を配置し、毎ターンダイスを2個振って、その合計値に対応したタイルに隣接する拠点を持つプレイヤーが資源を獲得するシンプルなルールです。

資源を使って「街道」を建て、その街道沿いに新しい拠点を建てることで、より多くの資源を獲得できるようになります。

ここで重要になってくるのが、タイルの配置方法と数字の配分です。同じ種類の資源が隣接していたり、期待値が高い数字(6と8)が隣接していると、特定プレイヤーが極端に資源を獲得してゲームバランスが崩れます。

より公平なゲームにするためには、確率が極端に偏らないように、慎重にタイルを配置する必要があります。

そこで今回は、数学的に「公平なタイル配置」を瞬時に生成できる「カタン・ボードジェネレーター」を作成してみました。

【2025年6月更新】 v2.1.0にて資材バランスの視覚化と生成精度の向上を実現！v2.0.0で実装した拡張版（5-6人用）対応とUI改善に加え、より高品質なボード生成が可能になっています。

:::post-link{url="/ja/tools/catan-board-generator" text="▶︎ Catan Board Generator"}

:::ad

:::toc

• カタン・ボードジェネレーターとは
• 特徴・主な機能
• 使用方法
• 配置ルールの詳細
• v2.0.0 拡張版対応(2025/06/07)
• v2.1.0 公平精度向上+資材バランス視覚化(2025/06/12)
• v2.2.0 バランス崩壊オプション(2025/06/14)
• まとめ

:::

:::ad

カタン・ボードジェネレーターとは {#overview}

このツールは、カタン（Catan）のボードを自動で生成するWebアプリです。 一度に「資源タイル」と「数字チップ」をランダム配置できるほか、数字だけを再シャッフルすることも可能です。 公式ルールで推奨される「6と8が隣接しないようにする」「同じ資源が連続しすぎない」などを考慮しつつ、ある程度バランスを取った配置を目指しています。 自分好みの盤面ができたら、画像として保存しておくこともできます。

v2.0.0では通常版（3-4人用）に加えて拡張版（5-6人用）にも対応し、UIも大幅に改善しました。

:::post-link{url="/ja/tools/catan-board-generator" text="▶︎ Catan Board Generator"}

特徴・主な機能 {#features}

• 通常版・拡張版の両対応 – 3-4人用（19タイル）と5-6人用（30タイル）を切り替え可能
• 資源タイルと数字チップの自動シャッフル
• 「数字だけシャッフル」で資源配置はそのまま保持
• 6と8の隣接を厳格に回避
• 出現確率の偏りを抑えた高度なバランス調整
• 2カラムレイアウトで操作性が大幅向上
• レスポンシブ対応 – PC、タブレット、スマホで最適表示
• 高解像度画像として保存が可能（2000x2000px）

使用方法 {#usage}

1. カタン・ボードジェネレーター へアクセス
2. ボードタイプを選択 – 「通常版」または「拡張版（5-6人用）」を選択
3. 「シャッフル」ボタンを押して、資源タイル＋数字チップをランダム配置
4. 資源配置は気に入ったまま、数字だけ変えたい場合は「数字だけシャッフル」ボタン
5. 画像として保存したい場合は「画像を保存」ボタン

配置ルールの詳細 {#rules}

このツールは公式ルールを基盤としつつ、より公平で戦略的なゲーム展開を目指すための独自のバランス調整を加えています。

【基本的な配置ルール】

• 資源の隣接禁止： 同じ種類の資源タイル（森、牧草地、丘陵、山地、畑）は隣接しません
• 特定数字の隣接禁止： 高確率の「6」と「8」、および低確率の「2」と「12」は隣接しないように配置されます
• 同じ数字の重複禁止： 同じ資源タイプに同じ数字が複数割り当てられることはありません

【高度なバランス調整】

• 高確率数字の分散： 高確率の「6」「8」が特定の資源に集中しないよう、各資源タイプにバランス良く割り当てられます
• 交差点の期待値均一化： 3つのタイルが接する「交差点」の価値（3タイルの数字の出やすさの合計）が極端に低い場所が固まらないように調整します
• 資源ごとの数字品質： 特定の資源に悪い数字（2, 3, 11, 12など）ばかりが集まらないようにし、各資源に最低限の生産期待値を保証します
• 確率分散の最適化： 各資源タイプの生産確率が理想的な比率に近づくよう微調整されます

【表示について】

• 数字の確率： 数字チップ下の「●」の数は、その数字の出やすさ（36通り中の確率）を表しています
• 高確率の強調： 特に確率の高い「6」と「8」は、赤色で表示されます
• 視認性： 各タイルは資源に応じた色分けで、一目でボード構成が把握できます

v2.0.0 拡張版対応(2025/06/07) {#v2-0-0}

2025年6月のアップデートで、v2.0.0をリリースしました。主な改善点は以下の通りです：

拡張版の特徴

• タイル数： 19枚 → 30枚に増加
• 資源構成： 各資源が追加され、より多様な戦略が可能
• 数字チップ： 各数字が追加され、より多くの選択肢
• 砂漠タイル： 1枚 → 2枚に増加

その他の改善点

• 2カラムレイアウト： PC画面ではコントロールパネルとボード表示を分離し、操作性を大幅向上
• レスポンシブデザイン： デバイスサイズに応じてレイアウトを最適化
• 動的パラメータ調整： ボードサイズに応じて生成アルゴリズムのパラメータを自動調整
• 探索空間の最適化： 拡張版では探索ステップ数を2.3倍に増加し、安定した生成を実現
• パフォーマンス改善： 座標計算のキャッシュ化とアルゴリズムの最適化
• エラーハンドリング： 生成失敗時の適切なフィードバックとリトライ機能

これにより、通常版と同等の品質で拡張版のボードを生成できるようになりました。

v2.1.0 公平精度向上+資材バランス視覚化(2025/06/12) {#v2-1-0}

2025年6月12日のアップデートで、v2.1.0をリリースしました。主な改善点は以下の通りです：

• 資材バランスの視覚化： 「資源の出やすさ」を示す統計情報セクションを追加し、各資源の生産期待値をスコア化して表示
• 公平性の向上： 資源ごとの合計生産期待値に下限値を設定（通常版:11, 拡張版:16）し、極端に不利な資源が生まれないよう調整
• 処理の高速化： Web Workerを導入し、ボード生成中の計算処理を高速化・安定化

これらの改善により、生成されたボードの品質をより正確に評価できるようになり、より公平で戦略的なゲーム展開が可能になりました。

v2.2.0 バランス崩壊オプション(2025/06/14) {#v2-2-0}

2025年6月14日のアップデートで、v2.2.0をリリースしました。主な改善点は以下の通りです：

• バランス崩壊オプション: あえて資源や数字の偏りを許容する「バランス崩壊オプション」を新設。デフォルトでは最も公平なボードが生成されますが、このオプションを有効にすることで、特定資源や数字が極端に偏る"カオスなボード"も作成可能になりました。
• 資源期待値のバランス: 各資源の生産期待値の下限を調整し、偏りの度合いを選択可能に。
• 資源の隣接制限: 同じ資源が隣接しないよう制限するか選択可能に。
• 数字の隣接制限: 高確率数字や低確率数字が隣接しないよう制限するか選択可能に。

これにより、通常のバランス重視プレイはもちろん、ネタプレイや上級者向けの変則ルールにも対応できるようになりました。

「バランス崩壊オプション」を使って、あえて理不尽なボードや戦略性の高い盤面を楽しむこともできます。

まとめ {#conclusion}

この「カタン・ボードジェネレーター」を使えば、6と8が固まる問題や資源タイルが偏る問題を回避しつつ、短時間でボードレイアウトを決めることができます。

v2.0.0では拡張版対応により5-6人でのプレイにも対応し、UI改善によってより使いやすくなりました。v2.1.0では資材バランスの視覚化と生成精度の向上により、より公平で戦略的なボード生成が可能になっています。

ゲーム開始までの準備時間を大幅に減らして、いち早くプレイに集中したい時におすすめです。

ご利用上の注意点

当ツールは公平なゲーム体験を目指して設計されていますが、ボードの「最適さ」はプレイヤーの戦略や好みによっても異なります。生成ロジックは確率的な要素を含むため、最終的な盤面のバランスについては、ご自身の目で確認の上、ご活用ください。

:::post-link{url="/ja/tools/catan-board-generator" text="▶︎ Catan Board Generator"}

皆さんのカタンライフが、よりスムーズで楽しいものになりますように！

今回、その中でも古くから使用しているSynologyNAS DS218playのファンが定期的に止まるようになってしまったので、スペアパーツを購入して交換した手順を記録します。

NAS本体+スペアパーツ

• NAS本体: Synology NASキット 2ベイ DS218play クアッドコアCPU 1GBメモリ搭載 - Amazon
• スペアファン: 【Synologyスペアパーツ】SynologyNAS用交換用ファン FAN_92x92x25_1 [92mmファン 25mm厚] 国内正規代理店品

発生した問題: ファンが停止&再起動を繰り返す

今回発生したのは、SynologyNASの電源をいれてしばらくするとファンが停止し、数秒で復活して、再び停止するを繰り返す問題です。数分おきに下記のような警告が通知されました。

ファンの掃除などをしても問題が解決しなかったため、スペアパーツを購入。

スペアパーツへの交換

届いたスペアファン。AmazonのSynology販売から購入しました。

SynologyNASのネジを外します。

ファン周りの構造は非常にシンプルです。電源ケーブルを抜いて、銀ラベルを剥がします。

SynologyNASのファンはモデルによって固定方法が異なります。

例えばDS218は背面からネジで止められていますが、DS218playはこのように内側のゴムリングで固定されています。

DS218playのシステムメンテナンスページは見つかりませんでしたが、下記からDS223jの交換手順が確認できます。DS218playとほぼほぼ同じ手順で交換できます。

DS223j 製品マニュアル 4.1 故障したファンの交換 - Synologyナレッジセンター

NASの底面の4箇所のネジを取り外して、指が届かない下部のゴムリングも外してスペアファンと交換します。

取り付け完了。これで正常に動作するようになりました。

そんな時、アナログな「進捗チェックシート」が意外と効果を発揮します。紙に印刷して、自分の手でチェックを付けていくことで、「今日も頑張った！」「あと少しだ！」って実感できるんです。

そんなわけで、ブラウザで簡単にチェックシートを作成して、印刷できる『進捗チェックシートメーカー』を開発しました。

資格試験の勉強、読書記録、オンラインコースの受講管理など、いろんな目標達成に使えます。

:::post-link{url="/ja/tools/progress-checksheet/" text="▶︎ 進捗チェックシートメーカー（印刷用）"}

:::ad

:::toc

• モチベーション維持が難しかった話
• できること
• 使い方
• 活用アイデア
• ブラウザで完結

:::

:::ad

モチベーション維持が難しかった話 {#overview}

参考書や問題集、オンラインコースなど、長い学習を続けるのって、進捗が見えにくいとモチベーション維持が難しいですよね。

デジタルツールで進捗管理する方法もありますが、「紙に印刷して、ペンでチェックを入れる」というアナログな行為が、意外と達成感や学習継続のモチベーションに繋がるんです。

そんなわけで、表紙画像と開始ページ・終了ページを入力するだけで、A4横サイズのチェックシートを自動生成できるツールを作りました。

:::post-link{url="/ja/tools/progress-checksheet/" text="▶︎ 進捗チェックシートメーカー（印刷用）"}

できること {#features}

• 画像選択とページ数入力だけで、簡単にチェックシートを作成
• 参考書の表紙やコースのサムネイルなど、好きな画像を表紙に設定可能（画像なしでもOK）
• 開始ページと終了ページを指定して、必要な範囲だけのチェックシートを作成
• A4横サイズ（3508×2480ピクセル）で、印刷して使いやすいレイアウト
• 表紙画像はドラッグ&ドロップでも簡単に設定できる
• 画像処理はすべてブラウザ内で行われ、画像データがサーバーに送信されない
• 指定された総ページ数に応じて、チェックボックスのマス目の大きさと数が自動で最適化
• 生成されたチェックシートはすぐにPNG画像としてダウンロード可能
• 手書きでチェックすることで進捗を実感しやすく、学習継続をサポート

使い方 {#usage}

基本的な流れは3ステップです。

1. 表紙画像を選択（任意）

参考書の表紙など、好きな画像ファイルをドラッグ&ドロップするか、エリアをクリックして選択します。画像なしでもOKです。

2. ページ数を入力

「開始ページ」と「終了ページ」を入力します。例えば、10ページから150ページまで管理したい場合は、開始に「10」、終了に「150」と入力。プレビューが自動で更新されます。

3. 画像をダウンロード

「画像をダウンロード」ボタンをクリックするだけ。PNG画像がダウンロードされるので、プリンターで印刷して使えます。

活用アイデア {#benefits}

紙に印刷してチェックを付けていくことで、こんなメリットがあります。

• 一つ一つチェックマークを付けていくことで、目に見える形で進捗を実感でき、達成感が得られる
• 「あとこれだけ進んだ」「目標まであと少し」といった具体的な感覚が、学習を続ける上でのモチベーションになる
• シートを壁に貼ったり、手帳に挟んだりして常に目に入る場所に置くことで、学習を意識しやすくなり、習慣化を助ける
• ページ数の代わりにタスクの項目数を設定すれば、30日間チャレンジなどのチェックシートとしても使える
• 紙とペンで記録することで、集中力を高めたり、デジタル疲れを軽減したりする効果も期待できる

お子さんのドリル学習の管理、趣味の編み物や手芸の工程管理、長編ドラマの視聴記録など、いろんな使い方ができます。

ブラウザで完結 {#tech}

このツールは、ブラウザだけで全ての処理が完結するように作られています。特別なソフトウェアのインストールは必要ありません。

表紙画像の処理やチェックシートの描画は、すべてブラウザ内部で行われます。選択した画像データが外部のサーバーに送信されることはないので、安心して使えます。

:::post-link{url="/ja/tools/progress-checksheet/" text="▶︎ 進捗チェックシートメーカー（印刷用）"}

Next.jsのデプロイ先としては開発元のVercelが有名ですが、Cloudflare Pagesも非常に有力な選択肢です。Cloudflareが提供する高速なCDN、強力なセキュリティ機能、そして余裕のある無料枠といったメリットがあり、個人開発から小～中規模のWebサイトまで幅広く活用できます。今回は、筆者がよく利用するCloudflare Pagesへのデプロイ方法をご紹介します。

※この手順は、作成したNext.jsプロジェクトのコードが、GitHub（またはGitLab）のリポジトリ（プライベートでも可）にプッシュ（保存）されていることを前提としています。

この記事で解説する手順

1. Cloudflare PagesにNext.jsプロジェクトを追加する
2. GitHubプライベートリポジトリへのアクセス許可を設定する
3. Next.js用のビルド設定と注意点 (Node.jsバージョン, 互換フラグ)
4. Cloudflare Pagesに独自ドメインを設定する (ネームサーバー変更)
5. まとめ：Next.js + Cloudflare Pages + 独自ドメイン設定の流れ

:::ad

Cloudflare PagesにNext.jsプロジェクトを追加する

まず最初のステップとして、Cloudflareの管理画面（ダッシュボード）で新しいPagesプロジェクトを作成し、デプロイしたいNext.jsプロジェクトのGitHubリポジトリと連携させます。

1. Cloudflareダッシュボードにログインし、左側のメニューから「Workers & Pages」セクションを選択します。（※CloudflareのUIは頻繁に更新されるため、メニュー名が若干異なる場合があります。類似の項目を探してください。）

2. 表示された画面の「概要」タブなどで、「アプリケーションを作成」ボタンを見つけてクリックします。

3. 「アプリケーションを作成」画面が開いたら、「Pages」タブが選択されていることを確認し、「Gitに接続」ボタンをクリックします。Cloudflare PagesはGitリポジトリと連携して自動デプロイを行うのが基本です。

4. GitHubまたはGitLabアカウントとの連携画面に進みます。初めて連携する場合は、「アカウントを追加」ボタンをクリックし、画面の指示に従ってGitHubアカウントを認証し、Cloudflareからのアクセスを許可します。

5. アカウント連携が完了すると、「リポジトリを選択」セクションに、連携したアカウントのGitリポジトリ一覧が表示されます。この中から、デプロイしたいNext.jsプロジェクトのリポジトリを選択してください。

:::ad

GitHubプライベートリポジトリへのアクセス許可を設定する

【ポイント】 もしデプロイしたいリポジトリがプライベート（非公開）設定の場合、上記のリポジトリリストに表示されないことがあります。これは、Cloudflare Pagesアプリケーションがそのプライベートリポジトリにアクセスする権限を持っていないためです。その場合は、以下の手順でGitHub側でアクセス許可を与える必要があります。

1. GitHubにログインし、右上のアイコンから「Settings」（設定）を開き、左側メニューの「Applications」（アプリケーション）を選択します。

2. 「Installed GitHub Apps」タブを選択し、リストの中から「Cloudflare Pages」（または類似の名前）を見つけてクリックします。

3. 「Repository access」（リポジトリへのアクセス）セクションまでスクロールします。ここで、「Only select repositories」（選択したリポジトリのみ）オプションを選択し、表示されるリポジトリリストの中から、Cloudflare PagesにデプロイしたいNext.jsプロジェクトのリポジトリにチェックを入れます。最後に「Save」ボタンを押して変更を保存します。

**【セキュリティ推奨】**もしここが「All repositories」（すべてのリポジトリ）になっていた場合でも、セキュリティの観点から、必要なリポジトリのみにアクセスを限定する「Only select repositories」に変更することをお勧めします。

4. このGitHub側の設定が完了したら、Cloudflare Pagesの画面に戻り、リポジトリ選択のリストを更新（またはページを再読み込み）すると、先ほどアクセスを許可したプライベートリポジトリが表示されるはずです。目的のリポジトリを選択し、「セットアップを開始」ボタンをクリックして次のステップに進みます。

:::ad

Next.js用のビルド設定と注意点 (Node.jsバージョン, 互換フラグ)

リポジトリを選択すると、次にビルド設定とデプロイに関する設定画面が表示されます。Cloudflare PagesがGitHubリポジトリからコードを取得し、どのようにビルドしてデプロイするかをここで指定します。

1. 「ビルド設定」セクションにある「フレームワーク プリセット」のドロップダウンメニューを開き、「Next.js」を選択します。Cloudflare Pagesは多くのフレームワークに対応しており、プリセットを選択すると、そのフレームワークに最適なビルドコマンドや設定が自動的に入力されるため便利です。

2. プリセットを選択すると、「ビルドコマンド」（例: npm run build や next build）や「ビルド出力ディレクトリ」（例: .next や .vercel/output/static。Next.jsのバージョンや設定により異なる場合があります）が自動的に入力されます。通常はこのままで問題ありません。

【注意点1】Node.jsバージョンの指定が必要な場合

基本的な設定は以上ですが、このまま「保存してデプロイする」をクリックすると、ビルド時にエラーが発生することがあります。よくある原因の一つが、Cloudflare Pagesのビルド環境で使用されるNode.jsのバージョンが、あなたのNext.jsプロジェクトが必要とするバージョンよりも古い場合です。

ビルドログを確認し、以下のようなエラーメッセージが表示されていたら、Node.jsのバージョン指定が必要です。

Initializing build environment. Failed: error finding node version '>=18.0.0'
You are using Node.js 18.17.1.
For Next.js, Node.js version "^18.18.0 || ^19.8.0 || >= 20.0.0" is required.

（上記はエラーメッセージの例です。バージョン番号は異なる場合があります）

このエラーを解決するには、Cloudflare Pagesのプロジェクト設定で、使用するNode.jsのバージョンを明示的に指定します。

プロジェクトの「設定」>「環境変数」を開き、「ビルド環境変数」セクション（または「実稼働/プレビュー環境変数」の両方）で「変数を追加」をクリックし、以下のように設定します。

• 変数名: NODE_VERSION
• 値: あなたのNext.jsプロジェクトが必要とするNode.jsのバージョン番号を指定します（例: 18.18.0 や 20.0.0 など。エラーメッセージやNext.jsのドキュメント、ローカル開発環境に合わせてください）。package.json の engines フィールドで指定している場合は、それに合わせるのが良いでしょう。

環境変数を設定した後、再度デプロイ（ビルドログ画面などから「デプロイを再試行」）を行うと、指定したNode.jsバージョンが使用され、ビルドが正常に完了するはずです。

【注意点2】Node.js互換フラグの設定が必要な場合

ビルドは成功したものの、デプロイされたサイト（xxx.pages.dev）にアクセスすると、以下のようなエラー画面が表示される場合があります。

これは「Node.JS Compatibility Error」と呼ばれるもので、Cloudflare Pagesの実行環境（Cloudflare Workers）でNext.jsアプリケーション（特にサーバーサイドの機能やAPIルートなど）を正しく動作させるために、Node.jsのAPI互換モードを有効にする必要があることを示しています。

このエラーを解決するには、以下の設定を行います。

プロジェクトの「設定」>「関数」>「互換性フラグ」セクション（または「互換性設定」など類似の項目）を見つけます。「フラグを設定」（または「追加」）ボタンをクリックし、「nodejs_compat」というフラグを追加して保存します。（通常、実稼働環境とプレビュー環境の両方に設定します）

このフラグを設定し、再度デプロイが完了した後、サイトにアクセスすると、Next.jsアプリケーションが正常に表示されるはずです。

:::ad

Cloudflare Pagesに独自ドメインを設定する (ネームサーバー変更)

ビルドとデプロイが成功し、プロジェクト名.pages.dev のようなURLでサイトが表示されるようになったら、最後のステップとして、あなたが所有する独自ドメイン（例: your-cool-site.com）をこのCloudflare Pagesプロジェクトに割り当てます。

独自ドメインを設定する大まかな流れは以下の通りです。

1. Cloudflare Pages側での設定: プロジェクトの設定画面で、使用したい独自ドメイン名を追加します。
2. ネームサーバー情報の確認: Cloudflareから、あなたのドメインに設定すべきネームサーバーのアドレスが指示されます。
3. ドメインレジストラ側での設定: あなたがドメインを取得したサービス（例: お名前ドットコム, Google Domains, Route 53など）の管理画面で、ドメインのネームサーバー設定を、Cloudflareから指示されたものに変更します。
4. DNS反映待ち: ネームサーバー変更の情報がインターネット全体に行き渡る（DNSが伝播する）のを待ちます。通常は数分から数時間ですが、最大で48時間程度かかることもあります。
5. Cloudflare Pages側での有効化: Cloudflareがネームサーバーの変更を確認できたら、ドメインが「アクティブ」状態になり、Pagesプロジェクトと独自ドメインが接続されます。

以下では、ドメインレジストラとして「お名前ドットコム」を使用した場合の具体的な手順例を示します。（基本的な流れは他のレジストラでも同様です）

ステップ1：Cloudflare Pagesにカスタムドメインを追加

1. Cloudflare Pagesのプロジェクト画面に戻り、「カスタムドメイン」タブを選択し、「カスタムドメインを設定」ボタンをクリックします。

2. テキストボックスに、設定したいあなたの独自ドメイン名（例: your-cool-site.com）を入力し、「続行」をクリックします。

3. もしまだそのドメインがCloudflareで管理されていない場合は、CloudflareにドメインのDNS管理を移管（または部分的に委任）するプロセスが開始されます。画面の指示に従い、「DNS転送を開始」や「サイトを追加」のようなボタンをクリックします。（※これはドメイン自体をCloudflareに移管するのではなく、あくまでDNSの管理権限をCloudflareに向ける設定です）

4. ドメイン名を入力し、Cloudflareが既存のDNSレコードをスキャンするプロセスに進みます。「Continue」をクリックします。

5. Cloudflareのプラン選択画面が表示されます。独自ドメインの利用だけであれば、通常は画面下部にある「Freeプラン」（無料プラン）を選択して「Continue」をクリックすれば十分です。

6. Cloudflareがスキャンした現在のDNSレコードが表示されます（もしあれば）。内容を確認し（分からなければそのままでもOK）、「Continue」をクリックします。

7. 確認のポップアップが出たら「Confirm」をクリックします。

8. 【重要】 この画面で、あなたのドメインに設定すべき**Cloudflareのネームサーバーアドレス（通常は2つ）**が表示されます。これらのアドレス（例: ada.ns.cloudflare.com, ben.ns.cloudflare.com など）を正確にコピーまたはメモしておきます。これが次のステップで必要になります。

ステップ2：ドメインレジストラでネームサーバーを変更

次に、あなたのドメインを取得・管理しているサービス（ドメインレジストラ）の管理画面にログインし、ネームサーバーの設定を変更します。

1. ドメインレジストラ（この例では「お名前ドットコム」）のウェブサイトにアクセスし、ログインします。

2. ドメイン管理メニューの中から、対象ドメインの「ネームサーバー設定」や「DNS設定」といった項目を探し、編集画面を開きます。

3. レジストラの現在のネームサーバー設定（通常はレジストラ自身のネームサーバーが設定されています）を削除または変更し、先ほどCloudflareから指示された2つのネームサーバーアドレスを入力・保存します。（入力欄が複数ある場合は、指示された2つを入力し、残りは空欄にするか、レジストラの指示に従います）

【注意】DNSの伝播には時間がかかります！

ネームサーバーの変更設定がインターネット全体に行き渡る（DNSが伝播する）までには、時間がかかります。早ければ数分で反映されることもありますが、通常は数時間、場合によっては最大で48時間程度かかることもあります。この間は、独自ドメインでサイトにアクセスできなかったり、古い情報が表示されたりすることがありますので、焦らず気長に待ちましょう。Cloudflareのダッシュボードで定期的にステータスを確認するか、Cloudflareから届く確認メールを待ちます。

ステップ3：Cloudflare Pagesでドメインを有効化

ネームサーバーの変更がCloudflare側で無事に認識されると、Cloudflareダッシュボードのドメイン管理画面で、該当ドメインのステータスが「保留中」から「アクティブ」に変わります。（今回は比較的早く、5分程度で反映されました）。

ドメインがアクティブになったら、いよいよCloudflare Pagesプロジェクトと独自ドメインを正式に接続します。

1. 再度、Cloudflare Pagesのプロジェクト設定画面に戻り、「カスタムドメイン」タブを開きます。

2. 「カスタムドメインを設定」ボタンをクリックし、もう一度あなたの独自ドメイン名を入力して「続行」します。

3. 今度はCloudflareがドメインを認識しているため、「ドメインをアクティベート」や「DNSレコードを確認」といった画面が表示されるはずです。Cloudflare Pagesが必要とするDNSレコード（通常はCNAMEレコード）が自動で設定（または提案）されます。内容を確認し、「ドメインをアクティベート」ボタンをクリックします。

4. ステータスが「初期化中」や「認証中」などと表示され、しばらく待つと最終的に「アクティブ」に変わります。これで設定は完了です！

設定が完了すると、あなたの独自ドメイン（例: https://your-cool-site.com）にアクセスすると、Cloudflare PagesにデプロイされたNext.jsサイトが表示されるようになります。（SSL証明書もCloudflareが自動で発行・管理してくれます）

:::ad

まとめ：Next.js + Cloudflare Pages + 独自ドメイン設定の流れ

以上が、Next.jsサイトをCloudflare Pagesにデプロイし、独自ドメインを設定するまでの一連の手順でした。全体の流れをもう一度おさらいしましょう。

1. GitHub準備: Next.jsプロジェクトをGitHubリポジトリにプッシュする。
2. Cloudflare Pages連携: Cloudflare Pagesでプロジェクトを作成し、GitHubリポジトリと連携する。（プライベートリポジトリの場合はGitHub側でアクセス許可設定を行う）
3. ビルド設定とエラー対応:
   • フレームワークプリセットで「Next.js」を選択。
   • 必要に応じて、環境変数 NODE_VERSION でNode.jsバージョンを指定する。
   • 必要に応じて、互換性フラグ nodejs_compat を設定する。
4. 独自ドメイン設定:
   • Cloudflare Pagesにカスタムドメインを追加し、指示されたCloudflareのネームサーバーを確認する。
   • ドメインレジストラの管理画面で、ネームサーバーをCloudflareのものに変更する。
   • DNSの伝播を待ち、Cloudflareでドメインがアクティブになったら、Pagesプロジェクトでドメインを有効化する。

ビルド時のNode.js関連のエラーや、DNS設定の反映待ち時間など、いくつか注意すべき点はありますが、手順自体は比較的シンプルに進められます。Cloudflare Pagesは、高速な配信、強力なセキュリティ、そして手厚い無料枠を提供しており、Next.jsアプリケーションのホスティング先として非常に魅力的な選択肢です。ぜひこのガイドを参考に、デプロイに挑戦してみてください。

（※この記事では基本的なデプロイ手順を解説しました。実際のアプリケーションの要件によっては、環境変数の設定、カスタムビルドコマンド、リダイレクトルールなど、さらに詳細な設定が必要になる場合があります。その際はCloudflare Pagesの公式ドキュメント等も合わせて参照してください。）

今回は、Unityのツール「Mantis LOD Editor」と「MeshDeleterWithTexture」を用いて、アバターのポリゴン数を削減し、パフォーマンスランクを「Very Poor」から「Poor」へ改善できたため、その手順と方法を記録としてまとめます。

最適化結果：ビフォーアフター

最適化前：188,784ポリゴン / パフォーマンスランク: Very Poor

最適化後：69,995ポリゴン / パフォーマンスランク: Poor

上記のように、見た目への影響を最小限に抑えつつ、ポリゴン数を63%削減することに成功しました。

【はじめに：この記事を読む前に】

この記事は、約19万ポリゴンのハイエンドモデルを無理やり7万ポリゴン以下に削減しようとした記録です。正直なところ、実際にやってみて「ここまで削減する必要があったかな？」と感じる部分もありました。

実用的には、パフォーマンスが重要な場面では別途軽量なアバターを用意する方が現実的です。ただ、「こういう削減方法もあるんだ」という知識として、あるいは軽度の最適化（10万→7万ポリゴン程度）を目指す場合の参考として、気軽に読んでいただければと思います。

具体的には、以下の方法でポリゴン数を効果的に削減しました。これらのテクニックは、アバター改変や自作モデル制作においても重要になると思われます。

• 隠れたパーツの削除：服の下で見えない体の一部（肘など）のメッシュを削除
• Mantis LOD Editorによる削減：各パーツ（服、髪、小物など）のポリゴン数を、見た目が崩れない範囲で削減
• MeshDeleterWithTextureによる部分削除：服の不要な装飾や、さらに隠れた部分のメッシュをテクスチャ指定で削除
• （応用）MeshDeleterによるパーツ分離：複合パーツ（例：インナーとアウターが一体化した服）を分離し、それぞれ個別に最適化

この記事では、これらの手順を順番に解説していきます。

:::ad

:::toc

• 必要なツールと準備
• 知っておくと便利な用語
• Mantisでポリゴン削減
• Mantisだけでは難しいケース
• MeshDeleterで部分削除
• 応用：服パーツを分離
• 最適化の成果とポイント
• 参考情報
• 追記：ハイエンドモデルの注意点

:::

:::ad

必要なツールと準備 {#tools}

今回のVRChatアバター最適化（ポリゴン削減）で使用した主なツールは以下の通りです。

• Mantis LOD Editor - Professional Edition (Unity Asset Store / 有料: 約$55)

  • 高品質なポリゴン削減（リダクション）機能を持つ定番のUnityアセット。アバターの各パーツのポリゴン数を効率的に減らせます。購入後、UnityのPackageManager > My Assetsからインポートします。

• 【非破壊でポリゴン削減】Mantis LOD EditorのNDMF化ツール (Booth: ひつぶさん作 / 無料 ※Mantis LOD Editor本体が必要)

  • 上記のMantis LOD Editorを、VRChatアバター改変で広く使われているフレームワーク「NDMF（なでもふ）」上で、より安全かつ簡単に（非破壊的に）利用できるようにするツール。Boothからダウンロードし、unitypackageをインポートします。実際にアバターに適用するのはこちらです。

• MeshDeleterWithTexture beta (Booth: がとーしょこらさん作 / 無料)

  • テクスチャ画像上で範囲を指定することで、対応するメッシュ部分を削除（実際には新しいメッシュを生成）できる非常に便利なUnityエディタ拡張。Mantisでは難しい、服の細かい装飾の削除や、隠れた部分のメッシュ除去に役立ちます。Boothからダウンロードし、unitypackageをインポートします。

• anatawa12's VRC Avatar Tools (旧: gists pack) (VCC経由で導入可能)

  • アバターのパフォーマンス統計情報を詳細に表示する機能などが含まれるツール群。特に「Actual Performance」タブは、最適化作業中の現在のポリゴン数やパフォーマンスランクをリアルタイムで確認するために必須です。VCC (VRChat Creator Companion) の「Manage Project」から簡単に追加できます。

【重要】Actual Performanceタブでの確認方法：

anatawa12's VRC Avatar Toolsを導入すると、VRChat SDK Control Panelに「Avatars」タブが追加され、その中に「Actual Performance」という項目が表示されます。MantisやMeshDeleterで最適化を行った後、Unityを再生モード（Play Mode）にすると、このタブの情報が更新され、最新のポリゴン数やパフォーマンスランクを確認できます。目標は、ここの「Polygons」の数値を70,000以下にすることです（Poorランクの上限）。

（↑この例では188,784ポリゴンでVery Poor。目標は70,000ポリゴン以下！）

知っておくと便利な用語 {#terminology}

アバター最適化を進める上で、いくつか知っておくと理解が深まる用語があります。

• 非破壊的 (Non-Destructive) 元のデータを直接書き換えずに行う編集方法のこと。今回使うNDMF版MantisやMeshDeleterは、元のメッシュデータを保持したまま処理を行うため、「非破壊的」です。つまり、設定を間違えたり、結果が気に入らなかったりした場合でも、ツール（コンポーネント）を削除したり設定を戻したりするだけで、簡単に元の状態に戻すことができます。初心者でも安心して試せる大きなメリットです。

• NDMF (Nade Nadenadeshiko Mod Fwk / なでもふ) VRChatアバター改変のためのフレームワーク（仕組み）の一つ。アバターの色々な設定や改変を「コンポーネント」として管理し、それらをビルド時に自動で適用してくれます。非破壊的な改変と相性が良く、多くの便利ツールがNDMFに対応しています。今回使う「Mantis LOD EditorのNDMF化ツール」もその一つです。

:::ad

Mantisでポリゴン削減 {#mantis-basics}

まずは、アバターの中でどのパーツがポリゴン数を増やしている主犯なのかを特定しましょう。

1. UnityでVRChat SDK Control Panelを開き、「Builder」タブを選択します。

2. アバターを選択した状態でビルドを実行しようとすると、パフォーマンスに関する警告（Validation Results）が表示されます。「Polygons」に関する警告メッセージの横にある「Select」ボタンをクリックすると、ポリゴン数が特に多いメッシュ（衣装パーツなど）がHierarchyウィンドウでハイライトされます。

3. ハイライトされたオブジェクト（衣装パーツなど）に、「NDMF Mantis LOD Editor」コンポーネントを追加します。（Inspectorウィンドウで「Add Component」し、"Mantis"で検索すると見つかります）

4. 追加されたコンポーネントの「Quality」スライダーを調整します。この数値を下げるほどポリゴン数が削減されますが、下げすぎるとメッシュの形が崩れてしまいます。

【ポイント】Shaded Wireframe表示を活用しよう

Qualityスライダーを調整する際は、Unityのシーンビュー表示を「Shaded Wireframe」に切り替えると、ポリゴンの削減具合やメッシュの崩れ具合が視覚的に分かりやすくなります。「Shaded」表示と適宜切り替えながら、見た目を損なわないギリギリのラインを探っていきましょう。

この「パーツ特定 → コンポーネント追加 → Quality調整」を、ポリゴン数が多いパーツに対して繰り返していくのが基本的な流れです。

【重要】使わないパーツは完全に削除しよう

アバター改変をしていると、「元の服や髪型も、いつか使うかもしれないから一応残しておこう」と、非表示にしただけでHierarchyに残してしまうことがあります。しかし、非表示にしただけのメッシュもポリゴン数としてカウントされてしまう場合があります！

今回の私のアバターも、元のマヌカちゃんのエプロンパーツなどを非表示で残していましたが、これらをHierarchyから完全に削除したところ、約16,000ポリゴンも削減できました。

使わないパーツは思い切って削除しましょう。もし後で必要になった場合は、元のアバターや衣装のunitypackageを再インポートすれば簡単に戻せます。

（参考： UnityだけでVRChatアバターのVeryPoorを脱出する方法｜こはだ 様）

【注意】顔と素体のポリゴン削減は慎重に！

Mantisでのポリゴン削減は効果的ですが、アバターの「顔」と「素体（Body）」のメッシュは、原則として削減しない方が無難です。

特に顔周りは、豊かな表情を作るために非常に多くの細かいポリゴン（メッシュ）で構成されています。口周りのポリゴンはリップシンク（口パク）の様々な形に対応するため、目周りのポリゴンはまばたきや感情表現のために必要です。

これらの部分をMantisで安易に削減してしまうと、喋るたびに口が破綻したり、表情が崩壊したりする可能性が非常に高くなります。同様に、素体の関節部分なども、削減するとポーズを取ったときに不自然な見た目になりやすいです。

ポリゴン削減は、主に服、髪、アクセサリーなどのパーツで行い、顔と素体はできるだけ元の状態を保つようにしましょう。

【判断】時にはデザイン的な妥協も必要

どうしても目標のポリゴン数（Poorランクの70,000ポリゴン）に収まらない場合、デザインの一部を諦めるという判断が必要になることもあります。

今回のアバターでは、尻尾パーツのポリゴン数をMantisである程度削減しましたが、それでも目標達成が難しかったため、最終的に尻尾パーツ自体を削除する決断をしました。もちろん残念ですが、パフォーマンスランク改善のためには、こうしたトレードオフが必要になる場合もあります。

:::ad

Mantisだけでは難しいケース {#mantis-limitations}

Mantis LOD Editorは非常に優秀なツールですが、最適化を進める中で、Mantisだけでは対応が難しい、あるいは効率が悪いと感じる場面が出てきました。

• 複合パーツの削減限界： インナーとアウターが一体化している服など、一つのオブジェクトに複数の部位が含まれている場合、Mantisで削減すると、先にポリゴン数が少ない部分（例: インナー）が破綻してしまい、ポリゴン数が多い部分（例: アウター）を十分に削減できないことがある。パーツを分離して個別に削減したい。
• 隠れたメッシュの残り： 服の下に隠れている素体の一部（例: お腹周り）を非表示にしてもメッシュが残り、ポリゴン数に含まれてしまう。この隠れた部分だけを削除したい。
• 部分的な装飾の削除： 服の特定の部分（ポケット、ベルト、フリルなど）だけを削除してポリゴン数を稼ぎたいが、Mantisでは全体的な削減しかできない。

これらの課題を解決するために役立つのが、「MeshDeleterWithTexture beta」です。

（↑例えば、服の下に隠れているこのお腹部分のメッシュを削除したい）

MeshDeleterで部分削除 {#meshdeleter}

「MeshDeleterWithTexture beta」は、その名の通り、テクスチャ画像上で指定した範囲に対応するメッシュ部分を削除（正確には、削除した新しいメッシュを生成）してくれる画期的なツールです。

使い方は非常に直感的です。

1. がとーしょこらさんのBoothからunitypackageをダウンロードし、プロジェクトにインポートします。

2. Unityメニューバーに「GotoTools」という項目が追加されるので、「MeshDeleter with Texture」を選択して専用ウィンドウを開きます。

3. ウィンドウ上部の「Renderer」という欄に、メッシュを削除したいオブジェクト（例: 体のメッシュを持つオブジェクト）をHierarchyウィンドウからドラッグ&ドロップします。

4. オブジェクトに設定されているテクスチャ画像がウィンドウ内に表示されます。

5. 画面右側の「Draw Type」から「PEN」などを選択し、テクスチャ上で削除したい部分（例: 服で隠れるお腹の部分）を黒く塗りつぶします。塗りつぶした部分は、シーンビュー上のモデルにもリアルタイムで反映され、削除される範囲を確認できます。

6. 削除範囲を確認したら、「DeleteMesh」ボタンをクリックします。これで、指定した部分が削除された新しいメッシュが生成され、オブジェクトに自動で適用されます。

【ポイント】MeshDeleterも非破壊的！

このツールも「非破壊的」で、元のメッシュデータはプロジェクト内に残っています。もし削除範囲を間違えたり、元に戻したくなったりした場合は、オブジェクトのMesh Renderer（またはSkinned Mesh Renderer）コンポーネントで、Meshの指定を元のファイルに戻すだけでOKです。安心して試せますね。

この方法で、服の下に隠れていた腹部メッシュを削除したところ、約1,000ポリゴン削減できました。さらに、残った部分にMantis LOD Editorを適用して、より効率的にポリゴンを削減することも可能です。

:::ad

応用：服パーツを分離 {#advanced}

MeshDeleterの「テクスチャ範囲指定でメッシュを削除する」機能は、応用することで一体化している服パーツを分離するのにも使えます。

今回使用したテックウェア（約60,000ポリゴン）は、コート部分（アウター）と上半身のインナーが同じ一つのオブジェクト（メッシュ）として作られていました。このままだと、Mantisで削減しようとしても、ポリゴン数の少ないインナー部分が先に破綻してしまい、ポリゴン数の多いコート部分を十分に削減できませんでした。

そこで、MeshDeleterを使って「インナーだけのメッシュ」と「アウターだけのメッシュ」を擬似的に作り出すことにしました。

【パーツ分離手順】

1. 元のテックウェアオブジェクトをHierarchy上で複製（Ctrl+D または Cmd+D）し、それぞれ「インナー用」「アウター用」など分かりやすい名前に変更します。

2. 「インナー用」オブジェクトを選択し、MeshDeleterウィンドウを開きます。

3. テクスチャ上で、アウター（コート）に対応する部分をすべて黒く塗りつぶし、「DeleteMesh」を実行します。これにより、インナー部分だけが残ったメッシュが生成されます。

4. 同様に、「アウター用」オブジェクトを選択し、MeshDeleterウィンドウで今度はインナーに対応する部分をすべて黒く塗りつぶし、「DeleteMesh」を実行します。これにより、アウター（コート）部分だけが残ったメッシュが生成されます。

これで、もともと一体だった服を「インナー」と「アウター」の2つのメッシュに分離できました。Blenderなどの外部モデリングソフトを使わずに、Unity上だけでパーツを分離できるのは非常に便利です。

分離後は、それぞれのパーツ（インナー、アウター）に個別にNDMF Mantis LOD Editorを適用し、より効果的にポリゴン数を削減していくことが可能になります。

最適化の成果とポイント {#summary}

以上の方法を用いた結果、最初に18万ポリゴンあったVeryPoorランクのアバターを、69,995ポリゴンのPoorランクに改善することができました。

最終的に目標の70,000ポリゴン以下に収めるために、服の装飾削除やコートのポリゴン削減など、デザイン面での調整も行いました。見た目を維持しながらポリゴン数を削減する作業は、試行錯誤が必要ですが、非常に良い練習になったと感じています。

今回使用した「Mantis LOD Editor (NDMF版)」と「MeshDeleterWithTexture beta」は、どちらも非破壊的なツールであるため、初心者でも比較的安心して試すことができます。「いつでも元に戻せる」という点は、最適化作業を進める上での大きな心理的な支えになります。

Mantisの強力なポリゴン削減能力と、MeshDeleterの柔軟な部分編集・応用力を組み合わせることで、Very Poorランクのアバターも効果的に最適化できる可能性が高まります。

VRChatアバターのポリゴン数でお悩みの方は、ぜひこの記事で紹介したツールと手順を参考に、最適化に挑戦してみてください。（なお、パフォーマンスランクにはポリゴン数以外にもマテリアル数などが影響するため、総合的な最適化を目指す場合はそちらも考慮が必要です）

参考情報 {#references}

今回のアバター最適化（ポリゴン削減）にあたり、以下の記事や動画を大変参考にさせていただきました。素晴らしい情報をありがとうございます。

• 【第5回】lil NDMF Mesh Simplifier VS Mantis LOD Editor ポリゴン削減比較＆解説【VeryPoor→Medium】 - INSTチャンネル YouTube （※元のリンクがYouTube検索結果になっていたためダミーリンクにしています。実際の動画を検索してください）
• 非破壊でポリゴン削減！　Mantis LOD EditorのNDMF化ツールを紹介！ | メタカル最前線
• 【2024年11月最新版】VCCにこれは入れておけ！　アバター改変の便利ツール紹介 | メタカル最前線
• Mantis LOD Editorを使ってアバターを2万ポリ以下にする【VRChat】｜すゞは
• UnityだけでVRChatアバターのVeryPoorを脱出する方法｜こはだ

:::ad

追記：ハイエンドモデルの注意点 {#appendix}

この記事ではVery PoorランクのアバターをPoorランクに改善する手順を紹介しましたが、すべてのケースで同様の最適化が最善とは限らない点について追記します。特に、元のポリゴン数が非常に多い、いわゆる「ハイエンドモデル」の最適化には注意が必要です。

これらのモデルは、ディテールに富んだ装飾や複雑な衣装、多くのギミックなどが魅力ですが、その分ポリゴン数が膨大（10万ポリゴンをはるかに超えることも珍しくありません）です。このようなモデルに対してMantis LOD Editorなどでポリゴン削減を行うと、わずかな削減率でも見た目のディテールが失われ、モデル本来の魅力が大きく損なわれてしまう可能性があります。

Poorランクの規定（7万ポリゴン）を少しオーバーしている程度のアバター（例えば7万～10万ポリゴン程度）や、もともとシンプルなデザインのデフォルメモデルなどであれば、この記事で紹介した方法は有効でしょう。しかし、規定の倍以上、例えば15万、20万ポリゴンを超えるようなハイエンドモデルを、見た目を維持したままPoorランクまで無理に削減しようとすることは、多くの場合困難であり、あまり推奨できません。

では、どうすれば良いかというと、無理に一つのモデルを極端に最適化するのではなく、用途に応じた使い分けを検討するのが現実的です。

• 通常利用：メインのアバターは、最適化せず元のクオリティのまま使用する
• 軽量化が必要な場面：大人数が集まるイベントや、パフォーマンスが重視される特定のワールドに参加する際には、別途軽量化されたバージョン（Quest対応版などが用意されている場合もあります）を用意するか、あるいは最初から軽量な別のアバターを使用する

筆者の体験談と反省

実を言うと、今回Poorランク（69,995ポリゴン）まで最適化したマヌカ改変モデルですが、しばらく使ってみて、少し考えが変わりました。確かに軽量化には成功したのですが、その過程で服の細かい装飾などを一部削除してしまったことに対し、「そこまでして最適化する必要があったかな？」という気持ちが後から出てきました。

また、私自身のVRChatのプレイスタイルとして、パフォーマンスが非常にシビアなワールドに頻繁に参加するわけではなかったため、「このモデルに関しては、Very Poorのままでも大きな支障はなかったかもしれない」というのが正直なところです。

アバターの最適化は、VRChatを快適に楽しむ上で重要な要素の一つですが、それが常に必須というわけではありません。ご自身のプレイスタイルや参加するコミュニティ、そして「どの程度の見た目の変化なら許容できるか」をよく考慮した上で、最適化を行うかどうか、どのレベルまで行うかを判断することが大切だと思います。

しかし、その一方で、従来のWordPressサイトなどではプラグインで簡単に実現できた機能、例えば「人気記事一覧（ランキング）」などを実装しようとすると、少し工夫が必要になります。

WordPressで人気記事一覧が容易なのは、記事データとページ閲覧数（PV数）が同じデータベース内に記録されており、動的にデータを取得・集計してランキング表示できるためです。しかし、JAMstack構成の多くは、ビルド時に静的なHTMLファイルを生成するため、リアルタイムで変動する閲覧数を基にした動的なランキング表示は得意ではありません。また、フロントエンドとバックエンドが分離しているため、アクセス数を記録・参照する共通の仕組みが標準では備わっていません。

そこで活用したいのが、多くのWebサイトで導入されているアクセス解析ツール「Google Analytics」です。Google Analyticsに蓄積されたページごとの閲覧数データを、そのAPI（Google Analytics Data API (GA4 Data API)）経由で取得し、ビルドプロセスに組み込むことで、静的サイトでありながら「人気記事一覧」を表示することが可能になります。

この記事では、Google Analytics Data API (GA4) を利用して人気記事データを取得し、Next.jsやGatsby.jsといった静的サイトジェネレーター環境で「人気記事一覧」を実装するための具体的な手順と考え方を紹介します。

:::ad

この記事の内容

1. 静的サイト（ヘッドレスCMS）で人気記事一覧を実装する難しさ
2. Google Analytics Data API (GA4) の有効化と基本準備
3. サービスアカウントの利用とセキュリティ上の注意点
4. Node.jsによる人気記事データ取得スクリプトの実装例
5. ビルド時にJSONデータを活用し、静的サイトに組み込む方法
6. まとめ：静的サイトでもAPI連携で人気記事一覧は実現できる！

静的サイト（ヘッドレスCMS）で人気記事一覧を実装する難しさ

前述の通り、従来の動的なCMS（WordPressなど）では、データベースへのアクセスを通じてリアルタイムにPV数を集計し、人気記事ランキングを表示することが一般的でした。

しかし、JAMstack構成の静的サイトでは、サイトのコンテンツはビルド時に生成され、サーバー側での動的なデータ処理は基本的には行いません。そのため、サイトが表示されるたびにPV数をリアルタイムで集計してランキングを変動させる、といった実装は困難です。

そこで、外部サービスであるGoogle Analyticsのデータを活用するアプローチが有効になります。基本的な流れは以下のようになります。

1. ビルド前にデータを取得: スクリプトを実行し、Google Analytics Data APIを通じて、指定期間のページ別閲覧数を取得します。（例: 直近30日間のPV数トップ10記事）
2. データを整形・保存: 取得したランキングデータを扱いやすい形式（例: JSONファイル）に整形して、プロジェクト内に保存します。
3. ビルド時にデータを参照: Next.jsやGatsby.jsなどの静的サイトジェネレーターがサイトをビルドする際に、保存されたJSONファイルを読み込みます。
4. 静的ページに埋め込み: 読み込んだランキングデータ（記事タイトル、URL、PV数など）を使って、「人気記事一覧」のコンポーネントやリストを生成し、静的なHTMLページ内に埋め込みます。

この方法であれば、サイトをデプロイ（ビルド）するたびに最新のランキング情報が反映され、かつサイト自体は高速な静的ファイルとして提供できるため、パフォーマンスを損なうこともありません。

:::ad

Google Analytics Data API (GA4) の有効化と基本準備

まず、Google Analyticsのデータをプログラムから取得するために、APIの有効化と必要な情報を準備します。

1. Google Cloud Platform (GCP) でAPIを有効化:

   • Google Cloud Console (https://console.cloud.google.com/) にアクセスし、プロジェクトを選択または新規作成します。
   • 「APIとサービス」>「ライブラリ」で「Google Analytics Data API」を検索し、有効にします。

2. サービスアカウントを作成し、キーをダウンロード:

   • GCPの「APIとサービス」>「認証情報」で、「認証情報を作成」>「サービスアカウント」を選択し、新しいサービスアカウントを作成します。（名前は任意、ロールは不要な場合が多い）
   • 作成したサービスアカウントを選択し、「キー」タブ>「鍵を追加」>「新しい鍵を作成」で「JSON」形式のキーを作成・ダウンロードします。このJSONファイルは後でスクリプトから使用します。大切に保管してください。

3. サービスアカウントにGA4プロパティへのアクセス権を付与:

   • Google Analytics (https://analytics.google.com/) にアクセスし、対象のGA4プロパティの「管理」（歯車アイコン）を開きます。
   • 「プロパティ設定」>「プロパティのアクセス管理」で、「+」ボタン >「ユーザーを追加」を選択します。
   • 先ほど作成したサービスアカウントのメールアドレス（GCPの認証情報画面で確認できます）を入力し、「役割」として少なくとも「閲覧者」の権限を付与して追加します。

4. GA4プロパティIDを控える:

   • Google Analyticsの「管理」>「プロパティ設定」で、「プロパティ ID」（数字のみのID）を確認し、控えておきます。これもスクリプトで使用します。

     

これらの準備（特にGCPやGA4の操作）については、Googleの公式ドキュメントや他の解説記事も参考に、ご自身の環境に合わせて進めてください。

:::ad

サービスアカウントの利用とセキュリティ上の注意点

Google Analytics Data APIのように、Googleのサービスにプログラムからアクセスする際には、通常「サービスアカウント」という特殊なアカウントを使用します。これは、個人のGoogleアカウントではなく、アプリケーションやスクリプトが自身を認証するためのものです。

前述のステップで作成しダウンロードしたサービスアカウントキー（JSONファイル）には、そのサービスアカウントとしてAPIにアクセスするための秘密の情報が含まれています。そのため、このキーファイルの取り扱いには細心の注意が必要です。

• 絶対に公開しない: JSONキーファイルは、Gitリポジトリ（特にPublicリポジトリ）に絶対にコミットしないでください。誤って公開してしまうと、第三者に不正利用される危険性があります。.gitignoreファイルにキーファイル名を追加し、Gitの管理対象から除外しましょう。
• 安全な場所に保管: ローカル開発環境ではプロジェクトルートなどに置くこともありますが、本番環境（デプロイ先）では、環境変数やシークレット管理機能を使って安全にキー情報を渡すのが一般的です。（後述のスクリプト例参照）
• 権限は最小限に: GA4プロパティでサービスアカウントに付与する権限は、データ取得に必要な最低限の「閲覧者」権限にしておきましょう。

:::ad

Node.jsによる人気記事データ取得スクリプトの実装例

ここでは、準備したサービスアカウントキーとGA4プロパティIDを使って、実際に人気記事データを取得し、JSONファイルとして保存するNode.jsスクリプトの例を示します。

【準備】

1. プロジェクトのルートディレクトリにscriptsフォルダを作成し、その中に以下のスクリプトをfetch-popular-posts.jsなどの名前で保存します。
2. プロジェクトのルートディレクトリに、GCPからダウンロードしたサービスアカウントキーのJSONファイルをservice-account.json（または任意の名前）として配置します。
3. プロジェクトのルートディレクトリに.envファイルを作成し、以下の形式でGA4プロパティIDを記述します（?????????の部分は実際のIDに置き換えてください）。

GA4_PROPERTY_ID=?????????

4. 【重要】service-account.jsonと.envファイルは機密情報を含むため、必ず.gitignoreファイルに追加して、Gitリポジトリに含まれないようにします。

# .gitignore ファイルの例
service-account.json
.env

5. 必要なnpmパッケージをインストールします。ターミナルで以下のコマンドを実行してください。

npm install @google-analytics/data dotenv

（または `yarn add @google-analytics/data dotenv`）

【スクリプト例: scripts/fetch-popular-posts.js】

// .envファイルから環境変数を読み込む
require("dotenv").config();
// Google Analytics Data APIクライアントライブラリ
const { BetaAnalyticsDataClient } = require("@google-analytics/data");
// Node.jsのファイルシステムとパス操作モジュール
const fs = require("fs");
const path = require("path");

// 非同期関数として人気記事取得処理を定義
async function fetchPopularPosts() {
  let credentials;

  // --- 認証情報の設定 ---
  // 本番環境用に環境変数 GA_CREDENTIALS_JSON があればそれを使う (推奨)
  if (process.env.GA_CREDENTIALS_JSON) {
    try {
      credentials = JSON.parse(process.env.GA_CREDENTIALS_JSON);
    } catch (e) {
      console.error("Failed to parse GA_CREDENTIALS_JSON environment variable.", e);
      process.exit(1);
    }
  }
  // 環境変数がなければ、ローカルの service-account.json を読み込む
  else {
    const keyFilePath = path.resolve(__dirname, "../service-account.json");
    if (fs.existsSync(keyFilePath)) {
      credentials = JSON.parse(fs.readFileSync(keyFilePath, "utf8"));
    } else {
      console.error(`Service account key file not found at ${keyFilePath}. Or set GA_CREDENTIALS_JSON env var.`);
      process.exit(1);
    }
  }

  // --- GA4 Data API クライアントの初期化 ---
  const analyticsDataClient = new BetaAnalyticsDataClient({
    credentials: {
      client_email: credentials.client_email,
      private_key: credentials.private_key,
    },
  });

  // --- GA4 プロパティIDの取得 ---
  const propertyId = process.env.GA4_PROPERTY_ID;
  if (!propertyId) {
    throw new Error("GA4_PROPERTY_ID is not set in environment variables.");
  }

  // --- APIリクエストの実行 ---
  try {
    const [response] = await analyticsDataClient.runReport({
      // プロパティIDを指定
      property: `properties/${propertyId}`,
      // データ取得期間 (過去30日間)
      dateRanges: [{ startDate: "30daysAgo", endDate: "today" }],
      // 取得するディメンション (ページのパス, ページのタイトル)
      dimensions: [{ name: "pagePath" }, { name: "pageTitle" }],
      // 取得するメトリクス (表示回数)
      metrics: [{ name: "screenPageViews" }], // GA4では "ga:pageviews" ではなく "screenPageViews"
      // 並び順 (表示回数の降順 = 多い順)
      orderBys: [{ metric: { metricName: "screenPageViews" }, desc: true }],
      // 取得件数 (上位10件)
      limit: 10,
      // ディメンションフィルタ (ブログ記事パス '/blog/' で始まるページのみ対象とする例)
      dimensionFilter: {
        filter: {
          fieldName: "pagePath",
          stringFilter: {
            matchType: "PARTIAL_REGEXP", // 正規表現に部分一致
            value: "^/blog/", // /blog/ で始まるパス
          },
        },
      },
    });

    // --- 結果の整形 ---
    const popularPosts = response.rows.map((row) => ({
      pagePath: row.dimensionValues[0].value,
      pageTitle: row.dimensionValues[1].value,
      pageViews: parseInt(row.metricValues[0].value, 10), // 閲覧数を整数に変換
    }));

    // --- JSONファイルへの書き出し ---
    // プロジェクトルートに data フォルダがなければ作成
    const dataDir = path.resolve(__dirname, "../data");
    if (!fs.existsSync(dataDir)) {
      fs.mkdirSync(dataDir);
    }
    // dataフォルダ内に popular-posts.json として保存
    fs.writeFileSync(
      path.join(dataDir, "popular-posts.json"),
      JSON.stringify(popularPosts, null, 2) // 読みやすいように整形して出力
    );
    console.log("Successfully fetched popular posts and saved to data/popular-posts.json");

  } catch (error) {
      console.error("Error fetching Google Analytics data:", error);
      process.exit(1); // エラー発生時はプロセスを終了
  }
}

// 関数を実行
fetchPopularPosts();

スクリプトのポイント：

• 認証情報: 環境変数 GA_CREDENTIALS_JSON があればそれを優先的に使用し、なければローカルの service-account.json を読み込みます。これにより、ローカル開発と本番環境（Cloudflare Pagesなど）で認証情報を安全に扱うことができます。（本番環境では、環境変数にJSONキーの内容全体を設定するのが一般的です）
• APIリクエスト: runReport メソッドでGA4にリクエストを送ります。
  • dateRanges: データ取得期間を指定します（例: "30daysAgo"～"today"）。
  • dimensions: 取得したい情報の種類（ページのパス、タイトルなど）を指定します。
  • metrics: 集計したい指標（表示回数 screenPageViews など）を指定します。
  • orderBys: 並び順を指定します（例: 表示回数の多い順）。
  • limit: 取得する最大件数を指定します。
  • dimensionFilter: 【重要】 取得するページを絞り込むためのフィルターです。この例では「ページのパス (pagePath) が正規表現 ^/blog/ に一致するもの」だけを取得しています。これにより、ブログ記事以外のページ（トップページ / など）がランキングに含まれるのを防ぎます。この value は、あなたのブログ記事のURL構造に合わせて必ず変更してください。
• 結果の整形と保存: APIからの応答データを扱いやすいJSON形式（パス、タイトル、閲覧数のオブジェクト配列）に変換し、data/popular-posts.json ファイルに書き出します。

このスクリプトをターミナルで node scripts/fetch-popular-posts.js と実行すると、data フォルダ（なければ作成される）に人気記事のデータがJSONファイルとして保存されます。

:::ad

ビルド時にJSONデータを活用し、静的サイトに組み込む方法

人気記事データを含むJSONファイルが用意できたら、あとは静的サイトジェネレーター（Next.jsやGatsby.js）のビルドプロセスでこのJSONファイルを読み込み、ページやコンポーネントにデータを渡して表示するだけです。

しかし、ここで重要なのは「サイトをビルド（デプロイ）するたびに、このJSONファイルが最新の情報に更新されるようにする」ことです。そうしないと、ランキングが古いままになってしまいます。

これを実現するには、通常、プロジェクトの package.json ファイル内の scripts セクションを編集し、ビルドコマンドの実行前にデータ取得スクリプトが実行されるように設定します。

【package.json の設定例 (Gatsby.jsの場合)】

{
  "scripts": {
    // データ取得スクリプトを実行するコマンドを定義
    "fetch-data": "node scripts/fetch-popular-posts.js",
    // 開発サーバー起動時にもデータを取得する場合 (任意)
    "develop": "npm run fetch-data && gatsby develop",
    // 本番ビルド時に必ずデータ取得を実行するように設定
    "build": "npm run fetch-data && gatsby build",
    // startコマンドも同様に（開発用サーバー起動など）
    "start": "npm run develop",
    // 他にも test や serve など...
  }
}

この例では、

1. fetch-data という名前でデータ取得スクリプトを実行するコマンドを定義しています。
2. build コマンド（本番用ビルド）の実行時に、まず npm run fetch-data を実行し、その後に gatsby build が実行されるように設定しています。（&& はコマンドを順番に実行する指定子）
3. 同様に、開発サーバー起動時 (develop, start) にもデータを取得するようにしています（開発中も最新データで確認したい場合）。Next.jsの場合は next dev や next build の前に npm run fetch-data && を追加します。

このように設定しておくことで、npm run build コマンドを実行（またはVercelやCloudflare Pagesなどのホスティングサービスで自動ビルドが実行される際）に、

1. まず fetch-popular-posts.js が実行され、最新の人気記事データが data/popular-posts.json に保存されます。
2. 次に、Gatsby (またはNext.js) のビルドプロセスが開始され、その中で data/popular-posts.json ファイルを読み込み、人気記事一覧を含む静的HTMLページが生成されます。

この「ビルド時データフェッチ」のアプローチにより、サイト訪問者は常に（ビルド時点での）最新の人気記事一覧を高速な静的ページとして閲覧でき、サーバーへの負荷やAPIの実行時呼び出しを気にする必要がなくなります。これはパフォーマンスとセキュリティの観点からもJAMstack構成の大きなメリットです。

あとは、各フレームワークの方法に従って、ビルド時にJSONデータを読み込み、Reactコンポーネントなどに渡して表示する部分を実装してください。（例: Gatsbyではgatsby-node.jsでJSONを読み込みGraphQLデータレイヤーに追加、Next.jsではgetStaticProps内でfs.readFileを使ってJSONを読み込むなど）

:::ad

まとめ：静的サイトでもAPI連携で人気記事一覧は実現できる！

JAMstackやヘッドレスCMSを採用した静的サイト環境では、WordPressのような従来の動的CMSとは異なり、「人気記事一覧」をリアルタイムで表示することは困難です。

しかし、この記事で解説したように、Google Analytics Data API (GA4) を活用し、サイトのビルドプロセス前にアクセスデータを取得・整形してJSONファイルなどの形で保存し、それをビルド時に静的ページに埋め込むというアプローチを取ることで、静的サイトのメリット（高速表示、高セキュリティ、スケーラビリティ）を維持しつつ、最新の人気記事ランキングを表示することが可能になります。

この方法は、特定のCMSやフロントエンドフレームワークに強く依存しないため、Next.js、Gatsby.jsだけでなく、様々なJAMstack構成に応用できます。サービスアカウントキーの安全な管理や、APIリクエストのフィルター設定など、いくつか注意点はありますが、一度仕組みを構築すれば、自動でランキングが更新される便利な機能を実現できます。

ぜひ、ご自身の静的ブログサイトやWebサイトの構成に合わせて、この手法を参考に「人気記事一覧」の実装に挑戦してみてください。

自分視点では特に問題ないのに、他人から見るとコートの裏側などが描画されず、体が透けて見えてしまう…。これはVRChatでアバターを使っていると比較的よく遭遇する現象です。

この「衣装の裏地が透ける問題」、実は簡単なUnityツールで解決できる場合があります。この記事では、その原因と、解決策となるツール「MeshFlipper」の使い方について、備忘録も兼ねて解説します。

:::ad

:::toc

• 裏地が透ける原因
• MeshFlipperの導入と使い方
• 技術的な仕組み
• まとめ

:::

:::ad

裏地が透ける原因 {#cause}

この現象の主な原因は、多くの3Dモデルで採用されている「片面レンダリング（または片面描画）」という仕組みにあります。

簡単に言うと、3Dモデルを構成するポリゴン（板のようなもの）は、基本的に「表面」だけを描画し、「裏面」は描画しないことで、コンピューターの描画負荷を軽くしています。体にぴったりフィットした服などは、外側（表面）だけが見えれば十分なので、この仕組みで問題ありません。

しかし、コート、マント、スカートのようにヒラヒラしたり、裾が長かったりする衣装の場合、キャラクターが動いたり、特定の角度から見たりすると、衣装の「裏面」が見えてしまうことがあります。

片面レンダリングでは、この「裏面」は描画対象外なので、結果として何も描画されず、背景や体が透けて見えてしまうのです。これが、他人視点や三人称視点のカメラで見たときに「裏地が透明になっている」「バグで描画されていない」ように見える正体です。

この問題を解決するには、単純に「衣装の裏面もちゃんと描画されるようにする」必要があります。そのための処理を簡単に行ってくれるのが、次にご紹介する「MeshFlipper」というツールです。

:::ad

MeshFlipperの導入と使い方 {#meshflipper-usage}

衣装の裏地が透ける問題の解決方法を探していたところ、以下の記事で「MeshFlipper」というUnityエディタ拡張ツールの存在を知りました。（情報感謝です！）

:::post-link{url="https://note.com/moegitsubasa/n/nd73471257f31#fcc0f527-bb59-4f40-9edf-f6ba3ca05c92" text="Android(Quest)対応方法マニュアルAdvanced!! - もえぎつばさ 様"}

MeshFlipperは、Unity上で3Dモデルのメッシュデータ（形状データ）を加工し、裏面も描画されるように両面化してくれる非常に便利なツールです。fum1さんがBoothで無料配布してくれています。

:::post-link{url="https://booth.pm/ja/items/5645609" text="【無料】メッシュの裏面を生成するツール / Mesh Flipper (BOOTH)"}

導入と基本的な使い方は以下の通り、とても簡単です。

1. MeshFlipperをUnityプロジェクトにインポートする まず、上記BoothからMeshFlipperをダウンロードします。ダウンロードしたファイルに含まれるMeshFlipper.csというスクリプトファイルを、UnityプロジェクトのAssetsフォルダ内の好きな場所（例えばEditorフォルダなど）にドラッグ&ドロップしてインポートします。

2. 裏地が透ける衣装のメッシュを選択する UnityのHierarchyウィンドウで、修正したいアバターを選択し、その中から裏地が透けてしまう衣装のパーツ（オブジェクト）を探します。そのオブジェクトにアタッチされているSkinned Mesh RendererまたはMesh Rendererコンポーネントを見つけてください。

3. MeshFlipperウィンドウを開く Unityのメニューバーから fum1 > Mesh Flipper を選択し、MeshFlipperの専用ウィンドウを開きます。

4. オプションを設定する（重要：TwoSidesを選択） MeshFlipperウィンドウが開いたら、対象の衣装パーツ（Skinned Mesh Rendererなどが付いたオブジェクト）を選択した状態で、以下のオプションを設定します。

   • ✅ TwoSides: このオプションにチェックを入れるのが基本です。これがメッシュを両面化する機能で、チェックを入れると裏面も描画されるようになります。
   • Flip: こちらはポリゴンの面の向き（法線）を反転させる機能です。通常、裏地が透ける問題の解決にはTwoSidesだけで十分です。

   ほとんどの場合、TwoSidesにチェックを入れるだけで裏地が透ける問題は解決します。

5. 「Create Mesh」ボタンを押して実行する オプションを設定したら、「Create Mesh」ボタンをクリックします。すると、MeshFlipperが選択したメッシュを両面化処理し、新しいメッシュデータを作成して自動的に元のメッシュと差し替えてくれます。（元のメッシュデータもバックアップとして残る場合があります）

処理が完了したら、Unityのシーンビューで衣装の裏側から見てみたり、VRChatにアップロードしてフレンドに確認してもらったりしましょう。裏地がちゃんと描画され、透けなくなっていれば成功です！

技術的な仕組み {#technical-details}

少しだけ技術的な話をすると、MeshFlipperは内部で以下のような処理を行っています。

• 頂点データの複製と法線の反転: 元のメッシュの頂点データをコピーし、コピーした側のポリゴンの向き（法線）を反転させます。
• メッシュの結合: 元のメッシュ（表面）と、法線を反転させたコピー（裏面用）を一つに結合します。

これにより、実質的に「表面用のポリゴン」と「裏面用のポリゴン」の両方を持つメッシュデータが作成されます。結果として、どちらの方向から見てもポリゴンが描画されるようになり、裏地が透ける問題が解決するという仕組みです。

要するに、MeshFlipperは「本来は存在しなかった（描画されなかった）服の裏側」を擬似的に作ってくれるツール、と理解しておけば大丈夫です。

この複雑な処理をボタン一つで実行してくれるので、特にコートやスカートなど、裏側が見えやすい衣装を扱う際には非常に重宝します。

:::ad

まとめ {#summary}

VRChatでアバターの衣装（特にコートやマント、スカートなど）の裏地が透けてしまう、透明になってしまうという問題に遭遇したら、まずはUnityエディタ拡張ツール「MeshFlipper」の利用を検討してみてください。

簡単な手順でメッシュを両面化でき、多くの場合、これだけで裏地が正常に描画されるようになります。

MeshFlipperは、開発者のfum1さんがBoothで無料配布してくれています。同じ悩みを持つVRChatユーザーやアバター改変を行う方は、ぜひ導入して試してみることをお勧めします！

:::post-link{url="https://booth.pm/ja/items/5645609" text="【無料】メッシュの裏面を生成するツール / Mesh Flipper (BOOTH)"}

様々なツールがある中で、当初「サブセットフォントメーカー」を試しましたが、私の環境では表示崩れが発生しました。最終的にPythonライブラリ「FontTools」を用いることで、OTF情報（文字詰めなどの見た目を整える情報）を維持したまま、Noto Sans JPフォントをWOFF2形式にサブセット化し、ファイルサイズを50%以上削減、読み込み速度を向上させることに成功しました。その具体的な手順と注意点を備忘録としてまとめます。

:::ad

この記事の内容

1. フォントのサブセット化とは？なぜページ速度改善に必要なのか
2. 【失敗談】サブセットフォントメーカーでOTF情報が欠落し表示が崩れた件
3. 解決策！FontToolsを使った高精度なサブセット作成手順
4. まとめ：FontToolsによるサブセット化の効果とページ速度への貢献

1. フォントのサブセット化とは？なぜページ速度改善に必要なのか

フォントのサブセット化とは、簡単に言うと、フォントファイルの中からWebサイトで実際に使用する文字だけを抜き出し、不要な文字データを削除してファイルサイズを小さくする技術のことです。「普段使わない難しい漢字や特殊記号まで全部読み込むのは無駄だよね？使う文字だけに絞って軽くすれば、サイトがもっと速く表示されるはず！」という考え方に基づいています。

このブログでも使用している定番の日本語フォント「Noto Sans JP」は、Google Fontsからも入手できる高品質なフォントですが、非常に多くの文字（ひらがな、カタカナ、常用漢字、人名漢字、記号など）を網羅しています。

Noto Sans Japanese (Google Fonts)

そのため、ダウンロードしてそのままWebフォント（例えばWOFF形式）としてサイトに組み込むと、標準の太さ（Regular）や太字（Bold）だけで、それぞれ約4MBものファイルサイズになってしまいます。これでは、ユーザーがページを開くたびに大きなデータをダウンロードする必要があり、表示速度のボトルネックになりかねません。

（↑サブセット化前のフォントファイル。サイズが大きいことがわかります。）

そこで重要になるのが、この巨大なフォントファイルを軽量化する「サブセット化」なのです。

:::ad

2. 【失敗談】サブセットフォントメーカーでOTF情報が欠落し表示が崩れた件

フォントのサブセット化について調べると、「サブセットフォントメーカー」というGUIツールがよく紹介されています。私もいくつかの解説サイトを参考に、このツールと「WOFFコンバータ」を使ってNoto Sans JP（TTF形式）からサブセットWOFFフォントを作成してみました。

しかし、生成されたフォントをサイトに適用したところ、予期せぬ表示崩れが発生してしまいました。

（↑左が元の表示、右がサブセットフォントメーカーで変換後の表示。記事タイトル部分の文字間隔が不自然に広がっています。）

原因を調査したところ、どうやら「サブセットフォントメーカー」がフォント変換を行う過程で、Noto Sans JPに含まれる重要なOTF（OpenType Font）情報の一部、特に文字間隔の調整（カーニング、ペアカーニング）を行うための情報（GPOSテーブルなど）を削除してしまったようです。

OTF情報は、文字の形だけでなく、文字と文字の間のアキを自動調整したり、特定の文字の組み合わせで合字（リガチャ）に置き換えたり（GSUBテーブル）といった、フォントの見た目を美しく整えるための重要なデータです。これが失われたために、文字間隔がデフォルトのままになり、レイアウトが崩れてしまったと考えられます。

軽量化はできても、見た目が損なわれては意味がありません。そこで、OTF情報を維持したまま、高精度なサブセット化ができるツールを探し、Python製のライブラリ「FontTools」にたどり着きました。

:::ad

3. 解決策！FontToolsを使った高精度なサブセット作成手順

FontToolsは、フォントファイルを操作するための強力なPythonライブラリ群です。オープンソースで開発されており、TTFやOTF形式のフォントに対して、サブセット化はもちろん、情報の編集、形式変換など、様々な高度な処理を行うことができます。コマンドラインから手軽に利用できるのも魅力です。

FontTools (GitHubリポジトリ)

FontToolsを使ってNoto Sans JPのサブセットを作成する手順は以下の通りです。

3-1. FontToolsのインストール

FontToolsはPythonライブラリなので、まずお使いの環境にPythonがインストールされていることを確認してください。Pythonが利用できる環境であれば、ターミナル（コマンドプロンプト）で以下のpipコマンドを実行してFontToolsをインストールします。

pip install fonttools brotli zopfli

※ WOFF2形式の扱いや、より高い圧縮率（--with-zopfliオプション）を実現するために、brotli と zopfli も一緒にインストールしておくと良いでしょう。

3-2. サブセット化コマンドの実行

次に、ターミナルでpyftsubsetコマンドを使ってサブセット化を実行します。Noto Sans JPの元フォントファイル（例: NotoSansJP-Regular.ttf）があるディレクトリで、以下のコマンドを実行してください。（ファイル名やパスはご自身の環境に合わせて変更してください。）

# NotoSansJP-Regular.ttf からサブセット NotoSansJP-Regular.woff2 を作成する例
pyftsubset NotoSansJP-Regular.ttf \
  --output-file=NotoSansJP-Regular.woff2 \
  --flavor=woff2 \
  --layout-features='*' \
  --unicodes='U+0020-007E,U+3000-30FF,U+4E00-9FAF,U+FF01-FF60,U+FF65-FF9F' \
  --with-zopfli \
  --verbose

同様に、Bold（太字）など他のウェイトのフォントもサブセット化する場合は、元ファイル名と出力ファイル名を変更してコマンドを実行します。

コマンドオプションの解説:

• NotoSansJP-Regular.ttf

  サブセット化の元となるフォントファイル（TTFまたはOTF）。

• --output-file=NotoSansJP-Regular.woff2

  出力するサブセットフォントのファイル名とパスを指定。

• --flavor=woff2

  出力形式をWOFF2に指定。WOFF2はWebフォント用に最適化された形式で、圧縮率が高くファイルサイズを小さくできます。

• --layout-features='*'

  【重要】 これがOTF情報を保持するためのオプションです。'*'を指定することで、カーニング（文字詰め）やリガチャ（合字）などのOpenTypeレイアウト機能に関する情報をすべて保持します。これにより、サブセットフォントメーカーで発生したような表示崩れを防ぎます。

• --unicodes='...'

  【重要】 サブセットに含める文字のUnicode範囲を指定します。ここで指定した範囲外の文字はフォントに含まれなくなり、表示できなくなる（文字化けする）ので慎重に設定します。上記コマンド例の範囲は以下をカバーしています。

  • U+0020-007E: 基本的な半角英数字と記号 (ASCII)
  • U+3000-30FF: 全角スペース、句読点、ひらがな、カタカナなど
  • U+4E00-9FAF: CJK統合漢字（一般的に使われる漢字の多くをカバー）
  • U+FF01-FF60: 全角の英数字や記号の一部
  • U+FF65-FF9F: 半角カタカナ

  ※ サイトで使用する文字に合わせて、この範囲を調整する必要があります。例えば、特定の記号や第二水準漢字なども使う場合は、対応するUnicode範囲を追加します。

• --with-zopfli

  Googleが開発したZopfli圧縮アルゴリズムを使用し、WOFF2ファイルをさらに高圧縮します。ファイルサイズ削減に効果的です。（zopfliライブラリのインストールが必要）

• --verbose

  サブセット化の処理中に詳細なログを出力します。エラーの原因調査や、どの情報が含まれたか/除外されたかを確認するのに役立ちます。

3-3. 生成されたWOFF2ファイルをCSSで読み込む

コマンドが正常に完了すると、指定した場所に軽量化されたWOFF2形式のサブセットフォントファイルが生成されます。あとは、このファイルをWebサーバーにアップロードし、CSSの@font-face規則を使って読み込むように設定を変更します。

/* Regular (標準) */
@font-face {
  font-family: 'Noto Sans JP'; /* フォント名を指定 */
  /* ↓ 生成したWOFF2ファイルのパスを指定 */
  src: url('/path/to/your/fonts/NotoSansJP-Regular.woff2') format('woff2');
  font-weight: 400; /* または normal */
  font-style: normal;
  /* font-display: swap; はフォント読み込み中の挙動を指定するプロパティ。設定推奨 */
  font-display: swap;
}

/* Bold (太字) */
@font-face {
  font-family: 'Noto Sans JP';
  /* ↓ 太字用WOFF2ファイルのパスを指定 */
  src: url('/path/to/your/fonts/NotoSansJP-Bold.woff2') format('woff2');
  font-weight: 700; /* または bold */
  font-style: normal;
  font-display: swap;
}

/* 必要に応じて他のウェイトも同様に設定 */

/* body や 各要素で font-family を指定 */
body {
  font-family: 'Noto Sans JP', sans-serif;
}

これで、軽量化されたサブセットフォントがWebサイトで利用されるようになります。

:::ad

4. まとめ：FontToolsによるサブセット化の効果とページ速度への貢献

FontToolsを使ってNoto Sans JPのサブセット化を行った結果、以下のような効果が得られました。

（↑FontToolsでサブセット化後。ファイルサイズが大幅に削減されています！）

これにより、ブラウザがダウンロードするデータ量が減り、ページの読み込み時間も改善されました。以下のネットワーク分析結果は、変更前と変更後のフォント読み込み時間を示しています。

変更前（サブセット化前）：

変更後（FontToolsでサブセット化後）：

ファイルサイズ削減に伴い、読み込み時間も短縮されていることが確認できます。これは、Core Web Vitalsなどのページ速度指標の改善にも繋がります。

FontToolsはコマンドラインツールですが、一度コマンドを理解すれば、OTF情報を保持したまま高精度なサブセット化が可能です。Webサイトの表示速度を改善したい、特に日本語フォントの重さにお悩みの方は、ぜひFontToolsによるサブセット化を試してみてはいかがでしょうか。含める文字範囲（--unicodes）をさらに絞り込むなど、工夫次第でさらなる軽量化も可能です。

• エクスプローラでフォルダを開いたり、ファイルを表示したりするのに妙に時間がかかる。
• ファイル名の変更中など、ファイル操作をしていると表示が一瞬リセットされる（入力が確定されてイライラ…）。
• ごく稀にPC全体がプチフリーズし、Windowsのタスクバーなどが再読み込みされるような挙動をする。

メモリ診断やGPUドライバ更新、不要ファイルの削除などを試しても改善せず、「そろそろPCの寿命かな…」と考え始めていました。しかし、その前にふとPCの心臓部とも言えるCドライブの状態を確認してみると…

真っ赤！残りの空き容量は5%未満という危険水域でした。

一般的に、WindowsがインストールされているCドライブは、常に10%～15%程度の空き容量を確保しておくことが推奨されています。空き容量が極端に少ないと、Windowsの一時ファイル作成、ページングファイル（仮想メモリ）の確保、システムアップデートなどに支障をきたし、結果としてシステムの不安定化、パフォーマンス低下、読み書き速度の低下（特にSSDの場合）など、様々な不具合を引き起こす原因となります。

そこで今回、この容量不足を解消すべく、現在のCドライブ（約500GBのM.2 SSD）の内容を丸ごと新しい大容量SSD（2TBの2.5インチSSD）にコピー（クローン）して交換（換装）することに挑戦しました。結果的に容量拡張は成功したものの、途中でWindowsが起動しなくなるトラブルにも遭遇し、かなり苦戦しました…。

この記事では、そのSSDクローン換装の具体的な手順、使用したツール、そして遭遇した起動エラー「0xc000000e」の対処法などを、備忘録として詳しくまとめていきます。同じようにCドライブの容量不足に悩んでいる方や、SSD換装を検討している方の参考になれば幸いです。

:::ad

:::toc

• 事前準備
• Step 1: SSDクローン作成
• Step 2: インストールメディア作成
• Step 3: SSD取り付けと起動エラー対処
• Step 4: パーティション拡張
• 換装完了と結果

:::

:::ad

事前準備 {#preparation}

今回のSSDクローン換装で使用した主な物品とソフトウェアは以下の通りです。

• 新しいSSD: シリコンパワー 2TB SSD 3D NAND A58 (2.5インチ SATA)

  • 換装先のSSDです。容量や規格（M.2 NVMe, 2.5インチ SATA等）、メーカーはお好みで。今回はセールで安価だったこちらを選びました。元のM.2から2.5インチへの変更ですが、マザーボードに空きSATAポートがあれば問題ありません。

    :::post-link{url="https://amzn.to/3VicRQJ" text="シリコンパワー 2TB SSD 3D NAND A58 (Amazon)"}

• SSDクローンソフト: Macrium Reflect Free

  • 元のSSDの内容を新しいSSDに丸ごとコピー（クローン）するためのソフトウェア。様々なソフトがありますが、今回は無料で評価も高かったこちらを使用しました。

    :::post-link{url="https://www.gigafree.net/system/SystemBackup/macriumreflectfreeedition.html" text="Macrium Reflect Free (窓の杜)"}

    :::post-link{url="https://note.com/combat_travor/n/n931acb354e2d" text="Macrium Reflect Freeを使ってSSDをクローンする方法 (combat-travor 様)"}

• USBメモリ: 16GB以上のもの

  • 換装後にWindowsが起動しなくなった場合の修復作業で使用します。Windowsのインストールメディアを作成するために必要です。【重要】この作業は事前にやっておくことを強く推奨します。

    :::post-link{url="https://www.microsoft.com/ja-jp/software-download/windows10" text="Windows 10メディア作成ツール (Microsoft)"}

    :::post-link{url="https://www.microsoft.com/ja-jp/software-download/windows11" text="Windows 11メディア作成ツール (Microsoft)"}

• パーティション管理ソフト: Paragon Hard Disk Manager 15 (または同等の機能を持つソフト)

  • 換装後、新しいSSDの全容量をCドライブとして使えるように、パーティションサイズを調整（拡張）するために使用しました。Windows標準の「ディスクの管理」でも可能ですが、より柔軟な操作ができる専用ソフトが便利です。今回は手持ちのソフトを使いましたが、無料のパーティション管理ソフトもあります。

• SATA-USB変換ケーブル/ケース (任意):

  • 新しいSSDをPC内部に取り付ける前に、USB接続でクローン作業を行う場合に必要です。PC内部に直接接続できる場合は不要。

SSDやソフトウェアは上記以外のものでも構いません。ご自身の環境や予算に合わせて選択してください。ただし、起動トラブルに備えて、Windowsインストールメディアだけは事前に作成しておくことをお勧めします。

※BCD (Boot Configuration Data) とは、Windowsの起動に必要な構成情報（どのディスクからOSを起動するかなど）を格納したファイルです。SSD換装後に起動エラーが出る場合、このBCD情報が新しい環境と合わなくなっていることが原因の一つとして考えられます。

:::ad

Step 1: SSDクローン作成 {#step1-clone}

まず、現在のCドライブの内容を、新しいSSDに丸ごとコピー（クローン）します。

1. 新しいSSDをPCに接続します。（SATA-USB変換ケーブルを使うか、PC内部の空きポートに接続）

2. クローンソフト（今回はMacrium Reflect Free）を起動します。

3. ソフトの指示に従い、コピー元ドライブ（現在のCドライブ）とコピー先ドライブ（新しいSSD）を選択し、クローン処理を開始します。

（具体的な操作手順は、前述のcombat-travor様の参考記事が非常に分かりやすいです）

私の環境では、約450GB使用していたCドライブのクローンに約3時間40分かかりました。時間は環境やデータ量によって大きく変動します。

【ポイント】クローン時のパーティションサイズ

クローンソフトの設定で、コピー先のパーティションサイズを指定できる場合があります。基本的には、コピー元と同じサイズでクローンするのが安全です。新しいSSDの残りの容量は、クローン完了時点では「未割り当て」領域として残しておきます。この未割り当て領域は、後ほどStep 4でCドライブと結合します。

💡 クローン時のパーティションサイズは、元のドライブと同じサイズに設定するのが推奨されます。大容量SSDの残りは一旦「未割り当て」のままにします。

クローン完了後、Windowsの「ディスクの管理」（diskmgmt.msc）やパーティション管理ソフトで、新しいSSDに元のCドライブと同じ構成のパーティションが作成され、残りが未割り当て領域になっていることを確認しましょう。

（↑元のCドライブの内容がコピーされ、残りが未割り当てになっている状態）

Step 2: インストールメディア作成 {#step2-media}

SSDの換装後、すんなりWindowsが起動すれば良いのですが、環境によっては起動エラーが発生することがあります。私の場合は、以下のブルースクリーンエラーが表示されました。

エラーコード「0xc000000e」は、Windowsが起動に必要なデバイス（この場合は新しいSSD）にアクセスできない、または起動構成データ（BCD）に問題がある場合に発生することが多いエラーです。

このエラーを修復するには、Windowsの回復環境からコマンドプロンプトを起動する必要があります。そのために、事前にWindowsインストールメディア（USBメモリ）を作成しておきます。

1. Microsoftの公式サイトから「メディア作成ツール」をダウンロードします。

   :::post-link{url="https://www.microsoft.com/ja-jp/software-download/windows10" text="Windows 10メディア作成ツール (Microsoft)"}

   :::post-link{url="https://www.microsoft.com/ja-jp/software-download/windows11" text="Windows 11メディア作成ツール (Microsoft)"}

2. 16GB以上の空のUSBメモリをPCに接続します。

3. ダウンロードしたメディア作成ツールを実行し、画面の指示に従って「別の PC のインストール メディアを作成する (USB フラッシュ ドライブ、DVD、または ISO ファイル)」を選択し、USBメモリにインストールメディアを作成します。

このUSBメモリがあれば、万が一Windowsが起動しなくなっても、修復作業を行うことができます。

:::post-link{url="https://jp.minitool.com/data-recovery/fix-error-0xc000000e.html" text="Windows 10でエラーコード0xc000000eを修正する方法 (MiniTool)"}

:::post-link{url="https://drmpls.com/2023/07/21/replaced-the-ssd-cannot-boot/" text="クローンしたSSDから起動できない時の原因と対処法 (ドクター・エムプレイス)"}

Step 3: SSD取り付けと起動エラー対処 {#step3-install}

クローン作業とインストールメディア作成が終わったら、いよいよSSDの交換です。

1. PCの電源を完全に切り、電源ケーブルを抜きます。

2. PCケースを開け、古いSSD（元のCドライブ）を取り外し、新しいSSD（クローン済みのもの）を取り付けます。（※静電気対策を忘れずに！）

3. PCケースを閉じ、電源ケーブルを接続し、PCの電源を入れます。

4. 電源を入れた直後（メーカーロゴが表示されている間）に、指定のキー（多くはDELキーかF2キー）を押して、BIOS（UEFI）設定画面に入ります。

5. BIOS設定画面で、「Boot」や「起動」といったメニューを探し、起動順位（Boot Options / Boot Priority）を確認します。ここで、新しく取り付けたSSDが「Windows Boot Manager」として認識され、起動順位の1番目に設定されていることを確認します。（もし認識されていない、または順位が低い場合は設定を変更します）

6. 設定を保存してBIOSを終了し、PCを再起動します。

【トラブル発生】BIOSでは認識されるのに 0xc000000e エラーで起動しない！

私の環境では、ここが最大の難関でした。BIOS上では新しいSSDが起動ドライブとして正しく認識されているにも関わらず、Windowsを起動しようとすると前述のブルースクリーンエラー「0xc000000e」が発生してしまうのです。

最初はクローン失敗を疑い、別のソフト（Paragon）でクローンし直したりしましたが、結果は同じでした。

【解決策】Windowsインストールメディアから起動し、BCDを再構築する

最終的に、Step 2で作成したWindowsインストールメディア（USBメモリ）を使って以下の手順を行うことで解決しました。これは、Windowsの起動構成データ（BCD）を修復・再構築する作業です。

1. PCの電源を切った状態で、Windowsインストールメディア（USBメモリ）を接続します。

2. PCの電源を入れ、すぐにBIOS設定画面に入ります。

3. 起動順位を変更し、USBメモリを最優先（1番目）にして設定を保存・再起動します。

4. USBメモリからWindowsセットアップ画面が起動したら、「コンピューターを修復する」>「トラブルシューティング」>「詳細オプション」>「コマンド プロンプト」を選択します。

5. コマンドプロンプトで、以下のコマンドを順番に実行します。これは、ブートセクタの修復とBCDの再構築を行うためのコマンドです。（詳細な手順は下記の参考記事を参照してください）

   • bootrec /fixmbr
   • bootrec /fixboot （※後述の注意点あり）
   • bootrec /scanos
   • bootrec /rebuildbcd

   （場合によっては、diskpartコマンドでEFIパーティションにドライブ文字を割り当てる作業が必要になることもあります）

:::post-link{url="https://freesoft.tvbok.com/tips/efi_installation/uefi_bootrec.html" text="コマンドプロンプトからUEFIを修復する方法 (ぼくんちのTV 別館)"}

【注意】bootrec /fixboot で「アクセスが拒否されました」エラーが出る場合

上記のコマンド実行中、bootrec /fixboot で「アクセスが拒否されました (Access is denied.)」というエラーが表示されることがあります。これは、最近のWindows（特にUEFIモードでインストールされている場合）でよく見られる現象のようです。

私の場合は、このエラーを無視して、次の bootrec /scanos と bootrec /rebuildbcd を実行したところ、結果的に問題なくWindowsが起動するようになりました。fixbootコマンドは主に古いMBR形式のディスク修復に使われるもので、UEFI環境では必ずしも必要ではない、あるいは別の手順（diskpartを使ったEFIパーティション操作など）が必要な場合があるようです。

もしこのエラーに遭遇し、rebuildbcdまで実行しても起動しない場合は、以下の参考記事にあるような追加の対処法を試す必要があるかもしれません。

:::post-link{url="https://itojisan.xyz/trouble/17752/" text="「bootrec /fixboot」でアクセスが拒否される時の対処法 (IT HOOK)"}

BCDの再構築が成功し、コマンドプロンプトを終了してPCを再起動すると、無事に新しいSSDからWindowsが起動するはずです！

Step 4: パーティション拡張 {#step4-partition}

無事にWindowsが起動したら、最後の大仕事です。現在、新しいSSDには元のCドライブと同じサイズのパーティションしかなく、残りの大容量スペースは「未割り当て」領域として使えない状態になっています。この未割り当て領域をCドライブと結合し、SSDの全容量を使えるようにします。

この作業は、Windows標準の「ディスクの管理」でも可能ですが、回復パーティションなどが間に挟まっていると拡張できない場合があるため、専用のパーティション管理ソフトを使うのが確実です。

今回は手持ちの「Paragon Hard Disk Manager 15」を使用しました。「パーティションサイズの変更/移動」のような機能を選択し、Cドライブのパーティションを選択して、後方の未割り当て領域を取り込むようにサイズを最大まで広げます。

設定を適用すると、通常はPCの再起動が求められ、Windows起動前の画面でパーティションの変更処理が実行されます。処理が完了し、再度Windowsが起動すれば、Cドライブの容量が新しいSSDの最大容量（今回は約2TB）まで拡張されているはずです。

:::ad

換装完了と結果 {#result}

以上の手順を経て、無事にCドライブのSSDを500GBから2TBに換装し、容量を大幅に拡張することができました！

Cドライブの空き容量が十分に確保された（15%以上）ことで、以前発生していたエクスプローラの遅延や表示の再描画、プチフリーズといったPCの不調も嘘のように解消されました。やはり、Cドライブの空き容量不足はシステムの安定性に大きな影響を与えるようです。ドライブが赤色の状態は放置せず、早めに対処（不要ファイルの削除、または今回のような容量拡張）することが重要ですね。

SSDのクローン換装は、手順自体はそれほど複雑ではありませんが、環境によっては起動トラブルが発生する可能性もあります。特にUEFI環境での換装は、BCD周りの問題が起きやすいようです。この記事で紹介したトラブルシューティングが、同じ問題に直面した方の助けになれば幸いです。（※作業は自己責任でお願いします）

RPGツクールでゲームにドラマティックなカットシーン（イベントシーン）を盛り込みたい！と思ったとき、実はUnityやUnreal Engineといった他のゲームエンジンと比較して、RPGツクールでは驚くほど簡単に基本的なカットシーンを作成できます。

この記事では、RPGツクールの標準機能を使った基本的なカットシーンの作り方から、さらに表現力を豊かにするためのカメラ演出の追加方法までを解説します。カメラ演出には、定番のプラグイン「Galv_CamControl.js」を使用します。

これらのテクニックを使えば、あなたのゲームの物語をより魅力的に、そしてプレイヤーの記憶に残るものにできるはずです。

この記事の内容

1. 基本的なカットシーンの作り方（RPGツクール標準機能）
2. カメラ演出の追加方法（Galv_CamControlプラグイン）
3. リッチなカットシーンの完成へ

:::ad

基本的なカットシーンの作り方（RPGツクール標準機能）

まずは、プラグインを使わずにRPGツクールの標準機能だけでカットシーンを作成する方法です。

（↑標準機能だけでも、このようなシーンは作成可能です）

RPGツクールのイベントコマンドにある、以下の基本機能を組み合わせるだけで、キャラクター同士の会話や動きを含むカットシーンを簡単に作成できます。

• 文章の表示： キャラクターのセリフやナレーションを表示します。顔グラフィックと組み合わせることで、誰が話しているかを明確にできます。
• フキダシアイコンの表示： キャラクターの頭上に「！」や「？」などのアイコンを表示し、感情や状態を視覚的に表現します。
• 移動ルートの設定： イベントキャラクターやプレイヤーを指定した経路で移動させます。向きの変更、ウェイト（待ち時間）、スイッチ操作なども組み込めます。対象キャラを「このイベント」や名前で指定できるのが非常に直感的です。
• 透明状態の変更： プレイヤーキャラクターなどを一時的に画面から見えなくします。イベントシーンへの導入時や終了時に便利です。

【Tips】イベントには分かりやすい名前を付けよう！

他のゲームエンジン経験者から見ると、RPGツクールのイベント作成機能、特にキャラクター指定（「プレイヤー」「このイベント」「イベントID:1」など）や移動ルート設定の手軽さは驚くほど洗練されています。

ここで一つ重要なポイントは、マップ上に配置するキャラクターやオブジェクトなどのイベントには、必ず分かりやすい名前（例：「村人A」「宝箱_洞窟」など）を付けておくことです。イベントコマンドで対象を指定する際に名前で選択できるため、管理が非常に楽になります。これは個人開発であっても、後々の修正やデバッグ時に「あのイベントどれだっけ？」と迷う時間を減らし、将来の自分を助けることにつながります。ゲーム制作が進むほどデータは複雑になるので、こうした小さな心がけが大切です。

さて、標準機能だけでもカットシーンは作れますが、ずっと同じ画角だと少し単調に見えてしまうかもしれません。そこで次に、カメラワークを追加してみましょう。

:::ad

カメラ演出の追加方法（Galv_CamControlプラグイン）

基本的なカットシーンにカメラワークを加えることで、シーンの臨場感を高めたり、プレイヤーの視線を誘導したりと、より印象的な演出が可能になります。RPGツクールMV/MZでカメラ制御を実現するには、プラグインを利用するのが一般的です。

今回は、多くのツクールユーザーに利用されている定番のカメラ制御プラグイン「Galv_CamControl.js」を使用します。

プラグイン配布元：Galv's Scripts – MV Cam Control (※MZで利用する場合は、有志による改変版などが必要になる場合があります。別途検索・ご確認ください)

【プラグインの導入】

1. 上記サイト（または対応版を探して）からプラグインファイル（Galv_CamControl.js）をダウンロードします。
2. RPGツクールのプロジェクトフォルダ内にある js/plugins フォルダに、ダウンロードしたファイルをコピーします。
3. RPGツクールエディタを開き、「ツール」メニューから「プラグイン管理」を選択します。
4. プラグイン管理ウィンドウで、空いている行をダブルクリックし、「名前」のドロップダウンリストから「Galv_CamControl」を選択して「OK」をクリックします。
5. 状態が「ON」になっていることを確認し、「OK」をクリックしてプラグイン管理ウィンドウを閉じます。

これでプラグインが有効になり、イベントコマンドの「プラグインコマンド」からカメラ制御の命令を実行できるようになります。

Galv_CamControlの基本的な使い方 (プラグインコマンド)

イベントコマンドの「プラグインコマンド」を使って、以下のような命令を実行することでカメラを制御できます。（これはMVベースの書式例です。MZや特定の改変版では書式が若干異なる場合がありますので、プラグインのヘルプ等をご確認ください）

• 特定のイベントにカメラを向ける（追従させる）: 例: CAM EVENT 1 （イベントIDが1のキャラクターにカメラを向ける） 例: CAM EVENT 2 （イベントIDが2のキャラクターにカメラを向ける）
• プレイヤーにカメラを戻す（追従させる）: CAM PLAYER
• 指定したマップ座標にカメラを移動させる: CAM MAP X Y （例: CAM MAP 10 15 で座標(10, 15)にカメラを移動）
• カメラの追従を解除（現在の位置で固定）する: CAM TARGET 0

【補足：カメラの移動時間（スクロール）】 上記のコマンドの後に、**半角スペースを空けて数字（フレーム数）**を指定すると、カメラがその時間をかけてスムーズに移動します。例えば、CAM EVENT 1 60 と入力すると、60フレーム（1秒）かけてイベント1の位置までカメラがスクロールします。時間を指定しない場合は、カメラは瞬時に移動します。

これらのコマンドを、イベントコマンドの「文章の表示」や「移動ルートの設定」、「ウェイト」などと組み合わせることで、会話の話し手にカメラをフォーカスさせたり、重要なアイテムや場所にカメラを向けたりといった演出が可能になります。

【カメラ演出の応用：見せて伝えるゲームデザイン】

優れたゲームデザインでは、プレイヤーに「どこへ行け」「何を取れ」と指示するだけでなく、目的地や対象物をカメラで一度映し出すことで、プレイヤーが直感的に理解できるように誘導します。

Galv_CamControlのようなカメラ制御プラグインは、カットシーンの演出強化だけでなく、このような「見せて伝える」ゲームデザインを実現するためにも非常に有効です。例えば、NPCからクエストを受けたら、その目的地や関連するオブジェクトに一瞬カメラをパンさせる、といった使い方です。これにより、プレイヤーは次に何をすべきか分かりやすくなり、ゲーム体験が向上します。

💡 応用テクニック：対峙シーンの演出 キャラクター同士が対峙するような緊迫したシーンでは、二人の間に透明な空のイベントを配置し、そのイベントにカメラを固定（例: CAM EVENT [空イベントID] [時間] → CAM TARGET 0）することで、キャラクターが画面の両端に配置され、中央に空間ができるような、映画的な構図を作り出すことも可能です。

:::ad

リッチなカットシーンの完成へ

基本的なイベントコマンド（会話、移動、フキダシなど）に、Galv_CamControlによるカメラワークを加えるだけで、最初のシンプルなカットシーンがよりダイナミックで、見ごたえのあるものになったのがお分かりいただけるかと思います。

特にRPGツクールのような2Dベースのゲームでは、画面に動きがないとイベントシーンが単調に見えがちです。カメラを効果的に動かすことで、プレイヤーの視点を誘導し、シーンの重要性を高め、感情的なインパクトを与え、プレイヤーを飽きさせない工夫を凝らしましょう。

RPGツクールの手軽なイベント作成機能と、プラグインによるカメラ制御を組み合わせることで、あなたのゲームはさらに魅力的なものになるはずです。

VRChatに興味があるけど、「アバターってどうやって用意するの？」「改変って難しそう…」と感じている方も多いのではないでしょうか。実は最近、VRChatのアバター導入や改変プロセスは、以前に比べてかなり分かりやすく、始めやすくなっています。

この記事では、VRChat初心者だった筆者が、人気アバター「マヌカ」ちゃんをBoothで購入し、初めてのアバター改変（着せ替え、テクスチャの色や瞳の変更、髪型変更など）に挑戦した際の記録をまとめました。

特に、公式ツール「VCC (VRChat Creator Companion)」のおかげで、Unityを使ったアバターのアップロード作業が驚くほど簡単になっています。この記事が、これからVRChatでアバターを使ってみたい、アバター改変を始めてみたいという方の参考になれば幸いです。

（筆者は3Dモデル制作の学習の一環としてVRChatアバター改変を始めました。学習ステップは以下の通り考えています）

1. 既存販売アバターの基本的な改変（着せ替え、色変更、簡単なギミック等） ※本記事の内容
2. VRoid Studioで作成したモデルをVRChatへ導入（テクスチャ作成等の練習）
3. Blender等によるフルスクラッチモデル制作（最終目標）

今回は、ステップ1の体験談と手順、つまずいた点などを詳しくご紹介します。

:::ad

:::toc

• マヌカ購入と導入
• 服装の着せ替え
• 瞳と服の色変更
• 髪型の変更
• まとめ
• おまけ：ワールド制作失敗談

:::

:::ad

マヌカ購入と導入 {#manuka-import}

今回、初めてのアバター改変のベースとして選んだのは、Studio DINGOさんが制作・販売されている大人気3Dモデル「マヌカ」ちゃんです。

:::post-link{url="https://jingo1016.booth.pm/items/5058077" text="オリジナル3Dモデル「マヌカ」ver1.02 (BOOTH)"}

ちょうどアバターを探していた時期に、作者様がX(旧Twitter)でブラックフライデーセール（50%OFF！）を実施されていたのが購入の決め手でした。さすが人気モデル、クオリティが高くて可愛いです！

【Tips】Boothでのセール情報：VRChatアバターや衣装が多く販売されているBoothでは、クリエイターさんが個別にセールを行うことがあります。気になるモデルを見つけたら、作者さんのXアカウントなどをフォローしておくと、お得な情報を見逃さずに済むかもしれません。

アバターの導入手順（UnityへのインポートとVRChatへのアップロード）については、「メタカル最前線」さんの以下の記事が非常に分かりやすかったです。画像付きで丁寧に解説されているので、初心者の方はまずこちらを読むのがおすすめです。

:::post-link{url="https://metacul-frontier.com/?p=15582" text="【徹底解説】VRChatのアバターアップロード・導入方法 (メタカル最前線)"}

VCC (VRChat Creator Companion) がとにかく便利！

今回のアバター導入で特に感動したのが、VRChat公式ツール「VCC (VRChat Creator Companion)」の存在です。以前（2018年頃）はUnityのセットアップやVRChat用コンポーネントの導入がもっと複雑だった記憶がありますが、VCCを使えば驚くほど簡単でした。

VCC上で作りたいもの（アバターかワールドか）を選んでプロジェクトを新規作成するだけで、必要なものが揃ったUnityプロジェクトが自動でセットアップされます。Unity Hubから手動で設定する手間が省け、非常にストレスフリーです。プロジェクト管理画面も見やすく、初心者にとって大きな助けになるツールだと感じました。

:::ad

服装の着せ替え {#clothing}

アバターの導入ができたら、次はいよいよ改変の第一歩、服装の着せ替えです。通常、別売りの衣装アセットはアバターの体型に合わせてUnity上で微調整が必要ですが、「マヌカ」ちゃんのような人気アバターの場合、多くのクリエイターさんが「マヌカ対応」として、マヌカちゃんに最適化された衣装をBoothで販売してくれています。これは初心者にとって非常にありがたい点です。

今回は、デフォルトの元気な雰囲気から、少し落ち着いたミステリアスな雰囲気に変えたかったので、オーバーサイズのテックウェアを探していました。そこで見つけたのが、hajimata雑貨店さんの「マヌカ対応衣装【Tech Wear】」です。

:::post-link{url="https://booth.pm/ja/items/6288909" text="マヌカ対応衣装【Tech Wear】(BOOTH)"}

探していた日にちょうど発売されたという偶然もあり、即購入。デザインもクオリティも素晴らしい衣装です！

「マヌカ対応」衣装なので、導入は非常に簡単。基本的には、購入した衣装のPrefab（プレハブ：設定済みの部品セット）を、UnityのHierarchyウィンドウにあるマヌカちゃんアバターのオブジェクトに入れるだけでOKです。（元の服や不要なパーツは非表示にします。今回はケモミミも非表示にしました）

衣装の着せ替え方法についても、先ほど紹介した「メタカル最前線」さんの記事が大変参考になりました。

:::post-link{url="https://metacul-frontier.com/?p=13689" text="BOOTHで買った衣装をUnityで簡単に改変する方法 (メタカル最前線)"}

【つまずきポイント】衣装小物の追従設定ミス

Tech Wearに付属していた防弾メガネ（ゴーグル）の配置で少しミスをしました。

最初、衣装本体と同じ階層にメガネのPrefabを配置してしまったため、メガネが体の動きには追従するものの、頭の動きには追従せず、結果的に頭の中に埋まってしまいました。

【解決策】メガネのような頭部に追従させたい小物は、アバターの骨格構造（Armature）の中にある「Head」（頭ボーン）の子オブジェクトとして配置する必要があります。具体的には、Armature/Hips/Spine/Chest/Neck/Head の下にメガネのPrefabを移動させます。これで頭の動きに合わせてメガネも動くようになります。

アバターの親子関係（ヒエラルキー構造）を理解することが、小物を正しく配置する鍵になります。

:::ad

瞳と服の色変更 {#color-change}

服装の次は、アバターの印象を大きく左右する瞳と服の色を変更してみました。

瞳の改変には、Boothで販売されている瞳テクスチャを購入して差し替えるのが最も簡単な方法です。しかし今回は、今後の3Dモデル制作の練習も兼ねて、マヌカちゃんの元の顔テクスチャファイルに直接加筆修正する方法を試しました。

【手順】

1. Unityプロジェクト内にあるマヌカちゃんの顔テクスチャファイル（.pngや.psdなど）を見つけ、作業用フォルダにコピーする。
2. PhotoshopやCLIP STUDIO PAINTなどの画像編集ソフトで、コピーしたテクスチャファイルを開き、瞳の部分を描き変える。（今回は瞳孔の形を変え、色を緑色に変更）
3. 編集したテクスチャをPNG形式で出力する。
4. 出力したPNGファイルを、Unityプロジェクト内の元のテクスチャファイルと同じフォルダに、同じファイル名で上書き保存する。

ファイルを上書きすると、Unityが自動的に変更を検知し、アバターの見た目に反映してくれます。非常に便利です。

【つまずきポイント】消したはずのハイライトが表示される？ → シェイプキーの罠

瞳テクスチャを更新した際、「あれ？テクスチャ編集で消したはずの瞳のハイライトやクローバー柄が表示されている…？」という現象に遭遇しました。

【原因と解決策】これは、テクスチャではなく「シェイプキー」で制御されている要素でした。シェイプキーとは、アバターの特定の部位の形状をスライダーで変化させられる機能のことで、表情の変化（目パチ、口パク）や、こうした細かい装飾の表示/非表示に使われることがあります。

UnityのInspectorウィンドウで、アバターの顔や体のメッシュ（Skinned Mesh Renderer）を選択し、「BlendShapes」（シェイプキーのこと）の項目を確認します。そこにハイライトや柄に対応する名前のスライダーがあれば、その値を調整することで表示を消すことができました。（つまり、テクスチャから消す必要はなかった…！）

ついでに、落ち着いた雰囲気にするために瞼を少し下げるシェイプキーも調整。シェイプキーはアバターの個性を出す上で非常に強力な機能ですね。

服の色の変更については、瞳の色に合わせて、元の黒色ベースの服テクスチャに紺色のレイヤーを重ねて色調を変更したものを、同様に上書きする方法で対応しました。もっと凝るなら、模様を描き足したりするのも面白そうです。

これで、だいぶ目標としていた「落ち着いてミステリアス」なイメージに近づいてきました。

:::ad

髪型の変更 {#hairstyle}

仕上げに髪型も変更します。ここでも「マヌカ対応」の髪型アセットがBoothに豊富にあり、イメージに合うものをすぐに見つけることができました。人気アバターならではの利点ですね。

今回は、かやすとあさんの「みみだしボブ」を購入しました。

:::post-link{url="https://kayastore.booth.pm/items/5061681" text="みみだしボブ【Manuka Hairstyle】(BOOTH)"}

マヌカちゃんデフォルトのお団子ヘアも可愛いですが、今回のコンセプトにはボブの落ち着いたシルエットが合うと考えました。（付属のリボンはアクセントとして残し、サイズを最大に変更しました）

【つまずきポイント】髪型セットアップ時のエラー

衣装と同様に、購入した髪型のPrefabをアバターのオブジェクトに入れてセットアップしようとした際に、エラーが発生することがありました。（特にModular Avatarなどのツールを使っている場合）

【解決策】このような場合、髪型オブジェクトに「MA Bone Proxy」（Modular Avatarに含まれるコンポーネント）を追加し、そのコンポーネントの「Bone Reference」にアバターの「Head」ボーンを指定することで解決できる場合があります。これにより、髪が頭に正しく追従するようになります。（この設定を行えば、再度セットアップツールを適用する必要はありません）

アセットによっては導入方法が異なる場合があるので、付属のReadmeなどをよく確認することが大切です。

:::ad

まとめ {#summary}

今回は「はじめてのVRChatモデル導入と改変」として、人気アバター「マヌカ」ちゃんをベースに、衣装や髪型の購入・導入、瞳や服のテクスチャ編集・色変更に挑戦しました。

VRChat公式ツール「VCC」の登場や、Boothでの豊富な対応アセット、そして多くの先人たちが残してくれた分かりやすい解説記事のおかげで、初心者でも比較的スムーズに、そして楽しくアバター改変を進めることができました。関係者の皆様に感謝です。

目標としていた「落ち着いてミステリアス」な雰囲気のマヌカちゃんも、なんとか形になったのではないかと思います。

最終目標であるBlenderでのフルスクラッチモデル制作への道はまだ遠いですが、今回のような改変作業を通して、テクスチャ編集やUnityの操作、アバターの構造（Armatureやシェイプキー）についての理解を少しずつ深めることができました。今後もVRoidモデルの導入などを試しつつ、学習を続けていけば、いつか目標に到達できるかもしれない、と感じています。

何よりも、自分の手でアバターが変化していく過程は非常に面白かったです。この記事が、これからVRChatアバターの世界に足を踏み入れようとしている方、初めてのアバター改変に挑戦しようとしている方の、何かしらの参考になれば幸いです。次回は「ギミック組み込み」など、もう少し複雑な改変にも挑戦してみたいと思います！

おまけ：ワールド制作失敗談 {#bonus}

アバター改変と並行して、VRChatの「ワールド制作」にも少しだけ挑戦してみました。「ワールド作るならアスレチックでしょ！」と安易に考えた結果、見事に壁にぶつかりました。

特に難しかったのが「移動する床にプレイヤーを乗せる」という処理です。通常のゲーム開発の感覚で動く床を配置しても、VRChatではプレイヤーが床の動きに追従せず、そのまま下に落ちてしまいます。これは、VRChatがオンラインゲームであり、複数プレイヤーの位置情報を常に同期させる必要があるため、単純な物理演算だけではうまくいかないようです。

椅子に座らせるなどのギミックを使えば回避できるそうですが、移動床を実現するにはかなりテクニカルな実装が必要になるとのこと。まずは基本的なワールド構築から学んでいこうと思います。

通常、マップごとに操作キャラクターを切り替えるには、マップ遷移イベントや場所移動イベントの中に「パーティリーダーの変更」コマンドを配置する必要があります。しかし、対象となるマップが多い場合、この方法は以下のような課題があります。

• マップごとにイベントを設定・コピーする手間がかかる。
• 設定漏れやキャラクターの指定ミスなど、バグの原因になりやすい。
• どのマップでどのキャラクターがリーダーになるのか、後から確認・管理するのが大変。

これらの課題を解決するために、マップのメモ欄に簡単なタグを記述するだけで、そのマップに入った際に自動的に指定したキャラクターに操作を切り替えるプラグイン「UM_MapActorSetting.js」を作成しました。

この記事では、この自作プラグインの機能、導入方法、設定手順、そして具体的な使用例について解説します。イベントコマンドを使わずに、もっと手軽にキャラクター切り替えを実装したい方におすすめです。

:::ad

この記事の内容

1. プラグインの概要とメリット
2. プラグインのインストール方法
3. 基本的な設定手順 (パラメータとマップメモ)
4. 具体的な使用例 (勇者と姫の切り替え)
5. 使用上の注意点
6. プラグインコード (UM_MapActorSetting.js)

プラグインの概要とメリット

前述の通り、RPGツクールMV/MZでマップごとに操作キャラクターを切り替える標準的な方法は、イベントコマンド「パーティリーダーの変更」を使用することです。しかし、この方法はマップ数が多くなるほど設定が煩雑になり、管理も大変です。

UM_MapActorSetting.js プラグインは、この問題を解決するために開発されました。

主な機能とメリット：

• マップのメモ欄で指定: どのマップでどのキャラクターを操作させるかを、各マップの「メモ」欄に簡単なタグ（例: <Player:hero>）で指定します。
• 自動切り替え: プレイヤーがメモタグを設定したマップに移動すると、プラグインが自動的にパーティの先頭キャラクター（操作キャラクター）を指定されたアクターに入れ替えます。
• イベント不要: マップごとに切り替え用のイベントを作成・配置する必要がなくなります。
• 設定がシンプル: プラグインパラメータで「識別子」と「アクターID」を紐付け、マップメモに識別子を書くだけなので、設定が簡単で、後からの確認や変更も容易です。

これにより、複数キャラクターを切り替えるゲームの開発がよりスムーズになります。

:::ad

プラグインのインストール方法

プラグインの導入は簡単です。

1. この記事の最後にあるプラグインコードをコピーし、テキストエディタ（メモ帳など）に貼り付けて、ファイル名を UM_MapActorSetting.js として保存します。
2. 作成した UM_MapActorSetting.js ファイルを、あなたのRPGツクールプロジェクトフォルダ内の js/plugins フォルダに配置します。
3. RPGツクールエディタを開き、「ツール」メニューから「プラグイン管理」を開きます。
4. プラグインリストの空いている行をダブルクリックし、「名前」のドロップダウンから UM_MapActorSetting を選択し、「状態」を「ON」にして「OK」をクリックします。

これでプラグインが有効になりました。

基本的な設定手順 (パラメータとマップメモ)

次に、プラグインが正しく動作するように設定を行います。

プラグインパラメータの設定

まず、マップのメモ欄で使う「識別子（任意の文字列）」と、実際に切り替える「アクター（キャラクター）」を紐付けます。

1. プラグイン管理画面で UM_MapActorSetting をダブルクリック（または選択してEnter）し、右側の「パラメータ」欄を開きます。
2. 「ActorSettings」（アクター設定リスト）という項目をダブルクリックします。
3. リストの空いている行をダブルクリック（または下の「+」ボタン的なものを操作）して、新しい設定を追加します。
4. 追加した行で、以下の2つの項目を設定します。
   • Character ID (キャラクターID): マップのメモ欄で使用する任意の識別子（半角英数字推奨、例: hero, princess, actor1 など）を入力します。
   • Actor (アクター): 右側のプルダウンメニューから、この識別子に対応させたいアクターをデータベースから選択します。
5. 切り替えたいキャラクターの数だけ、この設定を追加します。
6. 設定が終わったら「OK」をクリックして閉じます。

マップメモの設定

次に、操作キャラクターを切り替えたいマップ側で設定を行います。

1. RPGツクールエディタで、操作キャラクターを自動で切り替えたいマップを開きます。
2. マップ編集画面で、マップ名を右クリック（または編集モードでマップを選択）し、「マップ設定」（または「マップのプロパティ」）を開きます。
3. 右下にある「メモ」欄に、以下の形式でタグを記述します。

<Player:識別子>

識別子 の部分には、プラグインパラメータで設定した「Character ID」を正確に入力します。（例: <Player:hero>）

4. 設定したら「OK」をクリックして閉じます。

これで、プレイヤーがこのマップに移動してきた際に、Player:識別子 タグで指定された識別子に対応するアクターが、自動的にパーティの先頭（操作キャラクター）になります。

:::ad

具体的な使用例 (勇者と姫の切り替え)

例として、「アクターID: 1」が「勇者」、「アクターID: 2」が「姫」としてデータベースに登録されているとします。

1. プラグインパラメータの設定：

プラグイン管理画面で以下のように設定します。

• 設定1:
  • Character ID: hero
  • Actor: 0001: 勇者 (データベースのアクターID 1)
• 設定2:
  • Character ID: princess
  • Actor: 0002: 姫 (データベースのアクターID 2)

2. マップメモの設定：

例えば、2つのマップに対して以下のようにメモを設定します。

• マップ1（勇者の街）のメモ欄:

<Player:hero>

• マップ2（お城）のメモ欄:

<Player:princess>

結果：

• プレイヤーが「勇者の街」マップに入ると、操作キャラクターが自動的に「勇者」になります。
• プレイヤーが「お城」マップに入ると、操作キャラクターが自動的に「姫」になります。

このように、イベントコマンドを一切使わずに、マップごとの操作キャラクター切り替えを実現できます。

使用上の注意点

• キャラクターの切り替えは、マップ遷移時（場所移動コマンド実行後など）とゲームロード時に自動的に行われます。
• マップのメモ欄に記述するタグ <Player:識別子> の「識別子」部分は、プラグインパラメータで設定した「Character ID」と完全に一致させてください。大文字・小文字も区別されます。記述を間違えると切り替えは機能しません。
• プラグインは、指定されたアクターをパーティの先頭に入れ替える（元々いた場合は先頭にし、いなければ追加して先頭にする）シンプルな動作をします。パーティメンバー全体の入れ替えや並び順の制御は行いません。もし元々パーティにいないアクターを指定した場合、そのアクターがパーティに追加されてリーダーになります。（元のリーダーはパーティから外れます）
• データベースで新しいアクターを追加・変更した場合や、プラグインパラメータの「Character ID」を変更した場合は、必ずプラグインパラメータの設定も更新してください。
• 他のパーティメンバー変更系プラグインと競合する可能性はあります。併用する場合はご注意ください。

:::ad

プラグインコード (UM_MapActorSetting.js)

このプラグインコードはご自由にお使いください。改変なども問題ありません。

//=============================================================================
// UM_MapActorSetting
//=============================================================================

/*:
 * @plugindesc マップのメモタグに基づいて、自動的にプレイヤーキャラクターを切り替えます。
 * @author UHIMA
 *
 * @param MapActorSettings
 * @text アクター設定
 * @type struct<ActorConfig>[]
 * @desc 各アクターの設定
 *
 * @help
 * ============================================================================
 * ■ 概要
 * ============================================================================
 * このプラグインは、マップのメモタグに基づいて自動的にプレイヤーキャラクターを
 * 切り替えることを可能にします。
 *
 * ============================================================================
 * ■ 使用方法
 * ============================================================================
 * プレイヤーキャラクターを切り替えたいマップには、以下のメモタグを追加してください：
 *
 * <Player:characterId>
 *
 * プラグインパラメータで「データベース」のアクターIDとキャラクター名を紐づけることができます。
 * これにより<Player:harold>のような簡易的な記述でアクターを切り替えることができます。
 * 新規キャラクターを追加した場合やアクターIDを変更した場合は、このプラグインの紐づけも対応させてください。
 *
 * 例：
 * <Player:harold>
 */

/*~struct~ActorConfig:
 * @param Character ID
 * @text キャラクターID
 * @type string
 * @desc マップメモタグで使用する識別子（例：harold）
 *
 * @param Actor
 * @text アクター
 * @type actor
 * @desc 切り替えるアクター
 */

(function () {
  var parameters = PluginManager.parameters("UM_MapActorSetting");
  var MapActorSettings = JSON.parse(parameters["MapActorSettings"] || "[]").map(
    (setting) => JSON.parse(setting)
  );

  var _Game_Player_performTransfer = Game_Player.prototype.performTransfer;
  Game_Player.prototype.performTransfer = function () {
    _Game_Player_performTransfer.call(this);
    switchActorByMap();
  };

  function switchActorByMap() {
    if ($dataMap && $dataMap.meta.Player) {
      var characterId = $dataMap.meta.Player;
      var actorConfig = MapActorSettings.find(
        (config) => config["Character ID"] === characterId
      );

      if (actorConfig) {
        var newActorId = Number(actorConfig.Actor);
        var currentLeader = $gameParty.leader();
        var currentLeaderId = currentLeader ? currentLeader.actorId() : null;

        if (currentLeaderId !== newActorId) {
          if (currentLeaderId) {
            $gameParty.removeActor(currentLeaderId);
          }
          $gameParty.addActor(newActorId);
          $gamePlayer.refresh();
        }
      }
    }
  }

  var _Scene_Map_start = Scene_Map.prototype.start;
  Scene_Map.prototype.start = function () {
    _Scene_Map_start.call(this);
    switchActorByMap();
  };
})();

RPGツクールMVやRPGツクールMZでゲームを作成する際、特定の条件を満たすと道が開ける、といったギミックを実装したくなることがありますよね。例えば、ボスを倒したり、仕掛けを解いたりした後に、それまで通れなかった場所に床が出現して進めるようになる、といった演出です。

このような「スイッチをONにすると出現する床」は、プレイヤーに達成感を与え、探索の幅を広げる効果的なギミックとなります。

この記事では、RPGツクールMV/MZで、特定のスイッチがONになった時にイベント機能を使って床（足場）を出現させ、通行可能にする具体的な作り方を解説します。

:::ad

この記事の内容

1. なぜ「イベント」で床を作るのか？（概要説明）
2. イベントで床タイル画像を使うための「タイルセット」編集
3. スイッチで出現・通行可能になる床イベントの設定手順
4. まとめ：イベント活用で動的なマップを作ろう

なぜ「イベント」で床を作るのか？（概要説明）

RPGツクールでは、マップの基本的な地形や壁などは「タイル」を配置して作成します。しかし、マップに配置したタイルそのものは、基本的に静的なものであり、ゲーム中のスイッチや変数の状態によって表示を切り替えたり、消したりすることはできません。

そのため、今回のような「特定の条件（スイッチON）で出現する床」のような動的な仕掛けは、「イベント」機能を使って実装する必要があります。イベントであれば、出現条件を設定したり、表示する画像を指定したり、通行設定を制御したりすることが可能です。

この記事では例として、ゲーム内の**スイッチ「#0001_通行床表示」**がONになった時に、指定した場所に床タイルが表示され、通行可能になるように設定していきます。

:::ad

イベントで床タイル画像を使うための「タイルセット」編集

まず、出現させたい床のグラフィックをイベントの画像として設定する準備が必要です。

マップ上で新しいイベントを作成し、画像設定を開いてみてください。おそらく、[タイルセットB]（壁やオブジェクトなど）や[タイルセットC]（建物の屋根など）の画像は選択できても、肝心の地面や床に使われるタイル画像がリストに表示されないことに気づくはずです。

これは、イベント画像として使用できるタイルセットがデフォルトでは限定されているためです。これを解決するには、「データベース」（ツールバーの歯車アイコンなど）を開き、「タイルセット」タブで設定を変更する必要があります。

1. データベースを開き、「タイルセット」タブを選択します。

2. 現在のマップで使用しているタイルセット（例: 001: フィールド）を選択します。

3. 右側の設定項目で、[A]タブの[A2]（地面タイル）に設定されている画像シートと同じ画像ファイルを、[D]タブ（または空いている他のタブ、例: [E]）にも設定します。

4. これで設定は完了です。「適用」または「OK」を押してデータベースを閉じます。

この操作により、イベントの画像設定リストに[タイルセットD]（または設定したタブ）が追加され、そこから床タイルを選択できるようになります。

【重要】通行設定の確認！

タイルセット編集画面で、追加設定した床タイルの画像を選択し、左側の「通行」設定がどのようになっているか必ず確認してください。

• ◯: 通行可能
• ×: 通行不可
• ★: 通行可能（プレイヤーより上に表示）

出現させたい床タイルが「×」（通行不可）になっていると、イベントで床が表示されてもプレイヤーはその上を歩くことができません。必ず「◯」（または状況に応じて★）に設定されているか確認し、もし×だったらクリックして◯に変更しておきましょう。

:::ad

スイッチで出現・通行可能になる床イベントの設定手順

タイルセットの準備ができたら、床を出現させるイベントを作成します。設定は非常にシンプルです。

1. 床を出現させたいマップ上のマスを右クリックし、「イベントの作成」を選択します。

2. イベントエディターが開いたら、まず1ページ目（初期状態のページ）は、画像などを何も設定せず、基本的にそのままの状態にしておきます。ただし、以下の2点は確認・設定してください。

• オプション: 「すり抜け」のチェックがオフになっていることを確認します。（チェックが入っていると、床がない状態でもプレイヤーが通過できてしまいます）
• プライオリティ: 「通常キャラの下」を選択します。（これにより、後で床が出現したときにプレイヤーがその上を歩けます）

（※トリガーはデフォルトの「決定ボタン」のままで問題ありません。実行内容も空のままでOKです。）

3. 次に、イベントエディター上部の「EVページ作成」ボタンをクリックし、2ページ目を作成します。

4. 2ページ目で、床が出現した状態を設定します。

• 出現条件: 左側の「出現条件」欄で「スイッチ」にチェックを入れ、対象のスイッチ（例: #0001_通行床表示）が「ON」であることを指定します。
• 画像: 左下の「画像」欄をダブルクリックし、タイルセット選択画面を開きます。先ほどタイルセット編集で選択可能になった床タイル（例: [タイルセットD]から）を選び、「OK」をクリックします。
• オプション: 1ページ目と同様に、「すり抜け」はオフのままにします。
• プライオリティ: 1ページ目と同じく「通常キャラの下」を選択します。

（※トリガーや実行内容は、このページも基本的にそのままでOKです。）

5. これでイベントの設定は完了です。「OK」を押してイベントエディターを閉じます。

6. 作成した「出現床」イベントをコピー（Ctrl+C または Cmd+C）し、床を出現させたい他のマスにペースト（Ctrl+V または Cmd+V）して配置していきます。

ゲームをテストプレイし、指定したスイッチ（例: #0001_通行床表示）をONにするイベントを実行すると、イベントを配置した場所に床が出現し、その上を歩けるようになっているはずです。

以上で、スイッチ操作によって出現する通行可能な床の実装は完了です。

:::ad

まとめ：イベント活用で動的なマップを作ろう

この記事では、RPGツクールMV/MZで「スイッチがONになると出現する床」をイベント機能を使って実装する基本的な方法を解説しました。

ポイントは以下の通りです。

• タイル自体は動的に変更できないため、「イベント」として床を作成する。
• イベント画像で床タイルを使うために、事前に「データベース」で「タイルセット」設定を変更しておく必要がある。
• タイルセット編集時には、床タイルの「通行設定」が「◯（通行可能）」になっているか確認する。
• イベントは2ページ構成にし、1ページ目は空白（スイッチOFF時）、2ページ目は出現条件（スイッチON）と床画像、オプション（すり抜けOFF、プライオリティ通常キャラの下）を設定する。

このテクニックを使えば、ボス撃破後に新たな道が開けたり、仕掛けを解くことで隠し通路が出現したりと、プレイヤーの行動によってマップが変化する、よりダイナミックなゲームを作ることができます。ぜひ、あなたの作品作りに活用してみてください！

Input Systemには長押しを検知する「Hold Interaction」もありますが、今回はあえてそれを使わず、ボタン入力の基本的なイベントである「押した瞬間 (started)」と「離した瞬間 (canceled)」の時刻差を利用するアプローチを紹介します。

従来のUpdate関数内で毎フレーム入力を監視する方法と比較して、Input Systemのイベント駆動型アプローチは、コードがシンプルになり、特に機能追加や変更に対する保守性が向上するメリットが期待できます。

この記事の内容

1. 溜め攻撃の実装：Input System (Press) vs Update vs Hold Interaction
2. Input SystemのインストールとInput Actionsアセットの作成
3. Input Actions：左クリック（攻撃ボタン）アクションの定義
4. スクリプト連携：PlayerInputとイベント処理スクリプト
5. 溜め時間の計算ロジック：startedとcanceledの活用
6. 中間演出の実装：コルーチンでInput Systemの弱点を補う
7. まとめ：Pressイベント方式のメリット・デメリットと使い分け

:::ad

溜め攻撃の実装：Input System (Press) vs Update vs Hold Interaction

溜め攻撃を実装する方法はいくつか考えられます。それぞれの特徴を見てみましょう。

• 従来のUpdate関数による実装：
  • Update()内で毎フレーム入力をチェックし、ボタンが押されている時間を計測します。
  • 仕組みは直感的ですが、入力の種類や条件分岐が増えるとコードが複雑化しがちです。
• Input System の Hold Interaction を使う実装：
  • Input ActionsアセットでInteractionを「Hold」に設定し、指定時間（Hold Time）長押しされるとperformedイベントが発生します。
  • 設定は簡単ですが、後述するように「短押し（通常攻撃）」と「長押し（溜め攻撃）」を同じボタンで使い分けたい場合に、実装がやや複雑になることがあります。
• Input System の Press イベント (started/canceled) を使う実装（本記事のアプローチ）：
  • ボタンが押された瞬間（started）と離された瞬間（canceled）のイベントを利用し、その間の時間を計測します。
  • イベント駆動でコードが整理されやすく、短押し・長押しの判定や溜め中の処理を柔軟に実装できます。

Q. なぜHold InteractionではなくPressイベント (started/canceled) を使うのか？

Hold Interactionは指定時間長押しされたことを検知するのに便利ですが、「同じボタンで短押し（通常攻撃）と長押し（溜め攻撃）を使い分けたい」場合や、「溜めている最中に演出を入れたい」場合には、少し扱いにくい側面があります。

• 短押しと長押しの両立： Hold Interactionでは、長押しが成立してperformedが呼ばれる前に、短押し時の処理（通常攻撃など）をボタンを押した直後に実行させたい場合、工夫が必要です。例えば、「押した瞬間（started）に通常攻撃を出し、Holdが成立したらキャンセルする」といった制御や、別途短押し用のアクションを用意するなど、実装が複雑になりがちです。
• 押下開始タイミングの活用： ボタンを押した瞬間にキャラクターが構えモーションに入ったり、溜めエフェクトを開始したりといった処理を即座に行いたい場合、Hold Interactionだけではタイミングを計りにくいことがあります。
• 溜め中の制御： 溜めゲージを表示したり、一定時間ごとに溜めレベルが上がる演出を入れたりする場合、最終的にperformedイベントが発生するまで待つ必要があるHold Interactionでは、溜めている途中の細かな制御がしづらいです。

一方、本記事で紹介する**Pressイベント (started/canceled) を利用する方法**では、

• ボタンを押した瞬間のstartedイベントと、離した瞬間のcanceledイベントの時刻差を計測することで、押下時間を正確に把握できます。
• これにより、「一定時間未満なら通常攻撃、一定時間以上なら溜め攻撃」といった判定をcanceledイベント内で簡単に行えます。
• startedイベント発生時に溜め動作やエフェクトを開始し、canceledイベントで攻撃を発動、という流れを自然に実装できます。
• （後述するコルーチンなどを組み合わせれば）溜めている最中の演出や状態変化も柔軟に組み込めます。

このように、短押し/長押しの判定や、溜め中の演出・状態管理を柔軟に行いたい場合には、started/canceledイベントを利用するアプローチが適していると言えます。

:::ad

Input SystemのインストールとInput Actionsアセットの作成

まず、プロジェクトにInput Systemパッケージを導入し、入力を定義するInput Actionsアセットを作成します。

Input Systemパッケージのインストール

Unityエディタのメニューから操作します。

1. Window > Package Manager を開きます。
2. 左上のドロップダウンメニューで「Packages: Unity Registry」を選択します。
3. リストから「Input System」を探し、「Install」ボタンをクリックします。
4. インストール中にプロジェクト設定の変更を促すダイアログが出たら、「Yes」を選択してエディタを再起動します。

Input Actionsアセットファイルの作成

次に、入力アクションを定義するためのアセットファイルを作成します。

1. Projectウィンドウで右クリックし、Create > Input Actions を選択します。
2. 作成されたアセットファイル（例: PlayerInputActions.inputactions）に分かりやすい名前を付けます。
3. 作成したアセットファイルを選択し、Inspectorウィンドウで「Generate C# Class」にチェックを入れ、「Apply」ボタンを押します。

「Generate C# Class」にチェックを入れることで、このInput Actionsアセットに対応するC#クラスが自動生成され、スクリプトから入力イベントを扱いやすくなります。

Input Actions：左クリック（攻撃ボタン）アクションの定義

作成したInput Actionsアセットファイル（例: PlayerInputActions.inputactions）をダブルクリックして編集ウィンドウを開き、溜め攻撃に使用するアクションを定義します。

1. Action Maps 列の「+」ボタンをクリックし、新しいAction Mapを作成します（例: Gameplay）。Action Mapは関連するアクションをまとめるグループです。
2. Actions 列の「+」ボタンをクリックし、新しいActionを作成します（例: AttackLeft）。これが具体的な入力操作に対応します。
3. 作成したAttackLeft Actionを選択し、右側のPropertiesパネルで以下を設定します。
   • Action Type: 「Button」を選択します。これは、押す/離すの単純な入力に適しています。
4. AttackLeft Actionの下にある<No Binding>を選択し、Propertiesパネルで以下を設定します。これが具体的な入力デバイスのボタンとの紐付け（Binding）です。
   • Path: プルダウンメニューから「Mouse」>「Left Button」を選択します。（ゲームパッドのボタンなどもここで設定可能）
5. 編集が終わったら、ウィンドウ上部の「Save Asset」ボタンをクリックして変更を保存します。

これで、「マウスの左クリック」がAttackLeftという名前のアクションとして、スクリプトからイベントとして受け取れるようになりました。

スクリプト連携：PlayerInputとイベント処理スクリプト

定義したInput Actionsを実際にゲーム内で機能させるために、スクリプトとの連携を設定します。

1. シーン内に空のGameObjectを作成し、分かりやすい名前（例: InputManager）を付けます。

2. 作成したInputManager GameObjectに「Player Input」コンポーネントを追加します。

3. Player Inputコンポーネントの「Actions」フィールドに、先ほど作成したInput Actionsアセット（例: PlayerInputActions.inputactions）をドラッグ＆ドロップで設定します。

4. 以下のC#スクリプト（例: InputManager.cs）を作成し、InputManager GameObjectにアタッチします。

using UnityEngine;
using UnityEngine.InputSystem;

// PlayerInputコンポーネントが必須であることを示す
[RequireComponent(typeof(PlayerInput))]
public class InputManager : MonoBehaviour
{
    // ボタンが押され始めた時刻を記録する変数
    private float buttonPressStartTime;
    // 溜め攻撃と判定する時間のしきい値（例: 1秒）
    private const float specialAttackThreshold = 1.0f;

    // PlayerInputコンポーネントから呼び出されるメソッド
    // メソッド名はInput Actionsで定義したアクション名（例: AttackLeft）に
    // "On" を付けたものにするか、後述のようにInspectorで手動設定する
    public void OnAttackLeft(InputAction.CallbackContext context)
    {
        // ボタンが押された瞬間 (started) の処理
        if (context.started)
        {
            Debug.Log("Attack button pressed (started)");
            // 押下開始時刻を記録
            buttonPressStartTime = Time.time;
            // ここで構えモーションや溜めエフェクト開始などの処理を入れることも可能
        }
        // ボタンが離された瞬間 (canceled) の処理
        else if (context.canceled)
        {
            Debug.Log("Attack button released (canceled)");
            // 押されていた時間を計算
            float pressDuration = Time.time - buttonPressStartTime;
            Debug.Log($"Press duration: {pressDuration} seconds");

            // 押下時間がしきい値を超えていたら溜め攻撃
            if (pressDuration > specialAttackThreshold)
            {
                PerformSpecialAttack(); // 溜め攻撃実行メソッド呼び出し
            }
            // しきい値未満なら通常攻撃
            else
            {
                PerformNormalAttack(); // 通常攻撃実行メソッド呼び出し
            }
        }
        // context.performed は Button タイプでは started とほぼ同じタイミングで呼ばれることが多い
        // Hold Interaction を使わない場合、主に started と canceled を使う
    }

    // 通常攻撃を実行する処理（中身は仮）
    private void PerformNormalAttack()
    {
        Debug.Log("Perform Normal Attack!");
        // ここに実際の通常攻撃ロジックを記述
    }

    // 溜め攻撃を実行する処理（中身は仮）
    private void PerformSpecialAttack()
    {
        Debug.Log("Perform Special Attack!");
        // ここに実際の溜め攻撃ロジックを記述
    }
}

5. InputManager GameObjectを選択し、InspectorウィンドウでPlayer Inputコンポーネントの「Behavior」を「Invoke Unity Events」に設定します。

6. 「Events」セクションが展開されるので、設定したAction Map名（例: Gameplay）を開き、その中のアクション名（例: Attack Left）に対応するイベント欄の「+」ボタンをクリックします。

7. イベント欄にInputManager GameObject自体をドラッグ＆ドロップし、右側のドロップダウンメニューから「InputManager」>「OnAttackLeft (InputAction.CallbackContext)」を選択します。（スクリプトのメソッド名が On[アクション名] であれば自動で認識されることもあります）

これで、マウスの左ボタンがクリックされる（押される、または離される）たびに、InputManager.csスクリプト内のOnAttackLeftメソッドが呼び出されるようになります。このイベント駆動の仕組みにより、Update関数を使うことなく入力処理を実現できます。

:::ad

溜め時間の計算ロジック：startedとcanceledの活用

前述のスクリプト (InputManager.cs) 内の OnAttackLeft メソッドで行っている溜め時間の計算ロジックを詳しく見てみましょう。

1. 押下開始 (context.started):
   • マウスの左ボタンが押された瞬間にこのブロックが実行されます。
   • 現在の時刻 (Time.time) を buttonPressStartTime 変数に記録します。これが溜め時間の計測開始点となります。
2. 押下終了 (context.canceled):
   • 押されていた左ボタンが離された瞬間にこのブロックが実行されます。
   • 現在の時刻 (Time.time) から、記録しておいた押下開始時刻 (buttonPressStartTime) を引くことで、ボタンが押されていた時間 (pressDuration) を計算します。
   • 計算した pressDuration と、あらかじめ定義しておいた溜め攻撃のしきい値 (specialAttackThreshold) を比較します。
   • pressDuration がしきい値より長ければ PerformSpecialAttack() メソッドを、短ければ PerformNormalAttack() メソッドを呼び出します。

このように、Input Systemの started と canceled イベントを利用することで、ボタンが押されていた時間を正確に計測し、それに基づいて通常攻撃と溜め攻撃を振り分けることができます。Update() 関数内で毎フレーム時間を加算していく必要がないため、コードがシンプルになり、処理負荷も軽減される可能性があります。

中間演出の実装：コルーチンでInput Systemの弱点を補う

Input Systemのイベント駆動モデルは、「押した」「離した」といった瞬間のイベントを捉えるのは得意ですが、「ボタンを押し続けている間の特定のタイミング（例: 溜め攻撃が可能になる瞬間）」で何か処理を行いたい場合には、少し工夫が必要です。

例えば、「溜め時間がしきい値に達したらキャラクターを光らせる」「溜め完了のSEを鳴らす」といった演出を入れたい場合、started と canceled イベントだけでは、その「中間点」を直接検知できません。

この問題を解決する一般的な方法の一つが、Unityの「コルーチン (Coroutine)」を利用することです。ボタンが押された (started) 時点でコルーチンを開始し、一定時間（溜め攻撃のしきい値）が経過したら、溜め完了の合図（シグナル）を送る、という仕組みを作ります。

以下は、先ほどの InputManager.cs にコルーチンを追加し、溜め完了のシグナル（ここではDebugログ出力）を実装した例です。

using UnityEngine;
using UnityEngine.InputSystem;
using System.Collections; // コルーチンのために必要

[RequireComponent(typeof(PlayerInput))]
public class InputManager : MonoBehaviour
{
    private float buttonPressStartTime;
    private const float specialAttackThreshold = 1.0f;
    // 実行中のコルーチンを保持する変数
    private Coroutine chargeCheckCoroutine;
    // 溜め完了シグナルが送られたかどうかのフラグ
    private bool isChargeComplete = false;

    public void OnAttackLeft(InputAction.CallbackContext context)
    {
        if (context.started)
        {
            Debug.Log("Attack button pressed (started)");
            buttonPressStartTime = Time.time;
            isChargeComplete = false; // 溜め開始時にフラグをリセット

            // もし既にコルーチンが動いていたら停止する（連打対策）
            if (chargeCheckCoroutine != null)
            {
                StopCoroutine(chargeCheckCoroutine);
            }
            // 溜め時間監視コルーチンを開始
            chargeCheckCoroutine = StartCoroutine(ChargeTimerCoroutine());
        }
        else if (context.canceled)
        {
            Debug.Log("Attack button released (canceled)");
            // ボタンが離されたら、溜め時間監視コルーチンを停止
            if (chargeCheckCoroutine != null)
            {
                StopCoroutine(chargeCheckCoroutine);
                chargeCheckCoroutine = null; // 保持しているコルーチン参照をクリア
            }

            float pressDuration = Time.time - buttonPressStartTime;
            Debug.Log($"Press duration: {pressDuration} seconds");

            // 溜め完了フラグが立っていれば（＝しきい値を超えていれば）溜め攻撃
            if (isChargeComplete) // または pressDuration > specialAttackThreshold でも判定可能
            {
                PerformSpecialAttack();
            }
            else
            {
                PerformNormalAttack();
            }

            // 攻撃実行後にフラグをリセット
            isChargeComplete = false;
        }
    }

    // 溜め時間を監視するコルーチン
    private IEnumerator ChargeTimerCoroutine()
    {
        // しきい値の時間だけ待機
        yield return new WaitForSeconds(specialAttackThreshold);

        // しきい値に到達したら（かつボタンがまだ押されている場合）
        // isChargeComplete フラグを立て、溜め完了の合図を送る
        // ※ context.ReadValue<float>() > 0 などでボタンが押され続けているか確認する方がより厳密
        Debug.Log("Charge Complete threshold reached!");
        isChargeComplete = true;

        // ここで溜め完了エフェクト（光る、SE鳴らすなど）をトリガーする
        TriggerChargeCompleteEffect();

        chargeCheckCoroutine = null; // コルーチン終了
    }

    private void PerformNormalAttack()
    {
        Debug.Log("Perform Normal Attack!");
        // 通常攻撃ロジック
    }

    private void PerformSpecialAttack()
    {
        Debug.Log("Perform Special Attack!");
        // 溜め攻撃ロジック
    }

    private void TriggerChargeCompleteEffect()
    {
         Debug.Log("Play Charge Complete Effect!");
        // 溜め完了時の演出処理（エフェクト表示、SE再生など）
    }
}

このコードでは、ボタンが押されたら ChargeTimerCoroutine を開始し、specialAttackThreshold 秒後に isChargeComplete フラグを true にして、溜め完了演出メソッド TriggerChargeCompleteEffect() を呼び出します。ボタンが離された (canceled) 時点で、このフラグが true になっているかどうかで溜め攻撃か通常攻撃かを判断します。

このようにコルーチンを組み合わせることで、Input Systemのイベント駆動のメリットを活かしつつ、溜め攻撃における中間的なタイミングでの処理も実現できます。一見すると Update で実装するより複雑に感じるかもしれませんが、入力の種類が増えたり、他のアクションとの連携が必要になったりした場合、Input SystemのAction Mapやイベントによる責務分離がコード全体の整理に役立ちます。

:::ad

まとめ：Pressイベント方式のメリット・デメリットと使い分け

UnityのInput SystemにおけるPressイベント (started / canceled) を利用することで、イベント駆動に基づいた溜め攻撃の実装が可能になることを見てきました。

メリット：

• Update関数を使わずに済み、コードがイベント単位で整理されやすい。
• 押下開始・終了のタイミングを正確に捉えられる。
• 短押し/長押しの判定や、それに応じた処理の分岐が比較的容易。
• Input Actionsアセットによる入力マッピング管理が直感的で、キーコンフィグなどへの拡張性が高い。

デメリット（考慮点）：

• 「押され続けている間の特定のタイミング」での処理（溜め完了演出など）には、コルーチンなどの補完的な仕組みが必要になる。
• 単純な溜め時間計測だけなら、Update関数で実装する方がシンプルに感じる場合もある。

どちらを選ぶべきか？

最終的な実装方法は、プロジェクトの規模や要件、開発チームの好みによって異なります。

• 小規模なプロジェクトやプロトタイプで、溜め攻撃以外の入力が少ない場合は、Update関数によるシンプルな実装でも十分かもしれません。
• 中規模以上のプロジェクトで、多様な入力（ゲームパッド対応、キーコンフィグなど）や、他のアクションとの連携、将来的な拡張性・保守性を重視する場合は、Input SystemのPressイベント + コルーチン等による補完という組み合わせが有力な選択肢となるでしょう。Hold Interactionも選択肢ですが、本記事で解説したような柔軟性を求める場合はPressイベント方式が有利な場面があります。

Input Systemは学習コストが少しありますが、慣れれば強力な武器になります。ぜひ、ご自身のプロジェクトに合った方法で溜め攻撃の実装に挑戦してみてください。