あなたのサイトは大丈夫?今や対応必至のスマホ対策の解決方法と注意点ガイド

Webサイトを作るとき、スマートフォン(スマホ)対応が必須とよく耳にします。ところが、実際にどう進めたらいいかわからないという声も聞かれます。

「パソコン向けのページでも、スマホで表示できるのだからわざわざ作らなくてもいい」と思っていませんか?

スマホでの検索は、今や PC の検索アクセスを越え、マーケティングにおいて最重要課題となっています。

検索するのもスマホ、閲覧するのもスマホというお客様も多いため、今後はスマホ対応について真剣に検討してみる必要があります。

今回は、スマホ対応が必要な理由や、実装方法、業者への依頼方法と自分で作成する際のツールを紹介いたします。自社サイトをとスマホ対応にする方法と進め方を把握しましょう。

なぜ、今サイトのスマホ対応が必要なのか?マーケティングへの影響を解説

スマートフォンからのサイト検索がついにPCを越えた日

2000年ごろから、「高機能携帯」という名前でスマートフォンが登場しました。Webページを閲覧できる、カラー液晶を搭載しているということが当時は珍しいと評判でした。

しかし、2000年ごろの主流はまだ第三世代携帯電話でした。いわゆる「ガラケー」と呼ばれるものです。

ところが、2005年ごろになると、PDA端末に通信機能が搭載されたようなスマートフォンが日本でも発売されるようになりました。

現在出回っているものに近いスマホは、2008年(アメリカでは2007年)ごろのAppleのiPhoneの爆発的な流行がきっかけで普及しました。

PCとスマホは、同じようにインターネットに接続し、Webサイトを閲覧することができますが、いつ、どこで使われるのかという点に差があります。

PCは、主に机上、少なくともどこかに腰掛けている状態で使われるものですが、スマホは片手で持ち、操作できWebサイトを閲覧することができます。

起動までの時間も、スマホの方がPCより早いです。PCは、文書を作るときなどに、長い時間操作することがありますが、スマホは基本的に短時間の利用がメインです。

特に、デジタルネイティブ世代(20代前後)では、スマホとパソコンを使い分けるという特徴があります。

総務省の「通信利用動向調査」によれば、2010年に10パーセント台だったスマホの世帯保有率は、今や70パーセントを超えています。

若者世代のイメージが強いスマホですが、高齢者向けのスマホ、子ども向けのスマホなど、スマホはあらゆる世代向けに発売されてきました。

70パーセント以上の家庭が、スマホを所有しているのも、実感に合う数値ではないでしょうか。

スマホがこれだけ普及している現在、貴社のWebサイトに初めてアクセスする端末のほとんどがスマホということも十分ありうるのです。

つまり、Webサイトをスマホ対応にするとは必須ともいえるでしょう。

モバイルフレンドリー時代、スマホ未対応がWebマーケティングへの影響

2017年現在の検索エンジンのほとんどがGoogleのシステムを流用しており、Yahoo!検索においても中身はGoogleの検索システムを利用しています。

モバイルフレンドリーを簡単に表現すると、自分が所有しているWebサイトがある場合、そういったページはスマホでの閲覧に最適化させましょうというグーグルが示した指標の一つです。

これをグーグルが示した理由の一つが、スマホユーザーの増加です。

今はPCからWebページを閲覧する人よりも、スマホからWebページを閲覧する人の方が多いため、スマホに最適化していないことはユーザー体験を損なう(つまりユーザーのためにならない)ことにつながります。

さらに、これを実際に検索エンジンのアルゴリズム変更という形で導入したのが、「モバイルフレンドリーアップデート」です。

また、後述するグーグルが提供しているツールを利用することで、そのサイトがモバイルフレンドリーなのかを確認することができます。

モバイルフレンドリーアップデートでは、一般的に、文字の大きさ、サイト構造の最適化、スマホなどのモバイル端末でページを閲覧したときに見やすいかどうかを幾つかの項目で評価されていると言われています。

SEO(検索エンジンで露出度を高めるための取り組み)の観点からも、Webサイトをモバイルフレンドリーに対応することはランキング要因の一つになっています。

また、2016年の10月にグーグルは「MFI(モバイルファーストインデックス)」を導入予定であることを発表しました。

これまでは、検索ユーザーの70%がスマホユーザーであっても、実際に検索順位が表示されるアルゴリズムはPCから見たサイト情報を元に、検索順位を決めていました。

そもそも、グーグルが検索順位を決めるには、サイトの存在をグーグルがインデックスし、サイトの情報を見極めてから順位を決めています。

