レスポンシブデザインを簡単に説明します【メリットとデメリットも】

スマホが普及しきった現在において、ホームページもパソコン用とスマホ用の両方に対応しなければなりません。
そこで、KeiStyleではレスポンシブデザインという方法でホームページを作成しています。

この方法で作成すると、パソコン以外のスマホなどの小さな画面でホームページを閲覧した場合でも、その画面サイズに最適化されて表示されますので非常に閲覧しやすくなります。

この説明だけでは、どういう事か理解しにくいと思いますので、もう少し詳しく解説させて頂きます。

尚、ここではレスポンシブデザインを作成する方法を説明するのではなく、特徴や仕組みなどホームページ制作依頼者側へ向けての説明となります。

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

数年前まではスマホに対応しているホームページもまだまだ少なく、スマホのような小さな画面ではそのサイズに入るように全体を縮小して表示されていました。

そのため、文字を読むためには画面をピンチアウト（指2本で広げる動作）をする必要があり、お世辞にも利便性が良いとは言えませんでした。

そこでスマホの普及に伴い、多く使われるようになったのがレスポンシブデザインです。
それでは、このレスポンシブデザインについて説明していきます。

レスポンシブデザインの特徴

レスポンシブデザインの1番の特徴は、どんな画面サイズでも閲覧できるホームページデザインと言う事になります。

パソコンの画面が横長なのに対し、スマホの画面は厄介なことに縦長になっています。
なので、従来はパソコン用のホームページとスマホ用のホームページの2種類を別々に作り、それぞれの場合で切り替えて表示させていました。

それと違いレスポンシブデザインでは、画面のサイズに関係なく横並びのレイアウトになっているパソコン用ホームページでも、スマホで見た場合には縦に配置させることで、利便性を上げています。

これがレスポンシブデザインです。

もう少し分かりやすいように、画像を見ながら説明させて頂きます。

スマホに対応したホームページはこんな感じです

まずは一般的なパソコン用ホームページの表示から見てみましょう。

普通はこんな感じで表示されていますよね。
特に説明の必要がないと思います。

では、このホームページをスマホで見た場合ですが、以下のように表示されます。

パソコンでは右側にあった画像が上に配置され、左側にあったテキストが画像の下側に表示させています。
文章も画面幅に合わせて改行されますので、閲覧しやすくなっています。

また、上部に配置していたメニューボタンも【MENU】タブに切り替わり、ここをタップするとメニューが展開されるようになります。

こうして横長のデザインを縦長に表示することにより、スマホの画面に最適化させているのがレスポンシブデザインです。

レスポンシブデザインはSEOに有利

レスポンシブデザインはGoogleからも推奨されています。
と言う事は、SEOにも有利という事になります。

このへんの事は下記のページでは詳しく説明していますので、是非ご覧になってください。

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

レスポンシブデザインのメリットをいくつかお話しいたしましたが、もう少し付け加えて説明させて頂きます。

コストが抑えられる

どうしてコストが抑えられるのかと言うと、先ほどもお話しした通り、従来はパソコン用とスマホ用の2つのホームページを制作していました。

それがレスポンシブデザインだと1つのホームページで済むために、単純に計算して費用は1/2になると言う事です。

実際には、それなりに手間がかかりますので費用が半分になる事はないのですが、それでもかなりのコストダウンにはなります。

Googleが推奨

これも先ほど書きましたが、レスポンシブデザインはGoogleが推奨しています。
Googleが推奨すると言う事は以下の事が考えられます。

主にこの2つです。
要するにビジネスには最適なホームページと言う事です。

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

スマホ専用のサイトより多少表示に時間がかかる

ホームページの構成上、画面表示に若干時間がかかります。
と言っても、ほとんど感じない程度ですので、それほど大きな問題とは言えません。

また、回線が5Gになれば、この問題は全く無くなると言えます。

デザインで妥協しないといけない場合がある

パソコンとスマホの両方のサイズで表示させなければいけないので、それぞれを専用に作るよりは多少デザイン的に妥協が必要です。

これもそれほど極端に妥協する訳ではありませんので、特に気にする必要もないレベルです。

まとめ

以上がレスポンシブデザインについての説明となります。

簡単にまとめますと、コストを抑えつつパソコンとスマホの両方に対応できるのが、レスポンシブデザインと言うことになります。
また、Googleも推奨しているくらいのデザインですので、ビジネスに使うには最適だとも言えます。

• << 前の記事へ
  「特別定額給付金オンライン申請のミス多発に思うこと」　
• 　次の記事へ >>
  「ホームページがあると大きな企業が相手でも生き残れる」