ウェブサイトをスマホに最適化する必要性と方法について重要な5つのこと

ウェブサイトをスマホに最適化する必要性と方法について重要な5つのこと

PDF無料プレゼント|「必見!ユーザーの離脱を防ぐ ストレスフリーなサイトを作るために気を付けたい7つのポイント」無料プレゼント!

ウェブサイトのスマホへの最適化は済んでいますか?

ウェブサイトを訪れるスマホユーザーは爆発的に増加しましたが、たどり着いたサイトがスマホに最適化されていなければ、ユーザーはすぐにそのサイトを離脱してしまいます。

スマホに最適化されていないサイトは、文字が小さすぎたりレイアウトがはみ出したりして非常に見にくいためです。また、リンク部分どうしが近すぎて正確にタップできずにいらいらさせてしまうことも多くなります。

一方、Googleもスマホに最適化されているサイトを検索時には有利にすることを発表するなど、サイトのスマホ最適化が重要になってきています。

そこで今回は、サイトをスマホに最適化することの必要性と、その方法について紹介します。

 

【目次】

1.何故、スマホサイトへ最適化する必要があるのか?

2.最適化といっても何をすればいいの?

3.検索エンジン対策とスマホ最適化が同じ理由

4.スマホを最適化する4つの方法

5.スマホに最適化したサイト制作のための6つの最強ツール

6.まとめ

 

1.何故、スマホサイトへ最適化する必要があるのか?

スマホサイトへ最適化する必要性と集客

 

PDF無料プレゼント|「必見!ユーザーの離脱を防ぐ ストレスフリーなサイトを作るために気を付けたい7つのポイント」無料プレゼント!

近年、スマホユーザーが激増したことで、ウェブサイトの閲覧スタイルも変化してきました。スマホが増加を始めた当初は、自宅やオフィスではPCを使い、外出先ではスマホを使うといった使い分けがされていました。

しかし昨今では、自宅やオフィスでもPCを使わずに、スマホで情報収集するというスタイルが定着しつつあります。

また、そもそも個人ではスマホがあれば十分なので、PCは持たないという傾向も強くなってきています。

以上のことから、B2BにおいてもB2Cにおいても、スマホユーザーをターゲットにした集客の重要性が高まってきました。つまり、情報収集からコンバージョンまで、スマホで完結してしまう状況が定着しつつあるのです。

そのため、ウェブサイトもスマホユーザーが見やすいように最適化されていなければ、多くの商機を逃してしまうことになります。

たとえばスマホユーザーがスマホに最適化されていないウェブサイトを閲覧する際、文字が小さ過ぎるのでわざわざ拡大しなければならなかったり、レイアウトが画面からはみ出ているため、何度も左右にスクロールしなければならなかったりします。

また、リンク部分が近づきすぎてしまうため、正確にタップできず、間違えたリンク先にジャンプしてしまうなどストレスが多くなります。そのようなことを何度か経験すると、スマホユーザーはスマホに最適化されていないウェブサイトであることがわかった途端に離脱するという行動を取るようになり、集客力を低下させてしまいます。

そこのことは、スマホ最適化を怠っているウェブサイト運営者に対する印象も悪化させます。

それだけではありません。Googleがスマホ最適化、つまりモバイルフレンドリーではないウェブサイトは、検索でヒットされた際のリスト上で順位を下げるという方針を示しているのです。

すなわち、スマホ最適化が行われていないウェブサイトは、スマホユーザーから敬遠される以前に、そもそも検索で見つけてもらいにくくなっているのです。

以上の結果から、スマホ最適化に対応していないウェブサイトは、その存在価値を低下させ、ビジネスチャンスも損ねてしまうことになります。

それではウェブサイトをスマホ最適化するとはどういうことでしょうか。

2.最適化といっても何をすればいいの?

スマホサイトに最適化するとは?

 

PDF無料プレゼント|「必見!ユーザーの離脱を防ぐ ストレスフリーなサイトを作るために気を付けたい7つのポイント」無料プレゼント!

ウェブサイトをスマホに最適化するには、まず既存のサイトがPCの横長の画面に合わせて左右に配置された状態を、上下に分割することから始まります。このときテーブルも縦長の画面に合わせる必要があります。

そして、マウスでクリックするのではなく、指でタップすることを前提に、リンク同士を離したり、ボタンサイズを大きくしたりします。文字が表示された画像で作られた横並びのメニューは、スマホの画面幅で縮小されると文字が読めなくなりますので、縦並びのメニューに変更する必要もあります。

また、サイドバーと本文を使った構造も、スマホ画面では窮屈な見づらい状態になります。   つまり、スマホ最適化とは、ユーザーに頻繁な横スクロールや拡大操作を強いないデザインにするということになります。

以上のことを踏まえて、スマホ最適化の注意点を箇条書きにすると以下のようになります。

・ページ幅がスマホの画面幅に最適化されたレイアウトにする。

・文字サイズが縮小されないようにする。

・横並びの画像は縦並びにレイアウトすることで極端に縮小されることを防ぐ。

・段落あたりの文字数を、スマホ画面で読みやすい文字数にする。

