レスポンシブデザインを採用しました - ゲニウス(北)の北海鉄旅いいじゃないか
「ゲニウス(北)の北海鉄旅いいじゃないか」

……ゲニウス(北)がお送りする、北海道を中心とした旅行・鉄道情報サイトです。

  1. トップページ >
  2. 独り言 >
  3. 平成29年6月3日

レスポンシブデザインを採用しました(平成29年6月3日)

以前よりサイト再編工事の一部として取り組んでいたレスポンシブデザイン化工事が本日をもって完了いたしましたので、ご報告いたします。

これをもちまして、昨年度から継続して行ってきたサイト再編工事は、当サイトに関する部分については完了となります(WordPress導入は見送ります。詳細は過去記事にて)。お力添えいただいた皆様に感謝申し上げるとともに、計画より約半年遅れての実施となり、皆様にご迷惑をおかけいたしましたことを深くお詫び申し上げます。

以下、今回の改良についての詳細などを申し上げます。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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


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

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

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

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

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

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

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

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

今後の工事について

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

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

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

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

実は今回の工事、6月1日に行う予定でした。しかしcssやJavaScriptまわりで予想外に苦戦しまして、本日にずれ込みました。

これに伴って恒例(?)の月初の大更新もずれ込みました。ホントは1日に揃えたかったのですが……。

まあいいや。以上の件、よろしくお願いします。

※追記(平成29.6.4)……

案の定、レイアウトにアラがありましたので、気付いた限りの点については本日修正しました。修正箇所は以下の通りです。

  • スマホなどでご覧の場合に、ページの横幅が画面サイズピッタリなのに、横方向にスワイプ可能となっておりコンテンツが横方向に揺れてしまう現象を修正しました。
  • スマホ表示の場合で、セル内で画像を使用しているテーブル(表)の表示がおかしくなる現象を修正しました。
  • テーブル(表)が画面に収まりきらない場合(スマホ表示のみ)には横方向のスクロールが可能ですが、一部スマホではそれを示すスクロールバーが表示されない現象を修正しました。
  • スマホ表示で、サイトURLが画面外に飛び出す現象を修正しました。
  • その他、微妙にデザインを手直ししました。

※追記(平成29.6.18)……

上記の修正後、いろいろいじっていたら横揺れ現象が再発してしまいました。本日、その修正を行いました。

ほか、ニンテンドー3DSのブラウザでも表示を確認し、「とりあえず」ご利用に大きな支障がない状態であることを確認しました。

これをもって、レスポンシブデザインの修正は一段落となります。ただ、今後も問題点があれば、都度修正いたします。

「独り言」のトップに戻る

当サイトトップページに戻る