「モバイルファースト」に至るまでをモバイル端末の遷移と重ねて振り返ってみる

2019/11/01

AI

DDS匠ブログ

Web

匠

WEB

「モバイルファースト」に至るまでをモバイル端末の遷移と重ねて振り返ってみる

ここ最近「モバイルファースト」でのコーディングをすることが多くなりました。筆者がWEB制作に初めて携わった頃は「テーブルコーディング」が主流でしたが、現在はHTML5やCSS3を駆使して様々なデバイスに対応するコーディングスタイルに変化しています。
この約30年間でHTMLやCSSで表現できる幅が広がり、時代の流れと共にコーディング手法も変化して行きました。今回は「モバイルファースト」の観点から、コーディング手法の移り変わりをHTMLやCSSの歴史やモバイル端末の歴史に照らし合わせて振り返ってみたいと思います。

【1990年代】

年	HTML、CSS	モバイル	その他
1985		「ショルダーホン」登場
1987		携帯電話サービス開始
1990	HTMLのコード化		Windows 3.0発売
1991			最初のWEBサイトが公開
1993	HTML 1.0、HTML+勧告	2Gサービス開始
1994		端末レンタルから購入に変化し、広く普及PHS開始
1995	HTML 2.0（HTML 3.0）勧告（Netscape 2.0）		Windows 95発売
1996	HTML Tables勧告 CSS1勧告	SMS（ショートメッセージサービス）開始
1997	HTML 3.2勧告
1998	HTML 4.0勧告 Compact HTML勧告 CSS2勧告	2.5Gサービス開始
1999	HTML 4.01勧告 BML策定（データ放送用）	日本発のカラー液晶端末の発売世界初のカメラ付き携帯発売携帯端末でのインターネット接続サービス開始「iモード」「EZweb」「J-スカイ」

1980年代から1990年代にかけて、携帯電話やインターネットなどのサービスが一般社会に普及していきました。1990年には「Windows 3.0」、1995年に「Windows95」が発売され、コンピューター時代の幕が上がりました。

HTMLは1993年に「HTML1.0」が正式にアナウンスされ、「HTML 2.0」では画像やフォームなどが制定され、「HTML Tables」ではテーブルに関する要素が追加されました。また同時期にブラウザの「Netscape 2.0」が発表され、iframeやJavaScript(LiveScript)など独自の機能が追加されました。ブラウザを巡っては、この後IEとNetscapeで激しいシェア争いが繰り広げられます。

CSSについては、当時対応しているブラウザがほとんどありませんでした。そのため、制作は「テーブルコーディング(*1)」が主流となり、コードの構造が解りにくいものになっていました。Tableの入れ子が5回以上になるとブラウザが応答しなくなるなどの不具合もあり、制作でのお作法がいくつかありました。今でもHTMLメルマガは、主要なメールクライアントでのCSS対応が進んでいないこともあり、全てに対応できる「テーブルコーディング」で作ることが基本になっています。

1999年に日本では「iモード」など携帯電話向けのインターネットサービスが開始されました。このことによりモバイル版というカテゴリが生まれ、PC版と分けて制作を行うようになります。モバイル版のWEBページは、専用に設計された「Compact HTML」や「XHTML Mobile Profile」を用いました。

その他では、データ放送用に独自の機能を追加した「BML（Broadcast Markup Language）」とう言語も生まれました。筆者も少しだけ制作に携わりましたが、「BML」での制作は「HTML」と同様にテキストエディタがあれば簡単にコーディングが出来ます。しかし実機での検証については、検証機材が高価なことや、放送局でのみ検証ができるなど、制作環境の面でやや不便なところがありました。

(*1)…tableタグでレイアウトを形作るコーディング手法
「勧告」…Web技術の標準化を行う非営利団体（W3C[ダブリュースリーシー]）が十分に検証をした後、その技術の信頼性が認められたとアナウンスをすること

【2000年代】

年	HTML、CSS	モバイル	その他
2000	XHTML 1.0勧告 CSS 2.1勧告	J-フォンよりカメラ付き携帯が発売	デジタル放送開始
2001		3Gサービス開始	Mozillaなどのブラウザが徐々にCSSをサポートし始める
2002		タブレットPC発売
2003
2004		3Gスマートフォン登場	第2次ブラウザ戦争 Facebook、Gmailなどのサービス開始
2005			YouTube、Google Mapなどのサービス開始
2006	(SASS記法の公開)		ワンセグ開始 IE7でCSSの標準準拠バージョン Twitterサービス開始
2007		iPhone登場 MVNOの新規参入
2008		iPhone日本で発売 Android発表
2009	XHTML2.0勧告	Androidスマホが日本でも発売

