サイト制作に欠かせないスマホ最適化する方法


Webサイト制作において、スマホ最適化は、Googleの検索ランキングの要素になると公表されていたり、スマホユーザーが近年多くなっていることから、大変重要なことになっていますが、一体どのようにして最適化をしていくのか?という点を今回はご紹介いたします。

スマホ最適化とは?

スマホ最適化をするというのは、スマートフォンでホームページを見てもストレスなく閲覧ができるようなサイトを制作することを指します。
実際に、まだスマホ最適化がされていないWebサイトをスマホで閲覧すると、横幅がはみ出てしまっていたり、文字サイズが小さすぎて見えなかったり、タップしたいところの範囲が狭すぎて誤操作してしまったりといったことがあります。
今あるパソコン用サイトを元に、スマホで見ても問題なく表示されるよう、デザインをスマートフォン用に変えたり、コンテンツ内容を削っていったりすることが主流です。

モバイルフレンドリーで検索順位が変わる

Googleは、検索順位の決定要因として、2015年4月からモバイル検索アルゴリズムを変更し、モバイルフレンドリーの要素を追加しました。
モバイルフレンドリーなサイトは、スマートフォンやタブレットなどモバイル端末から見ても閲覧しやすいからです。
では、どのような方法で実際にモバイルフレンドリーなサイトを制作できるのか、具体的に挙げていこうと思います。

レスポンシブWebデザイン

スマホ最適化を実現する方法で、いま最も採用されているのがレスポンシブWebデザインです。
デバイス(ディスプレイの画面サイズ)ごとに、CSS3のメディアクエリを利用することで、異なるCSSを適用させる方法です。

デバイスの種類ごとに専用サイトを作成せず、ひとつのHTMLファイルで、パソコン、スマートフォン、タブレットに最適化されたページを作成することで、、ホームページ作成の際に、スマートフォン用の別ページを用意する必要もなく、URLも切り替わらないことがメリットとして挙げられます。

どのようにレスポンシブ対応をしていくか、具体的に説明していきます。

viewportを設定する

HTMLのhead内に以下を記述し、デバイス幅に合わせた表示となるようにしましょう。

viewportについてはこちらの記事も参考にしてください。
レスポンシブウェブデザインにおけるviewportを理解しよう!

cssの記述

viewportを設定したら、次はcssでデバイスの画面サイズに合わせてブレイクポイントを設定し、その中でどのように配置していくかを記述していきましょう。

max-widthで指定しているサイズがブレイクポイントとなり、750pxまでのサイズで適用するスタイルを記述していくような流れとなります。
配置を変えたり幅を変えていくだけで、簡単にスマートフォン対応ができます。

デメリットとしては、どうしてもスマートフォン用にテキストを変えたい、画像を変えたい、などといった対応をするために、PCだけで表示と、スマホだけで表示の記述を二重にしていく必要があり、HTMLが長くなってしまうことがあげられます。

各端末に合わせた専用サイトを個別に構築

専用サイトを個別に構築する方法は、パソコン向け、スマートフォン向け、さらにはタブレット向けと各々専用のサイトを作っていくことを指します。

単純に1サイト作るところが、専用サイトを作ることで2サイト、3サイトとなっていきますが、柔軟性は高く、画像などもスマホサイトのもののみ読み込みができるので、サイト全体の表示スピードも変わってきます。

通常、専用サイトを作る方法では、パソコン向けとスマートフォン向けでサイトのURLが切り替わります。よくサイトURLの末尾に/sp/や/m/(モバイルのmですね)などとついたURLを見かけたりしませんでしょうか?URLがわけられることで、SEO面としては不利になることが大きなデメリットです。
また、それぞれの端末の専用サイトとなるので、更新の際はもちろんそれぞれを更新する必要があるので、運営にも手間がかかってきます。

設定方法

パソコン用とスマホ用で対になっていることをアノテーションを使って記述します。
下記のコードをパソコン用のページに設置しましょう。

また、これに合わせてスマホ用のページではcanonicalタグを設置します。

ダイナミックサービング

前に述べた専用サイトを作る方法では、URLがデバイスごとに切り替わることがデメリットとして挙げられましたが、このダイナミックサービングでは同一URLでそれぞれ別コンテンツを表示させることができます。

ダイナミックサービングは動的な配信となるので、.htaccessでの設定やphpでの設定が主流かと思います。
WordpressなどCMSを使用する際には設定方法も違ってくるので、注意しましょう。

ダイナミックサービングも専用サイトを構築する方法と同様、コンテンツはデバイスによって異なるので、更新の際にはそれぞれを更新する必要があります。

まとめ

弊社では、主にレスポンシブWebデザイン、場合によってはダイナミックサービングと併用なども行なっていますが、今回色々と調べてみると、スマホサイト変換サービスなどもあるようです。

中には無料期間があるようなところもあり、変換サービスのようなツールを使えば、素人でも手軽にスマホ最適化ができるようです。
これからのWebサイト制作において、スマホ最適化は必要不可欠となってくるので、自分のサイトに合った方法を選んでいきましょう。

このエントリーをはてなブックマークに追加

筆者

M.Nakayama

Bigmac inc. 制作部所属。 前職でBigmacと出会い、2015年6月制作部の立ち上げと共に入社。オンとオフの切り替えをしっかりすることをモットーに、仕事の日はがっつり仕事、休みの日は子どもと目一杯遊び、家事に励むようにしています。 Webデザインからサイト構築まで幅広く携わっていますが、基本的には人が作った綺麗なデザインを寸法の狂いなくコーディングしていくことが好きで、難しいものができたときほど達成感・やりがいを感じます。シンプルでフラットなデザインが好物です。

筆者が最近執筆した記事