見づらいサイトは低評価?スマホサイト制作で押さえるべき9つの注意点

更新日:2017年03月08日 | 公開日:2017年03月08日

この記事を読むための時間: 5分

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

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

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

1. スマホ時代に対応したサイト制作

1‐1. スマホサイトを作るメリットってあるの?

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

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

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

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

1‐2. スマホに対応したサイトを作る3つの方法

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

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

レスポンシブデザインを採用する

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

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

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

スマホ最適化ツールを業者に依頼する

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

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

スマホ専用サイトを制作する

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

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

2. スマホサイト制作で重要なのは設計書?

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

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

2‐1. 要件定義

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

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

2‐2. 設計書作成

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

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

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


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

3. スマホサイト制作で押さえておきたい9つの注意点

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

その1. リキッドレイアウト

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

その2. 画像はCSS対応

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

その3. 文字の大きさ・行間

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

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

その4. リンクボタンの大きさ

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

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

その5. Flashは使用しない

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

その6. シンプルなレイアウト

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

その7. 画面遷移は少なくする

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

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

その8. 操作に適したインターフェイス

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

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

その9. PC版への切り替え

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

【まとめ】スマホサイトを制作してさらなるビジネスチャンスを

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

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

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

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

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

見積もり、取ってますか?

発注をする際に最も大切なことは適正価格を知ることです。
3~4社から見積もりを取ることで、
発注への納得度を高めることができます。

コンシェルジュ

発注は時間も手間もかかりますよね?

コンシェルジュが解決します!

コンシェルジュに相談、あなたにあった業者を提案、発注の手間を削減!

完全無料

まずはお気軽にご相談ください