見づらいサイトは低評価？スマホサイト制作で押さえるべき９つの注意点【2024年最新版】

世界的な調査会社「ニールセン」が発表した2015年4月時点のデータによると、スマホからのインターネット利用者は年々増加を続けているのに対し、PCからのインターネット利用者は5,100万人から横ばいに推移しているとのこと。
家でもどこでも好きな時にネットが見られるスマホは、今やPCよりも多くのユーザーに利用されています。

スマホからのネット利用者がPCよりも多いとなれば、会社としてもはや「PCサイトがあれば十分」とは言っていられない状況ではありませんか？
スマホに対応したサイトを用意しなければ、せっかくの集客チャンスを逃してしまう事態に陥るかもしれません。
今もなお増加傾向にあるスマホユーザーを確実に取り込むためにも、会社にとってスマホサイトの制作は急務だと言えるでしょう。

この記事では「スマホサイトを制作しよう！」と考えた際に最低限は押さえておきたい、スマホサイト制作で重要なポイントや注意点について説明したいと思います。

□関連記事：スマホサイト制作におすすめなホームページ制作会社
□関連記事：ユーザーを満足させるスマホサイトの作り方

急増しているスマホユーザーを取り込むことだけが、スマホサイトを制作するメリットなのでしょうか？
実はそうではありません。2016年にGoogleは「Mobile First Index（モバイル ファースト インデックス）」という、新たな検索仕様の導入を発表しました。

これにより、従来はスマホ（モバイル）からの検索であってもPCサイトの評価を基準に構成された検索結果が提示されていましたが、今後は逆にスマホ（モバイル）サイトの評価が主体になってきます。

つまり、自社のPCサイトで検索上位を獲得していたとしても、スマホサイトがなければ検索上位から陥落する恐れもあるということです。
このようにスマホサイトは現状メリットしかない訳ですから、検索順位を気にしている会社がスマホサイトを制作しないでいる方が考えられないと言えるでしょう。

では実際に「スマホサイトを作らないとやばい！」と考えた際に、既存のPCサイトをそのままスマホサイトとして活かすことができるのか、それともなにか別の方法があるのか。
次の項目で取り上げます。

説明するまでもなく、企業のPCサイトはスマホでも見ることは可能です。
しかし、PCで見ることを前提に作られたサイトをスマホで見るとなると、どうしても文字や写真のサイズが合わず、ボタンを押しても反応しない…なんていうことも。

そうしたPCサイトの欠点を補えるものとしてスマホサイト制作時に採用されている３つの方法について、メリットとデメリットも含め説明します。

近年多くの企業が採用している方法が、PCとスマホの両方に対応した画面表示が自動でできる「レスポンシブデザイン」です。
「レスポンシブデザイン」はブラウザの横幅を判断基準にCSS（スタイルシート）を切り替える手法で、ひとつのHTMLでさまざまな環境に対応できます。

また、PCサイトもスマホサイトも同一URLとなるため、TwitterやSNSで共有された場合でも「スマホ用だからPCだと見れない…」というようなこともありません。

ただし、既存のPCサイトを「レスポンシブデザイン」に変更するとなると通常サイトを制作するよりも難しく、場合によっては制作会社に依頼することになるでしょう

スマホ最適化ツールには、変換タグをPCサイトに貼るだけのものや、サーバーを経由することでスマホ向けの表示を行うものなどがあります。
業者に委託する形になるため、スマホサイト制作にかかる初期費用や手間を軽減させられるのがメリットです。

全キャリア・全機種に対応していたり、スマホ対応サイト限定でデザインを指定することも可能。
ただし、ツールの利用料金が毎月かかってくる場合もあるのが痛いところです。

PCサイトとは別に、スマホ専用のサイトを制作してしまうのもひとつの方法です。
スマホ専用サイトを制作する利点は、なんといってもスマホ利用に特化したサイト構築ができること。
はじめからスマホユーザーを対象としているため、スマホにもっとも適した、軽くて見やすいサイトを制作することが可能です。

