サイト引越して404エラーページ制作

矢嶋ストーリー公式サイトを
ご来訪のみなさん、こんにちは  
矢嶋ストーリーの矢嶋です。

実は…

2019年11月17日に、矢嶋ストーリーは
大幅なサイト改編をおこないました。

作品ごとに独立させていた
サブドメインを廃止。

作品ページは
公式サイト内に引越しました。

URLも新しくなり、旧URLは使用不能に。
でもご安心を。自動転送されます。
(301リダイレクト設定済みです)

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

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

その詳細を、以下の目次に沿って
ご報告いたします。

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

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

詳細をご確認ください。

サイト引越の詳細

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

独自ドメインを持っていた作品サイトを
   例  https://banana.yajima-story.tokyo/
    (『マーケティングは正直バナナ』の旧ページです。
      現在は存在しません)

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

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

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

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

なったのです。



なぜ、こうしたのか。
その理由を説明します。

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

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


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

目立たせるためです。

しかし、マルチドメインだと、
作品ごとにURLが異なります。

https://xxxxx.yajima-story.tokyo/ 
https://yyyyy.yajima-story.tokyo/ 
になってしまいます。


ですので、

https://yajima-story.tokyo/xxxxx.html
https://yajima-story.tokyo/yyyyy.html

のように 

https://yajima-story.tokyo/ の中を検索!
というページの探し方が
できないのです。

これ、すごく不便です。
作品数が増えると、
ますます不便になっていきます。


そこで思い切って、今のうちに
作品ページの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、タブレット、スマートフォン)の画面に
以下のようなカタチで表示されます。

この画像はマイクロソフトmicrosoft 社のブラウザ Internet Explorer に標準的に用意されている404エラーページ 404 error page です。薄い群青色の背景に白い文字でエラーメッセージが書かれています。大きな字で「404 File Not Found アクセスしようとしたページは見つかりませんでした」と書かれています。最もポピュラーな404エラーページの例として、スクショした画像を載せました。
この画像はグーグル Google 社のブラウザ Google Chromer に標準的に用意されている404エラーページ 404 error page です。白い背景に黒い文字でエラーメッセージが書かれています。大きな字で「404。エラーが発生しました。リクエストされたURはこのサーバーで見つかりませんでした。」と書かれています。最もポピュラーな404エラーページの例として、スクショした画像を載せました。

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

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

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

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



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

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

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

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

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



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

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

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

旧ページと新ページに変更があっても
そのことを説明してくれないのです。

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



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

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

この引越しを機に
削除しただけの廃止ページがあるのです。
これらのページには新URLがありません。

ですから、
その廃止ページにアクセスしようとすると

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

な結末になります。

つまり、先ほどの説明した
404エラー(ページが見つからない)が
発せられてしまうのです。

これは避けようがありません。

今まで、廃止ページに
アクセスしていただいた方に
ご迷惑をおかけしてしまうのです。



ごめんなさい。
すみません。
申し訳ありません。

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

オリジナルだと、
矢嶋ストーリーとして
「ごめんなさい」の
メッセージを書けます。

そのページにリンクを貼れば、
公式サイトのトップページへ
移動しやすくなります。

404エラーページ、作りました。

その404エラーページですが、
調べてみると、作り方は割と簡単。


ウェブサイトのページ作成の要領で
404エラーページを作り、
404.html みたいな名前を付けて、
それをウェブサイトのルートディレクトリ
(=トップページが置いてあるフォルダ)に置く。

そして、.htaccess というファイルに
「404のときは、このエラーページを表示してね」
な設定をすれば出来るそうです。

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

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



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

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



ということで探すと、
「あらま!」(感嘆の声)
カッコいいページ、たくさん。

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



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

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

たくさんの段ボールを指タッチ
もしくはマウス・クリックで
開けていくと……

な、ゲーム仕様になっています。
こちらから!🔗 遊んでみて!🐈‍⬛



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

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

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

たい焼きが、お詫びします

そして出来ました。

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

実物は、お見せすべきじゃないので、
その特長だけを挙げますと、

①たい焼きがお詫びをします。

 このブログでもお馴染み。
 元々はカルタの表紙に登場した、
 文庫版のシンボルロゴに就任予定の、
 この公式ブログにも登場する、

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

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


ただそれだけ、なんですが、
😅😅😅
ほんとにシンプルで、恐縮ですが、
そんなオリジナルの
404エラーページを
用意させていただきました。


存在しないURLにアクセスすると
たい焼き、現れます。

この画像は矢嶋ストーリーのオリジナル404エラーページ 404 error page の原画です。ページの背景は白。その中央にたい焼きの小さなイラストがポツンと置かれています。その下には柔らかなフォントで「申し訳ございません」と書かかれた淡い青色の文字が並んでいます。矢嶋ストーリーの本の著者である矢嶋剛が描いたイラストです。ちょっとかわいい404エラーページになりました。

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

        矢嶋ストーリー
           矢嶋剛