はい、みなさんこんにちは。
今日はですね、ホームページを作ります。

難しいことはありません。

まずはみなさんの心の中に、三本の樹を植えたいと思います。

「やる気」
「根気」
「ガッツ」

はい。

立派な三本の樹が植えられましたね。

では、それを引っこ抜いてください。
根っこからです。
そして自治体指定のゴミ袋に入れてください。

今日は使いません。

体育主任「校長先生！　せっかく植えたものをいきなり捨てるというのはいかがなものかと！」

校長先生「ハウス！　あなたはそこでOpenAIのアカウントを作っていなさい！」

体育主任「はい！」

では、始めます。

---

ホームページ制作に「全部自分で勉強してから」は必要ありません

少し前まで、ゼロからホームページを作ろうと思ったら大変でした。

HTMLを勉強する。
CSSを勉強する。
JavaScriptを勉強する。
サーバーについて調べる。
レスポンシブ対応について調べる。
SEOについて調べる。

そして、ようやく制作を始める。
その間に春が来て夏が来ます。

やる気の樹も枯れます。

ところが現在は、ChatGPTとCodexのようなAIを使うことで、この流れを大幅に短縮できるようになりました。

もちろん、何も考えなくていいわけではありません。

しかし、
「作りたいものを人間が考える」

ことと、
「それを実際のHTMLやCSS、JavaScriptなどにする」

ことを分けられるようになりました。
今回は、私が普段やっている方法をもとに、

ChatGPTと相談するところから、Codexで制作し、実際にホームページを公開するところまで

順番にやってみましょう。

---

1時間目：まずChatGPTと話しなさい

体育主任「校長先生！　最初にプロンプトを用意しなくてよろしいのでしょうか！」

校長先生「いりません」

体育主任「プロンプトエンジニアリングは！」

校長先生「いったん忘れなさい」

最初から完璧な指示を書く必要はありません。

ChatGPTにログインしたら、ホームページ制作専用の「プロジェクト」をひとつ作っておくと便利です。

そして、まず普通に話してください。

たとえば、

「埼玉県で小さな美容室をやっています。お店のホームページを作りたいです」

これくらいからでも構いません。

そこから、

「どんなページが必要？」

「予約は電話だけでいい」

「料金表を載せたい」

「スマホから見る人が多いと思う」

「落ち着いた雰囲気にしたい」

「更新はほとんどしない」

「できるだけ維持費をかけたくない」

など、ChatGPTと話しながら決めていきます。

これがいわゆる「壁打ち」です。

自分一人で企画書を書くのではなく、話しながら「自分は何を作りたいのか」を具体的にしていきます。

途中で考えが変わっても構いません。
むしろ変わってください。

まだ何も作っていませんから。

---

分からないことは、その場で聞けばいい

たとえばChatGPTから、

「お問い合わせフォームは必要ですか？」

と聞かれたとします。
必要かどうか分からない。

だったら、

「お問い合わせフォームを付けるメリットとデメリットを教えて」

と聞けばいいのです。

「WordPressと静的HTMLのどちらがいい？」

と聞かれて意味が分からなければ、

「初心者にも分かるように違いを説明して」

で構いません。
知ったかぶりをする必要はありません。

体育主任「分からないことを分からないと言える勇気ですね！」

校長先生「あなたは昨日、FTPのパスワードを三回間違えましたね」

体育主任「……はい」

校長先生「そういうことです」

---

2時間目：話がまとまったら、Codexへの指示書を作りなさい

ChatGPTとの壁打ちで、

「だいたいこんなホームページにしたい」

という姿が見えてきたら、次へ進みます。

私はここで、ChatGPTにだいたい次のように頼みます。

「ここまで話した内容をまとめて、Codexに渡す用のWebサイト制作指示書を作成してください」

これだけです。

すると、それまでバラバラに話していた、

・サイトの目的
・ターゲット
・ページ構成
・必要な機能
・デザイン
・スマートフォン対応
・使用する技術
・SEO上必要な要素
・制作時の注意事項

などを、制作作業に使いやすい形へ整理できます。
ここが非常に重要です。

人間と相談するための会話と、制作AIに渡す作業指示を分ける。

