WEBサイトのレスポンシブデザインとは?

2018.09.20.
Webコラム

WEBサイトのレスポンシブデザインとは?

渋谷でWEB制作とSES事業をやっている株式会社レベルスの中川です。
レベルスがどんな事やってるのか?はレベルスは何やってるの?を確認してみて下さい。ザックリとまとめてありますが、意外とわかりやすい!と好評。

そう!レベルスのメイン事業は「WEB制作」と「SES事業」です。いつもはエンジニアさんよりの記事が多いですが、今日はWEB制作会社らしく、少し技術的なお話をしていきますが、中級者以上の方はもうわかってるよという内容かもしれませんが、勉強始めたばかりの人やこれからCSSやHTMLを勉強する人、WEBサイトを作りたいなと思っている人には参考になるはず。

渋谷のWEB制作会社が教えるレスポンシブデザイン

そもそもレスポンシブデザインって何なのかという所をしっかりと理解をする必要があります。レスポンシブデザインとは、デバイス(PC・タブレット・iphone・Android)ごとに複数の異なる画面サイズを見やすくする為、そのデバイスの幅に応じて自動的に表示が最適にされる仕組みであり柔軟に調整していく事を指します。

レスポンシブデザインはこれからのWEB制作においては、絶対に覚えておかないといけません。
最近はレスポンシブでWEB制作をする事が当たり前になりつつあるので、今勉強中の人は絶対必須ですよ。

“コンテンツは水のごとしは、レスポンシブウェブデザインの原則を説明した格言” -wikipediaより引用-

1.レスポンシブデザインのメリット

レスポンシブデザインを導入する事で得られるメリットという所もしっかりと理解しておきたい所。

【1】サイト管理・運用が楽

WEBサイトを作る際は管理や運用についても考えていかなければいけませんが、そもそもレスポンシブデザインはHTMLが1つなので、1つのHTMLファイルを変更するだけで更新やメンテナンスが可能になります。これがデバイスごとにHTMLがあるとその作業工数が取られる事になるので、管理・運用がしやすい事は大きなメリットです。

【2】SEOへの対策効果

Googleがレスポンシブデザインを推奨する理由
このページからも分かる様に、Googleでは明確にレスポンシブデザインを推奨しています。2015年の4月に実装したモバイルフレンドリー(スマートフォンでの閲覧に適していないといけない)や2018年3月に発表されたモバイルファーストインデックス(スマートフォンサイトが評価の基準になる)にもレスポンシブデザインでのサイト制作であれば、対応が可能になり、SEOへのプラスの効果が考えられます。WEB制作の過程でSEOは必ずぶち当たる問題ですから、プラスに働く事は覚えておきましょう。

※モバイルフレンドリーとモバイルファーストインデックスについてはまた別の機会に詳しく話をしていきたいと思ってます。

【3】URLが統一される

デバイスごとにHTMLを変えていると、それに合わせたURLが必要になりますが、レスポンシブデザインを採用しているとURLは1つでOKです。その為、SNSでの拡散やシェアがしやすい事もレスポンシブデザインを取り入れるメリットです。

【4】コンテンツの質が上がる

コンテンツの質が上がるというよりも、整理がしっかり出来る事が結果としてコンテンツの質の向上につながると言った方がいいかもしれません。デバイス毎に設計がバラバラでないが故に、コンテンツの精査が自然と出来て、ユーザーの求めるコンテンツを深堀していく事が可能になります。デバイスごとだとどうしても情報整理が煩雑になり、精査に工数を取られる事になり、結果としてコンテンツの質が高まりません。

2.レスポンシブデザインのデメリット

レスポンシブデザインは主流になってはいませんが、必ずしもやらなければいけない訳ではありませんが、目的に応じてした方がいい場合、しない方がいい場合もあります!そこはWEBサイトの目的に応じて決めていきましょう。

【1】制作工数がかかる