・サイト全体の文章量をコンパクトにする。

・ボタンサイズをタップしやすいサイズにする。

・タップしやすいようにリンク部分が密集しないようにする。

・画像を軽量化して読み込み速度を早くする。

また、上記の見やすさの他にも、スマホ特有の操作方法から見た最適化の要素もあります。つまり、片手で操作しやすいウェブデザインであることです。

3.検索エンジン対策とスマホ最適化が同じ理由

PDF無料プレゼント|「必見!ユーザーの離脱を防ぐ ストレスフリーなサイトを作るために気を付けたい7つのポイント」無料プレゼント!

スマホユーザーが増加したことで、検索エンジンの利用者もスマホユーザーの方が増え始めました。

そのためGoogleなどの検索エンジン側も、スマホに最適化されたウェブサイトであるかどうかが検索結果の順位に影響を与えることを発表しています。

つまりSEOにとって、モバイルフレンドリーであることが重要な要素となっているのです。

そこで、スマホに最適化されたウェブサイトを用意することが重要になりますが、このとき注意が必要です。

スマホ用に用意したサイトに、それがスマホ用サイトであることを検索エンジンが認識する仕組みを盛り込んでおかなければ、検索エンジンはスマホに最適化されたサイトをPC用サイトとの重複コンテンツとして扱ってしまうためです。

このことを避けるためには、検索エンジンに、「このサイトは○○(URL)のスマホ版ですよ」と伝える情報が必要です。

そこでalternate属性とcanonical属性を使用します。alternate属性は、このサイトの代替サイトが存在します、ということを示す属性です。つまり、PC用サイトにalternate属性で、このサイトにはスマホ用のサイトがあります、ということを記述しておくのです。一方のcanonical属性は、重複したサイトがあった場合、どのサイトが優先すべきサイトであるべきかを示す属性です。

この属性で優先サイトを指定しておかなければ、重複サイトが存在した場合、検索エンジンが重要度を分散させてしまいます。たとえばスマホ側のサイトにcanonical属性で、PC側が優先されるべきサイトです、と記載しておけば、検索エンジンはPC側に優先ポイントを集中させます。それでは具体的な記述例を見てみましょう。

例では、PC用サイトのURLが「http://www.abcdefg.html」で、スマホに最適化されたサイトが「http://www.abcdefg/sp.html」だとします。PC側サイトのタグ内に以下のコードを記述します。

4.スマホを最適化する4つの方法

PDF無料プレゼント|「必見!ユーザーの離脱を防ぐ ストレスフリーなサイトを作るために気を付けたい7つのポイント」無料プレゼント!

ところで悩ましいのは、スマホに最適化したサイトの制作と管理です。スマホユーザーが増加したとはいえ、スマホに最適化されたサイトだけを運用するわけにはいきません。そこで現状では、PC版サイトを作成し、その資産をスマホに最適化されたサイトに活用することが行われています。そしてその方法には主に4種類ありますので、それぞれの長所と短所を合わせて紹介しましょう。

PC版とスマホ版を個別に制作する

まずは、PC版とスマホ版をそれぞれ制作する方法です。

この方法の長所は、デバイスごとに個別に制作するため、よりデバイスに最適化するために自由に制作できます。その結果、デバイスごとに高い閲覧性と操作性を確保できます。

短所は、個別管理を行わなければならないため、構築と運用の初期構築費用とメンテナンス費用が重複して発生することです。また、記載情報の更新も、個別に対応しなければなりません。

自動変換サービスを利用する

PC版サイトのみを構築し、スマホに最適化したサイトはPC版から自動的にコンバートさせて用意する方法です。

この方法の長所は、PC版の構築費だけで済み、スマホ版も自動的に生成させるので簡単に用意できることです。   また、外部のサービスを利用するため、システムの導入の手間やコストを削減できます。

短所は、機械的な変換が行われるため、細かな最適化ができなかったり、場合によっては手動で手直しをしたりする必要が生じることです。また、月額費用が発生し、PVにより費用が変わることがあります。

レスポンシブWebデザインにする

コンテンツデータは一つだけ作成しておき、アクセスしてきたデバイスに応じてデザインを表示し分ける方法です。

この方法の長所は、ワンソースであるということです。そのためコンテンツ管理を一元化できますので、内容の修正も一度で済みます。また、デバイスの種類が増えてもコンテンツはワンソースのまま対応していくことが可能です。そしてデバイスごとにコンテンツを用意せずURLも一本化できますので、特別な検索エンジン対策が不要です。

短所は、既存のコンテンツをレスポンシブルに移行するためには、新規で作成するよりも費用がかかることがあることです。またユーザーにとっては、PCと同じソースを利用するため、スマホで読み込む際に時間がかかる場合があります。また、レスポンシブルWebデザインの作成には高度な技術が必要であるため、内製化は難しくなります。

マルチデバイス対のCMSを導入する

マルチデバイスに対応したCMS(content management system)を導入して、サイトを管理する方法です。

