対話型生成AIで自作サイト作りが捗る

わたしはウェブサイト制作が仕事としてメジャーなものになる前から自力でホームページを立ち上げていた時代の人間で、大学でも多少のプログラミングは勉強したものの、Webのコーディングは就職してから必要に迫られて独学で身につけました。

現代ではコードを知らなくても作れるようなサイトがありますが、このサイトはwordpress というCMSで構築しています。おそらくノーコード制作のサイトでもコーディングの余地はあるんだと思いますが、わたしはwordpressのテンプレートを自作するくらいのところからやってるもんで、今のブロックエディタで構築する仕組みはもはやノーコードと言っても過言ではない感じで使っています。

コード検索しないでGeminiに聞いてみた

昔は、wordpressのテンプレートを直接触ってコードを挿入したりしていましたが、ブロックエディタになってからは、コードの挿入がちょっと面倒だな…と思っていました。わたしが知っていたコード追記方法は、アクションフックと言って、既存のテンプレートの中にある幾つかのポイントに自分の書いたコードが入るように指示を書くもの。これのやり方も、あんまりマスターできてるとは言えないので、毎回調べて「そうそう!」とか思いながらやるんですが、今日は軽い気持ちで Google の生成AI「Gemini」に

こういうふうに変更したい場合のアクションフックのやり方を教えて!

と尋ねてみました。すると、Geminiから、希望のコードを希望の場所に挿入するショートコードを生成してブロックエディタ上で追記する方法を教えてもらいました。

な!なるほど!!!

スニペットのプラグインは一応導入していたけど、あんまり上手く使えてませんでしたが、今後は使っていけそうです。管理もしやすい!

その他にも、検索結果のソートのかけ方や、希望の条件のカテゴリーを一覧させる、などのやり方を教えてもらいました。ありがたや・・・。

やってる事自体は今までと変わらないけど断然早くなる!

自分で検索したり、試しながら実装していくことと、Geminiで実装内容を生成することはやってる事自体は「自分の希望するコードを作ってサイトに実装する」ということで同じなのですが、前者はどうしても自分の試行錯誤の時間がめちゃくちゃ長くなってしまうというかなり強めの問題点がありました。Gemini の場合、わたしが聞くくらいの表示の仕方や表面的なデザイン周りのコードはほぼ間違いなく書いてくれるので自分で知ってる内容と、検索した内容を切り貼りしていた頃より間違いがなくて回り道も少なくなってると思います。

想定の倍くらいの修正が、一つの作業で想定していた修正時間内で完了したのでありがたかったです。

全体の構造がわかってないとうまく質問できないかも

質問しながら作っていけるなら簡単なのか?と言われると意外とそうでもなくて。アプリやウェブサイトがどういう構造のものなのか、どういう目的ならできそうか、逆に向いてないことはなに?などの全体像がわかっていない場合は、なにから質問すればいいかわからないですよね。だから誰でも簡単に作れる時代、というよりは、出来ることはだいたいわかっていて、やりたいこともあるんだけど、制作スキルがない!みたいな人が、そこを補う生成AIと出会うとかなりうれしい結果になるってことだろうなと感じてます。

今後は構造を理解するための小さな制作作業がなくなっていくので、そこを理解できるようになるための下積み的な時間を若い人が詰めなくなるのかな・・・とちょっと思ってしまいますけど…。でもわたしがデザインをはじめた頃は、イラレ上でデザインスケッチをするような若者が増えてるから、全体のデザイン能力が落ちていくだろう。。。と嘆かれていたのですが、今やそんなこと言う人いないですからね。

まわりにある技術を使って、社会が求めるアウトプットが作れるならそれでよいのかもなと思ったりしました。web制作を学んでる人たちも、Geminiを先生に、コーディングを学ぶと結構いいかもしれないなと感じています。

年に数回活動報告やイラストエッセイなどを入れたニュースレターをお届けします。

登録は sahchas.jp の申しこみページがひらきます