2000年代は、モバイルやインターネットを取り巻く環境の変化が、様々なところで現れた時代になりました。

HTMLについて勧告は少なかったものの、2001年ごろよりCSSをサポートするブラウザが増え、これに伴い「テーブルコーディング」から「HTML＋CSS」のようにテキストとデザインを分離してコーディングをする手法へと変化しました。

2004年ごろより、OperaやSafari、Google ChromeなどIE以外で様々なブラウザが開発されました。しかしCSS対応にバラツキがあったので、各ブラウザでのデザインを統一させるため、制作では大変な苦労を強いられることになりました。CSSハック(*2)やJavaScriptを多用しなければならず、CSS設計は一筋縄では行きませんでした（クロスブラウザ対応(*3)）。

2007年にはiPhoneがアメリカで発売され、スマートフォン時代の幕開けとなりました。その後Android端末も発表され、多くのメーカーがスマートフォン市場に参入し端末のシェア争いが激化します。一部フィーチャーフォンでも専用ブラウザを使いWEBサイトを参照することができましたが、高性能なスマートフォンの登場により徐々に衰退していきました。

スマートフォンでいつでもどこでも簡単にインターネットに触れる機会が創出されたことは、制作の分野でも大きなインパクトになりました。これまでのモバイル版とPC版に２つに分けて制作していたものが、viewport設定やユーザーエージェントを使用したCSSの振分けによりワンソースで対応できるようになり、コーディング手法のターニングポイントになりました。

(*2)…特定のブラウザのみに適用される書き方を使用し、各ブラウザの表示をなるべく同じようにするための技法
(*3)…どのブラウザでも表示崩れのない状態を保つために対応すること

【2010年以降】

年	HTML、CSS	モバイル	その他
2010		Androidスマホが多彩に iPad発売 iPhone4でretinaディスプレイ搭載 3.9G（4G）サービス開始	QRコード、ARが徐々に浸透ウェアラブルデバイスの登場
2011	CSS2.1勧告	Android搭載のタブレット端末が普及
2012	CSS3が徐々に広まる	4Gサービス開始 5インチ台のスマートフォンが徐々に増える
2013		5インチ台の端末が4インチ未満の端末を上回る
2014	HTML5勧告	2Gサービス終了
2015			検索数でスマートフォンがパソコンを上回る
2016	CSS2.2勧告 HTML5.1勧告		スマホの普及率、ガラケーを上回る
2017	HTML5.2勧告		インターネット接続機器でスマートフォンがNo.1に
2018		SIMロック解除義務化	「モバイルファーストインデックス」を開始

2010年以降は通信の大容量化・高速化が進み、フィーチャーフォンからスマートフォンへ世代交代をしていきます。日本では2016年ごろに普及率でフィーチャーフォンを逆転し、今ではインターネット接続端末としてNo.1になっています。

＜日本経済新聞＞スマホの普及率、ガラケー上回る 3月消費動向調査

＜日本経済新聞＞ネット利用、スマホがPCを逆転総務省調査

世界的に見てもモバイル端末からインターネットへのアクセスは増加の一途で、Google検索もモバイル端末で行われることが多くなったことから、2018年より「モバイルファーストインデックス(*4)」が導入されました。このことにより、「モバイルファースト」の考えがさらに重要視されるようになりました。

HTMLでは、2014年に「HTML5」が勧告され、<input>タグの要素の追加や動画や音声データを扱えるようになったことに加え、<header>や<footer>などセマンティック要素が追加され、文章構造をシンプルで解りやすく設定できるようになりました。

CSSでは、「CSS3」が徐々に浸透していきます。「CSS3」は、これまでのバージョンの扱いと考え方が異なり、機能別にモジュール単位で改良版を順次勧告する形式に変更しました。「CSS3」に位置付けられたモジュールは、2012年ごろより次々と勧告されていきます。ブラウザでも順次対応するようになり、「モバイルファースト」も考慮した「レスポンシブデザイン(*5)」などの手法が生まれました。

＜ウィキペディア＞Cascading Style Sheets, level 3 (CSS3)

