2026/02/28 7:00
**インターネット上で最も閲覧されるUI？ Turnstileとチャレンジページの再設計**
RSS: https://news.ycombinator.com/rss
要約▶
Japanese Translation:
Cloudflareは、最も訪問されるセキュリティインターフェース ― Turnstileウィジェットとチャレンジページ ― をより一貫性があり、アクセシブルでユーザーにやさしいものへと再設計しました。この刷新は、2つのUI全体で不一致なエラー状態、曖昧または冗長なメッセージング、そして視覚階層の不均一性を発見したデザイン監査に続いて行われました。
8か国から集めた8名の参加者による小規模なクロスカルチャー調査では、「Verify you are human」の表現が競合他社よりも優れていることが示され、結果として統一された情報アーキテクチャ（同じ構造・階層・配置でアクション、テキスト、リンクを扱う）と曖昧な「Send Feedback」リンクの代わりに単一の「Troubleshoot」オプションが導入されました。
エラー状態は「Incorrect device time」のような簡潔なラベルを使用し、詳細ガイダンスはモーダルダイアログで表示されます。このUIはWCAG 2.2 AAAのコントラスト／可読性基準を満たし、最小フォントサイズを含み、スクリーンリーダー用にフォーカス可能な要素も提供します。
コンテンツは40以上の言語で設計レビュー → プロフェッショナル翻訳 → ネイティブスピーカーによるレビュープロセスを経て、テキスト長が異なる場合でもレイアウト整合性を保証しています。
この更新は安全性向上のためにRustで実装されました。課題としては、フレームワークなしでインタラクションを再実装し、国際化（RTL、ロケール対応番号付け）を処理することが挙げられます。
Turnstileとチャレンジページは1日あたり7.67 億ロードを受けており、Web上で最も閲覧されるUIです。また、毎日のセキュリティチェックは2023年の2.14 Bから2025年に5.35 Bへと増加し（前年比58.1%）、大幅な拡大を示しています。
Cloudflareは、チャレンジ解決率、完了時間、放棄率、サポートチケット量、およびソーシャルセンチメントという5つの主要指標を追跡し、リデザインの影響を測定し今後のイテレーションに活かしていきます。
本文
2026‑02‑27 • 15 分読了
これまでに見たことがあるでしょう――意識的には気づいていないかもしれません。人間であることを確認する小さなウィジェットや、サイトが読み込まれる前に表示される全画面のセキュリティチェックです。Cloudflare の Turnstile ウィジェットや Challenge ページは数え切れないほど頻繁に登場し、7.67 億件のリクエストを毎日処理しています――インターネット上で最も多く閲覧されるユーザーインターフェースです。
数十億回の利用を想定したデザインは別格です。すべてのピクセル、言葉、インタラクションが、日本の田舎に住むおばあさん、サンパウロ在住のティーンエイジャー、ベルリンで働く視覚障害者開発者、ラゴスの経営幹部――全員に同時に通じるように設計しなければなりません。この記事では、Turnstile と Challenge ページを再設計した過程を三部構成で紹介します。
- デザインプロセス ― リサーチ、監査、ユーザー ジャーニーマッピング、一貫性のある情報アーキテクチャ
- エンジニアリング課題 ― Rust で数十億人へ配信、国際化、テスト
- インパクト指標 ― 完了率、完了時間、放棄率、サポートチケット、感情
第1部：デザインプロセス
問題点
誰もが「人間であることを証明する」行為を嫌います。単純な「私は人間です」というプロンプトさえ、何が問題だったのか、どう修正すればよいのか分からないときにはフラストレーションを引き起こします。
- ボット攻撃の増加：2023年（2.14 B）、2024年（3 B）、2025年（5.35 B）／日 – 58.1 % YoY の増加
- チェック数が増えるとフラストレーションも増え、サイトを放棄されるリスクが高まります
デザイン監査
Turnstile と Challenge ページのすべての状態・エラーメッセージ・インタラクションを検証しました。
| 問題 | 例 |
|---|---|
| 一貫性のない状態 | 「デバイス時刻が不正です」 vs.「タイムアウト。」 |
| 冗長 / 曖昧なメッセージ | 技術用語と一般的な「タイムアウト。」 |
| ビジュアル言語の差異 | レイアウト、階層、トーンがバラバラ |
| フィードバックの混乱 | 「送信」ボタンの受け取り手が不明 |
ユーザージャーニーマッピング
横断的な協力で、ハッピーケースとアンハッピーケースを網羅しました。技術的複雑さとユーザーの単純さをバランスさせ、すべての年齢・能力・文化に対して明確さを保証します。
統一情報アーキテクチャ
『Don’t Make Me Think』からインスピレーションを得て、一つのビジュアル階層を構築しました。
- 行動、説明文、ドキュメントリンク を常に同じ位置に配置
- 制約があることで真に重要なものに集中でき、認知負荷を削減
ユーザーリサーチ結果
- 競合他社の模倣は不要 ― 「人間であることを確認してください」の方が「私は人間です」より高評価
- 行政手続きより支援重視 ― 「送信」を「トラブルシュート」に変更し、行動を約束
- カラー使用法 ― アイコンだけに赤を使用。中立テキストで失敗感を軽減
- スキャン可能で簡潔なエラー状態 ― 「デバイス時刻が不正」＋「トラブルシュート」リンク
- アクセシビリティ重視 ― WCAG 2.2 AAA（コントラスト、フォントサイズ、キーボードフォーカス、スクリーンリーダー通知）を満たす。40+ 言語対応し、長さに合わせて簡潔化
最終再設計
- ハッピーパスは変更なし：人間であることを確認 → 確認中 … → 成功！
- エラー状態：短いラベル＋「トラブルシュート」リンク。詳細ガイダンスはモーダルにて段階的指示と試行後のフィードバックオプション付き
- アクセシビリティ：すべての状態で AAA 準拠
- 一貫性：Turnstile ウィジェットとフルページ Challenge の構造を統一
第2部：数十億へ配信
エンジニアリング選択
安全性と一貫性のために UI を Rust で構築しましたが、DOM 操作（
document.getElementByIdcreateElement長いコンパイル時間と厳格なチェックは迅速なイテレーションを妨げ、より慎重なデザイン決定を強制しました。
国際化の課題
| 課題 | 解決策 |
|---|---|
| テキスト長の変動（30–300 %） | アダプティブレイアウト、可変パディング |
| 右から左へのサポート（アラビア語・ヘブライ語等） | レイアウトミラーリング、アイコン方向変更、アニメーションフロー調整 |
| ロケール対応番号表記 | ハードコードされた数字ではなく翻訳可能なリスト形式を採用 |
テストと信頼性
- ユニットテスト：ロジックの単体検証
- エンドツーエンドテスト：状態・言語のバリデーション
- 継続的インテグレーションで回帰を早期発見
第3部：インパクト
| 指標 | 目標 | 意義 |
|---|---|---|
| Challenge 完了率 (CSR) | ラベル簡潔化により CSR を上げる | 正当なユーザーがブロックされない割合を示す |
| 完了時間 | 平均完了時間を短縮 | フラストレーション低減と高速フロー実現 |
| 放棄率 | 赤色の使用を中立に変更し、放棄率を下げる | ユーザーが離脱する前にトラブルシュートへ誘導 |
| サポートチケット量 | 自己解決モーダルでチケット数を減らす | 運用負荷低減と満足度向上 |
| ソーシャル感情 | 「ウィジェットが壊れている」から「トラブルシュート後に修正された」に変化 | ユーザー認知の改善 |
今後の展望
- ユーザーインタラクション、フィードバックメカニズム、進化するボット脅威を継続的に監視
- 基盤（統一アーキテクチャ + AAA アクセシビリティ + 強固なセキュリティ）をベースに継続的イテレーション
新しい Turnstile や Challenge ページに触れた際にフィードバックがあれば、コミュニティフォーラムや埋め込みフィードバックツールでお知らせください。Cloudflare のミッションは「より良いインターネットを構築する」ことであり、それは人間フレンドリーなセキュリティチェック一つひとつから始まります。