新たなスマホ対応を行いました

2014年02月08日(土曜日)

アイキャッチ画像。
場面緘黙症Journal は本日、新たなスマートフォン対応を行いました。最近注目のレスポンシブ web デザイン によるものです。

↓ トップページに、スマホや一部のタブレット端末でアクセスすると、従来とは違うページが現れます。
http://smjournal.com/
新しいウィンドウで開く

これまでは、スマホ専用ページを用意していた


これまでは、PC 向けページとスマホ向けページを別々に用意し、ユーザーの閲覧環境によりご覧いただくページを変える方法をとっていました。

具体的に言うと、スマホ向けに特別に作ったトップページ http://smjournal.com/sp/ を用意していました。そして、スマホで PC 向けトップページ http://smjournal.com/ にアクセスされた方は、自動的に http://smjournal.com/sp/ に移動されるように設定していました。

PCもスマホも同じページ、デザインだけ閲覧環境により調整


今回のリニューアルでは、これを改め、PC 向けページとスマホ向けページを同じものにし、ページのデザインだけを閲覧環境(特に、ブラウザの横幅)により調整する方法をとりました。

具体的には、スマホのようなブラウザの横幅が狭い環境でご覧の方には、それに合わせてページのデザインが自動的に変わるようになっています。PC でご覧の方なら、http://smjournal.com/ にアクセスし、ブラウザの横幅を縮めてみると分かりやすいと思います。

これは、レスポンシブ webデザインという比較的新しい技術です。この技術は、首相官邸ホームページやトヨタ自動車株式会社公式企業サイトほか、多数のウェブサイトで採用されつつあります。

なお、このリニューアルにより、PC 向けページも若干デザインが変わっています。

対象外のページ


なお、以下のページは、今回のリニューアルの対象外です。

○ ブログ(レスポンシブ以外の方法で、既にスマホ対応が行われています)

○ 掲示板(スマホ未対応です)

○ 新型掲示板(レスポンシブ以外の方法で、既にスマホ対応が行われています)

○ 関連書籍コーナー(Amazon.co.jp アソシエイトリンクがレスポンシブに対応していない関係で、パソコン向けページとスマホ向けページに振り分ける方法をとっています。なお、アドレスを http://smjournal.com/books.html から http://smjournal.com/books/ に変えています。)

○ 従来型携帯用ページ(いわゆるガラケーはレスポンシブでは対応できないため、従来どおり、携帯向けページを用意しています。)

今回のリニューアルのメリット、デメリット


今回のリニューアルには、メリットとデメリットがあります。
* * * * * * * * * *

[メリット]

○ URL が統一された!

これまでは、スマホで検索エンジン経由により場面緘黙症Journal のトップ以外のページにアクセスしたら、PC 用ページにつながってしまうことがありました。また、SNS や Twitter で場面緘黙症Journal のトップ以外のページがシェアされたら、PC とスマホ両方の閲覧環境に同時に配慮できない場合がありました。

今回のリニューアルにより、PC 用とスマホ用の URL が統一され、こうしたことが起こりにくくなりました。

○ 更新漏れの心配がなくなった!

場面緘黙症Journal の管理人はナイスガイですが、いい加減なところがあり、スマホ向けページの更新をうっかり忘れることがよくありました。今回のリニューアルにより、PC もスマホも同じページになり、更新漏れの心配がなくなりました。

○ スマホで見られるページ数が増えた!

これまで用意していたスマホ向けページは、PC 向けページの簡略版のような位置づけで、ページ数は少なめでした。今回のリニューアルにより、スマホも PC と同じだけのページを見ることができるようになりました。

○ スマホで見てもパソコンで見ても、基本的なデザインが同じ!

これまで用意していたスマホ向けページは専用のツールを使って作ったもので、そのデザインは PC 向けページのものとかけ離れたものでした。今回のリニューアルにより、両者はそう変わらないデザインになり、分かりやすくなりました。

○ なんかカッコイイ!

レスポンシブ web デザインというと、なんだか進んでてカッコイイ印象を受けます。

[デメリット]

○ スマホで見ると、ページが重くなった!

これまで用意していたスマホ向けページは、3G 回線での閲覧環境を考慮し、画像を一切使わないなど軽めのものにしていました。今回のリニューアルにより、スマホユーザーの方もパソコンユーザーの方と同じページを読み込むことになったため、以前よりも重くなりました。

○ PC 向けページが見られなくなった!

これまでは、スマホでご覧の方は、ブラウザの設定によりPC 向けページもご覧になることができる場合がありました。今回のリニューアルにより、レスポンシブ化されたページではそれができなくなりました。

むすび


私のような素人が作ったページですので、これから色々と不具合や不便な点が出てくるかもしれません。なにしろ、私はスマホを持っておらず、エミュレーターでシミュレーションしながら作ったページです。問題には順次対応します。ただ、あまりに問題が多い場合、以前のやり方に戻すことも考えます。

今回のレスポンシブ web デザインとは別に、まだまだこのサイト、いじりたいところが色々とあります。昨年から少しずつ進む場面緘黙症Journal の改造作業はこれからも続け、より現代的でかつ使いやすいページに改めていく方針です。