Tilted Testimonial Card

1つの引用、1つの傾き、すべての注目を。

AIがお客様の声セクションのデザイナーになります——わずかに傾けた1枚の引用カードを、支える図形と柔らかな影の上に重ねて作成します。1人の顧客の言葉が、平坦なグリッドの1つではなく、ページの主役になります。

こんな方におすすめ

1つの引用にセクションを担わせたいマーケターやランディングページビルダー

所要時間

約30分

レベル

初心者向け

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

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

Pro — 全511件のスキル

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

パックの内容

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

Tilted Testimonial Card

When to use

Your landing page needs one strong customer quote above the fold, not a wall of ten forgettable ones
You have a single standout testimonial — a specific result, a vivid before-and-after — that deserves the spotlight
Your page already has grids, cards, and straight edges everywhere, and one tilted element would break the monotony
You want social proof next to a signup form or pricing block without adding a whole new section
You are designing a hero, a case-study teaser, or a sales page where one voice should carry the argument

Workflow

Pick the one quote (input: your raw testimonials → output: one chosen quote + attribution)
Choose a single quote with a concrete detail — a number, a time saved, a before-and-after — not generic praise. Trim it to one or two sentences, at most 40 words, keeping the speaker's own wording. Pair it with a name, a role, and an organization or context line. One card means one quote: if you have three good ones, pick the strongest and save the rest for elsewhere.
Set the tilt (input: chosen quote → output: tilt angle + rotation anchor)
Rotate the card between 2 and 4 degrees — enough to read as intentional, not enough to feel like a mistake. Anchor the rotation at the card's center so it stays balanced, and decide the direction: a slight clockwise tilt feels casual and forward-leaning; counter-clockwise reads as pinned-up and informal. Keep the tilt identical across breakpoints so the card does not jump when the page resizes.
Layer the backing (input: tilt spec → output: layered composition)
Place one or two backing shapes behind the card: a second card in a muted tone, a soft outline frame, or a solid color block offset by 12–24 pixels. The backing should peek out on two edges only — the side the card leans toward and one adjacent edge — so the composition has a clear direction. Keep backing shapes flat and quiet; the quote card stays the brightest, highest-contrast layer.
Style the type (input: layered composition → output: finished card design)
Set the quote in a large, high-contrast serif or clean sans at 1.25–1.5 times your body size, with generous line height. Put the attribution below in small caps or a smaller weight, with a small avatar circle or initial block if you have one. Add a large quotation mark as a decorative anchor in one corner, at low opacity, so it frames the text without competing with it.
Place it and make it behave (input: finished card → output: placed, responsive section)
Give the card breathing room: at least one card-width of clear space on the side it leans toward, so the tilt does not collide with neighbors. On narrow screens, reduce the tilt to 1–2 degrees and let the card go full width; never let rotated corners clip outside the viewport or overlap body text. Add a soft drop shadow that follows the card's rotation, and a subtle hover that straightens the card by half a degree — a small sign of life, not a trick.