(*4)…モバイル版のページを優先的に検索結果のインデックスやランキングに反映されること
(*5) …PC、タブレット、スマホなどデバイスの画面サイズに依存しないコーディング手法のこと

【「モバイルファースト」が重要】

これまでの30年を振り返ると、ハードの進化がソフトの進化を生み、ソフトが進化すればHTMLやCSSも進化し、コーディング手法も変化してきました。古くは「テーブルコーディング」から始まり、CSSでデザインを分けてコーディングできるようになり、モバイル版とPC版を分けてコーディングするところから、現在は「モバイルファースト」のワンソースで実現する手法が主流となりました。

私も普段は育成と制作に関わり、ほぼ「モバイルファースト」で制作をしていますが、毎回コーディングをするときに気にかける項目がありますので、それをまとめてみました。

〜「モバイルファースト」6大チェックポイント〜

「モバイルファースト」は、コーディングする上で考慮する点が増え制作コストが増えてしまいがちですが、ワンソースで対応することで運用コストを下げるなど長期的なメリットもあります。「モバイルファーストインデックス」の観点からも有効なので、今後もしばらくは「モバイルファースト」が主流となるでしょう。

●ワンソースでマルチデバイス対応（レスポンシブ対応）
スマートフォン版・タブレット版・PC版とワンソースで対応することにより、メンテナンスが容易になり運用コストを下げる。
●導線やユーザーの使いやすさ
フォントサイズにも注意し伝えたい情報をきっちり見せる。またボタンなど導線部分の配置と使い易さを考慮する。
●ブレイクポイントは少なく
ブレイクポイントを多く設けることは、設定を複雑にしてしまいメンテナンス性に影響します。できれば０か１回、多くても３回以内で済むように設定する。
●画像はなるべく軽量化。でも高解像度で。
解像度に合わせ、圧縮ツールなどを使用し画像が荒くならい程度で軽量化を図る。
●セマンティックを意識
SEO的にも重要なことなので、HTML5で文章構造を明確にしていきます。
●対象ブラウザで表示崩れをしない
最低限スマートフォンやPCのMac版とWindows版それぞれの最新バージョンで表示崩れがないこと。その他対象ブラウザのバージョン指定があれば、全てチェックしながらコーディングする。

【WEB技術の発展は続く】

歴史を見ると、1800年代前半に第1次産業革命で産業の機械化が進み、1800年代後半からの第2次産業革命では石油や電力を使った重工業が中心に移り変わり、1900年代後半からの第3次産業革命ではコンピューターを使って生産を自動化・効率化が進み、そして現在は第4次産業革命と言われ、「IoT」でモノがインターネットに繋がり様々な情報（ビッグデータ）を収集し活用することや、「AI」を導入し問題解決を図るなど、IT技術を駆使し複雑な問題の解決を目指しています。

近い将来、通信環境では5Gサービスが開始され、2020年代半ばには一時代を築いたiモードのサービスも終了する予定になっています。古くなった技術の上に新しい技術が生まれるサイクルのように、私たちも進化を続けてきました。これからもクリエイターとして、技術の発展と共にその時代の風を感じながら進化していくことでしょう。

【参考資料】

＜ウィキペディア＞Broadcast Markup Language

＜ウィキペディア＞Cascading Style Sheets

＜ウィキペディア＞ウェブブラウザーについて

＜携帯電話の歴史＞

＜W3C勧告とはなんぞ？Web標準化とW3Cにおける勧告プロセスについて＞

デザイン＆デベロップメントスタジオについて「もっと詳しく知りたい！」という方は、Wantedlyのページにより詳しい情報が載っていますので、ぜひ覗いてみてください。また、直接社員と話せる『カジュアル面談』のお申し込みも可能です。お気軽にご連絡ください。

株式会社デジタルスケープ デザイン&デベロップメントスタジオ 高杉充: 2005年よりWEB業界に入り、未経験ながらOJTで１年ほど数社のサイト更新を経験した後、以降はグローバルメーカーやWEB証券会社のサイト運用など大手から中小企業まで様々な案件にWEBコーダー・フロントエンドエンジニアとして携わる。現在は、フロントエンドエンジニア・ディレクターとして、サイトリニューアルやお客様先常駐案件などの提案から制作・運用までを担当。
コミュニケーションを通して信頼関係を構築し、安心して働ける環境でメンバーと共に成長することが何よりの喜びです。