Web
Webサイト デザイン解析
URLを入力するだけで、Webサイトの色・フォント・余白・レイアウトなどのデザイン仕様を解析できます。
開く開発ツール
LP実装プロンプト作成
参考サイトのURLからデザインを解析し、AIにLPを実装してもらうためのプロンプトを自動作成します。
入力URLはデザイン解析のためサーバーへ送信されます。生成処理にOpenAI APIやClaude APIは使用せず、解析結果からブラウザ内でテンプレート生成します。
このツールについて
参考サイトを見つけても、余白、文字組み、配色、セクション構成をAIへ正確に説明するのは簡単ではありません。このツールは公開URLを解析し、実装に必要な情報を構造化したプロンプトへ変換します。
生成される内容
技術構成、ページ構成、Colors、Typography、Spacing、Radius、Shadow、Layout、Components、Responsive、実装上の制約、Accessibility、Performance、完了条件を含むMarkdown形式のプロンプトを作成します。
参考サイトから抽出する情報
desktopとmobileの画面幅でDOMとcomputed styleを確認し、代表的な色、font、余白、角丸、shadow、container、section、buttonやcard、レスポンシブ差分を抽出します。元サイトのHTMLやCSSそのものをプロンプトへ表示する機能ではありません。
参考サイトを使うときの注意
生成プロンプトはデザイン上の特徴を抽象化するためのものです。元サイトの文章、ロゴ、画像、ブランド名、固有素材をコピーする指示は含めません。公開前に、使用する文章と素材の権利を必ず確認してください。
使い方
- 参考にしたい公開WebサイトのURLを入力します。
- Framework、CSS、Language、AI Coding Toolを選びます。
- 必要に応じて追加要望を入力し、「プロンプトを作成」を押します。
- 解析概要と生成内容を確認し、コピーまたはMarkdown保存します。
Codexで使う方法
生成したプロンプトをコピーし、対象プロジェクトを開いたCodexへ貼り付けてください。既存コードを変更する場合は、守るべき設計や変更範囲も追加要望へ記載すると伝わりやすくなります。
Claude Codeで使う方法
同じプロンプトをClaude Codeにも利用できます。初期版は特定AI専用の命令形式へ依存せず、どのcoding agentでも解釈しやすいMarkdown構造を優先しています。
よくある質問
AI APIを使っていますか？
使用していません。初期版ではWebサイトの構造化された解析結果から、ブラウザ内のテンプレートエンジンでプロンプトを生成します。追加のOpenAI API・Claude API費用は発生しません。
Codexで使えますか？
利用できます。生成したプロンプトをコピーし、Codexの実装依頼へそのまま貼り付けられます。プロジェクト固有の要件は追加要望へ記載してください。
Claude Codeでも使えますか？
利用できます。プロンプトは特定AIへ強く依存しないMarkdown構造で、Claude Codeを含む一般的なAI coding agentで使えます。
元サイトをコピーするプロンプトですか？
いいえ。構造、レイアウト、余白、Typography、配色傾向などを抽象化し、独自LPを実装するためのプロンプトです。文章やブランド固有素材をコピーする指示は生成しません。
ロゴや画像も取得しますか？
元サイトのロゴや画像を実装用素材として取得・コピーしません。画像部分にはplaceholderまたはユーザーが権利を持つ提供素材を使うよう指示します。