ホームページに
必須のレスポンシブデザイン

WEBデザイン

スマホ対応

SERVICE [制作]

ホームページに必須のレスポンシブデザイン

1 レスポンシブデザインって何？
2 レスポンシブデザインは良いことだらけ、SEOにも強い
3 レスポンシブデザインの悪い点はほとんど問題になりません
4 ブレークポイントは基本的に3段階

レスポンシブデザインって何？

レスポンシブデザインとは、デバイスに応じてサイトのデザインや配置を最適化することです。

例えば、PC表示では横に並んでいるものを、スマホ表示では縦に並んで表示することで、
サイトが大きく表示されて見やすくなります。

もしレスポンシブデザインにしないと、PCでの表示がそのままスマホに小さく表示されてしまい、
非常に見づらくなってしまいます。

少し技術的なお話になりますが、1つのHTMLにCSSでデザインをして、スマホやPCの画面に対応させます。
1つのURLの中にPC版とスマホ版のデザインデータがあるイメージです。
アクセスしたデバイスに適したページに自動的に切り替わります。

昔は、PCとスマホに合わせたファイルが別々に作られていました為、異なるURLになり、メンテナンスするのが結構面倒でした。

現代ではPCよりもスマホを使う人が多いため、レスポンシブデザインにしているサイトが多いです。
特に女性でPCを使う人は男性に比べて少ないため、女性向けのサイトはレスポンシブデザインが必須でしょう。

レスポンシブデザインは良いことだらけ、SEOにも強い

レスポンシブデザインは次のような良い点があります。

ユーザーが見やすい
管理・修正が簡単
SEOに強い

サイトの大きさが画面サイズに対応すれば、文字や画像が小さすぎたり大きすぎたりしません。
よって、どのデバイスのユーザーも見やすいです。

ユーザーだけでなくサイトの運営者にとっても良いことがあります。
レスポンシブデザインにすれば1つのファイルでサイトを管理できるので、修正・追加が比較的簡単にできます。

さらに、レスポンシブデザインのサイトはSEOに強いです。
特にGoogleの検索エンジンはユーザーの利用しやすさが1番に考えられているので、
レスポンシブデザインにされていないサイトは検索順位が下がってしまいます。

レスポンシブデザインの悪い点はほとんど問題になりません

良い点の多いレスポンシブデザインですが、次のような悪い点もあります。

PC表示での妥協が必要
スマホでの読み込みが遅い
制作費用がかかる

例えば、テキストの量が多すぎるとスマホでは読みにくく、スクロールが大変です。
そこで、スマホのテキスト量を減らすと、PC表示でもテキスト量を減らすことになります。

ただし、細かな設定次第でPC版とスマホ版のテキスト量をそれぞれ変更することが出来ますので、読みやすさを考慮して調整していきます。主に、一旦PC版、スマホ版を作成し、実機で確認しながら、スマホ版のテキストやニュース数を削っていくのが一般的な流れになるかと考えます。

また、PCでは重い画像でも速く読み込めますが、スマホだと読み込みに時間がかかってしまいます。
解決するために、PC表示でも重い画像は諦めるという妥協が生じます。
しかし、うまく調節すればほとんど不都合無くサイトを作成できます。

と、重い画像＝高解像度の画像を諦める場合もありますが、そこも調整してPC版、スマホ版で別々の画像ファイルを用意しコントロールしていきます。PC版は重い動画を再生し、スマホ版は静止画で、といった切り替えもよく使われます。

また、レスポンシブデザインというオプションが付けばそれだけ費用がかかります。
しかし、現代においてスマホ・PCの両方に対応していないサイトはSEOで非常に不利です。
総合的に見ると、高い費用ではありません。

昔、といっても7～8年くらい前まではPC版とスマホ版を別々に作っていましたから、その時は費用的にも約2倍かかっていました。そこと比べると、随分優しいコスト感だと思えます。レスポンシブデザインは業者によっても異なりますが、PC版の費用に1.3倍～1.5倍くらいで、スマホ版も作成できる感じかと、体感的に思えます。ですが、最近は、見積もりにも「レスポンシブデザイン対応」とかは書かなくなってきました。「PC版/SP版といえば＝レスポンシブ」という感じです。