モバイルフレンドリー（スマートフォン最適化） | ホームページ制作京都ファンフェアファンファーレ

モバイルフレンドリー（スマートフォン最適化）とは、「お持ちのホームページ（ウェブサイト）がスマートフォン表示に最適化されている」ということを示します。

「モバイルフレンドリー」のポイントはスマートフォンなどのモバイル端末からの表示の際にストレスを感じずにホームページ（ウェブサイト）を閲覧できるかどうかという点ですが、このモバイルフレンドリーの要素は、「サイトのレイアウト」や「リンク同士の距離」など、ユーザーの閲覧性と操作性といった点が重要になります。

スマホ検索時の検索結果上位のための「モバイルSEO」として、そして、何よりスマートフォンからウェブサイト・ホームページへとアクセスするユーザーのために、モバイルユーザーへの配慮が必要になってきました。

スマートフォンが普及する前に制作されたウェブサイト・ホームページは、モバイルフレンドリーに対応していないケースがほとんどです。

株式会社ファンフェアファンファーレでは、モバイルフレンドリーに対応していないホームページ（ウェブサイト）をお持ちの方向けに、静的HTMLサイトやWordPressテーマなどをモバイルフレンドリーに対応させていただくサイトカスタマイズサービスを提供しております。

モバイルフレンドリー価格表　（モバイルフレンドリー化の料金表へ移動します）

モバイルフレンドリーの必要性

近年、スマートフォンの普及率が急増し、iPhoneやAndroid端末などのスマートフォンやiPadなどのタブレットからのホームページ（ウェブサイト）が閲覧される機会が増えてきました。

スマートフォンからのアクセスの際に、モバイルユーザーの閲覧性に配慮するスマホ最適化、「モバイルフレンドリー」の必要性は、サイトの閲覧性や操作性の向上によるホームページ（ウェブサイト）の離脱率を防ぐことがまず第一だと考えられます。

そして、そのスマホユーザーへの配慮そのものが、スマートフォンからのGoogle、Yahoo!検索において、検索結果に影響を及ぼすというSEO・モバイルSEOの視点からの必要性も同時に兼ね揃えています。

モバイルフレンドリーの必要性と検索結果への影響

SEOのひとつの基準としての「サイトのスマホ最適化」

スマートフォンの普及と同時に検索エンジン利用者の数も、パソコンよりもスマートフォンからの利用が上回ったという事を受けて、Googleなどの検索エンジン側も、「ホームページ（ウェブサイト）がスマートフォン表示に最適化されているかどうか？」という点を検索結果の順位に影響を与えるという旨が発表されています。

すなわち、「モバイルフレンドリー」がSEOのひとつの基準となっています。特にスマートフォンからの検索の際には、「スマホ対応」がモバイルSEOとしての意味を持つようになりました。

スマートフォンの普及・スマートフォンからのウェブ検索の機会が増大し、ユーザーに選ばれるサイト、そして検索エンジンに選ばれるサイトの条件として、モバイルフレンドリー対応、モバイルフレンドリー対策の必要性が重要になってきました。

スマホに最適化されたモバイルフレンドリーサイトは、スマートフォンからの検索結果で「スマホ対応」と表示されます。

モバイルフレンドリーアップデートの特徴

こうしたモバイルフレンドリーとSEO・検索順位の関係として、モバイルフレンドリーアップデートの特徴は次のようなものです。

モバイルフレンドリーサイトかどうかがSEOの基準として適用される
ホームページ全体ではなく、それぞれのページ単位が個別に対象となる
すべてのWeb検索ではなく、スマートフォンでの検索順位のみ影響する

モバイルフレンドリーテスト

所有するホームページ（ウェブサイト）が検索エンジンから見て「スマホ対応」であるか否かについてですが、以下のGoogle社のテストツールで、「モバイルフレンドリーサイト」であるかどうかを解析することができます。

モバイルフレンドリーテスト（google）

