スマホ対応WEBサイトの作り方・デザインの注意点まとめ

本記事では、Webサイトのスマートフォン対応（スマホ対応）において、スムーズな対応の仕方と注意するべきポイント、またスマホを使ってサイト構築・編集できるツールについて解説します。

Webサイトを、パソコンだけでなくスマートフォンやタブレットなどのモバイル端末へ対応させることが一般的になってきています。ただ、パソコンとスマートフォンでは、画面の大きさそのものが違います。

よって、パソコンではうまく表示できていても、スマートフォンでは見えづらいサイトになってしまうことも珍しくありません。自分のサイトがスマホ対応できているか、できていなければ対応を検討しましょう。

1.　スマホ対応サイトとは

まずはスマートフォン対応サイト（スマホ対応サイト）の基本と、スマホ対応が求められる理由を紹介します。

スマホ対応サイト

スマホ対応サイトとは、スマートフォンの画面サイズに合わせてサイトデザインを設計した、スマートフォンでも見やすいサイトのことを指します。

パソコンの画面サイズに合わせて作られたWebサイトも、もちろんスマートフォンから閲覧はできます。しかしパソコンは横長の画面サイズがベースとなっているため、縦長でサイズも小さいスマートフォンでパソコン用サイトを表示すると表示崩れが発生しがちです。

• 文字が小さすぎる
• 画像が画面からはみ出している
• 表が崩れて表示される
• ボタンがタップしにくい

スマホ対応が必須な理由

スマートフォン、タブレットなどのモバイル端末の普及によって、Webサイトを閲覧する環境は激変しました。それまでのパソコンでインターネットをするというスタイルから、ボタン1つでスマートフォンやタブレットを起動して閲覧するというスタイルへ移行したのです。

総務省の情報通信白書（令和3年）によると、すでに国民の9割近くがスマートフォンを利用しています。20〜30代の若者ほどスマートフォン普及率が高い傾向にあり、さらに60代以上の世代でも80％がスマートフォンを利用しています。つまり、Webサイトのデザインを考える上でも、コンテンツを考える上でも、スマホからの閲覧を考慮する必要があるのです。

また、検索サイトの大手Googleは、2015年に「モバイルフレンドリーアップデート」を実施しました。これにより、スマホ対応ができているページが優先的に表示される仕様になりました。つまり、スマホ対応ができていないサイトは、SEOの観点からも不利になるのです。

さらにGoogleは、2018年から「モバイルファーストインデックス（MFI）」への移行を開始しました。検索サイトでは、ページ内容と検索キーワードとの関連度を判断し、検索結果を表示します。それまではパソコンで閲覧したときの内容を元にランキングが決定されていましたが、MFIの開始により、スマホで閲覧したときの内容を評価に使用する方針となったのです。

スマホ対応ができていないサイトであっても、スマホから閲覧できれば検索結果から消えることはありません。しかし、競合サイトがスマホ対応を終えている場合は、自社サイトの順位が相対的に下がる可能性があります。

もし、検索サイトからユーザーを誘導したい場合は、Webサイトのスマホ対応は必須と考えてよいでしょう。これまでのパソコンサイトと同様に、スマホユーザーも意識したサイト運営が大切になります。

スマホ最適化をご検討なら、リカイゼンにお任せください！
リカイゼンでは、熟練のマッチングスタッフが、希望条件に応じて適した方法、また対応可能な制作会社候補を選定し、無料紹介いたします。
まずはご相談からでもお気軽にご連絡ください。

2.　スマホ対応サイトの作り方

スマホ対応サイトの作り方は、2つに分かれます。

• レスポンシブ
• スマホ専用サイト

レスポンシブデザインの採用

レスポンシブデザインは、パソコンでもスマートフォンやタブレットでも関係なく1つのHTMLを構成し、デバイスごとにCSS（情報の大きさや位置などを表示指定）で表示を切り替える方法です。

最近のスマホ対応は、このレスポンシブを用いる手法が浸透しています。

レスポンシブデザインを採用するメリットは以下の4つです。

スマホ専用サイトの採用

パソコン版とは別にスマホ専用のページを作る方法もあります。これは、すでにパソコン版のWebサイトがあるものの、レスポンシブ化でモバイル版を組み込むのが困難な場合に用いる手法です。

スマホ専用サイトのメリットは、パソコンサイトに影響することなくモバイル版サイトを制作できる点です。

レスポンシブ対応やスマホ専用サイトの立ち上げをご検討なら、リカイゼンにお任せください！
リカイゼンでは、熟練のマッチングスタッフが、希望条件に応じて適した方法、また対応可能な制作会社候補を選定し、無料紹介いたします。
まずはご相談からでもお気軽にご連絡ください。

3.　スマホ対応サイト制作の注意点

ここでは、パソコン画面用に作ったWebサイトをスマホ対応させる際に、知っておきたいポイントや注意すべきポイントについて紹介します。

スクロールを前提としたサイト構成

