Service / SaaSOverseas / USPicked 2026.09.26

Wispr Flow

サービス / SaaSのWebデザイン参考 — AI音声入力ツール

出典: wisprflow.ai

Editor's note — 編集部の視点

しゃべった言葉が、黒い帯になって清書される。

AI音声入力ツールWispr Flowのサイトは、灰色でうねる話し言葉が波形のボタンを抜けて整った文になる様子をFVで見せ、機能説明より先に“使った後”を体感させる。

LeoMotion & Direction

ロゴ帯から深緑のセクションへ、でっかい角丸でグイッと切り替わるのが気持ちいい！！幕がせり上がって次の曲が始まる感じ！しかも角丸ヘッダーはずっと付いてきて、迷子にならない！

1見出しはEB Garamondで、後半だけイタリック。AIツールの定番のダークを捨て、クリーム地の紙面で語る
2キーボードとFlowの速さを、2枚のパネルの幅の差で比べる。数字を読む前に、差が目に入る
3機能紹介は左に3項目の目次、中央に動画、右に説明。いまどこを読んでいるかを、色付きの線が示す

Color

Wispr Flowの配色

Typography

使用フォントと無料の代替

見出し

Aa あア

使用: EB Garamond
代替: EB Garamond

本文・UI・曲線テキスト

Aa あア

使用: Figtree
代替: Figtree

実測タイプスケール1440px幅 · 2026-09-26 計測

特大見出しKatapick 型96px · 0.95 · 400
見出しKatapick 型75px · 1 · 400
小見出しKatapick 型20px · 0.95 · 400
本文The quick brown fox — 参考を型にする32px · 0.95 · 400

Structure

ページ構成（上から順）

01
告知バー・ヘッダー
深緑の帯に Notetaker の告知、その下に角丸の枠に収めたヘッダー（ロゴ、Dictation / Notetaker の切替タブ、Business・Pricing・Lab、ライラックの「Get started on macOS」）。
02
ヒーロー
「WISPR FLOW DICTATION」の小見出し、セリフ体の「Don't type, just speak.」、説明文とCTA。下部で灰色の文字列が曲線を描き、波形のピルを通って黒い帯の文章に変わる。
03
導入企業ロゴ
大きな角丸で始まる黒い帯に「USED BY PROFESSIONALS AT」と企業ロゴを横に並べる。
04
4x faster than typing
深緑の背景で、Keyboard と Flow の入力速度を2枚のパネルで比べる。スクロールで Flow 側の動画パネルが広がる。
05
機能紹介
Speak naturally / Flow edits as you speak / Use it anywhere を、左の目次・中央の縦長動画・右の説明文で順に切り替える。
06
Built around how you work
多言語対応や語彙の学習など、使い方に合わせた機能をイラスト付きのブロックで並べる。
07
プライバシー・利用者の声・FAQ
「Your voice stays yours.」「From the first people to use it.」「Good questions.」と、安心材料と声、質問を続ける。
08
クロージング・フッター
「You have a way with words. Now, two.」のコピーで締め、フッターへ。

Interaction

アニメーション・インタラクション

FVの曲線の文字は SVG の textPath で組まれている（raw のフォント使用タグに textpath がある）。startOffset を GSAP でアニメーションさせて流していると思われる
速度比較と機能紹介はスクロールでピン留めされ、動画パネルの大きさや表示内容が切り替わる。GSAP ScrollTrigger の pin と scrub で再現可能
技術スタックに Lottie があり、波形アイコンなどの小さなアニメーションに使われていると思われる
角丸の枠ごとヘッダーが固定表示され、CTA が常に見える

スクロールのコマ撮り200–40000ms

検出された技術:GSAPWebflowLottieWebGL

Reproduce

再現するときのポイント

01見出しは EB Garamond で組み、強調したい後半だけイタリックにする
02曲線テキストは SVG の <textPath> に文章を流し、startOffset を GSAP で動かす。整形後の文は黒い帯の上に白文字で乗せて対比させる
03背景は #ffffeb のクリームにし、面の切り替えに深緑 #034f46 と黒を大きな角丸で入れる
04CTA はライラック地に黒い枠線のボタンで統一し、ヘッダーとヒーローで繰り返す

再現MDに含まれるもの

実測タイプスケール・余白・角丸・ブレークポイント・動きの長さとイージング / コントラスト判定 / カラートークン / 全8セクションの仕様 / Claude Code・Cursor・v0 用の実装プロンプト / Tailwind・tokens.json / 差し替え必須リスト

Katapick の再現MDは何がすごい？ →

wispr-flow.katapick.md

1---
2title: "Wispr Flow 再現用デザイン仕様書"
3source: https://wisprflow.ai/
4katapick: https://katapick.com/sites/wispr-flow
5category: サービス / SaaS
6region: 海外 (US)
7tags: [セリフ体, スクロール演出, 余白, 角丸, ライト]
8launched: 2026-09
9verified: 2026-09-26
10measured: 2026-09-26 (Chromium 1440x900)
11difficulty: 4/5
12estimated_hours: 36
13generator: Katapick
14---
15 
16# Wispr Flow — 再現用デザイン仕様書
17 
18> しゃべった言葉が、黒い帯になって清書される。AI音声入力ツールWispr Flowのサイトは、灰色でうねる話し言葉が波形のボタンを抜けて整った文になる様子をFVで見せ、機能説明より先に“使った後”を体感させる。
19 
20このファイルは Katapick（https://katapick.com）が作成した、デザインを学び・参考にするための仕様書です。
21数値は推測ではなく、実ブラウザで描画した状態から計測した実測値です（2026-09-26 計測）。そのまま Claude Code / Cursor / v0 などのAIコーディングツールに渡せます。
22