レスポンシブデザインを採用しました

レスポンシブデザイン化の概要について

今回実施したレスポンシブデザイン化によって、スマートフォンなど横幅の狭いデバイスでご覧の場合、および（PCの場合）ブラウザの横幅を狭めた場合に、スマートフォン向けのレイアウトで当サイトが表示されるようになりました。

具体的には、サイト横幅の変更、メニュー表示方法の変更、テーブル（表）の横方向スクロール許可などを行っています。

これにより、文字の可読性が向上しましたが、代償として大小さまざまのレイアウト変更が生じています。

もし皆様方において、新レイアウトが使いづらいなどのご意見がありましたら、お気軽にメールフォームよりお寄せください。

また、設計の不備を発見されましたら、どんなに小さなものでも構いませんのでご報告くださいませ。

なお、ページ内容につきましては、PC表示とスマホ表示でほぼ差がない仕様となっております（基本的にはレイアウトを変えただけです）。PC表示でないと見られないコンテンツはありませんので、スマートフォンなどからも今まで同様の内容をご覧いただけます。

PC表示の場合のデザインにも変更があります

工事に伴って、というか工事のついでに、PCなど横幅の広いデバイス・ブラウザでご覧の場合のデザインも、一部変更することとなりました。

トップページのメニューは、以前は縦並べとなっていましたが、わかりやすさ重視で横並べに変更しました。常連の方はかえって戸惑うかと思いますが、ご理解のほど願います。

「乗り鉄な旅行記」のトップページからは、動画版旅行記へのリンクを張っていますが、PC表示・スマホ表示ともに、JavaScriptを活用して表示・非表示を切り替えられるよう変更しました。

メールフォームのページは、コーディングの都合で見た目が大きく変わります。できるだけ使い勝手を落とさないよう努力しましたが、現時点ではアレが限界です。ご容赦ください。

ほか、細かいところで小さな変更があります。

スクリプトを軽量化しました

合わせて、JavaScriptを使用したデザインについて、そのスクリプトを軽量化することで、サイト表示の高速化を図りました。

以前の記事でお話しした通り、当サイトはアクセス数アップも然ることながら、JQueryを無駄に読み込んでいたために、表示が低速化したうえ将来におけるサーバのデータ通信量逼迫の懸念が発生していました。

当該記事でお伝えした緊急の表示改善工事に続く形で、この度JQueryを一切使わない形でJavaScriptのコードを構成した新仕様に移行する工事を行いました。

これにより、サイズの大きいJQueryのファイルを読み込む必要がなくなり、読み込むデータの量を削減したほか、サーバ・クライアント間の通信の回数も減らしました。

「これからのJavaScriptはJQuery使用がデファクトスタンダードでしょ」という浅い考えで不必要の通信を発生させてしまい、皆様に大変ご迷惑をおかけいたしましたことをお詫び申し上げます。

なお、ページ内リンクをクリックした際にスムーズにページがスクロールするアニメーションのためのスクリプトは、インターネットからダウンロードした"smoothscroll.js"というファイルを利用しています。製作者様には厚く御礼申し上げます。

これに伴って、以下の変更が生じます。

• 今まではアニメーションが加減速移動でしたが、今後は等速移動となります。
• 今まではページ内リンクを踏んだ後でもブラウザバックすると遷移前のページに戻る仕様でしたが、今後は通常通りの設定となります。

改善のアドバイス募集中！

今回実施したレスポンシブデザイン化は、一応は「完成形」と銘打ちますが、おそらく細かいアラが大量に残っていることでしょう。

したがって、今後も表示改善などを目的に小規模なレイアウト変更を行うことが多々あるかと存じます。

その際は、使い勝手に大きな影響を与えない工事とするよう留意いたしますので、何卒ご理解のほどお願いします。

また繰り返しにはなりますが、問題点や改善点を発見された方は、是非メールフォームよりご意見などをお寄せいただきますようお願い申し上げます。

今後の工事について

今後については、遅れております姉妹サイト「ゲニウス（北）のA列車で行けばいいじゃないか3D」のレスポンシブデザイン化工事の検討を進め、1～3ヶ月後をめどに施工します。

計画が大幅に遅れ、特にニンテンドー3DSから姉妹サイトをご覧くださっている皆様に多大なご迷惑をおかけしておりますことを、重ねてお詫び申し上げます。

そのほか、サイト軽量化についても、画像の軽量化の作業が遅れており、昨年度末の完成予定を過ぎてしまい、ご迷惑をおかけしております。旅行記の執筆と並行しての作業となるためさらなる遅れが予想されますが、必ずやりとげますのでどうかお許しください。

なお、新着記事の画像は当初より軽量化されておりますので、ご安心ください。