Webサイトの歴史②——レスポンシブとスマホ最適化（2010年代）

2010年代のWebサイトの歴史は、どの画面を基準に作るのかが入れ替わった10年だったと私は捉えています。前回の歴史①では「誰が更新するのか」が軸でしたが、2010年代の軸は「どの画面で見られるのか」です。PCの画面を前提に作り、スマホは後から対応する。その順番が、10年かけて逆になりました。この流れを知っておくと、デザインカンプをどの幅から作るか、確認をどの端末から始めるかを決める理由が説明しやすくなります。

スマホの登場で「PC用とスマホ用」の2つを作っていた

きっかけはスマートフォンです。Appleは2007年1月9日にiPhoneを発表しており、プレスリリースではWebブラウジングができる「インターネット通信機器」としても紹介されています。PC向けのページをそのまま手のひらで見られるようになった一方で、文字は小さく、リンクは指で押しにくいものでした。

そこで当初よく取られたのが、スマホ専用のページを別に用意する方法です。PC用とは別のURL（sp. や m. で始まるサブドメインなど）にスマホ用のHTMLを置き、端末を判定して振り分けます。私もこの形のサイトを何度か担当しましたが、お知らせを1本直すたびに2か所を修正する必要があり、片方だけ古いまま残っているのを後から見つけることがありました。前回書いた「全ファイルを開いて同じ修正を繰り返す」問題が、形を変えて戻ってきたような感覚です。

2010年、「1つのHTMLで画面に合わせる」考え方が提唱された

この状況に対する1つの答えが、レスポンシブWebデザインです。Ethan Marcotteが2010年5月25日にA List Apartで公開した記事Responsive Web Designで提唱されました。記事では、技術的な材料として次の3つが挙げられています。

• フルードグリッド（幅を固定値ではなく割合で指定するレイアウト）
• フレキシブルイメージ（枠に合わせて伸び縮みする画像）
• メディアクエリ（画面幅などの条件でCSSを切り替える仕組み）

同じ記事には、この3つに加えて「これまでとは違う考え方が必要になる」という趣旨の一文もあります。技術の話であると同時に、設計の姿勢の話でもあったわけです。

3つ目のメディアクエリは、W3Cが2012年6月19日に勧告として公開しています。仕様として安定したことで、実務でも採用を提案しやすくなったと記憶しています。

制作の進め方も変わりました。それまでは「PC用のカンプを1枚作って承認をもらう」で済んでいたものが、「幅が変わるとどう崩れ、どう並び替わるか」まで決める必要が出てきます。1枚の絵ではなく、変化のルールを設計する仕事になったと私は理解しています。

検索エンジンがモバイルを基準にした

2010年代の後半には、検索エンジン側の基準も動きました。Googleは2015年2月の公式ブログで、同年4月21日からモバイルフレンドリーかどうかをモバイル検索のランキング要素として使う範囲を広げると告知しています。

さらに2019年5月の公式ブログでは、2019年7月1日以降、新しいサイトはモバイルファーストインデックスが既定になると発表されました。モバイルファーストインデックスとは、Googleのドキュメントによると、スマートフォン用のクローラーで取得したモバイル版のコンテンツを、インデックスとランキングに使う仕組みのことです。

同じドキュメントでは、モバイル対応の構成が3つに整理されています。

構成	URL	HTML
レスポンシブデザイン	同じ	同じ（CSSで表示を変える）
動的な配信	同じ	端末ごとに出し分ける
別々のURL	端末ごとに別	端末ごとに別

このうちGoogleは、実装と保守がしやすいという理由でレスポンシブデザインを推奨すると書いています。ただ、これは「他の構成では評価されない」という意味ではありません。既存の資産や体制によっては、別の構成を続ける判断もあり得ると私は考えています。

今の判断にどう持ち帰るか

この歴史から私が持ち帰っているのは、「スマホ版はPC版の縮小ではない」という前提です。案件の最初に、次の3点を確認するようにしています。

• アクセスの比率はどうか（アクセス解析でモバイルとPCの割合を見る）
• カンプをどの幅から作るか（比率が高い側を先に作り、承認もその順でもらう）
• PCにだけ載っている情報がないか（モバイルで省いた内容は、検索エンジンからも見えにくくなる）

とくに3つ目は見落としやすい点です。「スマホでは長いので省略する」という判断をするときは、その情報が本当に不要なのか、折りたたんで残すべきなのかを分けて考えるようにしています。

明日から試せる一手

いま担当しているサイトのトップページを、PCとスマホの両方で開いて見比べてみてください。そして「PCにあってスマホに無いもの」を書き出します。見出し、説明文、リンク、表のどれが消えているかが分かれば、それを残すか省くかを意図して決め直せます。あわせてアクセス解析で端末別の比率を確認しておくと、次の改修で「どちらの画面から作るか」を数字で説明できます。