先生にホームページ制作を頼まれた
週1で通ってる書道教室の先生から、ホームページを作れないかと相談された。
自分のブログをAIと一緒に作った経験はある。でも今回は自分のじゃなくて、通ってる教室の、お世話になってる先生の本物のホームページ。自分のブログなら失敗しても困るのは自分だけだけど、今回はそうはいかない。適当なものは出せない。
これは、その制作の記録。人のためにサイトを作るのは、思っていたよりずっと難しくて、ずっと面白かった。
学び① いきなり作らせない。まず「頼み方」を作る
前の自分なら、すぐClaude Codeに「書道教室のサイト作って」と打ち込んでいた。でもこれ、うまくいかない。ふわっと頼むと、ふわっとしたものしか返ってこないから。
そこで先にやったのが、ChatGPTを相手に”指示そのもの”を作ることだった。
「書道教室のサイトを作りたい。コンセプトは”上手いより、らしさ”。よくある習い事っぽいサイトにはしたくない。これをAIに指示するなら、どんな文章にすればいい？」——こう相談すると、目的・雰囲気・優先順位を整理したプロンプトにしてくれる。それを自分の言葉に直してClaude Codeに渡した。
これは料理の注文と同じだと思う。「なんか美味しいもの」と頼むより、「辛さ控えめで、野菜多めのカレー」と言うほうが、欲しいものが出てくる。
AIに何か作らせたい人へ：作らせる前に、別のAIで注文票を作る。 これだけで最初の完成度が段違いになる。今回いちばん効いたコツがこれだった。
学び② 一発で決めようとしない。崩して作り直す
正直に言うと、一発ではまったく決まらなかった。
最初のプランは「トップページに全部載せる」。料金も先生の紹介も場所も、ぜんぶ1ページに詰めた。親切なつもりだった。でも組み上げたら、ごちゃごちゃした”よくある習い事サイト”に。目指していた静かな雰囲気と正反対で、見た瞬間「違う」と分かった。
だから崩して、作り直した。トップは雰囲気優先でシンプルに。細かい情報は別ページに逃がす。写真を主役として大きく見せる。それでもしっくりこなくて、見出し・余白・色をまた直した。
昔の自分なら、ここで「もう十分でしょ」と妥協して心が折れていたと思う。でも分かったのは、良いものは「作る→見て→違うと気づく→直す」の往復でしか生まれないということ。崩すのは失敗じゃなくて前進だった。これは勉強でもスポーツでも同じかもしれない。
学び③ つまずいた壁と、その越え方
技術的にも何度もつまずいた。同じように作る人のために、特に手こずった3つを残しておく。
スマホでスクロールがガタついた。 パソコンでは滑らかなのに、スマホだと画像のあたりでカクカクする。原因は、動きの演出がスマホには重すぎたこと。そこで「指で触る端末では演出を止めて、パソコンだけ動かす」と分けた。全部を同じにせず、環境ごとに変えるという発想を初めて覚えた。
ダークモードにしたらヘッダーが壊れた。 画面を暗くする設定を入れたら、上に固定していたメニューの位置がおかしくなった。犯人はその暗くする設定自体。別のやり方に変えて直した。「良さそうな設定が、関係なさそうな場所を壊す」——この怖さは、実際に踏んでみないと分からなかった。
情報があちこちに散らばって管理できなくなった。 住所や料金を各ページに直接書いていたら、変更が地獄になると気づいた。解決策は、情報を1つのファイルにまとめておくこと。そこを1か所直すだけでサイト全体が切り替わる。実際この教室は途中で校舎が移転したけど、住所を1行書き換えただけで全ページ直った。もし各ページに散らばったままだったら、全部手作業だった。
今どこまで来たか、そしてこの先
プレビュー環境ではもう動いている。本番公開はこれから。先生の実際のプロフィールや料金を入れながら、細かいところを詰めている段階だ。
じつは僕は、将来ホームページ制作を仕事にしたいと思っている。今回のこれは、ただの手伝いじゃなくて、その最初の実践になった。人から頼まれて、責任を持って、本物のサイトを作る。その重さと面白さは、やってみて初めて分かった。
最後に、「自分にも作れるかな」と思ってる同年代へ。プログラミングの知識ゼロでも、AIと一緒なら人のためのサイトまで作れる。必要だったのは特別な才能じゃなくて、うまく頼むことと、諦めずに何度も直すこと。本当にそれだけだった。
関連記事
→ Claude Codeでブログを作った話【AIが全部自動でやってくれた】