AIツールを活用してWEBページを制作してみる

2023-08-04AI, ChatGPT, CSS, HTML, フロントエンド

ChatGPTやMidjourneyなどのAIツールは、私たちの仕事に大きな影響を及ぼしています。
特に画像制作やWEB制作の分野では、多くのAIツールが新規参入し、一部では「AIに仕事を奪われる」という意見も耳にします。

しかし、AIを単なる敵としてみるのではなく、働き手としてのパートナーと認識することで、我々のクリエイティビティを増幅させ、効率を向上させることも十分可能だと私は考えています。

というわけで、この記事では、AIツールを駆使して「レコチョクマ」の紹介ページを制作してみたいと思います。さまざまなツールが制作プロセスをどのようにサポートし、クリエイティビティを引き出し、時間を節約するのか、一緒に探究していきましょう。

ChatGPTでサイト構成を検討する

まずは、WEBページの構成をChatGPTに依頼してみましょう。
WEBページ制作の基本要素はもちろん、「レコチョクマ」の魅力を引き立てるコンテンツも提案してくれます。

Perplexity AIでサイトに必要な情報を収集する

今回は、弊社の人気マスコット「レコチョクマ」の紹介ページをサンプルとして作成することにしました。
そのため、ChatGPTが提案したサイト構成に適した情報を、Perplexity AI（対話型のAI検索エンジン）を用いて調査します。
ChatGPTが考案したストーリーセクションや特技・能力セクションに該当する情報は見つからなかったため、その他の項目を用いてサイトを組み立てることにします。

MidjourneyやSeaArtでサイトに必要な画像を作成する

Perplexity AIを用いて「レコチョクマ」の見た目についての情報を集め、それを英語に翻訳しました。
その訳文をMidjourneyのプロンプトとして活用することにしました。

左の画像は公式のレコチョクマ、一方、右の画像はMidjourneyが生成したレコチョクマです。
生み出されたビジュアルが公式版とは大きく異なるため、SeaArtのコントロールネットを使用して、レコチョクマの画像をもとに、よりリアルなイラストを作成することに決めました。

SeaArtのコントロールネットを使用して、公式の画像をもとに新たな画像を生成しました。
左の画像は公式のレコチョクマで、右の画像はSeaArtによって生成されたレコチョクマです。
白い熊のはずが、結果的には黒い熊になってしまいました。プロンプトを工夫すれば、より原作に近いレコチョクマの再現が可能でしょう。
しかし、今回の目的はWEBページのサンプル作成であるため、この画像を使用してみます。

image to imageで画像を生成できるツールは他にも多く存在しますが、私がSeaArtを選んだ理由は、コントロールネット機能が提供されているからです。コントロールネット機能を活用すれば、手書き風のイラストからリアルな画像を簡単に生成することができます。サイト上にギャラリーセクションを設けることもあり、画像はリッチな仕上がりにしたかったため、この機能を利用してみました。

Framerでサイトのデザインを作成する

FramerはAIを活用したWEBサイトデザイン作成機能を提供しています。
ChatGPTの提案に基づくサイト構成を文章に落とし込み、それを入力するだけで見事なデザインが生成されました。
デスクトップ、タブレット、スマートフォンというレスポンシブ対応済のデザインがあっという間に自動生成され、その効率の良さには驚かされます。
FigmaのプラグインであるWireframe Designerも類似の機能を提供していますが、Framerの方が指示文に基づくデザイン生成のバリエーションがより豊富に感じたので、今回はFramerを利用することにしました。

GitHub Copilotの支援を受けて実装する

それでは、Framerで作成したデザインを具体的なコードに落とし込んでみましょう。
コメントを書けば、GitHub Copilotがコード提案を行ってくれます。
但し、指示を詳細に記述すると意図した通りのデザインが得られないことがあるため、GitHub CopilotにはHTML・CSSの基本的な構造を作ってもらいつつ、細かな調整は自分自身で行う必要があります。

完成しました！

検索エンジンやTwitter、YouTubeなどでAIツールを探すことに少々時間がかかりましたが、その部分を除けば一日でサイトの制作を終えることができました。
コード品質を向上させたり、我々のコーディング規約に適合させるためには、さらに時間を要しますが、とりあえず完成ですね。

まとめ（感想）

専門的なスキルが不足している方や、素早くそれなりの作品を作りたいときには、AIツールの活用が理想的だと思います。私自身、デザインの経験がほとんどないにもかかわらず、FramerのAIジェネレータの助けを借りることで、驚くほど短時間でデザインを作成することができました。
より高度な技術やユーザーの特定の要求に応える独自性のある作品を生み出すためには、AIツールで生成された素材に手を加えることが必要となります。この点では、一定レベルの専門知識や技術が必要となるでしょう。
AIの出力品質は、提供する指示文（プロンプト）に大きく影響されます。しかし、未熟な段階では最適な指示文を見つけることに時間がかかることがあり、またその最適な指示文が具体的に何であるかが明確でないという課題も存在します。
私自身、まだAIの特性や最適な指示文（プロンプト）を完全に理解し、利用することができていないと感じました。これらのサービスを使い込み、意図した結果を得られるように続けて努力していきたいと思います。