モバイル時代だからこそ見直したい パソコンでも見やすいレスポンシブデザインとは

あなたを含め、今日では多くのwebデザイナーがモバイル・ファーストデザインの重要性と、それがいかに劇的にレスポンシブデザインに影響を与えたかをご存知でしょう。

そんな時代だからこそ、今回は「いま流行りの」…ではなくなってしまったものの、より明確に問題を解決できるかもしれないデスクトップ・ファーストの考え方をご紹介します。この考え方では、最初に「デスクトップ版」として必要な機能を全て持たせたフルスペックのwebサイトを作ります。そしてスマホなどの小さなデバイス向けデザインを考える際、できるだけ多くの機能を残したまま軽い動作のインターフェースを作っていくのです。

この「デスクトップ・ファースト」はいま流行りの「モバイル・ファースト」とは全く違うアプローチですが、ハイスペックなwebサイトを作ろうとしているデザイナーさんにはぜひ試していただきたい方法です。

デスクトップ・ファーストにする利点

デスクトップファーストは、スマホが普及する以前の時代で主流となっていた方法でした。

今日では多くの人が時代はモバイル・ファーストだと言っていますが、最初にデスクトップから始めるアプローチにこだわるのは相応の利点があるからです。

デスクトップ・ファーストの利点

　
　・ 全ての主要な機能がひと目で分かる
　・ 最大スペックのデザインを最初にイメージできる
　・デスクトップやラップトップでの閲覧がメインの場合は最適の方法になる

twiterのような近代的なwebサイトを作るなら、モバイル・ファーストの考え方が良いのでは？と思うかもしれません。ですが実は、このようなサイトのデスクトップ版には、モバイル版にはない機能やディティールがたくさん付いています。デスクトップユーザーは他のデバイスに引け劣らないUXを得られるのです。

とはいっても、モバイル・ファーストの考え方も当然重要です。近年ではデスクトップユーザーよりもモバイルユーザーの数が多いですから、モバイルを意識するべきことに間違いはありません。

しかし、ハイスペックなwebサイトはしばしば、強力なデスクトップ向けデザインに依存して作られています。

これはおそらく、デスクトップ・ファーストの最大の利点でしょう。この方法で作ると、ベルやホイッスル —— 通知やポップアップなど様々な機能の全てをひと目で確認することができます。しかし、画面を小さくして表示テストをすると……これらの機能はモバイルでは運用できないと分かって削除せざるをえないことが分かります。

 

モバイル・ファーストデザインの利点はそのシンプルさにあります。モバイルファーストでwebデザインを作る場合、最も基本的な機能から考え始め、次に大きな画面で表示する場合に追加される機能を付け足していくことになります。しかし、この方法では必要な機能を見落として付け忘れてしまう危険性があります。また、webサイトをどのように動作し機能させるかを適切にプランニングすることは困難でしょう。

デスクトップ・ファーストのデザインは、採用したい全ての機能を実装することを前提としています。そこからモバイル向けデザインを考え、機能や表示のどれを省くかを適宜選んでいくことになります。

デスクトップ・ファーストとモバイル・ファーストのうち、どちらか一方の考え方が正しい、ということはないので、両方試してみて作りやすいほうを選ぶのが良いかと思います。しかし、あなたが筆者と同様、ハイスペックなデスクトップ版サイトが大好き！というのであれば、ぜひデスクトップ・ファーストのアプローチをおすすめします。

全てのブラウザに対応させる

デスクトップ・ファースト型デザインにおける一番の難関は、どのブラウザにも対応させなければならない、という点です。

わずか10～20年ほど前はデスクトップパソコンとノートパソコンだけを考えていれば良い時代でしたが、スマートフォンの普及によって市場は大きく変わってしまいました。現在ではiOSやAndroidのほか、Blackberryのような独自のデバイスが数多く登場しています。

かつてのモバイル用ブラウザの大半はcanvasやaudio、videoといった動的HTML要素に対応していませんでしたが、今ではほとんどのモバイル用ブラウザがデスクトップと同等の機能を備えています。昔のようにデバイスの違いから生じるレンダリング問題に悩まされることも少ないでしょう。

最も気にするべきなのは、HTML / CSSのサポートではなくタッチ入力の扱い方です。

モバイルは指先で小さな画面をタッチして操作します。パソコンのマウスのように正確な操作ができない上、画面内に表示できる要素の数も限られてきます。そのため、デスクトップ向けからモバイル向けのデザインを考える場合は様々なブラウザの仕組みとそれらがサポートしている要素や機能、そしてユーザーのタッチ入力をどう扱うかを検討することがとても大切です。

デスクトップからモバイルに落とし込むときのコツ

　・ タップ可能な要素は大きく
　・ 本文のテキストサイズを大きく
　・ JavaScriptライブラリを導入してスワイプが使えるように

