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

【この記事の要約】

リターゲティング広告（リマーケティング広告）とは、一度自社のWebサイトに訪問したことがあるユーザーを追跡（ターゲティング）し、他のサイトやSNSを閲覧している際に、自社の広告を再度表示させる手法です。

全く興味のないユーザーに広告を見せるより、既に一度はサイトを訪れた関心の高いユーザーに絞ってアプローチするため、費用対効果（CPA）が高い傾向にあります。ECサイトで「カートに商品を入れたが購入しなかったユーザー」に再度商品をアピールしたり、BtoBサイトで「資料請求ページを訪れたユーザー」にセミナーの案内をしたりと、ユーザーの検討段階を次のステップに進める上で非常に効果的な広告手法です。

 

【よくある質問と回答】

 

【ここから本文】

こんにちは。

 

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

 

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

 

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

 

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

 

 

 

 

 

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

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

 

 

 

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

調査・出典：（株）ＭＭ総研［東京・港］

 

 

 

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

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

 

 

そこで核となる考え方が、「原則として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.最後に

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

 

 

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

 

 

 

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

 

 

 

▼株式会社平井中村屋様

 

 

 

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

 

 

 

 

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

 

 

【English summary】

Retargeting advertising (or remarketing) is a method that tracks (targets) users who have previously visited your website and displays your ads to them again while they are browsing other sites or social media.

This approach tends to have a high cost-effectiveness (CPA) because it focuses on highly interested users who have already visited the site, rather than showing ads to completely uninterested users. It is a very effective advertising method for moving users to the next step of the consideration phase, such as re-appealing a product to a user who added it to their cart but did not purchase, or announcing a seminar to a user who visited a document request page on a B2B site.