こんにちは。MIYAMOTOです。
最近、ChatGPTをはじめとした生成AIの話題について耳にする機会が増えたと感じる方も多いのではないでしょうか。個人的にはAIと聞くと、ほんの数年前まではSF映画に出てくるような最先端の技術というイメージでしたが、現在は大学生などの若い世代の間でも、私生活で活用するほどの身近な存在になりつつあります。また、私生活だけでなく、様々な会社で本格的に業務に導入されている事例も増えてきています。このようにAI技術が自分にとっても身近な存在になってきたと感じる一方で、仕事の現場ではうまく活用できていないこともひしひしと感じています。
そこで今回は「ホームページ制作」において、AIをどう活用できるのかを自分なりに調べてみたのでご紹介したいと思います。
1. ダミー画像の生成
ホームページのデザインを作成する際、イメージ通りの写真が見つからない場合がありますが、そんなときに便利なのがAIによる画像生成です。
AIで作った画像をデザインに組み込むことで、完成形のイメージをより具体的にお客様に伝えることができますし、撮影を行う際にどんな写真を用意すればよいかが明確になるため、準備がスムーズになります。
それでは、実際に試してみましょう。
今回は、無料で使えるグラフィックデザインツール「Canva（キャンバ）」（https://www.canva.com/）を使ってみたいと思います。
こちらは「オフィスで日本人の男女3人の会社員が談笑している様子」と入力して生成した画像です。
一度に4枚の画像が生成されるため、その中から最も適したものを選ぶことができます。
実際の素材として使うには違和感がありますが、構図や雰囲気などのデザインの大まかなイメージを伝えるためのダミー画像としては、十分に活用できそうです。
2. 画像の背景透過・加工
ホームページ制作の過程で、特定の画像から人物や商品の写真を一部分だけ切り抜いてデザインに使いたい場面はよくありますよね。
そんなときも、AIを利用することで一瞬で背景のみを削除することができます。
さらに、写真の背景がデザインのイメージに合わない場合でも、AIを使って新たに背景を生成することができるので、よりイメージに近い画像を簡単に作成できます。
こちらの作業は「Photoroom（フォトルーム）」（https://www.photoroom.com/ja）というAIツールを使って試してみたいと思います。
「写真を選択」で画像をアップロードするだけで、一瞬で背景の透過が完了しました。明るさや彩度などの調整もこのまま簡単に行えますし、背景の変更も可能です。
無料版では画像を1枚ずつしか処理できませんが、有料版に移行すると複数の画像をまとめて一括処理できるようです。
例えば、ECサイトの商品写真を一度に加工したいときなどに、非常に便利な機能だと思いました。
3. コードの解説
コーディングを行う際、他のサイトを参考にすることはよくありますが、書かれているコードの意味がすぐに理解できないとき、AIを活用することでコードの意味を分かりやすく解説してもらうことができます。
コードの解説には「ChatGPT」（https://chatgpt.com/）を使用してみたいと思います。
こちらはjQueryのコードを貼り付け、「以下はjQueryのコードです。意味を解説してください。」と入力した例です。
構文を覚えていない場合、書籍やネットで一つ一つ調べると多くの時間消費してしまいますが、ChatGPTを活用すれば一行ずつ丁寧にわかりやすく解説してくれるため、時間を大幅に節約できると感じました。
4. コードの作成・修正
実装したい処理があっても「どうやってコーディングすればよいのか分からない」と悩むことや、きちんと書いたつもりでも「思い通りに動かない」という状況はよくありますよね。そんなときにもAIは有効です。
今回は、先ほど解説してもらったコードに対して「〇〇〇〇〇という処理を実装したいので修正してください」と入力してみました。
修正したコードがすぐに表示され、修正のポイントなどを分かりやすく解説してくれます。
もちろん、与えた情報だけで必ず正解のコードを提示してくれるわけではありません。しかし、一人で悩み続けるよりも、ChatGPTを壁打ちの相手にしながらヒントを得て進める方が、ずっと効率的にコーディングを進められると感じました。
ただ、AIによって生成されたコードを何も考えずに使用すると、意図しない動作を引き起こす可能性があるため、AIはあくまで補助的な役割に留め、自分でしっかりと理解してから使用する事が大切だと思いました。
5. ライティングの補助
ホームページ制作に欠かせない「ライティング」もAIを活用することで、読みやすく魅力的な文章を短時間で作成することができます。
ざっくりと文章を考え、AIに「この文章を整えてください。」などと指示を出すと、分かりやすい文章に整えてくれますし、希望のトーン（カジュアル/ビジネスなど）に合わせて調整もしてくれるため、WEBサイト全体の文章に統一感を持たせる事も可能です。
6. まとめ
今回はホームページ制作の現場でAIをどのように活用できるのか、実際にツールを使いながらご紹介しました。
画像の加工やコードの修正、ライティングなど、すぐに実践できそうなものが多く、私もさっそく仕事で使ってみようと思いました。
「これ使えそうかも！」と思ったものがあれば、皆さんもぜひ気軽に試してみてください！
