スマートフォン対応サイトで検索エンジン対策(SEO)をして成果につなげる

株式会社ケイツー・インタラクティブ [K2-interactive]

スマートフォン対応サイト

スマートフォンではユーザーは文章を熟読する傾向があり、滞在時間も比較的長く対応状況で成果に非常に大きく影響が出ます。あなたのWEBサイトもきちんとスマートフォン対応して効果的にWEBサイト運営をしませんか?

スマートフォン対応サイトで成果を出す

スマートフォン対応サイトの現状

スマートフォン対応サイトに最適化して本当に効果があるの?と思われる方もいると思いますが、答えは「YES!」です。スマートフォン対応したWEBサイトACOMIの場合は70%以上のユーザーがスマートフォンからのアクセスです。細かく見てみると滞在時間はPCサイトの倍以上、ユーザーのモチベーションの高さがうかがえます。

利用シーンの違い

スマートフォンを利用するシーンはPCサイトと異なる場合が多いです。例えば、スマートフォンでは外出の際にGoogleマップなどのGPS機能と連動して、現在地を把握しながら目的地を探すことが出来ます。

また、自宅でもノートPCを開くのは意外と面倒です。スマートフォンの能力も格段に向上した今では、ちょっとした調べ物やSNSでのコミュニケーションはスマートフォンで済ませてしまう場合がほとんどです。このことからも、今後ますますスマートフォン対応サイトの必要性が高まるのは間違えなさそうです。

スマートフォン対応サイトのメリット

スマートフォンでもPCサイトを閲覧することはできますが、スマートフォンは画面が小さく、スペックや回線状況などPCサイトに及ばない部分が多々あります。

スマートフォン対応サイト最適化3つのポイント
  • HTML5+CSS3でページを軽くしてユーザーのストレスを軽減
  • Javascriptを実装してスマートフォンならではの操作性を実現
  • スマートフォンに適したUI(ユーザーインターフェイス)を設計

コンテンツはそのままにスマートフォンならではの操作性でユーザーは快適にWEBサイトを閲覧することが出来ます。

スマートフォン対応サイトのUI(ユーザーインターフェイス)について

画面幅に合わせて伸び縮するフレキシブルなデザイン

スマートフォンの横幅はユーザーの意志(向き)によって画面の幅が変わるので、スマートフォン対応サイトではその辺も意識して制作することになります。CSS3を使って伸び縮みするボタンを作るなどしてユーザビリティーに優れたデザインを作ることがとても大切です。

密集したリンクは避けてデザインする

スマートフォンのリンクはタップする領域がPCよりも大きく、細かくリンクを配置することが出来ません。ユーザー調査と検証を重ねた結果、ボタンの高さは最低でも35px以上必要というガイドラインをケイツー・インタラクティブでは取り入れています。

HTML5 + CSS3

HTML5は2014年10月28日にW3Cより勧告が出され、先進的なWEBブラウザではすでに積極的に取り入れています。スマートフォン対応サイトでは既にHTML5+CSS3が標準です。HTML5は検索エンジン対策(SEO)を考慮する上でとても相性がいいです。

スマートフォンは個々の機体性能に依存される面も多々あり、PCサイトのようにリッチなページを表示するにはあまり適していません。そこでボタンや背景は極力画像を使わずCSSで作成してページを軽くします。

動きのあるサイトはJavascript

インパクトあるアクションを加えたい!そんなときはJavascriptを使えば動きのある演出が可能です。

スマートデバイスの特徴

スマートフォンなどのスマートデバイスは、高機能な携帯電話でもあります。外出先でインターネットへアクセスすることを目的に購入するユーザーも多く、WEBサイトを閲覧するときとはPCとはまた違った目的でアクセスします。

FacebookやTwitterをはじめとした様々なSNSを閲覧する為に、スマートフォンを活用しているユーザーも多いです。

スマートフォン対応3つのポイント
  • Googleマップで現在地から目的地へユーザーを誘導することが可能
  • 外出先でも目的地(訪問先)と連絡を取るため電話利用が可能
  • 様々なSNS(twitter,facebook,line等)と連動したWEBサイトが構築可能

WEBアプリと連動しWEBサイトへの誘導率、リピート率などをUPさせることが可能です。

スマートフォン対応サイト制作関するお問い合わせ

スマートフォンでも検索エンジン対策(SEO)

スマートフォン対応施策

PC・スマートフォン、どちらも検索エンジンの評価概念は変わりません。つまり、よりユーザーフレンドリーであれば検索エンジンの高評価につながります。またPCサイトとスマートフォン対応サイトのURLが異なる場合、それぞれの関係をGoogleなどの検索エンジンに伝えることが必要になります。

スマートフォン対応の検索結果

PCサイトをそのままスマートフォンで見た場合、テキストが細くリンクの表示が小さかったり、場合によっては横にスクロールが発生します。
この問題を解決する為にユーザーフレンドリーなスマートフォン対応をしたサイトはGoogleから一定の評価を受けるようになり、モバイル版の検索結果に [スマホ対応] というラベルが追加されました。(左写真参照)

参考:Google ウェブマスター向け公式ブログ>>

レスポンシブデザインによるSEO

PC・スマートフォン・タブレッドなど複数デバイスに対して、単一HTMLファイルと個別CSSファイルでウェブデザインする手法です。複数デバイスに同一ファイルで情報を提供するので、Google の検索エンジンには内容の重複した異なるURLとして認識されないのでSEOにも効果的です。

ワンソースで構築

レスポンシブデザインは下記図のように、一枚のHTMLファイルと複数枚のCSSファイルで管理します。

デザインを決めてしまえばCSSファイルは更新不要なのでHTMLファイルのみを更新することになります。複数デバイスに対応していても、ファンソース(一枚のファイル)を更新すれば全てのデバイス用のデザインに反映されるので運営管理にとてもフレンドリーです。

レスポンシブデザインの構成イメージ

SEOに有効

2012年6月に公表したGoogleの「Building Smartphone-Optimized Websites」で、レスポンシブデザインはSEOに有効だと紹介しています。

  • PC 用のページとモバイル用の URL 単一化により、Google のアルゴリズムで適切にインデックスできます。
  • 各UA(デバイス)用のファイルごとにページをクロールする必要がないので Google がより効率的に発見できます。
SNSでシェアがしやすい

SNSでシェアする際に、例えばPCサイトのURLを投稿したのに、ユーザーがスマートフォンで閲覧しようとしたら最適なページに表示されない可能性があります。レスポンシブデザインは同一URLで管理出来るので非常にSNSとも親和性があります。

スマートフォン対応SEO内部施策

スマートフォン対応サイト用の検索エンジン対策(SEO)は基本的にはPCサイトと同じです。

キーワード選定

サービスや目的に合わせてキーワードを出来るだけたくさん洗出し、競合他社のWEBサイトを調査するなどしてキーワードを絞り込んでいきます。
最終的にはキーワードは各ページ2~5個くらいに絞って選定します。

HTMLの構造化

ソースコードの記述は出来るだけシンプルにし、デザイン要素などの記述は出来る限り外部のCSSファイルに記述するようにします。
HTMLの文章はWEB標準に準拠した記述をすることで安定した評価を得ることが出来ます。

SEOライティング

タイトル(<title>)や見出し(<h1>~<h6>)に該当のキーワードを入れ、ライティングも「この」とか「その」といった表現を読みずらくならない程度に、具体的な「名詞」を文中に入れることを心がけます。

スマートフォン対応サイト制作関するお問い合わせ