用語集索引

デジタル用語事典

レスポンシブwebデザイン (RWD)

レスポンシブwebデザインとは、様々なデバイスやスクリーンサイズをまたいで一貫した品質のwebページを作成することです。

ポイント

  • レスポンシブwebサイトは、顧客がどのようなデバイスからアクセスしても見た目のよい、機能的で使いやすいサイトです。
  • 消費者は、1日に何度も異なるデバイスに切り替えます。別のデバイスからアクセスしたときに、サイトが遅くなったり、操作しにくくなったり、見た目が悪くなったりすると、消費者はすぐに興味を失ってしまいます。
  • webデザイナーは、コンポーネントレベルからレスポンシブデザインと機能性を重視して、レスポンシブ対応をプロセスやシステムに組み込む必要があります。

目次


レスポンシブwebデザインの様々な疑問に、Josh Souterが回答します。Joshは、アドビのエグゼクティブクリエイティブディレクターで、アートディレクションとクリエイティブリーダーシップの分野で16年以上の経験を積んできました。現在、アドビでは、UX、デザイン、コピーライティングの専門家から成る優秀なチームを率いています。 

レスポンシブwebデザインとは何ですか?

レスポンシブwebデザインとは、様々なデバイス、ウィンドウ、スクリーンサイズに対して、適切にレンダリングされるwebページを作成することです。レスポンシブデザインのwebサイトは、どこでどのように表示しても一貫性が維持されます。優れたレスポンシブwebデザインは、デスクトップとモバイルで変化するのはスクリーンサイズだけではないことを認識しています。消費者の考え方も変わります。

なぜレスポンシブwebデザインが重要なのですか?

webデザイナーが、オーディエンスとその心理、プラットフォームを考慮していない場合、webサイトは使いにくく、機能性に欠けたものになります。異なるデバイスからアクセスしたときに、サイトが遅かったり、操作しにくかったり、見た目が悪かったりすると、消費者はすぐに興味を失ってしまいます。例えば、大きなデスクトップPCのスクリーンを対象にデザインしたエクスペリエンスは、モバイルデバイスで表示すると、文章は読みにくく、写真を見るには煩わしいほどスクロールする必要があります。今日の消費者は一日中、様々なデバイスでコンテンツを表示し、時には同時に見ていることもあります。そのような行動や習慣に合わせてwebコンテンツを計画しなければ、webサイトは成功しません。

webサイトをレスポンシブ対応にするにはどうすればよいですか?

レスポンシブ対応は、webページや特定のマーケティングキャンペーンだけでなく、プロセスやシステムに組み込む必要があります。レスポンシブ対応を単発のプロジェクトだけで考えてしまうと、webデザイナー、エンジニア、コンテンツ制作者の間で作業が重複して、チームの作業量が3倍になってしまう可能性があります。かつてwebデザイナーは、デスクトップPCのスクリーン向けのwebサイトデザインから始めていました。それから、モバイルデバイスやタブレットでどのように動作させるかを考えたのですが、そのような作業量は、アジャイルな組織では維持できません。

それよりも、webデザイナーは、コンポーネントレベルでのレスポンシブデザインと機能性を重視するべきです。商品ページ全体ではなく、商品ページの見出し部分をレスポンシブにする方法を考えます。カード、カルーセル、CTAについても考慮します。それぞれのコンポーネントが、異なる表示幅や画面解像度で効果を発揮するためには何が必要かを考えます。こうしておけば、デザインチームがページ制作の依頼を受けたときには、コンポーネントはすぐに使用できる状態になっているため、チームは特定のページコンテンツに集中して、ユーザーエクスペリエンスを完成させることができます。

コンテンツレベルでは、様々なデバイスをまたいで、オーディエンスの習慣に合わせてデザインを最適化できます。モバイルユーザー向けの購入を促すCTAは、ダウンロード可能なアプリへの直接リンクを提供します。デスクトップPC向けの場合は、デスクトップアプリのダウンロードリンクの他に、補助的なCTAとしてモバイルデバイスやタブレット向けのオプションの提供などが考えられます。

レスポンシブwebデザインとアダプティブwebデザインの違いは何ですか?

レスポンシブwebデザインは、デバイスごと異なるスクリーンサイズ流動対応します。利用者表示領域選択したサイズ合わせ、CSSメディアクエリ使用して様々スタイル調整します。

