0120-746-555お電話での無料体験レッスンのご予約・ご質問は
無料体験レッスン
IT業界まるわかりガイド

モバイルフレンドリー対応はもうやった?スマホサイトの制作ポイント6つ

モバイルフレンドリー対応はもうやった?スマホサイトの制作ポイント6つ

検索サイト大手のGoogleは2015年4月21日より、Webサイトがモバイルフレンドリー、いわゆる「スマートフォン対応」であるかどうかを検索結果に反映し始めました。

モバイルフレンドリーではないWebサイトは、Googleのモバイル検索時に順位が低下する可能性が考えられます。したがって、スマホユーザーを集客するためには、モバイルフレンドリーを意識しながらWebサイトを制作することが重要です。

今回はモバイルフレンドリー対応時のポイントについてご紹介します。

ポイント1.読みやすいフォントサイズを選択する

読みやすいフォントサイズを選択する

デスクトップ用のWebサイトをスマートフォンで表示した際、文字が小さすぎて読めないことがあります。Googleの推奨するフォントサイズは16 CSSピクセルです。読みやすいフォントサイズ・行間を意識して、フォントを選択しましょう。ちなみに、Webデザイナーが普段何げなく使っている「ピクセル」という言葉は、CSSピクセルを指しています。

ポイント2.viewport(ビューポート)を設定する

ユーザーはデスクトップPCやタブレット、スマートフォンなど、さまざまな端末からWebサイトにアクセスします。viewport(ビューポート)とは、端末の表示領域のことです。viewportが設定されていない場合、Webサイトは一般的なデスクトップによる表示を想定した画面幅に合わせてレンダリングされます。スマホ対応する際は、viewport設定を行いスマートフォンでの視認性を向上させることが不可欠です。

ポイント3.viewportを固定幅に設定しない

User-Agent Switcher:ユーザーエージェント切り替え

「ポイント2」でも触れたように、端末により画面の大きさと表示領域は異なります。そのため、viewportが固定幅に設定されたWebサイトは、端末によっては大きすぎてコンテンツを1画面で表示できなかったり、小さすぎて空白が生じたりすることがあります。

viewportは固定幅に設定せず、どのような端末にも対応できる設定にしてください。

ポイント4.リンクやボタン同士の距離を取る

スマートフォンを使用しているとき、Webサイトのリンク同士が近すぎるために、リンクをクリックしづらいと思った経験はないでしょうか。タッチパネルを指で操作するスマートフォンは、リンクやボタン同士が近すぎると正しくタップすることが困難です。

スマホユーザーのリピーターを獲得するためには、ユーザーの利便性を考え、リンクやボタン同士の距離を取ってください

ポイント5.Flashを利用しない

Flashを利用しない

多くのデスクトップ用ブラウザがFlashコンテンツに対応する一方、モバイル用ブラウザの一部はFlashコンテンツに対応していません。したがって、スマホ対応のWebサイト制作時は、Flashの使用を避けることをおすすめします。

これまでアニメーションの作成に利用されることが多かったFlashですが、現在はFlashからHTML5への移行が始まっています。HTML5を使用することにより、Flashを使用しなくても複雑なアニメーションを実現できるようになったためです。FlashのアニメーションをHTML 5に変換するツールを利用しても良いでしょう。

ポイント6.インタースティシャル広告を利用しない

インタースティシャル広告(Interstitial advertising)とは、画像表示時やページ遷移時にフルスクリーンで表示されるWeb広告です。アプリダウンロードの誘導やキャンペーン告知など画面いっぱいに表示される広告を見たことがある方も多いのではないでしょうか。

画面サイズの小さいモバイル端末の場合、ページコンテンツがインタースティシャル広告の後ろに隠れてしまいます。ユーザーの利便性を大きく低下させるため、インタースティシャル広告の使用は避けた方が無難です。

おわりに

今回はモバイルフレンドリー対応時の制作ポイントについてご紹介しました。スマートフォンが広く普及した現在、スマートフォンからWebサイトにアクセスするケースが増加しています。Webサイトへのアクセスを維持、さらに増加させるために、Webサイトのスマートフォン対応をきちんと行ってください。
なお、Webサイトがモバイルフレンドリー対応であるかどうかは、Googleが提供する「モバイルフレンドリーテスト (https://www.google.com/webmasters/tools/mobile-friendly/)」により確認することができます。

最新のWebデザインを学びたい方へあなたにぴったりのコースをご提案いたします

無料体験レッスン

無料体験レッスン実施中

最先端のWeb技術や、業界のトレンドについてご紹介をする無料体験レッスンをインターネット・アカデミーでは毎日開催しています。インターネット・アカデミーは日本初そして唯一のIT・Web専門スクールなので、その専門的なノウハウを活かした転身についてのご相談も承っています。ぜひお気軽にご参加ください。

このページの上へ

お電話での無料体験レッスンのお申込み・お問い合わせはこちら(受付時間10時-21時)