「自分のWebサイトを持ちたい」って思ったけど、難しそうで諦めていませんか。
HTMLやCSSどころか、ターミナルすら触ったことがない方も多いはずです。
そんな状態からAstro(Webサイトを高速に書き出す仕組み)で個人サイトを立ち上げるのは、夢の話に思えるかもしれません。
ですが、対話型AIの「Claude」を相棒にすれば、状況は一気に変わります。
作りたい内容を日本語で伝えるだけで、必要なコマンドも設定ファイルもClaudeが用意してくれる時代になりました。
あなたがやることは、頭のなかにある希望を言葉にして渡すだけです。
このページでは、知識ゼロからAstroサイトを公開するまでの全工程を、実際の手順で整理しました。
比較・準備・実装・公開・運用まで、順を追って進めれば、初心者から中級者まで自分好みのWebサイトを公開できます。
- 一般的なWebサイト(WordPress等)とAstroの違い・向き不向き
- Astroで作れるサイト・作れないサイトの判断軸
- 必要な無料サービス(GitHub・Cloudflare Pages・Node.js)の役割
- サイト構成・ワイヤーフレーム・実装・公開の具体プロンプトとコマンド
- 各工程でつまずいた時の対処法と、公開後の運用が楽になる理由
ここ数年、個人サイトを持ちたい方には、3つの壁がありました。
HTMLやCSSの学習、サーバーやドメインの設定、運用と更新の継続です。
3つすべてを越えられる方は限られていて、多くは途中で挫折してしまうのが現実でした。
ところが、AIアシスタントの登場で状況が変わったのです。
コード生成・設定ファイル作成・エラー対応のすべてが、対話だけで解決できる時代に入っています。
休日1〜2日(おおむね5〜10時間)あれば、初挑戦でも公開まで届くようになりました。
このページが必要かどうかは、最初の3章を読むと判断できます。
比較・向き不向き・必要サービスを先に整理してあるので、自分には合わないと感じたら、その時点で離脱して構いません。
一般的なWebサイト vs Astroサイト
最初に、よく使われる選択肢との比較から見ていきます。
個人サイトを持つ手段は、大きく3つに分かれますね。
| 比較項目 | WordPress レンタルサーバー型 | Wix / Jimdo サービス提供型 | Astro + Cloudflare 静的サイト型 |
|---|---|---|---|
| 月額コスト | 1,000〜3,000円 | 1,500〜2,500円 | 0円〜(ドメイン代のみ) |
| 表示速度 | △ 重くなりがち | △ サービス依存 | ◎ 静的HTMLで爆速 |
| SEO適性 | △ 設定次第 | △ サブドメインの壁 | ◎ 構造化が標準 |
| 運用負荷 | × 更新・保守必須 | ○ 全自動 | ○ git pushで自動公開 |
| 執筆体験 | △ 管理画面が重い | △ ブラウザ操作 | ◎ Markdownで完結 |
| 学習コスト | × 設定・PHP | ○ 直感的 | ○ Claude伴走で短縮 |
Astroは「自分のドメインで・速く・安く」 運用したい人向けの選択肢です。
それぞれの特性を、ひとことで整理しておきましょう。
「静的サイト」という言葉が出てきますが、これは「あらかじめHTMLを書き出して配信する仕組み」のことです。
データベースへの問い合わせが発生しない分、表示が速く、サーバー負荷もほぼゼロになります。
- Astro: https://astro.build/
- WordPress: https://wordpress.org/
- Wix: https://ja.wix.com/
ブログや記事を中心に運営したい方なら、Astroの選択肢が長期的にいちばん楽になります。
運用負担と月額コストの両方が下がり、表示速度とSEO適性は逆に上がるという、めずらしい組み合わせが成り立つのです。
Astroでできること・できないこと
ツール選びで失敗しないためには、Astroが何に向いて何に向かないかを、最初にはっきりさせておくのが近道です。
ブログ・解説サイト
記事を蓄積して検索流入を狙う構成
ランディングページ(LP)
商品紹介・サービス説明・申込までの誘導
ポートフォリオ・実績紹介
作品集・職務経歴・コーポレート用
技術ドキュメント
マニュアル・APIリファレンス
プロダクト紹介サイト
機能紹介・価格表・FAQ
企業サイト(更新少なめ)
会社情報・お知らせ・お問い合わせ
ユーザー登録・ログイン機能
外部サービス連携が必要
頻繁に変わる動的ページ
投稿コメント・リアルタイム掲示板
複雑な検索・絞り込みUI
JS実装が必要、別レイヤー追加
ECサイト(本格運用)
在庫・決済・会員管理は専用サービス
SNS・コミュニティサイト
投稿・通知・チャットの動的更新
業務システム・社内ツール
権限管理・データベース連携が中心
上記の「苦手」 領域がメインの方は、Astroではなく別の選択肢(Shopify・専用SaaS等)が適しています。
「得意」 領域に1つでも該当する方は、このまま読み進めてください。
必要なサービスを知る
Astroサイトを作るのに必要なのは、4つのサービスだけです。
すべて世界中で使われている標準ツールで、個人利用ならほぼ無料で動きますね。
- Claude対話型AIアシスタント
役割:コマンド提示・コード生成・記事添削・SVG画像生成
利用者規模:月額利用者 数百万人規模
コスト:月 約 3,000円(Pro) - GitHubコードと記事の保管庫
役割:原稿と設定ファイルを保管・公開トリガーとして機能
利用者規模:世界 1億人超の開発者
コスト:完全無料(個人プラン) - Cloudflare PagesWeb公開サービス
役割:サイトを世界中に高速配信・HTTPS自動化・CDN提供
利用者規模:世界 数千万サイトが利用
コスト:完全無料(個人利用) - Node.jsJavaScript実行環境
役割:Astroが動くための実行環境・1度入れるだけ
利用者規模:世界 90%超の開発現場
コスト:完全無料(オープンソース)
それぞれの役割を、もう少し詳しく見ていきましょう。
サイト構築の伴走相手です。
コマンド提示・コード生成・記事添削・SVG画像生成までを、自然な日本語で依頼できます。
Proプランは月額約3,000円で、世界中で月間数百万人規模が利用しています。
世界1億人以上の開発者が使うコード保管サービスです。
書いた記事や設定ファイルをここに保管し、変更履歴も自動で残ります。
個人利用は完全無料で、コストは一切かかりません。
世界中に高速配信するための公開基盤です。
GitHubに保存した内容を自動で取り込み、世界各地の配信拠点(CDN)から届けてくれます。
HTTPS化(暗号化通信)も自動で対応してくれて、個人利用は完全無料ですね。
Astroが動くために必要な実行環境ソフトです。
パソコン側に1度インストールするだけで、以降は意識しないで済みます。
オープンソースで完全無料、世界の開発現場の90%以上で使われている標準環境ですね。
各サービス名を完璧に理解しなくても、構築は進められます。
「Claude が指示を出し、GitHub に保管し、Cloudflare が公開する」 流れだけ頭に入れておけば十分ですよ。
サイト構成をClaudeと決める(出発点の整理)
ここから実装に入ります。
まず、自分が作りたいサイトの全体像をClaudeと一緒に整理しておきましょう。
- サイトの目的を1文で — 例:「個人ライターのAI解説基地」。先に決めると後の判断がぶれない
- ターゲット読者像 — 例:30代ライター・副業志望。読者像で記事の語り方が決まる
- カテゴリ案(3〜5個) — 例:Claude / Obsidian / 校正。カテゴリでサイト構造が決まる
- ページ一覧 + SEO主要KW — 例:プラグイン解説・添削術。SEO主要KWで記事が育つ
整理する階層は4つに分かれます。
上から順に決めていけば、後の判断がぶれにくくなりますよ。
個人ブログサイトを立ち上げたいです。以下の前提でサイト構成案を作ってください。
- ターゲット: 30代のライター層
- 公開コンテンツ: AI関連の解説記事
- カテゴリ: 3つ程度
- 月間4〜8記事を更新する想定
出してほしい項目:
- サイトの目的(1文)
- ターゲット読者像(箇条書き)
- カテゴリ案(3つ・各カテゴリの説明込み)
- 必須ページ一覧(トップ・カテゴリ・記事・お問い合わせ等)
- SEO主要キーワード案(カテゴリ別)
返ってきた内容を読み、納得いかない部分は「カテゴリをもう1つ増やしたい」と追加で伝えていきます。
決まった内容はObsidian(または好きなメモアプリ)に保存しておきましょう。
後の工程でClaudeへ「前回決めた構成は◯◯です」と参照できる形にしておくと、対話が速く進みますね。
ワイヤーフレームをClaudeでデザインする
サイト構成が決まったら、各ページのレイアウトをClaudeに相談します。
最初は文字だけで構成要素を伝え、ある程度形ができたら画像で修正していく流れです。
トップページのワイヤーフレーム案を出してください。
含めたい要素:
- ヘッダー(ロゴ・ナビ・検索)
- ヒーローセクション(キャッチコピー + CTAボタン)
- カテゴリ3カード(画像 + タイトル + 説明)
- 最新記事3件(リスト形式)
- フッター(プライバシー・お問い合わせ)
各要素の配置(縦並び/横並び)・サイズ感・色の方向性を、文字で説明してください。
モバイル表示時の挙動も併記してください。
返ってきた構成案を読みながら、「ヒーローを少し大きく」「カードは2列にしたい」と修正を重ねていきます。
「もう少し上に」「右寄りに」「色を明るく」のような相対指示は、Claudeにとって解像度が低く伝わりません。
開発中のサイト画面をスクリーンショットで撮り、画像に矢印や赤枠を書き込んで「ここを上揃えに」と具体化するのが、いちばん速い解決策です。
macOSなら標準のプレビュー(マークアップ機能)、Windowsならペイントや「切り取り&スケッチ」で書き込めますよ。
Astroプロジェクトを作る
「どうせ難しい設定があるんでしょ?」と感じた方も多いはずです。
答えは「そんな設定はありません」です。日本語で頼むだけで、サイトが完成します。
Astroで個人ブログのサイトを作りたいです。
名前は my-blog で、ブログテンプレートを使って、
TypeScriptは無しでお願いします。
承知しました。順番に進めますね。
まず、Node.js が入っているか確認します。
→ node —version を実行
Node.js が見つかりませんでした。
Homebrew経由でインストールしてもよろしいですか?
OK、進めて。
Node.js のインストール完了しました。
続けて my-blog プロジェクトを作成します。
開発サーバーも立ち上げました。
ブラウザで以下のURLを開いてください。
http://localhost:4321
見えた!ありがとう。
これでサイト構築の準備ができました。
やったのは、画面に文章を打ち込んだだけです。
コマンドの暗記もターミナル操作も、すべて Claude Code が代行してくれます。
エラーが出ても、貼るだけで解決する
作業中にエラーが出ても、構える必要はありません。
画面に出てきた赤い文字を、そのまま Claude Code に貼るだけです。
エラーが出た。
Error: Cannot find module ‘astro/config’
依存関係のファイルが正しく入っていないようです。
node_modules を入れ直しますね。
完了。もう一度開発サーバーを起動しました。
同じURLで確認してください。
動いた!
エラーの意味を読み解く必要も、英語を翻訳する必要もありません。
画面のエラー文をそのまま貼って「これ何?」と聞けば、原因と対処がそろって返ってきますね。
記事を書きながら対話で仕上げていく
サイトの形ができたら、記事の執筆に入ります。
書く流れも、Claude Codeとの対話そのままで進められますね。
- 初稿生成
テーマと構成を渡す - CLI検出
機械的な癖を抽出 - Claude添削
違反箇所を一括修正 - 再検出
残違反を確認 - 仕上げ
最終目視で判断
Obsidianの便利な使い方をテーマに、
3000字くらいのブログ記事を書いて。
ターゲットは初心者ライター、デスマス調でお願い。
初稿を作成しました。
導入 + 見出し5つ + まとめの構成、3,200字です。
文末も散らしてあります。確認してください。
もう少し具体例を増やしたい。
あと文末が「ます」 ばかりに見える箇所がある。
具体例を3つ追加し、文末は「です/ましょう/ですね」を交ぜて整えました。
同じ語尾の連続もチェック済みです。
このやり取りを2〜3往復すると、機械的なAIの癖が薄れて、自分の声に近づいてきます。
書き直しを頼むときも「○○の部分が硬い」「ここを柔らかく」と、日本語で伝えるだけで十分です。
プロンプトを書く力よりも、自分の好みを言葉にする力のほうが効いてきますね。
公開する(GitHub + Cloudflare Pages + 独自ドメイン)
公開も対話だけで進められます。
ただし、その前に3つだけ準備が必要です。
どれも無料、または年1,500円程度で揃いますね。
- ローカル
記事を書く - GitHub
原稿を保管 - Cloudflare Pages
自動ビルド+配信 - 独自ドメイン
あなたのURL - 読者へ
数十秒で反映
始める前に準備するもの
- GitHub アカウントを作る — https://github.com/signup からメールアドレスだけで登録できます。所要3分ほどです
- Cloudflare アカウントを作る — https://dash.cloudflare.com/sign-up からメールアドレスで登録、無料枠で十分動きます
- 独自ドメインを取得する(任意) — 日本のドメイン登録サービス(お名前.com・ムームードメイン 等)で好きな名前を購入(年1,500円程度)
3番目の独自ドメインは、最初は無くても大丈夫です。
無料サブドメイン(your-blog.pages.dev)でまず動かしてみて、慣れてから独自ドメインを紐づける、の順がおすすめですね。
どちらのサービスも、メールアドレスとパスワードを入れるだけで完了します。
英語表示で不安なら、ブラウザの自動翻訳機能(右クリック → 「日本語に翻訳」)を使えば日本語で進められますよ。
Claude Code に「公開して」と頼む
準備ができたら、あとは依頼するだけです。
このサイトを公開して。
GitHub と Cloudflare Pages を使って、
リポジトリ名は my-blog でお願い。
承知しました。
GitHub と Cloudflare、アカウントは準備できていますか?
両方ある。
進めます。
リポジトリ作成 → push → Cloudflare連携 → ビルド設定を順に行います。
認証や追加情報が必要な場面では、その都度お聞きしますね。
完了しました。
公開先のURL: https://my-blog.pages.dev
数十秒以内にアクセスできるようになります。
独自ドメインを紐づける(取得済みの方)
独自ドメインの紐づけも対話で進められます。
ただ、DNS の設定値はドメインを取得したサービスの管理画面で入力する必要があります。
ドメインを買った会社で「どこにアクセスを向けるか」 を決める仕組みですね。
your-domain.com を Cloudflare Pages に紐づけたい。
進めますね。
- Cloudflare Pages 側で Custom domains に
your-domain.comを登録します - ドメインを取得したサービスで、以下の DNS設定を入れてください
種別: CNAME
ホスト: @ (またはwww)
値: my-blog.pages.dev
ドメイン取得元の管理画面に入った。
どこに何を入れればいい?
取得元のサービス名を教えてください。
画面の場所と入力欄を、画像付きで案内します。
○○で取得した。
「ドメイン設定 → DNS設定 → DNSレコード追加」 の画面です。
種別の欄で CNAME を選び、ホストと値を入れて保存してください。
反映は数分〜数時間ですが、完了次第 your-domain.com からアクセスできます。
HTTPS化(暗号化通信)も自動で済んでいますよ。
DNS や CNAME の意味を覚える必要はありません。
画面で迷ったら「この画面でどこに入れる?」 と聞き返すだけで、必要な場所まで案内してくれます。
ここまでで自分が打ったコマンドは、ゼロのままです。
すべて、日本語で頼むだけで進みました。
当サイト(timecutai)もこの方法で運用しています
ここまでが理屈の話です。
実際、このサイト(timecutai)も、構築から記事投稿、デザイン変更まで、すべて Claude Code との対話だけで運用しています。
構築のとき
個人ブログサイトを作りたい。
カテゴリは Obsidian / Claude / 校正 の3つで、
落ち着いた青系の配色、Markdownで書ける構成でお願い。
このひとことから始まり、Astro と Cloudflare Pages の構成・カテゴリ別カラー・記事カードのレイアウトまで、Claude Code が提案・実装してくれました。
記事を投稿するとき
Obsidianのプラグインを販売する話、
3000字くらいで、初心者ライター向けに書いて。
返ってきた初稿に「具体例を増やして」 「文末を散らして」と続ければ、何度でも書き直してくれます。
記事の追加コマンドは入りません。Claude Code が原稿を保存し、git に commit し、push するところまで一気に行います。
デザインに飽きたとき
今のデザインに飽きた。
もっと落ち着いた雰囲気のおしゃれなサイトに変えて。
配色とレイアウトの方向性を3案提案します。
- 紺色 + ベージュアクセント(柔らかい印象)
- ニュートラルグレー + 緑アクセント(知的な印象)
- ダーク系 + 黄色アクセント(個性を出す)
どの方向が好みに近いですか?
選んで「2でお願い」 と返すだけで、CSS の書き換えからカラー定義の更新まで、全部 Claude Code が進めてくれます。
完成形を見て気に入らなければ「もう少し緑を抑えめに」 と続ければ、何度でも調整できますね。
このように、技術用語を一切持ち出すことなく、自然言語だけでサイトが育っていきます。
やってみたいと感じたなら、最初の一歩は「Astroで個人ブログを作って」 のひとことだけです。
公開後の運用が驚くほど楽になる理由
公開して終わり、ではありません。
ここからが、Astro+Cloudflare Pagesの良さが効いてくる部分です。
月額コスト
サーバー代 1,000〜3,000円 + SSL証明書(別途必要な場合あり)
日常メンテナンス
WordPress本体の定期更新・プラグインの個別更新・テーマの互換性チェック
セキュリティ対策
脆弱性パッチの適用・バックアップの定期取得
月額コスト
ドメイン代 月100〜200円のみ・サーバー代 0円(Cloudflare無料枠)
日常メンテナンス
git push のみで自動デプロイ・本体やプラグイン更新は不要
セキュリティ対策
HTTPSは自動発行・更新、GitHubで履歴が自動バックアップ
このサイトを構築する大きなメリット
時間とコストの話だけでなく、長期的に効いてくるメリットも整理しておきましょう。
最初は時間がかかっても、一度作ってしまえば、2回目以降は驚くほど早く進められます。
書きためた記事は、長い時間をかけて検索に届く資産に育っていくのです。
対話と分業で「初心者でも公開」が現実になる
ここまで紹介した工程は、すべてClaudeとの対話で進められます。
自分が決めるのは「どんなサイトにしたいか」「どこを直したいか」だけ。
コードも設定もコマンドも、Claudeがまるごと用意してくれます。
役割を分けるだけで、知識や経験がなくても、個人サイトを構築できる仕組みです。
最初の壁さえ越えれば、2回目以降は驚くほど早く進められます。
一度サイトが立ち上がってしまえば、自分のドメインで自由に情報を発信していけますね。
技術の壁にずっと立ち止まっていた方も、これからは対話の力で乗り越えていけます。
AIに「やりたいこと」を伝えるだけで、コマンドの形は向こうから返ってきますよ。
最初の一歩を踏み出してしまえば、自分のドメインが手元に残ります。
そこに書きためた言葉は、長い時間をかけて検索に届く資産に育っていくでしょう。
