ホームページ制作について調べていると、「レスポンシブデザイン」という言葉を見かけることがあります。

レスポンシブデザインとは、簡単にいうと、パソコンやスマートフォンなど、見る画面に合わせてホームページを見やすく調整する方法です。

この記事では、レスポンシブデザインの基本から、スマートフォン対応が必要な理由、自分のホームページを確認するときのポイントまで分かりやすく紹介します。

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

レスポンシブデザインとは、見る人の画面サイズに合わせて、ホームページの表示を見やすく調整する方法です。

パソコン用とスマートフォン用に別々のホームページを用意するのではなく、同じホームページを、それぞれの画面に合わせて見やすく表示します。

パソコンとスマートフォンで表示を変える

レスポンシブデザインでは、同じ内容でも画面の大きさに合わせて、情報の並び方や見せ方を調整します。
たとえば、パソコンでは3つ横に並べている内容を、スマートフォンでは1つずつ縦に並べることがあります。
メニューも、パソコンでは横に並べ、スマートフォンではコンパクトなメニューに切り替えるなど、限られた画面でも使いやすい形に調整します。

内容そのものを変えるのではなく、それぞれの画面で見やすい形に整えるのが基本的な考え方です。

スマートフォンだけ見やすければいいわけではない

スマートフォン対応は大切ですが、会社のホームページはパソコンで見られることもあります。
そのため、「スマホだけ」「パソコンだけ」と考えるのではなく、どの画面で見ても情報が分かりやすいことが大切です。
同じ内容でも、パソコンでは横に並べた方が見やすく、スマートフォンでは縦に並べた方が見やすいことがあります。それぞれの画面に合わせて自然に見えるように調整します。

なぜスマートフォン対応が必要？

パソコン用に作られたホームページを、そのままスマートフォンで表示すると、文字やボタンが小さくなったり、ページが画面からはみ出したりすることがあります。

会社やサービスに興味を持ってホームページを開いても、内容を確認するたびに画面を拡大したり、横に動かしたりする必要があると、見る人にとって負担になります。

スマートフォンでは画面の幅が大きく変わる

パソコンとスマートフォンでは、表示できる画面の幅が大きく異なります。
パソコンでは問題なく読める文章や、きれいに並んでいる写真でも、そのまま小さな画面に表示すると見にくくなることがあります。
スマートフォンでは、小さな画面でも無理なく読める文字サイズや、情報の並び方に調整することが大切です。

指で操作しやすいことも大切

パソコンではマウスを使いますが、スマートフォンでは画面を指で操作します。
ボタンが小さかったり、リンク同士が近すぎたりすると、押したい場所とは違うところをタップしてしまうことがあります。
見た目だけでなく、メニューを開きやすいか、ボタンを押しやすいか、お問い合わせフォームを入力しやすいかなど、実際の使いやすさまで考えて調整することが大切です。

ホームページの見やすさや使いやすさについては、

スマホ対応できていないホームページで起こりやすいこと

スマートフォンでホームページを開いたときに見にくさや使いにくさがあると、内容が伝わりにくくなります。

文字や写真が見にくくなる

文字が小さすぎたり、写真が画面からはみ出したりすると、内容を確認するだけでも負担になります。
特に文章量が多いページでは、文字の大きさだけでなく、行間や余白も含めて読みやすく調整することが大切です。

ホームページ全体の見やすさについては、

メニューやボタンが操作しにくくなる

パソコン用のメニューをそのまま表示すると、スマートフォンでは項目が小さくなり、操作しにくくなることがあります。
電話やお問い合わせなどのボタンも、見つけやすさだけでなく、指で押しやすい大きさになっているかを確認します。

お問い合わせしにくくなる

ホームページの内容に興味を持っても、お問い合わせフォームが入力しにくかったり、お問い合わせボタンが見つからなかったりすると、相談まで進みにくくなります。
スマートフォンでは、ホームページを見るだけでなく、お問い合わせまで無理なく進めるかも確認しておきたいポイントです。

お問い合わせまでの導線を見直すポイントについては、

自分のホームページは大丈夫？スマホで確認してみよう

専門的な知識がなくても、まずは自分のスマートフォンでホームページを開くだけで確認できます。

• 文字を拡大しなくても読めるか
• 横にスクロールしなくても見られるか
• メニューを迷わず開けるか
• ボタンを押し間違えない大きさになっているか
• 電話やお問い合わせの場所がすぐ分かるか
• お問い合わせフォームを無理なく入力できるか

トップページだけでなく実際に操作して確認する

トップページがきれいに表示されていても、すべてのページが問題なく使えるとは限りません。

サービスページを読む、実績を見る、メニューからページを移動する、お問い合わせフォームを入力するなど、実際にホームページを見る人と同じように操作して確認することが大切です。
また、スマートフォンにもさまざまな画面サイズがあるため、可能であれば複数の端末や画面幅で確認します。

スマホ対応するには作り直しが必要？

スマートフォンで見にくいからといって、必ずホームページをすべて作り直さなければならないわけではありません。
現在のホームページがどのように作られているか、どこに問題があるかによって必要な対応は変わります。

部分的な修正で対応できる場合

現在のホームページの構造を活かせる場合は、スマートフォン用の表示を調整することで改善できることがあります。
文字サイズや余白、画像の表示方法、ボタンの大きさなど、問題のある部分を見直す方法です。
まず現在の状態を確認し、部分的な修正で対応できるかを判断します。

サイト全体を見直した方がいい場合

長く使っているホームページでは、スマートフォン対応だけでなく、デザインや掲載内容、ページ構成そのものが現在の事業と合わなくなっていることもあります。
その場合は、スマホ表示だけを部分的に直し続けるより、サイト全体を整理してリニューアルした方が運用しやすくなることもあります。

部分的な改善にするか、サイト全体を見直すか迷っている場合は、

KENZO724.がスマホ表示で確認していること

KENZO724.では、ホームページ制作時にパソコンだけでなく、スマートフォンでの見え方や使いやすさも確認しています。

• 文字が読みやすいか
• 写真が見やすく表示されているか
• メニューが使いやすいか
• ボタンが押しやすいか
• お問い合わせまで迷わず進めるか
• フォームが入力しやすいか

単に「スマホでも表示される」だけではなく、実際に使ったときに見にくいところや操作しにくいところがないかを確認することを大切にしています。

よくある質問

まとめ

レスポンシブデザインとは、パソコンやスマートフォンなど、見る画面に合わせてホームページを見やすく表示する方法です。

スマートフォンでは画面の大きさだけでなく、指で操作することも考えて、文字や写真、メニュー、ボタン、お問い合わせフォームなどを調整する必要があります。

まずは自分のスマートフォンでホームページを開き、トップページだけでなく、サービスページやお問い合わせフォームまで実際に操作してみてください。

見にくいところがあっても、必ずしもすべて作り直す必要はありません。今のホームページの状態を確認し、必要な範囲から改善していくことが大切です。