Open AIの新サービス!スクリーンショットから一瞬でWEBサイトを完成させる方法!!

AIの成長が加速中の今、新たに神AIが登場しました!

それがスクリーンショットから一瞬でWEBサイトを完成させてしまうOpen AIの新サービス!

今回はOpen AIのVision modelを使ってスクリーンショットからWebサイトを作成する手順をご紹介します!

それでは早速手順を紹介したいと思います。

ましゃ<br>

WEBサイトだけでなくコードも書いてくれるからワードプレスなどに貼り付けても一瞬でスクショを再現したページができますね!

※生成にはOpen AI APIの課金が500ドルほど必要です

目次

スクリーンショットからWebサイト作成手順

まずは以下のリンクからGithubにアクセスします。

こちらからGithubにアクセスする
➡︎https://github.com/abi/screenshot-to-code

下の画像のように表示されるので「サインイン」➡︎「赤枠のリンク」をクリックします。

次のようなページに切り替わるので「歯車マーク」をクリックします。

そして「Open AI APIキー」を入力します。

ましゃ<br>

OpenAIのAPIキー取得方法は以下のブログ記事で解説してます♪

あわせて読みたい
画像つき!Chat GPTのAPIキーを取得する方法!! 最近ではAI技術の加速が進み、いよいよ「AIを活用しないとヤバい」という状況になってきましたね! 今回はChatGPTでAPIの取得方法について分かりやすく解説していこうと...

APIキーを入力したら下画像の「赤枠」にページにしたいスクリーンショットをアップロードしましょう!

すると以下のように再現性高く完成されます。

ましゃ<br>

HTMLも出るのでコードをコピーしてワードプレスなど、他で利用するのもあり!

もちろん編集することもできます!

エラーが出る場合

エラーが出る場合はトークンが不足しているので課金する必要があります。

課金方法は以下のブログ記事で解説してますので参考にしてください♪

あわせて読みたい
画像つき!Chat GPTのAPIキーを取得する方法!! 最近ではAI技術の加速が進み、いよいよ「AIを活用しないとヤバい」という状況になってきましたね! 今回はChatGPTでAPIの取得方法について分かりやすく解説していこうと...

課金してもう一度試してみてください♪

最後に

このサイトを使えばデザインの再現性も高く、WEBページなど効率よく作ることができそうですね!

スクリーンショットで細かく繋げていけばクオリティの高いHPやLPもできそうだからこれで収益化も全然可能になってきますね!

ましゃ<br>

ぜひスクリーンショットからWEBページを作成する方法を活用してみてください♪

この記事を書いた人

目次