この記事でわかること
- AIに任せられることと、自分の手が必要なことの分かれ目
- 夜2時間の割り振り方と、1枚できるまでの流れ
- 最初に用意するお金と道具、いまは買わなくていいもの
「エンジニアじゃなくてもできるって、本当？」
「プログラミングを勉強する時間は、どこにもない」
「調べても専門用語ばかりで、どこから手をつければいいのかわからない」
半年前の私が思っていたことです。
未経験でもAIを使えばホームページは作れます。
ただし、丸投げして完成するものではありません。
私はプログラミングを一行も書けません。Webやデザインの資格もありません（どんな人間が書いているか）。
それでもAIを使いはじめて、いまは人から頼まれたホームページを作って渡すところまで来ました。
使ったのは、子どもが寝たあとの夜2時間だけです。
つらいのは、作り方がわからないことではないと思います。
「自分に本当にできるのか」がわからないまま、時間だけが減っていくこと。
読み終えたら、今夜のうちに1枚めに手をつけられます。
1枚できるまでの流れ
前提を1つ。この進め方は、練習用の1枚を想定しています。
自分のページか、架空のお店のページです。
人から頼まれて作る場合は打ち合わせと修正のやりとりが加わるので、同じようには進みません。
やることは4つです。
使うのは、ふだんAIと話している画面だけ。新しくソフトを入れる必要はありません。
先に書いておくと、1枚目は無料の枠でも届きます。
ただし直しを重ねると途中で上限に当たるので、続けるなら有料プランに切り替えることになります。
まずは無料のまま、1枚できるところまで試してみてください。
1. AIに最初に伝えること
いきなり「ホームページを作って」と頼むと、ぼんやりしたものが返ってきます。
伝える内容を決めてから打つと、1回目から形になります。
こんな感じで指示してみてください。中身を自分のものに置き換えれば、そのまま使えます。
- 架空のパン屋のホームページを1枚作ってください。
- 読む人：近所に住む30代の家族連れ
- 読んだあとしてほしいこと：場所と営業時間を知って、行ってみようと思ってもらう
- 入れる内容：店名、ひとことの紹介、こだわり3つ、営業時間、住所
- 色：白地に、こげ茶を1色だけ
- 見る画面：スマホが中心
- HTMLとCSSは1つにまとめて出してください
最後の1行が地味に大事です。
これを書かないと中身が2つに分かれて返ってきて、あとで保存するときに戸惑います。
2. その場で見て、直したいところを伝える
Claudeなら、指示を送るとページがその場で表示されます。ChatGPTでも同じように見られます。
この時点では、まだ何も保存していません。
パソコンの中に何かが増えるわけでもないので、気楽に試せます。
見て気になったところを、そのまま言葉で伝えます。専門用語は要りません。
- 一番上の見出しが小さいので、もっと大きくしてください
- 全体が詰まって見えます。文章と文章の間をもう少し空けてください
- スマホで見ると横にはみ出します。直してください
- こげ茶が強すぎるので、もう少し薄くしてください
言葉で伝えきれないときは、画面を撮って見せるほうが早いです。
スクリーンショットを貼って「ここの余白を広げて」と書けば、場所を説明する手間が要りません。
納得できるまで、この行き来を繰り返します。
ここが一番おもしろいところです！
3. できたものをファイルにする
形になってから、はじめてファイルにします。ここまで来たら、あとは2つだけです。
1つめ。画面に出ているコードを、まるごとコピーします。
Claudeなら、表示されているページの右上からダウンロードもできます。
2つめ。デスクトップに新しいフォルダを1つ作って、その中に index.html という名前で保存します。
Macならテキストエディット、Windowsならメモ帳で作れます。
Macのテキストエディットを使うときは、貼り付ける前に「フォーマット」から「標準テキストにする」を選んでください。
ここを飛ばすと、保存しても正しく開きません。
保存できたら、そのファイルをダブルクリックしてみてください。
ブラウザが開いて、さっきのページが出てきます！
これで、ホームページの中身が手元にある状態になりました。
4. インターネットに出す
Cloudflare Pagesの無料アカウントを作ります。
あとは、さっきのフォルダをドラッグ＆ドロップするだけです。
1分ほどでアドレスが発行され、そのURLを誰にでも渡せます。
この段階では自分のドメインは要りません。無料でもらえるアドレスで十分です。
人に見せる仕事につながってから買えば間に合います。
慣れてきたら、Claude Codeという方法もあります。
ファイルの保存や書き換えまでAIがやってくれるので、コピーして貼る手間がなくなります。
ただし有料プランが要りますし、最初の設定には少し慣れが必要です。
1枚作れるようになってからで十分です。
AIに任せられること、自分で決めること
「おしゃれなトップページを作って」と打ち込んで、返ってきた画面をしばらく黙って見ていた夜があります。
きれいでした。でも、良いのか悪いのかを自分では判断できませんでした。
AIは作るのが得意で、決めるのが苦手です。
文章の下書きやページの組み立ては、数分で出してきます。
一方で、誰に向けたホームページなのか、何を載せるのか。ここはあなたが決めないと空欄のままです。
分けないまま始めると、出てきたものを自分で評価できません。
私も、最初の1か月はこの状態でした。
AIが得意なのは、形にすること
頼めば数分で返ってくるのは、こういうものです。
- ホームページの見た目を作る指示書（HTMLとCSSと呼ばれる、文字だけで書かれた設計図）
- 見出しや説明文の下書き
- 配色と文字の大きさの案
- 画面が崩れたときの原因の見当
- 「余白をもう少し広く」のような修正
ここで大事なのは、コードを自分で書けるようになる必要がないことです。
私はいまもHTMLを一から書けません。それでもホームページは公開できています！
AIが書いた設計図をブラウザで開いて、気になったところを言葉で伝えて直してもらう。
このやりとりだけで形になります。
自分がやるのは、決めること
反対に、AIに投げても返ってこないものが4つあります。
誰に向けたホームページか。何を載せて、何を載せないか。
出てきたものが読みやすいかどうか。そして、公開してよいかの最終確認です。
一番効いたのは2つ目でした。
自己紹介のページを作るとき、資格も趣味も経歴も全部載せたくなります。
けれど読む人が知りたいのは、あなたが何をしてくれる人かだけ。
載せない情報を決めるのは、最後まで人の仕事です。
手元にどんな材料があるかを知っているのは、あなただけです。
丸ごと自動にならない理由
理由は2つです。1つめは、AIがあなたの事実を知らないこと。
実績や数字を書いてと頼むと、それらしいものを勝手に作ります。
もっともらしい作り話が混ざる現象です。気づかずに公開すると、嘘のページになります。
数字と固有名詞は、必ず自分で入れ直してください。
2つめは、指示が薄いと平均的なものしか出てこないこと。
「おしゃれなトップページを作って」だけだと、どこかで見たようなページが出てきます。
下手ではない。でも、あなたのページにはなりません。
夜2時間を積み上げる進め方
歯みがきを終わらせて、寝かしつけを終わらせて。そこから23時までが、私の作業時間です。
子どもと一緒に寝落ちして、気づいたら朝だった日もあります。
短いですが、続けば強い時間です。
落とし穴は、この2時間を「何かを完成させる時間」にしてしまうこと。
1枚のホームページは、一晩では終わりません。
それを一晩で終わらせようとすると、中途半端なところで力尽きます。
翌日に開く気力もなくなる。私も、これで何度か手が止まりました。
1日で終わらせない前提にする
やることを先に割ってから始めると、止まりにくくなります。
私が1枚のホームページで踏む順番は、だいたいこうです。
- 誰に向けて何を伝えるページかを、1行で決める
- 載せる材料（文章・写真・連絡先）を集める
- どのかたまりをどの順に並べるか決める
- かたまりごとにAIに作ってもらう
- スマホで見て直す
- インターネット上に置いて公開する
かかる時間は、段階によってまったく違います。
1行で決めるだけなら10分。AIとやりとりしながら形にするところは、何晩もかかります。
大事なのは、いま自分がどこにいるかをわかっていること。
1つが終わらない夜があっても、遅れているわけではありません。
終わりの時間を先に決める
2時間の中身も決めておくと楽です。
最初の10分で前回どこまで進んだかを確認して、あとはひたすら作業。
眠いまま粘った翌日に残っていたのは、自分でも何をしたのかわからないファイルでした。
23時になったら途中でも手を止めるほうが、結果として早く進みます。
もう1つ手があります。時間のかかりそうな作業を、寝る前にAIへ渡してしまうことです。
ページ全体のデザインを組んでもらう。参考になりそうなサイトを調べてもらう。
待ち時間の長い作業は、自分が起きている必要がありません。
翌朝、出てきたものを見るところから始められます。
土日に取れる時間は、新しい作業より見直しに向いています。
平日の夜に作ったページを、明るい頭でスマホから見る。
誤字も読みにくさも、そのほうが見つかります。
思いついたことを取りこぼさない
やりたいことを思いつくのは、机に向かっているときではありません。
スーパーの通路だったり、電気を消したあとの布団の中だったり。
そのままにしておくと、夜にパソコンを開いたころには消えています。
私がやっているのは2つ。作業中に「あとでこれもやりたい」と浮かんだら、その場でAIに伝えておく。
外にいて思いついたときは、スマホにメモする。どちらも10秒で終わります。
思いついた瞬間に手放すほうが、覚えておこうとするより楽です。
最初に用意するお金と道具
お金の話を先に済ませます。
続けるなら、削れないのはAIの有料プランだけです。
1枚だけなら無料の枠でも届きますが、2枚目からは同じようにいきません。
無料の枠もありますが、集中して作業する日は一晩で使い切ります。
逆に、練習しているあいだはサーバー代もドメイン代も要りません。
副業に回せるお金が月3,000円なら、AIの有料プランでちょうど埋まる計算になります。
無料でそろうもの
AIの有料プラン以外は、お金を出さずにそろいます。
- 文字を書くためのソフト（Visual Studio Codeは無料）
- 作ったページを置く場所（Cloudflare PagesやNetlifyに無料の枠があります）
- 写真素材（ぱくたそ、Unsplashなど無料で使えるサイト）
- 日本語のフォント（Google Fontsに無料のものがあります）
練習用の1枚なら、この形で公開まで行けます。
かかっているのはAIの月額だけ、という状態です。
月3,000円で足りる範囲
続けると決めたあとに増えるのは、自分のドメインくらいです。
末尾が.comのものなら年1,000円から1,500円ほど。月にすると100円台になります。
ドメインは、人に見せる段になってから足せば間に合います。練習のうちは要りません。
先にAIの有料プラン、あとからドメイン。この順で無理がありません。
今は買わなくていいもの
始める前に買いたくなるけれど、あとでいいものもあります。
- 有料のデザインの型（WordPressの有料テーマなど）
- 有料の写真素材や有料フォント
- 新しいパソコン
パソコンは、いま使っているものをそのまま使えることが多いです。
私も、仕事で毎日使っているものを買い替えずに使っています。
ただし、あまりに古い機種だと動作の遅さでイライラします。
AIとやりとりしながら画面をいくつも開くので、そこそこの性能は必要です。
目安は、ふだんの仕事でストレスなく使えているか。それで足りているなら、買い替えなくて大丈夫です。
先にお金を払ったほうが続く、ということはありません。
払った金額が大きいほど、進まない自分を責める材料が増えるだけです。
それから、これははっきり書いておきます。
Web制作のスクールは要りません！
20万円を払って教わる内容の多くは、AIに聞けばその場で返ってきます。
わからない言葉が出てきても、そのまま聞き返せます。
同じお金を出すなら、月3,000円のAIの有料プランに回してください。毎日使えるぶん、確実に効きます。
未経験がつまずく3か所
デザインが一向によくならないまま、時計だけが進んでいく夜があります。
どこをどう直せばいいのかもわからない。眠い。
そこで閉じたファイルを、翌日は開けませんでした。
手を動かしはじめると、たいてい同じ場所で止まります。
私が止まったのはこの3か所で、どれも知識が足りないせいではありませんでした。
指示の出し方、エラーとの付き合い方、そして終わりの決め方です。
先に知っておけば、夜1回分の時間は節約できます。
指示が伝わらないとき
出てきたページが思っていたものと違うとき、原因はほぼ指示の粗さです。
伝える情報を4つ足すと変わります。
- 誰が読むページか（例：小さな子どもがいる30代の母親）
- 読んだあと何をしてほしいか（例：問い合わせの画面に進んでもらう）
- 使いたい色（例：白地に濃い緑を1色だけ）
- どの画面で見るか（例：スマホが中心）
もう1つのコツは、1回で全部を頼まないことです。
トップページ全体ではなく、まず一番上の見出しの部分だけ。次に紹介の部分。
かたまりごとに区切ると、直したい場所も伝えやすくなります。
言葉で伝えきれないときは、画面を撮って見せるほうが早いです。
スクリーンショットを貼って「ここの余白を広げて」と書けば、場所を説明する手間が要りません。
文字の重なりや崩れは、言葉にするより見せたほうが確実に伝わります。
エラーで手が止まるとき
画面が真っ白になる。文字が重なる。
ボタンが反応しない。こういうときは自分で原因を探さず、起きたことをそのままAIに伝えるほうが早いです。
何をしたか、どうなると思っていたか、実際に何が起きたか。
画面に出ている文字は、そのままコピーして貼る。この4点で、たいていは原因の見当がつきます。
同じやり方で2回直らなかったら、方法を変えてください。
3回目の同じ質問は、ほとんど無駄になります。
作業前のファイルを別名でコピーしておけば、どうにもならない夜は元に戻して寝られます。
完成の基準がわからないとき
見た目に手を入れ続けて終われなくなる。私もそうでした。
先に基準を決めておくと切り上げられます。使っているのは5つです。
- スマホで見て横にはみ出さないか
- 本文の文字が小さすぎないか（16px以上を目安に）
- リンクとボタンが全部動くか
- 誤字がないか（声に出して1回読む）
- 表示に3秒以上かかっていないか
この5つを満たしたら公開してよし、としています。
100点を目指すと、いつまでも公開できません。
それと、家族以外の誰か1人に見てもらうと、自分では気づけなかった読みにくさが出てきます。
AIホームページ作成のよくある質問
洗濯物をたたみながら考えていたのは、たいてい同じことでした。
始める前に知りたかったことを、ここにまとめます。
どれも「やってみないとわからない」と言われがちな質問です。
やった範囲では答えが出ています。まだ答えを持っていないものは、持っていないと書きます。
プログラミングの勉強は必要か
一から書けるようになる必要はありません。
触っているうちに「ここが見出しの部分だな」くらいはわかってきます。それで足ります。
先に参考書を1冊終わらせようとすると、1枚も作らないまま数か月が過ぎてしまう。
どのAIを使えばよいか
ClaudeでもChatGPTでも作れます。
私はClaudeを中心に使っていて、ChatGPTの有料プランに含まれるCodexという機能も使います。
唯一の正解はありません。
最初は無料の枠で1週間ずつ触ってみて、手に合ったほうを有料にするのがおすすめです。
公開までどれくらいかかるか
初めての1枚は、2週間ほど見ておくと気が楽になります。
慣れてくると短くなります。私は最初のひと月で、練習用に何枚も作りました。
作ったホームページはどこに置くか
練習と1枚もののページなら、Cloudflare PagesやNetlifyの無料枠で公開できます。
自分のブログとして記事を増やしていくなら、レンタルサーバーとWordPressの組み合わせが向いています。
最初から後者を選ぶ必要はありません。
コードを使わない方法もあるか
あります。
STUDIOという日本製のサービスなら、マウスで部品を並べる感覚でホームページを作れるものもあります。
無料のまま公開できて、そのときのアドレスは「studio.site」で終わる形になります。
自分のドメインを使いたい場合だけ、月数百円からの有料プランが必要です。
AIにコードを書いてもらう方法とは、進め方がまったく違います。
画面を見ながら手で整えたい人はSTUDIO、言葉で指示するほうが楽な人はAI。
どちらが合うかは、両方少し触ってみるとわかります。
あとから乗り換えることもできるので、最初の選択で悩みすぎなくて大丈夫です。
途中でやめたくなったときは
1日休んで大丈夫です。
やることを割っていれば、次に開いたとき続きから戻れます。
毎日やる前提にすると、1回休んだ日に終わってしまう。週3回でも進むと考えたほうが続きます。
家族に言わずに進められるか
21時から23時なら現実的です。
ただし公開したページは誰でも見られます。本名や自宅の住所は載せないでください。
練習の段階なら、名前を出さずに架空のお店のページを作るのが安全です。
コピーして使えます：AIに最初に伝える指示文
1枚目を始めるとき、私が打っているのはこれだけです。
中身を自分のものに置き換えれば、そのままコピーして使えます。
- 架空のパン屋のホームページを1枚作ってください。
- 読む人：近所に住む30代の家族連れ
- 読んだあとしてほしいこと：場所と営業時間を知って、行ってみようと思ってもらう
- 入れる内容：店名、ひとことの紹介、こだわり3つ、営業時間、住所
- 色：白地に、こげ茶を1色だけ
- 見る画面：スマホが中心
- HTMLとCSSは1つにまとめて出してください
最後の1行を忘れないでください。
これがないと中身が2つに分かれて返ってきて、保存するときに戸惑います。
今夜の2時間でできること
今夜も、子どもが寝たら2時間が来ます。
未経験でもAIを使えばホームページは作れます。
ただしAIが全部やってくれるわけではなく、決める作業はあなたに残ります。
それが残ることは、悪い話ではありません。
任せきりにできないからこそ、出来上がったものが自分のものになります。
この記事で書いたことを、もう一度並べます。
- AIは作るのが得意で、決めるのが苦手。決めるのは自分の仕事
- 夜2時間は、完成させる時間ではなく1つ進める時間
- 最低限かかるのはAIの有料プランだけ。スクールは要らない
今夜やることを1つだけ挙げるなら、1行で決めることです。
「誰に向けた、何のページを作るか」。お金はかからず、10分で終わります。
ここが決まらないままAIに頼むと、何度も作り直すことになります。
私も最初のうちは、ここを決めないまま手を動かして、何度も作り直しました。
作れるようになったあと、これが仕事になるのかも気になると思います。
私は、この方法で作ったものを人に頼まれて納品するところまで来ました。その話は納品経験ゼロで営業を始めた話に書きました。
コメント