ファンリピート社のブログFR note

AIに画像生成や文章作成を任せてWEBサイトを制作してみた

最近HTML/CSSの学習にあたってWEBサイトを作成しました。その時にAIツールを活用したら便利だったのでそちらを紹介します。

今回はChatGPTはもちろん、それ以外のAIツールを利用してWEBサイト制作を進めてみました。

目次
「システムを短納期かつ低予算で作成したい」
ローコード開発に興味がある

使ったツール

使ったツールは下記です。

デザイン作成ColorMagic
文章作成Copy.ai
ChatGPT
画像生成Playground AI

制作物のイメージ

今回制作するサイトは下記の要件です。

  • 架空のブックカフェのWEBサイト
  • デザイン制作〜コーディングまでを行う
  • メインゴール
    • カフェのお客さんを増やす
  • サブゴール
    • どんなお店か、どんなメニューがあるか知ってもらう
  • ターゲット
    • 女性、20〜30代、読書好き、珈琲好き

制作過程

下記でツールの紹介と実際にやったことを解説していきます。

ColorMagicでサイトの色を決める

ColorMagicのTOPページ
https://colormagic.app/

ColorMagicは、AIでオリジナルのカラーパレットをつくれるサービスです。

雰囲気やイメージのキーワードから、今すぐ使える配色を簡単に生成できます。

デザイン制作に際し、「ColorMagic」というツールを使いました。サイトで使用するカラーパレットをAIに考えてもらいました。

「パレットをつくる」をクリックすると下記のような画面になります。

生成したいカラーパレットのイメージを単語で入力しましょう。試しに「カフェ、本、落ち着いている」と入力します。

ColorMagicの使いかた

少し待つと下記のような画面に切り替わり、カラーパレットが表示されます。

ColorMagicの結果

入力した単語を連想させるような色使いで、統一感があり綺麗ですね。画面下の「同じワードで再生成」から別のカラーパレットを出力させることができます。

生成を試すだけであれば登録不要で利用できますが、無料会員に登録することで毎日5回まで生成できたり、色の調整やお気に入り登録が可能です。

何度か生成して出力されたカラーパレットをFigmaで整理します。

ColorMagicの色をFigmaで整理

並べてみると微妙な違いがあってどれも捨て難いですが、少し混ぜて下記のカラーパレットでFixしたいと思います。

Fixしたカラーパレット

デザイナーさんでないと、カラー選定は難しいものかと思います。サイト制作となれば数色必要になるので、他の色との兼ね合いが悪いとサイトの見栄えが悪くなってしまいかねません。

しかし「ColorMagic」を使えば一瞬で素敵なカラーパレットを出力してくれるのでとても便利ですね!

もちろんサイト制作以外でも使えるのでぜひ試してみてください。

Copy.aiでキャッチコピーを作成

次にサイトのキャッチコピーを考えましょう。使うのは下記です。

Copy.aiのTOPページ
https://app.copy.ai/

「Copy.ai」は文章の作成に特化したツールで、ブログ、メール、キャッチコピー、ショートストーリーや歌詞まであらゆる文章を作成することが可能です。

こちらを使ってサイトに表示させるブックカフェのキャッチコピーを作成します。

使い方は簡単です。アカウント登録後、「Create New Project」をクリックします。

Copy.aiのhome

するとチャットのような画面に遷移します。ここでプロンプトを投げることができます。

Copy.aiの制作ページ

下記のように投げてみました。

Copy.aiの出力1

いい感じですが、もう少し試してみましょう。今後はプロンプトを整理して投げてみます。

Copy.aiの出力2

一言でシンプルにまとめてくれました。採用です。ついでに簡単な紹介文も考えてもらいます。

Copy.aiの出力3
Copy.aiの出力4

ちょっと誤字がありますが内容としては問題ないのでこちらも調整して使いたいと思います。

ChatGPTでメニューの説明や本のあらすじを作成

今度はWEBサイト上で掲載するメニューや書籍についての内容をChatGPTを活用して作成していきます。

