スマートフォンなどのモバイル端末からWebサイトにアクセスすることが一般的になって以来、「モバイルファースト」という言葉がよく聞かれるようになりました。
「モバイルファーストなサイトを作る」などのように使うことが多いこの言葉ですが、そもそもモバイルファーストとはどのような意味なのでしょうか？
モバイルファーストとはどんなサイトか？
モバイルファーストとはサイトそのものではなく、サイトを作るうえでの手法や概念のことを指します。
モバイルファーストという字面だけを見ると、「スマートフォンなどのモバイル端末で見やすいサイト」や「モバイル端末を優先したサイト作り」と言ったイメージを持つ人が多いかもしれません。
確かにモバイルファーストという言葉は、スマートフォンなどの爆発的な普及を背景として広まった考え方です。
スマートフォンはパソコンよりも画面が小さく、縦横比も異なる
それまでパソコンで閲覧していたWebサイトをスマートフォンで開いてみると、サイトの見え方が変わってしまう関係で、テキストが読みづらかったりリンクをタップしづらかったりする可能性があります。
こういったストレスを解消するために、Webサイトをスマートフォンでもストレスなく利用できるデザインにすること、広く言えばユーザーの利用状況などを考慮したWebサイトのデザイン方針が生まれ、それが「モバイルファースト」と呼ばれているのです。
ユーザが使いやすい設計が基本
しばしば勘違いされるのですが、モバイルファーストは「PC向けのサイトよりもスマートフォン向けサイトに力を入れて作る」「スマートフォン向けのサイトとPC向けよりも先に作る」などという意味ではありません。
決してPCユーザーを軽視することなく、ユーザーの利用状況を分析したうえでWebサイトをデザインするという考え方がモバイルファーストの本質です。
よって、「モバイルファーストとはどんなサイトか？」という問いの答えは、「ユーザーの利用状況に応じて使いやすく設計されたサイト」ということになります。
モバイルファーストはなぜ重要？必要な理由とは？
現在はPCとスマートフォンの両方を使いこなしている人がたくさんいます。
どの端末から閲覧されても一定の使い勝手が担保されていないサイトはユーザーフレンドリーさに欠けると捉えられる危険性があり、集客の機会を逃す可能性が高まります。
モバイルファーストの考え方に基づいて作られていないサイトは、小さなスマートフォンの画面見ると視認性が悪く、操作しづらいことがあります。
例えば、PCでの操作であればマウスカーソルが存在するのである程度ピンポイントにリンクをクリックできますが、スマートフォンは指によるタップやスワイプで操作する関係でピンポイントな操作には向いていません。
また、スマートフォンは通信が不安定になることがあるので、PCサイトの情報量をそのまま表示させようとすると時間がかかることがあります。
こういったストレスが蓄積されると、ユーザーはスマートフォンからそのWebサイトにアクセスするのを回避するかもしれません。
モバイルファーストのコンセプトに基づかないでWebサイトを設計すると、せっかく興味を持ってWebサイトに訪れてくれたユーザーが定着しない可能性があるのです。
これでは労力をかけてWebサイトを作った意義が半減してしまいます。
現在はスマートフォンからWebサイトにアクセスする人も多いので、モバイルファーストの考え方を持ってWebサイトを作成することは非常に重要かつ必要なことと言えます。
モバイルファーストのテンプレートを選ぶときのポイント
モバイルファーストを意識した場合、レスポンシブWebデザインのテンプレートを選ぶことをおすすめします。
レスポンシブWebデザインとは、内容を単一のHTMLで記述し、表示するときにはそれぞれの端末に対応したCSSを通すことで見せ方を変えるものです。
現在では多くのテンプレートがレスポンシブWebデザインに対応しています。
それぞれSEOに強い、デザインが豊富、視認性が高い、機能が多い、アニメーションに強いなどの強みがあるので、想定しているユーザー層に合わせて選択してください。
ここからは用途別にテンプレート選択のポイントをご紹介します。
店舗向け・企業サイト向け
企業や店舗の魅力をしっかりと伝えられるわかりやすさとデザイン性を兼ね備えたものを選ぶのがポイントです。
扱っているサービスや商品ごとに「飲食店向け」や「ファッションショップ向け」などと特化したテンプレートもあるので、そういったものを選んでみてもいいでしょう。
ECサイト向け
商品を効果的に見せる工夫が施されているテンプレートを選ぶことがポイントです。
また、ユーザーが商品を購入するまでの使い勝手も大切な要素です。
ブログや一般利用向け
多種多様な使われ方をするので、それぞれの用途にあったものをおすすめします
迷ったらユーザー数の多いものを選んでおくのも一案です。
ユーザー数の多いテンプレートは使い方やカスタマイズ等に関する情報も多いので、困ったときの解決方法がネット等に載っていることがあるからです。
モバイルファーストのテンプレートでのサイト作成から運営管理の注意点
テンプレートを使えば全てが解決するわけではありません。
Webサイト作成や運営・管理についての注意点を5つほどピックアップしてご紹介します。
ボタンの配置と大きさに配慮
スマートフォンユーザーは親指か人差し指で端末を操作するので、ボタンが近接していると間違ったボタンをタップしたり、小さいボタンはタップできなかったりします。
ボタンの間隔は一定以上空け、ボタンをタップしやすい大きさにすることをおすすめします。
レイアウトはシンプルに
スマートフォンのサイトは見やすさが大切なので、シンプルなレイアウトで作ったほうがいいでしょう。
基本的には1カラムで、サイドバーの代わりが欲しいときにはタップで開閉できるアコーディオンメニューをつけることをおすすめします。
画面の切り替えは少なめに
スマートフォンは通信が不安定な場合があるので、ページの読み込み回数を少なくした方が無難です。
ページをあまり移動させないような設計にすれば、この問題をある程度解決できます。
PCビューに切り替えられるようにする
スマートフォンを使っていてもPCと同じ見た目で閲覧したいユーザーもいるので、サイトのどこかにPC版に切り替えられるボタンを用意しておくといいでしょう。
モバイルファーストのテンプレートを使うメリットとデメリット
何も考えずにテンプレートを使うのはあまりおすすめできません。
テンプレートを使ううえでのメリットとデメリットを知っておきましょう。
メリット1:SEO効果が高くなる
多種類の端末から同じURLにアクセスしてもらえるので、リンク効果が高まりやすくSEOに良い効果を及ぼします。
メリット2:Webサイトの修正が楽にできる
HTMLが1つなので、内容を変更するときはHTMLのみを修正すれば問題ありません。
デメリット1:Webサイトの表示速度が遅くなることがある
PCで表示するためのCSSや大きな画像ファイルをスマートフォンで読み込むと、通信状況によっては表示が遅くなる可能性があります。
デメリット2:CSSの修正に手間がかかる
HTMLは1つですがCSSは複数存在するので、記述の変更や別ファイルの用意が必要になります。
結果的に運営に時間やコストが生じてしまいます。
モバイルファーストはこんなサイト運営者におススメです
モバイルファーストの考え方に基づいてサイトを作るのは万人におすすめできますが、特に女性向けのコンテンツを扱っている人はモバイルファーストのコンセプトを大切にすることをおすすめします。
女性向けコンテンツはスマートフォンからのアクセスが大半を占めていると言われているためです。
また、30代以下の若年層向けコンテンツについても、同じ理由からモバイルファーストを積極的に考えた方がいいでしょう。
反対に、BtoB向けのページなどはPCからのアクセスが主流という話もあります。
しかしBtoB向けであっても、やはりスマートフォン向けのページを作っておいた方が無難です。
どの端末から閲覧されても見やすく使いやすいサイトである方が、BtoB向けであっても閲覧者から良い印象を持ってもらえ、企業イメージのアップに繋がるからです。