ChatGPTには一緒に考えてもらう。
まとまった内容を指示書にする。

Codexには、その指示書をもとに実際に作ってもらう。

この役割分担にすると、かなり進めやすくなります。

---

3時間目：Codexに仕事をお願いします

指示書が完成したら、Codexデスクトップアプリを開きます。

制作するホームページ専用のフォルダを用意して、Codexに作業してもらいます。

私の場合、最初にだいたいこんなことを伝えています。

「やあ、こんにちは。今日はWebサイトの作成をお願いします。貼り付けた指示書にしたがって作業をしてください」

そして、もうひとつ。

完成したホームページを最終的にどこで運用するのかも伝えておきます。

たとえば、

「生成物は○○サーバーの○○というサブディレクトリへFTPでアップロードして公開します」

という具合です。

どこのサーバーを使うのか。
ルートディレクトリなのかサブディレクトリなのか。
どんな方法でアップロードするのか。

最終的な運用環境を先に伝えておくと、その後のファイル構成などの話がスムーズになります。

なお、FTPのパスワードなどの認証情報まで会話へ書く必要はありません。

体育主任「校長先生！　私のFTPパスワードは――」

校長先生「　言　う　な　！」

体育主任「はい！」

パスワードや秘密鍵などの認証情報は、自分で安全に管理してください。

---

4時間目：できたものをブラウザで見なさい

しばらくすると、CodexがHTMLやCSS、JavaScript、画像用のフォルダなど、ホームページに必要なファイルを作ってくれます。

ここで大切なのは、

完成したコードを眺めて満足しないこと。

ブラウザで見てください。

静的なホームページなら、ローカル環境で確認できるものもあります。
（index.htmlとなっているファイルがあれば、それをブラウザの新規タブを開いて放り込めばOK）

場合によっては、テスト用または本番サーバーへアップロードして、実際のURLから確認することもあります。

すると、たいてい出てきます。

「なんか違う」

大丈夫です。

正常です。

---

5時間目：Codexにどんどん文句を言いなさい

「見出しが大きすぎる」

「ここの余白が狭い」

「スマホだとボタンが邪魔」

「この文章をもっと上に持ってきたい」

「メニューが分かりづらい」

「この画像はもう少し大きくしたい」

実際の画面を見ながら、Codexへ修正を頼みます。
一回で完成させようとしなくて構いません。

作る → 見る → 直す。

これを繰り返します。

何をどう直せばいいのか分からなければ、その状態をChatGPTに相談しても構いません。

「なんとなく野暮ったいんだけど、原因は何だと思う？」

でもいいのです。
AI相手に格好をつける必要はありません。

体育主任「校長先生！　このサイト、なんとなくダサいです！」

校長先生「あなたはもう少し言葉を選びなさい」

体育主任「急に人間教育を!?」

---

6時間目：ある程度できたら、もう一度ChatGPTに見せなさい

ホームページがある程度完成したら、私は再びChatGPTにも確認してもらいます。

たとえば、

ページ全体のスクリーンショットを渡す。

あるいは、すでにインターネット上へ公開しているなら、

実際のURLを渡して見てもらう。

そして、

「使いづらそうなところはない？」

「初心者が迷いそうなところを探して」

「スマートフォンを前提に問題点を挙げて」

「お問い合わせまでの導線を見て」

などと頼みます。

制作中ずっと見ていた本人は、だんだん画面に慣れてしまいます。

そこで一度、別の視点を入れます。
問題が見つかったら、またCodexへ戻します。

そうです。

まだ帰れません。

---

7時間目：内部SEOを確認しなさい

デザインが完成した。

リンクも動く。

スマートフォンでも見られる。

そこで終わってはいけません。

最低限、検索エンジンから見つけてもらうための準備も確認します。

たとえば、

・titleは適切か
・meta descriptionは設定されているか
・h1、h2などの見出し構造がおかしくないか
・画像のalt属性は適切か
・canonicalは必要に応じて設定されているか
・内部リンクは正しくつながっているか
・存在しないページへのリンクがないか
・sitemap.xmlは用意されているか
・robots.txtに問題がないか
・OGPなど共有時の設定はどうするか

