動画記事 · Y Combinator
Stripe が新 Web サイトを構築した方法
動画の文字起こしと公開情報をもとにAIで要約・構成しています。 正確な発言は元動画と時間位置で確認してください。
まず要点
Stripeのデザイン責任者Katie Dillが、新Webサイトの構築においてAIツールを設計プロセスに統合し、「ストアウォーキング」によるユーザー体験の統一と、CEOパトリック・コリーアンの関与を重視した戦略的リブランディングの裏側を明かす。
Stripe が新 Web サイトを構築した理由:生成 AI と組織文化が変えた「ブランドの物語」
Stripe は 2024 年、6 年前に公開された旧ホームページを全面的に刷新しました。単なるデザイン更新ではなく、決済からサブスクリプション、AI 企業向け課金まで事業領域が劇的に拡大した現代において、旧来のストーリーではもはや自社の価値を伝えきれなくなったことが最大の理由です。
この新サイト構築の裏側には、生成 AI を「創造的な探索ツール」として活用した革新的なデザインプロセスと、全社員がユーザー視点に立つ「ストアウォーキング」文化がありました。ここでは、Stripe がどのようにして洗練されたブランド体験を再定義し、CEO の決断に至るまでのストーリーを紹介します。
事業の多様化と旧サイトとの乖離
新サイト構築の背景にあるのは、ビジネスモデルの劇的な変化です。2020 年に公開された旧サイトは、当時としては非常に優れたデザインでしたが、時間が経つにつれて「語りかける物語」が陳腐化していました。
当初 Stripe の中心は決済だけでした。しかし現在では、多国籍企業向けの資金移動支援、サブスクリプション管理、AI 企業のための使用量ベース課金、税務・収益認識プラットフォームの構築など、事業領域は広範に広がっています。
「ビジネスが、サイト上で語られていた物語の範囲を超えて進化していました」
旧サイトでは、製品ラインナップが増えるにつれてページが長くなり、何が Stripe の本質なのかというストーリーが見失われ始めていました。また、デザイン言語にも一貫性が欠けており、「12 度のバー」「グラデーションの波」といった要素がブランドの洗練さを表現しきれない状態でした。
「単に機能を追加し続けるだけでは、サイト全体の物語を見失いかねない」。この危機感こそが、新サイトの構想へと繋がりました。
生成 AI を活用した「波」のデザイン探索
新サイトのビジュアル刷新において、最も注目を集めたのが生成 AI の活用方法です。Stripe は AI を単なる効率化ツールとして使うのではなく、「創造的な探索と品質保証」の手段として位置づけました。
具体的には、テクスチャ、色合い、動きの組み合わせを生成 AI で無限に試作しました。その結果、ブランドが求める「洗練されたイメージ」に適合する、独特な「波(Wave)」のデザインが特定されました。
「AI は私たちの作業を大幅に高速化し、ほぼ瞬時に優れた成果をもたらします。しかし、それを使ってさらに次のレベルへ押し上げ、興味深く、遊び心があり、美しいものを作ることができました」
このプロセスでは、数週間から数ヶ月にわたり「これが違う」という案を何度も捨てながら、最終的にブランドの進化を体現するビジュアルを探り当てました。AI による探索がなければ、到達しなかったであろうデザイン領域への挑戦です。
「ストアウォーキング」で断絶を防ぐ組織文化
新サイトの成功は、デザインチームだけの努力ではありませんでした。Stripe は全従業員を対象にした「ストアウォーキング(Store Walking)」という文化を定着させています。
これは、開発者や営業など異なる部門の社員が、自社の製品をユーザーの視点で実際に体験し、使い倒す取り組みです。複雑なエコシステムを持つ大企業において、部門間の断絶を防ぎ、統合されたユーザー体験(UX)を確保するための重要なプロセスでした。
「部門間の連携とユーザー体験の統合を確保するために、全社員がユーザー視点に立つ文化が必要でした」
この活動を通じて、製品の詳細やユーザーの課題が組織全体で共有され、新サイトが「誰に奉仕し、どのように奉仕するか」という明確なビジョンを持つことができました。
CEO の審美眼と最終決定のプロセス
膨大なデザイン案の中から絞り込まれた候補を、Stripe の CEO パトリック・コリアン(Patrick Collison)に提示するプロセスも特徴的です。多くのデザインレビューが行われた後、最終的な方向性は CEO の決断力と審美眼に委ねられました。
「パトリックが『ウェブサイトの本質は何か』と問いかけました。それは自分自身が誰であるかを示すマニフェスト(宣言)なのです」
新サイトには、Stripe が処理する取引額を世界の GDP 比率としてリアルタイム表示する「GDP カウンター」や、製品の詳細をモーダルウィンドウで段階的に開示する「ベントobox(弁当箱型レイアウト)」など、大胆な要素が盛り込まれています。これらはすべて、ユーザーに安心感と信頼を与えつつ、複雑な情報を直感的に伝えるための意図的な選択です。
細部への愛と「楽しい」体験の再定義
新サイトのアニメーションやインタラクションにも、深い意味が込められています。ボールの動きや波の揺らぎは、単なる装飾ではなく、「Stripe が携わる仕事に込める細やかな配慮」を表現しています。
「ここに込められた細やかな配慮が見えれば、裏側でも資金の移動や情報の保護において同様の配慮がなされていると考えるのが妥当です」
SaaS 企業のウェブサイトが画一的で退屈になりがちだった中で、Stripe は「楽しい」という要素を再定義しました。ただし、それは無秩序な遊び心ではなく、ユーザーに「クリックできる」というフィードバックを与え、ブランドの技術力を示すための計算された動きです。
まとめ
Stripe の新 Web サイトは、生成 AI を創造的なパートナーとして活用し、組織全体でユーザー体験を統合した結果生まれたものです。これは大規模テック企業におけるデザイン刷新の新たな標準を示しており、単なる「見た目」の更新を超えて、企業の成長とブランドの本質を体現する重要なツールへと進化しました。
Original Source
元動画で発言を確認
プレイヤーは必要になるまで読み込みません。YouTubeのCookieと通信も再生を選ぶまで開始しません。
時間位置から根拠を確認
章や引用を選ぶと、元動画をその位置から再生します。