ウェブサイトメンテナンスページのリスト構築のヒント

ウェブサイトメンテナンスページのリスト構築のヒント
また、多くの場合、メンテナンスのために Web サイトを少なくとも数分間オフラインにする必要があります。

では、ウェブサイトがメンテナンスのために停止する場合はどうすればよいでしょうか?ユーザーに 404 やその他のエラー ページを表示させたくはありませんし、ユーザーに「後で」ではなくすぐにサイトに戻ってくるように促したいですよね?この場合は、カスタム メンテナンス ページを作成する必要があります。以下に、新規訪問者とリピーターの両方を維持するのに役立つ効果的なメンテナンス ページを作成するためのヒントのリストを用意しました。

1. メンテナンスページをシンプルで使いやすいものにする

メンテナンス ページの全体的な役割は、サイトがまだ稼働しており、メンテナンスは一時的なものであることをユーザーに知らせることです。これ以上何もする必要はありません。ページの内容が一目でわかるようにし、訪問者が興味を持っている情報を提供します。

シンプルなメンテナンス ページのもう 1 つの便利な機能は、メンテナンス情報を複数の言語で表示することです。ウェブサイトは国際的であり、訪問者の多くは英語をある程度話すかもしれませんが、複数の言語を提供することは役に立ちます。オンライン翻訳ツールは非常に不正確なことが多いため、使用の際は注意してください。メンテナンス ページで一番避けたいのは、ユーザーをさらに混乱させたり、最悪の場合、ユーザーを遠ざけたりすることです。

メンテナンスページのスクリーンショット

Twitterメンテナンス ページは、最小限の情報を直接提供し、シンプルなデザインを維持しながら、魅力的でユーザーフレンドリーなままです。

メンテナンスページのスクリーンショット

Google の AdSense ページでは、簡潔なメンテナンス情報が複数の言語で提供されています。

メンテナンスページのスクリーンショット

また、Google AdSense では、何が起こったのか、いつページがオンラインに戻るのかをわかりやすい言葉で説明することもあります。なお、Google は、ダウンタイム中も収益は通常どおり追跡され、広告のターゲティングは影響を受けないとユーザーに保証しています。

メンテナンスページのスクリーンショット

Apple ストアのこのメンテナンス画面がその要点を捉えています。

メンテナンスページのスクリーンショット

MobileMe は、視覚的に魅力的な多言語メンテナンス画面を使用します。

メンテナンスページのスクリーンショット

2. ユーザーにとって不便であることを認識する

ウェブサイトがダウンすると、通常のユーザーにとって非常に不便になります。これは単純な事実です。しかし、不便を被ったユーザーが疎外されたユーザーにならないようにしてください。サイトのダウンタイムがユーザーにとって苦痛であることを認めるだけで、多くの場合、ユーザーは満足します。サービス停止について謝罪し、役立つ情報を提供して、これがお客様にとって何を意味するかを理解していることを伝えます。

Last.fm はメンテナンス ページの右上に目立つ謝罪文を掲載しました。

メンテナンスページのスクリーンショット

Twitter はより手間のかからないアプローチを提案したが、ユーザーがダウンタイムに耐えられない可能性があるとして謝罪した。

メンテナンスページのスクリーンショット

3. ユーモアを使うことを恐れない

ウェブサイトがダウンしているからといって、あまり深刻に考える必要はありません。ちょっとしたユーモアを使うと、メンテナンス ページが面白くなり、ダウンタイムで不便を感じている訪問者の目にサイトの印象が良くなることがあります。あなたのウェブサイトのコンテンツに関連した小さな天使たちがユーモラスな方法で描かれると想像してみてください。ロゴやマスコットを少しいじるだけでも、あるいは Web サイトとはまったく関係のないものであっても、メンテナンス ページを盛り上げてくれる天使が必ずどこかにいるはずです。

Etsyによれば、Halm は現在技術的な問題に対処しているとのこと。 Idea Etsy は、何が起こっているのか、そして回復にかかる推定時間についても伝えました。

メンテナンスページのスクリーンショット

SoundCloud はすぐに復旧することを約束し、メンテナンス ページを強調するために語呂合わせを使用しました。 (ソース… )。

メンテナンスページのスクリーンショット

Ning はかわいいイラストを使用して、経験豊富な技術者 (写真) が Ning をオンラインにするために懸命に働いていると述べています。 (ソース… )。

メンテナンスページのスクリーンショット

Redditのメンテナンス ページではより多くの情報が使用されていますが、Redditors は Lisp の使用をやめないかもしれません...