などです。

サイトの種類によって必要なものは変わりますが、私はこの段階でもChatGPTやCodexに確認させています。

ただし、AIが「大丈夫です」と言ったから大丈夫、ではありません。

最後は実際のページを開いて、人間も確認してください。
（この段階で使い勝手の良し悪しが分かったりします。あわてず騒がずcodexに投げましょう）

---

8時間目：公開したら、サチコにご挨拶しなさい

体育主任「サチコ……誰ですか？」

校長先生「Google Search Consoleです」

体育主任「最初からそう言ってください！」

ホームページを公開して問題がなければ、Google Search Consoleにも登録します。
サイトマップを送信し、必要に応じてURL検査からインデックス登録をリクエストします。

これで、

「ここに新しいページがありますよ」

とGoogleへ知らせるところまで進みました。

さらにSNSを使っているなら、

「ホームページを公開しました」

とX、Instagram、Facebookなど、自分が普段使っている場所で知らせてもいいでしょう。

これでようやく、

企画 → 制作 → 修正 → 確認 → 公開 → 検索エンジンへの通知

まで一周しました。

---

では、何が「最速」だったのか

ここまで読んで、

「結構いろいろやってるじゃないか」

と思ったかもしれません。

その通りです。

ホームページをきちんと作ろうと思えば、確認することはたくさんあります。
AIを使ったからといって、それらが消滅するわけではありません。

短縮できるのは、

それを全部、自分一人で調べ、自分一人で書き、自分一人で実装する時間です。

私が普段やっている流れを簡単にすると、

人間とChatGPTで考える

↓

ChatGPTにCodex用の指示書を作ってもらう

↓

Codexに制作してもらう

↓

人間がブラウザで確認する

↓

Codexに修正してもらう

↓

ChatGPTにも第三者的に確認してもらう

↓

SEOなどを確認する

↓

公開してSearch ConsoleやSNSへ

となります。

最初から100点の指示を出す必要はありません。

出てきたものを見て、

「違う」

「もう少しこうしたい」

「これって必要？」

と話し続ければいいのです。

それでもAIなしで手打ちでウェブサイトをひとつ丸々作った場合、
最低で1～2週間かかっていたものが、
数分～数時間で出来上がるんですよ？

---

最初に植えた三本の樹について

さて皆さん。

本日の最初に、

「やる気」
「根気」
「ガッツ」

という三本の樹を植えていただきました。

そして、すぐ指定ゴミ袋へ入れていただきました。
拾いに行く必要はありません。

AIを使ったホームページ制作で最初に必要なのは、

「自分は何を作りたいのかを、人間の言葉で話すこと」

です。

分からないことはChatGPTに聞く。
考えがまとまったら指示書にする。
Codexに作ってもらう。
出てきたものを見る。
違ったら直してもらう。
それを繰り返す。

昔なら「勉強してから作る」だったものが、

現在はかなりの部分で、

「作りながら知る」

へ変わっています。

ですから、

「ホームページを作ってみたいけど、何から勉強すればいいんだろう」

と半年間悩むくらいなら、一度AIに、

「ホームページを作ってみたいんだけど」

と話しかけてみてください。

そこから始めればいいのです。

体育主任「校長先生！　大変勉強になるお話ではございますが、お時間が押しております！」

校長先生「ハウス！」

体育主任「はい！」

校長先生「あなたはそこでファビコンとOGP画像を別スレッドで生成していなさい！」

体育主任「今からですか!?」

校長先生「ホームページを作って終わりだと思いましたか？」

体育主任「……違うんですか？」

校長先生「違います」

体育主任「……」

校長先生「皆さんも帰らないでください」

次回――
『ホームページを作ったら、次に何が必要？』

ファビコン、OGP画像、アクセス解析、Search Consoleなど、ホームページを作った「その後」に必要なものについて、校長先生がお話しするようです。

---

それでも作るのが面倒？
どんなデザインがいいのか分からない？

こんなサービスもあるのですよ
【Webの「ちょっとお助け」│ホームページ、ちょっとだけ直したい。】
⇒https://morimori-labo.monster/web-help.html