趣味のホームページを、仕事用のサイトに作り直すことにした
もともと私のWebサイトは、趣味で制作している音楽や映像、創作作品などを公開するための場所だった。
ところが、AI動画制作とWebサイトの修理屋さんの仕事を始めたことで、サイトの役割を見直すことになった。
せっかく自分のWebサイトがあるのだから、作品を公開するだけでなく、制作実績を紹介したり、仕事の依頼を受け付けたりできる場所にしたい。
そう考えて、趣味のサイトを営業用のサイトへとリニューアルすることにした。
そこで今回、制作の相談相手として活用したのがChatGPTだ。
結果から言うと、昔からHTMLやCSSを触ってきた人間として、なかなか感動する体験になった。
今回は、ChatGPTと一緒に自分のWebサイトを作り直したときの話を書いてみようと思う。
ChatGPTのChat機能だけでWebサイトを作ってみた
まずはブランドカラーを決める
最初に取りかかったのは、サイトのデザインである。
私はWebデザイナーではない。デザインについても、独学で勉強している最中だ。
直近で受講したデザイン講座では、こんなことが書かれていた。
「企業のブランドカラーを3〜4色に決めてから作り始めよう」
……そんなことを言われても、何色から決めればいいのだろう？
そこでChatGPTに相談してみた。
「Webサイトを作るにあたってブランドカラーを決めておこうと思うんだけど、どうしよう？ あ、ちなみにアイコンだけは趣味サイトの時代から使っていたものを使いたいんよね」
そう伝えて、アイコン画像を添付した。
するとChatGPTは、そのアイコンをもとに、あっという間にブランドカラーとして使う4色を提案してくれた。
なるほど。既存のアイコンを基準にすれば、サイト全体の色にも統一感を持たせられる。
こうして、最初の課題だったブランドカラーが決まった。
HTML・CSSを丸ごと生成してもらう
さて、Webサイト全体のカラーは決まったものの、次の問題がある。
いかんせん、私には古いデザインのコーディングしか思いつかない。
そこで、今度はChatGPTにこんな依頼をしてみた。
「これが今のサイトのトップなんだよね。さっき決めた色を使って、イマドキっぽいデザインの営業サイトにしたい。チャッピちゃん（ChatGPTのこと）のセンスで、骨組みとデザインを作って。CSS＆HTMLを全てコピペできる状態にして、ここにテキストで出して」
このとき、趣味サイトのトップページのスクリーンショットと、既存のHTML・CSSのコードも一緒に渡した。
すると、ほんの数秒だったと思う。
ChatGPTの画面に、HTMLとCSSのコードが次々と書き出された。
私はそれをそのままコピーし、WordPressの固定ページに貼り付けた。
下書き保存して、プレビューを開いてみる。
そこには、Webサイトの骨組みとデザインが、ほぼ出来上がっていた。
しかも、文章まで自動で生成されている。
……えっ、もうここまでできたの？
昔は、ここまで作るだけでも、どれだけの知識と時間が必要だったかご存じだろうか？
昔からHTML・CSSを触ってきた人間にとって、Web制作は地道な作業だった
私は以前からHTMLやCSSなどを触ってきた。
昔のホームページ制作といえば、タグを書いて、表示を確認して、思いどおりにならなければコードを修正して……という作業の繰り返しだった。
ちょっとしたレイアウトの調整でも、原因を調べたり、何度も書き直したりすることがある。
もちろん、それはそれで楽しい。
自分で書いたコードがブラウザ上で形になったときの達成感は、Web制作の面白さのひとつだと思う。
ただ、Webサイトを作ること自体が目的ならともかく、今回の目的は仕事用のサイトを完成させることだ。
サイトの構成を考え、文章を用意し、デザインを調整し、動作確認もする。
やることは山ほどある。
正直なところ、できるだけ面倒な作業は減らしたい。
そう考えてChatGPTに相談してみたら、最初のデザインと骨組みが、あっという間に出来上がってしまった。
AIの進歩には、素直に感動した。
今ならWeb制作の専門知識が少ない人でも、AIに相談しながらサイト制作に挑戦しやすくなっている。
今回はChatGPTのChat機能を使って制作したが、Web上の操作を伴う作業に対応したWorkを活用すれば、さらに一部の工程を省力化できる可能性もある。
とはいえ、Web制作の知識が完全に不要になったわけではない。
むしろ、ある程度の知識があるからこそ、AIの提案を理解したり、問題点に気づいたりできる部分もある。
それでも、制作の進め方そのものが変わってきたことを実感した。
ChatGPTにすべてを任せるのは、まだ早い
さて、Webサイト制作の再開である。
トップページに続き、その他の固定ページも同じ要領で、どんどん骨組みを作っていく。
事業内容やサービス、プロフィールなどは以前からChatGPTに話していたので、その情報も活用しながら、デザインも文章もサクサクと出来上がっていった。
ところが、ある程度できてくると、どこか物足りなさを感じ始めた。
キャッチコピーやサービスの説明が弱い
まず、キャッチコピーが弱い。
そして肝心のサービス内容も、確かに私のやっていることを無難に説明してくれているものの、一番の売りが書かれていなかったり、ページの後半に配置されていたりする。
プロフィール文なども同様である。
間違っているわけではない。
しかし、営業サイトとして訪問者に何を伝えたいのか、どこを強調するべきなのかという点では、まだ不十分だった。
デザインにも改善したい部分があった
デザインもそうである。
ChatGPTが最初に作ったトップページには、Instagramへのリンクしかなかった。
AI動画制作がサービスのひとつなのだから、サムネイルだけでもトップページに置かなければ、訪問者はどのような映像を制作しているのかイメージしにくいだろう。
文章もデザインも、それなりに整っている。
しかし、私が何を一番伝えたいのかという部分は、必ずしも反映されていなかった。
そこで、ChatGPTが最初に生成したものをそのまま使うのではなく、
「もっとこうしたい」
「ここはこうしたい」
と、会話しながら整理して作り変えていった。
ChatGPTは私の提案を取り入れてくれたり、アイデアをさらに洗練させる提案をしてくれたりした。
一人で黙々と作業するのではなく、疑問や改善案が出てきたら、その場でAIに相談する。
この進め方が、想像以上に便利だった。
AIに任せれば、何でも自動で完成するわけではない
もちろん、ChatGPTに依頼すれば、すべてが自動的に完璧な状態で完成するわけではない。
今回のようにChat機能を使った制作では、実際のWordPress上で設定を変更したり、ページを編集したり、表示を確認したりする作業は自分で行う必要があった。
AIから提案された内容が、自分のサイトに合っているかどうかも判断しなければならない。
今回の制作でも、ChatGPTは相談相手であり、最終的な判断は自分で行った。
ただ、何か問題が発生したときに、一人で原因を探し続けなくてもいいというのは心強かった。
作業の補助役としてのAI
従来なら、何か分からないことがあれば検索エンジンで調べ、複数のページを読み、自分の環境に合う情報を探す必要があった。
しかし、今はAIがある。
AIを高機能な検索エンジンのように捉える人もいるかもしれないが、私にとっては、それ以上の存在だ。
情報を探すだけでなく、コードを生成したり、文章を考えたり、こちらの要望に合わせて修正案を出したりしてくれる。
人間の専門家と同じように正確な判断ができるわけではないが、作業の補助役として、とても便利である。
例えば、ChatGPTのChat機能なら、自分が何をしたいのかを会話形式で伝えられる。
「こういうサイトにしたい」
「この部分を変更したい」
「ここはどうすればいい？」
そんなふうに質問しながら、作業を進めていける。
一度で思いどおりにならなくても、続けて状況を説明すればいい。
もちろん、AIの回答が必ず正しいわけではないし、提案された内容をそのまま採用できるとは限らない。
それでも、検索して、情報を探して、試して……という作業の一部を省略できた。
今回の私の場合、作業時間の短縮につながっただけでなく、何より面倒なことが格段に減ったのである。
Chatで相談しながら作ったWebサイトを、Workで自動チェックする
今回のWebサイトの大改造を一通り終え、最終チェックには初めてChatGPTのWorkを使ってみた。
文章やコードなど、人の手で作った部分もあるため、今回はサイトの検査をWorkに依頼し、修正箇所はChat機能で相談しながら直していくことにした。
なお、Workは対応するWebサイト上で操作を行えるため、環境や権限、作業内容によっては修正作業まで依頼することもできる。
ただし、公開サイトを直接変更する場合は、バックアップや変更内容の確認が欠かせない。
今回は、あくまで検査と修正を分ける方針にした。
Workで見つかった問題点
Workに新しいサイトをチェックしてもらった結果、いくつかの改善点が見つかった。
特に多かったのは、WordPressのテーマであるCocoonと、SEO対策用プラグインで設定が重複していた部分だ。
また、明らかにリンクが設定されているべき文章なのに、リンクが機能していない箇所なども見つけてもらうことができた。
自分では一通り確認したつもりでも、見落としはあるものだ。
AIに別の視点からチェックしてもらうことで、そうした問題を発見できたのはありがたかった。
SEO・AI検索への対策も見直した
今回のリニューアルでは、従来のSEO対策に加え、AI検索やAIによる情報引用を意識したAIO・LLMO・GEOと呼ばれる施策についても検討した。
Workによるチェック結果を参考にしながら、設定の重複やサイト構成などを見直し、基本的な整備を進めることができた。
もちろん、これだけで検索順位が上がったり、AIの回答に引用されやすくなったりすることが保証されるわけではない。
実際の効果については、今後の運用を通じて確認していく必要がある。
また、Workで細かな部分までチェックできることが分かったので、不要なプラグインの整理も行った。
こうして、Chat機能で相談しながら制作し、Workで検査し、再びChat機能で修正するという流れで、サイトを仕上げていった。
趣味サイトから、AI MUTANT STUDIOの営業サイトへ
こうして、趣味の作品を公開するためのサイトは、AI MUTANT STUDIOの営業サイトへと生まれ変わった。
現在は、AI動画制作やWebサイト関連のサービスを紹介し、制作実績やお問い合わせへの導線を設けている。
一方で、これまでの趣味や創作活動を切り捨てたわけではない。
AI音楽やMV、オリジナル作品なども、引き続きサイト内で公開している。
私にとって、趣味の創作活動と仕事は完全に別のものではない。
趣味でAIを触っているうちに新しい技術を発見したり、遊びながら試していたことが仕事につながったりする。
そうした活動を、ひとつのWebサイトにまとめることができた。
もちろん、サイトは一度完成すれば終わりというものでもない。
今後も作品や制作実績を追加しながら、少しずつ育てていくつもりだ。
昔のWeb制作を知っているからこそ、AIの進化が面白い
今回のリニューアルを通じて感じたのは、AIによってWeb制作のハードルが変わりつつあるということだ。
面倒な作業の一部をAIに相談できることで、自分が本来やりたかったことに集中しやすくなる。
私の場合、それはAI音楽や映像などの創作活動であり、仕事としてのAI動画制作でもある。
Webサイトを作るためだけに時間を使うのではなく、Webサイトを活用して何をするのか。
そちらに時間を使えるようになるのは、ありがたいことだ。
そして、以前からHTMLやCSSを触ってきた経験も、決して無駄にはなっていない。
AIが生成したコードを見て、何をしているのか理解できること。
表示がおかしくなったときに、原因の見当をつけられること。
提案されたデザインや構成を、自分なりに評価できること。
これまでの経験があるからこそ、AIをより便利に活用できている部分もあると感じた。
AIが人間の知識をすべて置き換えるというよりも、これまで培ってきた知識や経験に、新しい道具が加わった感覚に近い。
これからもAIと一緒に、いろいろ試していきたい
今回、ChatGPTと一緒にWebサイトをリニューアルしてみて、AIをWeb制作に活用する面白さを改めて感じた。
今後は、自分のサイトだけでなく、クライアント向けのWeb制作にもAIを活用していきたいと考えている。
例えば、サイトを制作する前にAIでデザインのラフ案を作り、完成イメージを共有する。
そんな使い方もできそうだ。
AIツールは日々進化している。
今日できなかったことが、次に試したときにはできるようになっているかもしれない。
だからこそ、実際に触って、試して、失敗して、また試してみる。
そんな実験をこれからも続けていきたい。
何か問題が発生したときに、一人で原因を探し続けなくてもいいというのは心強い。
AIは人間ではないので、面倒くさそうな態度を取らず、何度でも質問に付き合ってくれるところも私は好きだ。
AIに相談し、提案を確認し、必要なら修正する。
この繰り返しによって、今回のWebサイトを作り上げることができた。
ダイヤルアップ時代からインターネットに触れてきた人間としては、Web制作がここまで変化してきたことに、驚きと感動を覚える。
そして、これからどのような方向に進化していくのかも楽しみだ。
AIの進歩は、ときに人間の予想とは違う方向へ向かう。
それもまた、面白いのである。
AI MUTANT STUDIO
AI動画制作・AI音楽・映像制作・Webサイト関連の制作活動を行っています。
AI動画制作やWebサイトの修理・制作に関するご相談は、お問い合わせページからお気軽にどうぞ。
制作実績や創作作品については、当サイト内の各ページをご覧ください。
コメント