レスポンシブは面倒だが役に立つ

OBATA

7年前

インターネットが普及し始めた90年代後半は、インターネットに対応した端末がまだパソコンのみの時代でした。そのため、ホームページもパソコンで閲覧する一択しかなく、ホームページもパソコン用に作るものでした。

ただ、ネットは時代が進むにつて、閲覧媒体も多種多様に変化し私どもホームページ屋も様々な表示形式に合わせることが増えてきました。

特に2010年頃からは、スマートホンがパソコンの需要を下げるほどの勢いで普及しそれとともに小さい画面で、パソコン用ホームページ閲覧をするととても見にくいという問題が出始めました。
要するに文字が小さくて読めない、写真が小さくて見づらいといった現象です。

これに対応する技術がレスポンシブと呼ばれるHTML構築手法です。
本日は、レスポンシブについて解説いたします。

スマホ対応表示方法は大きく2通りあります。

以前、ガラケーでのｉモードなどが普及していた時代に、ガラケー用のホームページがありました。仕組みとしては、サーバー側でアクセスしている端末を判断し、パソコンならばパソコン用のホームページを表示し、携帯ならば携帯用ホームページを表示する「スイッチ式」の切り替えを行っていました。

スマホ用のホームページも同様に、当初はこの方法を用いていました。
しかし、それだけでは対応できない端末が出てきました。

大画面タブレットです。
サーバー側からは、モバイル端末として認識しますが、画面の大きいタブレットならばＰＣ版のホームページを表示したほうが良いケースです。

モバイルだけれども、ＰＣ並みの画面サイズを持つ端末。
これに対応する方法として生まれたのがレスポンシブです。

レスポンシブの特徴は、画面のサイズに合わせて最適な表示を行う仕組みです。
スイッチ式は、端末を判断する仕掛けがサーバー側に必要でしたが、レスポンシブではその必要がないため、どのような端末でも動作し、汎用性が非常に高い点があります。

また、ワンソースといって、一つのＨＴＭＬファイルを、見せ方だけでＰＣ用、スマートホン用に切り替えるため、記事の位相合わせの必要がなく、記述漏れが極端に減るメリットもあります。

ただ、欠点はその難易度です。

ＰＣ用であれば、横幅を適度なサイズで固定していますが、スマホ用のホームページの画面サイズは、端末ごとにばらばらであり、統一サイズがありません。そのため尺度を「割合」で考えて設計します。

すべての内容を、ＰＣ用の「指定サイズ」からスマホ用の「割合尺度」に変換するのですから、膨大な量を定義しなくてはいけません。
また、コーディングする際には、スマホに変換することを想定しながらの組み込みを行う必要があり、レイアウトの矛盾点をいかに吸収できるかも、難易度を高くしています。

ただ、如何に容量を少なく、ソースも少なくするかが腕の見せ所であり、やりがいのあるのもレスポンスのだいご味です。

これほど難易度の高い手法が多用されるのは、スマホでのネット使用率がものすごく高いからほかなりません。総務省の統計では、ＰＣとスマホの利用普及率はほぼ同等であり、中にはパソコンを持っていないという方も数多くおられます。

ＰＣでしか閲覧できない、またはスマホだと極端に見づらいホームページは「敬遠」されます。
集客するためには、ホームページの中身が大事ですが、あまりにも「めんどくさいホームページ」は集客を逃してしまうのです。

ホームページを制作される際には、閲覧ターゲットを想定し、それらの方がどの「端末」を用いてホームページを閲覧されるかを考え、適切な表示方法を導入しなければならないのです。

続きはまた次回