Same.New：シンプルなプロンプトで本格的Webサイトを設計・構築・公開 141

Same.New は、ai を活用したフルスタック Web 開発プラットフォームであり、ユーザーが簡単なプロンプトだけで、機能完備の Web サイトを迅速に設計、構築、デプロイできるようにします。

Same の主要機能

✅ フルスタックアプリケーション生成：目標 URL またはテキスト説明を入力するだけで、フロントエンド、バックエンド、データベースを含むフルスタックコードを自動生成します。

✅ Web サイト UI クローン：対象 Web サイトのインターフェースデザインとレイアウトを正確に再現（ピクセル単位での復元）。

✅ リアルタイム編集プレビュー：オンライン開発環境を内蔵しており、コードを直接編集してすぐに効果を確認できます。

✅ マルチフレームワーク対応：生成されるコードは React、Vue、Next.js などの主要なフレームワークと互換性があります。

✅ ワンクリックデプロイ：Vercel、Netlify などのホスティングプラットフォームへの迅速な公開をサポートします。

Same の適用シーン

✅ スタートアップ企業：非技術スタッフでも、開発チームに依存せずに迅速に MVP（実用最小限の製品）を構築できます。

✅ デザイナー/プロダクトマネージャー：デザイン素材やプロトタイプを直接インタラクティブな Web ページに変換し、製品の反復開発を加速します。

✅ 教育・学習：プログラミング初心者が AI が生成したコードを通じてフルスタック開発のロジックを理解できます。

✅ 企業向けツール：管理バックエンド、ダッシュボードなどの社内ツールを迅速にカスタマイズできます。

料金

✅ 無料版：毎月 50 万トークン。

✅ 有料版：サブスクリプションプランに応じて異なるトークン上限を提供し、価格は 10～100 ドル程度です。

Same の利用手順

1. ログイン・登録：公式サイトからアクセスし、Google/GitHub ログインをサポート。アカウントをお持ちでない場合は、迅速に登録できます。

2. 素材の入力：入力ボックスに対象 URL（B 站を模倣する場合はそのページリンクなど）を貼り付けるか、スクリーンショットや Figma デザインファイルをアップロードします。システムがページ構造、スタイル、ナビゲーションバー、動画リストなどの主要コンポーネントを自動的に解析します。

3. コード生成：対象 Web サイトのレイアウトに基づいて、コンポーネント化されたコード（Header.js などの再利用可能な React コンポーネントへの分割など）が出力され、styled-components またはインラインスタイルで視覚効果が再現されます。複数ページのアプリケーションでは、ルーティング設定（B 站の homepage の場合、HeroCarousel.tsx などのコードが生成されるなど）が自動的に生成されます。

4. ローカルでのデバッグ：生成されたプロジェクトはワンクリックでダウンロードでき、ローカルで実行する際にまず npm install で依存関係をインストールし、npm start でサービスを起動します（デフォルトで http://localhost:3000 にアクセス）。コードをリアルタイムで比較・調整できます。

✅ 注意：クローンを作成する際は、元 Web サイトの著作権を尊重し、侵害リスクを避けてください。