とりあえずでもスマホ対応（モバイルフレンドリー）を行う時の注意点やポイント

とりあえずでもスマホ対応（モバイルフレンドリー）を行う時の注意点やポイント

今回の記事は、今まだモバイルフレンドリーに出来ていないサイトを運営されている方向けの内容です。
ただ、ちょっとした注意点やポイントも書き出しますので、モバイルフレンドリーに自信のない方もお読み頂けるかもしれません。

とは言っても、既に完璧なサイトであっても復習やチェックを怠らない方にもお読み頂けるので・・・だいたいの方にお読み頂けます（笑）

冗談はさておき。

前置きが長くなりました。
まず、モバイルフレンドリーにするにあたって、”何から始めればいいのかな？”という方に関しては、まずはGoogleがオフィシャル配信しているモバイルフレンドリーに関する記事をお読みください。
技術的なこともそうですが、モバイルフレンドリーの全体が見えてくると思います。

デスクトップ向けページがたくさんあるサイトをいきなり全部モバイルフレンドリー化する・・・というのは、かける費用があれば話は別ですが、あまり現実的ではありません。
別枠でご予算を取れる場合をのぞいて、まず出来ることからするというところで、全体像を把握して頂くことから初めて、作業に優先順位をつけるためにも、公式情報は外せないところだと思います。

• 検索ユーザーがモバイル フレンドリー ページを見つけやすくするために
• Mobile Friendly Websites
• モバイルフレンドリーテスト

上記は、Googleのページでして、モバイルフレンドリー化するにあたって抑えておきたいことを書いてくれています。
「モバイルフレンドリーテスト」はご自身や会社サイトがモバイルフレンドリー化出来ているかチェックしてくれるツールです。
小まめなチェックが必要だったり、エラーの原因を探さなければいけないなどなど、やることは山積みなんですが、出来ないことではないので一つずつ積み重ねていければと考える次第です。

レスポンシブ対応がベターかもしれませんが、CSSをもうワンセット（場合によってはもっとたくさん）用意して、全ページへの反映を確認して・・・というのは骨が折れる作業です。
特に、ホームページビルダーのようなサイト制作ソフトで制作したソースをレスポンシブにするのは、ほぼ不可能と言っても過言ではないほどに難しい作業です。

ホームページビルダーが悪いという訳ではなく、ソースに癖があると言いますか、手動で後からCSSを追加して作業行うならば、他にもっと優れた手段があるという意味ですので、悪しからず。

なので、まずは、スマホ専用階層を設けて、そこに新たにコンテンツを追加すべきです。
その時の注意点は以下の通りです。

スマホ専用階層を新たに設けページを作成する時の注意点

• ビューポートを設置
• （画像やコンテンツの横幅などの）サイズは全て「%」（パーセント）表示
• クリックするポイントはpaddingなどで幅広くする
• タイトルなどの重要箇所はデスクトップ向けとは若干ニュアンスを変えた方が好ましい

次にデスクトップ向けページとスマホ向けページにそれぞれ必要なメタタグを設置しましょう。

この時、デスクトップ向けページとスマホ向けページをワンセットとして一つのコンテンツという設定でお願い致します。
つまり、デスクトップ向けページのトップページとスマホ向けページのトップページは同じ内容でなければいけないというところです。

全く同じにする必要はないかもしれませんが、それぞれが対になっている状態にしましょう。
どちらかのページはあるけど、どちらかのページはない・・・という状態は好ましくないので、最初は避けるようにしましょう。

それぞれのページに必要なメタタグ

/** href属性にはデスクトップ向けページの対になるページのURLを書きましょう。 **/
<link rel="canonical" href="http://example.com/" />

/** media属性はご自由にして頂いても構いません。href属性にはスマホ向けページの対になるページのURLを書きましょう。 **/
<link rel="alternate" media="only screen and (max-width:640px)" href="http://example.com/sp/" />

リダイレクト設定は、、、やってもやらなくてもどちらでもいいと考えています。

と言うのは言い過ぎですが、.htaccessやサーバー側で完全に分け切ってしまうというのは、最初はやらない方がいいです。
間違いなくクローラーを不要に弾いてしまうことになると思われます。

それでもアクセスしてきた端末毎に振り分けたいようでしたら、デスクトップ向けページにアクセスしてきたスマホユーザーをスマホ向けページに振り分ける・・・という程度に留めておくようにしましょう。
まずは Google にアクセスしてもらうことを最優先に考えた方が得策です。
PCはデスクトップ向けページもスマホ向けページも、どちらもアクセス出来て大丈夫です。

