ホームページが止まっていないかを見張ってくれる「サイト監視」のサービスは、いざ使ってみると画面が難しく感じられることがあります。グラフや数字、設定の項目がずらりと並んでいて、結局どこを見ればよいのか分からない、という声も少なくありません。そこで、サイト監視サービス「SiteBeacon（サイトビーコン）」の画面を、ゼロから見やすく作り直しました。この記事では、何を変えたのか、使う方にとって何がうれしいのかをご紹介します。
サイトの監視、画面が難しくありませんか
ご自分のホームページや WordPress のサイト、お店のサイトをお持ちの方にとって、サイトが止まっていることに気づけないのは大きな心配ごとです。けれども監視のサービスを申し込んでみると、専門の言葉や細かい数字が並ぶ画面に戸惑ってしまい、「結局うちのサイトは大丈夫なの？」という一番知りたいことが、すぐには分からないことがあります。
さらに、設定の項目が最初からたくさん並んでいると、どれを触ればよいのか迷ってしまいます。SiteBeacon の以前の画面も、管理画面らしい作りだったため、毎日さっと見るには少し情報が多すぎました。そこで「ひと目で分かる」「迷わない」を目標に、画面を作り直すことにしたのです。
SiteBeacon の画面をゼロから作り直しました
今回の作り直しでは、見た目を少し整えるだけでなく、画面の並びや見せる順番から考え直しました。ここからは、変えたところを順にご紹介します。
上にメニュー、1 列、白地のすっきりした画面
画面のいちばん上に白い帯のメニューを置き、「サイト」「通知の設定」「プラン」の 3 つだけを並べました。中身は横に分けずに 1 列で上から下へ読める形にし、色も白地を基本にしています。そのため、どの画面を開いても、いま自分がどこにいて、次にどこへ進めばよいのかが分かりやすくなりました。
いちばん上のひとことで、全体の状態が分かる
サイトの一覧を開くと、まず目に入るのがいちばん上のひとことです。どのサイトにも問題がなければ「3 サイトとも、問題はありません」のように表示され、その下に「5 分ごとに見ています。」と、最後に確かめた時刻が並びます。気になるサイトがあるときは「1 サイトに、見ておくことがあります」と表示が変わるので、細かい数字を読まなくても、いまの状態がすぐに分かります。
また、サイトを登録したばかりでまだ結果が出ていないときは、「まだ確かめているところです」「5 分ほどで最初の結果が出ます。」と表示されます。結果が出る前に「問題はありません」と言い切らないようにしているので、初めての方も安心してお待ちいただけます。
見ておくことがあるサイトだけが「見ておくこと」に並ぶ
いくつものサイトを登録していると、全部のサイトを 1 つずつ見て回るのは大変です。そこで、止まっている・期限が近いなど、気にしておいたほうがよいサイトがあるときだけ、ひとことのすぐ下に「見ておくこと」の欄が表示されるようにしました。並ぶのは見ておくことがあるサイトだけなので、問題のないサイトに埋もれて見落とすことがありません。
それぞれの行にある「見る」を押せば、そのサイトの詳しい様子にそのまま進めます。さらに、サイトの一覧には「すべて」「問題あり」「期限が近い」「止めている」の絞り込みのボタンも用意したので、見たいサイトだけに絞って確認することもできます。
よく使うものだけを見せ、詳しい設定は押すと開く
画面にはふだんよく使うものだけを表示し、たまにしか触らない設定は、押すと開く形にまとめました。たとえば「通知の設定」の画面では、いつも見えるのは「知らせるメールアドレス」「メールで知らせる」「夜は送らない」の 3 つで、ほかの項目は「詳しい設定」を押したときに開きます。サイトごとの詳しい画面も同じ考え方で、いちばん上に「24 時間の稼働」「応答の速さ（平均）」「SSL の期限」「ドメインの期限」の 4 つの数字を大きく並べ、ページの中身の監視などは「中身の監視・詳しい設定」を押すと開くようにしています。
サイトを追加する画面も、入力するのは「ページの URL」と「サイト名」の 2 つだけです。注意点も、まず必要なものだけを表示し、ほかは「くわしく見る」を押すと読めるようにしました。最初から全部を覚えなくても使い始められるのが、今回の作り直しで大切にしたところです。
スマホでも見やすく
外出先やお店の合間に、スマホでさっと確かめたい方も多いと思います。新しい画面では、スマホの幅で開くとメニューが横に並んで指で動かせるようになり、パソコンでは表で表示しているサイトの一覧も、スマホではカードの並びに変わります。そのため、小さな画面でも文字が詰まらず、サイトごとの状態が読み取りやすくなりました。
作り直す前と後をくらべると
変わったところを、表にまとめました。
| くらべるところ | 作り直す前 → 作り直した後 |
|---|---|
| 画面の作り | 前：左にメニューの列がある、管理画面らしい 2 列の作り後：上にメニュー、中身は 1 列、白地のすっきりした作り |
| 全体の状態 | 前：一覧の数字を見て、自分で判断する後：いちばん上のひとことで分かる（例：「3 サイトとも、問題はありません」） |
| 気にするサイト | 前：ホームとサイトの一覧に分かれて表示後：サイトの一覧の「見ておくこと」に、該当するサイトだけが並ぶ |
| 設定の項目 | 前：多くの項目が一度に並ぶ後：よく使うものだけを表示し、ほかは「詳しい設定」を押すと開く |
| スマホ | 前：パソコンの画面を基本にした作り後：サイトの一覧がカードの並びに変わり、指で読みやすい |
使う方にとって、うれしいこと
いちばんのうれしい点は、画面を開いて数秒で「いま大丈夫かどうか」が分かることです。毎日サイトの様子を確かめるのが手間にならず、何かあったときも「見ておくこと」に並んだサイトから順に見ればよいので、慌てずに対応できます。
また、詳しい設定は押すと開く形にしたことで、パソコンやインターネットが得意でない方でも、迷わずに使い始められるようになりました。もちろん、細かく設定したい方は「詳しい設定」から、これまでどおりの項目を使えます。お客さまのサイトをまとめて見る制作会社や保守を請け負う方にとっても、気にするサイトだけがすぐ分かる画面は、確認の時間を短くするのに役立ちます。
まずは無料のトライアルから
SiteBeacon は、登録すると最初に「Free トライアル」から始まります。7 日のあいだ、5 サイトまで、有料の機能も含めてお試しいただけます。登録は無料で、クレジットカードの登録は不要です。トライアルが終わると、2 サイトまで監視できる Free のプランに切り替わります。
「自分のサイトがきちんと表示されているか、ときどき不安になる」という方は、まずはご自分のサイトを 1 つ登録して、新しくなった画面を体験してみてください。サイトを登録すると、5 分ごとに表示できるかを確かめ、表示できないときにメールでお知らせします。