ただしスマホ専用サイトの場合には、「既存のPCサイトをコピーしたサイト」だと思われないような対応策が必要になります。

スマホに対応したサイトを制作するには、おもに３つの方法があることが分かったかと思います。
自社で作るか、制作会社に依頼するか、どの方法を選択するにしても、スマホサイト制作で一番重要になってくるのは設計書作りです。

スマホサイトの設計書は、どうすればユーザーにとって有益で、利用したいと思えるサイトになるのか、ユーザーの気持ちになって考える必要があります。
頭の中にある考えを整理しながら書き出し、設計書にして行くことで、自社サイトの方向性が明確になってくるはずです。
この設計書作りがうまくできないと、いくらスマホサイトを制作してみたところでビジネスには直結しません。

スマホサイトの設計書を作るにはまず、目的の明確化とターゲットの選定が必要です。
通信販売を行っている会社であれば、スマホを利用して商品を購入する場合の使いやすさや、見やすさという部分にこだわってサイトを制作しなければなりません。

さらにどの年代がどういうシチュエーションの時に自社のスマホサイトを利用するのか、ターゲットを明確にすることで、もっとも適したビジネスを展開させることができます。

スマホサイトを制作する際には、離脱を少なくするためのサイト設計が重要となってきます。
そのためにも現状のPCサイトのコンテンツを一度、Excelなどを使って階層別にすべて書き出してみましょう。

スマホサイトでは一般的に、次の階層に進むごとにサイトの離脱数が多くなると言われています。
人気のあるコンテンツやユーザーが必要とするだろうコンテンツは上部の階層に持ってくるなど、いかにサイトから離脱させないかを意識して設計する必要があります。
スマホサイトを制作する際はPCサイトの構成をそのまま持ってくるのではなく、いかにスマホで使いやすいサイト構成にするかを考えて設計書を作成してください。

コンテンツの構成がまとまってきたら、サイトデザインのラフ案を書いてみると良いでしょう。
実際にラフ案を書いてみることで、スマホサイトが完成した際のイメージが掴みやすくなります。

上記２点をもとに作成した設計書があれば、スマホサイト制作を外部に依頼する場合にも「こういうサイトにしたい」という要望をスムーズに伝えることができます。
サイトの設計書は時間をかけてしっかりと作るよう心掛けてください。

設計書も仕上がり、いざスマホサイト制作へ！
しかし、普段目にしているスマホサイトでも制作するとなるとどういう点に注意すればいいのか、案外分からないものです。
ここではPCサイトとは別にスマホ専用サイトを作ることを前提に、最低限は知っておきたい注意点について説明します。

スマホサイトとひと口にいっても、ブラウザの幅は多種多様です。
そのため、指定した値で大きさが固定されるピクセルは、スマホサイト制作には適していないことがわかります。
どのブラウザ幅にも対応できるようにするには、要素や画像の横幅をパーセンテージで設定しておくのがおすすめです。

サイト内にある画像の容量が大きいと、ページを読み込む速度は当然遅くなります。
読み込み速度が遅いとユーザーのストレスにつながり、高確率でサイトから離脱されてしまいます。
ユーザーのストレスを軽減するためにも画像は可能な限りCSSで対応し、サイトの軽量化を図ることが大事です。

見やすさが重要となるスマホサイトでは、文字の大きさも重要です。
多くの情報を伝えたいからと小さな文字で表示させても、スマホの画面ではどうしても見づらくなってしまいます。
テキストとして使用する場合には、文字の大きさは14pt以上で制作すると見やすいです。

また、日本語のデバイスフォントについては、ヒラギノ角ゴシック体（ヒラギノ角ゴ）のW3とW6だけしか使用できないiPhoneに合わせて制作しておくと良いかもしれません。
ちなみにテキストの行間が詰まりすぎていても圧迫感があるため、150%から190%の間で行間を指定するのが好ましいと言われています。

