こんにちは、47歳から「クライアントの売上を上げるWebパートナー」を目指して修行中のマサです。
今日は、以前から課題としていたコーディング練習サイト「Codejump（コードジャンプ）」に挑戦しました。 結論から言うと、初級編（ポートフォリオサイト）と中級編（ストアサイト）を一気に完走しました。
これまでは1つの課題に何日もかかっていた私が、なぜたった数日でここまで来れたのか。 そして、そこで気づいた「AI時代のWeb制作の真実」について、熱が冷めないうちに書いておこうと思います。
AIがいれば「無敵」だと思っていたけれど
今回、私は学習のパートナーとして生成AI（Gemini）をフル活用しました。 「このデザインのコードを書いて」と指示すれば、数秒でHTMLとCSSが返ってくる。 正直、最初は震えました。「なんだ、これなら勉強なんていらないじゃん」とすら思いました。
でも、現実はそんなに甘くなかったです。
AIが出してくれたコードを画面に表示してみると、確かにそれっぽい形にはなっています。 しかし、よく見ると……。
- 「あれ？ 見本より余白が狭くない？」
- 「ハンバーガーメニューの『×』ボタン、中心がズレてかっこ悪い……」
- 「商品が4列じゃなくて、3列で変な隙間ができてる」
AIは「コード」は書けますが、「違和感」には気づいてくれません。 もし私が「AIが書いたんだから正解だろう」と思考停止していたら、ズレたままの恥ずかしいサイトを「完成です！」と言って納品していたでしょう。
「作る人」から「監督する人」へ
そこでハッとしました。 これからのWeb制作で求められるのは、自分でゼロからコードを書く力以上に、「AIが出した成果物をジャッジし、正しく修正指示を出す力（ディレクション力）」なんじゃないかと。
実際、今回はAIに対して何度もダメ出しをしました。
「見本をよく見て。ここは縦並びじゃなくて横並びじゃない？」 「スマホで見ると崩れてるから、幅を調整して」 「×ボタンの形が不自然。もっと綺麗に真ん中で交差させて」
そうやって修正させた結果、完成したサイトがこちらです。
▼初級編：ポートフォリオサイト
（Aboutセクションのレイアウト、AIは最初間違えましたが、私の目で指摘して直しました）
▼中級編：インテリアストアサイト
（PCでは4列、スマホでは2列に切り替わるレスポンシブ対応も完璧です）
自分自身の目で「違和感」を見つけ、AIという優秀な部下に指示を出して修正させる。 このプロセスは、まさに私が目指している「Webディレクション」そのものでした。
ブログ運営（Cocoon）と繋がった瞬間
そしてもう一つ、大きな発見がありました。 私はこのブログをWordPress（テーマ：Cocoon）で運用していますが、今までカスタマイズは「なんとなくネットのコードをコピペ」していました。
でも、今回自分でゼロからサイトを作ったことで、頭の中の霧が晴れました。
「あ、Cocoonの『子テーマ』って、今回やった style.css の上書きと同じことか！」 「『スキン』を変えるってことは、読み込むCSSファイルを切り替えてるだけなんだ」
今まで「ブラックボックス」だったWordPressの裏側が、急に鮮明に見えてきたんです。 「点と点が線になる」とはまさにこのこと。 過去のブログ運営の経験が、プログラミング学習によって裏付けられた瞬間でした。
47歳の挑戦は、ここからが本番
Codejumpの中級編までクリアしたことで、HTMLとCSSという「静止画を作る技術」は一旦卒業です。 自信はつきました。でも、慢心はありません。
私の目標は、あくまで「月３0万稼いで、独立する」こと。 静的なサイトが作れるだけでは、まだスタートラインに立ったに過ぎません。
次は、いよいよWeb制作の本丸「WordPressの自作テーマ開発」に入ります。 自分のPC内に開発環境（Local）を作り、システムを自由に操れるようになるための挑戦です。
「AIに使われる」のではなく、「AIを使いこなす監督」へ。 47歳の挑戦は、まだまだここからが面白くなりそうです。
コメント