デザインのイロハを初心者にもわかりやすく教えてくれる、人気のメルマガ『プロが教える「美大いらずのデザイン講座」』。最新号では、スマホの普及で複雑化が進むWebデザインのトレンドを理解するための3つのキーワードについて、詳細にレクチャーしています。
モバイルファーストから探る現在のWebトレンド
どうもkeloです。如何お過ごしでしょうか。少し久しぶりになってしまったかもしれませんね。どうもすいません。
今回は、最近のWebデザインのトレンドを掴むために、大切な3つのポイントについて書かせてもらいます。
ご存知のようにインターネットの世界の流れは、本当に早いですよね。日々何かしら変わっていることさえ気が付かなかったりしますが、この3つはそれなりに重要なキーワードなんでしっかりと理解していきましょう。
1. モバイルファースト
2. レスポンシブWebデザイン
3. アダプティブデザイン
この3つの言葉の関係性として、1の「モバイルファースト」というコンセプトが、2・3の「レスポンシブWebデザイン」や「アダプティブデザイン」という考え方の根幹を支えているコンセプトである、という図式になりますが、それぞれの言葉の本当の意味や根本的なコンセプトを理解しないと、いきなり関連性と言われてもわからないかと思いますので、ひとつひとつご説明させて頂きますね。
1.モバイルファースト
「モバイルファースト」は、2009年にルーク・ウロブルスキー氏（Luke Wroblewski、以下ルーク氏）によって提唱されたコンセプトで、グーグルやアドビシステムズ、フェイスブックなどのカンファレンスでも紹介され、一気に認知が広がりました。
Webサイトの設計だけでなく、マーケテイングやコンテンツ設計などを、モバイル（スマホ）を起点にして始めるというもので、従来のようにPC向けのWebサイトやコンテンツから作り始めて、モバイル版を最後に考えるという「モバイルラスト」とは真逆の考え方です。
ただ「モバイルから作り始める」ということは、この考え方の一部分でしかなく、「モバイルファースト」の本質はもっと深いところにあるのです。
それは、ルーク氏がA Book Apartから出版している著書『モバイル・ファースト（MOBILE FIRST）』にある、このテキストをよく読み込むと伝わってくるはずです。
モバイルファーストの実践とは、モバイルインターネットの爆発的な成長にただ備えるだけではない。ユーザーが本当に必要とすることにフォーカスすることで、これまでできなかった方法でのイノベーションが可能になる。（ルーク・ウロブルスキー氏）
何かデザインやコンテンツ制作の根幹を言い当ててるような、深い言葉ですが、つまり、スマホ（モバイル）というスクリーンサイズも小さく、通信パフォーマンスも低いデバイスに合わせてサイトをデザインする、ということは、「ユーザーが本当に必要とすることに絞って作らないとならない」ということで、不要なデザイン要素あれば、まとめて削ぎ落とすことも必要です。
そしてそのようにして、「ユーザーにとって本当に必要な部分」を抽出して、スマホならではの優れている機能と組み合わせる事で、新しいイノベーションが見えてくるかもしれない、と言ってるわけですね。
この「ユーザーにとって本当に必要な部分」を抽出するというコンセプトは、デザインの本質でもある「レス・イズ・モア」（より少なく要素を絞ることでより豊かなものを伝える）に通じる所があって興味深く感じます。
また「モバイルファースト」という言葉は、このコンセプトが発表された2009年に、一番スクリーンサイズは小さいが機能性等様々な可能性を持っているデバイスが（たまたま）スマホだったので「モバイル（スマホ）ファースト」と言ってるだけで
今後モバイル（スマホ）に変わるような最小デバイス、（例えば「AppleWatch」のようなデバイス）が主流になったとしても、この「モバイルファースト」というコンセプトは生き続けるわけですね。
ですから皆さんの周りで、「モバイルファースト」ってスマホなくなったら通用しないコンセプトだしね」などと言ってる方がいれば「違いますよ」と、優しく教えてあげても良いかもしれません（笑）
さて「モバイルファースト」とは、小さい画面でも見えやすいように、メニュー等も絞り込んで、シンプルにすれば良いのか？……と言えばそれだけではありません。
モバイル（スマホ）がPCやタブレットに比べて、明らかに優れている点を強く意識しないとなりません。まあここから先は「デザイン」というより、「コンテンツ設計」という領域に踏み込んでいくように思いますが。
モバイル（スマホ）が優れている点は下記のようなポイントです。
【モバイル（スマホ）の機能性】
コンパス
ジャイロスコープ
マイク／スピーカー
カメラ
外部デバイスとの接続（Bluetooth）
光検知
NFC
スマートフォンにはこれらの機能が元々備わっているわけです。
これらの機能とアプリを使いこなすことで、地図上でナビが使えたり、会社の行き帰りにゲームができたり、家電と接続してスマホから作動させたり、あるいは他デバイスのデータ管理もできたりします。
これらの機能によってモバイル（スマホ）は、ユーザーに新たな利便性を提供できるようになりました。PCやタブレットにはないデバイスを超えた可能性が存在するのは明らかですよね。
少しまとめさせてもらうと、
「モバイルファースト」というコンセプトが推奨しているのは、こういったモバイル独自の限りない可能性を、限られたスクリーンサイズや通信パフォーマンスしかないモバイル（スマホ）というデバイスで最大限使いこなせるように、デザイナーやコンセプターが作り上げていかなければならない。
という事かなと思います。
そこまで考えた上で今一度、ルーク氏の言葉を読んでみましょう。
モバイルファーストの実践とは、モバイルインターネットの爆発的な成長にただ備えるだけではない。ユーザーが本当に必要とすることにフォーカスすることで、これまでできなかった方法でのイノベーションが可能になる。
かなり簡潔にまとめてあるので、すっと読み飛ばしてしまいそうですが、実は相当に深い意味が込められていることが伝わって来ませんか。
スマホのユーザが爆発的に増えたからスマホデザインを重視してスマホのデザインから作りはじめようよ！、、、でないと流行から遅れるね。でもスマホがなくなったら、「ウォッチファースト」？とか名前変わったコンセプトが出るのかな。
とかそういう話ではないことを、確認がてらに覚えておいてもらえたらと思います。（まあそんな軽い概念であれば、ここまで世界中に広がりはしないわけですが）
＞＞次ページ 改めて知っておきたい「レスポンシブWebデザイン 」
2.レスポンシブWebデザイン
レスポンシブWebデザインについては、ここ1、2年で知らない方はいなくなったでしょうけど、軽く説明させてもらいますね。
パソコン・スマートフォン、タブレットなど、デバイスに応じて最適化したレイアウトを表示させるデザイン手法で、ブラウザの横幅サイズを判断基準にしてCSSを切り替えて表示させます。1つのHTMLでの管理が出来るため、サイト完成後の修正やメンテナンスには効率的ですが、複数のデバイスに対応するため、設計や構築に時間がかかったりしますし、データ的にもデバイスの中で一番容量の重いものを読み込んでいるので、表示に時間がかかる時があります。
webデザインの制作に関わってらっしゃる方はよくご存知でしょうけど、そうでない方はわからない方もいるかもしれませんので、もう少し具体例など上げてご説明しましょう。
この記事をスマホで見てくださってる方が、そのまま上記のURLをスマホでご覧になれば、まさに「縦一列のレイアウトでスマホ用に見やすくデザインされている」と感じるでしょう。
しかし、今PCでメルマガを読んでくださってる方が、このサイトをPCでご覧頂くと、「季節のみどころ」の部分など4列にレイアウトされ、PCに丁度良いデザインとして見えてくるはずです。
このように、同じHTMLからデバイスごとに（表示ブラウザの横幅により）スマホ用とPC用のCSSを切り替えて表示して、ユーザーがどんなデバイスを使ってても対応できるようにしているわけです。
PCで「星のや」のサイトを見ている方はブラウザの横幅を、スマホの横幅程度に横幅をぐぐっと狭めてみてください。
「季節のみどころ」で4列にレイアウトされた写真が、ある横幅サイズのポイントで1列（カラム）に並んでいくのが確認できるはずです。簡単に言えば、こういう形式のデザインを、レスポンシブWebデザインと呼ぶわけです。
デバイスが複数存在し、スマホやタブレットなどの使用者が増加している今現在は、レスポンシブWebデザインの流れはしばらくは続くでしょう。
＞＞次ページ あくまでも暫定的手法である「レスポンシブWebデザイン」
ただ、どうでしょう？ 上で書かせてもらった記事を読んでいただき、「モバイルファースト」のコンセプトをしっかりと理解された読者の皆さんなら、何か「物足りない」と思いませんでしょうか。
PC・タブレット・スマホ以外に新しいデバイス出たらどうするの？ なんて素朴な疑問が湧いてきませんでしょうか？
ここで声を大にして言わせてもらいたいのは、レスポンシブWebデザインは開発途中のデザインであり、最終形には到達していない、暫定的なデザイン手法であるということであります。そしてこのことを忘れないようにしてください。
まあこのレスポンシブWebデザインについては、単純にひとつの「便利なデザイン手法」と捉えてもらっておいても構わないかと思います。
実際、テーブルコーディングの時期から、Webデザインに関わらさせてもらってる僕などからすると、多様化するデバイス向けのコンテンツ制作に関して、制作者側が抱える「更新作業の効率化」を解決するために、開発された苦肉のデザイン手法、としか見えないこともありますし、それでスッキリと丸く収まったという感覚もあるんですが（笑）
もちろんそれは、デバイスごとにHTMLを用意していた制作者側からすると、大変ありがたいソリューションなんですけど。実際それぞれのデバイス表示の最大公約数的に、用意されたデザインがユーザーにとって本当に最適なのか？という点であったり、デメリットも幾つか残ってはいるのです。
そしてもっと大きいポイントとして、「モバイルファースト」というコンセプトで提唱されていた「ユーザーが本当に必要とすることにフォーカスすることで、これまでできなかった方法でのイノベーションが可能になる」という部分は、「デバイスごとに最適化した画面表示を提供するだけ」のレスポンシブWebデザインでは、とても到達できない点であることは確かなようです。
では、レスポンシブWebデザインの次に来るもの、もっと進んだデザインの手法・考え方は何でしょうか。
3.アダプティブデザイン
アダプティブデザイン？ 多分まだまだ聞き慣れない目新しい言葉ではないでしょうか。
この言葉の定義はまだまだ定まっていない所があって、ネット上でも色々な意見が飛び交ってます。それだけ新しい考え方でもあり色々な可能性も秘めている考え方だと思います。
まず「アダプティブデザイン」には少なくとも2つの意味があります。
A. アダプティブWebデザイン
B. アダプティブデザイン
まことにややこしいですがこの2つの定義があり、今回このメルマガで主に書かせてもらいたいのはBの方です。
Aについては、もうひとつの意味と区別をつけやすくするため「アダプティブWebデザイン」と呼ばせてもらいます。2で書かせてもらった「レスポンシブWebデザイン」と非常に似ていて、ブラウザの横幅サイズを判断基準にして違ったレイアウトが表示されます。
ただ決定的にレスポンシブWebデザインと違うのは、レスポンシブWebデザインのように一つのHTMLソースを使うのではなく、デバイスの横幅サイズのブレークポイントごとに、最適化した別のHTMLを用意する、ということです。
こう書くと、ひとつのHTMLを更新すればPCもタブレットもスマホも更新できるレスポンシブWebデザインの方が優れているようですが、視点を変えてみればアダプティブWebデザインの方が、レイアウト調整に限界があるわけでもなく、無駄な非表示要素を読み込む必要もないので、読み込みも速くなるという利点もあります。
「あらゆるデバイスに対応」というポイントで見れば「レスポンシブWebデザイン」、「ブレークポイントに特化した最適化」というポイントで見れば、アダプティブWebデザインという感じなのではないでしょうか。
このようにレスポンシブwebデザインのように、デバイス横幅サイズに対応して表示するものを変える、というデザイン手法のことをAの「アダプティブWebデザイン」と呼んでいます。
今回主に取り上げたいBの「アダプティブデザイン」となどんなものかと言いますと「デバイスだけでなく、ユーザーがインターネットを使ってる時の環境、いつユーザーがそのコンテンツを利用するのか？ どこで利用するのか？ などに合わせてコンテンツを用意しよう」という考え方です。
＞＞次ページ ウェアラブルデバイスと連携する「アダプティブデザイン」
ユーザーの環境によって、提供するコンテンツ自体を変えてしまうオーダーメイド的なデザインやマーケティングの考え方であるという点で、これはまさに「アプリ」に合った考え方でしょうし、最近さかんに開発が行われている「ウェアラブルデバイス」とも連携しているコンセプトとも言えます。
「ウェアラブルデバイス」とは、「AppleWatch」や「Google Glass」のように体にまとうデバイスであり、スマホ以上に機能性を獲得しているメディアと言えます。
例えば、少し前に「開発は失敗だった？」と言われている「Google Glass」については、まだ次世代のモデルの開発は進められているとも言われ、様々な実験はされてるようです。「Google Glass」を使った研究プロジェクト「Project Glass」の動画を見ると、例えばユーザーが本屋に行くと、「Glass」がユーザーが探している本のあるコーナーに、誘導してくれたりします。
また街中で気になるものがあれば、写真に撮ってすぐに友人にメールで送ることもイメージしているようです。
「Google Glass」については、なかなかにぶっ飛んだUIデザインであるようにも思えますが、かなり極端な例としては「アダプティブデザイン」とはこのようなデザインです。
ユーザーがどこに居るのか？何をしているのか？等に合わせたコンテンツが用意されるというイメージです。
「アダプティブデザイン」は、行き着くところまで行くとAI（人工知能）までいってしまい、SFの話になってしまいそうなんで、身近な例を書かせてもらいますと、例えばカーナビのデザインなどわかりやすいかと思いますが、普通に昼間走っている時と夜間か、暗いトンネル内を走っている時、センサーでそれを察知し振り分け、目が眩まないようなデザインに変えたりします。
またGAPのWebサイト（アメリカ）では、自宅にいるときはオンラインショップにつながり、実際にお店にユーザーが来た時はショップアシスタントにつながったり、店舗地図が表示されたりします。
こんな風に、ユーザーの環境によってそもそも用意されるコンテンツが違うなど、そこまで踏み込んでいるのが「アダプティブデザイン」と言えるでしょう。
何か「モバイルファースト」というコンセプトを一番体現しているデザイン方法・デザインの考え方はこの「アダプティブデザイン」ではないだろうか？……などと今回の記事を書かせてもらって、あらためて感じたりしたのですが、今ユーザーに求められているものはどんな事なのか？ あるいは半歩先の未来にユーザーに使われるデバイスは？ そういう環境で「デザイン」はどんな形であるべきか？
そんな事を考え続けていくともう「Webデザイナー」＝「Webサイト・Webページをデザインする人」という図式は完全に崩れていて、アプリからWebページからその中間まで、何でも作っていけるようにしていかないとならないな、、なんて今更感じたりしました。
短くまとめるつもりですが、かなり長くなってしまいました。最後まで読んでいただいて有難うございました。
『プロが教える「美大いらずのデザイン講座」』
美大で教えているようなデザインの基礎を、初心者の方にもわかりやすく説明していきます。デザイン史やプロの現場の話も交え色々な角度からデザインについて書かせてもらいます。デザイナーになりたい方やただデザインに興味のある方等に読んで頂いてます。
≪最新記事を読む≫