メンテナンスページのスクリーンショット

YouTube は新しい組み合わせやレシピを考案するのに忙しいようです。 (ソース…

メンテナンスページのスクリーンショット

Mozilla : メンテナンス中… (ソース… )。

メンテナンスページのスクリーンショット

Revver (ソース… )。

メンテナンスページのスクリーンショット

Flickrのメンテナンスページはあまり情報量が多くないようですけど、興味深いです。 Flickr がマッサージを受けています。

メンテナンスページのスクリーンショット

FlashDen は10 秒間のダウンタイムを告知し、訪問者を笑顔にするためにメンテナンスを行う漫画のキャラクターを表示します。

メンテナンスページのスクリーンショット

Bloglines は、サイトがダウンしていたときに配管工の写真を使って説明しました。

メンテナンスページのスクリーンショット

Apartmentguide.com : メンテナンスページにメンテナンスワーカーの活用例が掲載されています。

メンテナンスページのスクリーンショット

4. メンテナンスページに同じ外観と雰囲気を与える

サイトの見た目が通常と大きく異なっていても、訪問者が正しい場所に来たことをすぐに認識できるようにする必要があります。メンテナンス ページが通常のサイトと似ていない場合、多くの訪問者は間違った URL にアクセスしたように感じ、ページの内容に注意を払わない可能性があります。

メンテナンス ページにロゴが含まれ、Web サイトと同じ色が使用されていることを確認してください。これら 2 つのことだけでも、訪問者が予期しないページに遭遇したときに安心感を与えることができます。

Grooveshark はヘッドと基本色をそのまま維持しました。

メンテナンスページのスクリーンショット

StumbleUpon はヘッダーとロゴもそのまま残し、イラストにも独自の色を使用しました。

メンテナンスページのスクリーンショット

Naturalinstinct は同じ配色を使用し、ユーザーに代替の連絡先オプションを提供します。

メンテナンスページのスクリーンショット

5. サイトがオンラインに戻る時期を訪問者に伝える

メンテナンス時間は大幅に異なる場合があります。ウェブサイトがダウンするのは数分間だけの場合もあれば、1、2 時間、あるいはそれ以上の期間にわたる場合もあります。サイトがいつ復旧して稼働するかをユーザーに知らせます。こうすることで、彼らはいつまた訪問できるかを知ることができます。公開メンテナンス ページにより、ユーザーは数時間後または数日後に再度確認して、サイトが復旧したかどうかを確認するよう促すことができます。 「5 分後に再開します」といった内容は、顧客がそうするように促します。

iStockPhotoのメンテナンス ページでは、サイトが復旧して稼働できるようになる予定時刻を訪問者に通知します。

メンテナンスページのスクリーンショット

Blogger では、サイトが復旧するまでの予想時間が記載されたシンプルなページが使用されます。

メンテナンスページのスクリーンショット

Linkedin は、どの Web サイトがオンラインで公開するのに適しているかをユーザーに知らせます (出典… )。

メンテナンスページのスクリーンショット

StudiVZ は、ユーザーにお茶を飲むようにアドバイスし (ちょっと待ってください)、その後、ウェブサイトが 8 時にオンラインになることを訪問者に通知します。 (ソース… )。

メンテナンスページのスクリーンショット

6. 推奨コンテンツを提供する

サイトがダウンしている間、サイトの記事の一部を静的ページとして保存しておくと、メンテナンス中にユーザーに読むものを提供することができます。他のウェブサイトの中には、他のウェブサイトのコンテンツを推奨するところもあります。これは通常、そのコンテンツが閲覧者の興味を引く可能性があると考えているためです。サイトの復旧を待つ間に訪問者に何か他のことを提供することは、訪問者を気遣い、不便を感じていることを分かっていることを示す素晴らしい方法です (上記の 2 番目)。

Librarything のダウンタイムのこの画像は、ダウンタイム中に何かを読むことを示唆しています (ソース… )。

メンテナンスページのスクリーンショット

Digg は、ユーザーがより興味を持つと思われる他の Web サイトのコンテンツのリストを提供します。

メンテナンスページのスクリーンショット

Github は、停止中に視聴できる楽しい YouTube ビデオをユーザーに提供しています。

メンテナンスページのスクリーンショット

Mixxはユーザーに最も人気のあるMixxストーリーのいくつかを提供しています

メンテナンスページのスクリーンショット

シアーズはウェブサイトを強化するためにブラックフライデーに閉店しなければならなかった。このメンテナンス ページでは、Lands' End、Parts Direct、Sears Credit (ソース… ) など、より多くのナビゲーション オプションがユーザーに提供されます。

メンテナンスページのスクリーンショット

7. サイトが復旧したら訪問者に再度訪問するよう促す

ユーザーは停止中にサービスにアクセスしたため、当然ながらサービスを利用することになります。そのため、サイトが復旧したらリマインドすることが効果的です。当然ですが、サイトが復旧したときにサービスのすべてのユーザーに通知したくない場合があります。そのため、ウェブサイトが復旧したら、必要なユーザーに通知することをお勧めします。通知は電子メール、テキスト メッセージ、または Twitter 経由で送信できます。

Soindustry では、サイトが復元されたときに通知を受け取るために、ユーザーが自分の電子メール アドレスを送信できます。

メンテナンスページのスクリーンショット

8. 訪問者にメンテナンスの状況を知らせる

もちろん、メンテナンス中には予期せぬ事態が数多く発生するため、ユーザーに進捗状況を知らせておくことをお勧めします。タイムリーなフィードバックは、すべてが順調であること、相手側の誰かが問題の解決に取り組んでいること、全員がもう少し辛抱強く待つ必要があることなどをユーザーに知らせるために重要です。

友人と会ったり、友達を作ったりできる仮想世界であるHabbo は、メンテナンスページにかわいいイラストを掲載し、現在のメンテナンスの進行状況をユーザーに知らせています。

メンテナンスページのスクリーンショット

37signalsでは、ユーザーがメンテナンスのステータスを追跡することもできます。 (ソース… )。

メンテナンスページのスクリーンショット

原作者について

キャメロン・チャップマンは、6 年間の経験を持つ Web およびグラフィック デザイナーです。また、自身のブログ「Cameron Chapman On Writing」など、ブログも執筆しています。

<<:  太字の <b> と <strong> の違いの分析

>>:  CSS3 における構造擬似クラスセレクターと擬似要素セレクターの使い方の詳細な説明

推薦する

MySQL の char、varchar、text フィールド タイプの違い

MySQL では、char、varchar、text の各タイプのフィールドはすべて文字タイプのデー...

Amap を使用した React 実装例 (react-amap)

React の PC 版は Amap を使用するようにリファクタリングされました。情報を検索したと...

js の toString メソッドの 3 つの機能

目次1. toStringメソッドの3つの機能2. オブジェクトを表す文字列を返す3. カスタム t...

CentOS 7.3 で Nginx 仮想ホストを設定する方法

実験環境最小限にインストールされた CentOS 7.3 仮想マシン基本環境を構成する1. ngin...

Zabbix設定 DingTalkアラーム機能実装コード

必要Zabbix で DingTalk アラームを設定する方法は、Prometheus で Ding...

mysql5.6.8 ソースコードのインストールプロセス

カーネル: [root@opop ~]# cat /etc/centos-release CentO...

同じドメイン名を持つ Nginx プロキシのフロントエンドとバックエンドの分離プロジェクトの完全な手順

フロントエンド プロジェクトとバックエンド プロジェクトは分離されており、フロントエンドとバックエン...

divの適応高さは残りの高さを自動的に埋めます

シナリオ 1: HTML: <div class="outer"> ...

Linux CentOS MySQL データベースのインストールと設定のチュートリアル

MySQLデータベースのインストールに関するメモ、みんなで共有a) MySQL ソースインストールパ...

クラウドサーバーを購入し、Alibaba Cloud に Pagoda Panel をインストールする手順

アリババクラウドがサーバーを購入クラウドサーバーを購入し、サーバーバージョンとしてcentos 7....

MySQL 8.0.14 のインストールと設定方法のグラフィックチュートリアル

この記事では、MySQL 8.0.14のインストールと設定のプロセスを記録しています。具体的な内容は...

SpringBoot と Docker の統合の詳細なプロセス

目次1. デモプロジェクト1.1 インターフェースの準備1.2 構成の準備2. Dockerがリモー...

CSS3セレクターの新機能の実装

目次基本的なセレクタ拡張属性セレクタ疑似クラスと疑似要素セレクター基本的なセレクタ拡張1. 子要素セ...

MySQLクエリ条件のnot inとinの違いと理由

まずSQLを書く SELECT DISTINCT from_id タラから cod.from_id ...

Docker で Nginx イメージ サーバーを構築する方法

序文一般的な開発では、画像をディレクトリにアップロードし、ディレクトリとファイル名を連結してデータベ...