このコンテンツは自動機械翻訳サービスによる翻訳版であり、皆さまの便宜のために提供しています。原本の英語版と異なる誤り、省略、解釈の微妙な違いが含まれる場合があります。ご不明な点がある場合は、英語版原本をご確認ください。
見たことがあるかもしれません。意識して登録したわけではないかもしれませんが、見られたことがあるかもしれません。人間の認証を求める小さなウィジェットが表示されるのです。Webサイトにアクセスする前に全ページセキュリティチェックを行うのです。もしインターネットをしていれば、CloudflareのTurnstileウィジェットやチャレンジPagesに遭遇したことがあるでしょう。おそらく、その回数は数え切れないほどありました。
Turnstileウィジェット–数百万のWebサイトで見慣れた画面
インターネットの大部分がCloudflareの背後にあるということは、そのままです。当社のTurnstileウィジェットとチャレンジページは、毎日76億7000万回提供されています。誤字はありません。数十億。これは、インターネットで最もよく見られるユーザーインターフェースかもしれません。
それには、大きな責任が伴います。
何十億もの注目を集めた製品をデザインするのは、難しいだけではありません。根本的に異なるアプローチが必要なのです。すべてのピクセル、すべての言葉、すべてのインタラクションが、日本の農村部にお住まいの被害者、サンパウロの10代、ベルリンの視覚障害者の開発者、そしてラゴスの多忙なエグゼクティブのために機能しなければなりません。すべてを同時に。苛立ち、まさにその瞬間。
本日は、Turnstileとチャレンジページを再構築した方法についてご紹介します。これは、当社3人によるストーリーであり、私たちの決定を学んだデザインプロセスとリサーチ（Leo）、前例のない規模の変更をデプロイするというエンジニアリング上の課題（Ana）、何十億人ものユーザーへの測定可能な影響（Marina）です。 .
まずは、設計の観点からこの問題にどのように取り組んだのかを見ていきましょう。
正直に言うと、誰も人間であることを証明するように求められるのは好きではありません。人間は人間です。人間だということはわかっています。唯一確信が持てないのは、あなたとアクセスしようとしているWebサイトの間にある小さなウィジェットだけです。せいぜい、些細な不便だからです。最悪ですか？おそらくDDoS攻撃でコンピューターをブラウザから追い示したいと思っているでしょう。誰しもが経験することです。誰もあなたを非難することはありません。
ログインフローに統合されたTurnstile
AI革命は必須のように思える中、セキュリティ検証の必要性は高まるばかりです。Cloudflareでは、ボット攻撃の大幅な増加を目の当たりにしています。それに対応して、組織はセキュリティ対策により多額の投資を行っています。つまり、より多くのエンドユーザーに対して、より多くのチャレンジが、より頻繁に発行されることを意味します。
数字が物語っている：
2023年：1日あたり21億4000万件
2024年：30億/日
2025年：1日あたり535億件
これは、セキュリティチェックの前年比平均58.1%の増加です。セキュリティ検査の機会が増えるということは、エンドユーザーのフラストレーションになる機会が増えることを意味します。自社や顧客を保護するために、こうした認証システムを統合する企業が多ければ多いほど、どこかの誰かが悪い体験をする可能性が高まります。
私たちは、当社の主力製品を見直して、こうしたエクスペリエンスに遭遇する何十億人ものユーザーを相手にできているのか、自問すべき時が来たと考えました。私たちは、より良いインターネット、より安全なもの、より人間的なインターネットを構築するという使命を果たしているのでしょうか？
その答えは、もっと良い方法があるということです。
何かを再構築する前に、私たちは何を使っているのかを理解する必要がありました。まず、Turnstileとチャレンジページの両方で、すべてのステート、すべてのエラーメッセージ、すべてのインタラクションの包括的な監査を実施しました。
見つけたものは、最良のものではありませんでした。
Turnstileウィジェットにおける不整合の状態。複数の状態で統一されたアプローチがない
一貫性の欠如が明らかでした。さまざまなエラーシナリオに対応する統一されたアプローチはありませんでした。いくつかのメッセージは、過度に詳細で技術的なものでした（「デバイスのクロックが間違っている、またはこのチャレンジページが仲介者によって誤ってキャッシュされたため、利用できなくなりました」）。また、曖昧すぎて役に立ちません（「タイムアウト」）。視覚言語は多種多様で、レイアウト、階層、音声の色調はさまざまでした。
また、オンラインで寄せられたフィードバックについても検証しました。ソーシャルメディア、サポートチケット、コミュニティフォーラム — 当社はすべて読み取ります。フラストレーションは当然ながら回避可能でした。
フィードバックメカニズムを例に挙げましょう。「ウィジェットは失敗することがある」と「ウィジェットはいつも失敗する」などのフィードバックオプションをユーザーに提供しました。しかし、本当に違いはあるのでしょうか？また、その失敗の頻度をどのようにして知ることができたのでしょうか？ユーザーが最もイライラする瞬間、曖昧な選択肢を解釈するように求めました。解釈の余地を残すればするほど、フィードバックは有用ではなくなり、ソーシャルチャンネル全体での不満が増大しました。
以前のフィードバック画面：「ウィジェットは失敗することがある」と「ウィジェットは常に失敗する」：その違いは？
チャレンジページも、不審なアクティビティを検出した時や、サイト所有者がセキュリティ設定を強化した時に表示されるフルページのセキュリティブロックで、同様の問題を抱えていました。混乱を招く状態もありました。また、技術専門用語を過剰に使用している人もありました。多くの企業は、ユーザーが最も必要としている時に実用的なガイダンスを提供できませんでした。
チャレンジページで見る不整合の状態。複数の状態で統一されたアプローチがない
監査は貧弱なものでした。私たちは、どこに焦点を当てるべきかを明確に把握することができました。
より良いエクスペリエンスを設計するために、まずユーザーが通る可能性のあるあらゆる経路を理解する必要がありました。満足した道のりは？1つでもあったのでしょうか？そして、不満が高まる原因となった不運な道のりは何でしたか？
最初の遭遇からエラーシナリオまで、感情追跡による全ユーザー利用体験のマッピング
これは真の部門横断的な取り組みでした。当社は、あらゆるエッジケースの技術的な詳細を知るアナリストのエンジニアと緊密に連携しながら、製品側のMarina氏は、製品の仕組みだけでなく、ユーザーがどのように感じているのか、つまり私たちがオンラインでご覧ください。
Cloudflareには、ボット保護に取り組んでいる最も賢い人たちが存在します。しかし、インテリジェンスと明瞭性は別物です。技術的な複雑さとユーザーの単純さの微妙なバランスを取る必要があります。この2つがうまく躍り出て初めて、人に実際に意味を成す方法で情報を伝えることができるのです。
この場合、メッセージングは誰にとっても機能しなければなりません。年齢を問わず誰でも。精神的または身体的能力。文化的背景あらゆるレベルの技術的洗練度大規模に設計するということは、まさにエッジケースではないということです。エッジケースを無視することはできません。
UXデザインに関する最も影響力のある本のひとつに、Steve KrugのDon't Make Me Thinkがあります。基本となる原則はシンプルです。ユーザーがインターフェースを解釈、理解、またはデコードしようとするすべての瞬間は、摩擦の瞬間です。そして、特にフラストレーションが溜まる瞬間は、離脱につながります。
当社の監査で、ユーザーに過剰な考えを求めていることが明らかになりました。異なる状態にわたるUIで、異なる情報が同じスペースを占めていました。一貫したビジュアル階層はありませんでした。Turnstileでエラー状態に遭遇したユーザーは、チャレンジページとはまったく異なる場所で情報を見つけることになります。
Cloudflareは、単一の情報アーキテクチャでそれらすべてを管理するという基本的な決断を下しました。
Turnstileウィジェットとチャレンジページ全体で一貫した構造を持つ、統合情報アーキテクチャを示すビジュアル図
Turnstileとチャレンジページは、同じ構造パターンに従います。同じビジュアル階層。アクション、説明テキスト、ドキュメントへのリンクを同じ配置にします。
それによって設計オプションが制約されることはないか？もちろんです。フレームワークを適合しない創造的なアイデアも多くありましたが、私たちはそれを止めなければなりませんでした。しかし、制約は優れた設計の敵ではなく、多くの場合、最良のパートナーとなります。選択肢を減らすことで、実際に重要な問題点をより深く掘り下げることができました。
ユーザーにとっては、UIのそれぞれの意味を改めて学ぶ必要がなくなるという、大きなメリットがあります。エラーの状態は一貫しているように見えます。ヘルプリンクは常に同じ場所にあります。1つの状態を理解すれば、すべて理解できます。これにより、認知的負荷は最小限に抑えられ、まさにセキュリティ検証時にあるべきところに軽減されます。
何十億人もの人々が目にするものを再デザインする際、どのように責任を果たせるのでしょうか？テストします。サイバーランサムなど
今回、8か国から8名の参加者を採用しましたが、私たちは技術に精通した早期導入者を探していたのではありません。私たちは、再設計が誰にとってもどのように機能するかを理解したかったのです。
私たちのアプローチは厳格でした。参加者は、現在の体験と変更提案の両方を目にし、どちらが「古い」か「新しい」かは把握しませんでした。バイアスを排除するために、ポジショニングのバランスをとりました。そして、私たちは新しいアイデアをテストしただけでなく、そもそも何が変える必要があるのかという私たちの思い込みも覆してきました。
A/BテストでテストされるTurnstileの2つの異なるバージョン
ある仮説は、競合他社と提携すべきか？ほとんどのCAPTCHAプロバイダーは、全州にわたって「私は人間です」を示します。「人間であることを検証する」、「検証する...」、そして「成功！」という別々のコンテンツを使用します。
作業を複雑にしていなかったでしょうか？Cloudflareでは直接テストを行いました。
当社のアプローチが決定的となりました。インタラクションの状態では、「人間であることを確認する」は8点中5点で、「私は人間です」はわずか3点です。検証状態については、7.5に対して0.5とさらに劇的でした。ユーザーは、何が起こっているかを知るだけでなく、何が起こっているのかを知りたいと思ったのです。
ユーザーテストの結果：ユーザーは競合他社スタイルのデザインよりも、当社のアプローチを強く好む
この実験は機能として出荷されませんでしたが、非常に貴重なものでした。そうすることで、私たちはただ他と違う点に注目しているのではないかと確信することができました。すでに正しかったこともあります。
この調査では、ユーザーが失敗している4つの領域が明らかになりました。
官僚主義ではなく、支援を。ユーザーがエラーを経験した場合、「フィードバックを送信」を提供しました。テストでは、圧倒されました。「このメールは誰に送られますか？Webサイトについては、Cloudflare担当のISPは？」さらに重要なことは、根本的な問題を発見したということです。切迫した状況では、人々は報告をしようとするのではなく、問題を解決したいと思っているのです。私たちは「フィードバックを送信」を「トラブルシューティング」に置き換えました。これは、官僚主義ではなく行動を約束する一言です。
問題のある「フィードバック送信」プロンプト：ユーザーは、自分が誰にフィードバックしているのかを知らなかった
警戒すべきではなく、注意を怠らないでください。それまでは、間違いなく赤の背景を積極的に使っていました。テストの反応は反応的でした。参加者は失敗したと感じ、力を失っていると感じたのです。再試行で解決できる単純な問題でさえ、ユーザーは最悪の事態を想定して諦めてしまうのです。完全に飽和状態になった赤は、「対処すべきものがあります」と伝えることができませんでした。「失敗した、何もできない」ということを伝えているのです。修正方法：赤はアイコン用にのみ使用し、テキストや背景には使用しません。
進化：赤で表示されたエラーの状態説明が、ニュートラルなテキストで明確かつ簡潔なエラーコミュニケーションに変わりました。
スキャン可能で、詳細ではありません。技術的な詳細を説明して、徹底的に説明するよう努めました。それは裏目に出ました。テクノロジーに詳しくないユーザーは、それが遠い状態に感じられました。テクニカルユーザーには必要ありませんでした。誰もが、ウィジェットの小さな実地でそれを行おうとしていました。教訓は、特にストレスの多い瞬間の限られたスペースでは、「少ないに越したことはない」です。
誰もがアクセス可能。当社の監査により、一部の州では10pxのフォントが使用されていることが明らかになりました。グレーのテキスト：技術的にはAA（通常のテキストは4.5:1、大テキストは3:1）という準拠を満たしていますが、実際に読むのは困難でした。インターネット全体にサービスを提供する場合、「技術的に準拠」だけでは不十分です。
私たちは明確な目標を掲げています。WCAG 2.2 AAA 標準 — Webアクセシビリティコンプライアンスの最高かつ最も厳格なレベルであり、重度の障害者を含む幅広いユーザーがコンテンツにアクセスできるように設計されています。リデザイン全体を通して、視覚的な一貫性と可読性が矛盾していましたが、可読性が獲得されました。毎回
これは、ビジョンを超えて拡大されました。スクリーンリーダー、キーボードのみのナビゲート、色調の変化を持つ人のために設計され、自動コンプライアンスツールで捕捉できる範囲を超えています。
また、アクセシビリティは障害だけでなく、言語にも関わるものです。英語では適合していて、ドイツ語がオーバーフローしています。スペイン語では簡潔な内容が、日本語では曖昧になります。40以上の言語をサポートすることで、根本的な簡素化が余儀なくされました。同じ「Webサイトに接続できない/トラブルシューティング」パターンは、英語、ブルガリア、デンマーク、ドイツ語、ギリシャ、日本語、インドネシア語、ロシア語、スロお客様、スロベニア語、セルビア、フィリピンなど、その他にも多く存在します。
12言語で再設計されたエラーステート — テキスト長が異なるのに一貫したレイアウト
では、実際に何を出荷したのか？
まず、Cloudflareが変えなかったものについてお話しします。ハッピーパス — 「人間であることを確認する」 → 「検証する…」 → 「成功！」 — 非常にうまくテストされました。ユーザーは、各段階で何が起こっているかを理解しました。州ごとに異なるコンテンツは、複雑になりすぎると懸念されていましたが、実際には当社の競争優位性でした。
成功への道のり：人間であることの確認 → 認証 → 成功これらの状態はうまくテストされ、ほとんど変化していませんでした
しかし、取り組みが必要な州については、当社が学んだことすべてを指針として大幅な変更を加えました。
エラー状態のテキストを大幅に減らしました。「デバイスのクロックが間違っている、またはこのチャレンジページは仲介者によって誤ってキャッシュされたため、利用できなくなりました」といった詳細な説明ではなく、次のように表示します。
明確で単純なステート名（例：「デバイス時間不正」）
顕著な「トラブルシューティング」リンク
これで、以上です。詳細なガイダンスは必要な時に開く専用のモーダル画面で表示されるようになり、ユーザーは実際に読んでトラブルシューティング手順に従うことができるようになりました。
トラブルシューティングモーダル：ユーザーが必要とするとき、ウィジェットを乱雑になることなく、詳細なガイダンスを提供します
トラブルシューティングモーダルは、コンテキスト（「このエラーは、ご利用中のデバイスの時計やカレンダーが不正確な場合に発生します。このWebサイトのセキュリティ検証プロセスを完了するには、お使いのデバイスをタイムゾーンの正しい日付と時刻に設定する必要があります。」）、試す手順、ドキュメントへのリンク、ユーザーが問題を解決しようとした後にのみ、Cloudflareにフィードバックを送信するオプションなどがあります。まずは支援、そして二番目のフィードバック。
これにより、すべての州がWCAG 2.2 AAAA基準を満たしていることも確認できます。フォントサイズは、最小値が決められています。インタラクティブな要素は明確に焦点を当て、スクリーンリーダーで適切にアナウンスされます。
Turnstileとチャレンジページの統合されたエクスペリエンス
ユーザーが遭遇したのがコンパクトなTurnstileウィジェットでも、完全なチャレンジページでも、情報アーキテクチャは一貫しました。同じ階層。同じ配置です。同じメンタルモデルです。
チャレンジページは、Webサイト名とファビコンが上部にあり、明確なステータスメッセージ（「検証に成功しました」や「ブラウザが古くなっています」など）、そしてその下の実用的なガイダンスによって維持されるなど、クリーンな構成になりました。壁側のオレンジ色や赤色のテキストで表示する必要はもうありません。文脈のない技術専門用語はもう不要です。
再デザインされたチャレンジページステートでは、明確なトラブルシューティング手順が記載されています。
すべてのコンテンツは、40以上のサポート言語でテストされました。私たちのプロセスは、3層の検証を行いました：
設計チームによる初期設計レビュー
当社の認定ベンダーによる専門的な翻訳
ネイティブネイティブが話すCloudflare従業員による最終レビュー
これは、翻訳の正確性だけでなく、コンテンツの長さが言語間で大きく異なる場合でも、ビジュアルデザインが支えるためのものでした。
その結果、より明確でアクセスしやすく、ストレスが軽減され、そして重要なことに、同じように安全なセキュリティ検証エクスペリエンスが実現します。体験を改善するために保護に妥協しませんでした。優れた設計と強固なセキュリティが両立しないことを実証しました。
左側に再デザインされたTurnstileウィジェット、右側に再デザインされたチャレンジページ
しかし、体験をデザインすることはこの戦いの半分にすぎませんでした。何十億人ものユーザーに配信するのでしょうか？そこで登場するのがAnaです。
フロントエンドエンジニアとして最も大変な部分は、開発全体を中心に行うことだという人もいるでしょう。実際には、特にプラットフォームのプリミティブに近い場所で作業している場合、問題はもっと深刻に存在します。ネイティブAPIを使用してインターネットインフラストラクチャの重要な部分を構築すると、UI開発、トレードオフ、長期的な保守性について新しい考え方をしなければなりません。
この場合、TurnstileウィジェットとChallengeページの両方のUIをRustで処理しています。この決断はプラットフォーム全体の安全性と一貫性の面で明確なメリットをもたらしましたが、フロントエンドの複雑性も増大しました。私たちの多くは、一般的なUIインタラクションがほぼ無料で利用できるReactのような最新のフレームワークの人間工学に慣れています。Rustで作業するということは、document.getElementByIdのような低レベルのコンストラクトを使用した単純なインタラクションでさえ再実装するということです。createElement、およびappendChildです。
さらに、コンパイル時間と厳格なチェックにより、JavaScriptベースのフレームワークと比較して、UIの高速イテレーションに当然遅くなりました。ツールのエコシステムはまだ進化中であるため、デバッグもより関与していました。これらの制約により、私たちはより意図をもって熟考されたものにし、最終的にはUI開発への取り組み方をより規律しました。
当初は、パディング調整や整合性の変更といった小規模な視覚的微調整のように見えたものが、すぐにはるかに大きな課題であることが明らかになりました。
翻訳サービスが利用可能になると、コンテンツが38の言語と16の異なるUI状態で可読性があり、利用可能な状態であることを確認しなければなりませんでした。テキストの長さの可変性だけでも、慎重な設計上の決定が必要でした。一部の翻訳は、英語よりも30～300パーセント長いものがあります。「Stax?」のような短い英語の文字列。 Tidak bisa melanjutkan？」となります。または、「Es geht nicht weiter?」レイアウト要件が劇的に変化しています
右から左に移動する言語サポートは、さらに複雑さを増しました。アラビア語、ペルシア語、極漏漏洩語、ヘブライ語のサポートは、テキストの方向を逆にするだけではありませんでした。アラインメント、ナビゲーションパターン、方向アイコン、アニメーションフローを含め、レイアウト全体を反映させる必要がありました。これらの要素の多くは、左から右への依存を前提として設計されているため、これらの決定を見直して、真の双方向性を持たせる必要がありました。
順序付けられたリストにも特別な注意が必要でした。地域によっては、欧米の1、2、3の番号体系が使用されているわけではありません。また、数値シーケンスをハードコーディングすると、インターフェースがグローバルなものに感じられたり、誤ったものに感じられる可能性があります。ロケールを意識した番号付けと完全翻訳可能なリストフォーマットを活用することで、順序がどの言語でも自然で文化的に適切だと感じられるようにしました。
フィードバックレポートにアクションポイントを列挙し始めるようになり、正確性がさらに重要になりました。すべてのアクションは、適切にレンダリングし、適切なフローをトリガーし、ステート、言語、エッジケース間で一貫して動作するために必要でした。
これを実現するために、テストに多額の投資を行いました。ユニットテストは、ロジックを分離して検証するのに役立ち、エンドツーエンドテストは、新しい状態や言語が現実のシナリオで期待通りに機能することを保証しました。このテスト基盤により、安全なイテレーションが可能になり、リグレッションを防ぐことができ、フィードバックレポートがユーザーにとって信頼性が高く実用的なものになることを保証できました。
一連の技術的制約として始まったものが、より堅牢で包括的でテスト済みのUIシステムを構築する機会に変わりました。抽象化が少なく、ブラウザのプリミティブに近いところで作業することで、当社は前提を再考し、国際化戦略を改善し、全体的な品質の水準を引き上げなければなりませんでした。
その結果、機能するソリューションだけでなく、私たちが信頼できるソリューションが完成しました。そして、その信頼があることで、たとえdivを中心化することが簡単な部分であっても、当社が改善を続けることができるのです。
何十億人もの人々のためのデザインは、当社が真剣に考えている責任です。この規模では、私たちのデザインの選択の実際の影響を伝えるためには、測定可能なデータを活用することが不可欠です。これらの変更を展開する準備をする中で、私たちはインターネットで最もよく見られるUIをより人間的なものにすることに本当に成功したかどうかを見極めるために、5つの主要な指標に焦点を当てています。
主要な北星は、チャレンジ解決率：発行されたチャレンジが正常に完了した割合です。「中間キャッシング」のような技術的な専門用語から、「不正なデバイス時間」のようなシンプルで実用的なラベルに移行することで、CSRの大幅な向上が見込まれます。CSRが高いからといって、ボット攻撃が容易になるわけではありません。つまり、正当な人間のユーザーを誤って阻害していたハードルを取り除くことを意味します。
ユーザーがチャレンジページで費やすすべての秒は、必要な情報を得ていません。当社の調査によると、ユーザーは赤いテキストの壁を見た時に選択を麻痺することが多いことがわかりました。新しいスキャン可能なニュートラルカラーのデザインにより、完了までの時間を追跡し、ユーザーが数分ではなく数秒で問題を特定し、解決できるようにします。
以前は、「飽和した赤」を自由に使うと、ユーザーは試みに失敗したと感じ、諦めてしまうという直感的反応を示していました。赤はアイコンのみに使用し、統合アーキテクチャを使用することで、放棄率を低減します。弊社は、ユーザーが「トラブルシューティング」をクリックすると、無力感を感じずにクリックできるようにしたいと考えています。
製品の観点から見た大きな変化の1つが、新しいトラブルシューティングモーダルです。ウィジェット内で直接、明確な番号付きステップを提供することで、セルフサービスサポートをUIに組み込んでいます。これにより、お客様と社内チームの両方で、サポートチケットの量が測定可能に減少することを期待しています。
セキュリティ上の課題が愛されることがほとんどないことは承知していますが、混乱を招くからといって嫌われるべきではありません。コミュニティフォーラム、フィードバックレポート、ソーシャルチャネル全体でソーシャルセンチメントを監視し、会話が「このウィジェットは壊れている」から「問題が発生したが、解決できた」に変化しているかどうかを確認しています。
プロダクトマネージャーとして、私は目に見えないセキュリティを目標とすることがよくあります。最高の課題は、ユーザーが決して見えないものです。しかし、チャレンジが必要な場合は、用心棒ではなくアシスタントが見えるはずです。この再設計は、AAAアクセシビリティと高セキュリティ基準が競合するものではないことを証明しています。これらは同じコインの裏表です。Turnstileとチャレンジページのアーキテクチャを統合することで、イテレーションが高速化し、インターネットをこれまで以上に人間的に保護できる基盤を構築しました。
この再設計は土台ではあり、完成形ではありません。
私たちは、ユーザーが新しい体験とどのようにインタラクションするかを引き続き監視し、学んだことを基に改善を重ねていきます。新しい設計に組み込まれたフィードバックメカニズム、つまりユーザーに問題報告を求めるのではなく、実際にユーザーのトラブルシューティングに役立つものは、これまで以上に豊かな洞察をもたらします。
Cloudflareでは、セキュリティ環境の進化にも注目しています。ボット攻撃がますます巧妙になり、AIが人間と自動の行動の境界があいまいになるにつれて、検証の課題はますます難しくなっていく一方です。私たちの仕事は、常に先手を打つこと、つまり、ヒューマンエクスペリエンスを悪化させることなくセキュリティを改善し続けることです。
新しいTurnstileやチャレンジページをご覧いただき、フィードバックがある方はぜひお聞かせください。当社のコミュニティフォーラムを通じてご連絡いただくか、エクスペリエンス自体に組み込まれたフィードバックメカニズムをご利用ください。