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

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

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

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

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

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

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

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

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

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

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

そして、もう一つの問題。それは、〝広告の表示〟という大問題です。
上の図版を見てほしい。
レスポンシブデザインで作られたWebページの概略図で、左にPC、右にスマホでの表示を示しています。
それぞれにピンク色のスペースが3つづつあります。
PCで見ている限り、3つのピンクが横一列で表示されていても、ユーザーの視覚があまり圧迫される感じはしないと思います。
では右側スマホ表示の例、ピンクが縦3段に変わったら、どうでしょう。

サンプル図が企業サイトのトップページと仮定して眺めると、ピンクブロックはPC表示スマホ表示に関わらず、①企業ポリシー ②製品情報 ③会社情報の紹介写真とコピー導入部とか推測でき、よくある構成だなぁ〜と安定感を感じるかもしれません。
じゃ、ピンクブロックをWebマガジンやポータルサイト上でたくさん出てくる広告枠と考えた時、どのように映るでしょうか?
スマホ表示だとWide方向100%の3つのピンクBoxが縦並びで画面全体を占領してしまい、ユーザーの視線は分断され、本文の続きはスクロールしないと出てこない!と強いストレスを感じるのではないでしょうか。

広告表示スペースの面積は同ピクセル(同サイズ)ですが、全体の印象、圧迫感は全然違います。
ほんとにこれでいいの?といつも思ってしまいます。
広告を掲載をするために、コンテンツのスムースな閲覧を邪魔しユーザビリティー、大きくいってユーザーエキスペリエンスを低くしている、のではないか……風呂敷広げすぎかな?

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

同時に並べて見る人はおれへんねんから、別にええんちゃう、という声もあるだろうけど、この稿、もう一回続けます…

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

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