AIと一緒にWordPressのトップページを作り直してみた

まどかラボのトップページを、AIと一緒に作り直しました。

まどかラボでは、AIとの暮らしや副業、Difyなどで作ったものと一緒に、EA（FXの自動売買プログラム）に挑戦した記事も記録してきました。今後の運営方針を見直し、まどかラボでのEA開発は終えることにしました。

これからの運営方針を整理してみると、トップページからは「今後どんなことを書くのか」が少し伝わりにくいと感じました。そこで、初めて来た人にもまどかラボの内容が分かるように、トップページを見直すことにしました。

最初に決めたのは、まどかラボの3本柱

デザインを変える前に、これから何を書くブログなのかを整理しました。

過去のEA記事は消さず、「過去のEA研究」として分けて残すことにしました。今の活動と混ざらないようにしながら、AIと試行錯誤した記録として読める形です。

私は、AIにもプログラミングにも詳しくないところから始めました。ただ、短い期間でもかなり密度濃くAIを使い、分からないままでも一つずつ試してきました。

気づけば、DifyやMakeを使ったり、小さな自動化や仕組みを形にしたりできるようになっていました。ゆっくり知識を覚えたというより、毎日のように試す中で、できることが急に増えていった感覚です。

自動化ツールは、仕組みをすべて理解していなくても、AIと手順を確認しながら組み合わせると動くものを作れます。作れるようになったことと、仕組みを深く理解していることは、必ずしも同じではありません。

だからこそ、初心者から一歩進んでできるようになったことも、まだ分かっていないことも、初めてAIに触れる人に伝わる言葉で正直に書いていきます。

どんな雰囲気にしたいのか言葉だけでは決めにくかったので、Webデザインの事例サイトを見ながら参考になるページを探しました。

そのまま真似するのではなく、「やわらかい色」「余白がある」「カードで内容を分ける」「親しみやすいけれど子どもっぽくしない」といった、好きな要素をAIに伝えました。

私はデザインの専門用語をほとんど知りません。それでも、「この雰囲気が好き」「ここは読みづらい」と伝えることで、少しずつ形にできました。

今回、主に次の部分を変更しました。

情報を増やすより、「どこから読めばいいか」が分かる順番にすることを優先しました。

プレビューではよさそうに見えても、実際に公開して確認すると、パソコンのメニューが途中で折り返して2段になっていました。

そこで、4つのメニューが1行に収まるように幅を調整しました。スマートフォンでもカードが縦に並び、文字がはみ出していないか確認しました。

一度で完成したわけではありません。公開後に見つけた違和感を直すところまでが、今回の作業でした。

AIは、構成を考えたり、デザインの方向を整理したり、設定を手伝ったりするところまで進めてくれました。

でも、「この言い方は私らしいか」「読んだ人が迷わないか」「実際のサイトの画面で崩れていないか」を決めるのは自分です。

AIが全部やってくれるというより、分からないことを一緒に整理し、試して、最後に自分で確かめる。今回もそんな進め方になりました。

自分で一からコードを書けるようになったわけではありません。それでも、AIと相談しながら「こうしたい」を形にし、公開後まで確認できるようになりました。

以前は、サイトを作り直すなんて面倒で難しそうだと思っていました。今回は、内容を整理するところから始め、少しずつ進めたことで公開までたどり着けました。

初めてAIを使う人にとって、最初から全部分かる必要はないと思います。分からないことをそのまま伝えて、一つずつ確認する。それでも、できることは少しずつ増えていきます。

これからも、「AIが分かる人」ではなく少し先に試している人として、できたことも失敗したことも正直に残していきます。