第5回：王の死と黒船「iPhoneの登場とレスポンシブ」
〜画面サイズという新たな呪縛〜
導入：パソコンの画面を飛び出すWeb
第4回で解説した「Web標準（HTMLとCSSの分離）」は、Webサイトの骨格を非常に柔軟なものにしました。
しかし2000年代後半まで、Webデザイナーが想定する主流のキャンバスは、ほぼ常に 「パソコンの横長のモニター」 ひとつだけでした。
2007年、この平和な世界に突如として 黒船 が襲来します。手のひらサイズの小さな画面と、指でのタッチ操作を前提としたデバイスの誕生。
今回は、Webデザインの歴史において最も劇的なパラダイムシフトを引き起こしたスマートフォンの台頭と、絶対王者であったFlashの死、そして レスポンシブ・ウェブデザイン という新たな解決策の物語です。
1. ジョブズの引導「Thoughts on Flash」
2007年にAppleが発売した初代 iPhone は、世界中の人々に衝撃を与えました。
しかし、Webデザイナーたちにとっては別の意味で 特大の事件 でした。なぜなら、iPhoneの標準ブラウザ（iOS版Safari）は、当時Webの表現の王様であった Flashに一切対応していなかった からです（デスクトップ版Safariでは当時Flashが使えた点にも注意が必要です）。
「そのうち対応するだろう」というクリエイターたちの淡い期待は、2010年4月、スティーブ・ジョブズが公開した一通の書簡 「Thoughts on Flash（Flashに対する思い）」 によって大きく打ち砕かれます。
ジョブズは「Flashはバッテリー消費が激しく、セキュリティに問題があり、何よりマウス操作を前提としているためタッチパネルのモバイル端末には向かない」と名指しで痛烈に批判しました。
この書簡は象徴的な転換点となり、2000年代のWebを支配した絶対王者は、HTML5の普及やモバイル環境での不適合なども重なりながら、のちの2020年にサポートを完全終了するまでの、長く静かな 衰退の道 を歩み始めることになったのです。
2. スマホ対応という「二重管理の地獄」
Flashが使えなくなったことで、デザイナーたちはHTMLとCSS、そしてJavaScriptの技術だけでリッチな表現を作り直す必要に迫られました。
さらに深刻だったのが 「画面サイズの問題」 です。
初期のスマートフォンでパソコン用のサイトを開くと、文字が豆粒のように小さくなり、いちいち指で拡大（ピンチイン・アウト）しなければ読めませんでした。
これを解決するため、当時の企業は「パソコン用のサイト（PC版）」とは別に、わざわざ 「スマートフォン専用のサイト（スマホ版）」 をもう一つ作るという力技に出ました。
しかし、これは 地獄の始まり でした。
お知らせを1つ更新するだけでも、PC版とスマホ版の両方のHTMLを書き直さなければならず、デザインの手間も保守コストも2倍に膨れ上がってしまったのです。
3. 救世主「レスポンシブ・ウェブデザイン」
この二重管理の地獄から世界を救ったのが、2010年にイーサン・マルコッテ（Ethan Marcotte）というWebデザイナーが提唱した 「レスポンシブ・ウェブデザイン」 という概念です。
ここで、第4回で学んだ「HTMLとCSSの分離」が最大の威力を発揮します。
HTML（中身）はひとつだけ用意し、当時ブラウザで使えるようになっていたCSSの メディアクエリ という仕組みなどを組み合わせます。
「もし画面の幅が1000ピクセル以上なら、このパソコン用のCSSを適用しろ」
「もし画面の幅が600ピクセル以下なら、このスマホ用のCSSを適用して、横並びのレイアウトを縦一列に組み直せ」
ブラウザの横幅が伸び縮みするのに合わせて、デザインがまるでゴムのように変幻自在に姿を変える。この魔法のような手法により、デバイスごとに別々のサイトを作る必要はなくなりました。
💡 推論：レスポンシブが「絶対的な標準」になった決定的な要因は？
レスポンシブ・ウェブデザインが歴史上、いつ「絶対にやらなければならない世界標準」として完全に定着したかについて、 明確にひとつの日付を断定できる事実はありません。
しかし、Webの歴史的文脈から 推論 すると、2015年4月にGoogleが実施した検索アルゴリズムのアップデート（通称： モバイルゲドン ）が大きな転換点であったと考えられます。
「スマホで見にくいサイトは、スマホの検索で不利になる」というGoogleの強硬手段により、多くの企業が生き残りをかけてスマホ対応へ舵を切りました。レスポンシブはその代表的な手段のひとつであり、別URLのスマホ専用サイトなども含め、 モバイルフレンドリー であることが求められた、と推測されます。
おわりに：新たな「呪縛」の始まり
レスポンシブ・ウェブデザインによって、画面サイズの違いという問題は大きく緩和されました。
しかし、それは同時に 「どんな画面サイズに伸縮しても破綻しにくい、規則正しくシンプルなレイアウトでなければならない」 という新たな制約（呪縛）をデザイナーたちに課すことにもなりました。
Flash時代の自由奔放で複雑なデザインは姿を消し、スマートフォンという小さな四角いキャンバスの中で、いかに直感的な使いやすさ（UI/UX）を追求するか。
ここから、Webデザインは 「引き算の美学」 へと大きく舵を切ることになります。
次回予告
スマホの画面に並んだ、本物の革やガラスのようにリアルなボタンたち。
しかし、画面が小さくなるにつれ、その「過剰なリアルさ」は次第に邪魔になっていきます。
次回、第6回。
「引き算の美学『スキューアモーフィズム vs フラットデザイン』 〜スマホが変えた美意識〜」
📚 参考文献・出典
-
Thoughts on Flash (2010)
- 2010年4月にAppleのCEOスティーブ・ジョブズが公開したオープンレター。Flashのモバイルデバイスにおける欠点を指摘し、HTML5などのオープン標準への移行を後押しした歴史的な文書です
- Thoughts on Flash（アーカイブ）
- Thoughts on Flash（Wikipedia）
-
Responsive Web Design (A List Apart)
- 2010年5月、イーサン・マルコッテがWebデザインメディア『A List Apart』にて発表した記事。ここで初めて「レスポンシブ・ウェブデザイン」という言葉と概念が世に提唱されました
- Responsive Web Design – A List Apart
🤖 執筆協力
本記事の構成案作成および推敲には、生成AIのアシストを活用しています。