Vibe コーディングを使用して個人の Web サイトを一から構築します。ライターは週末に独自のデジタル ファサードを立ち上げることもできます
この 2 か月間で、私の周りの友人たちから最もよく聞かれた質問は、おそらく「vista.tw はどうやって作るのですか?」というものでしょう。
質問した人の中にはライター、コーチ、そしてブランドコンサルティングをしている同僚も数名いました。 共通点は、ビジネスをしたいコンテンツや事例、あるいは読者をたくさん持っているということです。 しかし、これらのものは他人から借りた家に長い間保管されており、記事は Medium に、証言は Facebook に、コースの紹介は Notion の公開ページに、古い作品は読まれないまま Google Drive に数年間眠っています。
私もかつては同じでした。
実際、vista.tw の最初のバージョンは、2010 年頃に始めたブログから移されたものです。途中で何度かプラットフォームを変更しましたが、そのたびに古い倉庫を掃除するような感じでした。 最終的に現在の Astro アーキテクチャに切り替えたとき、長年私を妨げていたのはテクノロジーではなくメンタルであることに気づきました。
なぜ今?
バイブ コーディングという用語は、2025 年 2 月に OpenAI のアンドレイ カルパシー氏によって初めて言及されました。 その時、彼は AI プログラミングでの自分の作業モードを何気なく説明しただけでした。実際にコードを書いているのではなく、雰囲気を感じているだけで、コードの実行を観察し、修正を依頼し、読み続けているだけです。
この文が人気になった理由は、それが流行だからではなく、多くの人が感じながらもあえて誰も言わない変化を表現しているからです。つまり、プログラムを書くことが初めて文法中心ではなくなりました。
過去 30 年間、私は自分の Web サイトを構築したいというライターの友人をたくさん見てきましたが、彼らは皆、結局同じところに行き詰まっています。最初は HTML/CSS の学習に 6 か月、次に JavaScript の学習に 3 か月、そしてデプロイメントの学習に 2 か月を費やさなければなりません。 勉強を終える頃には、当初書きたかったことの半分も忘れており、ウェブサイトの構築を始めることはありませんでした。
Vibeコーディングの順序が異なります。 まず自分が何を望むかを考え、それを自然言語で AI に話します。 AI がプログラム コードを生成し、その出力が正しいかどうかを確認します。そうでない場合は、より正確な説明でもう一度言います。
文法はもはや閾値ではなく、頭の中にあるイメージを明確に説明できるかどうかが閾値です。 これを明確にするために、作家は毎日それを行っています。
個人 Web サイトはライターにとって具体的に何を解決しますか?
まず最初に 1 つ認めなければなりません。 たまに記事を投稿して読者に挨拶するだけなら、ソーシャル プラットフォームで本当に十分であり、個人の Web サイトは負担がさらに 1 つ増えるだけです。
しかし、文章を書くことを長くやろうとすると、遅かれ早かれいくつかの壁にぶつかることになります。
最初の壁は検索です。 読者が Google であなたの名前を検索すると、最初に何が表示されますか? 2014 年に登録したまま忘れていたフォーラム アカウントではなく、私が管理するページにしたいのです。
第二の壁は経済です。 ケースの受付、コースの提供、または電子書籍の販売を開始するときは、価格設定、お客様の声、チェックアウト リンクを配置する場所が必要です。 Facebook フィードをスワイプして 3 か月前の古い投稿を表示するように顧客に常に依頼できるわけではありません。
第三の壁は時間です。 ソーシャルアカウントはレンタルされ、Webサイトは購入されます。 私が書いた記事の中には 10 年前に書かれたものもありますが、今でも読者は vista.tw で読むことができます。もしそれらの記事が当時使用していたフォーラムやブログ プラットフォームに残っていたら、おそらく今頃は消えていたでしょう。
あなたも上にある壁のいずれかが迫ってきていると感じ始めているなら、この記事はあなたのためのものです。
バイブコーディング 本当の考え方の変化: プログラミングを学んでいるのではなく、記述を学んでいます
ここは私が最も初心者レベルを見てきた場所です。
多くの人は Vibecoding のことを聞くとすぐに、「まずは基礎を築きたい」と言って、プログラミング入門コースを急いで購入します。 そうすると3週目で諦めます。 問題は、彼らが十分に努力していないことではなく、間違った学習経路を歩んできたことです。
従来のプログラミング学習は次のようなものです。文法を学び、小さなプログラムを書き、大きなプログラムを書き、デバッグを学び、最後に製品を作ります。 Vibeコーディングはまったくこの道ではありません。 それは、欲しいものを明確に記述し、AI が出力し、何が間違っているかを判断し、より正確な言語を使用して修正し、製品を作ることです。
第 2 条の中核となる動詞である「説明する、判断する、書き直す」に注目してください。 この 3 つはライティングと非常に似ています。
作家は毎日何をしているのですか？ シーンを説明し、テキストのどこが間違っているかを判断し、それをより正確なバージョンに変更します。 あなたはこの筋肉群を何年も、あるいは何十年もトレーニングしてきました。 Vibecoding は、それを Web サイト開発に適用するだけです。
これから始めようとしている友達に簡単なメンタル チェックをしてみましょう。 AI によって作成された Web サイトが自分の希望を満たしていないとき、最初にどのような反応をしますか?
「今、明確に説明しませんでしたか？」という場合は、おめでとうございます。 Vibecoding の作業モードに入りました。
「AI は本当に愚かだ」または「文法を学び直したほうがよいでしょうか?」という場合は、まだ踏み込んでいません。
私がよく使うツール
あまりにも多くの初心者がツールの選択に週末丸々を費やしているのを見てきたので、この部分ではあまり説明せずに結論を直接述べます。
私の現在のメインエディタは Claude Code で、純粋な端末インターフェイスです。 AI と対話してファイルを直接変更できるので、これが最も効率的です。 ただし、初めての方には、Antigravity から始めることをお勧めします。これは、Google が発表したエージェント優先の IDE です。視覚的には従来のエディターのように見えます。左側にファイル、右側にエージェント ワークスペースが表示されます。ただし、最初に「コードの編集方法」を学ぶ必要はなく、タスクをエージェントに直接渡すだけです。 手続き型プログラムを書いたことがない人にとって、この「作業を割り当てる」作業モデルは、Cursor の「自分でやらなければならない」モデルよりも実際には簡単です。 物足りなく感じたらクロードコードに切り替えましょう。
プログラミング言語フレームワークとして、私は Astro を選択します。 現在最も人気があるのは Next.js であることはわかっていますが、ライターにとっては Astro が最適です。 Markdown は第一級市民として扱われます。記事を書くときは、通常メモをとるのと同じように .md ファイルを書きます。デフォルトでは静的 Web サイトが出力されます。これは高速で、優れた SEO を備え、無料で展開できます。フォルダー構造はシンプルなので、初心者でも迷うことはありません。 vista.tw 自体は Astro によって書かれており、非常に使い慣れています。
ウェブサイトの展開には Cloudflare Pages を使用していますが、これまでのところ 0.5 円もかかりません。 無料、CDN グローバル配布、無制限の帯域幅 - 何千もの記事がある私のようなサイトにとっては特に重要です。 大量のコンテンツがなく、新しい機能を頻繁に試したい場合には、Vercel も非常に優れており、スムーズな開発者エクスペリエンスを提供します。 私自身のサブサイトの一部では Vercel を使用しています。
ある週末、ゼロから始める方法
全行程を何度か頭の中で走らせてみたところ、これが一番心地よいリズムだということが分かりました。
土曜日の朝、あなたは Antigravity または Claude Code を開いて、「Astro を使用して個人の Web サイトを構築するのを手伝ってください」と伝えます。最初のページは、についてです。内容は、私が誰なのか、何をしているのか、そして過去にやったことの 2 つまたは 3 つについてです。スタイルは簡潔で、テキストが最初であり、派手なアニメーションはありません。 AI がプロジェクト構造を構築し、最初のページを作成します。 見てみて、気に入らなかったら変更してもらいましょう。 このセクションは約 90 分で、3 ～ 4 回繰り返して試すことができます。
土曜の午後はブログの仕事。 過去に記事を書いたことがある場合は、最近の記事を 5 つ選んで移行してください。 AI に /blog ルートの追加を手伝ってもらい、src/content/blog フォルダー内のマークダウンを読み取らせます。各記事にはタイトル、説明、pubDate、タグが必要で、ホームページには最新の 3 つの記事が表示されます。この瞬間から、あなたのウェブサイトには更新を続ける理由ができます。
日曜日の朝に購読フォームを追加してください。 ライターにとって最も重要な資産は読者リストです。 すべての有料電子ニュースレター プラットフォームは、最終的には手数料を受け取り、版を改訂し、広告を追加することになります。あなたを裏切らない唯一のものは、あなた自身の購読フォームです。 電子メールフィールドが必要である限り、Substack、ConvertKit、または Buttondown の埋め込みを文字列化します。
導入は日曜日の午後にオンラインになりました。 Cloudflare ページを一文でまとめます。 Cloudflare Registrar または Namecheap からドメインを年間約 12 ～ 15 ドルで購入します。
最後のステップは、そして私が最も重要なステップだと思うのですが、短い記事を書いてコミュニティに投稿することです。 タイトルは「私は自分のウェブサイトを持っています」となっており、リンクが貼ってあります。このステップは、Web サイトを技術的な部分から個人のブランド資産に変えるための鍵となります。 このステップを行わないと、2 か月後の週末に何を作ったか誰も覚えていないでしょう。
踏んでしまうかもしれない 3 つの落とし穴
最初の落とし穴は、それを一度に完璧にやろうとすることです。 私がこれまで見てきた最も一般的な悲劇は、3 か月の計画にもかかわらず、最後のシーンがオンラインに公開されなかったことです。 Web サイトの最初のバージョンは見苦しくても大丈夫です。 完璧なバージョンがオンラインにないより、醜いバージョンがオンラインにあるほうが 10,000 倍良いです。
2 つ目の落とし穴は、「別のツールを学ぶ」というサイクルに陥ってしまうことです。 既存のツールを使用して基本的な Web サイトを作成できる場合は、他の人が新しいツールを推奨しているのを見て飛びつかないでください。 ツールの切り替えにかかるコストは常に過小評価されています。 既存のツールが邪魔をしていない限り、同じツール セットを使い続けて、コンテンツに時間を費やしてください。
3 番目の落とし穴は、Web サイトを習慣ではなく仕事として扱うことです。 最も失敗する可能性が高いのは、Web サイト構築を 1 回限りのプロジェクトとして扱う人です。 構築された後は更新されなくなりました。 3 か月後、ウェブサイトは基本的に役に立たなくなりました。 私が自分に課している最低限の継続的なリズムは、毎週少なくとも 1 つのことを更新することです。記事、事例、または最近の動向に関する一文でも構いません。 Web サイトが更新されると、検索エンジンは引き続き Web サイトをクロールし、読者は忘れずに戻ってくるようになります。
一人で触りたくないですか?工房に来て作ってみよう
上記の週末のパスは、あなたが自分で時間をかけて勉強し、行き詰まった場合には辛抱強く Google を検索し、間違いを犯してもパニックに陥らないことを想定したバージョンです。
しかし、エディタを開いて空のプロジェクトを見ることを考えただけで、多くの友人が手のひらに汗をかくだろうということも私は知っています。
そこで、このパスを 3 時間のワークショップに凝縮しました: Vibe コーディング実践ワークショップ｜最初の販売ページを 3 時間で作成する。基礎もエンジニアリングの知識も必要ありません。 私が現場に同行し、ゼロから始めて 3 時間以内にオンラインで公開できる個人 Web サイト、販売ページ、またはリスト コレクション ページを作成します。
これは 5 番目のクラスで、弁護士、医師、大学教授、コーチ、フリーランスの労働者など、すでに 60 人以上の学生がいます。 学生の平均評価は 4.9 つ星です。 各クラスの定員は 12 名です。これは、皆さんに気を配り、行き詰まったときにすぐに画面を見られるようにしたいからです。
上記の道を読んで、「そうだ、これが私がやりたいことだ」と感じたなら、その道はそこにあるので、自分で進んでください。 「一人で行き詰まってしまうかもしれない」と思ったら、ワークショップに来てください、最初のセクションまで私が同行します。
あなたは Web サイトを構築しているのではなく、移転しているのです
ここ数年、私は個人のウェブサイトを移転することが最も適切な比喩であるとますます感じています。
過去10年間、作家は高級ビルに住む賃貸人のようなものだった。 建物は綺麗で設備も整っていますが、改築や郵便ポストの設置はできません。 大家が家賃を値上げしたり、引っ越しをしたい場合は協力しなければなりません。 ソーシャル プラットフォームはライターにとってこの役割を果たします。
自分の個人用ウェブサイトを構築するということは、家を借りることから持ち家に切り替えることを意味します。 謙虚に始まるかもしれませんが、それはあなたのものです。出入り口がどこにあるのか、リビング ルームの外観がどのようなものなのか、そして誰を招くのかを決めるのはあなたです。 バイブ コーディングにより、この家の建設コストが週末に短縮され、残る質問は 1 つだけです。 引っ越しする気はありますか?
よろしければ、今週末が良い機会です。 Antigravity または Claude Code を開いて、最初のことを言います。 残りは、やりながら調整してください。
AI ツールを個人的な執筆ワークフローに統合する方法についてより体系的に知りたい場合は、私の 電子メール ニュースレター を購読してください。 直接コピーできる AI ライティングまたは Web サイト構築プロセスを毎週共有します。来週は vista.tw のコンテンツ移行記録についてお話します。
