Experts.jp日本に、もっとエキスパートを。2,UI,モバイルファースト2017年3月29日0click01130レスポンシブデザインが生まれたばかりの2009年には、はやくも「モバイルファースト」という言葉が使われ始めていました。WebサイトはPCから見るものだったのは今や昔。今ではスマートフォンの普及により、多くのWebサイトではPCとモバイルからのアクセス数が逆転してるWebサイトも多く、「モバイルファースト」な開発も当たり前になりました。2009年の「モバイルファースト」と、今の「モバイルファースト」は大きく中身が成長しました。2も先日リリースされましたので、ここで改めて「モバイルファースト」とは何かを考え、モバイルの設計を見直していきます。レスポンシブとモバイルファーストモバイルファーストは、「モバイル環境に最適化した開発手法」と説明することができます。モバイル(多くはiPhoneを指しました)は解像度が低く、操作方法もPC文化と異なり、かつ通信速度も遅いという制約があります。イベントひとつとっても、onclickでは待機時間があるから、jQueryのtapイベントを使う、というようにPCとモバイル開発の乖離をどのようにするかの課題があります。モバイルファーストがいわれはじめた2009年当時は「PC版を作ったあと、MediaQueriesを使ってモバイルでも表示させる」というワークフローが主流でしたが、これではPCとモバイル開発の乖離にアプローチするのが難しかったため、「先にモバイル版をつくる」ワークフローを取り入れる現場が多く生まれました。PCよりもモバイルを優先させるので、「モバイルファースト」だったわけです。その頃は、モバイルファーストとレスポンシブデザインの区別がつかない議論を度々聞きましたが、もうここらへんの誤解は整理された感があります。Googleが提示する「次のモバイルファースト」モバイルからのアクセスが主流になる中で、Googleは「次のモバイルファースト」として、2つの選択肢を提示しました。簡単に概要をいうと、AMPは超高速でWebサイトを表示することができます。HTMLやJavaScriptは高速化を妨げるものは使えなくなっており、またCSSはインラインのみでの表示でありと、ひたすらページ表示速度をあげるための仕様です。PWAは「Webのアプリ化」を標榜したもので、インストール型のアプリと同様にWebを使うことができます。代表的な内容でいえば、Webをアプリとしてインストールしたり、オフラインでも表示することができたり、プッシュ通知を受け取ることができるようになります。普通のWebサイトなら、超高速化するためにAMPいろいろな機能を実装するなら、PWAでWebをアプリ化という2つの「次のモバイルファースト」を提示しました。これは、今の「レスポンシブにしてモバイルで表示できればOK」から大きな変化であり、これからのモバイル体験を大きく変えるものになるのではないでしょうか。UIデザインのモバイルファーストPWAの標榜する「Webのアプリ化」は、UIデザインにおいても「次のモバイルファースト」を生み出す可能性が高いです。皆さんご存知の通り、PCと(現在の)モバイル、そしてモバイルアプリはUI文化が異なります。PCとモバイルのWeb表示はレスポンシブデザインによって多くの共通化されたモジュールが使われていますので似通っておりますが(便宜上、これらを「現行WebUI」といいます)、モバイルアプリUIは別物に近いといっていいでしょう。「現行WebUI」では、HeaderのロゴはクリックしてHOMEに戻るという文化があります。ほとんどがこのUIを採用しています。モバイルアプリはHeader部にロゴは入れませんし、入れていてもクリックさせない場合が多いです。「現行WebUI」ではクリックできる場所は明確にするしきたりがあります。カードデザインでも下に「詳しくみる」と注釈をつけてクリックを促したりします。モバイルアプリUIでは「カードはとりあえずクリックしてみるよね」という風潮があります。モバイルファーストで考えた時、Webがアプリ化する前提でのUIの再設計も必要になってくるでしょう。その時に、各デバイスが発表しているデザインガイドラインはとても有用です。UI)AMPのように表示速度に最適化したWebはまた異なるUI文化が生まれてくるのでしょうが、「Webのアプリ化」を標榜するPWAはモバイルWebのUIもアプリサイドに寄せていくことになりそうです。デバイスの作法に寄り添うためにWebのUIもアプリサイドに寄っていくことを考えた時、一番大きなハードルになるのは前挙した「各デバイス毎のデザインガイドライン」をどのように吸収するかです。モバイルでは、デバイスの文化に寄り添うUI設計が最もユーザの学習コストが低く、適切なUI,UXを提供することができます。UIを提供するために1リソースで複数デザインパターンを用意して保守し続けることはハードルが高く現実的ではありません。2を使って構築するモバイルフレームワークです。現在、(著者が確認する範囲では)唯一のPWA対応を標榜したモバイルフレームワークとなっております。UIのパターンを用意し、フレームワークが判断して自動的にデザインをデバイスに合わせます。Components」という技術によってカスタムタグを用意して、コーダーの負担を減らす工夫をしています。166ms;"></div></button>と表示されます。手元のソースコードはシンプルですので、可読性が高く、またデバイス毎の表示に困ることはありません。2017年3月現在、28のコンポーネントがデフォルトで用意されています(コンポーネント一覧は公式リファレンスをご覧下さい)また、フレームワークが直下に<ion-app>というタグを生成してくれており、そこにデバイスを示すclass(iPhoneだとios、Androidはmd、WindowsPhoneはwp)をつけてくれます。自分自身でカスタムデザインを用意したい場合、それを親にしてCSS設計することが可能です。Checklist」を提供しています。Webをアプリ化するために、これだけはクリアしてねというチェックリストです。その中で「オフラインでも表示される」というものがあります。普通のWebサイトでは、キャッシュを持っていてもオフライン環境で更新すると「オフラインです」とエラーがでます。Workerという技術を使うと、オフライン環境では自動的にキャッシュを返すことができます。オフライン対応を有効するのはとても簡単で、src/index.htmlの17-24行目のコメントアウトを外すだけです。Workerが対応している場合はservice-worker.jsを読み込み、オフライン対応が行われます。回線が安定してるPCとは異なり、トンネルの中であったり山中であったりでも安定してコンテンツを提供するためには必須の機能です。2では、sw-toolbox.jsを利用しておりますので、詳細に興味がある方は「sw-toolbox」をご覧下さい。拡張すれば、いろいろなオフライン時の挙動を制御できます。2のmanifest.jsonPWAでは、Webをアプリストアのアプリ同様にHOME画面にアイコン付きで登録することができます。manifest.jsonは、その時のアイコンであったりとか、起動した時のヘッダー部の配色であったりを定めることができます。初期では以下の通りです。"#4e8ef7"}これを設定すると、Androidで表示された場合に自動的に「ホーム画面に追加」というバナーがでてきて、ユーザに対してWebをアプリとして扱うことを提案することができます。Checklistは以下の通りです。Webをアプリとして扱うことを考える時に、ぜひご配慮下さい。SSLで提供されているモバイルに表示が最適化されている(レスポンシブデザイン)10秒以内に最初のページが表示されるChrome、Edge、Firefox、Safariで動作する各ページはURLを持っているおわりにGoogleがAMPとPWAというふたつの選択肢を提示しました。これは、既存のモバイルから設計するデザインワーク中心の「モバイルファースト」から、モバイル体験中心をWebを中心として再設計する新たな「モバイルファースト」を生み出す可能性を秘めています。Webの設計、デザイン、技術の大きな見直しの転換点となるのではないでしょうか。2を試していただき、この流れとWebのこれからを体験していただければと思います。2はリリース前(特にβ版時代)はとても日本語情報が少なかったので、知見を共有するためにslackのオープンチャンネルを開設しました。分かる方がいれば有志が回答する形ですのでレスポンス速度はあまり高くありませんが、ご活用いただけましたら幸いです。