【Screenshot-to-Code】スクショを貼るとWebサイトを5秒でコピーしてくれる裏技AIを使ってみた

AIツール WEEL一押しの生成AI 個人開発オープンソースAI 生成AIずかん

2023-11-272024-04-03

WEELメディア事業部LLMリサーチャーのゆうやです。

screenshot-to-codeというスクリーンショットを解析してHTML/Tailwind CSSに変換してくれるオープンソースアプリケーションが公開されました。

このアプリケーションは、以下の動画のようにスクリーンショットのUIをかなりの精度で再現してくれます。

画像の解析、UIの生成はGPT-4 VisionとDALL-E 3を使用しているため、超高性能なのは間違いなしです。

そんなscreenshot-to-codeは、公開から1週間も経っていないですが、GitHubのスター数は4,200を超えており、大注目されています。

今回は、screenshot-to-codeの概要や使ってみた感想をお伝えします。

是非最後までご覧ください！

screenshot-to-codeの概要

screenshot-to-codeは、スクリーンショットを解析してHTML/Tailwind CSSに変換してくれるオープンソースアプリケーションです。

このアプリケーションの登場により、サイトを作成する際のコーディング作業が格段に効率化することができるようになりました。

このアプリケーションはGPT-4 Visionを使用してコードを生成し、DALL-E 3を使用してスクリーンショットと同様の画像を生成します。

そのため、使用するためには以下のリンクからOpenAI API Keyを取得する必要があります。

api-keys

なお、GPT-4 Visionを利用するためには、OpenAIのusage tierがTier1以上である必要があります。

Tier1になるには$5以上課金する必要があるので、その点は注意してください。

各Tierの条件とTier1で使えるモデルについては以下の画像を参考にしてください。

ここからは、公開されている実行例を紹介します。

まずはNew York Timesのニュースサイトを解析させて生成されたUIです。

基本的なUIの構成は忠実に再現されており、スクリーンショットの文章や画像も読み取って再現しています。

フォントまでは再現できていませんが、新たにサイトを構築する際のベースにするには十分すぎるほどの精度ですね！

続いて、Instagramのページを解析させた例です。

こちらも高い精度でUIが再現されており、画像も元のスクリーンショットのものの特徴を捉えたものを生成しています。

最後にHacker Newsのスクリーンショットを解析させた例です。

こちらは、最初に生成されたUIのヘッダーカラーが間違っていたので、プロンプトを入力して修正しています。

このようにして自分の好みのUIを生成させたり、再現度を高めたりできるんですね！

ここまで、実行例を紹介してきましたが、ここからは実際に使ってみてその性能を確かめましょう。

まずは使い方から説明します。

screenshot-to-codeの使い方

screenshot-to-codeは、以下のリンクにアクセスして自分のOpenAI API Keyを設定するだけで使用することができます。

screenshot-to-code

この方法が一番簡単ですが、ローカルにインストールして使用することもできます。

まずは、以下のコードでGitHubのリポジトリをクローンします。

git clone https://github.com/abi/screenshot-to-code.git

GitHubリポジトリ

abi/screenshot-to-code

このアプリケーションは、React/Vite frontendとFastAPI backendの2種類があり、それぞれ実行方法が異なります。

backend

まず、以下のコードでpoetryをインストールします。

pip install poetry

次に、以下のコマンドを順に実行すればアプリケーションを起動できます。

cd backend
echo "OPENAI_API_KEY=sk-your-key" > .env
poetry install
poetry shell
poetry run uvicorn main:app --reload --port 7000

frontend

こちらは以下のコマンドを順に実行して、http://localhost:5173にアクセスすれば使用できます。

cd frontend
yarn
yarn dev

使い方の説明は以上です。

それでは実際に使ってみましょう！

なお、GPT-4 Visionを使用してリアルタイムで物体を識別してキャプション生成するツールについて詳しく知りたい方は、下記の記事を合わせてご確認ください。
→【WebCamGPT】GPT-4V API活用事例！リアルタイムで物体を識別してキャプション生成するChatGPTツール

screenshot-to-codeを実際に使ってみた

以下の弊社サイトのスクリーンショットを入力してみます。

