The White House:ダークモード

スポンサードサーチ

アメリカの大統領は、2021年1月20日にジョー・バイデン氏に代わりましたが、これに伴いホワイトハウスのWebサイトもリニューアルが行われました。

ホワイトハウスのWebサイトは2017年12月中旬にリニューアルされ、CMSもDrupalからWordPressに変更されていますが、今回も引き続きWordPressが採用されました。

ダークモードとアクセシビリティ

新しくなったホワイトハウスのWebサイトがこちら。

The White House
The White House

画面の左側には、常に追随する半分が濃い紺色になっている「〇」と「Tt」と書かれたものがありますが、こちらの「〇」をクリックすると、流行のダークモードに切り替えられます。

The White House:ダークモード
The White House:ダークモード

また、「Tt」と書かれた方をクリックすると、大きな文字に切り替えられるようになっています。

The White House:大きなフォント
The White House:大きなフォント

さらに、南米からの移民が多いことからかスペイン語版もあります。

The White House:スペイン語
The White House:スペイン語

高速化チューニングが行われている

また、WordPressで構築がされていますが、高速に表示されると話題になっていました。

HTMLのソースコードを見ると、以下のような処理が行われている事がわかります。

  • WordPressのバージョンなどの不要なタグを削除
  • フォントはテーマファイル内に設置
  • ロゴ・アイコン画像はsvgで作成
  • HTML5のsrcsetでウィンドウサイズに合わせて画像を切り替え
  • 画像を遅延ロードできるLazy Loadの導入

確かに、WebPageTestの結果は、Cache static content以外はAとなっています。

The White House:WebPageTest
The White House:WebPageTest

GTmetrixの結果も、Aとなっています。

The White House:GTmetrix
The White House:GTmetrix

ただ、PageSpeed Insightsのスコアは良くありません。

これは、日本からアクセスしていることで、コンテンツのキャッシュを行うCDN(コンテンツデリバリーネットワーク)の影響があるかもしれません。

また、スコアはアクセスする曜日と時間帯でかなり変わったので、アメリカからアクセスが多い時間帯とそうでない時間帯などでスコアは大きく変わってそうです。

測定時のパソコンでのスコアは、83ですが別日時には95が出ました。

PageSpeed Insight:ホワイトハウス PC
PageSpeed Insight:ホワイトハウス PC

モバイルでのスコアは、47。

PageSpeed Insight:ホワイトハウス SP
PageSpeed Insight:ホワイトハウス SP

改善できる項目として出ているのは、以下の項目です。

  • 適切なサイズの画像
  • 次世代フォーマットでの画像の配信
  • レンダリングを妨げるリソースの除外
  • キー リクエストのプリロード
  • 使用していない CSS を削除してください
  • 使用していない JavaScript の削除

例えば、適切なサイズの画像を見てみると、パソコン側では以下の画像が指摘されています。

改善できる項目:適切なサイズの画像
改善できる項目:適切なサイズの画像

ホワイトハウス自体の画像以外はだいたい200KB以下に抑えられていますが、「過大なネットワークペイロードの回避」での合計サイズは、3,277KBとなっています。

これは、Googleが推奨する「合計バイトサイズを1,600KB未満」の約2倍となっています。

Aim to keep your total byte size below 1,600 KiB. This target is based on the amount of data that can be theoretically downloaded on a 3G connection while still achieving a Time to Interactive of 10 seconds or less.

Google Developers:Avoid enormous network payloads

これは、リニューアル時点でWebサイトとしては爆速になるように高速化チューニングしたけど、実際に運用が始まってみたら投稿では画像が増えがちなのと、運用担当者は画像サイズや画像フォーマットをあまり気にせずアップするので重くなってしまう、という事が発生しているのかもしれません。

リニューアルを行った時点で、記事投稿の際の画像運用ポリシーも決まっていると思いますが、折角の高速化チューニングが運用が進むと生かせなくなってくるのは、構築担当者としては頭の痛い話です。

イースター・エッグ