ここで表現されるサイト情報は、サイトのコンテンツ(文章)に限らず、サイト内部の構造も含まれます。

インデックスとは、グーグルのWebページを収集するプログラム(クローラー)が、検索エンジンのデータベースにWebページの情報を書き込み、分類することを指します。

この状態(クローラーが、Webページの情報をグーグルのデータベースに登録、整理した状態)をインデックスされたと言います。

そして、インデックスされることで初めて検索エンジンに表示されるようになります。

今後、グーグルが「サイトの順位を決めるには、スマホから見た情報しか参考にしない」と明言している以上、スマホからの閲覧に最適化されていないサイトは、検索順位が下がる可能性があります。

また、スマホからの閲覧に対応しないことは、SEOに限らずにユーザー目線から見ても親切ではありません。

スマホの大きなメリットの一つが、細かい空き時間で調べ物などが行えるという点です。

例えば、転職先を探している人が通勤時間の空き時間で求人を探していたとき、求人サイトがスマホからの閲覧に適しておらず、見づらいデザインだったらどう思うでしょうか?

おそらく、「こんな見づらいサイトは使いたくない」とユーザーは思うでしょう。

そういったことが起きれば、せっかく作ったサイトであってもユーザーの機会損失につながってしまいます。

このようなことから、Webサイト全体をスマホ対応(モバイルフレンドリー)にすることは、SEOに限らず、ユーザーの獲得にも影響するのです。

どうスマホ対応させたらいいの?Webサイトをスマホに対応させる方法を紹介

レスポンシブデザインを利用してマルチデバイス対応のサイトにする方法

モバイル端末に合わせて表示を最適化できるページを、レスポンシブデザインといいます。

ページの中身をHTML、ページの形式はCSSで記述します。

レスポンシブデザインは、ひとつのURLを持ちますが、パソコン、スマホのそれぞれから見たときに、それぞれの画面の大きさなどに合わせて自動で表示が調整されます。

レスポンシブデザインのメリットは、URLが一つで済み、HTMLファイルを別に用意しなくて良いので、ページの更新をするときには一つのWebサイトについてだけ更新をすれば良いということです。

ただし、利用シーンによっては、レスポンシブデザインが適さない場合もあります。

レスポンシブデザインには、リキッド、フレキシブル、可変グリットの3種類があります。

リキッドとは、画面の横幅に合わせて、コンテンツの位置が相対的に変わるデザインです。

フレキシブルは、画面の横幅に合わせて要素の整列順などを変えることのできるデザインです。

グリッドは、ブロック状にコンテンツを配置していく画面デザインの一種です。

可変グリッドは、画面に合わせてコンテンツの幅や、配置位置を変えることで、モバイル端末に対応します。

いずれも、画面の横幅に合わせて変化するところが似ているように思われるかもしれませんが、リキッドやフレキシブルは、モバイルで表示したときに一部のコンテンツが非表示になることがあります。

可変グリッドでは、コンテンツそのものの幅や、表示位置が変わるという点がリキッド、フレキシブルと違う点です。

改行位置を変えてもいいので、読みやすいサイトを作りたいという場合はリキッド、要素の整列順を変えて読みやすくしたいならばフレキシブル、整列した印象を与えるなら可変グリッド、といった使い分けが有効です。

一方で、デメリットとしては、リキッドは横画面にすると読みづらいかもしれません。

フレキシブルでは整列順が変わって違和感を覚えることもありますし、可変グリッドはブロック状の配置のため整列感はあるものの、整列しすぎて他の情報との違いが分かりづらい点がデメリットです。

また、多くのレスポンシブデザインについて言えることですが、URLは一つで済むものの、ページへの記述量は増えるため、スマホからのサイトの読み込みが遅くなるケースが見受けられます。

利用シーン重視で新しくスマホ専用サイトを作る方法

利用シーンを重視して、スマホ用サイトを構築する場合もあります。

まずは、別URL、同一URLで新しくスマホ専用サイトを作る方法をご紹介します。

まず、別のURL(ディレクトリ)で作る方法です。

別ディレクトリとは、モバイル端末向けのサイトのURLを、http://~~/のあとに、mobile/などを入れて、「PC用のページと全く別物のスマホ用のページ」を作る方法です。

この手法を使うと、HTMLファイルがそれぞれPCとスマホで分けて作成されており、閲覧している人が利用しているブラウザなどから端末の種別を判断し、PC用、スマホ用サイトにそれぞれ自動的に振り分けます。

