ウェブデザインとデバイスの関係について考えてみた!

正月気分も抜けきらない1月半ば、いつものようにPCを立ち上げウェブブラウザを開いてTwitterを閲覧したところ、何やら少し様子が違います。それまでプロフィールやおすすめトレンド、タイムライン、おすすめユーザーなどが3カラムで表示されていたものが、余計な情報の少ないスッキリとした2カラム表示になっていたのです。

突然の表示変更に少々驚いたものの、これまでにもTwitterでは予告なく表示方法や使い方が変更されることがしばしばあったことや、新しい表示方式はWindowsアプリ版のTwitterとほぼ同じであったことから、あまり迷うことなく移行できました(ちなみに設定から旧来の表示方式へ戻すことも可能)。

Twitterに限らず、何かのきっかけでウェブサイトデザインが大きく変更されるケースをここ数年よく見かけます。そしてそこには必ず意味があります。感性の原点からテクノロジーの特異点を俯瞰する「Arcaic Singularity」。今回はそんなウェブデザインの変化と閲覧デバイスの関係について考えます。

as-061-008
2月1日現在、Twitterの公式ウェブサイトのデザイン変更はユーザーごとに随時行われている段階だ


■時代とともにウェブサイトは変わってきた
ウェブサイトデザイン(ウェブデザイン)の歴史は、常にインターネットとそれを使う人々の歴史でもあります。最初期のテキストサイトは省略しますが、日本で最初にインターネットブームが起きた1996~1997年あたりからは、HTMLを用いた個人のウェブサイト、いわゆる「ホームページ」が大流行しました(本来の意味でのホームページではない)。

もはや完全に黒歴史ですが、かく言う筆者も恥ずかしながら家電量販店でホームページビルダーを購入し、趣味のゲームに関連したウェブサイトを開設していました。稚拙なHTML構文を並べながら、サイトデザインをああでもないこうでもないといじることそのものが楽しかった時代です。

as-061-001
自分で見返しても恥ずかしい、若気の至りの大暴走


当時ウェブサイトを製作していて、まず悩んだのが「サイトの横幅をどの程度にするか」であったことをよく覚えています。当時のPCの画面解像度はXGA(1024×768ドット)が主流であり、ノートPCに至ってはSVGA(800×600ドット)も多くありました(※本来の規格名としてのXGAやSVGAの用法ではないが、当時画面解像度を指す言葉として一般化していた)。

そのためウェブサイトの横幅は600px(≒600ドット)に抑えて作ることとなったのですが、PCモニターの高解像度化の流れは速く、SXGA(1280×1024ドット)やHD(1280×720ドット)が主流になり、さらにFHD(1920×1080ドット)モニターが流行りだすと、世界中のウェブサイトもまた高解像度を活用しようと横幅を800px、1000px、1200pxと次々に拡張していったのです。

ところが、ある時期を境に世界中のウェブサイトはその横幅を縮め始めます。

1600px/3カラムにも達していた某大手ポータルサイトは横幅1000px/2カラムへと小さくシンプル化し、表示する文字も大きくなっていました。また別のウェブサイトでは表示するブラウザやデバイスに応じてウェブサイトの横幅や表示項目が自動的に調整されるレスポンシブウェブデザインが採用されました。

as-061-002
Facebookなどはレスポンシブウェブデザインの好例だろう


■スマホに最適化されるウェブデザイン
このようなウェブサイトの小型化・シンプル化やレスポンシブウェブデザインの登場は、閲覧デバイスの変化による必然であったと言えます。それはスマートフォン(スマホ)やタブレットの登場です。

それまでインターネット上の情報を閲覧するにはPCが必須であり、PCで動作するウェブブラウザが唯一に近いウェブサイトの閲覧方法であったため、PCモニターの解像度がそのままウェブサイトのサイズや情報量に反映されてきましたが、人々がスマホやタブレットを利用するようになると、その閲覧デバイスのウェイトは一気にモバイル端末へと傾いたのです(それ以前も携帯電話のフルブラウザ機能などがあったが利用は限定的であった)。

