スマートフォンの普及により、近年モバイル経由のアクセスが急増しています。総務省の「平成30年版情報通信白書」によると「10代から40代では各年代とも80％程度かそれ以上がスマートフォンをインターネット接続端末として利用」と発表されており、モバイルからのアクセスがデスクトップからのアクセスを大きく上回っていることがわかります。
ビジネスシーンにおいてもモバイルサイトの重要度が高まりつつあります。 モバイル端末からの使用が多いにも関わらず、デスクトップサイトを基準としたサイト制作をおこなっていると、多くのユーザーにとって快適なユーザー体験を提供できなくなるだけでなく、検索順位にも影響を及ぼす可能性があります。
弊社では、様々なウェブサイト構築のノウハウを活かし、モバイルサイトならではのユーザビリティやMFI（モバイル・ファースト・インデックス）を考慮したサイト制作をご提供します。
よくあるお悩み
- 検索してもサイトが上位に表示されない
- スマートフォンユーザーの比率が高く、離脱率やコンバージョンが改善できていない
- スマートフォンで閲覧した際のサイトの表示速度が遅い
- スマートフォンで見た際に文字や画像が見にくい
モバイルファースト対応の特徴
特徴1：モバイルユーザーの特性に応じた画面設計
パソコンに比べ、スマートフォンなどのモバイル端末は他に作業をしながら見ていることが多く、必要なときにさっと取り出してすぐに目的を果たしたいというニーズがあります。また、平均的なスマートフォンの持ち方では片手で操作をおこなう場合が多いため、画面の上端にある要素はタップしにくいというような特性もあります。
モバイルファーストの設計では、このような閲覧時のニーズや特性をふまえて画面設計をおこないます。
また、スマートフォンのように限られた画面サイズにたくさんの要素が詰め込まれていると、目的の情報を見つけづらくなります。そのため、モバイルサイトの設計では、メニューやボタンのラベルを簡潔にしたり、パソコンでは2カラム・3カラムで表示していた要素を1カラムに変更することで画面に表示させる情報の密度を減らし、情報を見つけやすくします。
特徴2：モバイル端末で操作しやすいUIデザイン
異なるデバイスに合わせて最適化されるレスポンシブデザインを前提として、モバイル用・デスクトップ用の2通りの画面サイズでデザインをおこないます。ナビゲーションやコンバージョンボタンなど、サイトで大きな役割を果たす要素は、モバイルユーザーの特性をふまえてUIや配置を検討します。
モバイルサイトはタップ・スワイプで操作をおこなうのが基本です。タップエリアが小さかったり、要素同士が近すぎたりするとうまくタップできないため、ボタンやリンクのタップ領域を十分にとり、ミスタップが起きないようゆったりとしたレイアウトでデザインをします。また、リンク要素は、タップできることが明確にわかるような色や装飾でデザインをしていきます。
特徴3：どのようなデバイスでもデザインが保持されるようなコーディング
ブレイクポイント（画面サイズごとのデザイン切り替えポイント）を設定し、それぞれの条件に沿ったスタイルシートを記述していきます。ブレイクポイントの前後で要素がはみ出てしまったり、想定よりも大きな画面サイズで表示した際にレイアウトが破綻しないよう、検証を重ねながらコーディングをおこないます。
また、表示速度が遅いことによるユーザーの離脱やコンバージョン率の低下・検索順位の低下を防ぎ、サイトを可能な限り高速表示させるため、画像サイズの軽量化やCSS・JavaScriptの記述の最適化をおこないます。
弊社のモバイルファースト対応の流れ
サイトを新規で立ち上げる場合は基本的にレスポンシブデザインで制作します。
デスクトップサイトのみ存在している場合は、モバイル端末で快適な操作性を保てるよう、画像やテキストサイズを最適化すると同時に、ナビゲーションやボタンなどのUIはスマートフォンやタブレットでも使いやすいものに改修をおこないます。
-
- 1） ヒアリング
- サイトの目的とターゲットとなるユーザー像をヒアリングし、課題の洗い出しと、設計するにあたっての方向性をディスカッションします。
-
- 2） 画面設計
- ヒアリングで得られた情報をもとにモバイルファーストを考慮した画面設計をおこないます。ユーザー像や閲覧時のシチュエーションを考慮しながら、コンテンツの見せ方や大まかな配置、ナビゲーションに配置すべきメニュー名などを設計します。
-
- 3）デザイン
- レスポンシブデザインを前提として、デスクトップ用・モバイル用の2通りのサイズでデザインをおこないます。作成したデザインは、確認用のURLを発行し、実際の端末でUIの仕様やサイズ感に問題がないかをご確認いただきます。
-
- 4） コーディング
- 閲覧するデバイスの画面サイズに応じて最適なレイアウトで表示されるよう、コーディングをおこないます。新しい機種や端末などのトレンドにあわせたブレイクポイント（レイアウトを切り替える画面サイズ）を設定し、実機で検証をおこないます。また、サイトの表示速度高速化のため画像ファイルは軽量化をおこないます。
-
- 5）検証
- 検証環境にて、デザインや動きが仕様通りになっているか表示チェックをおこないます。またモバイルフレンドリーテストやPageSpeed Insights、Lighthouseで計測し、表示速度ができる限り速くなるよう、画像やマークアップ方法などの最終調整をおこないます。
-
- 6）納品
- すべての検証が完了後、納品いたします。
よくある質問
まずはMFI（モバイルファーストインデックス）を考慮したサイトになっているか確認します。MFIとは、検索エンジンの評価対象を、パソコン向けのページからモバイル向けのページに変更することです。Googleより発表があり、すでに適用がはじまっています。
まずは「デザインがスマートフォンでストレスなく閲覧できるか」「表示速度に問題はないか」「デスクトップサイトのコンテンツと差はないか」「リンクやタグに問題はないか」などをチェックし、最適化をおこなうことで、検索エンジンからの評価を改善できる可能性があります。
パソコンユーザーとスマートフォンユーザーでは、サイト閲覧時の動機や行動、操作の時間などが異なります。特にファーストビューに表示する内容やサイズ、 CTA（Call To Action：ユーザーに行動を喚起させるためのボタンや画像など）をデバイスに適したデザインに改修することで、コンバージョン率は大きく変わってきます。
まずはお気軽にご相談ください。
ご依頼いただくことは可能ですが、古いサイトの場合は対応に時間とコストがかかってしまう場合がございます。ゼロから構築したほうが効率がよい場合は、改修ではなく、サイト全体のリニューアルをご提案します。
表示速度は検索エンジンでの評価にも大きく影響するため、改善することをおすすめします。
原因は複数考えられますが、まずはPageSpeed Insightsなどで検証をおこない、問題を洗い出し、必要以上に容量の大きい画像を使用している場合は、画像サイズを軽量化します。不要なタグが混在している場合はタグの整理や記載位置を変更することで改善できる可能性があります。
弊社では表示高速化改善や画像軽量化改善のサービスをご提供しています。問題点の洗い出し・施策のご提案から 実装まで承っていますので、お気軽にご相談ください。
レスポンシブデザインに対応することが必須なわけではありません。
モバイル対応には「レスポンシブデザイン」のほかに以下の3種類の方法があります。
・デスクトップサイトとモバイルサイトそれぞれを作成
・アダプティブデザイン
ユーザーのコンテキストに合わせてコンテンツを出し分けする方法です。
レスポンシブデザインがどのようなスクリーンサイズでも同じコンテンツを提供するのに対し、アダプティブデザインはユーザーのコンテキストに合わせてユーザーが最適な体験ができるよう、機能やコンテンツそのものを出し分けます。
・ダイナミック・サーヴィン
アクセスしてきているデバイスをサーバー側で判定し、それぞれのデバイスに適したHTMLを配信します
ただ、上記の手法での実装は開発・運用時に工数がかかってしまうケースが多いこと、デスクトップサイトとモバイルサイトで掲載している情報量が異なる場合、検索エンジンからの評価が下がってしまう可能性があることから、弊社では多くの場合レスポンシブデザインでの実装をおすすめしています。
