コラム
レスポンシブwebデザインとは
現在スマートフォンの急速な普及が行われ、街中ではフューチャーフォンやガラケーを見ることの方が珍しくなってきました。
これにより、スマートフォンからwebサイトを見る方も増えてきたのではないでしょうか?
外出先でのお店の検索、自宅でのちょっとした調べごと等、スマートフォンを利用することが多いと思います。
スマートフォンを利用しPCサイトを閲覧しているとすごく見にくかったり、文字が小さく、拡大して閲覧しても、サイトが使いにくいと思います。
そんなユーザーの悩みを解決するレスポンシブwebデザイン(RWD)を紹介したいと思います。
RWDとは、2010年マサチューセッツ州のWebデザイナー、Ethan Marcotte(イーサン・マルコッテ)氏がテックブログ「A List Apart」で「Responsive Web Design」として紹介したマルチデバイス対応のWebサイト制作手法です。
レスポンシブという言葉は、建築用語の「Responsive Design」(変化できる建築デザイン)から引用され「Responsive Web Design」と命名され、世界へ広まってきました。
マルチデバイス対応が必要に
現在webサイトはPCから閲覧するだけではなく、スマートフォンやiPad等のタブレット端末、様々なデバイスで閲覧されます。
スマートフォンから閲覧された場合、PC向けサイトが表示されると文字が読みづらく、ユーザーは離れて行ってしまいます。
そのため、webサイトの閲覧環境によりレイアウトを変更するマルチデバイス対応が必要となります。
レスポンシブwebデザイン(RWD)とは
RWDとは1つのHTMLファイルを3つの技術で制御し、ブラウザの幅に合わせ、Webページのレイアウトを変更する手法です。
技術的には、
「Media Queries(メディア・クエリー)」
「Fluid Grid(フルード・グリッド)」
「Fluid Image(フルード・イメージ)」
という3つの技術を使用して実現します。
PCからの閲覧はPC向けのレイアウトへ、iPad等のタブレットからの閲覧はタブレット向けのレイアウトへ、スマートフォンからの閲覧はスマートフォン向けのレイアウトへ変化します。
従来の手法では、デバイス毎にレイアウトの違うファイルを複数用意し、使用してきたと思います。
しかし、現在端末数が増加し、各端末への対応は困難になりつつあります。
現時点で対応できたとしても、今後の更新作業やコンテンツ管理によりコストも膨れ上がる一方です。
そこで、レスポンシブウェブデザインを導入することにより今後のコストを抑え、各デバイスへの対応、集客率のアップへもつながります。
CATEGORIES
最新のエントリー
- Webページが更新されない!そんな時に確認したいポイント Windows編
- ランディングページの成果を得るためのA/Bテストのポイント
- 成果を出すランディングページの流れ
- Mplus FontsのWEBフォント使用手順(完全無料)
- 問い合わせが”来ない”企業のホームページの5つの特徴
- ホームページで差別化するためには、敵を知り、己を知る
- ターゲットは3つの視点に分けて設定する
- 今更聞けないGoogle AdWordsキーワードマッチタイプについて
- 「マーケティング」の視点でホームページのデザインを考える
- ただの言葉が企業の力になる!簡単に置き換えれるキャッチコピー24案
- “ユーザー目線”は「仮想の会話」で浮かび上がる
- 成功するHPを作るためには?
- 便利ツール発見(TABLEタグ編)
- WordPressビジュアルエディタ投稿手順
- WordPress 投稿のビジュアルエディタとテキストエディタ
お知らせ
21年12月29日 |
---|
2021年 年末年始の営業について |
20年12月14日 |
2020年 年末年始の営業について |
20年07月16日 |
2020年 夏季休業のお知らせ |
20年04月20日 |
GWの休業期間について |
20年01月06日 |
明けましておめでとうございます! |
企業イメージを向上させ、目的を達成するWebサイト制作を
Webサイトをただ作るだけでは意味がありません。適切なブランディングや戦略、ユーザーの立場に立ったデザインやWebソリューション
などを用いて、すべては企業の目的を達成するためにクレビスファクトリーは全力でお客様の協力をいたします。