直接画面を指でタッチして操作するスマホでは、指で押すことを想定したボタンサイズにしなければなりません。
大体のユーザーは人差し指、または親指でスマホ画面を操作すると思われるので、どちらの指でも押しやすい44px以上の大きさで制作します。

リンクボタンを押す際に別のボタンまで押してしまうようなサイズで作ってしまうと、ユーザーにとってはストレスでしかないでしょう。

PCサイトではよく使われている動画表示技術「Flash（フラッシュ）」。
しかし、国内で66.2%のスマホOSシェアを誇るiPhoneでは、「Flash」を表示させることはできません。
多くのユーザーが見られない「Flash」を使用するよりも、「JavaScript」もしくは「CSS3」を使って動画やアニメーションをサイトに設置する方が現実的だといえます。

見やすさを重視するスマホサイトは、メインコンテンツだけを表示させる（１カラム）というシンプルなレイアウトが基本。
PCサイトと同じようにカテゴリやメニューを表示させる「サイドバー」を利用したい場合には、タップすることで開閉する「アコーディオンメニュー」を採用するのがおすすめです。

PCと異なり、場所によってはどうしても通信速度が遅くなるのがスマホです。
通信速度が遅い時に何度もページを移動しなければならないサイトでは、表示の度に待たされ、ユーザーはイライラしてしまいます。

ユーザーのストレスを減らすことはサイトの滞在時間の長さにもつながるため、可能な限り画面遷移の少ないサイト構成にするよう心がけましょう。

「3‐4. ボタンの大きさ」でもふれましたが、スマホはあくまでも指でタッチして操作する端末です。
そのため、PCサイトと同じ感覚でスマホサイトを制作すると、どうしても操作性の悪いインターフェイスになってしまいます。

「指を使う場合にはこうした方が良いかも」「この方が指での操作性は良いかも」と、ユーザー目線に立って考えることが必要です。

ユーザーによっては、スマホでもPC版のサイトが見たいという場合もあります。
そうしたニーズに応えられるよう、スマホサイト内に「PC版サイトへの切り替えボタン」を設置しておくと便利です。
わかりやすい、シンプルなボタンにしておけば、ユーザーも迷うことなくPC版サイトに切り替えることができるでしょう。

つづいては、ホームページ制作にかかる費用相場をご紹介します。ホームページ制作の価格は、依頼する内容やページ数、機能により大きく変わります。具体的な費用目安は以下の通りです。

ホームページ制作の費用相場をご紹介しました。より正確な費用を知りたい方は料金シミュレーターをご利用ください。

この記事ではスマホ専用サイトの制作をメインに、PCサイトをスマホサイトに対応させる方法や設計書の必要性、最低限押さえておきたい注意点について紹介しました。
自社でPCサイトを作ったことがない場合でもしっかりとしたサイトの設計書さえあれば、あとは意外と簡単にスマホサイトを作ることができるでしょう。

もちろん、スマホサイトを作る際の注意点をすべて押さえたからといって、すぐに集客を狙えるスマホサイトにはなりません。
ユーザーにとって「ためになる」「また利用したい」と思えるようなスマホサイトにするためには、サイトの中身を充実させる必要があるでしょう。

Googleの「モバイル ファースト インデックス」のおかげで、スマホサイトの中身を充実させればさせるほど、検索結果に影響を与えることができる時代です。
今後もユーザーからの検索数は増加の一途をたどるでしょうスマホサイトのメリットを最大限に活かして、さらなるビジネスの発展につなげていきましょう。

「簡単に作れるとはいわれても、自社で作るのはさすがに難しいかも…」と、スマホサイト制作をためらう場合もあるかもしれません。
その際は日本最大級の業者比較サイト 「アイミツ」で、スマホサイト制作を扱っている業者を探してみてはいかがですか？

「アイミツ」ではあなたの会社のお悩みやご希望・ご要望に応じて、もっとも適したスマホサイト制作業者を無料で紹介させていただきます。

※スマホサイトの制作が得意な会社はこちらの記事でも紹介しています！
→スマホに強いホームページ制作会社5選