WEBデザイン、HTMLコーディング、PHP、スマートフォン制作などWEB制作全般に役立つ情報を発信していきます。単一のファイルで様々な機器の画面サイズにフィットする便利な手法「レスポンシブデザイン」。最近はスマホからのPVも爆発的に増えてきたので慌ててスマホサイトを導入する企業が増え、更新の勝手から、レスポンシブで作りなおしちゃいたいというご依頼を頂くことが多々あります。その際、都度説明をさし上げてはいるのですが共通する誤解を持っている場合が多かったので諸諸下記に纒めてみました。制作に係る時間もPCとスマホを別々に作った時に比べて半分くらいでしょ!と言われることが多々有ります。これは間違いで、レスポンシブデザインは”PC版を作りながらスマートフォンの完成をイメージして作る”ことに常に神経を使うことになります。そのためただ単にスマートフォンやPCサイトを作るよりも一つ一つのデザイン工程で入念な確認が必要となり結果的に時間を使います。PCとスマートフォンという両性をもつHTMLをPCとスマホ、両方から最適なレイアウトで見えるよう調整するにあたっては通常の制作よりはるかに神経を使うと言っても過言では無いと思います。簡単にできると思われてしまうとウェブ屋としては辛いのが正直なところです。【その2】”レスポンシブデザインは自由なレイアウトが効かない”レスポンシブデザインはソースがひとつであるゆえに、PCからスマートフォンへ変形する際には規則を設けて移動します。その際にはPC/スマートフォンどちらともに規則性のあるレイアウトが望まれます。PCで[A][B][C][D]とならんでいたデザインをスマートフォンで[B][C][D][A]と並び替えることは規則性に欠けやはり困難となります。PCと極端に異なるデザインにすることは普段PCを使っているユーザーにとっても混乱の種になります。Mueller(ジョン・ミューラー)氏はGoogle+にて「レスポンシブデザインだからといってGoogleがSEO的に優遇することはない」と答えています。その理由については「レスポンシブデザインが必ずしもユーザーにとって良いものかどうかはGoogleは判断しない。レスポンシブとして形を無理やり合わせようとするのではなく(ユーザビリティとして)もっとマクロな視点に意識を費やしてほしい」と語っています。Googleはレスポンシブデザインを推奨しています。これはソースが単一化することで更新などのトラブルを少なくすることができるためだということです。【その4】アダプティブデザインとレスポンシブデザインは異なる[レスポンシブ/アダプティブ]デザインの構造は解像度ごとにCSS条件を振り分けるものです。これによって端末毎に見え方が異なって見えます。レスポンシブとアダプティブには決定的な違いが有ります。スマホ/タブレット/PC用のブレークポイント(CSS条件)を作成したとすると、、レスポンシブデザインの場合はブレークポイントにフルードデザインを当てはめているのでどの端末でみてもブレークポイント[プラスマイナス]フルードの効果で画面にピッタリ収まり綺麗に見えます。これに対してアダプティブデザインはブレークポイントで条件を切り替えることでとある一定の大きさへ固定するような条件となります。ブレークポイントにぴったり当てはまる端末は収まりが良いですがそうでない機種についてはコンテンツの端が切れてしまったりする自体が発生するのです。レスポンシブデザインを作成する際はアダプティブデザインに成らないよう配慮が必要です。アダプティブデザインとレスポンシブデザイン、混同しがちですが違いを認識しておきたいところです。【番外編】”レスポンシブは「レスポンシブル」ではないレスポンシブル【responsible:責任のある】ではなくレスポンシブ【responsive:よく反応して】です。お間違いのございませんようにどうぞ。コメントをキャンセルメールアドレスが公開されることはありません。*サイト次回のコメントで使用するためブラウザーに自分の名前、メールアドレス、サイトを保存する。...フォントをまとめて比較!ウェブサービス「wordmark-it」こんにちは。マーカーネットスタッフのSです。今回はデザイン制作に便利なサービスをご紹介したいと思います。デザインで使うフォント選びは作品のクオリティを左右するといっても過言ではない大事な要素です。...夏にピッタリ!打ち上げ花火をテーマにしたブラシ素材をご紹介。夏にピッタリ!打ち上げ花火をテーマにしたブラシ素材をご紹介。...【これぞPhotoshopマジック】イラスト風・水彩風・レトロ風に写真を加工するワザWebデザインを制作する中で、写真素材を使用することが多々あります。WEBデザイン、HTMLコーディング、PHP、スマートフォン制作などWEB制作全般に役立つ情報を発信していきます。