「モバイルファースト」に至るまでをモバイル端末の遷移と重ねて振り返ってみる「モバイルファースト」に至るまでをモバイル端末の遷移と重ねて振り返ってみる2019/11/01匠Web匠DDS匠ブログここ最近「モバイルファースト」でのコーディングをすることが多くなりました。筆者がWEB制作に初めて携わった頃は「テーブルコーディング」が主流でしたが、現在はHTML5やCSS3を駆使して様々なデバイスに対応するコーディングスタイルに変化しています。この約30年間でHTMLやCSSで表現できる幅が広がり、時代の流れと共にコーディング手法も変化して行きました。今回は「モバイルファースト」の観点から、コーディング手法の移り変わりをHTMLやCSSの歴史やモバイル端末の歴史に照らし合わせて振り返ってみたいと思います。「iモード」「EZweb」「J-スカイ」1980年代から1990年代にかけて、携帯電話やインターネットなどのサービスが一般社会に普及していきました。3.0」、1995年に「Windows95」が発売され、コンピューター時代の幕が上がりました。Tables」ではテーブルに関する要素が追加されました。2.0」が発表され、iframeやJavaScript(LiveScript)など独自の機能が追加されました。ブラウザを巡っては、この後IEとNetscapeで激しいシェア争いが繰り広げられます。CSSについては、当時対応しているブラウザがほとんどありませんでした。そのため、制作は「テーブルコーディング(*1)」が主流となり、コードの構造が解りにくいものになっていました。Tableの入れ子が5回以上になるとブラウザが応答しなくなるなどの不具合もあり、制作でのお作法がいくつかありました。今でもHTMLメルマガは、主要なメールクライアントでのCSS対応が進んでいないこともあり、全てに対応できる「テーブルコーディング」で作ることが基本になっています。1999年に日本では「iモード」など携帯電話向けのインターネットサービスが開始されました。このことによりモバイル版というカテゴリが生まれ、PC版と分けて制作を行うようになります。Profile」を用いました。Language)」とう言語も生まれました。筆者も少しだけ制作に携わりましたが、「BML」での制作は「HTML」と同様にテキストエディタがあれば簡単にコーディングが出来ます。実機での検証については、検証機材が高価なことや、放送局でのみ検証ができるなど、制作環境の面でやや不便なところがありました。Androidスマホが日本でも発売2000年代は、モバイルやインターネットを取り巻く環境の変化が、様々なところで現れた時代になりました。HTMLについて勧告は少なかったものの、2001年ごろよりCSSをサポートするブラウザが増え、これに伴い「テーブルコーディング」から「HTML+CSS」のようにテキストとデザインを分離してコーディングをする手法へと変化しました。ChromeなどIE以外で様々なブラウザが開発されました。CSS対応にバラツキがあったので、各ブラウザでのデザインを統一させるため、制作では大変な苦労を強いられることになりました。CSSハック(*2)やJavaScriptを多用しなければならず、CSS設計は一筋縄では行きませんでした(クロスブラウザ対応(*3))。2007年にはiPhoneがアメリカで発売され、スマートフォン時代の幕開けとなりました。その後Android端末も発表され、多くのメーカーがスマートフォン市場に参入し端末のシェア争いが激化します。一部フィーチャーフォンでも専用ブラウザを使いWEBサイトを参照することができましたが、高性能なスマートフォンの登場により徐々に衰退していきました。スマートフォンでいつでもどこでも簡単にインターネットに触れる機会が創出されたことは、制作の分野でも大きなインパクトになりました。これまでのモバイル版とPC版に2つに分けて制作していたものが、viewport設定やユーザーエージェントを使用したCSSの振分けによりワンソースで対応できるようになり、コーディング手法のターニングポイントになりました。「モバイルファーストインデックス」を開始2010年以降は通信の大容量化・高速化が進み、フィーチャーフォンからスマートフォンへ世代交代をしていきます。日本では2016年ごろに普及率でフィーチャーフォンを逆転し、今ではインターネット接続端末としてNo.1になっています。世界的に見てもモバイル端末からインターネットへのアクセスは増加の一途で、Google検索もモバイル端末で行われることが多くなったことから、2018年より「モバイルファーストインデックス(*4)」が導入されました。このことにより、「モバイルファースト」の考えがさらに重要視されるようになりました。HTMLでは、2014年に「HTML5」が勧告され、<input>タグの要素の追加や動画や音声データを扱えるようになったことに加え、<header>や<footer>などセマンティック要素が追加され、文章構造をシンプルで解りやすく設定できるようになりました。CSSでは、「CSS3」が徐々に浸透していきます。「CSS3」は、これまでのバージョンの扱いと考え方が異なり、機能別にモジュール単位で改良版を順次勧告する形式に変更しました。「CSS3」に位置付けられたモジュールは、2012年ごろより次々と勧告されていきます。ブラウザでも順次対応するようになり、「モバイルファースト」も考慮した「レスポンシブデザイン(*5)」などの手法が生まれました。...PC、タブレット、スマホなどデバイスの画面サイズに依存しないコーディング手法のこと【「モバイルファースト」が重要】これまでの30年を振り返ると、ハードの進化がソフトの進化を生み、ソフトが進化すればHTMLやCSSも進化し、コーディング手法も変化してきました。古くは「テーブルコーディング」から始まり、CSSでデザインを分けてコーディングできるようになり、モバイル版とPC版を分けてコーディングするところから、現在は「モバイルファースト」のワンソースで実現する手法が主流となりました。私も普段は育成と制作に関わり、ほぼ「モバイルファースト」で制作をしていますが、毎回コーディングをするときに気にかける項目がありますので、それをまとめてみました。〜「モバイルファースト」6大チェックポイント〜●ワンソースでマルチデバイス対応(レスポンシブ対応)スマートフォン版・タブレット版・PC版とワンソースで対応することにより、メンテナンスが容易になり運用コストを下げる。●導線やユーザーの使いやすさフォントサイズにも注意し伝えたい情報をきっちり見せる。ボタンなど導線部分の配置と使い易さを考慮する。●ブレイクポイントは少なくブレイクポイントを多く設けることは、設定を複雑にしてしまいメンテナンス性に影響します。できれば0か1回、多くても3回以内で済むように設定する。●画像はなるべく軽量化。解像度に合わせ、圧縮ツールなどを使用し画像が荒くならい程度で軽量化を図る。●セマンティックを意識SEO的にも重要なことなので、HTML5で文章構造を明確にしていきます。●対象ブラウザで表示崩れをしない最低限スマートフォンやPCのMac版とWindows版それぞれの最新バージョンで表示崩れがないこと。その他対象ブラウザのバージョン指定があれば、全てチェックしながらコーディングする。「モバイルファースト」は、コーディングする上で考慮する点が増え制作コストが増えてしまいがちですが、ワンソースで対応することで運用コストを下げるなど長期的なメリットもあります。「モバイルファーストインデックス」の観点からも有効なので、今後もしばらくは「モバイルファースト」が主流となるでしょう。歴史を見ると、1800年代前半に第1次産業革命で産業の機械化が進み、1800年代後半からの第2次産業革命では石油や電力を使った重工業が中心に移り変わり、1900年代後半からの第3次産業革命ではコンピューターを使って生産を自動化・効率化が進み、そして現在は第4次産業革命と言われ、「IoT」でモノがインターネットに繋がり様々な情報(ビッグデータ)を収集し活用することや、「AI」を導入し問題解決を図るなど、IT技術を駆使し複雑な問題の解決を目指しています。近い将来、通信環境では5Gサービスが開始され、2020年代半ばには一時代を築いたiモードのサービスも終了する予定になっています。古くなった技術の上に新しい技術が生まれるサイクルのように、私たちも進化を続けてきました。これからもクリエイターとして、技術の発展と共にその時代の風を感じながら進化していくことでしょう。2020から「シェイプの高速化」をご紹介します。Productions。現在取り組んでいるゲームエンジン、新規IPタイトル、今年に入ってから力を...2019/11/27エンジニアTIPSpythonが学べるおすすめのプログラミングスクール1...Pythonを学べるスクールは各地に様々な形態であり、目的のレベルに応じた学習コースを用意しています。「UIターンで手に入れた素晴らしい環境」株式会社スクウ...前編に続き、スクウェア・エニックス大阪支社で活躍する開発スタッフにインタビュー。編集長・林さんがサラ...誰も傷つかないスカッとした楽しさを提供し続ける大人気メディア「デイリーポータルZ」の編集長林雄司氏のキャリアに迫る。2019/6/27全ての業界キャリア企業研究の目的は?転職活動を成功に導く企業研究のポイン...就職活動を成功させるために、「企業研究」は非常に重要です。Creatorとはクリエイティブ業界に関わる全ての人に届ける情報メディアサイトです。クリエイティブ業界に特化した「イマジカデジタルスケープ」が運営するサービスです。Tips/ノウハウ、キャリアに関する情報/最前線で働く方へのインタビュー記事など、クリエイターの毎日に役立つコンテンツをお届けしていきます。運営元お問い合わせご利用にあたってプライバシーポリシーサイトマップ。