レスポンシブデザインとは?スマホに対応しているかの確認方法

ホームページやブログの制作に関わっていると、「レスポンシブWebデザイン」といった言葉をよく聞きますよね。

レスポンシブWebデザインは、現在のコンテンツではユーザーにとって重要な画面表示の方法です。

今回は、レスポンシブWebデザインの意味について、画像を使って解説しました。レスポンシブWebデザインのウェブサイトを作りたい人に役立つ内容となっていますので、最後までご覧ください。

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

どんな媒体を使っていても分かりやすい画面表示にする方法を、レスポンシブWebデザインといいます。

レスポンシブWebデザインはよく、「スマートフォンでも閲覧できるWebサイトにすること」という意味だと勘違いしている人もいます。

現在ではスマートフォンを使ってウェブサイトを閲覧している人が多くいますが、それだけではなくパソコンやタブレットで閲覧する人もいるでしょう。

そのときに画面表示が崩れているウェブサイトや、ほかの媒体で上手にタップできないウェブサイトは離脱の原因になります。

ユーザーが多いので、とくにスマートフォンに対応させることはもはや必須の項目になっています。

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

前述の通り、パソコンよりもスマートフォンのユーザーが多いので、レスポンシブWebデザインにすることが大切だと考えられています。

レスポンシブWebデザインにするメリットは、以下の通りです。

ウェブサイトの管理が楽になる

レスポンシブWebデザインは、スマートフォンとパソコンで同じURLを使用できます。

ほかの媒体に対応したために、URLが増えるわけではありません。

文章やリンクの貼り変えなどをする際でも一回の作業で済むので、ウェブサイトの管理が楽になります。

Googleから高い評価を得られる

ウェブサイトのURLがひとつということは、SEOの視点からみても有利です。

ユーザーが「どちらのURLを使うか」と迷う必要がないので拡散されやすく、外部リンクによるSEOの効果が得られるでしょう。

また、レスポンシブWebデザインに対応していると、Googleから高い評価を得られます。

2022年現在は、スマートフォンに対応しているウェブサイトが高い評価を得る傾向にあります。

SEO対策をしているウェブサイトは、レスポンシブWebデザインにしておくのがおすすめです。

レスポンシブWebデザインにするとどうなるのか

ここでは、具体的にレスポンシブWebデザインにするとどうなるのかを見ていきましょう。

具体例として、はじめに当ウェブサイト「BARIYOKA-ばりよか-」にて、パソコン表示画面とスマートフォンでの表示画面をご確認ください。

最初がパソコン画面からの表示で、その後がスマートフォン画面からの表示です。

▼パソコンから見たウェブサイト▼

レスポンシブ

▼スマートフォンから見たウェブサイト▼

これらのウェブサイトと合わせて、以下の項目を確認してください。

メニューの場所が異なる

同じウェブサイトでも、パソコン画面に表示されるとメニューは画面上部にありますが、スマートフォン用のウェブサイトだと隠れています。

しかし画面右上にある横三本線のリンクをタップすると、メニューを表示することが可能です。

トップ画像の大きさが異なる

パソコンからウェブサイトを閲覧すると、その画面に合わせて横長のトップ画像が表示されます。

しかしスマートフォンから閲覧したときに、トップ画像がスマートフォンの大きさに合わせて縦長になるわけです。

レスポンシブWebデザインを作るには

「レスポンシブWebデザイン」と聞くと難しい技術が必要だと感じますが、理解できないほど難しいやり方ではありません。基本的には以下の手順で完了します。

  1. meta viewportのタグを追加する(HTMLファイルなど)
  2. パソコンとスマートフォンの表示方法の違いを指定する(CSS)

レスポンシブWebデザインのやり方

以下は一例ですが、レスポンシブWebデザインの方法を紹介します。

基本のソースコード

全てのHTMLにおけるヘッダー部分に、以下を追記します。ほかにも指定する方法はありますが、基本的に以下のソースコードで対応できるでしょう。

【<meta name=”viewport” content=”width=device-width,initial-scale=1.0″>】

つぎに、メディアクエリを使ってCSSファイルに以下を追記します。

【@media screen and (min-width: 480px) { }】

適用するCSSを変更するコードのことを、メディアクエリといいます。

ここでは480pxと表示されていますが、この数字は変更が可能です。表示画面のサイズが0px~481pxなら、「481px」に変更するといいでしょう。

横並び表示を解除したいとき

スマートフォンの表示画面で横並びを解除したいときは、「float: none」の指示によって可能です。以下は、横並び表示を解除するソースコードの一例です。

@media screen and (max-width: 481px) {

test {

float: none;

}

img {

width: 100% ;

}

}

レスポンシブWebデザインにおける画面の確認方法

レスポンシブWebデザインに対応した後は、きちんと表示されているかをチェックしておきたいものです。

Googleのデベロッパーツールを使う

レスポンシブWebデザインに対応できているかを確認する際は、GoogleChromeのデベロッパーツールが使えますが、これはウェブサイトを編集したり構築したりするツールのことです。

簡単な3つの手順で確認できるので、ご自身のウェブサイトでも活用してください。

  1. 確認したいウェブサイトを開く
  2. F12のキーを押してデベロッパーツールを表示する
  3. Ctrl + Shift + Mを同時に押す

F12キーを押して3の手順を実行すると、以下の画面が表示されます。

「Am I Responsive?」のWebサイトを使う

「Am I Responsive?」を使うと、自分のウェブサイトがレスポンシブデザインであるかどうかをチェックできます。

Am I Responsive?はこちら ※外部サイトです

こちらのサイトの使用方法は、URLにアクセスして確認したいウェブサイトのURLを検索ボックスに入れるだけです。

上記のサイトをスクロールすると検索ボックスが表示されるので、確認したいURLを入れて「Go!」を押してください。

レスポンシブWebデザイン作成時の注意点

対応させる端末を考慮する

取引先から、「パソコンとスマートフォンに対応できるウェブサイトにしてほしい」と依頼を受けることもあると思います。

しかし、この言葉をそのまま受け取って仕事を進めると、2種類の端末には対応できたとしてもタブレットで見た際にデザインが崩れてしまうでしょう。

現在ではタブレットで見ている人もいるので、そのことを考慮してデザインを作るようにします。

画像ファイルを小さくする

スマートフォンは読み込みに時間がかかります。

そのため、画像を作るときになるべくファイルサイズを小さくすると、表示の際の負担を軽減できるでしょう。

設計はスマートフォンから行う

横幅があるウェブサイトを想定してデザインを作成すると、スマートフォンで閲覧した際に見にくくなります。

画面の幅がパソコンよりも小さいスマートフォンから設計することで、レスポンシブWebデザインが作りやすくなると考えられます。

レスポンシブWebデザインに対応しよう

レスポンシブWebデザインには複数の方法があるので、自社のウェブサイトに合わせて選択してください。

「BARIYOKA-ばりよか-」はホームページ制作会社です。レスポンシブWebデザイン対応のウェブサイトを作成しますので、相談だけでもお気軽にお問い合わせください。

関連記事

まずはお気軽にご相談ください!

どんなHPを作ればいいのですか?制作費⽤はいくら?まずは電話で相談にのって欲しいetc…
ホームページをまだ持っていない⽅もリニューアルをお考えの⽅も、お気軽にご相談ください。

フォームでのお問い合わせはこちら

お問い合わせ

お電話でのお問い合わせはこちら

TEL.092-725-5708

(平日9:30〜18:30)

PAGE TOP