様々なサービスのシステム状況ページをまとめて比較してみた

## はじめに

様々なクラウドサービスが普及してきたことで、何か問題が発生したときに各サービスのシステム状況を確認することが増えてきました。

サービスごとに見せ方が違くて面白かったので、ごく一部のサービスのみですがまとめて比較してみました。

## システム状況ページ一覧

### Apple

https://www.apple.com/jp/support/systemstatus/

__Safari__
初期表示ではシステム状況が折り畳まれています。
<img width="728" alt="システム状況_Apple_Safari_1.png" src="https://qiita-image-store.s3.amazonaws.com/0/138245/0a691752-bf5c-1b88-e293-30cca175c808.png">

[+]ボタンをクリックするとリスト形式で表示されます。
<img width="729" alt="システム状況_Apple_Safari_2.png" src="https://qiita-image-store.s3.amazonaws.com/0/138245/fb357a64-0589-42f9-71ea-47562f88b4d7.png">

__Chrome__
理由はわかりませんが、Webブラウザによって表示が異なります。
(条件もWebブラウザなのかわかりません)

個人的にはChromeの方がひと目でシステム状況がわかって見やすいです。
<img width="1025" alt="システム状況_Apple_Chrome.png" src="https://qiita-image-store.s3.amazonaws.com/0/138245/62ca3fad-ac10-05e3-d2b9-dffc1ee08aae.png">

Appleはシンプルで無駄がなく、システム状況においても洗練されたデザインだと感じました。

### Microsoft Azure

https://azure.microsoft.com/en-us/status/

リージョンが非常に多いため、表形式でまとめられています。
タブと横軸をリージョンにあて、縦軸にサービスがあてられています。
<img width="1304" alt="システム状況_Azure.png" src="https://qiita-image-store.s3.amazonaws.com/0/138245/2ca5c25a-d7d5-90b4-e06a-b04609d9da50.png">

Microsoftらしいデザインと色使いです。
わかりやすい凡例が画面右上にあり、英語が苦手でも簡単に把握できるようになっています。

### AWS

https://status.aws.amazon.com/

縦軸と横軸はAzureと同様です。
<img width="830" alt="システム状況_AWS_1.png" src="https://qiita-image-store.s3.amazonaws.com/0/138245/fdca9d67-9163-c6cf-92ea-07f66ddc44c7.png">

スクロールしていくと、過去のステータス履歴も確認できます。
<img width="828" alt="システム状況_AWS_2.png" src="https://qiita-image-store.s3.amazonaws.com/0/138245/797272df-8900-53c6-56aa-f3c2bffcd5ea.png">

全サービスとリージョンの組み合わせにRSSがあるのが素晴らしいです。
IFTTTやSlackなどと組み合わせれば簡単に通知の仕組みを作れそうです。

### GCP

https://status.cloud.google.com/

横軸に日付、縦軸にサービスがあてられています。
現在のシステム状況は一番右のアイコンで示されています。
<img width="1037" alt="システム状況_GCP_1.png" src="https://qiita-image-store.s3.amazonaws.com/0/138245/5287f5c9-44e2-afdc-841f-9d3082d0bf91.png">

凡例はページの最下部にあります。
<img width="1024" alt="システム状況_GCP_2.png" src="https://qiita-image-store.s3.amazonaws.com/0/138245/e237e2dd-0a64-63c6-8df8-6ce59ab5820c.png">

がっつりマテリアルデザインではないですが、Googleらしいデザインです。
現在と過去のシステム状況が同時にひと目でわかるのがいいです。

### Firebase

https://status.firebase.google.com/

Googleが展開しているサービスなので、GCPとほぼ同様のデザインです。
<img width="1036" alt="システム状況_Firebase_1.png" src="https://qiita-image-store.s3.amazonaws.com/0/138245/6ac12a6c-744e-4245-932c-31fcf7a5016c.png">

凡例の位置も同様にページの最下部です。
<img width="1022" alt="システム状況_Firebase_2.png" src="https://qiita-image-store.s3.amazonaws.com/0/138245/ac611483-12bf-ce69-984f-ef57ae19cb90.png">

GCPよりマテリアルデザインが強いです。
問題の発生期間もわかりやすく表しています。

### Fabric

http://status.fabric.io/

サービスの数が多くないため、非常にシンプルな表示となっています。
過去の問題もすぐ下に最新順で並んでいます。
<img width="885" alt="システム状況_Fabric.png" src="https://qiita-image-store.s3.amazonaws.com/0/138245/d060d630-dfe7-c940-73d6-12d5fd13e53d.png">

### Office 365

https://portal.office.com/servicestatus

こちらもサービスの数が多くないため、シンプルな表示です。
<img width="1036" alt="システム状況_Office365.png" src="https://qiita-image-store.s3.amazonaws.com/0/138245/0ff58587-20d0-fa21-9a72-68bf3454f9b9.png">

エンドユーザー向けのサービスだからなのかはわかりませんが、正常を示す表示が画面の半分以上を占めています。
異常時にどのような表示になるのかが気になるところです。

## おわりに

いかがでしたでしょうか？
URLも専用のサブドメインとしていたり、通常のドメインの後ろに `/status` などを付けたりと違いがありました。

みなさんも __自作サービスのシステム状況ページを作る際にはぜひ参考にしてください__ 。
(なかなかないかもしれませんが)