J. of Taroten

レスポンシブWebデザインについて

PC用にデザインされたウェブページをスマートフォンが表示しにくい

 PC用のウェブページを320 px程度の幅しかないスマートフォンで見ようとすると,PC用の横広画面を端末の画面に無理やり押し込んで表示するため,記事が見にくくなり,記事を拡大すると,携帯端末が嫌う横スクロールが生じる問題がありました。3割以上の方がウェブサイトを携帯端末で閲覧している時代を無視できず,このホームページも,スマートフォン対応をはじめることにしました。ただ,PC用と携帯端末用に2ファイル用意するのでは,管理の問題や検索サイトへの対応が悪化します。そこで,レスポンシブデザインという手法で対応することにしました。

端末のウインドウサイズにレスポンシブにウェブデザインを変える

 具体的には,これまでの固定されたTable組みによって,左にメニュー,右に本文と拘束された画面になっていたhtmlファイルを改め,携帯端末が表示しやすい縦に長い画面構成に書き換える一方,PCなど幅広画面をもった端末でアクセスしてきた人に対しては,htmlファイルとは別にブラウザに渡される書式設定のcssファイルがdiv領域ごとに位置をフロートさせ,画面ブロックを左右に振り分け表示します。様々な機種のパソコン,ブラウザ,スマートフォンでの見栄えを確認しながら,おおむねすべてのページのレスポンシブ化を概成しました。

横ウインドウ幅を320 px程度に狭くすると・・

 このページをPCで見ている人への見え方は以前と変わっていないと感じるでしょうが,横ウインドウ幅をスマートフォンのように320 px程度に狭くしたり,パソコンフル画面表示のように1024 px程度まで拡大したりしていただけると,途中で画面レイアウトが変わることに気付いていただけるかと思います。ただし,一部のIEの設定やバージョンで画面が正しく表示されない現象があることがわかりました。このうち,互換性表示に関わる問題は解決しました。スマートフォンでの見栄えについても確認した範囲では良好なようです。

企業サイト等で用いられている以下の過剰対応はしていません

 Retinaディスプレイといって,通常よりも高解像度の画質に対応した携帯端末やPCがあります。これらの機種でアクセスしてきた場合に細かい画像を渡すことも,レスポンシブWebデザインの要素技術ですが,高解像度画像を用意することは通信速度の低下以外に,人物が映っていた場合にプライバシー問題を生じるため,本ウェブサイトの画像のほとんどは横幅300 pxの画素で公開しています。また,reset.cssなどの過剰な設定をしていないため,見た目が端末によって多少変わるのを許容する代わりに,非常に簡明なファイル構造となっており,混雑しているインターネット環境でも軽快な表示を可能としています。

スマートフォンも車もない人生もなかなか快適です

 ということで,たろてん自体はスマートフォンを持っていないです。研究室には,「事故の際にはここへ電話」と090-ではじまる携帯電話らしい電話番号が掲出してあるが,ここへ本当にかけてしまうと,やがては問題が解決することにはなるだろうが,かけた側もかけられた側も一瞬の当惑が生じてしまうことになります。ただ,世の中の動きと無縁でもいけないかなとは常々感じています。さらに,たろてんは,車も持たない快適人生だが,車については,無人運転が現実味を帯びてくれば,対応予定です。