ChatGTPのTOP
https://openai.com/blog/chatgpt

FRnoteでは幾度も登場しているみんな大好きChatGPTです。もちろん今回も活用します。

店名

店名を考えてもらいます。下記のプロンプトを投げてみます。

ーーーーーーーーーーーー

下記の条件を踏まえてカフェの店名を日本語で10個あげてください。

##条件

・珈琲を飲みながら本が読める

・本格的なコーヒーが味わえる

・日差しが気持ちの良い店内

・20〜30代の女性客が多い店内

・店名に「珈琲」を入れる

ーーーーーーーーーーーー

ChatGPTの出力1

「珈琲店の書斎」が、個人的にとても気に入りました。いい響きです。ですがもう少しアイデアを頂きましょう。

ChatGPTの出力2

ちょっと長くなってしまいましたね。珈琲店の書斎が気に入ったので、これに近いものを出してもらいます。

ChatGPTの出力3

どうでしょう。やっぱり珈琲店の書斎という店名がしっくりきます。

店名は珈琲店の書斎に決定です。

※この後も少し試しましたが、好きなものがなかったので割愛します。

営業時間・メニュー

さらにここからお店の情報やメニュー、取り扱っている書籍についても詳細を考えてもらいます。

カフェの営業時間と定休日はいつが良いですか?

ChatGPTの出力4

喫茶メニューはどんなものがありますか?

ChatGPTの出力5

「店主こだわりの珈琲メニュー」この文章に添える一言を考えてください。メニューに記載します。

ChatGPTの出力6

内容はもちろん、長さの指定についてもバッチリです!

次にChatGPTが考えてくれたメニューをベースに、各メニューの説明文を考えてもらいます。

ChatGPTの出力7

コーヒー以外のフードメニューについてもアイデアをもらいましょう。

ChatGPTの出力8

「女性に人気の」という条件を与えました。

この中から「アボカドトースト」「チキンカツサンドイッチ」「ベリータルト」の3つをピックアップしたいと思います。

チキンカツサンドの説明文をお願いしてみます。

ChatGPTの出力9

美味しそうな説明文が完成しました。

ベリータルトはフレッシュベリータルトにして、「ランチタイム」という単語を避けてもらいます。

ChatGPTの出力10

このような感じで、コーヒー以外のドリンクメニューなども考えてもらいました。

書籍の紹介

最後にカフェに置いてある書籍についても考えてもらいます。

ChatGPTの出力11

実在する書籍が挙げられました。せっかくなので書籍や筆者、あらすじもAIに考えさせたいと思います。

ChatGPTの出力12

「夢の世界への旅 – アリス・ロバーツ」、「カフェで学ぶ人生哲学 – ソフィー・ミラー」、「トラブルシューターの手記 – ジェイソン・スミス」の3冊を採用します。

(一応調べましたがそれらしき書籍は見つかりませんでした)

ChatGPTの出力13
ChatGPTの出力14
ChatGPTの出力15

どれも架空の内容ですが、面白そうですね。どんな本なのか気になります。こちらも軽く修正して採用します。

Playground AIで店内・メニューの画像を作成

店内やメニューの画像もAIにお任せします。今回はPlayground AIを使用します。

Playground AIのTOP
https://playgroundai.com/

Playground AIは画像生成のAIツールです。アカウント登録後、画面右上の「Create」からすぐに作成することができます。

このツールの良いところは無料で1000枚/日、生成できて更に商用利用も可能という点です。

早速作成してみましょう。

画面左側の赤枠にプロンプトを入力します。英語でカンマ区切りで入力してください。

右側のModelではAIのモデルを、Image Dimensionsでは画像サイズを選択できます。

また右のサイドバーをスクロールするとNumber of Imagesがあり、枚数を1〜4枚選択できます。

Playground AIのChat画面

下記のプロンプトを投げてみます。モデルはStable Diffusion 1.5で、4枚生成にします。

プロンプトを入力したら「Generate」をクリックします。