モバイルフレンドリーテストに合格していれば、次のような結果が表示されます。

モバイルフレンドリーテストに合格（Google社提供のテストツールの結果）

また、モバイルフレンドリー対応（対策済）のウェブサイト・ホームページは、スマートフォンからの検索結果（SERPｓ）に「スマホ対応」という表示が出ます。

こうしたモバイルフレンドリーかどうかを確認するテストは、この「モバイルフレンドリーテスト」のページの他、サーチコンソールやPageSpeed Insightsなどでも行うことができます。

「モバイルフレンドリーではありません」の表示

なお、ホームページのウェブマスターとしてのGoogleアカウントでログイン中にWeb検索を行った場合、自分の管理するホームページがモバイルフレンドリー未対応だった場合は、検索結果に「モバイルフレンドリーではありません」という警告文が表示されます。

ウェブユーザーの利便性と検索結果への影響

スマホ・モバイル（スマートフォンや携帯電話、タブレットPC）での表示に適したホームページ（ウェブサイト）の構造は、ウェブユーザーの利便性への影響だけでなく、特にスマートフォン・タブレットなどからの検索結果（SafariやChromeなどのブラウザアプリからの検索）に影響を与えます。

顧客層にモバイルユーザーが多いと推測される業種のウェブサイト・ホームページであれば、スマホ検索時の機会損失を防ぐために、モバイルフレンドリーの必要性は、さらに高まります。

モバイルフレンドリーの基準

モバイルフレンドリーの基準は、「レスポンシブデザイン（レスポンシブレイアウト）によって、スマートフォンなどからのアクセス時にウェブサイトのレイアウトを単純化して読みやすくする」ということをはじめ、リンク同士の距離が近すぎない、画面を引き伸ばさなくても画像の中の文字が読める程度に大きく表示されている、など様々なチェックポイントがあります。

サイトレイアウトが「スマートフォンの画面幅に適している」という点がまず第一ですが、合わせて、サイトユーザーの誤操作を防ぐためのリンク距離の配慮などが基本です。

さらに、レイアウトをスマートフォンに合わせても、サイト内に設置された画像内部の文字（画像に埋め込まれた文字）が小さくて読めないというケースも想定されます。

レスポンシブデザイン（サイトレイアウトがスマートフォンに適合）
誤操作しにくいリンク設置（リンクの距離が適切）
文字が読みやすい

モバイルフレンドリーテストでの項目

以下の項目は、モバイルフレンドリーテストにおいて、モバイルフレンドリーサイトとして不合格になる場合の代表的なエラー項目です。

「テキストが小さすぎて読めません」 → ホームページのフォントサイズが小さすぎるなど。
「リンク同士が近すぎます」 → 誤タップの原因になります。
「モバイル用viewportが設定されていません」　ビューポートが適切に設定されていない。
「コンテンツの幅が画面の幅を超えています」　スマートフォン表示ページがスマートフォンの画面幅サイズを超え、CSSでの適切なサイズ変更やビューポートに設定が適切対応ではないなど

機種のデバイスサイズ変更による未対応化

また近年、スマートフォンのデバイスサイズ（画面のサイズ）が変更されることがあり、「今まで使用していたレスポンシブテーマ・レスポンシブ用CSSがiPhone4やiPhone5には対応していたものの、iPhone6やiPhone6Plusには対応していない」といった場合にも、レスポンシブの調整（CSS編集）を承っております。

モバイルフレンドリー化（スマートフォン最適化）するためのカスタマイズ

モバイルフレンドリーテストに合格するためには、ホームページ（ウェブサイト）の構造がスマートフォンに最適化されている必要があります。

「スマホ最適」のポイントは「片手で操作していても使いやすいウェブサイトかどうか」という点です。

