1. トップ
  2. コラム
  3. ホームページ作成
  4. スマホサイトの作り方ガイド:ホームページをスマホ対応させよう!

スマホサイトの作り方ガイド:ホームページをスマホ対応させよう!

スマホサイトの作り方ガイド

この記事では、スマホサイトの作り方や押さえるべきポイント、参考事例、費用相場などを丁寧に解説します。

ホームページのスマホ対応についての知識がゼロの方でも、これを読めば基本を理解できますので、ぜひお読みいただけますと幸いです。

\スマホサイトを誰でも簡単に作れるサービス/

スマホサイトとは?

スマホサイトとはその名の通り、スマホで正常に閲覧できるサイトのことを意味します。

一般的には、スマホのみに特化したサイトというわけではなく、パソコンで見られる状態であった上でスマホにもしっかり対応しているものを指します。

昨今、ホームページをスマホ対応させることは、もはや必須だと言えるくらいに重要になっています。

実際、2021年のLINEの調査によると、スマホでインターネットを使う人の割合は94%に及びます。そのうち41%はパソコンも併用していますが、逆に言えば53%はスマホしか使っていません

そのため、スマホ対応をきちんとおこなわないと機会損失につながる可能性は非常に高いです。

スマホサイトの作り方は?スマホ対応の2つのタイプ

ホームページをスマホ対応させる方法には2つの種類があります。

  • レスポンシブデザイン
  • アダプティブデザイン

以下でそれぞれ解説します。

レスポンシブデザイン

「レスポンシブデザイン」とは、ページの表示の仕方を、PC・スマホ・タブレットなどのデバイスのウィンドウの幅に応じて変化させる手法です。

ページのデータ(HTML)自体は共通ですが、CSSによって、「PCサイズで閲覧されればPC用の見た目で」「スマホサイズであればスマホ用の見た目で」と表示を最適化します。

スマホ対応の方法としては圧倒的にスタンダートなやり方だと言え、Googleも推奨しています

同じページデータの表示の仕方を
ウィンドウ幅に応じて変える

レスポンシブデザインでスマホサイトを作る際は、以下のことが必要になります。

  • viewportを設定する
  • メディアクエリを使い各ウィンドウサイズ用のCSSを記述する

具体的な作成方法は下記の記事で解説しているので、詳細を知りたい方はこちらをご覧ください。

簡単に安くスマホサイトを自作したい方におすすめ

「専門知識は無いけど、費用を押さえたいから自分で作りたい」という方はホームページ作成ソフトを使う選択肢もあります。

中でもとりあえずHPは月額2,970円(税込)と制作会社に依頼するよりもかなり安い値段で利用でき、誰でもスマホ対応のサイトを作れます。

詳しく情報は↓の公式サイトをご覧ください

レスポンシブデザインのメリット

「閲覧デバイスが異なってもページ自体は共通で、見た目だけが切り替わるという仕組み」であることにより、下記のメリットを受けることができます。

  • 編集や管理の手間を削減できる
  • Googleなどの検索エンジンにページを適切に把握してもらいやすい
  • ページの読み込み時間を短くできる
編集や管理の手間を削減できる

HTMLファイルが1つなので、ページを変える際に編集しなければならない箇所が少なくすみます。

また、後述するもう一つのスマホ対応の方法であるアダプティブデザインと違い、パソコン用のページとスマホ用のページの対応関係を設定する(アノテーション)必要も無いため、その分の工数も削減できます。

Googleなどの検索エンジンにページを適切に把握してもらいやすい

アダプティブデザインのようにパソコン用とスマホ用とでページ自体が別になっていると、Googleがどれを正規のものとして扱えばよいのか分かりづらくなります。また、ページ数が増えることで、Googleによるページ処理がサイト中に行き渡りづらくなることも考えられます。

その点、レスポンシブデザインではパソコン用の見た目もスマホ用の見た目もページデータ自体は共通なので、Googleがサイト内のページを把握しやすいです。

ページの読み込み時間を短くできる

アダプティブデザインの場合は、閲覧環境がパソコンかスマホかなどを読み取った上で該当するページに転送する処理が走るため、ページの表示速度が少し遅くなる可能性があります。

それに対してレスポンシブの場合は転送が必要無いので、その分ページの読み込み時間を短くできる傾向があります。

アダプティブデザイン

アダプティブデザインは、パソコン用とスマホ用のそれぞれのページデータを作成して、閲覧環境に応じて出し分けをする方法です。

レスポンシブと比べると管理の手間がかかりますが、この方法でもホームページをスマホ対応させることは可能です。

デバイス種別ごとに専用のページデータを表示する

アダプティブデザインでスマホサイトを作る際は、以下のことが必要になります。

  • スマホ用のページデータを作成する
  • PC用ページとスマホ用ページの関係性を設定する(アノテーション)
  • ユーザーエージェントに応じてリダイレクトをかける

「専門的なことはわからないけど、費用は抑えたいからできれば自作したい…」という方には、前述したホームページ作成ソフトがおすすすめです。

アダプティブデザインのメリット

