料金ログインつくってみる

Web無料スキル

お客さまの声の壁セクション v1.0.0

お客さまの声を組石のように並べるか、ゆっくり流れる壁にするセクション。掲載の了承を得た声だけを出します。

Codex、Claude Code、Cursor など、ほか 25 種のエージェントに対応。PopNow 経由で ChatGPT や Claude でも使えます。 PopNow の中で Poppie に作ってほしいですか？キャンバスのスキルを見る →

ZIP をダウンロード

Codex、Claude Code、Cursor などのエージェントに貼り付けてください。スキルをダウンロードし、適切なフォルダに配置します。

インストール先

スキルフォルダ: ~/.agents/skills多くのエージェントは ~/.agents/skills を読み込みます

手動でインストール

mkdir -p ~/.agents/skills && cd ~/.agents/skills
curl -fL -H "Authorization: Bearer $POPNOW_API_KEY" \
  https://api.popnow.ai/api/v1/agent-skills/testimonial-wall-section/download -o popnow-testimonial-wall-section.zip
unzip -o popnow-testimonial-wall-section.zip && rm popnow-testimonial-wall-section.zip

POPNOW_API_KEY に PopNow の API キーが必要です · API キーを取得

次にスキルを使うよう頼む popnow-testimonial-wall-section

やりたいことを伝えるだけでも、エージェントが適切なスキルを選びます。

コーディングエージェントがなくても大丈夫

PopNow 経由でチャットアプリから使えます。インストールは不要です。

スキルは無料です。オプションの AI 画像・動画・音声は、生成前に見積もりを提示し、承認を待ちます。API キーでの呼び出しは別管理の米ドル（USD）建て API 残高を使い、OAuth/MCP で接続した ChatGPT や Claude からの生成は Web サイトのクレジットを使います。

ランディングページの社会的証明のセクションを組み立てます。暖かい紙に、かすかな罫線の格子を重ねた声のカードを、静的な組石レイアウトか、一時停止ボタン付きの 3 列の流れるレイアウトで見せます。各カードには、言葉の出どころと、本人が掲載に同意したかを記録し、チェッカーはプレースホルダーと同意のない声を止めます。PopNow の専用ツールは、お客さまが送ってきた顔写真を、誰が写っているかを変えずに、切り抜き、アップスケール、ライト調整で揃えられます。

対応エージェント
PopNow で生成: 画像
必要なもの: Node.js

2026年10月23日更新 · 41 KB · 個人やクライアントの仕事に使えます。パッケージの再販や共有はご遠慮ください。

できること

グリッドと流れるレイアウト、一時停止、ダークモードを備えた、オフラインの HTML セクション 1 つ
出典と許可の欄に型をつけた React コンポーネント
サンプルの文、同意の記録がない場合、絵文字のアイコン、外部のアセットを失敗にするチェッカー
声を集めるためのリクエストメールと、記録の付け方のガイド
任意：見積もりのあとに PopNow で行う顔写真の清掃

向いている用途

SaaS、アプリ、講座のランディングページ
満足したお客さまがいる代理店やフリーランスのサイト
初期利用者のフィードバックがすでにあるローンチページ

向いていない用途

まだ本物の声がないページ
確認済みのレビュー元が必要な星評価のウィジェット
動画の声

使い方

Claude・ChatGPT で

PopNow のスキル「お客さまの声の壁セクション」（testimonial-wall-section）を使って、次のことをしてください：Astro のランディングページに、content/quotes.json の承認済みの 6 件の声で、お客さまの声の壁を追加して。写真のない人はイニシャルで。

コーディングエージェントで

/popnow-testimonial-wall-section Astro のランディングページに、content/quotes.json の承認済みの 6 件の声で、お客さまの声の壁を追加して。写真のない人はイニシャルで。

次はこれ

お客さまが送ってきた 3 枚の顔写真を切り抜いて、光を揃えて。見積もって。

サポートのチケットで見つけた 2 件の声について、掲載許可を求めるメールを書いて。

用意しておくもの

本物のお客さまの声。名前と役職は、表示してほしい形で
掲載についての各人の同意と、送ってもらった写真
暖かい紙とティールのパレット以外の、ページの色（あれば）
顔写真の清掃のための PopNow API キー（任意）

ガイド: AI でランディングページを作る方法

似ているスキル

すべて見る →

よくある質問

なぜ例のレビューではなく、プレースホルダーのカードを入れるのですか？

作られたレビューを名前や顔と並べると、読者を誤解させ、広告の規則に触れることがあります。テンプレートはレイアウトが見えるよう「サンプル」と書かれたカードを使い、チェッカーは、各カードに本物の出典と記録された許可があるまで、ページを通しません。

お客さまの写真は生成されますか？

いいえ。アバターはイニシャルか、お客さまが送ってくれた写真です。PopNow は、送られた写真を整えるためだけに使います。雑然とした背景を切り抜き、小さな画像を拡大し、一式の光を揃えます。

流れるレイアウトはアクセシブルですか？

ホバーやキーボードのフォーカスで一時停止し、目に見える一時停止ボタンがあり、複製されたループのカードはスクリーンリーダーから隠され、動きを減らす設定がオンのときは静的なグリッドに切り替わります。

React 版にはアニメーションのライブラリが要りますか？

いりません。流れは CSS のキーフレームで、コンポーネントは React だけに依存するので、Next.js、Vite、Remix、Astro のアイランドでも動きます。

この壁を、お客さまの声の全ページにできますか？

はい。同じコンポーネントで、製品や役職で絞り込める、お客さまの声のページ全体を埋めることも、ホームページに短いお客さまの声のセクションとして置くこともできます。明るい色とダークの両方で届き、ひとつの引用も作らずに、愛されている感じを出せます。