この方法の長所は、コンテンツを一元管理できることです。CMS側でマルチデバイスに対応できるため専門知識を必要とせず、サイトの更新作業も社内で対応できるため迅速な更新ができ、運用コストも削減できます。また、URLも一本化できるので、検索エンジンへの特別な対策は不要です。

短所は、導入時や構築時に初期費用と導入期間が必要となることです。また、社内で更新作業や管理を行うため、CMSの機能や操作方法について学習する必要があります。

さらに、用意されているテンプレート以外のデザインに対応が難しいこともあります。

5.スマホに最適化したサイト制作のための6つの最強ツール

PDF無料プレゼント|「必見!ユーザーの離脱を防ぐ ストレスフリーなサイトを作るために気を付けたい7つのポイント」無料プレゼント!

ここまでスマホサイトへの最適化の重要性や、マルチデバイスに対応する制作方法などについて紹介してきました。

最後に、既存のPC用サイトを自動的にスマホ最適化できるツールとしての変換サービスを紹介します。

スマホ最適化は、自社で制作するには大きなコストや高度なスキルが必要になります。しかし、既存のサイトのリソースは有効活用したいところです。   そこで、導入の手間が少なく、簡単に既存のサイトをスマホに最適化できるツールとしての変換サービスが多く登場してきました。

今回は、それらの変換サービスの中から主なサービスを紹介します。

『flamingo』

http://gomobile.jp/flamingo/

クラウド型の変換ツールを提供していますので、自分のPCにソフトをインストールする必要はありません。アクセスしたデバイス側で最適化されたサイトに変換する方式を採用していますので、アクセスが集中してもレスポンスが低下する心配がありません。そのため、大規模サイトでも安定した表示を実現しています。

『Mobify』

http://www.domore.co.jp/mobify/

Googleが認定しているマルチスクリーン対応のプラットフォームで、スマホだけでなく、タブレットへの対応も重視された変換ツールを提供しています。特に画像軽量化など、配信速度を上げる技術で他サービスの優位に立っています。   会員制サイトやECサイトでの導入実績が多いことが評価されています。

『shutto』

https://shutto.com/

HTMLの知識が無くてもドラッグ&ドロップでスマホ最適化を行えるツールです。価格が低く導入しやすいため、小規模なサイトに向いていますが、デザインの自由度が低い点に注意が必要です。それでもフォーム変換やSSLページ対応をしており、PC版と同じURLで運用できる点が便利です。

『WEBトラン

https://www.ostechnology.co.jp/serviceproduct/webtran/

プロキシサーバーを活用した変換ツールで、スマートフォンだけでなく、フューチャーフォンにも対応しています。PCサイトを更新するとリアルタイムでモバイルサイトも変換されるため、更新頻度の高いサイト運営に適しています。また、デバイスごとにコンテンツを追加することもでき、金融機関や公的機関での導入実績があります。

『スマートフォン・コンバータ』

http://www.showcase-tv.com/smartphoneconverter/

PCサイトに変換タグを貼り付けることでスマホ最適化が行われます。SSL対応やデータベースなどの既存システムとの連携が保てますので、ECサイトの変換にも相性が良い変換ツールです。導入が簡単な分、デザインを自由に行うにはスキルが必要になります。

『SMARTCONVERT』

http://gomobile.jp/sc/

大規模サイトの導入実績が多い変換ツールで、デバイスに対応したサイト設計が可能です。そのため、PCサイトとは異なるページ遷移設定や複数参照元設定が可能です。また、動的ページの変換も可能なため、購入ページや会員ページなども変換できます。ただし、PCサイトとスマホサイトのURLは異なります。

まとめ

まとめ

PDF無料プレゼント|「必見!ユーザーの離脱を防ぐ ストレスフリーなサイトを作るために気を付けたい7つのポイント」無料プレゼント!

いかがでしたしょうか。PCサイトだけの運用で安心し、スマホ最適化を怠っていることが、どれだけビジネスの機会損失につながるかおわかりいただけましたでしょうか。また、スマホ最適化と言っても、PC用サイトの資産を無駄にせずに制作・運用できることもご理解いただけたと思います。貴社に最適なスマホ最適化の制作・運営方法を見つけて、新たなビジネスチャンスへの展開を検討してみてはいかがでしょうか。

「必見!ユーザーの離脱を防ぐ ストレスフリーなスマホサイトを作るために気を付けたい7つのポイント」無料プレゼント!

「サイトをスマホに最適化するのが重要だとはわかっているけれど、結局正しい最適化って何なの?」
とお悩みのあなた必見!
「これはやってないとまずい・・・」項目を7つにまとめました。
・○○はできるだけ少なくしよう!
・ボタンは○○を意識して作るべし!
・○○はできるだけ早くする!
などなど、やっておくだけでユーザーにとってグンと見やすいページになるコツがあるのです。
あなたはどれだけスマホサイトの最適化ができていますか?
ページを訪れた瞬間に離脱される・・・なんてことがないようにしっかり対策を取りましょう!

ユーザーの離脱を防ぐストレスフリーなサイトを作るために気を付けたい7つのポイント

スマホ集客実践会

この内容で送信します。よろしいですか?