数十秒ほどで以下のUIを生成してくれました。

コード

<html lang="ja">
 <head>
  <meta charset="utf-8"/>
  <meta content="width=device-width, initial-scale=1.0" name="viewport"/>
  <title>
   AI News Portal
  </title>
  <script src="https://cdn.tailwindcss.com">
  </script>
  <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" rel="stylesheet"/>
  <style>
   @import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;700&display=swap');
        body {
            font-family: 'Noto Sans JP', sans-serif;
        }
  </style>
 </head>
 <body class="bg-gray-100">
  <div class="container mx-auto p-6">
   <div class="grid grid-cols-4 gap-4">
    <!-- Sidebar -->
    <div class="col-span-1 bg-white p-4">
     <div class="flex items-center bg-gray-200 p-2">
      <input class="bg-gray-200 outline-none flex-grow" placeholder="検索" type="search"/>
      <i class="fas fa-search text-gray-600">
      </i>
     </div>
     <div class="mt-4">
      <!-- Sidebar links -->
      <!-- Repeat for each sidebar item -->
      <div class="font-bold py-2">
       ChatGPTを極める
      </div>
      <div class="text-sm py-1">
       大人気のオープンソースツール
      </div>
      <div class="text-sm py-1">
       情シス・AI担当者向け
      </div>
      <div class="text-sm py-1">
       リスク・注意点
      </div>
      <div class="text-sm py-1">
       失敗AIコース
      </div>
      <div class="text-sm py-1">
       失敗AI導入お役立ち情報
      </div>
      <div class="font-bold py-2">
       明日発売されたAIトリビア
      </div>
      <div class="font-bold py-2">
       猫を追いかけるAIツール
      </div>
      <div class="font-bold py-2">
       生産AIxビジネス
      </div>
      <div class="text-sm py-1">
       エンジメタ業界
      </div>
      <div class="text-sm py-1">
       不動産業界
      </div>
      <div class="text-sm py-1">
       医療業界
      </div>
      <div class="text-sm py-1">
       法律業界
      </div>
      <div class="text-sm py-1">
       建設業界
      </div>
      <div class="text-sm py-1">
       教育業界
      </div>
      <div class="text-sm py-1">
       自動車業界
      </div>
      <div class="text-sm py-1">
       製造業界
      </div>
      <div class="text-sm py-1">
       金融業界
      </div>
      <div class="font-bold py-2">
       生産AIx国際戦略
      </div>
      <div class="font-bold py-2">
       生産AIの仕組み・中身
      </div>
     </div>
    </div>
    <!-- Main content -->
    <div class="col-span-3">
     <!-- Hero section -->
     <div class="bg-blue-900 rounded-lg text-white p-4 mb-4">
      <div class="flex items-center justify-between">
       <div class="flex items-center">
        <div class="rounded-full bg-red-500 p-2 mr-4">
         <i class="fas fa-robot fa-2x">
         </i>
        </div>
        <div>
         <h2 class="text-xl font-bold">
          AIチャットボットの作り方は？
         </h2>
         <p class="text-sm">
          自社開発とツール活用の違いに分けて徹底解説！
         </p>
        </div>
       </div>
       <div>
        <button class="bg-red-500 px-4 py-2 rounded-full text-sm">
         生産AI導入お役立ち情報
        </button>
       </div>
      </div>
      <h1 class="text-3xl font-bold mt-4">
       AIチャットボットの作り方は？自社開発とツール活用の違いに分けて徹底解説！
      </h1>
      <p class="text-sm mt-2">
       AIチャットボットがさまざまな企業で導入されているのを知っていますか？チャットボットとは、ロボットと人間とのような会話ができる技術のことです。AIを搭載する...
      </p>
      <p class="text-sm mt-2">
       2023-11-20
      </p>
     </div>
     <!-- Article list -->
     <div class="bg-white p-4">
      <!-- Repeat for each article -->
      <div class="flex items-center mb-4">
       <div class="w-16 h-16 mr-4">
        <img alt="Placeholder image representing an article thumbnail" class="rounded" height="64" src="https://oaidalleapiprodscus.blob.core.windows.net/private/org-DHhLyNs4MQqsstTqahdh4xoU/user-dCiqO0cWRgbi3CDiUy0SoovV/img-A54Wtcx5Z1DD5e0RO3AHKc0j.png?st=2023-11-20T10%3A55%3A21Z&se=2023-11-20T12%3A55%3A21Z&sp=r&sv=2021-08-06&sr=b&rscd=inline&rsct=image/png&skoid=6aaadede-4fb3-4698-a8f6-684d7786b067&sktid=a48cca56-e6da-484e-a814-9c849652bcb3&skt=2023-11-19T20%3A08%3A12Z&ske=2023-11-20T20%3A08%3A12Z&sks=b&skv=2021-08-06&sig=zafNjuGKny2mMmGuclK1mdLrtnB6Bi25ngx86ME4USg%3D" width="64"/>
       </div>
       <div>
        <h3 class="text-lg font-bold">
         ChatGPTを極める方法をお伝えします。
        </h3>
        <p class="text-sm">
         2023-11-15
        </p>
        <p class="text-sm">
         212896
        </p>
       </div>
      </div>
      <!-- Repeat for each article -->
      <div class="flex items-center mb-4">
       <div class="w-16 h-16 mr-4">
        <img alt="Placeholder image representing an article thumbnail" class="rounded" height="64" src="https://oaidalleapiprodscus.blob.core.windows.net/private/org-DHhLyNs4MQqsstTqahdh4xoU/user-dCiqO0cWRgbi3CDiUy0SoovV/img-A54Wtcx5Z1DD5e0RO3AHKc0j.png?st=2023-11-20T10%3A55%3A21Z&se=2023-11-20T12%3A55%3A21Z&sp=r&sv=2021-08-06&sr=b&rscd=inline&rsct=image/png&skoid=6aaadede-4fb3-4698-a8f6-684d7786b067&sktid=a48cca56-e6da-484e-a814-9c849652bcb3&skt=2023-11-19T20%3A08%3A12Z&ske=2023-11-20T20%3A08%3A12Z&sks=b&skv=2021-08-06&sig=zafNjuGKny2mMmGuclK1mdLrtnB6Bi25ngx86ME4USg%3D" width="64"/>
       </div>
       <div>
        <h3 class="text-lg font-bold">
         ChatGPTを活用する
        </h3>
        <p class="text-sm">
         2023-11-10
        </p>
        <p class="text-sm">
         143583
        </p>
       </div>
      </div>
      <!-- Repeat for each article -->
      <div class="flex items-center mb-4">
       <div class="w-16 h-16 mr-4">
        <img alt="Placeholder image representing an article thumbnail" class="rounded" height="64" src="https://oaidalleapiprodscus.blob.core.windows.net/private/org-DHhLyNs4MQqsstTqahdh4xoU/user-dCiqO0cWRgbi3CDiUy0SoovV/img-A54Wtcx5Z1DD5e0RO3AHKc0j.png?st=2023-11-20T10%3A55%3A21Z&se=2023-11-20T12%3A55%3A21Z&sp=r&sv=2021-08-06&sr=b&rscd=inline&rsct=image/png&skoid=6aaadede-4fb3-4698-a8f6-684d7786b067&sktid=a48cca56-e6da-484e-a814-9c849652bcb3&skt=2023-11-19T20%3A08%3A12Z&ske=2023-11-20T20%3A08%3A12Z&sks=b&skv=2021-08-06&sig=zafNjuGKny2mMmGuclK1mdLrtnB6Bi25ngx86ME4USg%3D" width="64"/>
       </div>
       <div>
        <h3 class="text-lg font-bold">
         [ChatGPT] 活用ケース
        </h3>
        <p class="text-sm">
         2023-11-13
        </p>
        <p class="text-sm">
         134964
        </p>
       </div>
      </div>
      <!-- Repeat for each article -->
      <div class="flex items-center mb-4">
       <div class="w-16 h-16 mr-4">
        <img alt="Placeholder image representing an article thumbnail" class="rounded" height="64" src="https://oaidalleapiprodscus.blob.core.windows.net/private/org-DHhLyNs4MQqsstTqahdh4xoU/user-dCiqO0cWRgbi3CDiUy0SoovV/img-A54Wtcx5Z1DD5e0RO3AHKc0j.png?st=2023-11-20T10%3A55%3A21Z&se=2023-11-20T12%3A55%3A21Z&sp=r&sv=2021-08-06&sr=b&rscd=inline&rsct=image/png&skoid=6aaadede-4fb3-4698-a8f6-684d7786b067&sktid=a48cca56-e6da-484e-a814-9c849652bcb3&skt=2023-11-19T20%3A08%3A12Z&ske=2023-11-20T20%3A08%3A12Z&sks=b&skv=2021-08-06&sig=zafNjuGKny2mMmGuclK1mdLrtnB6Bi25ngx86ME4USg%3D" width="64"/>
       </div>
       <div>
        <h3 class="text-lg font-bold">
         ChatGPTとお医者さん
        </h3>
        <p class="text-sm">
         2023-11-20
        </p>
        <p class="text-sm">
         105678
        </p>
       </div>
      </div>
      <!-- Repeat for each article -->
      <div class="flex items-center mb-4">
       <div class="w-16 h-16 mr-4">
        <img alt="Placeholder image representing an article thumbnail" class="rounded" height="64" src="https://oaidalleapiprodscus.blob.core.windows.net/private/org-DHhLyNs4MQqsstTqahdh4xoU/user-dCiqO0cWRgbi3CDiUy0SoovV/img-A54Wtcx5Z1DD5e0RO3AHKc0j.png?st=2023-11-20T10%3A55%3A21Z&se=2023-11-20T12%3A55%3A21Z&sp=r&sv=2021-08-06&sr=b&rscd=inline&rsct=image/png&skoid=6aaadede-4fb3-4698-a8f6-684d7786b067&sktid=a48cca56-e6da-484e-a814-9c849652bcb3&skt=2023-11-19T20%3A08%3A12Z&ske=2023-11-20T20%3A08%3A12Z&sks=b&skv=2021-08-06&sig=zafNjuGKny2mMmGuclK1mdLrtnB6Bi25ngx86ME4USg%3D" width="64"/>
       </div>
       <div>
        <h3 class="text-lg font-bold">
         [ChatGPTの最新活用事例]
        </h3>
        <p class="text-sm">
         2023-11-19
        </p>
        <p class="text-sm">
         119039
        </p>
       </div>
      </div>
     </div>
    </div>
   </div>
  </div>
 </body>
