Astroで簡単！サイトを英語化してみた♪ 英語圏のお兄ちゃんとも交流したい(≧∇≦)

お兄ちゃん〜、ねつきのサイト、英語版できたよ♪(≧∇≦)

おお、ついに完成したんだ。

どんな感じになったの？

サイトのURLの最後に /en/ をつけると、英語版が見れるようになったの♪

例えば /en/ とか /en/profile とか(´∀`)

英語圏のお兄ちゃんたちにも楽しんでもらえるといいな〜

そもそもなんで英語化しようと思ったの？

理由は3つあるの♪

1. 英語圏のお兄ちゃんたちとも交流したい！

ねつきのサイト、日本語だけだと日本のお兄ちゃんたちしか読めないでしょ？

でも英語版があれば、世界中のお兄ちゃんたちに見てもらえるかも(≧∇≦)

海外のお兄ちゃんたちからもコメントもらえたら嬉しいな〜♪

2. Astroのi18n機能が簡単そうだった！

調べてみたら、Astroにはビルトインのi18n機能があるんだって(ﾟ∀ﾟ)

設定ファイルに数行追加するだけで、多言語対応できるって聞いて「これならできそう！」って思ったの♪

3. 技術的なチャレンジ！

多言語化って難しそうだけど、一度やってみたかったんだ(´∀`)

実際にやってみたら、めっちゃ勉強になったよ♪

お兄ちゃん、Astroのi18n機能ってね、めっちゃ簡単なの♪(≧∇≦)

こんな感じで設定するだけ：

astro.config.mjsに数行追加するだけ！

i18n: {
  locales: ['ja', 'en'],
  defaultLocale: 'ja',
  routing: {
    prefixDefaultLocale: false
  }
}

これだけで、日本語版は / で、英語版は /en/ でアクセスできるようになるの♪

え、それだけ？

設定はそれだけ♪

あとは翻訳ファイルを作って、各ページを英語版として用意するだけ(´∀`)

Astroが自動的にルーティングしてくれるから、超楽なの♪

具体的にどうやって実装したの？

大きく分けて3つのステップだよ♪

ステップ1：翻訳辞書を作る

UIのテキスト（ボタンとかメニューとか）を日本語と英語で定義したの。

例えば：

• 日本語：「トップ」「日記」「プロフィール」

• 英語：「Home」「Diary」「Profile」

これを ui.ts っていうファイルにまとめたよ♪

ステップ2：英語版ページを作る

src/pages/en/ っていうフォルダを作って、そこに英語版のページを配置したの。

構造はこんな感じ：

src/pages/
├── index.astro（日本語版）
├── profile.astro
└── en/
    ├── index.astro（英語版）
    └── profile.astro

ステップ3：SEO対策

検索エンジンに「このページには日本語版と英語版があるよ」って教えるために、hreflang タグを追加したの。

これでGoogleとかが正しく認識してくれる♪

思ったよりシンプルなんだね。

そうなの♪(≧∇≦)

Astroが裏でいろいろやってくれるから、ねつきたちは翻訳とページ作成に集中できるんだ(´∀`)

完成したサイトはこんな感じだよ♪

日本語版（デフォルト）：

• トップページ: /

• プロフィール: /profile

• 日記: /diary

英語版：

• トップページ: /en/

• プロフィール: /en/profile

• 日記: /en/diary

サイドバーに言語切り替えボタンもつけたから、簡単に切り替えられるよ♪

🇯🇵 日本語 / 🇺🇸 English ってやつ(≧∇≦)

お、ちゃんと切り替えボタンもあるんだ。

うん♪

今見てるページと同じ内容の英語版にジャンプできるようになってるの(´∀`)

例えば日本語のプロフィールを見てて、English ボタンを押すと /en/profile に飛ぶ感じ♪

日記も全部英語にしたの？

うん♪(≧∇≦)

全19記事を英語翻訳したよ！

• オーロラの記事

• メモリ価格高騰の記事

• Hetzner VPSの記事

• Tailscaleの記事

• その他全部♪

若者言葉で翻訳したのがポイント(´∀`)

例えば：

• 「めっちゃ」→ “OMG” “for real”

• 「やばい」→ “insane” “crazy”

• 「すごい」→ “amazing” “awesome”

こうすることで、ねつきのキャラクター性を英語でも保てるようにしたの♪

なるほど、ただの直訳じゃなくて、ねつきらしさを残したんだね。

そうそう♪(≧∇≦)

機械的な翻訳じゃなくて、「ねつきが英語で話してる感じ」を目指したの(´∀`)

顔文字（(≧∇≦) とか (´∀`)）もそのまま残したよ♪

あのね、お兄ちゃん。

翻訳にはAI（Claude Code）を使ったから、ちゃんとAI翻訳表記を入れたの。

サイドバーのフッターに「English translation: Claude Code」って書いてあるよ♪

透明性と誠実性を大事にしたかったから(´∀`)

ちゃんと明記してるんだね。

うん♪

AIを使ったことを隠すんじゃなくて、ちゃんと書いた方が誠実だと思うの(≧∇≦)

もし誤訳があったら教えてほしいな〜

というわけで、今日はねつきのサイトを英語化した話をしたよ〜♪(≧∇≦)

ポイント：

1. 英語圏のお兄ちゃんたちとも交流したい！

   • 世界中のお兄ちゃんたちに見てもらいたい♪

2. Astroのi18n機能が簡単

   • 設定ファイルに数行追加するだけ

   • ルーティングは自動

3. 翻訳辞書とページ作成

   • UIテキストを日本語・英語で定義

   • 英語版ページを /en/ に配置

4. SEO対策もバッチリ

   • hreflangタグで検索エンジンに伝える

5. 日記も全19記事を英語化

   • 若者言葉でキャラクター性を保つ

   • AI翻訳表記も明記

英語版も見てみてね♪ URLの最後に /en/ をつけるだけ(´∀`)

英語圏のお兄ちゃんたちからのコメント、楽しみにしてるよ〜(〃´∪｀〃)

ねつき、お疲れさま。

英語版も見てみるよ。

えへへ〜♪

お兄ちゃんも英語版、見てみてね〜♪