エムタメ!について twitter

マーケティング担当者のために
マーケティングに関わるためになる情報をためていく

  1. TOP
  2. マーケティング入門
  3. いまはやりのレスポンシブwebデザインって、採用すべき?

いまはやりのレスポンシブwebデザインって、採用すべき?

記事公開日:2014/10/21
最終更新日:2018/05/25
いまはやりのレスポンシブwebデザインって、採用すべき?

こんにちは。

スターティアラボ ブログ編集部です。

先日iPhone6が発売され、早速手に入れられた方も多いのではないでしょうか?

同時に画面サイズ違いのiPhone6 Plusも発売されましたが、こちらは従来のiPhoneに比べると画面がとても大きいです。

ユーザーが使う端末の画面サイズも多様化しており、Webサイトでは、それら全てに最適化出来れば願ってもない事かと思います。そこで、特段新しい技術という訳ではないのですが、"レスポンシブWebデザイン"について、今一度メリットをご紹介します。

1.多様化するデバイスへの対応が迫られている時代

図01のように、これまでほぼPCのみを対象に作成していればよかったWebサイトが2010年以降、スマートフォンの普及とiPadの登場によるタブレット端末の普及によって、一気に閲覧デバイスを増やすことになりました。さらに、スマートフォンでは小さな表示は読みづらく、よりシンプルなユーザーインターフェイス(閲覧性)が求められています。

スマートフォン出荷台数の推移・予測

図01 スマートフォン出荷台数の推移・予測(2013年3月予測)

調査・出典:(株)MM総研[東京・港]

2.そこで登場するレスポンシブwebデザイン

レスポンシブWebデザインを簡単に説明しますと、PCはもちろん、スマートフォンやタブレットなど、様々なデバイスのディスプレイ条件に応じて、デザインレイアウトを可変させることができる技術のことです。

レスポンシブWebデザインイメージ

そこで核となる考え方が、「原則として1つのHTMLソースであること」です。さらには、ある特定のディスプレイサイズに特化するのではなく、あらゆるディスプレイサイズにも対応していることなどが挙げられます。

基本的な技術は、フレキシブルに可変するグリッドにより、レイアウトをコントロールするものです。画像などのコンテンツも、フレキシブルに可変するイメージ素材とすることをベースに、メディアクエリによるCSSでデバイスへ最適化させます。閲覧者側の閲覧条件にレスポンス(呼応)し、より最適な表示をさせるという意味になります。

そして、レスポンシブWebデザインの最大の魅力は、たった1つのソースでコンテンツをコントロールすることが可能になることです。その結果、更新やメンテナンスなどのハンドリングも極めて容易になるという、いくつものメリットがあります。

3.運用上のメリット

レスポンシブWebデザインの特徴は、原則的に1つのソースコードによりコントロールされていることにあります。

その結果、これまでのようにPCサイトは更新して、スマホ用の更新を新たにして・・・といった二度手間を解消してくれて、更新ミスも同時に軽減してくれるという利点があります。

また、CMS(サイト構築を行えるソフトウェア)と併せて導入することによって、更新を完全にクライアントで実施できるようになります。そのため、更新サイクルの工程が短縮され、コンテンツをタイムリーにアップすることができ、フレキシブルな対応も可能にしてくれます。

4.制作コストのメリット

制作工程としては、PCサイトのみに比べるとモックの制作など増える項目がありますが、スマホサイトの構築コスト・制作日数と比べると、コストダウンできる要素が大きいのは確かです。

5.SEO対策へのメリット

また、やはり無視できないSEOについてですが、やはりGoogle検索への対応でしょう。

GoogleはレスポンシブWebデザインのサイトについては、重要視すると発表しています。

レスポンシブWebデザインを使うサイト、つまり同じ一連のURLですべてのデバイスに配信するサイトで、それぞれのURLがすべてのデバイスに同じHTMLを配信し、CSSを使ってデバイスでページをレンダリングする方法を決定します。Googleではこの設定をおすすめしています

(引用元:https://developers.google.com/webmasters/smartphone-sites/details?hl=ja

簡単な要旨としては、下記の通りです。

1.コンテンツのURLが1つであることによってユーザー利便性が高まる

2.コンテンツのURLが1つであることによってGoogleがコンテンツのインデックスプロパティを割り当てやすい

3.ユーザーエージェント判別によるページ・リダイレクトには問題がある

4.サイト運営者は同一内容のページを複数制作する必要がない

5.Googleクローラも同一内容のページを複数クロースする必要がない

このように、Google自然検索での上位表示させる要素に十分なりえるのです。

6.デメリットはないのか?

各デバイスのユーザーごとに独自のデザインで訴求したい、もっとフォントにこだわるなどデザイン重視のサイトを作りたいという要望には、考慮すべき問題もあります。基本的に、画像によるテキスト文字ではなく、テキストになってしまうため、想定しているフォントで共通に表示できないという事などがあげられます。また複雑なレイアウトには不向きです。

▼有限会社 シュヴァインハイム

有限会社シュヴァインハイム

▼豆苗研究会

豆苗研究会

なお、弊社実績にあるようなコーポレートサイトやグリッドデザインのシンプルなレイアウトが向いています。

▼株式会社ベリテ

株式会社ベリテ

▼藤倉ゴム工業株式会社

藤倉ゴム工業株式会社

▼有限会社ビズ・カンパニー

有限会社ビズ・カンパニー

7.レスポンシブWebデザイン採用すべき!?

皆さんは、ここまで話を聞いてみて、どうでしょうか?

この『ワンソース、マルチデバイス』の特長はメリットが大きいとは思いませんか?

今後もこの流れは見逃せませんので、レスポンシブWebデザインを検討してみてはいかがでしょうか。

8.最後に

ご参考までに、弊社実績のレスポンシブサイトの一部をご紹介します。

▼アトムサポート株式会社様

アトムサポート株式会社

▼株式会社フォー・クオリア様

株式会社フォー・クオリア

▼株式会社平井中村屋様

株式会社平井中村屋

▼株式会社セールスバリュー様

株式会社セールスバリュー

以上です。ご覧いただきありがとうございました。

関連キーワード

Web制作 レスポンシブ

特集

はじめての展示会物語

はじめての展示会出展までの道のりを描いたドッタンバッタン劇場

メールマーケティング

この記事を共有