下記のソースはデスクトップ向けページに必要なjs記述です。
スマホ向けページとセットになっているデスクトップ向けページに対になるスマホ向けページのURLを記述して設置してください。

スマホユーザーをスマホ向けページにリダイレクトするJavaScript例

<script type="text/javascript">
(function(){
var ua = navigator.userAgent.toUpperCase();
if(ua.indexOf('IPHONE') != -1 || (ua.indexOf('ANDROID') != -1 && ua.indexOf('MOBILE') != -1)){
location.href = '/sp/';
}
}());
</script>

あまり難しくしなくて大丈夫です。
細かい制御をしなければコンテンツを拡大出来ない時に、改めて見直すようにすればいいと思います。

最後にsitemap.xmlを配信しましょう。

サイトマップを自動で生成してくれるサービスも多数ありますので、あとはsitemapにスマホ向けページのURLを掲載してSearch Consoleでsitemap.xmlを再送信しましょう。
そうすれば、Googleは正常にデスクトップ向けページとスマホ向けページを読み込んでくれるでしょう。

sitemap.xml生成ツール（無料）

• sitemap.xml Editor
• XML-Sitemaps.com

スマホ端末はまだまだ新しい端末が出てくるでしょう。
ブラウザのサイズは毎年毎年異なっています。

サイズにしても、コンテンツの置き方にしても、断定的な感じでコンテンツを設置するとあとあと面倒なことになりかねません。
最初の状態では、出来るだけ流動性を持たせることが出来るようにイメージしてコーディングを行いましょう。

スマホ向けページのファイルの総量は出来る限り・・・と言うとかなり曖昧になるんですが、デスクトップ向けほどのファイルを使わないことが理想かもしれません。
と言うのも、スマホでアクセスされていると言うことは、通信量に限りがあったり、物理的にデスクトップよりも弱いスペックでの閲覧になるというところです。
なので、デスクトップの方がパワプロに処理するところに時間がかかってしまうということなどが出てきかねません。

ですので、例えば、ミニファイ化（minify 化）は必須かもしれません。

スマホ端末でスマホからでは閲覧出来ないコンテンツページへ遷移した時は、致し方なくリダイレクト処理でインフォメーションを返すようにしましょう。
なので、この場合に限っては、リダイレクトしてもいいため、あえてスマホ向けページを設置する必要はありません。
（ただ、インフォメーションやエラーページのスマホ向けページは別途ご用意ください。）

この場合のエラーや、その他、一部的なリダイレクトに関しては、特にリスクになるほどの判定を受けるとは考えていませんので、そこは躊躇せずリダイレクト処理をお願い致します。

細かいルールが多くなっていきますが、まずは簡単なところから始めることで先が見えてくるのが、このモバイルフレンドリー化だと考えています。

両方のページのコンテンツ管理をしなければいけないあたり面倒かもしれませんが、こればかりは時勢というやつだと思います。
もし、これを機にリニューアルなどをするのであれば、WordPressなどを使われると管理が楽かもしれません。
個人的にはレスポンシブでサイト制作をおすすめしたいところだと考えています。

デスクトップ向けページとスマホ向けページを分けると、サイトの規模拡大を考えた時の管理が煩雑になったり、 Google とのお付き合いがしんどいことが多いため、出来るだけ最初に仕様確認や設計を厳密に行いたいところです。
必要以上に時間がかかることもありますが、それも致し方なしだと思われます。

制作キャリアがあればモバイルフレンドリー対応もすぐに出来ちゃいますよ・・・と仰られる方がいらっしゃいます。
制作者個人のスキルだけで言えばそれも間違いではないかもしれませんが、、、集団で動く中に当てはめるのはちょっと雑かなと思います。
制作サイドのあれこれをドキュメント化するとなると、すぐには出来ません。
莫大な予算で短納期を実現させるというお話はここでは想定していませんし、もしそれが出来るならこのお話は成り立ちません。

なので、確実にスマホ対応が出来、尚且つみんなが共有しやすい状態で進めるということを前提に考えながらインハウスでモバイルフレンドリー化するというのであれば、この流れを参考にして頂ければと思う次第です。

執筆 : 清水 隼斗

とりあえずでもスマホ対応（モバイルフレンドリー）を行う時の注意点やポイントのAMPページ