一方、アダプティブデザインは、ブレイクポイントwebサイトコンテンツデザイン最適エクスペリエンスなるポイントもとづいて静的レイアウト使用します。ブレイクポイントは、一般ウィンドウスクリーンサイズよって決定されます。アダプティブデザインは、利用者デバイス現在スクリーンサイズ検知し、最も一般スクリーン合わせてあらかじめデザインされたレイアウト読み込みます。しかし、利用者ブラウザーウィンドウサイズ変更するなど変更行った場合には適応できません。

レスポンシブwebデザインは、アダプティブwebデザインでは考慮されないあらゆる中間サイズ考慮するため、柔軟優れていますが、その分、実装難しい場合あります。アダプティブデザインは、3つ異なるバージョンwebサイト構築するようもので、利用者選択よってどのバージョン正しくない場合あります。

レスポンシブwebデザインの主な構成要素は何ですか?

最初に検討するべき要素は、様々なレスポンシブデザインです。次に、その作成にどのようなテクノロジーを使用するかを決定します。おそらく、FlexboxコンテナやCSSグリッドコンテナなどのツールを利用する必要があるでしょう。デザイナーは、利用者が業界標準のブレイクポイントから脱却しつつあることに気づいており、対応する時期に来ています。

ふたつ目の要素はデータです。定量的なデータと定性的なデータの両方を集めることに投資します。定量的なデータは、何人がサイトを訪れ、どのくらいの金額を商品やサービスに費やしているかを判断するのに役立ちます。また、顧客との会話から得られる定性的なデータは、顧客の行動や期待を理解するのに役立ちます。

3つ目の要素は、各webページのクリエイティブコンテンツです。先進的な企業では、レスポンシブコンテンツをデザインに取り入れています。例えば、モバイルデバイスでwebページを見たときに、ページ上の文言が変わることがあります。ページをスクロールしやすくするために、書かれている内容を減らす場合もあります。

レスポンシブwebデザインにはどのようなメリットがありますか?

レスポンシブwebサイトは、マーケターにとって、顧客体験を最適化するための新たな手段になります。また、サイトのパフォーマンスも向上します。レスポンシブ対応が進むと、直帰率が低下します。様々な視点や顧客の心理や習慣に合わせて最適化することで、エンゲージメントが向上します。

顧客がどこにいて、何を必要としているのかをブランドが考慮することで、顧客にメリットが生まれます。顧客は、仕事中にデスクトップPCを使用しているときはリッチでインタラクティブな体験を、モバイルデバイスでは、ページの読み込みが速く、小さなスクリーンでもタッチしやすいインターフェイスを求めています。

レスポンシブwebデザインにはどのようなツールが利用できますか?

Adobe Experience Managerは、レスポンシブwebシステム構築するため最先端ツール備えています。デザイナーは、レスポンシブ対応エクスペリエンスフラグメント構築でき、マーケターコンテンツ制作者は、レスポンシブデザイン意識することなく、公開したいフラグメント選択するだけ済みます。また、画像最適機能備えています。

Adobe XDは、レスポンシブwebエクスペリエンスプロトタイプ構築し、その効果関係者アピールするのに適したツールです。Adobe XDアプリケーションプログラムインターフェイス(API)利用すれば、デザイナースマートフォンプロトタイプ表示して、顧客同じようやり取りできるようなります。また、Adobe XDからAdobe Experience Manager直接アセット書き出すこと可能です。

Adobe Targetは、マーケターソフトウェア様々デバイステストして最適するためのツール提供します。

レスポンシブwebデザインは今後、どのように進化していきますか?

ヘッドレスコンテンツ管理システム(CMS)中心したイノベーション期待されています。マーケターは、新しいテクノロジーよって、フロントエンジニアパブリッシャー仲介必要せずに、クリエイターから直接コンテンツ集め、レスポンシブスタイル適用し、レスポンシブwebサイト出力できるようなるしょう。


CXM/デジタル変革資料に関するおすすめの資料

CXM/デジタル変革関連資料

デジタルを活用し、CXM(顧客体験管理)を実現するために役立つ、さまざまな資料をご紹介します。

アドビ製品を活用しましょう

Adobe Experience Cloudを利用して、
新たなマーケティングの機会を生み出しましょう。