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

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

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

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

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

IT業界まるわかりガイドは、日本初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広告です。アプリダウンロードの誘導やキャンペーン告知など画面いっぱいに表示される広告を見たことがある方も多いのではないでしょうか。

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

[PR] 「このまま仕事続けていていいのかな...」そんな不安をマンガで解決!『マンガでわかる! インターネット・アカデミー』

おわりに

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

Web業界への就転職・キャリアアップを成功させたいと考えている方へ
日本初そして日本唯一のWeb専門スクールインターネット・アカデミー

自分にぴったりのコースが見つかる

インターネット・アカデミーでは、Web業界を目指すあらゆる方にお応えすべく、多彩なコースをご用意しています。

Webデザインを学びたい方

プログラミングを学びたい方

自分のペースとスタイルで学べる

毎回好きな受講形式を選んで学習することができるので、働きながらじっくり通いたい方も短期間での就職を目指す方も自分の都合に合わせて、スケジュールを組むことができます。

  • ライブ授業

    現役のプロインストラクター
    と仲間と学ぶメリット

    ライブ授業
  • マンツーマン授業

    インストラクターと
    1対1という贅沢

    マンツーマン授業
  • オンデマンド授業

    いつでも学びたいことを
    学べる

    オンデマンド授業

自分に適した学習方法を探す

インターネット・アカデミーでは、無料体験レッスンを毎日開催しています。デザインやプログラミングの体験ができるのはもちろん、実際の授業に参加したり、就職や転職のご相談、通学スケジュールのご相談なども承っております。

  • ご要望をお伺い

    ご要望をお伺い

    まずはお客様のご要望をお伺いし、お一人おひとりの目的や悩みに最適な内容にカスタマイズ。お客様専用の内容で当日ご案内いたします。

  • カウンセリング

    カウンセリング

    就職や転職、在宅で働きたいなど、お客様の希望を叶えるために専任のスタッフが最適な学習プランをご提案。現在の仕事のご相談なども承ります。

  • 体験レッスン

    体験レッスン

    「自分に向いている分野は?」「自分にできる?」そんな疑問を解決するレッスンを無料で体験。デザインもプログラミングもお試しいただけます。

無料体験レッスン・個別相談のご予約

当日ご希望の方やお急ぎの方は、フリーダイヤルにてご予約いただけます。

0120-746-555 フリーダイヤル受付時間(平日・土日) 10時-21時 オンライン予約

IT研修・人材育成のご相談を無料で承っております
法人専用社員研修、内定者・新人研修のご予約

インターネット・アカデミーでは、
あらゆるニーズに合わせた研修カリキュラムを取り揃えています。

「自社に最適な研修プランを相談したい」「研修費用の相談をしたい」「助成金を申請したい」など、お電話またはお問い合わせフォームよりお気軽にご連絡ください。

03-3341-3781 受付時間(平日・土日) 10時-21時 法人専用 お問い合わせフォーム