くくりさん
レンタルサーバー「くくり」のキャラクター。(本当は、とあるホスティングサービスの中の人)お仕事用のWebサイトやメールアドレスを初めて作る方向けに、役に立つ情報を発信します!
![](https://i1.wp.com/kukuli-blog.com/wp-content/uploads/2018/07/d624bfd709197e861012edbaf1df32ea.jpg?w=728&ssl=1)
![](https://i2.wp.com/kukuli-blog.com/wp-content/uploads/2018/07/a4104f4acb1fec47166abda37a0920be.jpeg?w=728&ssl=1)
今、友達のホームページをみているんですが、スマホからみていると文字が小さくて・・・
スマホからホームページって見づらいんですね~
![](https://i1.wp.com/kukuli-blog.com/wp-content/uploads/2018/07/d624bfd709197e861012edbaf1df32ea.jpg?w=728&ssl=1)
ホームページのスマホ対応って重要なんですよ~
Contents
ホームページのスマホ対応とは?
![ホームページのスマホ対応とは?](https://i0.wp.com/kukuli-blog.com/wp-content/uploads/2018/08/c58898a1822012bdaaba5262e3b7b88f.jpg?resize=728%2C486&ssl=1)
ホームページは、パソコンからもスマホからも見ることができます。
パソコンから見るホームページは、「パソコン版ホームページ」の画面になっています。
しかし、スマホから見るホームページが「パソコン版ホームページ」のままだと、非常に見づらく、使い勝手も悪いため、「モバイル版ホームページ」に変換されるようにしておく必要があります。
「パソコン版ホームページ」と「モバイル版ホームページ」の違いの例は、次の通りです。
「パソコン版ホームページ」の 写真が横並び
↓
「モバイル版ホームページ」では、写真が縦並び
写真や画像の並びが横から縦に変換されることにより、スマホから見やすくなっているということです。
![写真・画像の並びが変わる!](https://i0.wp.com/kukuli-blog.com/wp-content/uploads/2018/08/386ead4614c84d3d7c2a85543059e947.jpg?resize=728%2C413&ssl=1)
スマホは、縦のスクロールがメインなのに、途中に横スライドがあると、ちょっと面倒な気持ちになりませんか?
ホームページがスマホ対応していない?スマホ未対応による3つの不具合
![スマホ対応していない?!](https://i1.wp.com/kukuli-blog.com/wp-content/uploads/2018/08/03e9ba78cffff5049ccef091232ac061.jpg?resize=728%2C481&ssl=1)
ホームページがスマホ対応していないために起こる不具合を【ホームページ訪問者側】と【ホームページ作成者側】の視点でみてみましょう。
【ホームページ訪問者側】
スマホ対応していないホームページの3つの不具合
- スマホからの画面が見づらい!
- いちいち文字が小さい!ボタンが押せない!
- 画像や図が入りきっていない!
「モバイル版ホームページ」は、縦のスクロールで画面が構成されています。
スマホで「パソコン版ホームページ」を見ると、文字などを拡大して見る必要があったり、 画像が横並びなのでスマホの画面に入りきらなかったりします。
せっかくホームページに来てくださったのに、すごく使いづらいホームページにストレスを感じ、全ての内容を見ることなく、他のホームページ移動してしまうかもしれません。
【ホームページ作成者側】
スマホ対応していないホームページの3つの不具合
- 伝えたい情報が伝わらない!
- お店の印象を悪くする!
- スマホからの検索順位が下がる!
ホームページをみてもらえないということは、お店が伝えたい情報が上手く伝わりません。
さらにスマホからのホームページに来てくださった方から「残念なお店だな~」と思われ、お店の印象も悪くなります。
なにより怖いのは、スマホからの検索順位が下がる可能性があります。
スマホの検索順位が下がる?!ブラウザ国内シェア1位のGoogle chromeがはじめたこと!
![スマホ検索順位](https://i2.wp.com/kukuli-blog.com/wp-content/uploads/2018/08/812cf4953b7ff6e59b2be5d8746bdd10.jpg?resize=728%2C461&ssl=1)
現在インターネットブラウザの国内シェア1位は、Google Chrome です。
Google Chromeには、「ユーザーの閲覧履歴」や「検索行動パターン」を学習する機能が付いています。
たとえば、
- ホームページのアクセスがパソコン経由なのか?スマホ経由なのか?
- ホームページを見てからどのくらいで別のホームページに移動しているのか?
このように、「ユーザーの閲覧履歴」や「検索行動パターン」を学習する機能で常にチェックし、インターネット検索される方にとって、役立つ情報を検索上位に上げる仕組みになっているのです。
2016年11月5日、Googleウェブマスター向け公式ブログ「モバイルファーストインデックスに向けて」という記事には、次のようなことが書かれています。
- Google検索を使用しているほとんどのユーザーがモバイル端末から検索を行うようになったこと
- 将来的にはGoogleのアナゴリズムがモバイル版のコンテンツを主に使用するようになること
つまり、検索結果によるウェブページのランキングなどを決定するための評価は、パソコン版ホームページのコンテンツではなく、モバイル版ホームページのコンテンツが使用されるということです。
※2018年3月27日には、Googleウェブマスター向け公式ブログから「モバイルファーストインデックスを開始します」と発表がありました。
もう、モバイルファーストインデックスがスタートしているんです!!
スマホがインターネット利用機器のトップに!
![インターネット利用機器スマホが№1](https://i1.wp.com/kukuli-blog.com/wp-content/uploads/2018/08/9b3691a20f0c37bf7c857036c0bb3d6b.jpg?resize=728%2C485&ssl=1)
平成30年5月に総務省から公表された平成29年通信利用動向調査の結果によると、個人のインターネット利用機器は、スマートフォンが最も使われているという結果になりました。
スマホ 59.7%
パソコン 52.5%
タブレット 20.9%
前回の結果では、まだパソコンのほうが若干優位でしたが、これからますますスマホの利用は増えていくんでしょうね。
たしかに、「この近くのイタリアンのお店は?」とか「元気の出る音楽は?」とか音声検索で気軽に検索できるので、スマホ検索ってホントお手軽ですよね。
ホームページをスマホ対応にする3つの方法
![ホームページリサーチ](https://i0.wp.com/kukuli-blog.com/wp-content/uploads/2018/08/customer-563967_1280.jpg?resize=728%2C470&ssl=1)
ホームページをスマホ対応にする3つの方法は、Google公式ページの「モバイル SEO の概要」に答えが書いてあります。
1.レスポンシブ ウェブ デザイン
ユーザーのデバイス(パソコン、タブレット、モバイル、非視覚的ブラウザ)に関係なく、同じ URL で同じ HTML コードを配信しますが、画面サイズに応じて(つまり「レスポンシブ」に)レンダリングを変えることができます。
Google では、デザイン パターンとしてレスポンシブ デザインをおすすめします。
2.動的な配信
デバイスに関係なく同じ URL を使用しますが、ユーザーのブラウザに関してサーバーが把握した情報に基づき、デバイスタイプごとに異なる HTML を生成します。
3.別々の URL
デバイスごとに別々のコードを配信します。この設定方法では、ユーザーのデバイスの検出を試み、HTTP リダイレクトと Vary HTTP ヘッダーを使用して適切なページにリダイレクトします。
Google公式ページの「モバイル SEO の概要」の文章からはどういう意味かよくわかりませんね・・・
ということで、簡単な図で表してみますね。
レスポンシブ ウェブ デザイン
![レシポンシブデザイン](https://i0.wp.com/kukuli-blog.com/wp-content/uploads/2018/08/b3410ef88945807abe491729737991e3.jpg?resize=728%2C496&ssl=1)
ユーザーのデバイス(パソコン、タブレット、モバイル、非視覚的ブラウザ)に関係なく、同じ URL で同じ HTML コードを配信しますが、画面サイズに応じて(つまり「レスポンシブ」に)レンダリングを変えることができます。
Google では、デザイン パターンとしてレスポンシブ デザインをおすすめします。
特徴: URLが1つ・ページが1つ
簡単にいうと、1つのウェブページを作って公開するだけで、パソコンとスマホからのアクセスに対して、パソコン用ホームページとモバイル用ホームページにそれぞれレイアウトを変えてくれます。
パソコンかスマホか、見る端末によってレイアウトを選択して変えてくれるので、とっても楽です。
動的な配信
![動的な配信](https://i2.wp.com/kukuli-blog.com/wp-content/uploads/2018/08/be3018238a0c50b94dd8484a003c2375.jpg?resize=728%2C506&ssl=1)
デバイスに関係なく同じ URL を使用しますが、ユーザーのブラウザに関してサーバーが把握した情報に基づき、デバイスタイプごとに異なる HTML を生成します。
特徴: URLが1つ・ページが2つ
簡単にいうと、パソコン用ホームページとモバイル用ホームページの2つのウェブページを作り、パソコンとスマホからのアクセスに対して、パソコン用ホームページとモバイル用ホームページに振り分けてくれます。
パソコン用ホームページとモバイル用ホームページの2つのウェブページを作る必要がありますが、URLは同じです。
別々の URL
![別々のURL](https://i2.wp.com/kukuli-blog.com/wp-content/uploads/2018/08/623d053dbb92e7a83fb2d84f2ad755b4.jpg?resize=728%2C506&ssl=1)
デバイスごとに別々のコードを配信します。この設定方法では、ユーザーのデバイスの検出を試み、HTTP リダイレクトと Vary HTTP ヘッダーを使用して適切なページにリダイレクトします。
特徴: URLも2つ・ページも2つ
簡単にいうと、パソコン用とモバイル用の2つのウェブページを別のURLで作り、パソコンとスマホからのアクセスに対して、パソコン用ホームページのURLからモバイル用ホームページのURLにリダイレクト(転送)してくれます。
パソコン用ホームページとモバイル用ホームページの2つのウェブページを別々のサイトで作る必要があります。
ホームページをスマホ対応にするおすすめの方法は?
ホームページをスマホ対応にする3つの方法の中で、多くに知識がなくても取り組めるのは、①レスポンシブ ウェブ デザインです。
Googleでも、デザイン パターンとしてレスポンシブ デザインをおすすめしています。
レスポンシブ ウェブ デザインは、自分で何かするわけではなく、それに対応しているソフトを使うとすごく便利です。
例えば、WordPress(ワードプレス)のような無料ソフトは、1つのウェブページを作って公開するだけで、自分で何かをしなくてもOKなんですよ。
WordPress(ワードプレス)が、自動的にスマホ対応してくれるので、とっても楽です。
新しく作るホームページだけでなく、他のホームページからの移行も行うことができますよ。
まとめ
![](https://i1.wp.com/kukuli-blog.com/wp-content/uploads/2018/07/d624bfd709197e861012edbaf1df32ea.jpg?w=728&ssl=1)
![](https://i2.wp.com/kukuli-blog.com/wp-content/uploads/2018/07/a4104f4acb1fec47166abda37a0920be.jpeg?w=728&ssl=1)
私も文字が小さくて見づらいな~と思っていました。
友達にホームページのスマホ対応の話をしてみます!
![](https://i1.wp.com/kukuli-blog.com/wp-content/uploads/2018/07/d624bfd709197e861012edbaf1df32ea.jpg?w=728&ssl=1)
それがいいですよ!
ホームページはスマホ対応大前提で作るのが、もはや当たり前の時代ですから。