スマホ向けページは、レイアウトが簡単で、できるだけ段組を利用しないほうがすっきりとして見やすいページになります。

また、スマホは空き時間で手軽に利用できることがメリットの一つです。

そのため、ユーザーは「見やすい・使いやすいWebサイト(インターフェース)」を求めています。

1画面に情報がたくさん載っているサイトよりも、1画面での情報量が少なくとも見やすいWebサイトの方がユーザーの利便性が高いと言えます。

ディスレイ幅については、今はさまざまなサイズの端末があるので、固定しないデザインが主流です。幅を固定しないことで、スマホでも、タブレット端末でも、違和感なく表示できます。

次に、ディレクトリが同一(レスポンシブデザイン)の場合、スマホからPC向けのURLを入力し、Webページを表示させるときでも、自動的にユーザーの使用端末を判別して、サイトの表示内容をスマホ用のものに変えます。

この時、URLには/mobileなどは入らずに、PCと同一のURLで表示され、PC用のページとスマホ用のページで作り分ける必要がありません。

この時のサイトの表示内容は、JavaScriptや、PHPといった言語を用いて、動的なWebページとして作成することで同じURLにアクセスしていても、端末によって閲覧できるものが違うという状況を作り出します。

2種類のHTMLがあるのではなく、そのつどHTMLが端末に合わせて作られていると考えてください。

次に、スマホ用サイトを別に作成する方法のデメリットをご紹介します。

まず、スマホ用サイトとして別のディレクトリを作成した場合でも、すべてのモバイル端末に対応できるというわけではないことです。

レスポンシブデザインは、端末に合わせて柔軟にサイトを変化させることができ、今まだ出回っていない新しい端末にも対応することができます。

しかし、PC用、スマホ用と別ディレクトリで分けてサイトを作成した場合、今までのPCでもスマホでもない端末が出てきたときに対応できないケースが考えられます。

さらに、開発コストの観点からも、スマホ用サイトを別に作成する必要があるので、時間がかかります。

更新する場合も、PC用とスマホ用のサイトをそれぞれ更新するので二度手間です。

とはいえ、PC用のサイトの情報量が多いため、スマホ用サイトではもっと簡素なものにしたいなど、活用の方法によってはあえてディレクトリを分けて、スマホ用サイトを構築したほうがいい場合もあります。

ただし、URLの異なるページで、同一の内容のページを別に作った場合、Googleにコピーサイトであると認識されることがあります。

そのため、二つのURLは全く別のサイトではなく、同一のサイトであるということをGoogleに知らせなければいけません。

その時に使われるのが「canonical属性」「alternate属性」と呼ばれる特殊なタグです。

canonicalやalternateをサイトに設置することで、Googleに対して「このページはコピーサイトではなく、理由があって同じ内容のページを複数作っているのです」と、伝えることができます。

PCとスマホで別のURLを作るのか、一つのURLで自動的に切り替える設計をするのか、いずれにしても常にユーザーインターフェイスを意識してサイトを作成することが重要です。

どうやってスマホ対応を実装させる?制作会社への依頼方法と便利なツール紹介

ここでは、サイトをスマホ対応させるために、プロに依頼したときの費用や、どのように制作が進められるのかざっくり紹介します。

制作のプロに任せる。Web制作会社への依頼の費用感や納品のスケジュール感

1.費用感

費用は、サイトの規模にもよりますが、トップページ以外の下層のページ1ページにつき15,000〜25,000円程度(トップページは情報量が多いため割高になる)、ページのデザインは50,000〜150,000円程度が相場です。

ページ内の記事の企画料についてはかからない会社もありますが、50,000〜200,000円程度です。

10ページ程度の規模のサイトを作る場合は、50万円程度を見積もっておきましょう。

なお、打ち合わせが済んだ後のデザインやコンテンツの変更、変更や追加があった場合の納期のズレなどに関してはあらかじめ追加費用の有無などを確認しておくことが重要です。

2.実際の制作フロー

まず、お客様と打ち合わせを行い、ターゲット層、コンセプトなどを決定します。

今すでにWebサイトがある場合でも、改めてターゲットを明確にし、必要に応じてサイトの設計を練り直します。その際、競合サイトの調査も行います。

サイトの提案書、開発の見積書を作成し、お客様にお渡しします。

そこで提案書、見積書、契約内容に問題がなければ、正式契約します。

開発料の半額など、着手金が設定されている場合は、着手金を支払います。

開発の作業に入り、サイトの仕様を決定し、サイト構造の設計を行います。

