Web
CSSデザイン解析
CSSの貼り付けやファイル読み込みから、配色・フォント・余白を整理。拡張機能なしで使えます。
開発ツール
LP実装プロンプト作成
サービスの内容やデザインの希望から、AIにLPを実装してもらうためのプロンプトを作成します。
このツールについて
サービス名、紹介したい内容、想定する利用者、デザインの雰囲気から、AIへ渡すLP実装プロンプトを作成します。参考サイトやブラウザ拡張を用意せずに始められます。
生成される内容
企画、技術構成、ページ構成案、レイアウト、レスポンシブ対応、文章と画像の扱い、アクセシビリティ、パフォーマンス、完了条件をMarkdownに整理します。内容は確認・編集してから利用してください。
参考CSSがある場合
CSSデザイン解析で整理した配色や余白の宣言値を、任意でプロンプトに含められます。実際のページ表示を解析した値とは区別し、制作の参考値として扱います。
生成したプロンプトの使い方
コピーまたはMarkdown保存した内容を、利用するAIの実装依頼へ貼り付けます。既存プロジェクトの設計、変更範囲、守るべき条件は追加要望に記入してください。
使い方
- サービス名と紹介したい内容を入力します。
- 利用者、主なCTA、デザインの雰囲気を指定します。
- Framework・CSS・Languageなどを選び、必要に応じて追加要望を記入します。
- 「プロンプトを作成」を押し、内容を確認してコピーまたはMarkdown保存します。
よくある質問
参考サイトや拡張機能は必要ですか？
どちらも不要です。サービスの企画を入力するだけでプロンプトを作成できます。参考CSSの解析結果は任意で追加できます。
AI APIを使っていますか？
使用していません。入力内容をテンプレートに沿ってブラウザ内で整理します。APIキーやログインは不要です。
企画や要望は保存されますか？
同じタブ内の画面移動では保持しますが、再読み込みやタブを閉じると消去します。サーバーへ保存しないため、生成結果は必要に応じてコピーまたはMarkdown保存してください。
そのまま公開できるLPが作られますか？
このツールが作るのは実装依頼のプロンプトです。Webページの実装・確認・公開は、生成内容を利用するAIや開発環境で行ってください。
元サイトの文章や画像をコピーしますか？
コピーしません。ユーザー提供内容と権利を持つ素材を優先し、不明な実績や口コミを創作しないよう指示します。