Relaxed cafe interior, counter, sofa seating, coffee, book, slightly dark, realistic photo, clear and sharp

(カフェのインテリア、カウンター、ソファ席、コーヒー、本、少し暗い、リアルな写真、クリアでシャープな写真)

Playground AIの出力結果

実際に生成された画像は下記です。

Playground AIで実際に出力した画像

「realistic photo」のプロンプトのおかげか、かなり写真っぽくなっています。

コーヒーを足してみます。

Relaxed cafe interior, book and coffee desk, slightly dark, realistic photo, clear and sharp(リラックスしたカフェのインテリア、本とコーヒーデスク、やや暗い、リアルな写真、クリアでシャープな写真)

Playground AIの出力結果2
Playground AIで実際に出力した画像2

いい仕上がりです。これをひたすら繰り返していきます。

モデルはStable Diffusion 1.5以外にも、Stable Diffusion 2.1、DELL-2、Playground v1などが選択でき、Filterをかけて好みの画像に近づけることもできます。

Playground AIのFilter

また、TOPページから他の人が作成した画像を見ることができ、そのようなプロンプト、モデルなどの設定で生成したかを確認できます。

生成したい画像のイメージに近い画像がある際は参考にすると良いでしょう。

Playground AIで他の人が出力した画像
Playground AIで他の人が出力した画像のプロンプト

無料でハイクオリティの画像が1日1000枚まで生成できるのは本当にすごいです。ただ、画像のクオリティについてはMidjourneyの方が高い印象です。

このような感じでカフェで使用する画像をたくさん生成していきます。

実際のサイト

これまでAIに考えてもらった内容をベースにデザイン・コーディングを行い、サイト「珈琲店の書斎」を作成してみました!

・ファーストビュー

今回制作したWEBサイトのTOP

Copy.aiが考えたコピーを入れました。背景画像はPlaygroundです。

・TOPページ

今回制作したWEBサイトのMENU
今回制作したWEBサイトのTOPページ

・MENUページ

今回制作したWEBサイトのMENUページ

美味しそうなメニューばかりです。メニューの説明文もバッチリです。

・BOOKSページ

今回制作したWEBサイトのMENUページ

本の紹介だけでなく、ページトップの「店内には小説、雑誌、絵本など多数の本が並び、自由にお読みいただけます。店主セレクトの一押しや、人気の話題作品まで豊富に取り揃えております。気に入った本はそのままご購入できますので、自宅でもゆっくりと楽しむことができます。」という文章もCopy.aiに考えてもらった紹介文をベースにしています。

まとめ

ここまでご覧頂きありがとうございます。今回はWEBサイトのダミー情報を全てAIに考えてもらいました。文章・画像ともにクオリティが高く、言われないとAIと気づかないかもしれません。

もちろんダミー情報に限らず、コーディングで詰まった箇所もたくさんChatGPTに質問しました。年中無休で気を使わずなんでも質問できるので、強力なアシスタントができたみたいで心強かったです。

この記事がAIの活用方法の参考になれば幸いです。

メンバーを募集中!

当社ではお客様に向き合い、お客様の事業成功にコミットをできる仲間を募集しています。

正社員、インターンから副業まで、幅広く採用活動を進めております。プロジェクトマネージャーやシステムエンジニアとして当社のシステム開発業務に携わってみませんか?

当社と共に、業界トップを目指して挑戦したい方は未経験者から経験者まで広く募集しているので、ぜひエントリーをお待ちしています。

「煩雑なExcel管理から脱したい」
慣れ親しんだシステムを使って効率化したい
「大規模なシステム開発を行うためにPoCを行いたい」
「社内のDXを進めていきたい」
  • URLをコピーしました!

この記事を書いた人

株式会社ファンリピートのアバター

株式会社ファンリピート

FRnoteは株式会社ファンリピートのメンバーによって運営されている社内ブログです。ノーコード・ローコードの技術ブログを始めとして、最新のIT技術、業務で役立つノウハウなど様々なトピックをまとめています。


目次
閉じる