Column
コラム
スマホ対応って何？
スマホ対応とは？
スマホ対応とは、ホームページをスマートフォンでも見やすく、操作しやすい状態にすることです。
単にパソコン用のホームページを小さく表示するだけではありません。
スマートフォンはパソコンと比べて画面が小さく、マウスではなく指で操作します。
そのため、
-
- 文字を読みやすくする
- ボタンを押しやすくする
- メニューを使いやすくする
- 画像を画面に合わせる
- 横スクロールが出ないようにする
- 問い合わせや電話をしやすくする
など、スマホでの使い方に合わせてホームページを調整する必要があります。
現在では、企業ホームページでもスマホ対応は基本的なものとなっています。
スマホ対応していないとどう見える？
スマホ対応していないホームページをスマートフォンで見ると、パソコン用の画面がそのまま小さく表示されることがあります。
その場合、
-
- 文字が小さくて読みにくい
- 画面を拡大しないと内容が見えない
- 横にスクロールしないとページ全体が見えない
- ボタンやリンクが小さくて押しにくい
- メニューが細かすぎて操作しにくい
- 画像や表が画面からはみ出す
といったことが起こります。
ホームページ自体は表示されていても、見る人にとってはかなり不便です。
特に、会社名を検索して住所を確認する、採用情報を見る、問い合わせをするといった場面では、スマホで短時間に情報を探す人も多くいます。
必要な情報が見つけにくいと、そのままホームページを閉じられてしまうこともあります。
レスポンシブWebデザインって何？
現在のスマホ対応でよく使われているのが、「レスポンシブWebデザイン」です。
レスポンシブWebデザインとは、見る端末の画面幅に合わせて、自動的に見やすいレイアウトへ変化させる方法です。
たとえば、パソコンでは、
「会社案内」「サービス」「採用情報」「お問い合わせ」
と横に並んでいたメニューが、スマホではボタンを押して開くメニューに変わることがあります。
また、パソコンでは3つ横並びだった内容が、スマホでは縦に1つずつ並ぶこともあります。
つまり、同じホームページでも、
-
- パソコン
- タブレット
- スマートフォン
それぞれの画面幅に合わせて、レイアウトや見せ方を変える仕組みです。
現在では、このレスポンシブWebデザインを使ってスマホ対応する方法が一般的です。
昔はスマホ専用サイトを作ることもあった
現在はレスポンシブWebデザインが一般的ですが、以前はパソコン用とスマートフォン用で、別々のホームページを作ることもありました。
たとえば、
「www.example.jp」はパソコン用、
「sp.example.jp」はスマートフォン用、
というように、端末によって表示するホームページそのものを分ける方法です。
スマートフォン専用のページを作れるというメリットはありますが、パソコン版とスマホ版の両方を更新する必要があり、管理が複雑になりやすいという面もあります。
現在は、ひとつのホームページをさまざまな画面幅に対応させるレスポンシブWebデザインが使われることが多くなっています。
スマホ対応すると何が変わる？
スマホ対応では、画面の横幅だけでなく、さまざまな部分をスマホ向けに調整します。
横並びを縦並びにする
パソコンは横に広い画面なので、複数の情報を横並びで表示できます。
一方、スマートフォンは縦長の画面です。
そのため、パソコンで3つ横並びになっている内容を、スマホでは縦に並べるなど、画面に合わせてレイアウトを変更します。
メニューの形を変える
パソコンでは、ホームページ上部にメニューを横並びで表示することができます。
スマートフォンではスペースが限られているため、「三本線」のボタンなどを押すとメニューが開く形にすることがあります。
こうしたメニューは「ハンバーガーメニュー」と呼ばれています。
文字を読みやすくする
パソコンでは問題なく読める文字でも、そのままスマホに表示すると小さく感じることがあります。
スマホでは、拡大しなくても読める文字サイズや行間に調整します。
文章が長い場合は、見出しを入れたり、段落を分けたりして読みやすくすることも大切です。
ボタンを押しやすくする
パソコンではマウスで細かな場所をクリックできますが、スマートフォンでは指で操作します。
そのため、
-
- ボタンを大きくする
- リンク同士の間隔を空ける
- 押せる場所をわかりやすくする
などの対応が必要です。
特に「お問い合わせ」「応募する」「電話する」などのボタンは、押しやすさが重要です。
画像の見え方を変える
パソコンでは横長の写真がきれいに見えていても、スマホでは画面幅が狭いため、重要な部分が小さくなったり、切れてしまったりすることがあります。
そのため、スマホでは、
-
- 画像の表示位置を変える
- トリミング方法を変える
- スマホ用の画像を用意する
といった対応をすることもあります。
表の見せ方を変える
料金表や比較表など、横に長い表はスマホでは表示しにくいものです。
そのため、
-
- 横スクロールできるようにする
- 縦並びに変更する
- 表を分ける
- 必要な情報だけを表示する
など、スマホでも内容を確認できるように調整します。
スマホならではの機能もある
スマホ対応では、見た目だけでなく、スマートフォンだからできる操作も考えます。
電話番号をタップして電話をかける
スマートフォンでは、ホームページに掲載されている電話番号をタップして、そのまま電話をかけられるようにできます。
店舗や会社への問い合わせが多いホームページでは便利な機能です。
地図を開く
会社や店舗の住所からGoogleマップなどを開き、そのまま経路を調べられるようにすることもできます。
外出先から会社や店舗を探している人にとって使いやすくなります。
メールや問い合わせにつなげる
メールアドレスをタップしてメールアプリを開いたり、画面下部に問い合わせボタンを固定したりすることもあります。
スマートフォンでは、「ホームページを見る」だけでなく、見たあとそのまま行動することも多いため、こうした導線も大切です。
表示速度もスマホ対応のひとつ
スマートフォンでは、必ずしもWi-Fi環境でホームページを見るとは限りません。
外出先でモバイル通信を使って閲覧することもあります。
そのため、画像や動画の容量が大きすぎると、ページが表示されるまでに時間がかかる場合があります。
スマホ対応では、
-
- 画像を必要以上に大きくしない
- 画像を圧縮する
- 不要な動画や動きを増やしすぎない
- ページ全体を重くしすぎない
といったことも考えます。
スマホで見たときに画面がきれいでも、表示に時間がかかりすぎると使いやすいホームページとは言えません。
スマホを中心に考えて作ることもある
以前は、まずパソコン版のホームページを作り、それをスマートフォンでも見やすいように調整する考え方が一般的でした。
現在では、ホームページの目的や利用する人によって、最初からスマートフォンで見ることを中心に考えて制作することもあります。
こうした考え方を「モバイルファースト」と呼ぶことがあります。
たとえば、
-
- SNSからアクセスするページ
- QRコードからアクセスするページ
- キャンペーンサイト
- 若い人を対象にした採用ページ
- 店舗でその場で確認するページ
などは、アクセスする人の多くがスマートフォンということもあります。
その場合は、
-
- 最初に何を見せるのか
- どの順番で情報を見せるのか
- どこにボタンを置くのか
- 電話や問い合わせにつなげるのか
などを、スマートフォンの画面を基準に考えていきます。
用途によっては、スマートフォンでの利用をほぼ前提として作られるWebサイトやWebサービスもあります。
ただし、会社のホームページでは、取引先や求職者がパソコンから見ることもあります。
そのため、「スマホだけ見られればいい」と考えるのではなく、パソコンとスマホの両方で使いやすい状態にしておくことが大切です。
スマホ対応しているか確認するには？
自社のホームページがスマホ対応しているかどうかは、簡単に確認できます。
パソコンで見ている場合は、ブラウザのウィンドウ幅を少しずつ狭くしてみてください。
画面幅に合わせて、
-
- 横並びの内容が縦並びになる
- メニューの形が変わる
- 文字や画像の大きさが調整される
など、レイアウトが変化する場合は、スマホ対応されていることが多いです。
スマートフォンで見ている場合は、パソコン版のホームページがそのまま小さく表示されていないか確認してみましょう。
文字がスマホに合った大きさになっていたり、メニューやレイアウトがスマホ向けに変わっていれば、スマホ対応されていると考えられます。
より確実に確認したい場合は、実際にパソコンとスマートフォンの両方で同じページを見比べてみるとわかりやすいです。
まとめ
スマホ対応とは、ホームページをスマートフォンの小さな画面でも見やすく、操作しやすい状態にすることです。
単にパソコン版を小さく表示するのではなく、
-
- 画面幅に合わせてレイアウトを変更する
- 文字を読みやすくする
- ボタンを押しやすくする
- メニューを使いやすくする
- 写真や表を見やすくする
- 電話や地図などスマホならではの操作に対応する
- 表示速度を考える
など、さまざまな対応があります。
現在では、レスポンシブWebデザインによって、パソコン・タブレット・スマートフォンにひとつのホームページで対応する方法が一般的です。
また、スマートフォンからのアクセスが多いホームページでは、最初からスマホを中心に考える「モバイルファースト」という考え方もあります。
「スマホでもホームページが表示されている」だけではなく、実際に文字を読んだり、メニューを開いたり、問い合わせをしたりしやすい状態になっているかが大切です。
すでにホームページを運用している場合は、一度自分のスマートフォンで開いて、使いにくいところがないか確認してみるとよいでしょう。
関連コラム
株式会社サーフボードは、福井で最も歴史のあるホームページ制作会社です。
1996年創業以来、ホームページ制作を一筋に800社以上のホームページやWEBシステムの構築をしてまいりました。
ホームページ制作でお困りのことやご相談がございましたら、お気軽にお問合せくださいませ。