ページトップへ移動

Responsive Web Design

 急速に普及するスマートフォン、タブレット端末。最近ではipadやNexus7を初めWindow8などタブレット端末の需要も増えつつあります。

 

 パソコンなどのディスクトップ用に作成したこれまでのホームページでは、スマートフォンのような小さな端末で閲覧する場合非常に見ずらいため、コンバージョン率の低下(商品購入や資料請求などの成果)や情報の開示が効率よくおこなえません。

 そこで、スマートフォン・タブレット専用のサイトを作成したり、それらを自動的にリダイレクトするなど対応してきました。

 

 当然ながら専用サイトを作るので、制作コストもかかり、1つの更新作業においても2つ以上のサイトを修正したり、ランニングコストの増加や情報の不一致など様々な問題がありました。   現在では、モバイル環境の通信速度も飛躍的に向上し、それなりの情報量でもストレスなく閲覧できるようになりつつあります。そこで、今注目されているのがレスポンシブウエブデザインです。respon-det1 これまでは1つのページに対してスマートフォン用のHTML、タブレット用のHTMLなどそれぞれ用意していました。レスポンシブWEBデザインでは1つのページに対して、特にHTMLを変更することなくレイアウトやデザインを指定するCSS(Cascading Style Sheets、カスケーディング・スタイル・シート)でそれぞれのデバイスに対してレイアウトやデザインを指定して最適な表示を行います。

 

 エムプロウェーブでは、レスポンシブウェブデザインを取り入れたホームページの制作を行います。

サンプルサイト

 レスポンシブWebデザインの簡単なサンプルを紹介します。

 

 解りやすくするためサイトの構成は簡略化しています。あくまでも一例ですので実際に適用する場合はそのホームページの目的に合ったデザインでおこないます。

サンプル サイト 説明 URL

本サイト

WordPressサンプル

CSSだけを変更し可変対応を施しました。

本サイト

WordPressサンプル

更新型ホームページを可変レイアウト対応を実施しました。 WordPressを利用した更新型ホームページのサンプルサイトをデバイスサイズでレイアウトを再配置しました。

更新型サンプル

DEMO1・2・3

可変BOXレイアウト。 可変グリッドで構成されたサイトです。DEMO1、DEMO2は1種類のサイズのBOXでレイアウトしています。DEMO3は、さまざまなサイズのBOXをレイアウトします。ブラウザサイズやデバイスサイズによりレイアウトを再編成します。

demo.html

DEMO-device

可変BOXレイアウト。 実用的な3BOXレイアウトで、PC・タブレット・スマートフォンに対して再編成します。

demo-dev.html

 

 レスポンシブWEBデザインに関する、質問・相談やご不明な点などはお問い合わせよりお気軽にお問い合わせください。