原稿からワイヤーフレームまで一気通貫
多くのライターは「良い原稿を書くこと」 に集中しますが、実装まで見据えた情報設計には踏み込みません。私はWeb技術への理解をベースに、情報の優先順位やレイアウトを定義したワイヤーフレームの作成まで対応できます。コピーとレイアウトの分断を防ぎ、制作をスムーズに進めます。
HTMLワイヤーフレーム
ワイヤーフレームとは、コピーの配置・情報の優先順位・ページ全体の視覚的な構造を定義した白黒の設計図です。工学型コピーライティング™では、「優れたコピーには、優れたレイアウトが不可欠」 という考えに基づき、ワイヤーフレームによるレイアウト設計まで、納品スコープに含めています。
なぜHTMLワイヤーフレームなのか？
一般的に、ワイヤーフレームはFigmaなどのデザインツールで作成されることが多いです。
しかし、それはあくまで静止画であり、実際のブラウザ上の挙動や体験を完全に再現できるわけではありません。それなら、最初からブラウザで動くHTMLを作ったほうが合理的だと考えました。レスポンシブの挙動も正確に確認できます。
本来なら構築にコストと工数がかかるHTMLワイヤーフレームですが、工学型コピーライティング™では、生成AI（LLM）を活用することで、低コストかつ高速で作れるワークフローを確立しています。
生成AI（LLM）で本当に作れるのか？
構造化された原稿と、精密に組まれたプロンプトがあれば、生成AIで高品質なHTMLワイヤーフレームを生成することは可能です。以下は実際のプロンプトです。
あなたはプロフェッショナルなUI/UXデザイナー兼フロントエンドエンジニアです。
以下の【要件】と【デザインシステム】に基づき、Tailwind CSSを使用したLP（ランディングページ）のワイヤーフレーム（HTMLコード）を生成してください。
【要件】
・商材/サービス：
・原稿：
※添付の実装用原稿を参照。原稿のコピーを基本的にはそのまま使うこと
・フォント：Noto Sans JPを使用（Google Fontsから読み込むこと）
・レスポンシブ対応：スマホ表示とPC表示の両方に対応すること。
・必要と思われる箇所に画像のプレースホルダーを挿入してください。
【デザインシステム（厳守すること）】
・コンテンツの幅は1400pxをデフォルトにしてください。
・カラースキーム：白（\#ffffff）黒（\#222222）グレー（\#F8F8F8）のみを使用するモノクロームデザイン。これら以外は一切使用禁止です。
・タイポグラフィ：文字の色に頼らず、フォントサイズとウェイト（太さ）で情報の階層を明確にする。見出しは font-bold tracking-tight を推奨。
・シェイプ：ボタンやカードなどの要素には rounded-md または rounded-lg を使用。
・余白：PaddingとMarginを大きめに取り、ゆとりのあるミニマルなレイアウトにする。
・エフェクト：立体感は控えめな shadow-sm を使用し、強い影は避ける。
・インタラクション：ボタンやリンク、カードには hover: クラスと transition-all duration-200 などを組み合わせ、上品なホバーエフェクトを必ずつけること。フォーカス時のアウトライン（focus:ring-black等）も設定する。
・ヘッダーのロゴ部分はテキストではなく、w-32 h-8 程度のグレー背景で「LOGO」とだけ記載したプレースホルダーブロックにすること。
・フッターはリンクやテキストを入れず、セクション全体をグレー背景（\#e5e5e5）にし、「Footerエリア」とだけ記載した全幅のプレースホルダーにすること。
・トーン＆マナー：モダン、プロフェッショナル、洗練、無駄を省いたミニマルな印象。
出力は、すぐにブラウザでプレビューできる完全な単一のHTMLファイル（\<\!DOCTYPE html\>から始まるコード）として出力してください。TailwindのPlay CDNを読み込んでください。レイアウトやカラースキーム、タイポグラフィの厳密な指定があれば、生成AIがよく吐き出しがちな「海外SaaS風」 な雰囲気になることはありません。日本語のコピーに適したタイポグラフィ、レイアウトを精度高く生成できます。【デザインシステム（厳守すること）】の指示を変えれば、異なるレイアウトや構成のワイヤーフレームを作ることも容易です。
また、修正の際も、コードとCSSを手作業で調整する必要がありません。こちらとしては、プロンプトで指示するだけで、ミリ単位の余白調整からレイアウトの変更まで、細部の調整が可能です。修正コストが限りなく低いため、お客様は、こちらの工数に配慮することなく、修正依頼を投げていただけます。
なお、使用するモデルはGoogleの「Gemini 3.1Pro」 です。フロントエンドの生成能力では群を抜いています。
緻密に設計された原稿テンプレート
BtoB無形商材に最適化された原稿テンプレートを保有しています。BLS（ビジネス・ロジック・ストラクチャー）の9モジュールと対応しており、そこで構築した売れるロジックを、シームレスに原稿に落とし込みます。
以下は、サービス詳細ページやLP向け原稿テンプレートのセクション構成です。あくまで標準テンプレートなので、必ずしもこの通りになるわけではありませんが、基本的にはこのような形で、説得のロジックを網羅します。
| No. | Heading | セクション名 | 対応BLSモジュール | 役割 |
|---|---|---|---|---|
| 1 | H1 | サービス名 | M4 Unique Naming | SEOキーワードを含む端的なサービス名。捻らない |
| 2 | H2 | 独自の〇〇を駆使し、〇〇の課題を解決します | M1 Insights M2 Conventional Limit M3 Core Logic M4 Unique Naming | 問題提起→既存解決策の限界→解決原理を一気通貫で展開するセットアップセクション |
| 3 | H2 | 〇〇でよくある課題 | M1 Insights | 見込み客が「これは自分だ」と感じる課題を3〜5つ列挙 |
| 4 | H2 | 〇〇型コンサルティングの特長 | M5 Core Benefit | 商品がもたらす便益を最大3つに絞って提示 |
| 5 | H2 | 導入事例 | M7 Proof of Results | 事実・数値で裏付ける（数値・社名・課題・結果の明記） |
| 6 | H2 | 支援プロセス | M6 Systemized Process | 体系化されたプロセスを示し、再現性を証明する |
| 7 | H2 | 納品物一覧 | M6 Systemized Process | 独自ツール・フォーマットの命名と説明で再現性を補強する |
| 8 | H2 | 料金 | M9 Friction Removal | 価格の透明性で「高いのでは？」「追加費用は？」の摩擦を解除する |
| 9 | H2 | 〇〇（会社名）の強み | M8 Unfair Advantage | 競合に模倣できない理由を3点程度で示す |
| 10 | H2 | お客様の声 | M7 Proof of Results | 「変化の事実」として語られている声を掲載する |
| 11 | H2 | ご依頼の流れ | M9 Friction Removal | 申し込みから開始までを3ステップ程度で可視化し、行動のハードルを下げる |
| 12 | H2 | よくある質問 | M9 Friction Removal | 意思決定を止めている障壁をQ&A形式で一つずつ取り除く |
| 13 | H2 | 関連サービス | — | 関連サービスへの内部リンク |
| 14 | H2 | お役立ち情報 | — | 関連ブログ・資料・動画への内部リンク |
また、HTMLのセクション単位で構造化されており、生成AIとも好相性です。生成AIは、この原稿を読み込めば、「何を、どの階層で、どの順番で、どういう意図で配置するか」 を理解できます。それにより、精密なHTMLワイヤーフレームが出力可能です。
よくある質問
- 原稿やワイヤーフレームの納品形式は何ですか？
原稿はGoogleドキュメント、ワイヤーフレームはHTMLファイルで納品します。原稿に関しては、ご希望であれば、Microsoft Word形式での納品も可能です。ご相談ください。
- ワイヤーフレームはデザインカンプとは違うのですか？
はい。ワイヤーフレームは色やビジュアル要素を省いた白黒のレイアウト資料です。コピーの配置・情報の優先順位・ページ構造の確認が目的であり、ビジュアル要素やカラー、その他デザインの細部を作成・共有するわけではありません。