</html>

情報量が多すぎたのか、途中で生成するのをやめているようにも見えますね。

真ん中の画像も再現してくれませんでした。

ただ、元のUIを完全再現できなくても、数十秒でコードまで生成してくれるので、これをベースにすることで、コーディングタスクを大幅に効率化する事はできそうですね！

ここからは、もっとシンプルなUIを再現させたり、プロンプトで指示してどの程度再現度が向上するのか検証します。

なお、手書きのイラストからWebサイトを作成してくれるAIツールについて知りたい方はこちらの記事をご覧ください。
→【tldraw makereal】手書きの図から5秒で本格サイトを自動作成してくれるAIを使ってみた

screenshot-to-codeで様々なパターンのUIを再現させてみた

まずは、先ほどのUIの再現度をさらに上げるべく、プロンプトで指示を出してみましょう。

どうやら日本語に対応しているようなので、以下のプロンプトを入力します。

一番下のボックスを右側に持ってきて、最後まで再現して

結果はこのようになりました。

プロンプトで指示することでぐっと再現度が上がりましたね！

コードも記載しておきます。

<html lang="ja">
 <head>
  <meta charset="utf-8"/>
  <meta content="width=device-width, initial-scale=1.0" name="viewport"/>
  <title>
   AIチャットボットの可能性
  </title>
  <script src="https://cdn.tailwindcss.com">
  </script>
  <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" rel="stylesheet"/>
  <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;700&display=swap" rel="stylesheet"/>
  <style>
   body {
      font-family: 'Noto Sans JP', sans-serif;
    }
  </style>
 </head>
 <body class="bg-gray-100">
  <div class="container mx-auto mt-10">
   <div class="flex flex-wrap">
    <!-- Sidebar -->
    <div class="w-full lg:w-1/4 px-4 mb-4 lg:mb-0">
     <div class="bg-white p-4">
      <div class="flex items-center bg-gray-200 p-2">
       <i class="fas fa-search text-gray-500 mr-2">
       </i>
       <input class="bg-gray-200 outline-none w-full" placeholder="検索" type="search"/>
      </div>
      <div class="mt-4">
       <!-- Sidebar links -->
       <!-- Repeat for each category and subcategory -->
       <p class="font-bold text-lg mb-2">
        ChatGPTを観る
       </p>
       <p class="text-sm mb-1">
        大人気のオープンソースツール
       </p>
       <p class="text-sm mb-1">
        情シス・AI担当者向け
       </p>
       <p class="text-sm mb-1">
        リスク・注意点
       </p>
       <p class="text-sm mb-1">
        失敗AIコース
       </p>
       <p class="text-sm mb-1">
        失敗AI導入お役立ち情報
       </p>
       <p class="font-bold text-lg mb-2 mt-4">
        明日目覚めたいAIトピック
       </p>
       <p class="text-sm mb-1">
        新着おすすめAIツール
       </p>
       <p class="font-bold text-lg mb-2 mt-4">
        生産AIxビジネス
       </p>
       <p class="text-sm mb-1">
        エンジメ業界
       </p>
       <p class="text-sm mb-1">
        不動産業界
       </p>
       <p class="text-sm mb-1">
        医療業界
       </p>
       <p class="text-sm mb-1">
        法律業界
       </p>
       <p class="text-sm mb-1">
        建設業界
       </p>
       <p class="text-sm mb-1">
        教育業界
       </p>
       <p class="text-sm mb-1">
        自動車業界
       </p>
       <p class="text-sm mb-1">
        製造業界
       </p>
       <p class="text-sm mb-1">
        金融業界
       </p>
       <p class="font-bold text-lg mb-2 mt-4">
        生産AIx国際戦略
       </p>
       <p class="font-bold text-lg mb-2 mt-4">
        生産AIの仕組み・中身
       </p>
       <!-- End of sidebar links -->
      </div>
     </div>
    </div>
    <!-- Main Content -->
    <div class="w-full lg:w-1/2 px-4 mb-4 lg:mb-0">
     <div class="bg-white">
      <!-- Article Header -->
      <div class="relative">
       <img alt="AIチャットボットの可能性についての記事のヘッダー画像" class="w-full h-auto" height="400" src="https://oaidalleapiprodscus.blob.core.windows.net/private/org-DHhLyNs4MQqsstTqahdh4xoU/user-dCiqO0cWRgbi3CDiUy0SoovV/img-SoDwCm3SBNqD8ZYP1Avl43OH.png?st=2023-11-20T13%3A48%3A24Z&se=2023-11-20T15%3A48%3A24Z&sp=r&sv=2021-08-06&sr=b&rscd=inline&rsct=image/png&skoid=6aaadede-4fb3-4698-a8f6-684d7786b067&sktid=a48cca56-e6da-484e-a814-9c849652bcb3&skt=2023-11-19T20%3A20%3A17Z&ske=2023-11-20T20%3A20%3A17Z&sks=b&skv=2021-08-06&sig=Yk4xX7qjzeIHAB/q1T0Pff1d4tNoeoYQEkoMp79N//I%3D" width="800"/>
       <div class="absolute top-0 right-0 m-4">
        <button class="bg-blue-500 text-white p-2 rounded-full">
         <i class="fas fa-comment-dots mr-2">
         </i>
         生産AI相談へお越し
        </button>
       </div>
      </div>
      <!-- Article Title -->
      <div class="p-6">
       <h1 class="font-bold text-3xl mb-4">
        AIチャットボットの可能性は？
        <br/>
        自動車業界ツール活用の場合における検証結果！
       </h1>
       <p class="text-sm mb-4">
        AIチャットボットがもたらす可能性についての詳細をご紹介しています。チャットボットとは、ロボットと人間とのような会話ができる技術のことです。AIを搭載する...
       </p>
       <p class="text-xs text-gray-500">
        2023-11-20
       </p>
      </div>
      <!-- Article Image -->
      <div class="px-6 pb-6">
       <img alt="カラフルな抽象的なイラストと「ChatGPTを知る」のテキスト" class="w-full h-auto mb-4" height="400" src="https://oaidalleapiprodscus.blob.core.windows.net/private/org-DHhLyNs4MQqsstTqahdh4xoU/user-dCiqO0cWRgbi3CDiUy0SoovV/img-FbEUuscVgMVrijYtr5XznMPG.png?st=2023-11-20T13%3A48%3A15Z&se=2023-11-20T15%3A48%3A15Z&sp=r&sv=2021-08-06&sr=b&rscd=inline&rsct=image/png&skoid=6aaadede-4fb3-4698-a8f6-684d7786b067&sktid=a48cca56-e6da-484e-a814-9c849652bcb3&skt=2023-11-19T20%3A03%3A40Z&ske=2023-11-20T20%3A03%3A40Z&sks=b&skv=2021-08-06&sig=bj9E%2Bq1DDG4dVmdgfj1VF3W6BH0x6lejwMirNJ1mlFE%3D" width="800"/>
       <h2 class="font-bold text-xl mb-2">
        ChatGPTを知る資料をお探し?
       </h2>
       <p class="text-sm">
        ChatGPTに関する最新の情報や資料をお探しの方はこちらからどうぞ。最新の研究結果や事例をまとめた...
       </p>
      </div>
     </div>
    </div>
    <!-- Right Sidebar -->
    <div class="w-full lg:w-1/4 px-4">
     <div class="bg-white p-4">
      <h3 class="font-bold text-lg mb-4">
       シェア・引用OKです！
      </h3>
      <div class="flex flex-wrap -mx-2 mb-4">
       <!-- Repeat for each share button -->
       <div class="w-1/2 px-2 mb-2">
        <button class="bg-gray-300 text-gray-700 p-2 w-full rounded">
         Twitter
        </button>
       </div>
       <div class="w-1/2 px-2 mb-2">
        <button class="bg-green-500 text-white p-2 w-full rounded">
         Feedly
        </button>
       </div>
       <div class="w-1/2 px-2 mb-2">
        <button class="bg-orange-500 text-white p-2 w-full rounded">
         RSS
        </button>
       </div>
       <div class="w-1/2 px-2 mb-2">
        <button class="bg-blue-500 text-white p-2 w-full rounded">
         Google news
        </button>
       </div>
       <div class="w-full px-2">
        <button class="bg-blue-700 text-white p-2 w-full rounded">
         メールマガジン
        </button>
       </div>
       <!-- End of share buttons -->
      </div>
      <div class="border-t border-gray-300 pt-4">
       <h4 class="font-bold text-lg mb-2">
        週刊
       </h4>
       <div class="flex items-center justify-between mb-2">
        <span class="text-sm">
         月刊
        </span>
        <span class="text-sm">
         年刊
        </span>
       </div>
       <!-- Repeat for each news item -->
       <div class="flex items-center justify-between mb-2">
        <div class="flex items-center">
         <span class="text-xs bg-blue-500 text-white p-1 mr-2 rounded">
          1
         </span>
         <span class="text-xs">
          ChatGPTとは？始め...
         </span>
        </div>
        <span class="text-xs text-gray-500">
         2023-11-15
        </span>
       </div>
       <div class="flex items-center justify-between mb-2">
        <div class="flex items-center">
         <span class="text-xs bg-blue-500 text-white p-1 mr-2 rounded">
          2
         </span>
         <span class="text-xs">
          ChatGPTを活用する...
         </span>
        </div>
        <span class="text-xs text-gray-500">
         2023-11-10
        </span>
       </div>
       <div class="flex items-center justify-between mb-2">
        <div class="flex items-center">
         <span class="text-xs bg-blue-500 text-white p-1 mr-2 rounded">
          3
         </span>
         <span class="text-xs">
          「ChatGPT」導入すべき...
         </span>
        </div>
        <span class="text-xs text-gray-500">
         2023-11-13
        </span>
       </div>
       <div class="flex items-center justify-between mb-2">
        <div class="flex items-center">
         <span class="text-xs bg-blue-500 text-white p-1 mr-2 rounded">
          4
         </span>
         <span class="text-xs">
          ChatGPTとお客様 | AI...
         </span>
        </div>
        <span class="text-xs text-gray-500">
         2023-11-20
        </span>
       </div>
       <div class="flex items-center justify-between mb-2">
        <div class="flex items-center">
         <span class="text-xs bg-blue-500 text-white p-1 mr-2 rounded">
          5
         </span>
         <span class="text-xs">
          「ChatGPTの最新活用事例」...
         </span>
        </div>
        <span class="text-xs text-gray-500">
         2023-11-19
        </span>
       </div>
       <!-- End of news items -->
      </div>
     </div>
    </div>
   </div>
  </div>
 </body>
