ケーススタディ: オバマ氏の資金調達ウェブサイトの制作

1.

カイル・ラッシュはウェブエンジニアです。

2011 年 6 月、彼は BarackObama.com に入社し、2012 年の米国選挙のオバマ公式 Web サイトのデザインを担当しました。

（写真は2011年6月のオバマ氏の公式ウェブサイト）

公式ウェブサイトの主な目的は宣伝に加え、資金調達です。

前回の選挙でオバマ氏は6億9000万ドルを集めた。これは莫大な金額だが、米国経済は過去4年間改善していないため、今回の選挙にはさらに多くの資金が必要になる。チームは、資金必要額が過去最高の10億ドルに達すると見積もっている。

歴史上、10億ドルを調達したウェブサイトは存在しません。カイル・ラッシュはそれができるかどうかわからなかったが、資金を集めることができなければオバマが選挙に勝つことはできないだろうということは重々わかっていた。

2.

2012年の米国大統領選挙はオバマ氏が僅差でロムニー氏を破って終了した。彼は最終的に11億ドルを集め、史上最高の資金調達（そして最高の支出）をした大統領候補となった。 （2位はロムニー氏で、彼も10億ドルを集めた。）

11億ドルのうち、4億1000万ドルはオフラインで調達され、6億9000万ドルはオンラインで調達されました。 BarackObama.com だけでも 2 億 5000 万ドルの寄付金が集まりました。

6か月で、BarackObama.comは

* 訪問者数 17,807,917 人、ページビュー数 81,548,259 回

* 4,276,463件の寄付

* 寄付コンバージョン率 24% (訪問者の 4 人に 1 人が寄付)

このような素晴らしい成果はどのようにして達成されたのでしょうか?

3.

膨大なトラフィックがあり、優れたユーザー エクスペリエンスを提供し、人々に寄付を促し、その寄付を迅速かつ安全に処理できる Web サイトを作成することは、簡単な作業ではありません。

最近、Kyle Rush 氏は、多くの内部事情を明らかにし、BarackObama.com の制作経験を技術的な観点からまとめた記事を書きました。次に、オバマ氏の技術チームがどのようにそれを行ったかを見てみましょう。

（写真は2012年5月のオバマ氏の公式サイト）

ウェブサイト制作チームは 2011 年後半に結成されました。Kyle Rush は最初に参加したフロントエンド エンジニアであり、ウェブサイトの外観とユーザー エクスペリエンスを担当しました。

当初はチームが購入したサーバー上にウェブサイトが置かれており、運営や寄付金も比較的安定していました。しかし、競争が激化するにつれ、状況は心配になってきます。 2012年5月、ロムニー氏の月間資金調達額が初めてオバマ氏の資金調達額を上回った。

選挙本部はウェブサイトを刷新し、寄付金を集めるためにあらゆる努力をしなければならないと決定した。その結果、技術チームは大規模に拡大し始め、フルタイムのフロントエンドエンジニアの数は 1 人から 14 人に増加し、そのうち 6 人が資金調達ページの作成を専門に担当しました。

4.

技術チームが最初に下した決定は、静的 Web サイト ジェネレーター Jekyll を使用して、動的な Web ページを静的な Web ページに置き換え、Web ページのオープンを高速化することでした。ウェブサイトはできるだけ早く開く必要があります。ある調査によると、開く速度が100ミリ秒遅くなるごとに、Amazonの売上は1％減少することがわかりました。

2 番目の決定は、Akamai をサービス プロバイダーとして使用し、すべての Web ページを CDN に配置することでした。世界最大の CDN プロバイダーであり、50,000 台以上のサーバーを導入し、米国全土で理想的なアクセス速度を提供しています。オバマ氏のシカゴ選挙本部は、公式ウェブサイトの HTML ページを 20 ミリ秒以内に読み込むことができる。

3 番目の決定は、寄付のバックエンドを API 呼び出しにすることでした。これは、訪問者の 23% がモバイル デバイスを使用しているため、複数のフロント エンド (Web とモバイル) を展開する必要があるためです。 API を使用すると、さまざまなフロントエンドがバックエンドと同じ方法で通信し、JSON 形式で情報を相互に渡すことができます。

4 番目の決定は、バックエンドを PHP で開発し、Amazon の EC2 プラットフォームに配置することでした。

5 番目の決定は、ダウンタイムを回避するために 2 つのバックエンドを開発することでした。あるシステムが動作を停止すると、自動的に別のシステムに切り替わります。ダウンタイムは士気に悪影響を及ぼすだけでなく、経済的にもコストがかかる可能性があるため、これは重要です。寄付金は毎分のように集まっており、最高記録は 1 時間で 300 万ドルなので、寄付を止めることはできません。

5.

新しい Web サイトの初期完成後、webpagetest.org を使用してテストしたところ、満足のいく結果が得られました。

元のページは 4 秒経っても読み込まれませんでしたが、新しいバージョンはわずか 1 秒で表示されます。プラットフォーム全体への訪問数は 60% 増加し、寄付のコンバージョン率は 14% 増加しました。

次のステップは、ページのさまざまな詳細を微調整することでした。合計 240 回の A/B テストが実施され、少なくとも 240 のバージョンが繰り返されました。

調整されたページでは視覚効果とユーザー エクスペリエンスが大幅に向上し (クリックすると全体図が表示されます)、寄付のコンバージョン率がさらに 49% 増加しました。 。

オバマ氏の選挙後、BarackObama.com には 1,101 件のフロントエンド デプロイメントがありました。

6.

結果として、開発計画全体が非常に成功し、資金調達作業は 1 分たりともダウンタイムなくスムーズに完了しました。

カイル・ラッシュは、総括して記録を残す必要性を感じた。上記の開発プロセスに加えて、彼はフロントエンドチームが使用するツール、バージョン管理の Github、A/B テスト管理の Optimizely、コードコンパイルの CodeKit についても言及しました。

カイル・ラッシュは次のように結論づけた。

「これは私がこれまで経験した中で最高の開発環境だと 100% 確信しています。私たちは微調整を続け、コンバージョン率は驚くほど向上しました。チーム全体が非常に満足しています。しかし、最もエキサイティングなことは、2013 年 1 月 21 日現在、バラク オバマ氏が依然として米国大統領であるということです。」

（以上）

著者: 阮一峰

原題: ケーススタディ: オバマ氏の資金調達ウェブサイトの制作

キーワード: 事例のポイント、オバマ、馬の資金調達、ウェブサイト、制作、プロセス、カイル、ラッシュ、ウェブマスター、ウェブサイトの宣伝、金儲け