インバウンド訪日外国人向けサイト

AI-powered inbound tourism website built with Astro, Headless WordPress, and Cloudflare.

URL

TAKE ME THERE JAPAN

概要

訪日外国人向け観光情報サイト 「Take Me There Japan」 を個人プロジェクトとして開発・公開しました。

本サイトは AIと自動化を活用したスケーラブルな観光メディア をコンセプトに構築しています。

記事コンテンツは n8nによるAI自動生成パイプライン を利用し、Google Places APIから取得した観光スポット情報を元に作成しています。
その後、人間によるレビュー・編集を行うことで E-E-A-T（経験・専門性・権威性・信頼性） を担保しています。

また、旅行者が現地でタクシー運転手に見せることができる Taxi Card機能 など、実用的な独自機能も追加しています。

サイト設計には Claude Code を使用し、デザインおよびコーディングもAI支援により構築しました。

バックエンドには WordPressをヘッドレスCMSとして使用し、
フロントエンドは Astro + Cloudflare Pages (SSR + CDN Cache) を採用しています。

この構成により

• 高速表示
• スケーラブルな配信
• 低コスト運用

を実現しています。

理論上 月間100万PV以上のトラフィックにも対応可能で、
サーバー費用は WordPress最低価格プランのみという低コスト構成です。

使用技術

■使用言語
HTML / CSS / JavaScript / PHP

■フロントエンド
Astro / Tailwind CSS / Alpine.js / GSAP

■バックエンド
WordPress（Headless CMS）

■インフラ
Cloudflare Pages / SSR / CDN Cache

■AI自動化
n8n + Google Places API

Overview

Take Me There Japan is a personal project — an inbound tourism website designed for international visitors to Japan.

The site is built as a scalable travel media platform powered by AI and automation.

Articles are generated using an AI automation pipeline built with n8n, utilizing data from the Google Places API to create structured travel content.
To ensure E-E-A-T (Experience, Expertise, Authoritativeness, Trustworthiness), all AI-generated content is manually reviewed and edited.

The site also includes unique practical features such as Taxi Cards, which travelers can show to taxi drivers when visiting locations in Japan.

The overall site architecture was designed using Claude Code, with AI-assisted design and coding.

The backend uses WordPress as a headless CMS, while the frontend is built with Astro and deployed on Cloudflare Pages with SSR and CDN caching.

This architecture enables:

• High performance page loading
• Scalable content delivery
• Extremely low infrastructure costs

The system is theoretically capable of handling over 1 million pageviews per month, while maintaining minimal server costs.

Tech Stack

■ Languages
HTML / CSS / JavaScript / PHP

■ Frontend
Astro / Tailwind CSS / Alpine.js / GSAP

■ Backend
WordPress (Headless CMS)

■ Infrastructure
Cloudflare Pages / SSR / CDN Cache

■ AI Automation
n8n + Google Places API