インターネットで最も目にするUI？Turnstileとチャレンジページの再設計

あなたはそれを見たことがあるでしょう。意識的に認識していなくても、あなたはそれを見ています。あなたが人間であることを確認するためにあなたに問いかけるあの小さなウィジェット。ウェブサイトにアクセスする前の全画面セキュリティチェック。もしあなたがインターネットで時間を過ごしたことがあれば、Cloudflare の Turnstile ウィジェットまたは Challenge Pages に遭遇しているはずです——おそらく数えきれないほど多くの回数です。 ![image](https://cf-assets.www.cloudflare.com/zkvhlag99gkb/5YaxxmA9nz7AufmcJmhagL/0db6b65ec7456bc8091affc6beaf3ec2/Image_1_-_Turnstile.png) Turnstile ウィジェット——数百万のウェブサイトで見慣れた光景 インターネットの大部分が Cloudflare の背後にあると言うとき、私たちはそれを本気で言っています。私たちの Turnstile ウィジェットと Challenge Pages は、毎日 76.7 億回も提供されています。これは誤植ではありません。数十億回です。これこそが、インターネット上で最も多く見られるユーザーインターフェース（UI）かもしれません。 そして、それには莫大な責任が伴います。 数十億人の目に触れる製品を設計することは、単に難しいというだけでなく、根本的に異なるアプローチを必要とします。すべてのピクセル、すべての単語、すべてのインタラクションは、日本の田舎に住む祖母、サンパウロのティーンエイジャー、ベルリンの視覚障害を持つ開発者、そして Lagos の多忙な経営者——すべてが同時に、そしてイライラしている瞬間にでも機能するように設計されなければなりません。 今日、私たちは Turnstile と Challenge ページの再設計に関するストーリーを共有します。この物語は3つのパートに分かれており、それぞれが私たちの一人によって語られます：意思決定に影響を与えたデザインプロセスとリサーチ（Leo）、前例のない規模で変更を展開するエンジニアリング上の課題（Ana）、そして数十億人のユーザーへの計測可能な影響（Marina）。 まず、デザイン視点からどのように問題に取り組んだかを見ていきましょう。 Part 1: The design process The problem 正直に言いましょう：自分が人間であることを証明せよと求められることを、誰も好んでいません。あなたは自分が人間だと知っています。私も自分が人間だと知っています。しかし、そのように確信していないのは、あなたがアクセスしようとしているウェブサイトの前に立っているあの小さなウィジェットだけです。最善の場合でもそれはわずかな不便さですが、最悪の場合？おそらく、怒りに任せてコンピュータを窓の外に投げ出したくなったことがあるでしょう。私たちは皆、そんな経験をしたことがあります。そして、誰もあなたを責めないはずです。 ![image](https://cf-assets.www.cloudflare.com/zkvhlag99gkb/640zjNaqDcNdJy4mYN6H14/ce184df68c9612d77f0767726bf27822/2.png) ログインフローに統合された Turnstile 世界が不可避な AI レボリューション（AI 革命）を受け入れつつある中、セキュリティ検証の必要性はさらに高まっています。Cloudflare では、ボット攻撃の顕著な増加を目撃しており、それに対応して組織はセキュリティ対策により一層投資しています。つまり、より多くのエンドユーザーに、より頻繁に課題が課されることになります。 数字が物語を語っています： 2023 年：1 日あたり 21.4 億回 2024 年：1 日あたり 30 億回 2025 年：1 日あたり 53.5 億回 これは、前年比でセキュリティチェックが平均 58.1% 増加したことを意味します。セキュリティチェックが増えることは、エンドユーザーのフラストレーションを招く機会も増えるということです。企業が自分たちや顧客を守るためにこれらの検証システムを統合すればするほど、どこかで誰かが不快な体験をする可能性は高まります。 私たちは、主力製品を厳しく見直し、自問する必要があると知っていました。「私たちは、こうした体験に直面する数十億の人々に対して正しいことをしているだろうか？より安全なインターネットだけでなく、より人間らしいインターネットを構築するという私たちの使命を果たしているのだろうか？」 私たちが発見した答えはこうでした：「もっと良くなれる」。 デザイン監査 何かを再設計する前に、私たちはまず何に取り組んでいるのかを理解する必要がありました。Turnstile と Challenge Pages のすべての状態、すべてのエラーメッセージ、そしてすべてのインタラクションについて包括的な監査を行うことから始めました。 私たちが発見したのは、最善の状態ではなかったということです。 ![image](https://cf-assets.www.cloudflare.com/zkvhlag99gkb/1g1exDgeRH9QlApBXItcfL/fb0051d1dabaa6c91cf976ef64793502/3.png) Turnstile ウィジェットにおける不整合の状態。統一されたアプローチのない複数の状態 矛盾点は明白でした。多様なエラーシナリオ全体にわたって、統一されたアプローチがありませんでした。一部のメッセージは過度に冗長で技術的であり（「デバイスの時刻設定が誤っているか、このチャレンジページが仲介者によって偶発的にキャッシュされ、もはや利用できません」）、他方では有用性を欠くほど曖昧なものでした（「タイムアウトしました」）。ビジュアル言語も大きく異なり、レイアウト、階層、トーンがバラバラでした。 また、オンライン上で寄せられたフィードバックも精査しました。ソーシャルメディア、サポートチケット、コミュニティフォーラム——すべて読み込みました。そこには明確な不満があり、その多くは回避可能なものでした。 例えば、当社のフィードバック機構を見てみましょう。「ウィジェットが時々失敗する」対「ウィジェットがいつも失敗する」といった選択肢をユーザーに提供していましたが、本当に何が違うのでしょうか？また、ユーザーはどのようにして頻度を把握すればよいのでしょうか。私たちは、最も不満を感じている瞬間に、曖昧な選択肢を解釈させるよう求めていました。解釈の余地を残せば残すほど、フィードバックは有用性を失い、ソーシャルチャネル全体で見る不満は増大しました。 ![image](https://cf-assets.www.cloudflare.com/zkvhlag99gkb/5xKRSM0FfDZikEECwgHoof/ad55208973698cb237444c21d384aff8/4.png) 以前のフィードバック画面：「ウィジェットが時々失敗する」対「ウィジェットがいつも失敗する」——何が違うのでしょうか？ 私たちの Challenge ページ（不審な活動を検知した場合や、サイト所有者がセキュリティ設定を強化している場合に表示されるフルページ型のセキュリティブロック）にも同様の課題がありました。一部のステートは混乱を招くものであり、他には技術用語が多すぎました。多くのケースで、ユーザーが最も支援を必要としている際に実行可能なガイダンスを提供できていませんでした。 ![image](https://cf-assets.www.cloudflare.com/zkvhlag99gkb/5JUxHjJ4VG13F7QfLONJEQ/fa443e5dd24f10d0c256864cd3f42734/5.png) Challenge ページにおける不整合の状態。統一されたアプローチのない複数のステート この監査は謙虚な気持ちになりましたが、私たちが集中すべき場所を明確に示してくれました。 ユーザーのジャーニーのマッピング より良い体験を設計するためには、まずユーザーがたどり得るあらゆる経路を理解する必要がありました。理想的なシナリオ（ハッピーパス）とは何でしょうか？そもそもそれは存在するのでしょうか？また、ユーザーのフラストレーションが高まっていく「アンハッピー」な経路はどのようなものだったのでしょうか。 ![image](https://cf-assets.www.cloudflare.com/zkvhlag99gkb/1oTbFZoRu7guIxzoe64qcm/4f579fe2e70d6225a51504b3de10030f/6.png) 初期の遭遇からエラーシナリオ、感情の追跡に至るまでの完全なユーザージャーニーのマッピング これは真に多機能チームによる取り組みでした。私たちは、あらゆるエッジケース（境界条件）の技術的な詳細を知るエンジニアの Ana と密接に連携し、製品がどのように動作するだけでなく、ユーザーがそれに対してどう感じているか——オンライン上で見られる「愛」と「憎しみ」——を理解していたプロダクト担当の Marina とも緊密に協力しました。 Cloudflare ではボット対策に取り組む最も賢い人々の一部が働いています。しかし、知性と明確さは同じものではありません。技術的な複雑さとユーザーのシンプルさの間には微妙なバランスが存在します。この 2 つが見事に調和して初めて、人々にとって実際に意味のある方法で情報を伝えることができるのです。 そして、重要な点は、メッセージはすべての人に機能しなければならないということです。年齢を問わず、精神面や身体能力を問わず、文化的背景を問わず、技術的な熟練度を問わず。これがスケールした設計が本当に意味するところです——エッジケース（極端な事例）を無視することはできません。なぜなら、そのような規模ではもはやそれはエッジケースではないからです。 統一された情報アーキテクチャの確立 UX デザインにおいて最も影響力のある書籍の一つに、スティーブ・クルグの『Don't Make Me Think』があります。その核心となる原則はシンプルです：ユーザーがインターフェースを解釈し、理解し、解読しようとして費やすあらゆる瞬間は、摩擦の瞬間です。そして、特にフラストレーションが生じる瞬間における摩擦は、離脱へとつながります。 私たちの監査では、ユーザーに考えさせすぎていることが明らかになりました。異なる状態において、異なる情報の断片が UI 内の同じスペースを占めていました。一貫した視覚的階層性はありませんでした。Turnstile でエラー状態に遭遇するユーザーは、Challenge Page（チャレンジページ）で情報を見つける場所とは全く異なる場所で情報を見つけます。 私たちは根本的な決断を下しました：すべてを支配する一つの情報アーキテクチャを採用することです。 ![image](https://cf-assets.www.cloudflare.com/zkvhlag99gkb/3runU0ihKhNpgdw3LxNZUv/aa4bd76efb5847fde0659bccdae7242d/7.png) 統一された情報アーキテクチャを示すビジュアル図。Turnstile ウィジェットと Challenge ページ全体で一貫した構造を有している Turnstile と Challenge ページの両方が、現在同じ構造的パターンに従うことになります。同じ視覚的階層性。アクション、説明文、ドキュメントへのリンクの配置もすべて統一されます。 これが私たちのデザイン選択肢を制約したのでしょうか？もちろんそうです。フレームワークに適合しない多くの創造的なアイデアに対しては「ノー」と言わざるを得ませんでした。しかし、制約は良いデザインの敵ではありません——むしろその最良の友人であることが多いのです。選択肢を制限することで、実際に重要な詳細部分により深く取り組むことができました。 ユーザーにとっての恩恵は甚大です：各 UI 要素の意味を再学習する必要がありません。エラー状態も一貫して表示されます。ヘルプリンクも常に同じ場所にあります。一度一つの状態を理解すれば、すべての状態が理解できるのです。これは認知負荷を最小限に抑えた——セキュリティ検証中であるべきまさにその状態です。 ユーザー調査から得た教訓 数十億人が目にするものを再設計する際、どのようにして自分自身を責任ある態度で保つのでしょうか？テストすることです。非常に多くのテストを行います。 私たちは8カ国から8名の参加者を募集し、年齢、デジタルリテラシー、文化的背景における多様性を意図的に確保しました。技術に詳しい初期採用者を探していたのではなく、 redesign がすべてのユーザーにとってどのように機能するかを理解したかったのです。 私たちのアプローチは厳格でした：参加者は「古い」または「新しい」のどちらであるか知らされずに、現在の体験と提案された変更の両方を見ました。バイアスを排除するために配置を反転させました。また、単に新しいアイデアを検証するだけでなく、そもそも何を変える必要があるのかという前提自体にも挑戦しました。 ![image](https://cf-assets.www.cloudflare.com/zkvhlag99gkb/59mmLHihbM9TewXmlYQwbO/e5db88efca948de1b31e9dc499195eb8/8.png) A/Bテストでテストされている2つの異なるバージョンのTurnstile 修正する必要がないものもいくつかありました ある仮説：競合他社に合わせるべきか？多くのCAPTCHAプロバイダーはすべてのステートで「I am human」と表示しています。私たちは異なるコンテンツを使用します——「Verify you are human」、次に「Verifying...」、そして「Success!」です。 私たちはやりすぎではないかと考え、頭突きテストを行いました。 私たちのアプローチが明確に勝利しました。インタラクション状態では、「Verify you are human」が8点中5点を獲得したのに対し、「I am human」はわずか3点でした。検証中の状態ではさらに劇的な差があり、7.5対0.5となりました。ユーザーは自分が何者か知らされるだけでなく、今何が起きているのかを知りたがっていたのです。 ![image](https://cf-assets.www.cloudflare.com/zkvhlag99gkb/6ke1kO0i7EZxZm6voQBpyn/f489bef9b66d1221aa89adb5746559b7/9.png) ユーザーテストの結果：利用者は競合他社風のデザインよりも、私たちのアプローチを強く支持しました この実験は機能としてリリースされませんでしたが、非常に貴重なものでした。単に違いをつけるために違うことをしているわけではないという確信を与えてくれました。すでに正しいとされていた部分もありました。 しかし、これらには変更が必要でした 調査により、私たちがユーザーに対して失敗していた4つの領域が浮き彫りになりました： 支援であり、官僚主義ではない。利用者がエラーに遭遇した際、私たちは「フィードバックを送信」を提供していました。テストでは、利用者は混乱しました。「誰に送っているのか？ウェブサイトか？Cloudflare か？私の ISP なのか？」さらに重要なことに、最大のフラストレーションが生じる瞬間には、人々は報告書を提出したいのではなく、問題を解決したいという根本的な事実が発見されました。私たちは「フィードバックを送信」を「トラブルシューティング」に置き換えました。これは官僚主義ではなくアクションを約束する単一の言葉です。 ![image](https://cf-assets.www.cloudflare.com/zkvhlag99gkb/2jN2reUR55qCbssCDFTZfB/fb5396ec853ee549ebfec5d0d94b901f/10.png) 問題のある「フィードバックを送信」プロンプト：利用者は誰にフィードバックを送っているのか分からなかった 注意喚起であって、警報ではありません。私たちはエラーに対して赤い背景を多用していました。テストでの反応は本能的なものでした——参加者は自分が失敗したと感じ、無力感を感じました。リトライすれば解決する単純な問題であっても、ユーザーは最悪の事態を想定して諦めてしまいました。彩度を最大にした赤は「対処すべきものがあります」と伝えるのではなく、「あなたは失敗しました、どうしようもありません」と伝えていました。対策：赤はアイコンにのみ使用し、テキストや背景には決して使用しないこと。 ![image](https://cf-assets.www.cloudflare.com/zkvhlag99gkb/5seE6Xcrj9lvSpBYDEkk6N/7f0c1c17fd86b05397d35b685b0addfb/11.png) 進化の過程：赤色で不明確なエラー状態の説明があった状態から、中性的な色のテキストによるはるかに明確で簡潔なエラーコミュニケーションへと変化しました。 スキャン可能であって、冗長ではない。私たちは徹底的に、技術的な詳細を説明しようとしていました。しかしそれは裏目に出ました。非技術系のユーザーには疎外感を与え、技術系のユーザーには必要ありませんでした。誰もがストレスの多い状況にあるウィジェットという限られたスペースでそれを読もうとしていたのです。教訓：少ないほど良い、特にストレスの多い瞬間における制約された空間ではなおさらです。 すべての人にアクセス可能であること。私たちの監査により、一部の状態で 10px のフォントが使用されていることが判明しました。グレーのテキストは技術的には AA（通常テキストで少なくとも 4.5:1、大文字テキストで 3:1）コンプライアンスを満たしていましたが、実際には読みづらかったです。「技術的に準拠している」だけでは、インターネット全体にサービスを提供する際には十分ではありません。 明確な目標を設定しました：WCAG 2.2 AAA 基準の達成です。これはウェブアクセシビリティ適合性における最高かつ最も厳格なレベルであり、重度の障害を持つ方を含む、あらゆるユーザーにコンテンツをアクセス可能にするために設計されています。 redesign のThroughout、視覚的な一貫性と可読性が対立した際、常に可読性が優先されました。 これは視力の問題だけではありません。スクリーンリーダー利用者、キーボードのみでのナビゲーションを行う方、色覚多様性を持つ人々のためにデザインしました。自動化された適合性ツールでは検出できない範囲まで対応しています。 そしてアクセシビリティは障害の有無だけでなく、言語の問題でもあります。英語で収まる表現がドイツ語では溢れ出し、スペイン語で簡潔な表現が日本語では曖昧になります。40 以上の言語への対応を迫られたことで、私たちは根本的な単純化を余儀なくされました。「ウェブサイトへの接続ができない / トラブルシューティング」という同じパターンが、英語、ブルガリア語、デンマーク語、ドイツ語、ギリシャ語、日本語、インドネシア語、ロシア語、スロバキア語、スロベニア語、セルビア語、フィリピン語など、多くの言語で機能するようになりました。 ![image](https://cf-assets.www.cloudflare.com/zkvhlag99gkb/6e4pvgMUS4BUXsPqi1qV6l/b6ffdc0d5f1e8e90394169db7162d10c/12.png) 12 の言語にわたる再設計されたエラー状態 — 異なるテキスト長にもかかわらず一貫したレイアウト 最終的な redesign では、実際に何を提供できたのでしょうか？ まず、変更しなかった点について話しましょう。ハッピーパス（「人間であることを確認」→「確認中…」→「成功！」）は非常に高い評価を得ました。ユーザーは各段階で何が起こっているかを理解していました。それぞれに異なるコンテンツを用意することによって複雑になりすぎるのではないかという懸念がありましたが、これはむしろ私たちの競争優位性となりました。 ![image](https://cf-assets.www.cloudflare.com/zkvhlag99gkb/2R4QJ04uz9r1TVZjuqsHG9/61c1023eaa105b4841456258f3370220/13.png) ハッピーパス：人間であることを確認 → 確認中 → 成功！これらの状態はテストで良好な結果を示し、ほぼ変更されませんでした しかし、改善が必要な状態については、私たちが学んだすべての知見に基づき、大幅な変更を行いました。 簡素化され、スキャン可能なコンテンツ エラー状態におけるテキスト量を劇的に削減しました。以前のような「デバイスの時刻設定が誤っているか、このチャレンジページが仲介者によって意図せずキャッシュされており、現在利用できません」といった冗長な説明の代わりに、現在は以下を表示しています。 明確でシンプルな状態名（例：「デバイスの時刻が正しくありません」） 目立つ「トラブルシューティング」リンク これだけです。詳細なガイダンスは、ユーザーが必要としたときに開く専用モーダル画面に移動しました。これにより、ユーザーは実際に手順を読み、追従するための十分なスペースを得られます。 ![image](https://cf-assets.www.cloudflare.com/zkvhlag99gkb/4ZYjlJgw6DOiTuJBFXpewn/5d714c3a19723dfe9fa9802d0d5926b8/14.png) トラブルシューティングモーダル：ユーザーが必要な時に詳細なガイダンスを提供し、ウィジェットを煩雑にしない トラブルシューティングモーダルは、文脈（「このエラーは、デバイスの時計またはカレンダーが正確でない場合に発生します。このウェブサイトのセキュリティ検証プロセスを完了するには、デバイスがあなたのタイムゾーンで正しい日付と時刻に設定されている必要があります。」）、試すべき番号付き手順、ドキュメントへのリンク、そしてユーザーが問題の解決を試みた後に表示される Cloudflare へのフィードバック送信オプションを提供します。まずはヘルプ、その後にフィードバックです。 AAA アクセシビリティ準拠 すべての状態が、コントラストと可読性に関する WCAG 2.2 AAA 基準を満たすようになりました。フォントサイズには最小値が設定されています。インタラクティブな要素は明確にフォーカス可能であり、スクリーンリーダーによって適切に読み上げられます。 Turnstile と Challenge ページ間での統一された体験 ユーザーがコンパクトな Turnstile ウィジェットに遭遇するか、フルサイズの Challenge ページに遭遇するかにかかわらず、情報アーキテクチャは現在一貫しています。同じ階層構造。同じ配置。同じメンタルモデル。 Challenge ページは現在、明確な構造を採用しています：上部にはウェブサイト名とファビコンが表示され、その下には「検証成功」や「ブラウザが古くなっています」といった明確なステータスメッセージ、さらにその下に具体的なアクションガイダンスが配置されています。もはやオレンジ色や赤色の文字の壁があるわけでもなく、文脈のない専門用語が並んでいることもありません。 ![image](https://cf-assets.www.cloudflare.com/zkvhlag99gkb/4PuWePTOaLihpfqm2iimJW/e34c4a009c36524a6d72c15ae0f78d00/15.png) 再設計された Challenge ページは、明確なトラブルシューティング手順を示しています。 多言語での検証完了 すべてのコンテンツは、サポート対象の 40 以上の言語でテストされました。私たちのプロセスには、3 つ層の検証が含まれていました： デザインチームによる初期デザインのレビュー 認定ベンダーによる専門的な翻訳 ネイティブスピーカーである Cloudflare の従業員による最終レビュー これは単なる翻訳の正確さの問題ではありませんでした。重要なのは、言語間でコンテンツの長さが劇的に異なる場合でも、ビジュアルデザインが機能し続けることを保証することでした。 全体像 その結果、より明確で、アクセシビリティが高く、ストレスの少ないセキュリティ検証体験が実現しました。そして何よりも重要な点は、セキュリティレベルが以前と同等に保たれていることです。私たちは、ユーザー体験を向上させるために保護を妥協したわけではありません。優れたデザインと強力なセキュリティは対立するものではないことを証明しました。 ![image](https://cf-assets.www.cloudflare.com/zkvhlag99gkb/5t6FRRzLamGaTbEiZqVpnf/92b688679d1c8265ba3c6fd4159061bf/16.png) 左側に再設計された Turnstile ウィジェット、右側に再設計された Challenge ページ しかし、体験をデザインすることは戦いの半分にしかなりません。それを数十億人のユーザーに提供することこそが、Ana の役割です。 Part 2: 数十億人への展開 Beyond centering a div（div の中央配置を超えて） 一部の人は、フロントエンドエンジニアにとって最も難しい部分は div を中央に配置することだと言うかもしれません。実際には、真の課題はそれよりもはるかに深く、特にプラットフォームのプリミティブに近い場所で作業する際には顕著です。ネイティブ API を用いてインターネットインフラの重要な部分を構築することは、UI 開発、トレードオフ、そして長期的な保守性について異なる視点で考えることを強要します。 私たちのケースでは、Turnstile ウィジェットと Challenge ページの両方の UI 処理に Rust を使用しています。この決定は、プラットフォーム間での安全性と一貫性の面で明確な利点をもたらしましたが、同時にフロントエンドの複雑さも増大させました。多くの人が Rea という現代的なフレームワークの使いやすさに慣れ親しんでいますが

インターネットで最も目にするUI？Turnstileとチャレンジページの再設計

背景や根拠まで確認しますか？

関連記事

調べる

選ぶ

サイト