スマホサイトの作り方。対応すべき大事な理由と2つの対応方法をご紹介。
はじめに
近年インターネットやスマートフォンの普及により、Webサイトはモバイルからアクセスが多くなる一方です。それにより、PCからのアクセスだけを考慮していればよかった昔とは違い、現在のWebサイトは、モバイルユーザーへの対応が必要とされる状況になってきています。
今回は、現在のWebサイトが迫られているスマホ対応についてご紹介したいと思います。
目次
Webサイトのスマホ対応が必要になった経緯
2007年、アメリカのAppleが「iPhone」を発売したことによりスマホの普及は始まりました。
iPhoneの登場から10年以上過ぎた現在、日本でのスマホ普及率は8割を超え、ユーザーはいつでもどこでもネットにアクセスできる状況にあります。
このスマホの爆発的な普及により、PCのアクセスのみを想定していたWebサイトの状況が変わって来ました。
いち消費者をターゲットにしたBtoC向けWebサイトでは、スマホからのアクセスが7割を超えるWebサイトも多く、企業を対象にしたBtoB向けWebサイトでも、スマホからのアクセスが3割を占めることも珍しくない状況になっています。
こういったアクセス状況を踏まえ、現在多くのWebサイトがスマホ対応を迫られている状況です。
Webサイトをスマホ対応させるべき3つの理由
スマホの爆発的な普及によりWebサイトを見るユーザーのアクセス方法は大きく変化しました。
これにより、Webサイトのスマホ対応は、もはや必須と言える状況になっています。ここからは、あなたのWebサイトが、スマホ対応すべき具体的な理由を見ていきたいと思います。
スマホでの検索数がPCでの検索数を上回っている
Googleは2015年に「PCからの検索数」より「スマホを含めたモバイル端末からの検索数」が多くなったと公表しました。それにより、スマホ未対応のWebサイトは、スマホの検索結果で上位表示が難しくなってきています。
SEOで有利
また、検索エンジン最大手のGoogleは、2015年に行ったコアアルゴリズムアップデート以降、スマホ対応したWebサイトを評価し続けています。これにより、SEOを意識したWebサイトを制作する際は、スマホ対応が必須とも言える状況になってきています。
スマホ対応していないWebサイトは閲覧しづらい
スマホ対応していないWebサイトでも、PCサイトが縮小され表示されているため一見問題が無いように感じます。
しかし、スマホの画面に縮小されたPCサイトが表示されている状態では、後述するような問題が出てきます。
PCサイトとスマホサイトでは画面サイズが違う
スマホ未対応のWebサイトは、デスクトップやノートパソコンで閲覧しているPCサイトが、スマホの画面幅に縮小されて表示されることになります。
画像は元より文字も小さく表示されることになり、ユーザーにとっては非常に読みづらい状態になります。
PCサイトはマウス、スマホサイトは指でのタッチ
PCでは、マウスポインターのおかげで小さいところでもクリック可能ですが、スマホではどうでしょうか。
スマホではマウスポインターより何倍も太い指を使ってスクロールやリンク部分をタップすることになります。その際、スマホに小さく表示されたPCサイトでは、テキストリンクは非常に押しづらく、場合によっては違うリンクを押してしまうなど、ユーザーにとって大きなストレスとなりえます。
また、PCサイトでマウスポインターを当てる「マウスオン」という概念がスマホにはありません。「マウスオン」によってPCサイトに何か動きを与えているサイトは、スマホではその動きは期待でいないことになります。
Webサイトをスマホ対応しないと起こりうる3つのリスク
スマホ対応をしていないWebサイトは閲覧しづらいだけでなく、後述するような問題が起こる可能性があります。具体的にはどういった問題が発生するか見ていきましょう。
スマホユーザーがサイトから離脱する
現在スマホからのアクセスは、無視できないボリュームになっています。
そういった中でWebサイトをスマホ対応していないと、スマホの画面にPCサイトが小さく表示されるため、ユーザーにとって非常に閲覧しにくいサイトになります。
こういった閲覧しにくいWebサイトは、ユーザーがストレスを感じやすく滞在時間が短くなる傾向にあり、場合によってはすぐに離脱してしまう可能性もあります。
このことは、次の検索順位の低下にもつながります。
検索順位が低下する可能性がある
先述のようにWebサイトがスマホで閲覧しにくい状態だと、ユーザーがストレスを感じるため、滞在時間が短くなります。
場合によっては、アクセスしてすぐに離脱してしまう可能性もあります。
このようにユーザーがすぐ帰ってしまうWebサイトは、検索エンジンの評価を下げることにもつながり、検索順位が下がることを意味します。
検索順位は、順位がひとつ違うだけでアクセス数が大きく変わるほど重要なものであり、Webサイトの集客力にも大きく関係してきます。つまり、スマホ対応をしないと、Webサイトの集客力を大きく下げることを意味します。
多くの機会損失につながる
スマホが普及しても、企業サイトのアクセスは相変わらずPCからが多いかもしれません。
ただ、「認知」に関してはどうでしょうか。SNSや社内ブログの記事など認知に関するものはスマホから閲覧される可能性が高く、今後顧客になりうるユーザーが、オフタイムに電車から貴社の商品やサービスを「認知」する可能性もあります。
また、「採用」に関するアクセスにおいても、スマホからのアクセスは無視できません。
現在の20代のスマートフォン利用率は90％を超えており、若くて優秀な人材を獲得するためにはWebサイトのスマホ対応は必須です。
このようにスマホ対応をしていないと、あらゆる場面で機会損失の可能性があることを知っておきましょう。
Webサイトをスマホ対応させる2つの方法
では、実際にスマホ対応を行いたい場合、どのような方法があるのでしょうか。
ここからは、スマホ対応のやり方についてお話ししていきます。
1.スマホ専用のWebサイトを新たに作成する
まずは、既存サイトとは全く別に、スマホ用サイトを作成していく方法です。
新たにスマホサイトを作成するため、既存サイトのファイルを大きく変えずに作成できるメリットがあります。その反面、ひとつのサイト、ひとつのページに対しPCサイトとスマホサイト、2つのファイル管理が必要となり、修正などを加える際は2サイト分修正する必要があり運用が大変です。
また、PCサイトとスマホサイトが別のURLになり閲覧者の流入が分散するので、SEO観点からも弱くなってしまうことがあります。
2.現在のPCサイトをスマートフォンに最適化させる
2つ目は、既存サイトのファイルに、スマホサイトのための記述を加える方法です。
既存サイトのコードを大きく変更するというデメリットがある反面、一つのファイルですべてのデバイスに対応した表示やデザインが実現できるため、構築後の運用が非常に効率的です。
一つのファイルで、PCやスマホタブレットなど、デバイスの画面サイズによってデザインの表示を切り替える対応のことを、「レスポンシブデザイン」や「レスポンシブ対応」と言い、現在の「スマホ対応」はこちらが主流となっています。
レスポンシブデザインを前提としたスマホサイトの作り方
ここからは、現在の「スマホ対応」の主流となっているレスポンシブデザインについて詳しく見ていきたいと思います。
レスポンシブデザインとは
レスポンシブデザインとは、Webサイトを「様々なデバイスの画面サイズに応じて最適なデザインを表示する」のことを指します。
PCでの閲覧が主流だった昔とは異なり、現在はスマホを主流に、ユーザーは様々なデバイスでアクセスしてきます。そういった状況のなかで、デバイスごとにサイトを作成していくと、運用面も含め非常に効率が悪くなるため、1つのファイルで様々なデバイスの表示・デザインに対応できる「レスポンシブデザイン」に注目が集まるようになりました。
レスポンシブデザインの3つのメリット
スマホ対応の主流として注目されているレスポンシブデザインですが、その具体的なメリットを見ていきたいと思います。
どのデバイスで見ても閲覧しやすいサイトになる
全てのデバイスでPCサイトを表示するのとは異なり、レスポンシブデザインは、デバイスによって見せ方を最適化するため、どのデバイスで見てもユーザーにとって閲覧しやすいサイトになります。
Webサイトの修正・更新が簡単
スマホサイトを別のファイルでつくる場合、新たなHTMLファイルを作成する必要があり、内容を修正・更新する場合は、複数のファイルを修正しなければなりませんでした。
それに対し「レスポンシブデザイン」は一つのファイルでPCサイトとスマホサイトを管理するため、修正や更新を楽に行うことが出来ます。
URLが一つになり、SEOに強くなる
PCサイトとスマホサイトを別に作る場合、URLが別になります。しかし、レスポンシブデザインでは検索エンジンの評価も一つのファイルに対して行われるため、検索順位が向上しやすくなります。
レスポンシブデザインの2つのデメリット
いいことばかりのように見える「レスポンシブデザイン」ですが、当然デメリットも存在します。
デザインに制限があり、レイアウトが崩れることも
HTMLファイルを一つで管理しているため、スマホとPCで見せ方を大きく変えることが難しいです。
PCで凝ったデザインの見せ方をした場合は、スマホのデバイスによっては、レイアウトが崩れることもあります。
このようにデザイン的にやや制限があるため、デバイスが違っても表示するデザインが似てしまうことがあります。
スマホ表示に時間がかかる
レスポンシブデザインは管理するファイルが1つで済む反面、スマホでは表示しないPCのためのコードも読み込むことになります。そのため、データも読むための時間がかかる事があり、Webサイトの表示が遅くなる場合もあります。
このようにデメリットもいくつかありますが、圧倒的に運用しやすいというメリットが大きく、現在ではレスポンシブデザインを採用するサイトがほとんどです。
スマホサイトのデザインで注意すべき点
では、いざスマホサイトを作成していく際、あらゆるデバイス・画面幅に対応するためのデザインは、どのようにすればよいでしょうか。
スマホサイトはシンプルなデザインに
PCサイトでは2カラムや3カラムなどのレイアウトは当たり前ですが、スマホサイトだと画面が小さいため、1カラムでのデザインが基本となります。
また、イラストや背景画像などを使用した凝ったデザインにする場合、PCサイトでは可能でもスマホでの表示を考えると表現が難しい場合が多いため、シンプルなデザインが理想です。
スマホサイトはタップ操作を意識
スマホサイトは、指でタップしながら操作することを意識しましょう。
PCサイトでのマウスポインターは細かい部分をピンポイントでクリックできますが、指でのタップは同じようにはいきません。スマホサイトではテキストリンクではなく、ある程度大きさのあるボタンにしましょう。
スマホサイトのフォントサイズについて
フォントサイズにも気を配りましょう。
ユーザーの年齢や画面サイズによりますが、スマートフォンで読みやすいフォントサイズは16pxと言われています。大手メディアのスマホサイトでは、本文テキストのフォントサイズは16pxが最も多く、最小でも14pxとなっています。
16pxだとWebサイトの内容によっては大き過ぎたり、バランスが悪い場合もあるかもしれませんが、本文テキストは最小でも14pxにしておきましょう。
確認は常に実機を使って
デザインや動作の確認など、最終的な確認は実機のスマホを使って行いましょう。
便利な検証ツールが多々ありますが、実機で見ると不具合が発生していることもあります。
シフトではレスポンシブデザインによるスマホ対応を行っています
レスポンシブデザインの対応は、HTMLやCSSといった言語を使うため、制作にテクニックが必要になります。
また表示するデバイスによって見せ方を変えるため、それを想定したデザイン構成力が必要になってきます。
株式会社シフトでは、今まで数々のサイトを制作し、その多くをレスポンシブデザインでスマホ対応してきました。
スマホ対応した、シフトの制作実績はこちらをご覧ください。
シフトで制作したスマホサイトの実例
ここからはシフトが制作したサイトのなかからスマホ対応した案件を一部ご紹介します。
コパル電子様
特徴とデザイン
製品情報が1500以上掲載されているBtoB向け製品のコーポレートサイトです。
メイン画像を、横幅の広いPCと縦長いスマホで変更しています。また、メイン画像下のバナーの見せ方も、PCとスマホで変えています。
日本エンコン様
特徴とデザイン
医療や消防・製鉄など、特殊作業をサポートする製品を扱う会社です。
PCでは、向かって左に配置していたメニューをスマホでは、右上のボタンの中に格納し、ユーザーが必要な時にだけ表示するようにしています。
スマホサイトについてまとめ
今回はWebサイトのスマホ対応について説明しました。
スマホ対応が必要になった経緯からスマホ対応しないと起こりうるリスク、デザインで注意すべき点など、多岐にわたり説明しました。
スマホ対応は、現在のWebサイトを制作・運用するうえでは必須の項目です。今回ご紹介をした内容が何かのお役に立てば幸いです。
この記事をシェア
