採用ページを作る
本日AIツールのclaude4.5がリリースされたので早速実務で使ってみました。直近仕事で社内で採用ページを作らないといけなかったので早速claude codeで実装してみました。AIで実装を進めるための手順はざっと以下のようなものになります。
- デザインを作る
- デザインを言語化する
- 言語で実装する
- 素材を集める
- 調整する
まず、1.に関してですが、figmaなどのデザインツールでゼロから作ってもいいと思いますし、ピンタレストや画像検索などでいいと思ったデザインの表現を自分なりに工夫して作りこむのでもいいと思います。
デザインを言語化する
デザイン画像ができたら、それをOpen AI社のGPT5に流し込みます。現状僕が把握している中では画像から正確に情報を認識して構造化された言語をアウトプットするのはGPT5が今は強いと感じています。僕はプロンプトが下手ですが、デザイン画像を添付して、このようなテキストを投げました。
「このデザインのすべてをclaude codeが完全に理解して再現できるような指示を書いてください。日本人向けのサイトでAIっぽさが出ないようにしてください。モバイル対応で、アニメーションもあり、完全に再現することを目的とします。」
ここから吐き出されたテキストが2.にあたります。AIはAIが理解しやすい文章を作るのが得意ですので、本番実装用のプロンプトの作成はAIに任せます。
言語で実装する
次は、GPTからAnthropic社のClaude codeに移動します。GPT5が作ったプロンプトをCalude Codeに流し込みます。Calude Codeは画像から実装することを得意としませんが、テキストから細かいニュアンスを読み取って非常に高度でレベルの高言実装をしてくれます。この時点で、ベータ版のサイトが出来上がります。
そして、4.です。ここからは素材の画像を生成するのですが、画像生成で一番強いのはGoogleのGeminiです。GPTよりも高速に高度な画像を生成します。特に先月リリースされたNano-Bananaは背景の置き換えなども簡単にできるので、Webサイト作成では使えると思います。
誰でも簡単に作れる
調整含めて4時間くらいでTOPページ含む10画面ほどができました。一点、生成AIで作られた画像を商用利用するのは気を付けたほうがいいかもしれません。今回はイメージとして使っただけなので、本番利用ではAIが生成した画像は使わない予定です。
今回AIで実装してみて、もはや「自分いらんやん」という感想です。今は若干プロンプトやAIに関するキャッチアップが必要ですが、これからそれもいらなくなると思うので、あっという間に誰でも簡単に作れるようになるでしょう。
