# Wispr Flow｜サービス / SaaSのWebデザイン参考

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

- URL: https://wisprflow.ai/
- 解説ページ: https://katapick.com/sites/wispr-flow
- カテゴリ: サービス / SaaS / 地域: 海外（US）/ 業種: AI音声入力ツール
- テイスト: セリフ体、スクロール演出、余白、角丸、ライト
- 公開・リニューアル: 2026-09 / Katapick掲載: 2026-09-26 / 最終確認: 2026-09-26
- 再現難易度: 4/5（目安 36 時間）

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

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

## 配色
- #ffffeb Cream Paper（背景）
- #1a1a1a Ink Black（テキスト / ロゴ帯 / テキストの帯）
- #034f46 Deep Pine（速度比較セクション / 告知バー）
- #f0d7ff Lilac（CTAボタン）
- #ffa946 Apricot（アクセント / UIの強調）
- #e4e4d0 Parchment（サーフェス / 曲線の装飾）

## フォント
- 見出し: EB Garamond（代替: EB Garamond）
- 本文・UI・曲線テキスト: Figtree（代替: Figtree）

## よくある質問
### Wispr Flowのサイトで使われているフォントは？
見出しに EB Garamond、本文とUIに Figtree が使われています。どちらも Google Fonts で無料で利用できます。

### 曲線に沿って流れるテキストはどう作る？
SVG の <path> で曲線を描き、<textPath href="#path"> で文字を沿わせます。startOffset を GSAP などでアニメーションさせると、文字が線に沿って流れて見えます。

### AIツールのサイトでダーク以外を選ぶ参考になる？
なります。Wispr Flowはクリーム地にセリフ体という編集的なトーンで、AIの冷たさではなく“書くこと”の温度を伝えています。生産性ツールや文章系のSaaSの参考になります。

---
セクション別の構成・モーションの実装方法・AI実装プロンプトを含む「再現用Markdown」は https://katapick.com/sites/wispr-flow からダウンロードできます。
出典: Katapick（https://katapick.com）