</html>

ここまで詳細なコードとUIを、スクリーンショットを入力するだけで生成してくれるツールは他にないですし、革新的なので、このツールが普及すれば、サイトを作る際のコーディングタスクは本当に大幅短縮されると思います。

次に、もう少しシンプルなUIのスクリーンショットであれば、一発もしくは一回の修正で完全再現してくれるのではないでしょうか？

以下のスクリーンショットを入力して検証してみます。

こちらは、Bing AIにフィボナッチ数列について質問した時のスクリーンショットです。

比較的シンプルで再現しやすいと思ってこちらを選びました。

まずは普通に入力してみます。

結果は、左側のAIの回答部分しか再現してくれませんでした。

やはり一回で再現しきるのは難しいのかもしれません。

では、以下のプロンプトで指示をしてどこまで再現度が上がるか検証しましょう。

右上の青いボックスと、下のテキストボックスも再現して、UI全体を完全に再現して

結果は以下のようになりました。

右上の青いボックスも正しく再現されず、テキストボックスも大きさが違い、周りの色も違うなど、全体的な構成は再現度が高いとは言えない結果になりました。

UIの複雑さは、UIの再現度の高さにはあまり関係がないのかもしれません。

ここまでの検証の結果をまとめると、スクリーンショットを入力し、プロンプトで少し修正を加えるだけでそこそこの再現度のUIを生成してくれますが、完全に再現してくれることはありませんでした。

