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

Profile Card Testimonial Reel

スワイプできる実績。人を主役に、引用が締めます。

AIがプロフィールカードリール型のお客様の声セクションを作成します。写真、名前、役職、引用を備えたコンパクトなプロフィールカードが横スクロールするリールで、訪問者がストーリーフィードのようにスワイプして見られます。

Profile Card Testimonial Reel のプレビュー
こんな方におすすめ
モバイルファーストの社会的証明を作るマーケター、創業者、フロントエンド開発者の皆さま
所要時間
~35分(初回のセクション作成)
レベル
中級

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

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

Pro — 全511件のスキル

ご自分で入れたい場合は、スキルを購入($4.99)し、購入完了画面からZIPをダウンロードして、上のディレクトリに展開し、AIのセッションを再起動してください。結果は同じです。すでに購入済みの場合は、AIアシスタントにダウンロードしてもらうこともできます。

パックの内容

SKILL.md(手順書)1点とスターターテンプレート1点が入っています。プレビューはこちらです:

Profile Card Testimonial Reel

When to use

  • Your testimonials read best as people first — photo, name, role — with the quote as the payoff
  • You want a social-proof section that feels like a feed: swipeable, skimmable, alive
  • Most of your traffic is mobile, where horizontal swipe is the most natural gesture available
  • You have 8–20 testimonials and want them all reachable without a long vertical scroll
  • You want the section to show motion and abundance without hiding any testimonial behind a click

Workflow

  1. Build the cards (input: your testimonial pool → output: 8–20 profile cards)
    Each card is a mini-profile, not just a quote: portrait photo (at least 400px square), full name, role and company, one short quote (1–2 sentences), and one verifiable detail — a result, a time frame, a before-and-after. Cards are uniform: same width, same height, same internal layout. If a quote runs long, trim it to the sentence that only this customer could have written; the reel's rhythm depends on cards being interchangeable in size. Order the reel so the first three visible cards cover three different objections.
  2. Lay out the reel (input: cards → output: horizontal scroll reel)
    The reel is a horizontal scroll container with scroll-snap: each swipe lands cleanly on a card, never halfway between two. Show a peek of the next card at the right edge — that half-visible card is the affordance that says "there's more, keep swiping." On desktop, add previous/next arrow buttons and a visible scrollbar or progress indicator; on touch, native swipe does the work. Cards never wrap to a second row — one row, horizontal only. The reel must be usable with JavaScript disabled: native scroll still works, arrows are enhancement.
  3. Handle autoplay (input: reel → output: autoplay that knows when to stop)
    Autoplay, if used, advances one card every 5–7 seconds and stops permanently on the first sign of human intent: a swipe, a scroll, an arrow click, a hover, a focus. It never restarts on its own — a reel that keeps moving after the visitor grabbed it feels broken. Autoplay pauses when the section is off-screen and when the tab is hidden, so it doesn't burn through testimonials nobody is watching. Reduced-motion users get no autoplay at all. When in doubt, ship without autoplay: a reel that waits for the visitor beats one that races them.
  4. Make it keyboard- and reader-friendly (input: reel → output: accessible reel)
    The scroll container is keyboard-operable: arrow keys move between cards when the reel has focus, Tab reaches each card's interactive elements in order, and focus is always visible. Screen readers get each card as a self-contained unit — name, role, quote announced together — not a jumble of fragments. Every card's interactive elements (links, expand controls) are real controls, not click handlers on divs. Test the whole reel with a keyboard alone: if you can't reach a card, neither can a keyboard user.
  5. Check the reel (input: finished reel → output: verified reel)
    Verify every card against its source: quote wording, name spelling, title, company, permission to publish. Test on a real phone: swipe with a thumb, confirm snap lands cleanly, confirm the peek of the next card is visible. Check that no card's text overflows its fixed height at any breakpoint. Read the first three cards as a skeptic: do they answer real doubts, or just cheer? A reel full of generic praise is a slot machine of nothing.

テンプレートのプレビュー

Profile Card Testimonial Reel — Build Template

One row, horizontal only, swipeable like a feed. Fill in the cards, then build.

The cards (8–20, uniform size)

Total cards: {8–20} — First three cards cover: {objection 1} / {objection 2} / {objection 3}

Card checklist (per speaker)

  • [ ] Portrait ≥400px square, consistent treatment with the set
  • [ ] Full name spelled correctly, role and company verified
  • [ ] Written permission for quote + name + title + photo on file

Reel layout

  • Container: horizontal scroll, one row, cards never wrap
  • Snap: scroll-snap lands cleanly on one card, never halfway between two

スキルパック本体(SKILL.md とテンプレート)は英語で書かれています。

Pro — 全511件のスキル

こちらもおすすめです