今回は現在のホームページ制作では主流となっているレスポンシブデザインについてご説明したいと思います。

レスポンシブデザインとは？

レスポンシブデザインは、レスポンシブウェブデザイン（Responsive Web Design）とも呼ばれ、「RWD」と略すこともあります。

端末の横幅に合わせてレイアウトを変化させる

スマートフォンやタブレットに対応させる方法の一つで、端末の横幅に合わせてレイアウトを自動で切り替えるのが大きな特徴です。

ハルリのトップページだとこのようになります（左がパソコン、右がスマートフォン）

レスポンシブウェブデザイン　ハルリ

HTMLが共通

従来のスマートフォン対応は、端末毎に別々のHTMLが必要でしたが、レスポンシブデザインは、端末に関係なく、HTMLが全て共通になります。

HTMLはテキストが書いてあったり、画像を指定するファイルで、CSSは文字を大きくしたり、左に寄せるなどのレイアウトを指定するファイルです（ホームページは基本的にHTMLとCSSの2つのファイルが必要です）

従来のスマートフォン対応は、スマートフォン用のホームページを別に作っていたので、パソコン用とスマートフォン用で2つのホームページがある状態（タブレットにも対応させる場合は3つずつ）で、それぞれのHTMLとCSSが必要でした。

従来のスマートフォン対応

レスポンシブデザインでは、端末に合わせてレイアウトを切り替えるので、HTMLが共通になり、1つで済みます。

レスポンシブデザインでのスマートフォン対応

レスポンシブデザインにするメリット

1、検索エンジンに強くなる

従来のスマートフォン対応では、パソコン用とスマートフォン用で、別々のURLにしなくてはいけませんでしたが、HTMLが共通になることで、同一のURLになり、検索エンジンが認識しやすくなり、検索エンジンに強くなります。

グーグルもレスポンシブデザインを推奨しています。

2、ユーザーの利便性が向上する

同じく同一のURLになることで、ユーザーがアクセスしやすくなり、利便性が向上します。

3、修正が楽になる

従来のスマートフォン対応では、HTMLが別々なので、テキストの修正や画像の差し替えをする際には、それぞれのHTMLを修正しなくてはいけませんでした。

レスポンシブデザインはHTMLが共通のため、修正が一度で済むようになり、修正が楽になりました。

レスポンシブデザインにするデメリット

1、デザインに制約がある

レスポンシブデザインは基本的に端末に合わせてレイアウトを切り替えていく方法なので、デザインに制約があり、デザインの自由度が制限されます。

2、デザインが難しくなる

これは制作サイドのデメリットですが、デザインに制約がある分、ホームページのデザインが難しくなります。

レスポンシブデザインで注意すること

1、タブレット対応も忘れずに

スマートフォンばかり注目されがちですが、タブレットでのアクセスも無視できない数がありますので、タブレットの対応も忘れないようにしましょう。

あまり制作費用が安いと、スマートフォンだけで、タブレットには対応していない可能性があります。

2、特定の端末の時に非表示を多用しない

デザインを楽にするために、「スマートフォンの時は非表示にする」または「パソコンの時は非表示にする」という方法を多用するホームページ制作会社もありますが、あまり多用すると、スパムと見なされて、検索エンジンからペナルティを受ける可能性があります。

また、ホームページの作り方としても、あまり良い作り方ではありません。

全く使わないのは難しいですが、多用する作りになっていないか注意が必要です。

個人的には、せいぜい2、3箇所くらいが限度かと思っています。

まとめ

今ではホームページ制作の常識となっているレスポンシブデザインですが、以上のことを知っていれば安心かと思います。

ハルリでは、レスポンシブデザインのホームページ制作を行っております。

また、ご相談は無料となっておりますので、ホームページの制作・リニューアルをお考えの方は、ぜひハルリにお問い合わせください。