AI お客様の声ジェネレーター。

Create a testimonials section with a centered h2 and three quote cards in one row. Each card holds a quote of 20 to 40 words in a blockquote element, then an attribution row with a 40px circular avatar, the customer's real name in medium weight, and their role plus company on a muted second line. Use a cite element for the source and explicit width and height on the avatar with an initials fallback on image error. Light card surface, hairline border, 12px radius, no hover animation. Stack to a single column at 768px keeping the avatar row intact rather than centering it.

Create a testimonials section with a featured quote above a grid. The featured card spans the full container: a quote of 40 to 60 words at large size, a 56px avatar, the customer name, their role and company, and a company logo at the right edge. Below it, three smaller cards in one row each with a shorter quote and a 40px avatar attribution row. Wrap each quote in a blockquote with a cite for the person and company. Featured card gets a tinted background to separate it from the grid. Collapse the grid to one column at 768px and reduce the featured quote by one type step.

Create a social proof section that leads with a customer logo wall: eight monochrome logos in two rows at reduced opacity, each an interactive button that reveals that customer's quote in a panel below the wall. Reveal on hover, focus and click so the content is reachable by keyboard and touch, with the active logo at full opacity and aria-pressed set. The panel shows the quote, avatar, name, role and company, and keeps a fixed min-height so the page does not jump between quotes. Default to the first quote on load. Four logos per row at 768px, two at 480px.

Create a masonry testimonial wall of nine to twelve short quotes across three CSS columns, letting the natural quote lengths stagger the card baselines. Each card carries a 32px avatar, a name, a role, and a source label such as G2 or Product Hunt. Use blockquote and cite markup throughout, and give avatars explicit dimensions with an initials fallback. Add a fade mask and a Show more button that expands from six visible cards to the full set, updating aria-expanded. Drop to two columns at 900px and one at 600px, preserving the source label on every card.

Create a testimonial carousel showing one quote at a time: a 60 to 100 word quote, a 64px avatar, the customer name, role, company and logo. Add previous and next buttons plus dot indicators, all real buttons with accessible labels, and support left and right arrow keys when the region has focus. Wrap the slides in an aria-roledescription carousel region with a live region announcing "slide 2 of 5". Pause any autoplay on hover and focus, and disable it entirely under prefers-reduced-motion. On mobile, swap the side buttons for a swipeable track with the dots below.

Create a video testimonials section with three cards. Each card shows a poster image at explicit dimensions with a centered play button overlay, a duration chip, and beneath it a one-sentence pull quote in text plus the customer name, role and company. Do not embed the player on load — render the poster as an image and only mount the iframe when the play button is activated, so three third-party players do not block the page. Give each play button a label naming the customer. Provide a captions note and a transcript link per card. One column at 768px.