AI Services Market
AI Services Market › スキルファクトリー › Web › Portrait Switcher Testimonials
$4.99 · サインイン不要v1.0.0– 回表示

Portrait Switcher Testimonials

一度にひとつの注目ストーリー。ポートレートが誘います。

AIがポートレートスイッチャー型のお客様の声セクションを作成します。大きな注目の引用ひとつと、クリックで切り替わるポートレートの列で構成し、訪問者が称賛の壁を流し読みするのではなく、信じられるストーリーを一度にひとつずつ読めるようにします。

Portrait Switcher Testimonials のプレビュー
こんな方におすすめ
信じられる社会的証明をサイトに加えるマーケター、創業者、フロントエンド開発者の皆さま
所要時間
~30分(初回のセクション作成)
レベル
中級

3ステップでインストール

登録不要。CLIツールも不要です。お使いのAIを選んで、1行コピーして貼るだけです。

Pro — 全511件のスキル

ご自分で入れたい場合は、スキルを購入($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

  1. 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.
  2. 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.
  3. 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.
  4. 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 — with prefers-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.
  5. 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 とテンプレート)は英語で書かれています。

Pro — 全511件のスキル

こちらもおすすめです