スマホ対応の方法としては基本的にはレスポンシブの方が推奨されますが、アダプティブデザインにも下記のメリットがあります。

  • 余計なコードを読み込まなくて済む
  • デバイスごとにデザインを変えやすい
余計なコードを読み込まなくて済む

レスポンシブの場合は、ページがスマホ用の表示になっているときも、基本的にパソコン用のCSSのコードも読み込んでいます。

それに対してアダプティブの場合は、パソコン用のファイルとスマホ用のファイルの該当する方のみを使うため、余計なコードを読む込む必要が無くなります。

デバイスごとにデザインを変えやすい

レスポンシブの場合は、ページのHTMLファイルが共通であるため、デザインをパソコンとスマホで分けることにある程度の制約がかかります。

一方アダプティブでは別のファイルを使うため、それぞれのデバイスに特化したデザインを組みやすい側面があります。

ホームページをスマホ対応するときの3つのポイント

スマホサイトを作るときは、「スマホ」「モバイル」というデバイスの特性をしっかり考慮する必要があります。

具体的には、以下の3つのポイントを押さえることが重要です。

  • コンテンツの面積をコンパクトにまとめる工夫をする
  • タップしやすいサイズ・間隔を担保する
  • ページの読み込み速度に配慮する

以下でそれぞれ解説します。

コンテンツの面積をコンパクトにまとめる工夫をする

スマホの端末はパソコンと比べて画面のサイズが小さいので、ページの要素もそれに合わせてコンパクトにまとめる必要があります。

例として、「よくある質問」エリアを考えてみます。

画面が大きなパソコンでは全体を問題無く見渡せる状態であっても、そのままスマホで表示すると、1~2つの質問で画面が埋まってしまいわかりにくくなってしまう場合があります。

そこで、「初期状態としては質問部分のみを表示して、質問がタップされたら回答を開く」などの工夫をしてみます。

そうすると、スマホの画面でも全体を認識でき、利便性を担保できます。

コンテンツの面積をコンパクトにまとめる工夫をする

このような開閉型の仕様、加えてスライド型の仕様などは、画面が狭いスマホでコンテンツをコンパクトにまとめる上で有効な手段になります。

タップしやすいサイズ・間隔を担保する

スマホページで要素を押す場合は指でタップするため、マウスでのクリックと比べてピンポイントで扱うことが難しいです。

そのため、タップ要素には下記の工夫が必要になります。

  • タップ要素のサイズを小さくし過ぎない
  • タップ要素同士を離す

具体的には、(正確には閲覧デバイスの仕様にもよりますが、)サイズは48px * 48px以上、タップ要素同士の間隔は8px以上離すことが一つの基準になります。

この数値は、Googleが開発したLighthouseというページ品質測定ツールでエラーが出ない基準値です。

Lighthouse公式サイトからの引用

48 px × 48 px よりも小さいか間隔が 8 px 未満であるターゲットは、この監査に失敗します。

出典:Lighthouse

ページの読み込み速度に配慮する

前提として、ページの読み込み速度を向上させることはパソコン・スマホを問わず重要です。

ただ、スマホの場合は特にその重要性が高いと考えられます。

なぜなら、PCよりもスマホの方が、質が悪い通信環境で利用する機会が多い傾向があるからです。

スマホは自由に持ち運びやすいため、電波が届きづらい場所で使うこともあります。また、使い過ぎて通信制限がかかっている場合もあるでしょう。

そのため、スマホではページの読み込み速度への配慮がよりシビアに求められます。

参考になるスマホデザインの事例

この章では参考になるスマホサイトの具体例をご紹介します。

文賢

文賢

株式会社ウェブライダー様が提供する推敲・校閲支援ツール「文賢」のサービスサイトです。

このサイトでは画面が小さいスマホでもコンテンツが見やすいような工夫が見受けられます。

具体的には、長めのリスト形式のコンテンツは、PCでは最初からすべて見られる状態ですが、スマホでははじめは格納されており、ボタンをタップすることで表示される仕様を採用しています。

文賢
出典:文賢

株式会社ホットリンク

株式会社ホットリンク

株式会社ホットリンク様のコーポレートサイトです。

特徴は、ナビゲーションのボタンがスマホ画面の右下に表示される点です。

株式会社ホットリンク
出典:株式会社ホットリンク

多くのスマホサイトではナビゲーションは画面上部のヘッダーに配置されますが、大きめのスマホ端末を使っている方にとっては指を画面上部まで伸ばすのが大変な場合があります。

その点、ホットリンク様のコーポレートサイトのように画面下部に配置すればスムーズにタップすることが可能です。

ホームページ作成ソフトで作られたスマホサイト事例

上述したようなスマホ対応サイトと同じレベルのものを作成しようとするとハイレベルな制作会社への発注が必要になるため、かなり費用がかかります。

一方で、「スマホサイトの作り方は?スマホ対応の2つのタイプ」の章でもご紹介した簡単ホームページ作成ソフトのとりあえずHPならスキル0でも自分でスマホサイトを作成することができ、費用も月額2,970円(税込)と制作会社に依頼するよりかなり抑えられます

