今更だけど、あれこれ思う レスポンシブサイト 

グラフィックデザインを生業にしている私にとって、ウェブコンテンツの企画・制作は必須ではなかったが、一応職域内と自認し、取扱品目に入れ、比較的早い時期―’90年代終わり頃から制作に従事してきた。

私とWebコンテンツとの付き合いは、PC内のブラウザ上に表示される情報がTextメインの“Webページ”を見ることから始まっているから、Webコンテンツはパソコンで見るもの、と頑なな考えを捨てきれない。

そんな私にとって、取引先のひとつである某自治体の『ホームページガイドライン』に示された、基本的方針は「モバイル・ファースト」、制作にあたっては「レスポンシブウェブデザイン」で―というお知らせ、つまり通達は、こりゃぁ、ストレス溜まるな~と、嘆息が出たものです。それが、2017年のこと。

業界人でない限り「レスポンシブウェブデザイン」なんて聞かされても、なんのこっちゃ!またカタカナ言葉かい!と思われるでしょうね。こいつが少々厄介なヤツなんで、ちょっと喋ります。

ウェブコンテンツを表示できるのは、パソコン・タブレット・スマホ(※)の3つ。

ユーザーがいずれで観るかわかりませんから、発信側はアクセスしてきた機器にあわせて、
①サイトデータを3種類用意しておき、ふり分ける
②表示の切り替えが可能な1本のデータを作り、機器に合わせて表示を切り替える__の、いずれかを選ぶ必要があります。
①は、同内容のコンテンツを3つ作る、単純にいって制作費が3倍、URLも3つ必要、ゆえに不採用。②は、どうか。制作費そのままor若干の割り増し、URLも1つ、そんな便利なものあるんだったら是非に!当然こっちやろ!!―というわけで②が大勢を占めました。
それが「レスポンシブウェブデザイン」という次第。

「レスポンシブ」は「反応する」の意。よってPCでもスマホでも、ユーザーの使っているデバイス(使用機器)にあわせてコンテンツの表示を切り替えることができるファイル、いわば「表示切替指示書」を埋め込んだ『兼用データ』でサイトを作りあげる技法のことなんです。

で、デザイン作業の出発点にモバイル用表示を据えること、つまり、スマホで最適表示を考えてレイアウトや機能の実装を考え、パソコンとタブレットは、表示の互換性が保たれたら許容範囲という考え方にして制作法です。
ゆえに「モバイル・ファースト」(スマホ表示優先)ちゅうわけです。

PC・タブレット・スマホという、もともと縦横の比率の違う画面にあう3タイプの表示指示データを作るため、次のような“困ったこと”が起こります。

①表示を制御するCSS(表示のための指示を書いたコンピュータ向けの書類)が複雑になる
②デザイン・レイアウトに制約が出る。(ゆえに、大味なものになる)
③マウスを使ったギミックが使えなくなる(だって、スマホ、マウス使わないもん)
それらをかいくぐって制作するわけですが、これが結構窮屈でしんどくて、先に書いた①のコース、3種類のサイトデータを作った方が最適解を提出できるのにと思ったりすることも…作る側の我儘ですけど。(そして、それは許容されないのです。何故かって?検索界帝王・Googleのモバイルフレンドリー指標に反するからです)

そして、もう一つの問題。それは、広告の表示という大問題です。
上の図版を見てほしい。
ピンク色のスペースを広告枠と考えてみて。 
PCで見た場合3つの横並び広告が1段あってもユーザーの視覚はあまり圧迫されません。
しかしこれをスマホで見た場合、左右に一杯一杯の3つの縦並び広告が、画面の半分ぐらいを占領してしまい、ユーザーの視線は分断されてしまいます。
広告表示スペースの面積は同ピクセルですが、全体の印象、圧迫感は全然違います。
ほんとにこれでいいの?といつも思ってしまいます。

広告掲載をするために、コンテンツのスムースな閲覧を邪魔しユーザビリティー、大きくいってユーザーエキスペリエンスを低くしている。
風呂敷広げすぎかな?

「広告掲載収入で収益をあげ維持する仕組み」が、ネットビジネスといっても過言でない現状ゆえに、他に方法はないのかなと考える日々なのです。

この稿、もう一回続けます…

~NARIWAI・生業の現場から その4~ 了

※スマホ:スマートフォンという時は、「スマートフォン」と表記すのが一般的。ところが短縮時は、スマフォといったり表記せずに「スマホ」を使う。これ不思議だね。