ユーザーを満足させるスマホサイトの作り方｜パソコン用だけではダメ！注意すべきポイントを紹介【2024年最新版】

スマホの利用者数は年々増えており、現在約8割の人がスマホを保有しています。

InstagramやtwitterなどのSNSの普及も伴って、今の時代パソコンを利用するよりも、スマホを利用する人の割合の方が多くなり、その結果、ホームページを作る際にもスマホ対応が必須となっています。

そこで今回は、スマホサイトの作り方に関する基本的な知識を、わかりやすく解説していきます。

現在日本では、約8割の方がスマートフォンを保有しています。スマートフォンの保有率の推移を見ると、2011年に14.6%の保有率であったものが、2018年には80.2%まで上昇しています。この7年間で、スマホ保有率は約6倍にも伸び、1人1台スマートフォンを当たり前に持ち歩く時代に変わったのです。

また、保有台数だけではなく、スマホの利用時間も増加しています。2011年には、平均利用時間が約38分であったものが、2018年には約129分と大幅に伸びています。スマホの利用時間が伸びた要因としては、SNSの影響がとても大きいとされています。

スマホの利用用途としては「メールを読む・書く」「ブログやwebサイトを見る」「SNSを見る・書く」「動画を投稿する・共有サイトを見る」「ネットショッピングをする」などが挙げられます。実際、10代や20代の若い世代ほど利用時間は伸びていて、TVは見ないけれどネットは見るという人も増えてきているのです。

スマホ利用者が増えているのは決して日本だけでなく、世界的に見ても利用者は増えています。現在全世界で約40億もの人がスマホを利用しているのです。2007年に初めてiPhoneが販売され、これまでの10年あまりでスマホは無くてはならい通信機器へと成長しました。

具体的にスマホサイトを作る方法は、2つのパターンがあります。それは、0からスマホサイトを制作する方法（スマホ専用サイト）と、PC用サイトをスマホサイトに対応させる方法（レスポンシブサイト）です。

それぞれの特徴を説明しておきます。

スマホ専用サイト
文字通りで、スマホ専用のサイトを1から作る作り方です。
スマホでアクセスした場合はスマホ専用の画面を表示させて、PCでアクセスした場合はPC用の画面を表示させます。レスポンシブサイトのようにブラウザの横幅を縮めても、レイアウトは切り替わりません。

レスポンシブサイト
CSS（スタイルシート）を画面幅に応じて切り替えることによって、PCとスマホの両方の画面に対応させるという作り方です。
PCでサイトを見る際に、ブラウザの横幅を縮めるとレイアウトが切り替わるサイトがレスポンシブサイトです。

それでは、2つのスマホサイトの作り方を詳しく確認していきましょう。

一からスマホサイトを作成する方法は、サイト制作をするための高度な技術が必要です。具体的には、HTMLやCSSを利用してスマホサイトを作成していくことになるので、プログラミングに関する知識が必須になります。

HTML
ホームページは、HTMLという技術を基本として作られています。HTMLとは、ホームページを作成するためのプログラム言語です。スマホサイトの基本構造部分を担当しています。

CSS
HTMLと一緒に使用されるものとしてCSSがあります。CSSは、サイトの見た目を整えるためのプログラム言語です。見た目とは、文字サイズや行間、文字装飾、インデント、配置などをいいます。

HTMLとCSSを基本としてホームページは作成しますが、スマホサイトに動きをつけたい場合は他のプログラムスキルが必要です。そのため、web制作の初心者がスマホサイトを自ら作成することは難しいでしょう。

ホームページ制作に利用できるテンプレートも、現在さまざまなものが登場しています。好きなテンプレートを選んで活用すれば、制作時間を大幅に短縮できますが、それでもスマホを最初から作る作り方は、時間が大幅に掛かってしまいます。そのため、最初からスマホサイトを作成するという作り方を選びたい場合は、制作会社に依頼するという選択も1つの方法です。

次に、既存のパソコン用サイトをスマホ対応にするレスポンシブデザインの作り方を確認しましょう。

スマホ対応のサイトにする場合は、次のような手順で作成を進めます。

1.meta viewportタグを挿入する
パソコン用サイトをスマホに対応させる場合は、HTMLソースのheadタグ内にmeta要素name属性値のviewportのタグを記述します。
Contentの中では、次のような属性を指定することも可能です。

・横幅の指定：width=device-width
・倍率：initial-scale=1.0
・ズームの許可：user-scalable=yes