モバイルフレンドリー化のカスタマイズは、既存のホームページ（ウェブサイト）をスマホからのアクセスの際に、左右に分割されたレイアウトを上下分割にするなどのカスタマイズが一般的ですが、各所に配置されたリンク同士の距離や、「コンテンツ部分」の中の「テーブル（表）」などもレイアウト変更する必要がある場合があります。

画像で制作された横並びメニューの場合

例えば、横並びメニューがスマートフォンの小さい画面で表示されると、メニュー項目が画像だったとき縮小表示されるため、「文字が小さすぎて読めない」という事が起こります。

パソコンのブラウザサイズに合わせて制作された「テキストが埋め込まれた画像」が、横並びメニューのままスマートフォンの横幅まで縮小された時、引き伸ばさなければ読めないほどに縮小されてしまうケースがあります。

コンテンツ部分とサイドバー部分

また、ページ全体のレイアウトが本文の示された「コンテンツ部分」とサイドバーのメニューリストの構造になって場合、レイアウトがキチキチすぎて、サイドバーに何があるのかわからなかったり、画面を引き伸ばして見る必要が出てきます。

モバイルフレンドリー、スマホ最適化は、検索エンジンのためというよりも、それだけでなく何より「見る人のため」。

片手で操作していてもストレス無く情報を読むことができるウェブサイトの構造は、何よりもウェブサイトを閲覧しているユーザーの利便性確保になります。

スマホ表示時の理想的なレイアウト構造

理想的なウェブサイト・ホームページとしては「画面を引き延ばすためにもう片方の手でスマートフォンを支えなくても良いようにする」という構造が理想的です。

「では、わざわざスマートフォン用のサイトをもうひとつ作れば良いのか？」

いえいえ、ご心配なく。

スマートフォンからアクセスされた時にはパソコンで見るときと少し違ったレイアウトで表示する、などのちょっとしたカスタマイズで実装することができます。

スマホ表示用に少画像を新規制作する必要がある場合がありますが、大半のホームページ（ウェブサイト）は、少しのカスタマイズでモバイルフレンドリー化することができます。

ウェブサイトユーザーの利便性向上、そしてSEO(検索エンジン最適化)のため、「スマホ対応」のモバイルフレンドリー対策は、良いウェブサイトの必須条件になります。

ウェブサイトのスマートフォン表示最適化のポイント

ホームページ（ウェブサイト）のモバイルフレンドリー化（スマートフォン表示最適化）のポイントはレイアウト調整だけではありません。

「モバイルフレンドリー」は、「サイトのレスポンシブ化」といった、レイアウト調整が大枠にはなりますが、リンク距離やテーブルレイアウトなど、細かいポイントまで配慮すると、さらにスマホユーザーのユーザビリティを向上させることができます。

ウェブサイトのレスポンシブ化

「レスポンシブ」とは、「反応がよいさま」という意味があり、ウェブサイトのレスポンシブデザイン、レスポンシブウェブデザインとは、ホームページ（ウェブサイト）を構築するにあたり、単一のファイルでページを生成しながら、CSSなどによってウェブページのレイアウトを変更するというウェブサイトデザインの手法です。

本文が表示されるコンテンツ部分とサイドバーなど、左右2つに分割されたレイアウトの場合、スマートフォンでサイトが表示された場合は、画面の横幅の関係で窮屈なサイトに見えてしまいます。

レスポンシブデザインは、こういった仕様の場合に、新たにスマートフォン用サイト（スマートフォン用ページ）を作ることなく、タブレットPCやスマートフォンなど、サイトにアクセスするデバイスによって、最初に横幅いっぱいの「コンテンツ部分」そしてその下に横幅いっぱいの「サイドバー部分」といったように、表示するレイアウトを異なるものにするというウェブデザインの方法です。

コンテンツ部分・サイドバー部分として、左右に分割されたブロックを、スマートフォン表示の際には「上下に分割」することによって、サイトの中身を見やすくするという配慮です。

ホームページ（ウェブサイト）のレスポンシブ化