サイト引越しで、鯛焼きのオリジナル404エラーページ、完成のご報告

みなさん、こんにちは
 
矢嶋ストーリーはこの度、
大幅なサイト改編をおこないました。

作品ごとに作っていた
サブドメイン方式を廃止。

すべてのページが
公式サイトの下に引越しました。

URLも新しくなり、旧URLは使用不能に。
でもご安心を。自動転送されます。

ただ、何らかの理由で、
「お探しのURL(ページや画像)が
 見つからない」事態は起こり得ます。

そこで、せめてものお詫びに
オリジナルの404エラーページを
作りました。

その報告を、以下のコンテンツに沿って
させていただきます。

まず最初に、
サイト改編に伴う引越しについて
ご案内させていただきます。

移転したページ、廃止されたページが
あります。

引っ越した理由と合わせて
ご確認ください。

2019年11月17日に引越しました

サイトを引っ越しました。
2019年11月17日のことです。

独自ドメインを持っていた作品サイトを
 例  https://banana.yajima-story.tkoyo/

矢嶋ストーリーのサイトに編入しました。
 例  https://yajima-story.tokyo/ebooks/01banana.html

よくわかりませんでしたか?
ではもう一度。

 例  https://banana.yajima-story.tkoyo/ が

 例 https://yajima-story.tokyo/ebooks/01banana.html に

なったのです。

次になぜ、こうしたのかを
ご説明します。

矢嶋ストーリーのサイトは本来、
https://yajima-story.tokyo/xxxxx.html な
構造になっていて

https://yajima-story.tokyo/ の下に、
いろんなページ(例 xxxxx.html)が
置かれています。

しかし作品ページだけは、
サブドメインと呼ばれる
https://xxxxx.yajima-story.tkoyo/ 式の
独自URLを付けていました。

目立たせるためです。

しかし、この付け方は、
作品数が増えていくと
検索しにくくなります。

本来の
https://yajima-story.tokyo/ だけなら、
https://yajima-story.tokyo/ にアクセスし、
その下の
xxxxx.htmlyyyyy.html を探せばいいのですが、

https://xxxxx.yajima-story.tkoyo/ だと、
それができないのです。

作品ごとに、
xxxxx.yajima-story.tkoyo/ と
yyyyy.yajima-story.tkoyo/ を
別々に探す必要があります。

すごく不便。現実的ではありません。



そこで、この際、作品ページのURLを
https://yajima-story.tokyo/xxxxx.html 式に
変更・統一することにしました。

将来の作品数、増加を見込んでの措置です。

あわせて、作品構想の予告ページ、

「物語 固有の構造」 structural.html
「経営への影響」 effective.html
「みんなでマーケティング」 everyone.html
「自由になろう」 befree.html

にも https://yajima-story.tokyo/xxxxx.html 式の
新しいURL(作品番号に相応)を付けました。


さて、新しいURLを持つページができると、
混乱を避けるために、旧URLを削除します。
(これが、引越し)

そんな削除済のURLに誰かが
アクセスしようとすると、

「お探しのページは見つかりません」な
メッセージが、アクセスしたデバイス
(PC、タブレット、スマートフォン)の画面に
以下のようなカタチで表示されます。

どちらにも、404と書かれています。

これらのページは、404エラーページ
呼ばれています。404は、探しているURLが
見つからないときに表示されるエラーコードです。

404エラーページのデザインは色々ですが、
その全てに404エラー( 404 error )の
文字が書かれています。

今回のサイト引越しでも
404エラー、発生しそうです。

ということで、矢嶋ストーリーも
対策を講じました。

お探しのURLが見つからないとき

まず、アドレスを変更したページは、

旧URLにアクセス → 新URLが表示

になるよう自動転送設定をしました。
(この設定を、301リダイレクト
 言います)


なんと便利な、301リダイレクト。

しかし、これだけでは十分では
ありません。

301リダイレクトはアクセス先を
自動転送してくれますが、

サイトが引っ越したことまでは
知らせてくれません。

旧ページと新ページに変更があっても
その箇所を説明してくれません。

そこで新ページに、しばらくの間、
引越しメッセージを載せました。
(注:現在は削除してあります)

これで、
旧URLにアクセス → 新URLが表示
対応は、なんとか終了。

ところが、まだ問題があります。


この引越しを機に
削除だけをした廃止ページがあるのです。

ですから、

旧URLにアクセス → URLが存在しない 

つまり、先ほどの404エラーになる
可能性が残されています。


すると、さっきのアレが出てしまうんですね。

突然の、無愛想な、通告。

「無いってこと、伝えたからね。
 それじゃ業務終了ってことで。疲れた〜」

みたいな、いかにも処理、というアレ
表示されてしまうわけです。

アクセスしてくれた方が原因じゃないのに。
勝手に引っ越したコチラが悪いのに。

そのときのみなさんの表情、
想像しただけで、申し訳なくて。

そこで、オリジナルの404エラーページを
作ることにしました。

オリジナルだと、自分で
「ごめんなさい」メッセージを書けます。

ページ内にリンクを貼れば、
サイトのトップページに快適に
移動していただくこともできます。

なので作りたい。
そう思ったのです。

オリジナルの404エラーページ

調べてみると、作り方は割と簡単。

ウェブサイトのふつうのページの要領で
404エラーページを作り、
404.html みたいな名前を付けて、
それをウェブサイトのルートディレクトリ
(=トップページが置いてあるフォルダ)に置く。
そして、.htaccess というファイルに
「404のときは、このエラーページを表示してね」
な設定をすれば出来るそうです。

.htaccess の設定は、自動転送させる
301リダイレクトで経験済み。

関連情報はネットにたくさんあるし、
何とかなりそうなので
制作に取り掛かることにしました。

まずやったのが、
「この世の中には、どんな
 オリジナル404エラーページがあるの?」
の確認です。

素晴らしい!から、刺激を受ける。
これ、制作の基本ですし。

ということで探すと、
あらま、カッコいいページ、たくさん。

今まで意識してこなかったけど
404エラーページ界って、なかなかです。
( custom 404 error page で検索してください)

中でも😍😍😍だったのが、
ヤマト運輸さんのエラーページです。

このページ、なんと、ゲーム付き。

たくさんの段ボールを指タッチ、もしくは
マウス・クリックで開けていくと
あのクロネコさんが……な、アトラクション仕様に
なっています。 こちらから! 遊んでみて!🐈‍⬛


これなら、URLが無くても、楽しいかも。

羨ましいですが、
こちらはローテク row tech 。能力不足。

スパッとあきらめ、
わたしのゴメナサイの気持ちが伝わる
シンプルなページを作ることに決めました。

鯛焼きが、お詫びします

そして出来ました。

矢嶋ストーリー、オリジナル、
404エラーページ。🥳🎉🎊

実物は、後ほどお見せするとして、
その特長を挙げますと、

・鯛焼きがお詫びをします。

 このブログでもお馴染み。
 元々はカルタの表紙
 文庫版のシンボルに就任予定の、

あの鯛焼きがゴメンナサイをします。
そして、

・その鯛焼きをクリックすると、
 サイトのトップページに移動できます。

😅😅😅😅😅😅

😅😅😅

😅

ただそれだけ、なんですが、

ほんとにシンプルで、恐縮ですが、

せめてものお詫び、ということで
よろしくお願いします。


それでは、ご覧いただきましょう。

下のURL(存在しない)クリックで
鯛焼き、現れます。

https://yajima-story.tokyo/ariehen.html

出てしまったら、ごめんなさい。

         矢嶋 剛