あとは、HTML5の仕様を調べてどの要素が対応している/していないのかをブラウザごとに確認しておきましょう。

ブラウザごとに読み込むスタイルシートを変え、タッチやスワイプモーションを利用したモバイルユーザ専用の動作を考えるのも面白いです。TouchSwipeのような無料で使える jQueryプラグインもたくさんあるので、それらを実装してみるのも良いですね。ちなみに、実際にモバイルデバイスを持っていなくても、JavaScriptを使えば表示解像度やOS（iOSやWinモバイルなど）の動作確認が可能です。

まずはあなたのwebサイトに必要な機能のリストを作るところから始めて下さい。CSS3とHTML5の仕様から、実装できないものがないか確認しながら整理していきましょう。

バージョンの古いブラウザで実装できない機能については、対応させたいブラウザを全て調べた上でフォールバックやポリフィルをどうするか検討します。古いブラウザは月日が経てば段階的に廃止されていくので、サポート対応は昔より簡単になっていきます。レンダリングエンジンは共通化が進んでいるため、これはデスクトップ・ファーストの長所と言えるでしょう。

グレイスフル・デグラデーションの必要性

最新のブラウザにしか実装されていない表現を古いブラウザで表示した場合を想定し、代替手段を用意することで表現の劣化を最小限に抑えようという設計の考え方を「グレイスフル・デグラデーション」（Graceful Degradation：上品な劣化）といいます。

これは、いったん最大スペックの機能を持たせたwebサイトを作り、そこからサポートされていないものについては機能を制限または代替していくことになるため、やや高度な技術が必要になってきます。

しかし、今では全ての最新ブラウザがJavaScript、HTML5、canvas要素に対応しているため、事実上ブラウザの違いによる制限はないと言っても良いでしょう。アクセス解析を行えばあなたのサイトの閲覧者が使っているブラウザが分かります。例えば、IE7を使っている閲覧者が1人もいないなら、サポートの必要性を考え直すべきです。

厳密なグレイスフル・デグラデーションではありませんが、この考え方はデスクトップ用に作られたページをモバイル向けへと落とし込む際にも応用できます。

よくある例として、モバイル用のドロップダウン型のメニューの削除が挙げられます。モバイルユーザーにはマウスカーソルを載せて表示させるホバーメニューが使えないため、代わりにトグルスイッチやハンバーガーメニューで置き換えるのです。

デスクトップ・ファーストの使いどころ

それではどんなときにデスクトップ・ファーストを採用すれば良いか、気になっている頃かと思います。この考え方はどんなプロジェクトでも通用する方法なのでしょうか？

答えは半々です。しかし、デスクトップがモバイルより優位となるサイトをデザインする場合は最適な方法と言えるでしょう。

モバイルで得られるUXはごくシンプルですが、デスクトップのUXは動的で細部まで作り込む必要があります。

あなたがデスクトップ向けのデザインから初めて小さく削ぎ落としていく方法がやりやすそうだと感じるなら、デスクトップ・ファーストの考え方をおすすめします。この方法でwebサイトの制作を何度か繰り返すうちにコツを掴んで、そのうち「いつものやり方」になるはずです。長い目で見ても素晴らしい結果に繋がるでしょう。

デスクトップファースト型アプローチの良い例として、デジタルメディアwebサイト Mashableが挙げられます。フルサイズのデスクトップ版は横幅が1440pxもあり、大きなナビゲーションメニューを備えた3カラムレイアウトとなっています。

もちろんMashableはモバイル版も素晴らしいのですが、このデザインはデスクトップ版の制作から始めないと実現できないものでしょう。

デスクトップとモバイル両方のUXを考慮しなければならない、YouTubeのような有名サイトでも同じことが言えます。レスポンシブデザインが当たり前となった今の時代では、「デスクトップで見る」「スマホで見る」といった単純な話ではなくなってきています。

閲覧者はタブレットや小さなネットブックなど他のデバイスを使っているかもしれないし、デスクトップパソコンを使っていてもブラウザのサイズを小さく調節して見ているかもしれません。

デスクトップ・ファーストは最も「大きな」ケースを想定し、その後で考えられる全ての「小さな」ケースに焦点を当てていきます。どのケースでも動作するよう、細かい部分を削ぎ落とし洗練させていくのです。

筆者は毎回、上限を決めやすいデスクトップファーストでwebサイト制作のプロジェクトを構築します。こうすると、幅は最大で何pxにする、グリッドシステムはどれにするか、どんな機能を付けるかといったことを決めるのが簡単になります。

もちろん、あなたが「でもやっぱり、モバイル・ファーストが好きだなあ…」と感じるなら、それはそれでOKです。

誰もが自分のやり方をもっていて、どんな方法も一長一短です。なのでどの方法が絶対に良いと決めてしまうのは乱暴な考え方でしょう。色々試した上で、あなたがやりやすいと感じるお気に入りの方法をぜひ見つけて下さい。