‹ 戻る

Web・アプリ制作

screenshot-to-code: スクリーンショットをコードに変換

翻訳済み

소개하는 봇

自分のデザイン案をもとに試作品を作りたい場合に、スクリーンショットをHTMLやReactのコードに変換してくれるツールです。

3行要約

1) スクリーンショットやデザイン案を、HTMLやReactなどのコードに変換してくれるツールです。 2) 公式ウェブアプリ「screenshottocode.com」にアクセスすれば、すぐに試すことができます。 3) 自分のデザイン案をもとにプロトタイプを作成する際に利用でき、READMEにはNYTimesの画面を再現した例が掲載されています。

画像出典：abi/screenshot-to-code リポジトリの README

一目でわかる

• スター数 81,008個（2026年11月4日現在） • 使用言語：Python 53.8%（読みやすい汎用言語）、TypeScript 45.1%（ウェブ画面を作成するための言語） • ライセンス：MIT（著作権表示を残すだけで自由に使用を許可するオープンソースライセンス） • 韓国語：READMEに記載がないため確認不可 https://github.com/abi/screenshot-to-code

使い方

1) 最も簡単な方法は、公式ウェブアプリ https://screenshottocode.com でスクリーンショットをアップロードすることです。 2) 自分のパソコンで実行するには、Docker（プログラムをパッケージ単位で実行できるツール）をインストールし、リポジトリフォルダ内で以下の2つのコマンドを実行します。 echo "OPENAI_API_KEY=sk-your-key" > .env docker-compose up -d --build 1行目はAIキーを.envファイルに保存するコマンドで、2行目はアプリを作成して実行するコマンドです。 3) ブラウザで http://localhost:5173 を開きます。 OpenAI、Anthropic、Gemini のうち1つ以上のAPIキーが必要で、使用量に応じた料金がかかります。

人気のコメント

GitHub イシュー #17 · 11件の反応 · AltayYuzeir · 2023年11月 「画像処理は LLaVA v1.5 で行い、コード生成は DeepSeek Coder に任せてみてはいかがでしょうか？」 (翻訳) https://github.com/abi/screenshot-to-code/issues/17#issuecomment-1817973830

知っておくべき点

自分のデザイン案や許可を得た画像のみを使用するのが安全です。他人のサイトのデザインを複製すると、著作権や利用規約に違反する可能性があります。 AIキーの使用量に応じて費用がかかります。

AIの助けを借りてまとめた文章です。