マーカーネット株式会社

WEB制作ブログ WEBデザイン、HTMLコーディング、PHP、スマートフォン制作などWEB制作全般に役立つ情報を発信していきます。

SEO WEBデザイン

レスポンシブデザインに対するよくある4つの誤解

投稿日:2014年9月30日 更新日:

単一のファイルで様々な機器の画面サイズにフィットする便利な手法「レスポンシブデザイン」。

最近はスマホからのPVも爆発的に増えてきたので慌ててスマホサイトを導入する企業が増え、更新の勝手から、レスポンシブで作りなおしちゃいたいというご依頼を頂くことが多々あります。

その際、都度説明をさし上げてはいるのですが共通する誤解を持っている場合が多かったので諸諸下記に纒めてみました。

【その1】”レスポンシブデザインなら安く収まるでしょ?”は誤り

レスポンシブデザインは単一のHTMLに情報を集約させることから、
制作に係る時間もPCとスマホを別々に作った時に比べて半分くらいでしょ!
と言われることが多々有ります。

これは間違いで、
レスポンシブデザインは”PC版を作りながらスマートフォンの完成をイメージして作る”ことに常に神経を使うことになります。
そのためただ単にスマートフォンやPCサイトを作るよりも一つ一つのデザイン工程で入念な確認が必要となり結果的に時間を使います。
PCとスマートフォンという両性をもつHTMLをPCとスマホ、両方から最適なレイアウトで見えるよう調整するにあたっては通常の制作よりはるかに神経を使うと言っても過言では無いと思います。

だから簡単にできると思われてしまうとウェブ屋としては辛いのが正直なところです。

【その2】”レスポンシブデザインは自由なレイアウトが効かない”

レスポンシブデザインはソースがひとつであるゆえに、
PCからスマートフォンへ変形する際には規則を設けて移動します。
その際にはPC/スマートフォンどちらともに規則性のあるレイアウトが望まれます。

たとえばPCで[A][B][C][D]とならんでいたデザインをスマートフォンで[B][C][D][A]と並び替えることは規則性に欠けやはり困難となります。
また、PCと極端に異なるデザインにすることは普段PCを使っているユーザーにとっても混乱の種になります。

【その3】”レスポンシブデザインならSEOに強い”は誤り

米GoogleのウェブマスタートレンドアナリストJohn Mueller(ジョン・ミューラー)氏はGoogle+にて「レスポンシブデザインだからといってGoogleがSEO的に優遇することはない」と答えています。
また、その理由については「レスポンシブデザインが必ずしもユーザーにとって良いものかどうかはGoogleは判断しない。レスポンシブとして形を無理やり合わせようとするのではなく(ユーザビリティとして)もっとマクロな視点に意識を費やしてほしい」と語っています。
ただしGoogleはレスポンシブデザインを推奨しています。これはソースが単一化することで更新などのトラブルを少なくすることができるためだということです。

【その4】アダプティブデザインとレスポンシブデザインは異なる

[レスポンシブ/アダプティブ]デザインの構造は解像度ごとにCSS条件を振り分けるものです。
これによって端末毎に見え方が異なって見えます。

ただしレスポンシブとアダプティブには決定的な違いが有ります。
たとえばスマホ/タブレット/PC用のブレークポイント(CSS条件)を作成したとすると、、

レスポンシブデザインの場合はブレークポイントにフルードデザインを当てはめているのでどの端末でみてもブレークポイント[プラスマイナス]フルードの効果で画面にピッタリ収まり綺麗に見えます。

これに対してアダプティブデザインはブレークポイントで条件を切り替えることでとある一定の大きさへ固定するような条件となります。もちろんブレークポイントにぴったり当てはまる端末は収まりが良いですがそうでない機種についてはコンテンツの端が切れてしまったりする自体が発生するのです。

レスポンシブデザインを作成する際はアダプティブデザインに成らないよう配慮が必要です。
アダプティブデザインとレスポンシブデザイン、混同しがちですが違いを認識しておきたいところです。

【番外編】”レスポンシブは「レスポンシブル」ではない

レスポンシブル【responsible:責任のある】ではなくレスポンシブ【responsive:よく反応して】です。
お間違いのございませんようにどうぞ。

-SEO, WEBデザイン

執筆者:


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

【photoshop】アプリを使わず、簡単に写真を漫画風にアレンジする方法!

【photoshop】アプリを使わず、簡単に写真を漫画風にアレンジする方法!

このお姉さんにあえて漫画調にマーカーネットをアピールしてもらうと… ちょっと面白くて勢いのある効果が生まれますね。 昨今では漫画的な加工を取り入れるWEBデザインも増えてきました。 ですので、今回は写 …

WEBサイトの配色に迷った時の必見サイト!をご紹介。

WEBサイトの配色に迷った時の必見サイト!をご紹介。 http://www.markernet.co.jp/blog/2015/08/10/post-5960/ Facebook

高クオリティな写真素材がDLし放題!それでいてフリー。これはブクマするしかない!

高クオリティな写真素材がDLし放題!それでいてフリー。これはブクマするしかない!

画面いっぱいに背景写真を敷くWEBデザインが流行っている今日この頃、 見栄えのする写真を探すのもなかなかの一苦労だったりしますよね。 そんな悩めるデザイナーさんたちにオススメしたい、高クオリティな写真 …

【PHOTOSHOP】すぐに使えるデザインテクニック!アート風文字をラクに作る方法

【PHOTOSHOP】すぐに使えるデザインテクニック!アート風文字をラクに作る方法

STEP1. まず加工したい写真素材をPhotoshopで開きます。 STEP2. 背景の写真レイヤーの上に文字を入力し配置します。 STEP3. レイヤーパレット上でテキストのレイヤーを右クリックし …

エラーページすら面白い!ユニークな404エラーデザイン

エラーページすら面白い!ユニークな404エラーデザイン

WEBサイトを閲覧しているとき、ページが存在しない404エラー画面に遭遇したことはありませんか? デフォルトの状態だと全面白い背景の上に黒文字で「Not Found」となっているだけですが、 とても凝 …