メインコンテンツへスキップ
見出し画像

AIが作るLPは、なぜ“AIっぽい”のか。1.9万ブックマークのデザインルールを、日本語11行にして試した

    「オンラインのExcelレッスンの申し込みページを作って」とAIに頼むと、青い帯の下に見出しがずらっと並び、その中の1つが「申し込まない理由」でした。

    頼むときに「申し込まない理由:高そう/ついていけるか不安/勧誘されそう」と書いたのを、AIがそのまま見出しにして、お客さんに見せてしまったんです。

    直し方は、AIを変えることではありませんでした。作らせる前に、日本語で11行の「決まり」を先に渡す。 同じAIで、最初の画面に見出しとボタンが来て、3ステップとよくある質問6つまで並ぶページになりました。

    この記事で渡すもの:

    • AIっぽいLPを見分ける8か所のチェック表

    • チャットAIに貼れる日本語ルールカード(11行)

    • いっしょに渡す「依頼メモ」の空欄テンプレ

    • Claude Code・Cursor・Codexに本家のルールを入れる手順(公式の説明より)

    • 手元の小さいAIで比べた画面と、うまくいかなかったところ


    1. もとになったルール集

    もとにしたのは、デザイナーのElayaさん(@elayadesigns)が公開している「ai-design-skills」です。

    中身は「landing-page-design」という1ファイルのルールで、英語で書かれています。前半が「何を書くか」(1ページ1つの申し込み、見出しの書き方、ページの順番)、後半が「どう見せるか」(フォント、余白、角丸、色、動き)です。

    10/26の週刊「今週のAI」でも、このルールの使い方を少し紹介しました。今回は実際に作らせて比べた結果と、チャットAIでも使える日本語版を置きます。


    2. AIっぽいLPを見分ける8か所

    AIが作ったページを見て「なんか素人っぽい」と感じたら、まずここを見ます。本家のルールと、今回の試作で実際に出たものから、自分の言葉でまとめました。

    画像
    1. ボタンの言葉が場所ごとにちがう。「詳しくはこちら」「送信」のように、押すと何が起きるかわからない

    2. 見出しが「効率化」「最適化」など、誰の何が楽になるのかわからない言葉

    3. 頼んだときの言葉が、そのまま見出しや本文に出ている(今回の「申し込まない理由」)

    4. 渡していないお客様の声や、実績の数字が勝手に入っている

    5. 背景のグラデーション、紫〜青紫、アクセント色が何色もある

    6. 絵文字をアイコン代わりに並べている

    7. カードの左だけに色の帯がある(片側だけの線)

    8. 英語用のフォントしか指定していない、極太や斜体が混ざっている

    5と6は、よく「AIっぽさ」の代表として言われるものです。ただ、今回使った小さいAIでは、紫もグラデーションも絵文字も1回も出ませんでした。出たのは1・2・3・7と、英語フォントの指定です。AIによって出るクセがちがうので、8か所全部を見ます。


    3. チャットAIに貼る日本語ルールカード

    本家のルールは長く、英語です。ChatGPTやClaudeのチャット欄に毎回貼るには重いので、上の8か所を「〜しない」の形にして、11行にまとめました。依頼文のいちばん上に貼ります。

    次のルールでLPを作ってください。
    中身のルール
    1. 申し込んでほしい行動は1つだけ。ボタンの文言はページ内で全部同じにする(例:「無料体験を予約する」)。「詳しくはこちら」「送信」「今すぐ」は使わない。
    2. 見出しは「誰が、何をしなくてよくなるか」を具体的に書く。「効率化」「最適化」「革新的」「次のレベル」のようなぼんやりした言葉は使わない。
    3. ページの順番は上から、最初の画面(見出し・補足1〜2文・ボタン)、困りごと、良くなること3つ、申し込みまでの3ステップ、よくある質問6つ、不安を下げる一言、最後のボタン。
    4. お客様の声・実績の数字・会社名は、私が書いたもの以外は作らない。無いなら、その欄ごと載せない。
    見た目のルール
    5. 背景にグラデーションを使わない。背景は白か、ごく薄い1色。
    6. アクセント色は1色だけ。紫・青紫は使わない。
    7. 絵文字をアイコンの代わりに使わない。
    8. フォントは1種類(font-family: 'Noto Sans JP', sans-serif;)。極太(900)と斜体は使わない。
    9. 余白は 8・16・24・32・48・64px の中から選ぶ。角丸は2種類まで。影はつけないか、ごく薄いものを1種類だけ。
    10. 枠線はカードの全周につけるか、つけないか。左側だけの色の帯のような片側だけの線は使わない。
    11. 見出しは1行を短くして、意味の切れ目で改行する。

    試してみて、1行足したほうがいいとわかったことがあります。小さいAIは「困りごと」「不安を下げる一言」というルールの言葉を、そのまま見出しにしました。気になる場合は、最後にこう足してください(この12行目を足した版は、まだ試していません)。

    12. ルールの中の言葉(「困りごと」「不安を下げる一言」など)を、そのまま見出しに使わない。見出しは読む人の言葉で書く。

    いっしょに渡す依頼メモ

    ルールだけでは、AIは中身を想像で埋めます。下の空欄を埋めて、ルールカードのあとに続けます。

    LP(申し込みページ)を作ってください。
    ・サービス名と内容:
    ・申し込んでほしいこと(1つだけ):
    ・申し込むと受け取れるもの:
    ・読む人:(どんな人で、何に困っているか)
    ・申し込まない理由になりそうなこと:(ページ内で答えるため。見出しにはしない)
    ・見せられる証拠:(なければ「なし」)
    ・料金:
    ・口調:
    出力:HTMLファイル1つ。CSSは<style>の中に書く。外部のファイルは読み込まない。

    「申し込まない理由」の行に「見出しにはしない」と書いてあるのは、冒頭の失敗をふせぐためです。


    4. 手元の小さいAIで比べた結果

    画像

    同じ依頼メモ(架空のオンラインExcelレッスン「セルノート」)で、3通りに作らせました。使ったのはパソコンの中で動く小さいAI(qwen3の4B)で、ChatGPT・Claude・Cursorでは試していません。

    • ふつうに頼む(2回):2回とも最後まで書けました。1回目は申し込みフォームが中心で、よくある質問はなし。2回目は「申し込まない理由」が見出しになり、カードの左だけに青い帯がつきました。どちらも最初の画面にボタンはありません。

    • 本家のルールを全部渡す(2回):2回とも、ページの中身が出ませんでした。見た目の設定(CSS)を同じ形でくり返し書き続けて、上限で止まりました。外部のフォントを読み込まないよう頼んだのに、読み込む行も入っていました。

    • 日本語ルールカードを貼る(3回):3回中2回は最後まで書けて、2回とも最初の画面に見出しとボタン、3ステップ、よくある質問6つが入りました。ボタンの言葉もページ内で同じです。残りの1回は、本家のルールと同じくCSSのくり返しで止まりました。

    書き上がった2回にも、直す所はありました。

    • ルールの言葉「困りごと」「良くなること」がそのまま見出しになった(さっきの12行目はこのため)

    • 「30分でExcelが上手になる」と、約束しすぎの見出しが出た

    • 文字が1か所化けた

    • 最後のボタンが抜けた回があった

    見た目はどれも素っ気ないままです。ルールで変わったのは「何を、どの順番で置くか」で、きれいになったわけではありません。


    5. Claude Code・Cursor・Codexに本家のルールを入れる

    ここは公式のREADMEに書かれている手順です。こちらでは試していません。

    Claude Code(作業フォルダで実行):

    mkdir -p .claude/skills
    git clone https://github.com/elayadesign/ai-design-skills.git /tmp/ai-design-skills
    cp -r /tmp/ai-design-skills/skills/landing-page-design .claude/skills/

    入れたら「〇〇のLPを作って」とふつうに頼みます。

    Cursor:

    mkdir -p .cursor/rules
    curl -o .cursor/rules/landing-page-design.md \
      https://raw.githubusercontent.com/elayadesign/ai-design-skills/main/skills/landing-page-design/SKILL.md

    または、SKILL.mdの中身を設定の「Rules for AI」に貼ります。

    Codex:SKILL.mdの中身を、作業フォルダの AGENTS.md に入れます。

    ターミナルを使わない場合:GitHubからSKILL.mdをダウンロードして、Claudeのプロジェクトに入れるか、チャットに添付して「このルールに従って」と頼みます。

    日本語のページを作るときは、本家のルールにある英語用フォントの指定だけ、Noto Sans JPなど日本語が出るものに変えるよう一言足しておくと安心です。


    6. 使う前に知っておくこと

    • 本家のルールは長くて細かいので、小さいAIや無料のAIには重すぎることがあります。今回は2回とも途中で止まりました。大きいAIで同じことが起きるかは試していません。重いと感じたら、上の日本語カードを使います。

    • 日本語カードでも、3回中1回は壊れました。出てきたページは、8か所のチェック表で必ず見直します。

    • ルールが変えるのは「並べ方」と「やらないこと」です。デザインがきれいになるとは限りません。

    • 本家のルールには、それらしい名前や数字で中身を埋めるよう書かれた部分があります。実在するお店やサービスのページでは、ルールカードの4行目のように「渡していない声や数字は作らない」を入れておきます。


    今日の5分

    自分が前にAIで作ったページか、作りかけの資料を1つ開いて、8か所のチェック表で当てはまる所に印をつけてみてください。当てはまった所だけをルールカードに残せば、次に頼むときの自分用ルールになります。

    次回の仕事のAIは、口コミ返信の話です。星の数と状況で頼み方を6つに分けて、AIの返信が「ご来店ありがとうございます」ばかりになるのを直します。

    AIを仕事で使う小さな工夫を、試した結果つきで毎日出しています。フォローしてもらえるとうれしいです。

    #生成AI #LP制作 #Webデザイン #ClaudeCode #仕事効率化

     
     
    生成AIを実際に試して、使えた頼み方も失敗した頼み方も結果ごとまとめています。仕事の時短、画像・動画づくり、AI副業、暮らしのちょっとした用事まで。Xでは、すぐ試せる小ワザを毎日ポストしています → @hayami_ai_guide

    あなたへのおすすめ