2011年8月に調査された、モバイル端末に対応したウェブサイトの割合は、全体の7.12%でした。2012年8月に行われた調査では、11.78%にまで増えてきています。
新しいWebデザイントレンドに、あらゆるデバイス端末表示に対応するレスポンシブWebデザインがあります。最近モバイル化された、Webサイトの多くが取り入れているテクニックですが、まだまだ新しい技術ということもあり、ユーザー間でも利用については議論されているのも事実です。
海外デザインブログWebdesigner Depotで、レスポンシブデザインのメリットとデメリット、作成する際のポイントをまとめたエントリー「The Opportunity and Challenges of Responsive Design」が公開されていたので、今回はご紹介します。
今後レスポンシブデザインを利用してみようと考えている方は、参考にしてみてはいかがでしょうか。
詳細は以下から。
レスポンシブデザインのメリットは？
[dropcap1]1[/dropcap1]
メンテナンスが楽
レスポンシブWebデザインは、ひとつのレイアウトを変更するだけで、全デバイスの表示に対応してくれます。たとえばバグや修正があった場合も同時にアップデートされます。
BreakingNews.comでは、画面の大きさをモバイルサイズに変更すると、イメージ画像など読み込み時間のかかるファイルをあとで読み込む様に設定されています。
ひとつのウェブサイトに着目することで、新しいテクニックも試したり、メンテナンスのしやすさも改善されます。
[dropcap1]2[/dropcap1]
一貫性のあるデザイン
デスクトップ、モバイル端末によるデザインが統一されているので、覚えてもらいやすい一貫性のあるブランドイメージを作り上げることができます。
Spingotdesign.comでは、スクリーンサイズごとにデザインを統一しながらも、ユニークなアニメーション、エフェクトで4つのサークル上のパーツが切り替わり、ユーザーをビジュアル面で楽しませてくれます。
[dropcap1]3[/dropcap1]
親切、安心設計の操作性
レスポンシブデザインは、たとえばパソコンからよくチェックするサイトを、iPhone5などのモバイル端末で見たときに、デザインが統一されていることで、ユーザーはいつも通りにページを閲覧することができます。
ユーザーが予期している、知っている様な操作感を実現することが、ポイントとなります。SmashingMagazine.comは、どのデバイスで閲覧したときも、ユーザーが迷わないユーザービリティーを実現しています。
[dropcap1]4[/dropcap1]
リダイレクト設定の必要なし
ひとつのウェブデザインで運営するということは、これまで携帯やiPhoneなどのデバイスごとに異なるURLを用意したり、各デバイスの互換性などを考える必要がなくなります。
たとえばメールマガジンなどを発行する場合、ユーザーがモバイル端末から開く可能性が高くなります。そんなときに紹介するコンテンツのURLを統一して掲載することができます。これでユーザーはモバイル用URLからデスクトップ用URLに切り替える、、などの作業が不要となります。
[dropcap1]5[/dropcap1]
現在のページ読み込み速度に対応
最近はインターネット回線もますます改善されており、WiFiなどのインターネット環境がある場所では、大きいサイズのデータ、たとえば巨大イメージのアニメーションなどでも、個人差はありますが特に問題なく閲覧することが出来るようになっています。しかし3G, 4G回線などでページを読み込むには、少しでもデータサイズが小さい方が、表示も早くユーザーにもうれしいです。
TheBostonGloge.comでは、モバイル端末の画面サイズに合わせて、コンテンツ内容を入れ替え、圧縮されたイメージ画像を読み込むように設定しています。
レスポンシブデザインのデメリットは？
[dropcap1]1[/dropcap1]
開発時間の長さ
レスポンシブデザインの、もっとも大きなマイナス点のひとつは、デザイン構築時間の長さです。通常のHTMLだけで組まれたレイアウトと比べると、一目瞭然です。
特に既存サイトをレスポンシブ化するのは、ゼロから作成するときよりも制作時間がかかってしまうことが多いです。
[dropcap1]2[/dropcap1]
異なるデバイスの異なる利用方法
レスポンシブWebデザインが、ひとつのシンプルなウェブサイトで、全てのデバイスで平等にレイアウトできるというのは、言い過ぎかもしれません。ユーザーはそれぞれ特定の目的やゴールに辿り着くことも前提に、あなたのページを閲覧しています。ユニークな仕掛けや使い方を望んでいる訳ではありません。
列車などの交通機関のWebサイトは、あまりレスポンシブデザインに向かないかもしれません。たとえばひとりのユーザーは、週末旅行の格安チケットを探しており、もうひとりのユーザーは、まさに今から列車に乗り込むために、駅のプラットフォーム番号を探しています。どちらも全く異なる目的で、同じひとつのWebサイトを見ているのです。
Choicerespoinse.comは、デスクトップ版では運営サービスの細かい詳細を一度に確認できるようになっており、モバイル版では特定のサービスに特化するように考慮されています。
[dropcap1]3[/dropcap1]
異なるデバイスでの「デザイン美」の違い
デスクトップで見るときには必要なデザインパーツも、モバイルから検索する場合には、読み込み時間がかかるだけで、全く不要の場合があります。
Forefathersgroup.comは、デスクトップ版では美しいグラフィックとアニメーションエフェクトが魅力的なヘッダーを利用していますが、モバイル版ではシンプルに、ナビゲーションメニューのみを配置したレイアウトへと変更されているのが分かるかと思います。
何から表示するべきか、コンテンツの優先性を考えたWebデザインを構築する必要性を感じます。
[dropcap1]4[/dropcap1]
Internet Explorer 8で動かない
レスポンシブデザインは、メディアクエリ(@media)テクニックを利用して、各ユーザーのディスプレイサイズを判断し、レイアウト表示しています。
問題点は古いブラウザー、特にInternet Explorer 8以下はメディアクエリを認識していません。2012年となった今でも、インターネットユーザーの14%がIE8を利用しています。しかしIE8以下にも対応するレスポンシブデザインの作り方はいくつかあり、IE用に全く異なるスタイルシートを用意したり、モバイルレイアウト優先でのメディアクエリの読み込みなどもあります。
[dropcap1]5[/dropcap1]
拡大イメージ写真のディテールの低さ
もうひとつのレスポンシブデザインの弱点は、イメージ画像の拡大縮小です。ある程度サイズの大きなイメージ画像を利用することで、綺麗に表示することができますが、読み込み速度の点ではマイナスです。
スクリーンサイズを中心とした、コンテンツ作成しかできなくなることが、本当の弱点かもしれません。
OliverRussell.comでは、イメージ画像の拡大が必要な場合は、フルスクリーン画像で背景デザインの様に利用したモデルケースです。
この拡大イメージ写真の問題に付いては、今後さらに良い改善テクニックが公開されることが望まれます。
[dropcap1]6[/dropcap1]
ナビゲーションメニュー充実度の低さ
最近のWebサイトやブログでは、どれもナビゲーションメニューが取り付けられるようになり、ページ閲覧の際に重要な役割を担うようになっています。特に巨大サイトや、大量のコンテンツがあるサイトなどではなおさらです。
Starbucks.comでは、モバイル版でページを表示すると、左上に小さなアイコンマークが出現し、それをクリックすることでナビゲーションメニューがドロップダウンで表示されるように工夫されています。
モバイル端末では、デザインできるサイズ、範囲も狭くなるので、ユーザーの操作性を考慮したナビゲーションメニューの配置が重要になります。
レスポンシブデザインを始める前に
知っておきたいこと
[dropcap2]1[/dropcap2]
下準備が重要です
レスポンシブデザインの作成を開始する前に、Webサイトの枠組みフレームワークをつくり、Photoshopで詳細をデザインしましょう。入念な下準備が、思い通りのレスポンシブデザインをデザインする鍵となります。
各デバイスで表示したときに、どのようなサイトを構築したいのか、を念頭に入れてデザインしましょう。特にiPhoneなどのモバイル端末では、コンテンツの優先性を考えて作成するようにしましょう。
[dropcap2]2[/dropcap2]
既存サイトのレスポンシブ化はやめましょう
あらかじめスタイリングされた、既存サイトをレスポンシブ化するのは避けた方が良いでしょう。もともとCSSによるスタイリングなどがされている場合が多く、手間もかかってしまいます。
デザインパーツごとに再利用、リサイクルする方法で、既存サイトのイメージをうまく流し込みましょう。
[dropcap2]3[/dropcap2]
ゼロから作るのはやめましょう
レスポンシブWebデザインを作成するのに役立つ、ツールやCSSフレームワークなどが、たくさん公開されています。さまざまなスタイリング設定がされています。無料配布フレームワークを利用することで、制作時間の短縮にもつながります。自分に合ったCSSフレームワークを見つけることが、大事になってきます。
Foudation 3は、最近公開されたばかりの新しいレスポンシブデザイン作成用CSSフレームワークです。アップデートも頻繁に行われており、Foudation3の使い方に関するグループコミュニティーも充実しています。 主要フレームワークの仕様に関する比較表は、以下を参考にどうぞ。
[list type=”star”] [li]Responsive CSS Framework Comparison: Bootstrap, Foundation, Skeleton – responsive.vermilion.com[/li] [/list]
[dropcap2]4[/dropcap2]
テスト、テスト、テスト
特に目新しいことではありませんが、あらゆるデバイスを使ったレイアウト表示確認が重要になります。何度も確認することで小さなバグを修正して、究極のレスポンシブWebデザインを作成しましょう。
レスポンシブWebデザイン対応、シンプル系WordPressテーマ素材20個まとめ
WordPressでのWebサイト運営を検討されている方は、高品質プレミアムテーマ素材の購入も選択肢にいかがでしょう。
参照元サイト : The Opportunity and Challenges of Responsive Design – WebdesignerDepot.com