サイトの構造に沿って、デザインを決め、コーディング、デバッグ(エラーやミスを修正すること)、テストをして実際のページに仕上げていきます。

最後にドメインの取得なども並行して行い、完成したサイトをリリースし、開発は終了です。

必要に応じて、料金の未払分を支払ってもらいます。

3.主なオプション

スマホ対応サイトには、お問い合わせフォームを始め、ログイン機能や EC 買い物機能などといった機能を実装できます。

お問い合わせフォームでメールを送る機能、会員制サイトにはログイン機能、ECサイトには買い物機能、手軽に問い合わせや相談ができるライブチャット機能など、用途に合わせて様々な機能を実装することができますので、打ち合わせ時に要望を伝えてください。

4.制作のスケジュール感

案件にもよるのですが、開発期間はだいたい1ヶ月程度です。ログイン機能やEC機能などを実装すると、工数が増えるため、開発期間が数日〜数週間程度のびる可能性があります。

全体的に言えることですが、政策会社に依頼をするときに前もって社内で「こういう形で作る」といった打ち合わせを済ませておくと、後々「言った・言ってない」のトラブルを回避できるためおすすめです。

自作できる無料スマホサイト作成ツール一覧とモバイルフレンドリーテストツール

どうしても自分で開発したいという場合に使える、無料スマホサイト作成ツールをご紹介します。まず、「自分のサイトがモバイルフレンドリーとなっているのか」を確認してみましょう。

https://search.google.com/test/mobile-friendly?hl=ja

このツールでは、サイトのURLを入力すると、モバイルユーザビリティーの問題の有無や、モバイル端末(スマホ)からアクセスした場合の画面を見ることができます。

では、次にスマホサイト作成ツールを紹介します。

1.グーぺ

あらかじめ用意されたテンプレートに、基本的な情報を入れていくだけでサイトがつくれます。

スマホ対応済みのテンプレートなので、後から自分で調整する手間がありません。

個人のお店や、フリーランスの方など、小規模なサイト向けのサービスです。

ただし、維持していくためには毎月料金がかかります。毎月1,000円の標準プランも、1年維持すれば120,000円です。安いとみるか、高いとみるかはひとそれぞれかもしれません。

2.onbile

既存のページを、簡単にモバイル向けにすることができるツールです。HTMLエディターで、リアルタイムに完成イメージを見ながらモバイル向けのサイトを作る方法と、RSSリーダーの内容をページにまとめたものをモバイル向けサイトとする方法があります。

一部の環境で日本語が文字化けしてしまう現象があるようです。

3.IM Creator

英語で全て書かれているので英語が苦にならない方だと使えるかもしれません。

テーマを先に選んで、文字を入れていくという方法で簡単にサイトが制作できます。

4.Edicy

16ヶ国語対応のサービスで、対応言語の多さが特徴です。IM Creatorと似たようなイメージで、テーマを選んで文字を入れてサイトにするという感じです。

5.Strikingly

デザインやコーディングの知識0でも、Webサイトを作ることが可能です。サイトをクリックして編集する形なので、見たままのイメージでWebサイトができます。

このようにWebサイトを作るだけであれば、とても簡単になりました。

しかし、Webサイトを持つだけでは、集客にはつながりません。検索エンジンに評価されるためにはどうしたらいいか(SEO対策)、どのような内容で集客すべきかなど、Webサイトをマーケティングにつなげるためには、プロに制作を依頼し、その後のフォローもしてもらったほうが、格段に効率よくWebマーケティングを成功させることが可能です。

自社サイトがすでにある場合は、まずはテストしてモバイルフレンドリーとなっているか調べましょう。必要があればプロに制作を依頼して改善することをおすすめします。

まとめ

今では、サイトのスマホ対応・そしてそこからの集客がビジネスに直結する時代になりました。

スマホ用サイトの作成方法は、レスポンシブデザインのサイトを作ることと、スマホ用のサイトを別に作ることの2種類あります。

どちらが良いかは、ケースバイケースのため、利用シーンで見極めることが必要です。

Webサイトをスマホに対応させることは、今のWebマーケティングの観点からいうと必須です。

そして、WebサイトをよりSEOに最適化させるサポートも重要となってきます。

自分の手ですべて行うこともできますが、SEOの細かい設定やWebサイトのデザイン、UI/UXなどは、専門知識を持つプロに任せるのも一つの手です。

Webマーケティングの強力なツールとなるサイト作りは、Web制作のプロに任せてはいかがでしょうか?

contents
page_top