Gigazine:ホワイトハウス公式サイトのHTMLソースに隠しメッセージが発見されるなどで指摘されているのは、埋め込まれているイースター・エッグ。

イースター・エッグ (コンピュータ) – Wikipediaによると、

例えば、どのページでも構わないのでHTMLのソースコードを見てみると、ヘッダー部分に以下のような米国デジタルサービス(US Digital Service:USDS)への参加を募っています。

<!-- If you're reading this, we need your help building back better. https://usds.gov/ -->

米国デジタルサービス(US Digital Service:USDS)は、JTETROが出している米国行政における電子化(デジタルガバメント)及びクラウド活用の現状(PDF)によると、2014年8月に創設され、「大統領の掲げる主要政策の実現のため、大幅な指揮の方向転換が必要な政府の IT プロジェクトに介入し、トップダウンで指導する」組織です。

本題から外れますが、米国行政における電子化(デジタルガバメント)及びクラウド活用の現状(PDF)のレポートは、日本でもデジタル庁が設立されるというのがありますので非常に読んでて面白いのでオススメです。

USSDは、民間の優れたテクノロジー人材から構成されているので、常に人材を求めているんでしょうが、採用ページを見てみると最長4年間の期間雇用となるようです。

USDS operates on a tour-of-service model with a maximum term of four years.

United States Digital Service:Apply to USDS

また、応募資格として「薬物検査の合格」が入っているあたり面白いですね。

To work at USDS, you must be a U.S. citizen, and pass a background check and a drug test.

During the COVID-19 pandemic, most people at USDS are working remotely from many locations across the country. During normal times, we ask that you make Washington, D.C. or the surrounding area your base during the work week.

United States Digital Service:Apply to USDS
  • USDSで働くには、アメリカ市民であり、身元調査と薬物検査に合格する必要があります。
  • COVID-19のパンデミックの間、USDSのほとんどの人々は全国からリモートで働いています。平常時は、平日はワシントンDCやその周辺地域を拠点にしてください。

ちなみに、USDSのHTMLソースにもオフィシャルマスコット「カニのモリー」のイースターエッグが入ってました。

Mollie the crab
Mollie the crab

他にも、WordPressの共同創業者Matt Mallenwegが、自身のブログにNew WhiteHouse.govという記事を上げていますが、その中でこのホワイトハウスで使われているTheme(テーマ)のスタイルシートにイースター・エッグがある事について触れています。

style.cssを見ると確かに以下のようになっています。

/*
Theme Name: The White House
Text Domain: whitehouse
Version: 46
*/

Version:46は、バイデン新大統領が第46代目の大統領であることからですね。

細かいところまで洒落が効いてます。

月額9,900円で独自ECサイトを構築できる「ファースト・ローンチ」

ファースト・ローンチ」の「CS-Cart」スタートプランは、月額9,900円で多言語・多通貨対応ECサイト構築パッケージ「CS-Cart」に、日本国内の配送業者に対応した「日本国内向け配送料金算」アドオンの導入と日本語対応、初期設定を行ってご提供しています。

スピード感のある独自ECサイト構築をしたい、BASEやShopifyでは物足りない、独自ECサイトを構築したい、という場合には是非「ファースト・ローンチ」をご検討ください。

ファースト・ローンチ 公式サイト

ITのことで、お困りではありませんか?

ITは、コンサルティングからプロジェクトを全体を見据えて実施しなければ上手くいきません。
リソース・シェアリングは、ITのコンシェルジュとして、クライアントにとっての最適解をご提案するコンサルティングから構築・運用・解析までをワンストップで対応できるITコンサルティング会社です。
ITに関してお困りのことがあればお気軽にご相談ください。

ITプロジェクトで最適解を探すなら
御社にとって最適なWebサイト構築をするなら
失敗しないWebシステム開発をするなら
WordPressを活用したいなら
ECサイトを構築したいなら
越境ECサイトを構築したいなら
企業間取引向けECサイトを構築したいなら
マーケットプレス型ECサイトを構築したいなら
課題や事例から最適解を探すなら
リソース・シェアリングの実績
お問合せ

スポンサードサーチ