2.各デバイス用のcssを記述する
パソコン、スマホ、タブレットのデバイスごとにcssを設定します。
デバイスごとのcssを設定することで、横幅の見せ方を変えていきます。横幅は任意のサイズが設定可能です。また、下記のような設定もcssでできます。

・コンテンツの非表示：display:none
・floatの解除：float:none

ここからは、スマホサイトを持つメリットをお伝えします。

現在、スマホ対応のサイトを持っている方が、Googleでの検索順位が上がりやすくなっています。というのも、スマホで検索を行うユーザーの数が増えており、スマホサイトがなければ、ユーザーのニーズを満たしていないと判断されるためです。

実際、検索順位を上げることができれば、自社商品やサービスがユーザーの目に止まりやすくなります。また、ユーザーが求めているコンテンツをしっかり提供できていれば、購入や問い合わせなど、具体的な動きにつながります。

検索順位が上がらないことには、まずユーザーの目に自社のことが止まらないので、そもそも自社の情報をアピールするといったサイト制作の目的を達成するためにも、スマホサイトは必須です。

スマホサイトは軽量化と操作性を考慮して作成すると、とても見やすくなります。見やすいサイトは、ユーザーが何度もアクセスしてくれるというメリットがあります。

1.軽量化
スマートフォンでインターネットを利用する場合は、通信環境があまり良くないことが多いでしょう。通信環境が良くない場合でも、快適にページが見られるように、スマホサイトでは表示速度が速い、軽いサイトを作ることが大切です。

具体的には、画像使用を少なくしたり、スマホに合ったサイズで画像を書きだしたりすることが挙げられます。また、パソコン版サイトで利用していた大きな画像はデータ量が大きいため、スマホサイトには不向きです。このような点に注意をして、スマホサイトを軽量化すると、通信環境が良くない場所でもサクサクと見れるようになります。

2.操作性
スマホサイトは、指でタップして操作を行います。ボタンが小さいなど、デザインによっては誤操作してしまうこともあるでしょう。指先でタップしやすいボタンであることが大切です。また、問い合わせする際には、どのように操作をすればいいのか一目で分かるサイトであうことも非常に大切です。

軽量化や操作性を考えて作られているスマホサイトは、非常に見やすくて操作面でも不便なことが少ないでしょう。

スマホの普及と共に、SNSも普及しました。SNSはクローズドなものではなく、ブログや他のSNS、ホームページと連携も可能です。SNSとスマホサイトを組み合わせることで、集客力が倍増すると言われています。

たとえば、スマホで検索して見つけたホームページに書かれていた役立つ情報を、友達や家族に共有したくなることもあるでしょう。その際に、LINE、FacebookなどのSNSが利用されます。SNSは、SEO対策としての効果は発揮しないものの、SNS独自の流入で集客が行えるため、間接的に集客の効果が期待できます。

実際に、InstagramやTwitter、Facebook、LINEとSNSとホームページを遠景させて集客に成功している企業も増えてきました。SNSは、ユーザーとの距離が近く、つながりをつくる上では有効なツールです。ホームページを受け皿にすることで相乗効果を発揮できます。

スマホサイトのメリットをお伝えしましたが、反対にデメリットもしっかりと把握しておくべきです。ここからは、スマホサイトの2つのデメリットをお伝えします。

スマホサイトを自分で制作する場合は、制作費用を抑えられますが専門知識が必要です。HTML、CSS、PHP、画像編集ソフトなどさまざまなスキルが必要となってきます。

ホームページは会社の顏になるため、しっかりとしたページを作成すべきです。そのため、スマホサイト制作を専門業者に依頼するという方法も考えてみるべきでしょう。

しかし専門業者に依頼しても、希望するスマホサイトによっては、制作期間が長くかかってしまうこともあります。決まったデザインテンプレートを選んで手軽に制作するスマホサイトと、デザインや機能面を一から考えるスマホサイトでは、納期が大きく変わってきます。

専用のスマホサイトを作成する場合は、パソコン用サイトとスマホサイトのURLは別になります。そのため、2つのURLのサイトを管理しなくてはいけません。

これまで、SEO対策としてスマホサイトを作成することが推奨されていましたが、最近ではスマホサイトでもレスポンシブサイトであることが条件として付け加えらえました。その理由は、URLを2つ用意してしまうと、デバイスごとによってコンテンツを共有しにくくなるなどの問題が挙げられるからです。

