レスポンシブwebデザイン

あらゆるデバイスで美しく表示され、何度でも再利用できるコンテンツを作成します。レイアウトやテキストサイズ、コンテンツ、ナビゲーション、画像などの要素が、顧客のデバイスに合わせて自動的に調整されます。


あらゆるデバイスで一貫したwebエクスペリエンスを提供

PCできれいに表示されるwebページが、モバイルの画面では崩れてしまったという経験は誰にでもあるでしょう。モバイルに限らず、webサイトがあらゆるプラットフォームとデバイス向けに最適化されていないと、オンラインエクスペリエンスの一貫性が損なわれ、フラストレーションを感じた顧客が離れていってしまうリスクがあります。顧客はワンクリックで競合他社のサイトに移動できてしまうのです。

レスポンシブwebデザインなら、あらゆるデバイスに自在に対応できるwebページをデザインできます。つまり、どのプラットフォームでも顧客を同じように引き付けるwebサイトを構築できるのです。レスポンシブwebデザインでは、異なるデバイスの様々な画面サイズと機能に合わせて、レイアウトやテキストサイズ、コンテンツ、ナビゲーションツールが自動的に再構成されます。webサイトを公開する前に、様々なデバイスでプレビューをおこない、パフォーマンスを最適化できます。デバイスごとの仕様への対応が自動化されるため、コンテンツの作成がスピーディになり、時間を節約できます。

次のような機能があります

可変グリッドの作成
コンテンツを最適に配置するための土台となる可変グリッドを作成できます。可変グリッドは、デバイスの画面サイズに合わせてスムーズに調整されます。

特定のデバイスを対象としたプレビュー
タブレットやスマートフォンなど、プレビューをおこなうデバイスを選択して、それぞれのデバイスでページがどのように表示されるかを事前に確認できます。

あらゆるコンテンツのサイズを自動調整
レスポンシブwebデザインでは、テキストのレイアウトやサイズが調整されるだけではありません。表示されるコンテンツに合わせて画像サイズも自動調整され、画像のはみ出しを心配する必要がなくなります。

画像の最適化
通信速度や画面サイズ、DPIなどにもとづいて、あらゆるエクスペリエンスに最適なサイズの画像を提供できます。

レスポンシブwebデザインの詳細

モバイルwebデザインの詳細

メディアクエリ、アダプティブ画像、可変グリッドなどを使用して、一貫性のあるwebエクスペリエンスを構築する方法をご覧ください。 

さらに詳しく

様々な画面サイズに対応

日々新しいデバイスが生まれ、異なる画面サイズや仕様が増え続ける現状に賢く対応する方法をご覧ください。

さらに詳しく(英語)

関連機能

レスポンシブwebデザイン

レイアウトやテキストサイズ、コンテンツ、ナビゲーション、画像などの要素が顧客のデバイスに合わせて自動的に調整され、チャネルをまたいで無制限に再利用できるwebデザインを実現します。

スタイルシステム

あらゆるコンポーネントやページをまたいでスタイルとデザインを標準化します。バックエンドの開発は必要ありません。あらかじめ定義した複数のバリエーションの中から、希望のスタイルを選択するだけで、フォントやカラー、フォーマットなどを瞬時に適用します。

すぐに利用できるコンポーネント

パンくずリスト(階層リンク)、フォーム、ページナビゲーション、ティーザー、検索など、後方互換性を備えた標準装備のコンポーネントを使用してページを作成し、制作者と開発者の時間を節約します。

Adobe Experience Managerがお客様のビジネスにどのように役立つのかをご案内します

Adobe Experience Managerがお客様のビジネスにどのように役立つのかをご案内します。