> ## Content Index > Fetch the complete content index at: https://iris-on-bookrest.info/llms.txt > Use this file to discover other available public pages before exploring further. # WebサイトのUIをコピーしてコード化できるサービス「same.new」がなんかすごい - URL: https://iris-on-bookrest.info/2606/ - Published: 2025-04-12T11:13:46.000Z - Updated: 2025-04-12T11:13:46.000Z - Author: やまぐろ - Tags: プログラミング, WEBサービス, #yamaguro-2 職業エンジニアなので、Webサイトを作ることはあるし、もちろんその中でUIを作ることもあるんだけど、正直なところあんまり毎回乗り気じゃなかったりする。そう、難しいんだ、クライアント処理は。特にバグ修正が！なるべく担当したくないが、どこ行っても何故か自分がやる事になりがちなので、更に嫌いになってる節が正直ある。 そんな自分のような人の救いになるかも知れないツールを見つけたので、ここで紹介する事にいたす。ちな、自分は縛りによってこの手のツールは使えません。悲C。 ## same.newってなんぞ？ same.newは、既存のウェブサイトのユーザーインターフェース（UI）を複製、コード化できるツールとなっていて、無料で使用可能だ。この時点でなんか凄そうな感じはするよね。 https://same.new ## できること ### 任意のウェブサイトのUIを複製 --- 複製したいウェブサイトのURLを入力するだけで、そのサイトのUIをピクセル単位でコピーし、再利用可能なコードにできます。 ### チャットによる修正指示がてきる ここをこうしたい！みたいな事がチャットで指示できます。コピー元をベースに、プログラムせずとも似たようなデザインのUIができると言うことですね。 ![](https://iris-on-bookrest.info/content/images/wp-uploads/2025/04/78872-1024x348.png) 雑に虹色にしたいとお願い。結果はちょっと下のプレビューのところで。 ### もちろん手動でも修正可 直接コードを弄ることも可能です。細かい部分は手動の方がやりやすい、みたいな場合もあるよね。 ![](https://iris-on-bookrest.info/content/images/wp-uploads/2025/04/55857.png) 見た目はVSCode的な感じ ### 修正履歴も自動保存 自分で行った修正変更の履歴が残ります。IDEには当たり前についている機能ですが、これも開発するには必須級だよなあ。マジで脳がバグるときあるしね。一旦戻りたくなる時もあるよね。 ![](https://iris-on-bookrest.info/content/images/wp-uploads/2025/04/89412.png) リビジョンも残る ### コードのダウンロードができる 生成されたコードはダウンロードが可能です。これをベースにローカルで弄るのもよし、お勉強用に眺めるもよし。ちな、ソースはReactベースです。自分は残念ながら未履修だけど、web系の方ならわりかし触ったことあるのかも。知らんけど。 ![](https://iris-on-bookrest.info/content/images/wp-uploads/2025/04/84087.png) ダウンロードはzip形式で可能。これは解凍後に展開したもの。 ### プレビューできる 修正中のコードからプレビューを生成できます。UIのコーディングは修正確認を繰り返し行いながらやる事が多いので、これも嬉しい機能ですね。 ![](https://iris-on-bookrest.info/content/images/wp-uploads/2025/04/21075.png) めっちゃ虹色にしてくれた。画像だとわからないが、アニメーション付きで虹色が表現されている。 ### GitHub→Netlifyに反映できる これについてはドキュメント読んだだけなので自信はないけど、どうやらそのまま公開まで持って行けるっぽい。これが出来たら仕事の効率めっちゃ上がるよね。 ## 使いどころ ### LP作成 バックエンドを有さないWebサイトであれば、正直これだけでもある程度できてしまう気がしている。LPとかを作るのであれば、かなり実用性があると思う。 もちろんバックエンドがあるWebサービスにも使える場面はあるかもだけど、個人的には静的Webサイトの作成が一番適しているという印象を受けた。 ### モック作成 モックアップ作成とも相性が良いと思う。コード書けない人でもだいたいのイメージを提供できるようになるので、顧客調整がだいぶ楽になるのではなかろうか。見せてるその場でチャットで修正指示したりなんかもできるしね。 ## 最後に やっぱりAIとコード生成って相性いいよね。ワイの職場は禁止通達出てるけどな。