■　コラム　━━━━━━━━━━━━━━━━━━━━━━━━━━
最近注目のレスポンシブ・ウェブデザイン
～スマートフォン向けサイトも作るのならば！～
—————————————————————-

最近、新規サイト立ち上げやリニューアルの際に気になるのが、
スマートフォンやタブレット対応。
どの機種に対応するのか、どのように対応するのかを
事前に考えなければなりません。

ご存知の方が増えてきていますが、最近注目されているのが
「レスポンシブ・ウェブデザイン」という手法。

PC、タブレット、スマホなど、
さまざまなデバイスにフィットするWebサイトを、
単一のHTMLで実現するのが「レスポンシブ・ウェブデザイン」です。

つまり、デバイスごとに複数のテンプレートやHTMLを
作る必要がないということです。


—————————————————————-
■ デバイスごとのページ制作か、レスポンシブ・ウェブデザインか
—————————————————————-

これまでは、PC用、タブレット用、スマホ用、
あるいはAndroid用、iOS（iPhone／iPad）用と、
デバイスごとやOSごとに別々にページを制作することが
多かったかもしれません。

このような制作方法では、アクセスされたデバイスを判別し、
各ページに振り分けますが、次のような問題があります。

・さまざまな端末仕様に合わせたHTMLやCSSを用意する必要がある

・更新が煩雑になる。
　同じ場所を更新する場合、4デバイスに対応していると
　4ファイルの更新が必要になってしまう

新しい端末が出るたびに仕様（サポート状況）を確認し、
どのHTMLが適するのか、あるいは新しくHTMLを用意するのか
などを考える必要があります。

URLがPC用、タブレット用、スマホ用など多岐に渡ってしまうのも、
アクセス解析をする際に面倒です。

それらを解決する手法として注目されているのが
「レスポンシブ・ウェブデザイン」なのです。

レスポンシブ・ウェブデザインでは、さまざまなデバイスに対して
ひとつのWebページ（HTML）を使って、画面サイズ（横幅）を
基準にCSSだけを切り替えてレイアウトを調整します。

新しいデバイスが発売されても、
横幅で判断して対応したレイアウトで表示してくれるので、
HTMLを修正したり、別途用意する必要はありません。

また、ひとつのHTMLということは、更新や修正も一度でOKです。

ASCII.jp「レスポンシブWebデザインとは」
http://ascii.jp/elem/000/000/697/697463/

—————————————————————-
■ レスポンシブ・ウェブデザインをGoogleが推奨
—————————————————————-

2012年6月12日にGoogleが、
レスポンシブ・ウェブデザインを「推奨」すると発表しました。

理由は、次の3つです。

１. ユーザーがシェアをしたりリンクを貼ったりしやすくなる
２. リダイレクトが不要。
　 　デバイスを判別してリダイレクトする方法は間違いが起こりやすい
３. レスポンシブ・ウェブデザインのサイトは1度のクロールで済む。
　　デバイスごとにページがあると複数回クロールしなければならない

ひとつのURLなので、どのデバイスからでもそのURLにアクセスでき、
混乱が少なくなり、ユーザー体験が向上します。

デバイスごとにページを分けていると、クロール回数が多くなるため、
検索結果に反映されるタイミングが遅くなる可能性があります。

このように、検索エンジン最適化の面でも、
レスポンシブ・ウェブデザインの利点が大きいといえます。

Google ウェブマスター向け 公式ブログ
「Google がお勧めするスマートフォンに最適化された
　ウェブサイトの構築方法」
http://googlewebmastercentral-ja.blogspot.jp/2012/06/google.html
海外SEO情報ブログ
「スマートフォン向けサイトにはレスポンシブ・ウェブデザインを推奨、
　Googleが公開したスマホサイトの最適化 at #SMX Advanced Seattle 2012」
http://goo.gl/a7Hac

—————————————————————-
■ レスポンシブ・ウェブデザインを導入するために
—————————————————————-

「それでは、レスポンシブ・ウェブデザインでスマホ対応をお願いします！」
と、ちょっと待ってください！

現在、PCサイトだけがあり、スマホに適したページも提供したいから、
レスポンシブ・ウェブデザインを、という場合は、
簡単には導入できないケースがあります。

PCサイトの複雑なアニメーションや凝ったギミックは、
スマホでは簡単に表現できない場合がありますし、
最初からスマホでも問題なく見られるように設計しているわけではないので、
対応するのがむずかしく、コストが高くなってしまう場合があります。

レスポンシブ・ウェブデザインでスマホにも対応したいという場合は、
一度、フルリニューアルを前提に設計などをゼロから考えたほうがよく、
弊社でもそのようにおすすめしています。

各画面サイズに合わせてレイアウトを変えるので、
デザインや動きについてはデザイン画を確認するだけではなく、
HTMLやCSSの作成をある程度進めてから、
PCやスマホで表示確認しつつ、速やかに修正する、
というワークフローが一般的です。

このように、レスポンシブ・ウェブデザインは、
あとから導入を検討するのではなく、
企画や設計などプロジェクトの初期段階から導入を決めておくのが
望ましいといえます。

萩原印刷株式会社
クロスメディア部 一同


■　後記　━━━━━━━━━━━━━━━━━━━━━━━━━━
スマホでホームページ閲覧
—————————————————————-

新規サイト、特設サイト、リニューアルだったら、
レスポンシブ・ウェブデザインで対応したくなりませんでしたか？

今年になってやっとスマホを持つようになった配信担当の私ですが、
ホームページを見ていてスマホに対応していると、
見やすく感じて長く見入ってしまう傾向があります（笑）。
最適化されているとユーザーに優しいのですね。

でも、まだまだスマホの扱いに慣れない配信担当者でした。

クロスメディア部 配信担当