以下は、とりあえずHPで作成されたスマホ対応サイトの事例です。

とりあえずHPで作られたスマホ対応サイト

株式会社smallweb
株式会社百人隊長
壺やきいも ふくちゃんち

こんなサイトを自分でサクサク作りたい方は、ぜひ公式サイトをチェックしてみてください!今なら30日間無料でお試しいただけます。

スマホ対応の費用相場は?

筆者の経験に基づくと、PCだけでなくスマホにも対応しているサイトの費用は、PCサイトのみを制作する場合と比べて1.5~1.8倍程度の合計金額になることが一般的だと思います。

例えばPCサイト分の費用が30万円であれば、スマホ対応も込みで全体の料金が45~55万円程になるといったイメージです。

PCでスマホサイトを表示する方法

スマホサイトの表示は、実はPCからも確認することができます。

後述するように完全にスマホ実機と同じ環境を実現できるわけではないですが、PCから手軽に確認したいときには便利な方法です。

以下で手順を具体的に説明します。

検証モードを開く

まずスマホサイトを表示させたいページで右クリックして、Google Chromeの場合は「検証」、Microsoft Edgeの場合は「開発者ツールで調査する」をクリックします。

検証モードを開く

そうすると検証モードという状態になります。

表示に使いたいスマホ端末を選ぶ

検証モード内のデバイスアイコンをクリックすると、サイトの表示に使いたい端末を選べます。

サイトの表示に使いたい端末を選ぶ

ここで任意のスマホ機種を選択することで、スマホサイトをPCで表示させることができます。

スマホ実機での確認も重要

上記で解説した通り、パソコン上でもスマホサイトの表示をチェックすることが可能です。

しかし、サイトを公開するときは、スマホ実機でも確認した方がよいでしょう。

なぜなら、上述した方法はあくまでもPC上でスマホ表示を模倣した状態なので、実際のスマホ端末では異なる見え方になる場合があるからです。

例えばフォームが違うデザインで表示されたり、文字サイズが意図せず拡大されてしまったりするケースなどが考えられます。

パソコンでのスマホ表示のみでは問題に気づかずにページを公開してしまう可能性があるため、注意しましょう。

まとめ

この記事ではスマホサイトの基本について網羅的に解説してきました。

スマホ対応は、レスポンシブにせよアダプティブにせよ、自分で実装するには専門スキルが必要です。また、外注すると少なからず費用がかかります。

「スマホサイトを作りたいけど、スキルは無いし費用もできるだけ抑えたい…」と思われた方もいらっしゃるかと思いますが、そんなときは本記事の中でもご紹介したホームページ作成ソフトを使う選択肢もあります。

ホームページ作成ソフトは、テンプレートからデザインを選んで文字を入れていくだけで簡単にページを作れるサービスで、一般的にはスマホ対応も自動的にしてくれます。

中でもとりあえずHPは、初心者向けに特化して簡単さに徹底してこだわっています。また、月額費用は2,970円(税込)と制作会社に依頼するよりもかなり安いです。

簡単かつ安価にスマホサイトを用意したい方は、↓から公式サイトをぜひチェックしてみてください。

ホームページについてこんなお悩みありませんか?

  • 業者に頼らず自分で簡単に作成・編集したい
  • HPにかかる費用を抑えたい
  • 独立・開業に伴いHPを開設したい

気軽につくれる、素敵なホームページ「とりあえずHP」

とりあえずHPは、素敵なホームページを気軽につくることができるホームページ作成サービスです。
「メールを送る」程度のパソコンスキルがあれば、驚くほど簡単にホームページを作成することができます。
業種ごとに作り込まれたテンプレートデザインや文章のサンプルもあるので、ホームページづくりにあまり時間が割けない人にもおすすめ。大切な時間をホームページ作成に費やすのではなく、本業に集中させることができます。


牧野健人

株式会社リラクス 代表取締役。Webのマーケティング(CRO・SEO)の知見とクリエイティブ(デザイン・コーディング)のスキルの両輪を活かし、クライアントの成果向上のための取り組みに尽力。

佐野彰彦

株式会社smallweb 代表取締役、株式会社それからデザイン 代表取締役。
「ビジネスとデザインの統合」をテーマに活動。音楽系企業にて新規事業開発を担当した後、デザイン業界へ転身。WEB領域に強いデザイナーとしてキャリアを積み重ねる。
著書に「経営者のためのウェブブランディングの教科書」「ウェブ担当者1年目の教科書」(共に幻冬舎)。2015年、2016年グッドデザイン賞受賞。

株式会社smallweb

個人・中小企業を中心に2万人以上が利用している初心者向けのホームページ作成ツール「とりあえずHP」を開発・提供。
10年以上にわたりホームページ作成ツールを運用してきたノウハウに基づき、ホームページの作り方や運営の仕方、インターネットの基礎知識などについて、初心者向けにわかりやすく解説することを目的に当サイトを運営。

スマホサイトを誰でも簡単に作れるサービス

無料お試しはこちら