ですが、このツールをUIのコーディングタスクで活用する際は、別に完全再現されている必要はないですし、ベースにするには十分すぎるほどのコードも生成してくれます。

このツールは、コーディングタスクを大幅に効率化するツールであるということは間違いないでしょう！

なお、GPT-4 Visionについては以下の記事で解説しているので、詳しく知りたい方は下記の記事を合わせてご確認ください。
→【GPT 4 Turbo】128,000トークン入力対応のOpenAI最強モデルの使い方〜実践まで解説

まとめ

screenshot-to-codeは、スクリーンショットを解析してHTML/Tailwind CSSに変換してくれるオープンソースアプリケーションです。

このアプリケーションはGPT-4 Visionを使用してコードを生成し、DALL-E 3を使用してスクリーンショットと同様の画像を生成することで、高い精度でスクリーンショットのUIを再現できます。

実際に使ってみた感想は、入力したスクリーンショットのUIを完全に再現することは難しそうですが、UI作成のベースとするには十分すぎるほどのコードを生成してくれるので、コーディングタスクを大幅に効率化できると感じました。

screenshot-to-codeを活用することで、誰でも簡単にアイアンマンスーツのような近未来的なUIを作成できるようになるかもしれませんね！

生成系AIの業務活用なら！

・生成系AIを活用したPoC開発

・生成系AIのコンサルティング

・システム間API連携

無料ダウンロード

最後に

いかがだったでしょうか？

弊社では

・マーケティングやエンジニアリングなどの専門知識を学習させたAI社員の開発
・要件定義・業務フロー作成を80%自動化できる自律型AIエージェントの開発
・生成AIとRPAを組み合わせた業務自動化ツールの開発
・社内人事業務を99%自動化できるAIツールの開発
・ハルシネーション対策AIツールの開発
・自社専用のAIチャットボットの開発

などの開発実績がございます。

まずは、「無料相談」にてご相談を承っておりますので、ご興味がある方はぜひご連絡ください。

➡︎生成AIを使った業務効率化、生成AIツールの開発について相談をしてみる。

生成AIを社内で活用していきたい方へ