AI Services Market › スキルファクトリー › Web › Portrait Switcher Testimonials
$4.99 · サインイン不要v1.0.0– 回表示
Portrait Switcher Testimonials
一度にひとつの注目ストーリー。ポートレートが誘います。
AIがポートレートスイッチャー型のお客様の声セクションを作成します。大きな注目の引用ひとつと、クリックで切り替わるポートレートの列で構成し、訪問者が称賛の壁を流し読みするのではなく、信じられるストーリーを一度にひとつずつ読めるようにします。

こんな方におすすめ
信じられる社会的証明をサイトに加えるマーケター、創業者、フロントエンド開発者の皆さま
所要時間
~30分(初回のセクション作成)
レベル
中級
3ステップでインストール
登録不要。CLIツールも不要です。お使いのAIを選んで、1行コピーして貼るだけです。
ご自分で入れたい場合は、スキルを購入($4.99)し、購入完了画面からZIPをダウンロードして、上のディレクトリに展開し、AIのセッションを再起動してください。結果は同じです。すでに購入済みの場合は、AIアシスタントにダウンロードしてもらうこともできます。
パックの内容
SKILL.md(手順書)1点とスターターテンプレート1点が入っています。プレビューはこちらです:
Portrait Switcher Testimonials
When to use
- Your landing page has six great testimonials but a wall of quotes makes visitors read none of them
- You want one featured story to carry the section, with the other voices one click away
- Your testimonials come with real portrait photos and you want the faces to do the inviting
- The section needs to work for keyboard and screen-reader users, not just mouse clicks
- You want an optional auto-advance that pauses the moment a visitor interacts
Workflow
- Pick the lineup (input: your testimonial pool → output: 4–8 chosen testimonials)
Choose four to eight testimonials that cover different buyer types, objections, or outcomes — not eight versions of "great product." One per persona is the rule: the skeptic, the switcher, the power user, the budget buyer. Fewer than four feels empty; more than eight and nobody clicks past the fifth. Rank them so the strongest objection-killer goes first — it is the default featured quote. - Shape each story (input: raw quotes → output: trimmed quote cards)
Trim every quote to two or three sentences that keep the speaker's own words and one concrete detail: a number, a time frame, a before-and-after. Cut generic praise ("amazing service!") and keep the sentence that only this customer could have written. Pair each quote with the speaker's full name, role, and company — anonymous quotes don't convert — and a portrait photo at least 400px square, cropped to the face, consistent lighting and background treatment across the set. - Build the switcher (input: quote cards → output: working switcher section)
Layout: one large featured panel (big quote, portrait, name, role, company) above or beside a horizontal row of portrait buttons. Clicking a portrait swaps the featured quote with a short crossfade; the active portrait gets a visible ring or underline so visitors always know which story they're reading. The switcher is a set of real buttons, not divs with click handlers — keyboard users tab through portraits and press Enter to switch, and screen readers announce the new quote via a live region. Auto-advance, if used, runs on a 6–8 second timer, pauses on hover, focus, or any click, and never restarts after a manual selection. - Write the transitions (input: working switcher → output: polished motion)
Keep motion honest: a 200–300ms fade-and-rise on the quote, no spinning, no sliding the whole panel off-screen. Motion must respect reduced-motion preferences — withprefers-reduced-motion: reduce, swaps happen instantly. Portrait thumbnails get a subtle scale or ring on hover, never a layout-shifting jump. If the section sits below the fold, make sure the first paint shows the default quote fully rendered, not an empty panel waiting on JavaScript. - Check the proof (input: polished section → output: verified section)
Verify every quote against its source: wording, name spelling, job title, company, and that you have permission to publish it. Test with JavaScript disabled — the default featured quote must still display. Test on a narrow phone screen: portraits must stay tappable (at least 44px targets) and the featured panel must not overflow. Finally, read the section as a skeptic: does each quote answer a real doubt, or does it just cheer?
テンプレートのプレビュー
Portrait Switcher Testimonials — Build Template
One featured quote at a time, portraits do the inviting. Fill in the lineup, then build.
The lineup (4–8 testimonials, one per buyer type)
Default featured (strongest objection-killer): #{n}
Portrait checklist (per speaker)
- [ ] Portrait ≥400px square, face crop, consistent treatment with the set
- [ ] Full name spelled correctly, role and company verified
- [ ] Written permission for quote + name + title + photo on file
Featured panel
- Quote typography: {large, e.g. 28–32px, high contrast}
- Attribution line: {Name} — {Role}, {Company}
- Portrait: {full-size portrait shown beside/above the quote}
スキルパック本体(SKILL.md とテンプレート)は英語で書かれています。


