コラム

コラム

レスポンシブwebデザインとは

現在スマートフォンの急速な普及が行われ、街中ではフューチャーフォンやガラケーを見ることの方が珍しくなってきました。
これにより、スマートフォンからwebサイトを見る方も増えてきたのではないでしょうか?
外出先でのお店の検索、自宅でのちょっとした調べごと等、スマートフォンを利用することが多いと思います。
スマートフォンを利用しPCサイトを閲覧しているとすごく見にくかったり、文字が小さく、拡大して閲覧しても、サイトが使いにくいと思います。

そんなユーザーの悩みを解決するレスポンシブwebデザイン(RWD)を紹介したいと思います。

les01

RWDとは、2010年マサチューセッツ州のWebデザイナー、Ethan Marcotte(イーサン・マルコッテ)氏がテックブログ「A List Apart」で「Responsive Web Design」として紹介したマルチデバイス対応のWebサイト制作手法です。
レスポンシブという言葉は、建築用語の「Responsive Design」(変化できる建築デザイン)から引用され「Responsive Web Design」と命名され、世界へ広まってきました。

マルチデバイス対応が必要に

現在webサイトはPCから閲覧するだけではなく、スマートフォンやiPad等のタブレット端末、様々なデバイスで閲覧されます。
スマートフォンから閲覧された場合、PC向けサイトが表示されると文字が読みづらく、ユーザーは離れて行ってしまいます。
そのため、webサイトの閲覧環境によりレイアウトを変更するマルチデバイス対応が必要となります。

les02

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

RWDとは1つのHTMLファイルを3つの技術で制御し、ブラウザの幅に合わせ、Webページのレイアウトを変更する手法です。
技術的には、
「Media Queries(メディア・クエリー)」
「Fluid Grid(フルード・グリッド)」
「Fluid Image(フルード・イメージ)」
という3つの技術を使用して実現します。

PCからの閲覧はPC向けのレイアウトへ、iPad等のタブレットからの閲覧はタブレット向けのレイアウトへ、スマートフォンからの閲覧はスマートフォン向けのレイアウトへ変化します。

従来の手法では、デバイス毎にレイアウトの違うファイルを複数用意し、使用してきたと思います。
しかし、現在端末数が増加し、各端末への対応は困難になりつつあります。
現時点で対応できたとしても、今後の更新作業やコンテンツ管理によりコストも膨れ上がる一方です。

そこで、レスポンシブウェブデザインを導入することにより今後のコストを抑え、各デバイスへの対応、集客率のアップへもつながります。

最新のエントリー

企業イメージを向上させ、目的を達成するWebサイト制作を

Webサイトをただ作るだけでは意味がありません。適切なブランディングや戦略、ユーザーの立場に立ったデザインやWebソリューション
などを用いて、すべては企業の目的を達成するためにクレビスファクトリーは全力でお客様の協力をいたします。