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

ウェブサイトメンテナンスページのリスト構築のヒント
また、多くの場合、メンテナンスのために 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 実験: explain を使用してインデックスの傾向を分析する

概要インデックス作成は、MySQL で習得しなければならないスキルであり、MySQL クエリの効率を...

Linux /etc/network/interfaces 設定インターフェース方法

Linux の /etc/network/interfaces ファイルは、ネットワーク インターフ...

Vueの自己ネストツリーコンポーネントの使い方の詳細な説明

この記事では、Vueの自己ネストツリーコンポーネントの使い方を参考までに紹介します。具体的な内容は次...

MySQL の結合クエリとサブクエリの問題

目次複数テーブル結合の基本構文クロス結合と直積現象クロスコネクトデカルト積現象内部結合外部結合左外部...

MySQL データベースに基づくデータ制約の例と 5 つの整合性制約の紹介

非準拠データがデータベースに入るのを防ぐために、ユーザーがデータを挿入、変更、削除、その他の操作を行...

Linuxシステムはポート3306、8080などを外部に開放します。ファイアウォール設定の詳しい説明

多くの場合、Linux システムに Web サービス アプリケーション (Tomcat、Apache...

MySQL トリガー構文とアプリケーション例

この記事では、例を使用して MySQL トリガーの構文とアプリケーションを説明します。ご参考までに、...

MySQLのlike演算子の詳細

1. はじめに不明な値または部分的に既知の値をフィルタリングする場合は、like 演算子を使用でき...

ビジュアルデザイナーの成長の3つの段階のまとめ

この本「グラフィックデザイナーとして成長する」は多くの人が読んでおり、私もオリジナルの PDF 版を...

自己終了XHTMLタグを書くときに注意すべきこと

XHTMLの img タグは、次のように記述する必要があります: <img alt="...

Linux lsof コマンドの使用方法の詳細な説明

lsof (開いているファイルのリスト) は、プロセスによって開かれたファイルを表示するツールです。...

Web 開発 js 文字列連結プレースホルダーと conlose オブジェクト API の詳細な説明

目次プレースホルダーの置き換えコンソール印刷テーブル()ログ、情報、警告、エラーグループ()、グルー...

2012年のベストWebデザイン作品レビュー[パート1]

新年の初めに、友人の健康と2013年が素晴らしい年となることを心からお祈りいたします。この記事では、...

IE7 互換モードで IE8 を有効にするコード

最も人気のあるタグはIE8ですブラウザベンダーはバージョンアップデートのリリースに躍起になっている一...

ウェブデザインと制作に関する科学的原則と提案の要約

<br />ネットワーク設計の分野では、アイトラッキングに関する研究が非常に盛んに行われ...