レスポンシブWebデザインを実装してみて分かった11＋αのポイント
2017/12/04
長年コーディングをやっていますが、今更ですが先日はじめて仕事でレスポンシブWebデザインに対応したサイトを作ることになり、やっとひと段落したところなのでレスポンシブWebデザインのメリット・デメリット、構築する上で気を付けたほうが良いところなどをまとめてみます。
ちなみに当ブログもスマホ向けの表示には対応していますが、各端末に最適化されるというよりはPCとそれ以外の2パターンの表示なのでレスポンシブWebデザインではありません。
私が感じたレスポンシブWebデザインのメリット
端末応じた最適化が自然に行える
レスポンスWebデザインの一番の特徴ですね。端末の種類を問わず最適化された表示を提供します。どの環境でもそれなりのユーザビリティを提供できるので機会損失を回避できるというのが大きなメリットになるかと思います。
SEOに有利である
従来のコーディング方法はPCとモバイルというように同じ内容であるにも関わらず端末に応じてページを分けることが珍しくありませんでした。ほとんど同じ内容のページが複数存在することはSEO的にはデメリットになります。レスポンスWebデザインでは各環境共通のソースを利用する為、SEO的に有利とされています。
テキストや画像修正のコストが削減できる
各環境共通のソースを利用するということは更新のし易さでもメリットになります。ワンソースなので同じような修正を何度も行う必要がありません。
レスポンスWebデザインとは関係ありませんが、JavaScriptで共通ファイルの外部化でも更新や変更にかかるコストが削減可能ですのでこちらもお試しください。
流行なので注目を浴びやすい
Web制作ではトレンドを追う事は重要なポイントです。
トレンドを取り入れることで一時的ではありますが注目を浴びます。注目を浴びるということは集客に繋がるので重要な要素と考えられます。
私が感じたレスポンシブWebデザインのデメリット
開発コストが増大
個人的な感覚ですが、従来のPCサイトとスマホサイト両方を用意する場合に比べ、レスポンシブWebデザインのほうが制作コストが高いと思いました。
従来の手法ではPCとスマホの2段階での画面を制作すればよいですが、レスポンシブWebデザインは基本リキッドレイアウトである為、幾通りもの表示バリエーションが存在します。実際にはブレイクポイント単位での最適化になるかと思いますが、今回作成したサイトでは5つブレークポイントを設定しました。つまり5画面、単純計算で従来の倍以上コストになります。
ちなみにブレークポイントの設定基準は以下の通りです。
- PCサイズ
- タブレット大
- タブレット小
- スマホ大
- スマホ小
- 上記に加え、印刷CSSも設定
ファイルサイズが大きくなりがち
レスポンスWebデザインでは必然的にPC、タブレット、スマホ・・・それぞれで使われる画像などのファイルを全て読み込みます。つまり、スマホで見た場合もPC用の画像を読み込むということです。当然ファイルサイズが大きくなります。回線の細い環境ではかなりの痛手かも知れません。
スクリプト制御で必要な画像だけ読み込むようにすることも可能だと思いますが、今回は時間との兼ね合いで試していませんが、一般的にはレスポンシブWebデザイン＝ファイルサイズ過多という印象です。
デザインがしにくい
レスポンス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とスマホで要素の並びは統一したほうがよいでしょう。統一するかしないかでコーディングにかかる時間が大きく変わります。
終わりに
いかがでしたでしょうか？
私自身まだまだつかめていない部分がありますが制作の参考になれば幸いです。