【第1回】息子の仕事を応援したい！65歳の父親が3つの生成AIとホームページ制作に挑戦
〜AIと二人三脚。プログラミング初心者がオリジナルテーマ制作に挑む〜
■ 息子のために、そして自分自身のために
以前のコラムで、息子が営む塗装業「ささき塗装」のホームページを自分の手で制作することをお伝えしました。
今回、いよいよ本格的な制作作業を開始しました。
私は現在65歳。
これまでパソコンやインターネットに関わる仕事を長く経験してきましたが、プログラミングについては、まだまだ勉強中の身です。
HTMLやCSSについては多少の知識がありますが、PHPとなると、正直なところ十分に理解できているとは言えません。
それでも今回は、既製のWordPressテーマを利用するのではなく、オリジナルテーマを自分で制作することにしました。
なぜ、わざわざ難しい道を選ぶのか。
それは、息子の事業を支援したいという思いと同時に、私自身がプログラミングを学び、生成AIの可能性を実践を通して確かめたいからです。
■ 最初の挑戦は、パソコンの中にWordPressをつくること
今回、最初に取り組んだのは、WordPressのローカル開発環境の構築です。
通常、ホームページはインターネット上のサーバーに設置します。
しかし、制作途中のホームページをいきなり公開する必要はありません。
そこで導入したのが「Local」というソフトウェアです。
このソフトを利用すると、自分のパソコンの中にWordPressを動かす環境を構築できます。
つまり、インターネット上に公開する前に、自分のパソコンで自由に制作やテストができるわけです。
今回、私は次の環境を構築しました。
開発環境：Local
CMS：WordPress
コード編集：Visual Studio Code
使用言語：HTML・CSS・PHP
制作テーマ：ささき塗装オリジナルテーマ
これらの設定も、生成AIのChatGPT、私が「皐月」と呼んでいるAIに相談しながら、一つひとつ進めました。
■ WordPressのテーマを自分でつくる
WordPressには、無料・有料を含めて数多くのテーマが存在します。
既製のテーマを使えば、比較的簡単に見栄えの良いホームページを制作できます。
しかし、今回はあえてゼロからの制作に挑戦しています。
最初に作成したのは、次のファイルです。
style.css
ホームページのデザインや装飾を担当するファイルです。
index.php
ホームページに表示する内容や構造を記述するファイルです。
そして、必要に応じてWordPressの機能を設定する「functions.php」も使用します。
ここで、以前から疑問に感じていたPHPについて、皐月に質問してみました。
「HTMLは骨格、CSSは装飾、JavaScriptは動きと理解しています。でもPHPがイマイチ理解できません」
すると皐月は、それぞれの役割をわかりやすく説明してくれました。
HTMLはホームページの骨格をつくる。
CSSは見た目を整える。
JavaScriptは画面上の動きを担当する。
そしてPHPは、サーバー側で処理を行い、WordPressのさまざまな機能を動かす。
なるほど！
単にコードを入力するのではなく、それぞれの役割を理解すると、ホームページ制作の仕組みが少しずつ見えてきます。
Visual Studio CodeでWordPressのオリジナルテーマを制作。
HTMLでページの骨格をつくり、PHPでWordPressと連携。初めてのオリジナルテーマ制作に挑戦しています。
■ 初めて自分のテーマが表示された！
ファイルを作成し、WordPressの管理画面を開いてみると、自分で作成した「ささき塗装」のテーマが表示されました。
そして、そのテーマを有効化。
ブラウザでホームページを開くと、
「ささき塗装へようこそ！」
という文字が表示されました。
まだ文字だけのシンプルなホームページです。
しかし、私にとっては大きな一歩でした。
自分で作成したPHPファイルがWordPressで読み込まれ、ブラウザに表示されたのです。
さらにCSSを編集して、背景色を変更し、見出しを緑色にして、文字を中央に配置しました。
ブラウザを更新すると、変更したデザインが反映されました。
「おおっ、ちゃんと動いた！」
こうした小さな成功体験こそ、プログラミング学習の面白さなのかもしれません。
■ 生成AIは、答えを教えるだけの存在ではない
今回の作業を通して、改めて感じたことがあります。
それは、生成AIは単に答えを教えてくれる便利な道具ではないということです。
わからないことがあれば質問する。
説明を聞いても理解できなければ、もう一度質問する。
実際に操作して、エラーが出れば画面を見せて相談する。
そして、うまくいけば次の作業へ進む。
まるで、隣にプログラミングの先生が座っているような感覚です。
しかも、何度同じ質問をしても付き合ってくれます。（笑）
私は以前から、生成AIを活用するうえで「ヒューマンAIバランス」が重要だと考えています。
人間が目的を決め、判断し、行動する。
生成AIは、その実現を支援する。
今回のホームページ制作も、まさにその実践です。
息子のためにホームページをつくりたい。
その目的を決めたのは私自身です。
そして、その実現を支援してくれているのが生成AIなのです。
■ 65歳からでも、新しいことは学べる
私は現在、「65歳からのAIプログラミング学習基地」という学習サイトも運営しています。
Python、Linux、Raspberry Pi、micro、WordPressなど、さまざまな技術について学び、その過程を記録しています。
今回の「ささき塗装」ホームページ制作も、その学習活動の一つです。
完成したホームページだけでなく、制作途中の失敗や疑問、生成AIとのやり取りも記録していきたいと考えています。
なぜなら、完成品だけを見ても、そこに至るまでの苦労や学びはわからないからです。
これからプログラミングを学ぶ人にとって、初心者がどのようなところで悩み、どのように解決したのかという記録は、きっと参考になるはずです。
そして何より、65歳になった今でも新しいことに挑戦できる。
その姿を伝えられたらと思っています。
■ 今日の成果は、小さなホームページ
本日の作業は、ここまで。
完成したのは、背景が薄いグレーで、中央に緑色の見出しが表示された、まだまだシンプルなホームページです。
一般的なホームページと比較すれば、完成度はほんの数パーセントかもしれません。
しかし、今日の成果は見た目以上に大きなものだと感じています。
WordPressのローカル環境を構築し、Visual Studio Codeを導入し、オリジナルテーマを作成し、PHPとCSSを使って実際に表示するところまで進めました。
そして何より、プログラミングに対する理解が少し深まりました。
息子の事業を支援するという目的があり、自分自身の学びにもつながっている。
これほどやりがいのある挑戦は、なかなかありません。
ホームページ完成まで、まだまだ長い道のりが続きます。
でも、焦る必要はありません。
一歩ずつ、理解しながら進めていきたいと思います。
65歳。まだまだ勉強することが山ほどあります。
だからこそ、毎日が面白いのです。（笑）
【今回の英語ワンフレーズ】
It's never too late to learn something new.
「新しいことを学ぶのに、遅すぎることはない」
年齢を理由に挑戦を諦める必要はありません。
大切なのは、学ぼうとする気持ちと、最初の一歩を踏み出すことだと思います。
【次回予告】
第3回「AIと一緒にホームページをデザインする！ ヘッダー制作への挑戦」
次回は、ささき塗装のホームページに、ロゴや会社名、ナビゲーションメニューを配置する作業に挑戦します。
HTML・CSS・PHPの役割を学びながら、少しずつ本物のホームページに近づけていきます。
■ 「65歳からのAIプログラミング学習基地」
■ すべてのコラムはこちら
https://mbp-japan.com/fukuoka/cncconsultingpro/service1/
■ 株式会社CNCコンサルティング 公式サイト
https://cncconsulting.pro/