管理工数が減る代わりにデバイスごとに作りコーディングをする訳なので、制作時の工数はどうしても必要になります。ただ反面管理・運用の工数は減りますので、レスポンシブデザインを行う際はどうしても仕方がないと割り切る必要があります。

【2】スマートフォンの読み込みが遅くなる

HTMLは1つなので、PCと同じものを読み込ませるわけですから、どうしても時間がかかります。もちろん読み込まないものもある訳ですが、それでも読み込もうとするので、それだけ時間はかかってしまいますね。

【3】デザインが難しい

やはり何度も言うようにレスポンシブデザインはHTMLが1つなので、デバイスごとに細かな設定をしていくという事が難しいです。大きく見せ方に変化をつける事も出来ないですし、可能性として画像の解像度が異なるデバイスなどが出て規格が変わるとサイトの構築そのものを変更する事もあるかもしれません。(あくまで可能性ですが…)

3.レスポンシブデザインを作る時の注意点

レスポンシブデザインのWEBサイトを作る際には特に注意した方が良い所をまとめました。特にメリット先行で進めてしまって、デメリットに気づいた時には制作が進まなくなるなんてケースもありますから、十分注意していきましょう。

【1】初期設計が大事

よくあるケースが営業が取ってきて、ディレクターが大枠決めてきたけど…デザイナーやコーダーの所に降りてくる頃には、絶対無理やろ…となるケース。知り合いの会社さんでも炎上して、社内で揉めているなんて話もあるくらいです。レスポンシブデザインは制作に取り掛かる前の設計が本当に肝心要。ここにしっかりと時間をかけてデバイスごとの表示についてもしっかりと決めておきましょう。

【2】画像は小さくしよう

画像は多ければ多いほど、読み込むのに時間がかかるので、画像は出来うる限り小さくしましょう。CSSやWEBフォントを使ったり、CSSスプライトなんかで画像の表示が負担にならない様にしておくことが重要です。

【3】ブレイクポイントの設定

どの画面でも見やすいブレイクポイントをしっかりと設定する必要があります。ブレイクポイントがしっかり設定できていないと、表示がずれたり、文字がはみ出したりという事になってしまいます。以前は768pxを基準として設定する考え方が一般的ではありましたが、「iPhone X」とか「galaxy」なんかは解像度がちょっとおかしい(笑)ので、デバイス依存の768pxだとブレイクポイントを設定し直す必要も出てきます。

現在のレベルスのブレイクポイントのサンプル数値
スマホ縦 :480px
スマホ横 :600px
タブレット:960px
パソコン :1280px

デザイン理論でも“8の倍数”が美しいという理論・観点に基づいて、全てが8の倍数になる様になっています。

【4】:hoverの取扱い

これは覚えておいて欲しいのですが、「:hover」はスマホにはない概念です。というより、本当に使いにくくなるだけなので、:hoverを指定するのはPC表示時の場合に限るとsassで設定をしましょう!CSSの:hoverがまだわからないよ!って人は基本なので勉強してみて下さいね。一つ一つ知識を蓄えていきましょう。

4.まとめ

今回はレスポンシブデザインについて、少しお話をさせて頂きましたが、猫も杓子もなんでもレスポンシブデザインにすればいい訳ではありません。そのサイトのクライアントの要望や希望、運用方針やユーザー層、扱う商材、サービスに応じて導入の可否を考える必要があります。ただWEBサイトを作っていく上で、レスポンシブデザインに全く対応できないでは困ってしまうので、スキルとしては身につけておいた方が案件の幅や出来る仕事が広がる事は間違いないと思います。

「WEB制作を仕事にしたい」とか「WEB制作を勉強している」人にとっては、今後絶対に必要なスキルなので、
勉強が進んだ段階でレスポンシブデザインにも挑戦をしてみるといいかもしれません。

制作事業

システム開発事業

広告運用事業

メディア事業

SES事業

最新のブログ/コラム