スマホ専用サイトを作成するとオリジナリティ溢れるサイトが作成できるというメリットがありますが、パソコン用のサイトとスマホサイトの管理が別々になると、運用が複雑になるだけではなく集客面でもデメリットがあることを理解しておきましょう。

それでは最後に、パソコン用サイトとスマホサイトとの違いをお伝えします。

パソコンのモニターの横幅は、1,200～1,800ピクセルです。一方スマホ画面は、320ピクセルと4分の1以下の画面サイズとなります。

画面サイズが小さくなるほど、当然1ページに表示される情報量が変わってきます。パソコンのモニターでは問題なく表示されていても、スマホで確認すると上手く表示されず、文字や画像が見えにくいなどの問題もあります。

画面サイズが小さなスマホサイトでは、コンテンツ中心のページ設計が最適です。しかし、パソコン用サイトでは、コンテンツ部分以外にも、ヘッダー、ナビゲーション、サイドメリューなどが設計されることが多くなっています。

パソコンは、マウスによる操作でクリックやスクロールをします。一方で、スマホは指を使って画面をタップして操作します。そのため、マウスでクリックができる小さなサイズのボタンは、指で押しづらいという問題が出てきます。

また、パソコンではマウスを乗せたときに画像やテキストの色を変えたりできますが、このような動きはスマホの画面ではできません。そのため、スマホサイトの場合は、リンクボタンであると目で見て簡単に分かるようなデザインにしなければなりません。

操作性のことまで考えて作られたスマホサイトは、利便性が高く、たくさんのユーザーが何度も利用してくれます。パソコンやスマホのそれぞれの操作性を理解した上で、サイトを作成することが大切です。

webにおける解像度は、画面上にあるピクセルの数量を表します。画面解像度とも呼ばれることが多いです。単位はなくて「2,560×1,440」とか「750×1,334」といった具合に、「横×縦」のピクセルで表示されます。

ピクセルとは、画面を構成する要素の最小単位です。ほとんどのパソコンが横1,000pxを超えるのに対して、スマホは小さいものだと320px程度しかありません。そのため、パソコンサイトをスマホでそのまま表示をさせると画面解像度が異なるため、コンテンツが一部しか表示されないという事態が起こります。

そのため、それぞれのデザイスの解像度に見合ったレイアウトで、サイト制作することが大切です。

パソコンは高速な光回線に接続されているため、webサイトを閲覧するときスムーズです。基本的に、パソコン用サイトを制作する場合は、動画などのデータが重たいコンテンツを使用しない限り、回線速度を気にする必要はありません。

しかし、スマホの場合は3G回線となります。軽量なサイトを表示させる分には問題ないですが、データ容量を重たい画像や動画を利用する場合は、表示に時間がかかってしまいます。

パソコンとスマホでは、回線速度が異なるため、パソコン用サイトをスマホで表示する場合は重たく感じてしまうでしょう。ユーザーがストレスを感じずにサイトを閲覧できるようにするためにも、パソコンとスマホの回線速度を理解して、サイトを作成することが大切です。

UI（ユーザーインターフェース）とは、ユーザーとサービスの接触面のことを指します。ホームページの場合は、画面に表示されるデザインやフォント、ボタンなどの機能がUIに該当します。

パソコンサイトの場合、操作はキーボードやマウスを利用して行われます。一方でスマホサイトの場合の操作は指で行われるのです。操作性の場所でも説明しましたが、小さなボタンをマウスでは押せても、指では押しづらいため、ボタンを大きくしたり、それぞれの間隔を広く取ったりする必要があります。

パソコンサイトとスマホサイトの特徴を良く理解して、それぞれのUIを意識しながら、サイト制作することが大切となってきます。

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

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

今回は、スマホサイトの作り方についてお伝えしました。

スマホの利用者が増えている背景から、スマホサイトを作成することは必須です。作成時は安易な考えで制作を進めるのではなく、しっかりとパソコンサイトとスマホサイトの違いを理解し、ユーザーが操作しやすいサイトを作る必要があります。

スマホサイトの作り方には、1からサイトを制作する方法とPC用サイトをスマホに最適化するレスポンシブサイトに仕上げる方法の2つの方法があります。それぞれの良さがありますが、運用や集客面などから考えるとレスポンシブサイトの方がメリットが多いでしょう。

もちろん、スマホサイトの制作には高度な知識と技術が必要になるため、制作会社に依頼するのもおすすめです。弊社アイミツでは、あなたの希望をうかがった上で、最適な制作会社を数社紹介することが可能です。業者選定でお困りの方はお気軽にご相談ください。