イントロダクション
はじめに ― このコンテンツについて
―― コーディング・システム開発編：AIと一緒に「自分のサイト」を作って世界に公開する ――
このコンテンツの目的
前作までで、わたしたちは大きな距離を歩いてきました。
『概論』では、生成AIとの出会い方、主要ツールの違い、プロンプトの型、GPTs・Gemsまでを扱い、AIを知的補助輪として使う感覚を掴みました。続く『ローカルファイル活用編』では、「チャット」から「作業環境」へと一歩進み、ファイルをAIに渡し、知識ベースを育て、AIが自分でファイルを操作する世界の入口まで歩きました。そしてローカルファイル活用編の最後で、こんな「地図」をお見せしました。
この先には、AIによるツール開発（バイブコーディング）、ホームページ・LP制作、業務システムの構築・自動化が広がっている。
本コンテンツは、その地図の続きを実際に歩く発展編です。テーマは、
「AIと一緒に、自分のWebサイトを作って、世界に公開する」
こと。具体的なゴールは2つ。自己紹介（プロフィール）ページを作り、それをホームページへと育て、最終的にVercel（ヴァーセル）というサービスを使って、誰でもアクセスできるURLで公開するところまでです。
「コーディング」「システム開発」と聞くと、急に専門家の世界に思えるかもしれません。けれど安心してください。本コンテンツでは、コードは一行も自分で書きません。コードを書くのはAIです。あなたがやるのは、AIに的確に指示を出し、出てきたものを確認し、世に出す判断をすること。つまり、これまで通り「AIとの付き合い方」の延長線上にあります。
そして、ここを越えると景色が一変します。アイデアを思いついたときに「誰かに頼まないと」ではなく「どう作ろうか」と考えられる側へ。これが、本コンテンツが届けたい最大の変化です。
本コンテンツを読むことで得られるもの
- 「AIチャット」と「AI開発ツール」の違いがわかり、自分に合う道具を選べるようになる
- AIにコードを書かせるときの「安全な作業環境」の作り方が身につく
- AIへの指示（プロンプト）の型と、エラーが出たときの対処の型が手に入る
- 自己紹介ページを、自分の手（とAIの手）で実際に作れるようになる
- GitHubに作品を預け、バックアップと公開の土台を持てるようになる
- Vercelを使って、作ったサイトを世界に公開できるようになる
- 「フロントエンド」と「バックエンド」という言葉の意味が腹落ちし、AIの出力を構造で読めるようになる
- ホームページまで作れるようになり、その先（予約フォーム・業務ツール・自費リハのLPなど）の地図が見える
本コンテンツの対象読者
本コンテンツは、次のような方を想定しています。
- ローカルファイル活用編まで読み終え、いよいよ「作る側」に踏み出したいセラピスト
- AIに文章や資料は作らせてきたが、「Webサイトやツール」は別世界だと感じている方
- 自費リハ・フリーランス活動・コミュニティ運営のために、自分の発信拠点が欲しい方
- 「ホームページ制作を外注すると高い」と感じ、まず自分で形にしてみたい方
- いずれは予約フォームや業務システムまで見据えたいが、その土台を固めたい方
逆に、すでに自分の手でWeb開発ができるエンジニアの方には、基礎的に感じられる部分も多いはずです。本コンテンツはあくまで、「作る側」へ確実に渡るための橋として書いています。
なお、ローカルファイル活用編を読んでいなくても本編だけで進められるよう構成していますが、安全に関する考え方は前回の第2章と地続きなので、不安な方はそちらに目を通しておくと、より安心して進められます。
本コンテンツの使い方
- 第1部から順に読むことをおすすめします。前の章が次の章の土台になるよう、段階的に積み上げる設計だからです。
- 各章末に「試してみる」「まとめ」を載せています。手元のパソコンで、必ず実際に手を動かしながら読んでください。
- 紹介するツールの画面・機能・上限・料金は、執筆時点（2026年）のものです。生成AIや開発ツールは進化が速いため、細部は変わります。それでも、根本的な考え方は大きくは変わりません。
- 本コンテンツでは、外部サービス連携（API）やログイン・データベースを使ったSNSのような機能までは扱いません。それらは「この先の地図」として終盤で触れ、次の各論で改めて1から扱う予定です。
本コンテンツの構成
本コンテンツは四部構成です。
- 第1部｜土台編 「使う側」から「作る側」へ。AI開発ツールとは何か、そして安全に作るための準備。
- 第2部｜実践編 AIへの指示の型を学び、実際に自己紹介ページを作る。
- 第3部｜公開編 GitHubに預け、Vercelで世界に公開する。
- 第4部｜発展編 ホームページへ育て、フロントエンドとバックエンドを理解し、その先の地図を描く。
それでは、始めましょう。