as-061-004
人々はスマホによっていつでもどこでもインターネットへアクセスするようになった


当然ながらスマホの画面は物理的に小さく、解像度が十分に高いとは言え、PCと同じだけの情報量をそこに表示してしまうと、文字が細かくなりすぎて視認性が悪くなります。

また指でスワイプ操作することを前提としたスマホでは、サイドバー(サイドカラム)上の小さなボタンアイコンによる画面遷移は不便極まりなく、スマホに最適化させたUIや表示に作り直す必要が出てきました。

as-061-005
iPhone XSのSafariでS-MAXをデスクトップ表示したところ。スマホでは文字が細かすぎて読めたものではない


それでもしばらくは「PC向け(デスクトップ向け)」「スマホ向け」という区分によってウェブサイト表示を分けることで棲み分けしていましたが、最近ではPCでもスマホ向けのウェブサイトをそのまま表示するウェブサイトが増えてきました。

統計データを見ても、平成30年5月に総務省が公開した「平成29年通信利用動向調査」(※PDFファイルにつき表示注意)によれば、個人によるインターネット機器の利用状況はスマホがPCを上回る結果となっており、スマホに最適化されたウェブサイト製作こそが現在の主流であることが伺えます。

as-061-003
PCからのインターネット利用が多い世代は、もはや60代以上だけだ(上記リンク先より引用)


スマホの小さな画面でも使いやすい大きなボタンアイコンや、閲覧性に優れた縦長のウェブサイトデザインはこうして生まれましたが、スマホが変えてしまったウェブサイト文化は表示幅や文字の大きさばかりではありません。広告表示も大きく変えました。

それまでサイドカラムに窓のように貼られていただけのウェブ広告はスマホの画面上に常に表示し続けられるフローティング広告へと変化し、さらにはフローティング広告からポップアップして強制的に動画CMを視聴させるようなものまで登場しました。

ウェブサイトがPC向けに特化していた時代にも、リンク先へジャンプすると画面全体を覆う動画広告が出てきてウンザリすることがありましたが、スマホでも表示方式こそ進化したものの、同じようなウンザリ感はやはり続くのでした。

as-061-006
ウェブサイトを開いたら広告だらけで記事が読めない、なんてことは日常茶飯事


as-061-007
インターネットのビジネスモデルを全否定するような広告ブロックアプリが流行るのも無理はない


■ウェブデザインはこれからも進化し続ける
TwitterのPC向け公式ウェブサイトのデザインとUIはスマホアプリ版に寄せる形で改良され、ツイートボタンも画面下部へと移動しました。PCで利用していると「そのツイートボタンの位置は使いづらくないの?」と考えがちですが、タブレットPCなどが多く利用されるようになってきた今、スマホアプリ版と同じUI配置にすることのほうがメリットが大きいと判断した結果でしょう。

同じように、現在さまざまなウェブサイトやウェブアプリのモバイル対応が急速に進んでいます。文字は大きく表示はシンプルに、アイコンデザインも分かりやすいワンポイントタイプへ。かつての「PC向けとスマホ向け」という棲み分けから、同じUIと同じ使い勝手で「迷わないウェブサイト」製作へと進化しているのです。

10代の若者たちから「パソコンでインターネットを見てるのなんておっさんだけだ」などと言われてしまう時代になって久しい今日この頃、ウェブサイトの変遷や総務省の統計データを見ていると、その言葉はあながち間違っていないように思われます。

若者たちの言葉に抗するつもりはサラサラありませんが、筆者のようなオジサンたちも別にPCでばかりインターネットを見ているわけではありませんよ?適材適所で使い分けているだけ……ということにしておいて下さい。

as-061-010
どんな端末でも閲覧しやすいウェブサイトづくりを目指して


記事執筆:秋吉 健


■関連リンク
エスマックス(S-MAX)
エスマックス(S-MAX) smaxjp on Twitter
S-MAX - Facebookページ
連載「秋吉 健のArcaic Singularity」記事一覧 - S-MAX