パソコンで表示していたWebサイトを、そのままスマホ対応させるととても縦長なページになり、いくらスクロールしても最後までたどり着けないということが起こりがちです。

なぜなら、パソコン画面に対してモバイル画面では表示できる幅が小さく、一画面に表示できる量自体が少なくなるためです。

パソコンでは1行で表示されていた文がスマホでは2行〜3行になったり、パソコンでは小さく見えた画像がスマホでは画面いっぱいに表示されたりしてしまいます。

よってコンテンツ量が多いページは、スマホでは長すぎて「どこまで読んだかわからなくなった」「現在地はどこなの？」とユーザーを迷わせやすくなります。これでは、せっかくのスマホ対応が台無しです。

途中でユーザーから離脱されないためにも、情報の整理、コンテンツの配置、ページ遷移を含めてパソコン版以上に気を使うべきといえるでしょう。

文字サイズの選び方

パソコンとスマホでは、フォントの見え方も異なってきます。よってスマホ対応サイトでは、パソコンよりも狭い画面の中で、読み進めやすいフォントサイズや行間にする必要があります。

• 実際に多く使われているスマホ向けのフォントサイズ（本文）は16px。ほとんどのサイトが14〜18pxを選択している
• 行間は1.5〜2.0emが多い
• H1（一番大きい見出し）のフォントサイズは20〜25pxが多い

指で操作しやすいインターフェース

スマホでWebサイトを閲覧する際は、画面を指1本で操作することがほとんどです。スマホでは、クリックを「タップ」、画面をめくる操作を「スワイプ」といいます。また、指で「スクロール」して上から下へと読み進めます。

マウス操作とは勝手が違うため、ユーザビリティを高めるには指での操作をスムーズにできるようなデザインが重要です。

例えばボタンサイズも指でタップしやすく、押し間違えの少ないサイズにする必要があります。Googleの「Material Design」およびAppleの「Human Interface Guidelines」によると、タップ可能なエリア（ボタン）の推奨サイズは以下の通りです。

• 64dp × 36dp以上、または48dp × 48dp以上（Google推奨サイズ）
• 44dp × 44dp以上（Apple推奨サイズ）

ユーザビリティにも配慮したデザインでのスマホ最適化サイト制作をご検討の場合は、リカイゼンにお任せください！
リカイゼンでは、熟練のマッチングスタッフが、希望条件に応じて適した方法、また対応可能な制作会社候補を選定し、無料紹介いたします。
まずはご相談からでもお気軽にご連絡ください。

4.　スマホで管理・編集ができるサイト構築

スマホからの閲覧を前提としてサイトを作るのであれば、スマホでサイト編集ができたほうがサイトの管理・確認が楽になります。

ここではスマホを使ってサイトを作れるツールや、編集画面をスマホ対応させる方法について紹介します。

テンプレート・CMSが用意されているもの

CMSなどのサイト編集画面へアクセスして記事の作成・編集を行うツールを導入している場合、スマホからアクセスすれば編集は可能です。

• ブログ記事の執筆・編集
• 画像のアップロード
• インフォ情報の掲載

無料で利用できるツール

無料で利用できるWebサイト作成ツールのなかにも、スマホアプリでサイト構築・記事作成・編集が行えるものがあります。

• Jindo
• Wix
• Crayon など

• BASE
• STORES など

1. 新規登録してWebサイトのタイトルなどの基本情報を入力する
2. サイトに使いたいデザインテンプレート（初期レイアウト）を選ぶ
3. 編集したい部分を個別に変更していく

編集画面をスマホ対応可させる

紹介したようなホームページ作成ツールやブログサービスを使えない、または自社オリジナルで対応したいという場合は、編集画面をスマホ対応にしてしまうのも1つです。つまり、スマホで編集画面を行う前提で、編集画面のデザインもスマホ最適化を行うということです。

アプリを作るとなると大変ですが、この方法ならスマホからの編集も行いやすくなります。もちろん、パソコン画面からも編集は可能。Wi-Fi環境がない所からでも気軽にWebサイトを管理・編集したい場合に便利です。

ただし、どこからでもアクセスできて、サイト管理や操作できるということは、セキュリティリスクが増えることにもつながります。とくにコーポレートサイトの場合は、万が一のときに被害が大きくなりやすいので、セキュリティ対応もあわせて慎重に行うことをおすすめします。

5.　WEBサイトのスマホ対応のまとめ

今回は、Webサイトのスマホ対応について、基本的な知識とスマホ対応の方法、スマホ対応サイトを作る上で知っておいたほうがよいポイント、スマホでサイト構築・管理ができるツールを解説しました。

多くの人がスマートフォンでインターネットを利用する今の時代では、Webサイトをスマホ対応させることは当たり前になりつつあります。むしろ、スマホ利用者数の増加やSEOの観点から、スマホ対応をせずにいるとサイト運営に支障をきたすリスクがあるといえるでしょう。

運営している既存のWebがまだスマホ対応していない、またはこれから新しくWebサイトづくりを行う場合は、レスポンシブやスマホ専用サイトも含めて制作を検討することをおすすめします。