レスポンシブWebデザイン×マルチデバイス処理?-Luke Wroblewski記事翻訳

Posted by 角谷 仁 

  • このエントリーをはてなブックマークに追加

”モバイルファースト”の第一人者、Luke Wroblewskiのブログから記事を翻訳してご紹介します。文中にたくさん“デバイスエクスペリエンス”という言葉が出てきます。デバイスエクスペリエンスとは、数あるデバイスを画面サイズや機能性・ユーザーの利用方法、といった括りで分類し、それぞれに向けた専用のサイトを提供すること、と理解して頂ければよいかと思います。
元記事:Which One: Responsive Design, Device Experiences, or RESS?, February 29, 2012

 


 

As more organizations realize they need to invest heavily in multi-device Web designs, the inevitable question of “how” comes up. Responsive Web design, separate sites, or something in between? Here’s how I’ve tried to simplify this decision:
マルチデバイスWebデザインへの投資の必要性を理解する組織が増え、各組織は「どういう方法で対応するか」という避けられない問題に直面しています。レスポンシブWebデザインか?専用サイトを複数作るか?それともその中間の何かか?今回は、シンプルにこの問題を解決できないか考えてみました。

 

 

レスポンシブWebデザイン
レスポンシブWebデザインは、デバイスの画面サイズに合わせてレイアウトを変更するために、メディアクエリを使って可変するグリッドと画像を組み合わせたものです。サイトをクライアント側(デバイス側)の機能に応じて変化させるというものです。

 

レスポンシブWebデザインでは1つのソースコード、URLでウェブサイトを展開することにより、まだ登場していない将来のデバイスも含め多くのデバイスへの対応を可能にします。しかしクライアント側のみのソリューションを使用して画像、動画、サードパーティウィジェットなどを”最適化”することは簡単ではありません。

 

▼レスポンシブWebデザインは下記の場合にオススメです。

・デバイスを横断したレイアウト調整をしたい場合。
・特定のデバイスのための完全な最適化がなくても困らない場合。
・サーバーサイドソリューションが使用できない場合。
・デバイス判定を本当に信頼しない場合。(角谷注:ユーザーエージェントは必ずしも正しいデバイス情報を反映しているわけではありません。)

(Further Information省略)

 

 

デバイスエクスペリエンス
デバイスエクスペリエンス(device experience)とは消費者に対して適切なインターフェースを設計できるように、たくさんあるデバイスごとに”体験”を分類する方法です。”体験”は、デバイスが最も共通的に使われる方法や、デバイスの機能性・制約などが影響します。

 

デバイスエクスペリエンスは、サポートしたいデバイス分類ごとに、フロントエンド設計と開発を必要とします。期待するデバイスに正しい”体験”を届けるにはあるレベルのデバイス判定(通常はサーバー側で行うもの)が必要となりますが、各”体験”は完全に最適化することが可能です。言い換えれば、各クライアントにそれぞれが必要とするものだけを送る、ということです。

 

▼デバイスエクスペリエンスは下記の場合にオススメです。
・それぞれのタイプのデバイスにできる限り最適化したい
・各分類のデバイスに対して完全に異なったUXと機能を提供する能力が欲しい
・デバイス判定には不満がない

(Further Information省略)

 

 

RESS:サーバーサイドコンポーネントを伴うレスポンシブウェブデザイン
ページの一部をサーバーサイド処理するレスポンシブWebデザインです。ページ内の主要な構成要素には、デバイスの分類ごとにサーバーサイドでのレンダリング処理を入れます。この技術を使うことで、一つのテンプレートで全デバイス向けのウェブサイトを定義できます。

 

つまり、このRESS(Responsive Web Design with Server Side Components)によって、レスポンシブWebデザインとデバイスエクスペリエンスそれぞれの課題をクリアし、両者の長所を提供することができます。1つのソースコード、URLでウェブサイトを展開し、なおかつ各クライアントが必要とするもののみを届けられます。この最適化手法はページの構成要素レベルでデバイス判定を必要とするのみです。

 

▼RESSは下記の場合にオススメです。

・デバイスを横断してレイアウトの調整をしたい。
・パフォーマンスを向上させUXを向上させるためにページ構成要素レベルの最適化をしたい。
・デバイス判定をある程度信頼する場合

(Further Information省略)

 

 

————

※角谷注:今回は元記事がとても難しい内容でしたので極力わかりやすく意訳をしているため、原文とは大きく異なります。

 

  • このエントリーをはてなブックマークに追加