2017/12/04長年コーディングをやっていますが、今更ですが先日はじめて仕事でレスポンシブWebデザインに対応したサイトを作ることになり、やっとひと段落したところなのでレスポンシブWebデザインのメリット・デメリット、構築する上で気を付けたほうが良いところなどをまとめてみます。ちなみに当ブログもスマホ向けの表示には対応していますが、各端末に最適化されるというよりはPCとそれ以外の2パターンの表示なのでレスポンシブWebデザインではありません。私が感じたレスポンシブWebデザインのメリット端末応じた最適化が自然に行えるSEOに有利であるテキストや画像修正のコストが削減できる流行なので注目を浴びやすい私が感じたレスポンシブWebデザインのデメリット開発コストが増大ファイルサイズが大きくなりがちデザインがしにくい簡素な表現になりがち構造の修正が難しいスクリプトを使ったコンテンツ作成が複雑化デザインによってはスクリプトを多用する必要ありその他レスポンシブWebデザインをする上で気を付けるべきポイントなど単位の指定は極力統一する画像とCSSのボーダーが隣接した際ボーダーが欠けることがあるbr要素(強制改行)は状況に応じて無効化しよう折り返したくない単語にはdisplay:inline-blockを指定しようPC・モバイルの互換性を考慮したデザインを心がけるアイコンやロゴは大きめに切り出しておこうテキストや画像の絶対配置は慎重にコンテンツの並び順はモバイルとPC共通にする終わりに私が感じたレスポンシブWebデザインのメリット端末応じた最適化が自然に行えるレスポンスWebデザインの一番の特徴ですね。端末の種類を問わず最適化された表示を提供します。どの環境でもそれなりのユーザビリティを提供できるので機会損失を回避できるというのが大きなメリットになるかと思います。SEOに有利である従来のコーディング方法はPCとモバイルというように同じ内容であるにも関わらず端末に応じてページを分けることが珍しくありませんでした。ほとんど同じ内容のページが複数存在することはSEO的にはデメリットになります。レスポンスWebデザインでは各環境共通のソースを利用する為、SEO的に有利とされています。テキストや画像修正のコストが削減できる各環境共通のソースを利用するということは更新のし易さでもメリットになります。ワンソースなので同じような修正を何度も行う必要がありません。レスポンスWebデザインとは関係ありませんが、JavaScriptで共通ファイルの外部化でも更新や変更にかかるコストが削減可能ですのでこちらもお試しください。流行なので注目を浴びやすいWeb制作ではトレンドを追う事は重要なポイントです。トレンドを取り入れることで一時的ではありますが注目を浴びます。注目を浴びるということは集客に繋がるので重要な要素と考えられます。個人的な感覚ですが、従来のPCサイトとスマホサイト両方を用意する場合に比べ、レスポンシブWebデザインのほうが制作コストが高いと思いました。従来の手法ではPCとスマホの2段階での画面を制作すればよいですが、レスポンシブWebデザインは基本リキッドレイアウトである為、幾通りもの表示バリエーションが存在します。実際にはブレイクポイント単位での最適化になるかと思いますが、今回作成したサイトでは5つブレークポイントを設定しました。5画面、単純計算で従来の倍以上コストになります。ちなみにブレークポイントの設定基準は以下の通りです。上記に加え、印刷CSSも設定ファイルサイズが大きくなりがちレスポンスWebデザインでは必然的にPC、タブレット、スマホ・・・それぞれで使われる画像などのファイルを全て読み込みます。スマホで見た場合もPC用の画像を読み込むということです。ファイルサイズが大きくなります。回線の細い環境ではかなりの痛手かも知れません。スクリプト制御で必要な画像だけ読み込むようにすることも可能だと思いますが、今回は時間との兼ね合いで試していませんが、一般的にはレスポンシブWebデザイン=ファイルサイズ過多という印象です。デザインがしにくいレスポンスWebデザインは基本的にリキッドレイアウトである為、固定サイズである静止画デザインとの相性が悪いです。デザイナーとコーダーで作業分担している場合は大きなロスが発生する可能性があります。デザイン」が良いとされています。簡素な表現になりがちレスポンスWebデザインは基本的に可変することが前提なので、ガチガチに作り込まれた(複雑に加工された)デザインは不向きです。従って、あまり装飾されていないデザインになりがちで特色が打ち出しにくいというデメリットがあります。構造の修正が難しいレスポンスWebデザインのメリットとしてテキストや画像の更新のし易さを挙げましたが、逆に構造の修正は従来のものよりもコストが大きくなります。ブレークポイントの数に応じて修正量が増える為、面倒なことになりがちです。他のブレークポイントのスタイルを継承している場合、「一方を修正したら一方が崩れた」なんてトラブルも起きることも珍しくありません。可変するコンテンツをプログラミングするのは意外とコストがかかります。可変するだけならまだしも、スマホとPCで機能自体が切り替わる場合もあります。デバッグが大変でしたね。今まで使っていたライブラリがレスポンシブWebデザインに対応してないということも珍しくありません。デザインによってはスクリプトを多用する必要ありワンソースであるメリットが裏目に出る場合もあります。PCとスマホで要素の登場順序が異なる場合CSSだけでは制御しきれないケースが出てきます。その場合はjQueryの.append()、.prepend()、.before()、.after()などを使って制御する必要が出てきます。ワンソースにPC版要素、スマホ版要素を含めておくという方法もありますが、ワンソースであるメリットが生かせないので出来れば避けたいところですね。その他レスポンシブWebデザインをする上で気を付けるべきポイントなど単位の指定は極力統一する原則単位は%で指定します。基本的には一つの要素に複数の単位は混在させないほうがよいです。単位が混在していると特定のウインドウサイズでは表示に問題なくても、縮小すると全体幅が100%を超えてカラム落ちしてしまいます。画像とCSSのボーダーが隣接した際ボーダーが欠けることがあるimg要素とCSSのボーダーが隣接した場合、枠線の一部が消えることがあります。これは画像が縮小される際、小数点以下の数値が影響しているものと思われます。img要素にdisplay:blockを付けることで解消されます。br要素(強制改行)は状況に応じて無効化しようキャッチコピーやタイトルなどきりの良い部分で改行を入れることがあるかと思いますが、PC環境では最適な表示でもスマホでみると不自然に折り返してしまうことが多々あります。基本的にはbr要素に対してdisplay:noneを指定して改行を無効化したほうがデザイン的な収まりは良くなるかと思います。折り返したくない単語にはdisplay:inline-blockを指定しよう例えば、企業名や人名など途中で折り返したくない単語がありますよね。PC環境だけをターゲットにするのであれば任意の位置にbr要素を入れれば済みますがレスポンシブWebデザインではそうはいきません。該当キーワードをspan要素などで囲みdisplay:inline-blockを指定することでそのキーワードの途中で折り返すことを回避できます。ちなみにdisplay:inline-blockが指定された要素はimg要素と同じ扱いになります。PC・モバイルの互換性を考慮したデザインを心がけるPC・モバイルで異なるパーツが多用されていると流用できない為コストが増大します。ファイルサイズも増える為パフォーマンスの低下に繋がります。レスポンスWebデザインではモバイルサイトを基本とするモバイルファーストの考え方が注目されています。PC版はモバイル版を拡張したものとして考えたほうが良いのかも知れません。アイコンやロゴは大きめに切り出しておこうスマートフォンやタブレットはPCディスプレイと比較して非常に高精細である為、原寸サイズの画像をスマホ・タブレットで見るとぼやけた表示になってしまいます。重要なアイコンやロゴは大きめに切り出しましょう。テキストや画像の絶対配置は慎重に今までは環境の差異といってもWindowsかMacぐらいだったので、絶対配置をする際は多少余裕をもってレイアウトするだけで十分でしたが、可変するレスポンシブWebデザインではそれは難しい問題です。配置箇所によってはスクリプトによる制御が必要かも知れません。コンテンツの並び順はモバイルとPC共通にする先述したデメリットにもありますが、PCとスマホで要素の並びは統一したほうがよいでしょう。統一するかしないかでコーディングにかかる時間が大きく変わります。終わりにいかがでしたでしょうか?私自身まだまだつかめていない部分がありますが制作の参考になれば幸いです。コメントをキャンセルメールアドレスが公開されることはありません。...【レポート公開】先日投稿したPS4購入レビュー記事が1位から圏外へ・・・。...余計な記述無しで要素の高さを揃えるjQueryプラグインSmartHeightLineを公開しました。HTMLやCSSだけでは実現が難しいレイアウトってありますよね。特定要素に高さを揃えることもその一つ。この問題をスマートに解決できるjQueryプラグインを公開しましたので是非お役立てください。...PREV当ブログ過去5年間のアクセスレポートを公開します。NEXT【レポート公開】先日投稿したPS4購入レビュー記事が1位から圏外へ・・・。炎上するも反省しない本当の理由メンタリストDaigoさん、炎上していますね。...主張がコロっと変わるインフルエンサーは本当に信用出来ないのか?最近『インフルエンサー』と呼ばれる人達が注目されています。本業Webエンジニアの副業アフィリエイター。ブログアフィリエイトを中心に行い、最高月収は55万円を達成。小川忠洋が代表を務める『ダイレクト出版』の評判と過去の失態を明らかに!本当に信用できるのかまとめてみました。