最近のWebサイト制作において、パソコン・スマートフォン・タブレットなど、閲覧デバイスが増えたことにより、ひとつのサイトデザインではWebサイトが見づらく、ユーザビリティがよくないという問題が出てきました。
そこで、複数のWebページを設けるのではなく、単一のHTMLファイルが自動的に最適を図りWebサイトのデザインを調整する「レスポンシブWebデザイン」が一般的になっています。
今回は年々ニーズが高まるレスポンシブWebデザインサイトの作り方の基本や、メリット、デメリットについてご紹介します。もくじ
◆スポンシブWebデザインのメリット
・ワンソースでの管理が可能
PCサイトとスマートフォンサイトといった各デバイスによってHTMLが別々で構築されていないため、ミスも少なく修正も容易に行うことができます。
その結果、サイトのメンテナンス工数を削減することができます。
・どんなデバイスにも対応可能
端末の画面サイズに依存しないので、新たなデバイスが登場した際でも臨機応変に対応が可能となります。
・SEOに効果的
どのデバイスからアクセスしてもURLが同一なのでSNSでシェアされやすく、スマホに最適化している事でSEOに効果的といえます。
◆レスポンシブWebデザインのデメリット
・スマホでの閲覧が重い
サイズの大きい画像をWebサイト上で使用した場合、スマートフォンサイトでは表示速度が落ちてしまうことがあります。
・制作工数がかかる
表示させるデバイスごとに異なったレスポンシブ対応のデザインが必要となるため、コーディングの構築も複雑になり、工数が増える可能性もあります。
・古いブラウザには対応していない
レスポンシブデザインは一般的にガラケーと呼ばれているフューチャーフォンには未対応となっていて、IE8以下の古いブラウザを使用している端末ではWEBサイトが思ったように表示をされないといった問題も発生します。
◆レスポンシブWebデザインサイトの作り方
・画像データの軽量化
通信環境も関係しますが一般的にスマートフォンはPCと比較して処理能力が劣るといえます。
そのためサイズが大きい画像データの場合、表示速度が遅くなってしまいます。
画像データを利用する際には画質と保存形式を考慮し軽量化を図ることが大切です。
・CSSでデザインする
見出しやアイコン、ボタンなどのWebサイトのパーツはPhotoshopなどでデザイン、作成することが主流でしたが、CSSを利用した方が画像の表示速度が速いため、Webデザインはできる限りCSSで行った方がよいでしょう。
・モバイルファーストでの構築
モバイルサイトを最初に構築する方法のことを「モバイルファースト」といいます。
画面サイズの小さな端末スマートフォンから順に、タブレット、PCとWebデザインを決めていきましょう。
その際、一番画像が小さいスマートフォン向けのデザインが全体を通して共通デザインとなります。
・CSSスプライトを利用する
複数の画像を1枚にまとめ、CSSで必要な部分だけ表示させる方法のことを「CSSスプライト」といいます。
複数の画像を1枚として扱うことにより表示速度が向上するため、CSSスプライトの利用をおすすめします。
◆まとめ
近年多くのホームページに導入されているレスポンシブWebデザインが、Webデザインの主流になっているといえます。
しかし、Webサイトをレスポンシブ化することによってメリットもデメリットも発生します。
それぞれを踏まえた上で、レスポンシブ対応が必要か否かを考え、最適だと判断したう