サービス紹介LPキット

こんなときに

自社サービスの紹介ページを作ると、AIが作ったと一目でわかる見た目になる

できること

自社サービスを紹介する1枚のページ（LP）を作ります。書き始める前に、実在のサービス紹介ページを5つ以上撮って数え（ヒーローの組み方・文字数・画像の割合・色の使い方）、取り入れる型を決めてから、ひな形を書き換えます。「AIが作った感じ」になる原因の一覧で点検し、PC とスマホで撮って参考サイトと並べて見比べてから出します。導入社数やお客様の声のような作り話は書かず、分からない所は仮置きにして最後に一覧で知らせます。

このキットに入っている「直し」

1. 背景のグラデと点の模様がAI感の元ヒーローを濃紺のグラデ＋点の模様＋光のにじみ＋浮かぶ札で作ったら「AIが作ったと100%わかる」と言われた。白地に「コピー＋説明 → 大きな写真 → CTA」の並び（実在のSaaSで多い型）に変えた
2. 文字が少なくても単調に見える全体の文字数は参考サイトより少なかったのに「テキスト多すぎ」と言われた。原因は白と薄灰の地の交互と同じ形のカードの羅列。濃い帯を3回入れ、節ごとに地の色を変え、画像の面積を増やした
3. 分析を飛ばすと作り直しになる参考サイトを見ずに作った版は2回とも作り直しになった。先に5つ以上撮って、見出しの字数・画像の割合・色面の回数を数えてから型を決める順番にした
4. 全体のスクショが途中で繰り返すChromeは1枚が約16,000pxを超えると同じ所を繰り返して写す。高いページは8,000pxごとに分けて撮るようにした
5. 固定ヘッダーが全体のスクショの途中に写る上に貼り付くヘッダーが、撮った画像の途中に写り込んでいた。撮る間だけ固定を外すようにした
6. 表示していない画像を「切れ」と誤判定スマホで隠している画像は loading="lazy" のため読み込まれず、切れた画像として数えていた。画面に出ている画像だけを数えるようにした
7. 生成した写真に顔が写る「顔を写さない」と頼んでも横顔がはっきり写って返ってきた。人の写っていない部屋の写真を先に作り、それを見本に「同じ部屋に人を足す・後ろ姿」と頼む手順にした
8. 画像生成が混雑で断られる高画質のモデルが503（混雑）を何度も返した。30秒おきに3回まで自動でやり直し、駄目ならモデルを変えるようにした
9. 実画面に試験データや実名が写る確認用サイトの画面に「テスト」「demo」の取引先、実在らしい氏名、予約番号、「まだ動きません」の表示が写っていた。使ってよい画面の条件を決め、読ませたい所だけ切り出すようにした

入っているもの

• 書き換えて使えるLPのひな形（ヒーロー・できること・安心の仕組み・導入の流れ・よくある質問・運営会社）
• 進め方の順番（参考サイトを5つ撮って数えてから書く）
• 「AIが作った感じ」の正体の一覧と直し方
• 参考サイトをPC・スマホで撮って数える道具
• 作ったページの点検（横スクロール・画像切れ・仮置きの数）
• 参考サイトと並べる比較画像の道具
• 顔を写さない写真の頼み方と、写真を作る道具

最初に決める3つ

1. 何のサービスか（誰の、どんな手間が、どう楽になるか）
2. 言ってよいこと・言ってはいけないこと（料金・実績・社名）
3. 色（会社やサービスの色）

必要なもの

• 追加費用なしClaude Code または Codexページを書き換えるのはこのAIです。CLAUDE.md と AGENTS.md の両方を置いてあります
• 追加費用なしGoogle Chrome と Node.js 22以上参考サイトを撮る・作ったページを点検するため。追加で入れるものはありません
• 別途費用Gemini の APIキー写真をAIに作らせるときだけ。手持ちの写真を使うなら要りません

使い方

お使いのAIに、これを貼るだけです。

nice to have のキット「サービス紹介LPキット」を使いたい。https://nicetohave.app/g/7HMKRMW4-•••••••••• のとおりに取り込んで。

Claude Code でも Codex でも同じです。
貼る前に、AIに何をさせるのか読む

よくある質問

「サービス紹介LPキット」で何ができますか？

自社サービスを紹介する1枚のページ（LP）を作ります。書き始める前に、実在のサービス紹介ページを5つ以上撮って数え（ヒーローの組み方・文字数・画像の割合・色の使い方）、取り入れる型を決めてから、ひな形を書き換えます。「AIが作った感じ」になる原因の一覧で点検し、PC とスマホで撮って参考サイトと並べて見比べてから出します。導入社数やお客様の声のような作り話は書かず、分からない所は仮置きにして最後に一覧で知らせます。

どの AI で使えますか？

Claude Code と Codex で使えます。キットのページの「貼る文」を1行コピーして AI に貼るだけで、キットを取り込んで始まります（コピーには GitHub か Google のログインが要ります）。

費用はかかりますか？

キットは無料です。別途、Gemini の APIキーに費用がかかることがあります。AI ツールそのものの利用料は、それぞれの契約によります。

自分で AI に頼むのと何が違いますか？

作った人が実際の仕事で踏んだ落とし穴を直した手順が、最初から入っています：「背景のグラデと点の模様がAI感の元」「文字が少なくても単調に見える」「分析を飛ばすと作り直しになる」「全体のスクショが途中で繰り返す」「固定ヘッダーが全体のスクショの途中に写る」「表示していない画像を「切れ」と誤判定」「生成した写真に顔が写る」「画像生成が混雑で断られる」「実画面に試験データや実名が写る」。

最初に何を決めますか？

何のサービスか（誰の、どんな手間が、どう楽になるか）、言ってよいこと・言ってはいけないこと（料金・実績・社名）、色（会社やサービスの色）の3つです。AI が1つずつ聞いてきます。

個人情報を扱いますか？

扱いません。

応援した人

応援の受け付けを始めたら、このキットを応援した人がここに並びます。