原稿からワイヤーフレームまで一気通貫

Wordの原稿を納品するだけのライターと違い、情報の優先順位やレイアウトを定義した白黒の設計図（HTMLワイヤーフレーム）も納品。実装におけるコピーとレイアウトの分断を防ぎます。

HTMLワイヤーフレーム

HTMLワイヤーフレーム

ワイヤーフレームとは、コピーの配置・情報の優先順位・ページ全体の視覚的な構造を定義した白黒の設計図です。工学型コピーライティング™では、「優れたコピーには、優れたレイアウトが不可欠」 という考えに基づき、ワイヤーフレームによるレイアウト設計まで、納品スコープに含めています。

なぜHTML形式なのか？

一般的に、ワイヤーフレームはFigmaなどのデザインツールで作成されることが多いです。

しかし、それはあくまで静止画であり、実際のブラウザ上の挙動や体験を完全に再現できるわけではありません。それなら、最初からブラウザで動くHTMLを作ったほうが合理的だと考えました。レスポンシブの挙動も正確に確認できます。

本来なら構築にコストと工数がかかるHTMLワイヤーフレームですが、工学型コピーライティング™では、生成AI（LLM）を活用することで、低コストかつ高速で作れるワークフローを確立しています。

生成AI（LLM）で本当に作れるのか？

後述する構造化されたコピー・デッキ（実装用原稿）と、精密に組まれたプロンプトがあれば、生成AIで高品質なHTMLワイヤーフレームを生成することは可能です。以下は実際のプロンプトの一部です。

あなたはプロフェッショナルなUI/UXデザイナー兼フロントエンドエンジニアです。
以下の【要件】と【デザインシステム】に基づき、Tailwind CSSを使用したLP（ランディングページ）のワイヤーフレーム（HTMLコード）を生成してください。

【要件】
・商材/サービス：
・原稿：
※添付の実装用原稿を参照。原稿のコピーを基本的にはそのまま使うこと
・フォント：Noto Sans JPを使用（Google Fontsから読み込むこと）
・レスポンシブ対応：スマホ表示とPC表示の両方に対応すること。
・必要と思われる箇所に画像のプレースホルダーを挿入してください。

【デザインシステム（厳守すること）】
・コンテンツの幅は1400pxをデフォルトにしてください。※意図的にあえて外すのはありですが、基本は1400pxに揃えてください。
・カラースキーム：白（#ffffff）黒（#222222）グレー（#F8F8F8）のみを使用するモノクロームデザイン。これら以外は一切使用禁止です。
・タイポグラフィ：文字の色に頼らず、フォントサイズとウェイト（太さ）で情報の階層を……（後略）

レイアウトやカラースキーム、タイポグラフィの厳密な指定があれば、生成AIがよく吐き出しがちな「海外SaaS風」 な雰囲気になることはありません。日本語のコピーに適したタイポグラフィ、レイアウトを精度高く生成できます。【デザインシステム（厳守すること）】の指示を変えれば、異なるレイアウトや構成のワイヤーフレームを作ることも容易です。

また、修正の際も、コードとCSSを手作業で調整する必要がありません。こちらとしては、プロンプトで指示するだけで、ミリ単位の余白調整からレイアウトの変更まで、細部の調整が可能です。修正コストが限りなく低いため、お客様は、こちらの工数に配慮することなく、修正依頼を投げていただけます。

なお、使用するモデルはGoogleの「Gemini 3.1Pro」 です。フロントエンドの生成能力では群を抜いています。

コピー・デッキ（実装用原稿）

コピー・デッキ

コピー・デッキとは、見出し・本文・CTAまで、一気通貫で設計した実装用原稿のことです。HTMLタグの指定（H1、H2、H3、p、ul、CTA、etc……）、コピー本文、実装上の補足ノート、それら全てを、セクション単位で構造化しています。

コピー・デッキの構成

コピー・デッキは、Webページを構成する各要素に対して、要素（HTML）・原稿（Copy）・補足の3列で整理されています。

項目意図・目的
要素（HTMLタグ）各テキストをどのHTML要素として実装するかを指定。見出しの階層（H1〜H4）、段落（p）、リスト（ul）、CTAボタンなど。
原稿（Copy）実際に実装するコピーテキスト。
補足フォントサイズ、テキストカラー、レイアウト上の扱いなど、デザイン・実装時の注意事項。

このように、情報を構造化することで、お客様側でのWeb実装作業がスムーズになります。Web制作者に依頼するにしても、自分で内製するにしても、迷いなく実装することが可能です。

生成AI（LLM）とも好相性

また、HTMLタグの指定（H1、H2、H3、p、ul、CTA）、コピー本文、実装上の補足ノート、これらが全てセクション単位で構造化されている点は、LLMとも好相性です。LLMは、このコピー・デッキを読めば「何を、どの階層で、どの順番で、どういう意図で配置するか」 を全て理解できます。だからこそ、数分で精密なHTMLワイヤーフレームが出力できるのです。

よくある質問

コピー・デッキとワイヤーフレームの違いは何ですか？
コピー・デッキとワイヤーフレームの納品形式は何ですか？
ワイヤーフレームはデザインカンプとは違うのですか？
コピー原稿・ワイヤーフレームは単体で依頼できますか？
工学型コピーライティング™

その他の特長はこちら

スモールBtoBに特化

一般消費者向け（BtoC）ではなく、スモールBtoB（一人起業家、フリーランス含む）のコピーライティングに特化。BtoB特有の購買プロセスを理解したコピーライターが全行程を牽引します。

詳しく見る

体系化されたリサーチ手法

商品価値の細分化、競合メッセージの調査、顧客起点での独自価値の定義など、体系化されたリサーチ手法と分析フレームワークを採用。書き手の感性やひらめきに依存するプロセスを排除し、事実の抽出を重視します。

詳しく見る

独自のコピー構築メソッド

合計9つのモジュールをロジカルに組み上げる独自の構築手法「ビジネス・ロジック・ストラクチャー（Business Logic Structure、略：BLS）」を開発。事実とロジックを積み上げ「売れる構造」 を言語化します。

詳しく見る

言語基盤（インフラ）の構築

使い捨ての原稿ではありません。リサーチ・分析フレームとロジック設計のドキュメントは、Webサイト・営業資料・ブログ・SNSと、媒体を問わず何度でも転用できる言語インフラとなります。

詳しく見る