はじめに

モバイル端末向けサイトを構築する際に知っておくべき 3 つのこと

1. ユーザーが快適に利用できるサイトを作成する

サイトの訪問者が目的を達成できるようサポートします。訪問者が目的とするのは、たとえば、ブログの記事を楽しんだり、お店の所在地を調べたり、商品のレビューをチェックしたりすることです。Walgreens の e コマース部門 GVP 兼最高技術責任者であるアブヒ・ダール氏は、「当社がモバイルに対するあらゆる取り組みで目指しているのは、お客様がより快適に暮らせるようにすることです」と話しています

サイトの設計にあたっては、ユーザーがタスクを思いついてからサイトにアクセスしてタスクを完了するまでのプロセス全体を考慮して、ユーザーがよく行うタスクを達成しやすくなるようにします。

サイトの訪問者がたどると思われる手順を大まかに捉えて、そうした手順をモバイル端末で簡単に行えるようにします。エクスペリエンスを簡素化して、ユーザー インタラクションの回数を少なく抑えます。この例では、(1)ユーザーが購入したいランプを検索してサイトをクリックする、(2)ランプをいくつか閲覧する、(3)欲しいランプを購入する、となっています。

2. モバイル ユーザーが一般的なタスクをどの程度簡単に行えるかを基準に、ウェブサイトの有効性を測定する

モバイルサイトの作成では、優先順位を付けることが必要です。まず、モバイル端末でサイトにアクセスするユーザーにとって、どのようなタスクが最も重要で一般的であるかを考えます。こうしたタスクを行いやすくすることが不可欠であり、そのようなモバイルサイトを作れるかどうかによって、ユーザーがどれだけスムーズに目的を達成できるかが決まります。サイトのデザインを工夫して、使いやすさを向上させることも大事です。インターフェースに一貫性を持たせ、プラットフォーム間で統一されたエクスペリエンスを提供することに重点を置きます。

「モバイル端末のユーザーは、モバイル ショッピング サイトに関しては使いやすさを最も重視します。調査に回答したユーザーの 48% が、利用するモバイルサイトの最も重要な特質として使いやすさを挙げています」(MediaPost より)

3. あらゆる端末に共通するモバイル用のテンプレート、テーマ、デザインを利用する(レスポンシブ ウェブ デザインを採用する)

レスポンシブ ウェブ デザイン」(RWD)とは、ユーザーがパソコン、タブレット、スマートフォンのいずれでアクセスする場合でも、ページでは同じ URL とコードを使用し、画面サイズに応じて表示の調整のみを行うこと(違いに対応すること =「レスポンシブ」)を指します。 Google では他のデザイン パターンよりも RWD の採用をおすすめしています。 RWD のメリットの 1 つは、サイトのバージョンを 2 つではなく 1 つ作成すれば済むという点です(つまり、サイトの PC 向けバージョンを www.example.com、モバイル バージョンを m.example.com として別々に作るような必要がなくなり、PC とモバイルの両方のユーザー向けに 1 つのサイト(www.example.com など)を用意するだけで済みます)。

レスポンシブなサイトでは、同一の URL とコードを使用し、さまざまな画面サイズに合わせて表示を調整します。上記の 3 種類の端末はすべて www.example.com を使用します(モバイルページには m.example.com、タブレット ページには t.example.com、という方式ではありません)。

RWD の導入によって Baines & Ernst では、複数のウェブサイトを作成することなく、さまざまな画面サイズに対してサイトのエクスペリエンスを最適化しています。その効果として、ユーザーが一度のサイト訪問で閲覧するページ数が 11% 増加し、モバイルのコンバージョンが 51% 向上しました」

「コンバージョン」は、ユーザーが商品の購入、お店や企業への問い合わせ、ニュースレターの登録といった特定のアクションを行うと発生します。

レスポンシブ ウェブ デザインの実装方法について詳しくは、Web Fundamentals のデベロッパー向けコンテンツをご覧ください。モバイル、タブレット、PC 向けのウェブサイトについてさまざまな実装の長所と短所を比較検討する場合は、マルチスクリーン対応サイトの構築をご覧ください。

初心者として避けたい 3 つのミス

ミスその 1 - モバイル ユーザーのことを忘れてしまう

良いモバイルサイトとは役立つサイトである、ということを忘れないでください。良いサイトは、ユーザーのタスクが関心のある記事を読むことであっても、お店の場所を確認することであっても、それらのタスクを完了できるようサポートします。モバイル形式のサイト(モバイルでの見栄えが良いサイト)を作成しただけ、という過ちに陥らないようにしてください。単にモバイル形式というだけのサイトでは、有用な機能がすべて失われてしまうためです。そのようなサイトではなく、必ず、モバイル フレンドリー サイト(モバイル ユーザーにとって本当の意味で役立つ、ユーザーの最も一般的なタスクに最適化されたサイト)を構築してください。

ミスその 2 - モバイルサイトを PC 向けサイトとは別のドメイン、サブドメイン、サブディレクトリに実装してしまう

Google では複数のモバイルサイトの構成をサポートしていますが、モバイル用に別の URL を作成するとサイトの保守や更新の手間が大幅に増えるほか、技術的な問題を引き起こす可能性のある要素を抱えることになります。通常は、レスポンシブ ウェブ デザイン(RWD)を採用して PC とモバイルに同じ URL でサイトを配信することにより、サイトの構成を大幅に簡素化することができます。レスポンシブ ウェブ デザインは Google の推奨構成です。

ミスその 3 - 周囲からヒントを得ようとせず、孤立して作業してしまう

同じ分野の他のサイトや競合他社のサイトをチェックして、ヒントやおすすめの方法がないか探すようにします。先行している他のサイトからさまざまなことを学べるというメリットがあります。 The Mobile PlaybookGoogle マルチスクリーン対応の成功事例にも、参考になるアイデアが豊富にあります。

デベロッパーとともにサイト構築に取り組む際に考慮すべきこと

デベロッパーと協力してモバイル フレンドリー サイトを構築する場合には、次の手順に沿って、優れた成果を得られるようにします。

1. デベロッパーの照会先やモバイルサイトのポートフォリオを確認する

デベロッパーに、レスポンシブ ウェブ デザイン(RWD)の経験があるかどうかを尋ねます。現行サイトが PC 向けのみで、そのサイトをモバイル フレンドリーにする場合は、デベロッパーに対して、PC サイトをレスポンシブ サイトに移行したことがあるかどうかを尋ねます。そのデベロッパーがこれまでに構築した他のサイトを確認します。そのデベロッパーの照会先やこれまでの顧客に問い合わせて、そのデベロッパーについての情報や評判を確認します。Google の PageSpeed Insights などのツールを利用して、デベロッパーの手がけたサイトを調べることができます。PageSpeed Insights では、ページの速度やユーザビリティが低下する原因となっている要素が特定されます。

Web Fundamentals は、スピードとユーザー エクスペリエンスの両方について PageSpeed Insights のモバイルテストに合格しています。

2. デベロッパーにサイトのモバイル ユーザーを確実に理解してもらう

デベロッパーにビジネスの内容を説明し、モバイルサイトでの最適化が必要な最も一般的なタスクがどれであるかを伝えます。モバイル ユーザーにとって必要な機能をサポートするサイトが確実に構築されるようにします。

3. スピードを必ず重視することをデベロッパーに求める

ブラウザでページを読み込む際にユーザーを長時間待たせることがないようにしてください。デベロッパーが PageSpeed Insights(前述のツール)を意識できているかどうか、また、ページの読み込みを早くする手法に詳しいかどうかを確認します。WebPagetest(英語)でのページの「レンダリング」速度を競合のサイトと同じにする、という内容を契約に含めることができます。それが困難な場合は、PageSpeed Insights の結果が緑のチェックマークになるようにする([修正が必要] な問題が存在しない)ことをデベロッパーに確約してもらいます。(ページのテスト結果が緑のチェックマークにならない場合は、問題を修正することのコストとメリットをデベロッパーとともに比較検討して対処します)。モバイルページのスピードについて詳しくは、動画「Quick fixes in mobile website performance」(英語)をご覧ください。

4. デベロッパーにウェブ解析を導入してもらう

サイトのパフォーマンスについて集約された情報を収集できるように、Google アナリティクスなどのウェブ解析を導入します。

5. デベロッパーとともに Google のウェブマスター向けガイドラインを十分に理解する

このガイドラインには、Google がどのようにサイトのコンテンツを検索、処理、ランク付けするかについての情報が含まれています。

6. モバイルサイトの立ち上げ後の改善作業を契約内容に含める

ユーザーからのフィードバックやウェブ解析のデータを収集し、それらを反映してサイトを改善することが必要となります。

Google AdWords の推奨するモバイルおよびマルチスクリーン対応ベンダーのリストを検討することをおすすめします。モバイルサイトの実装について詳しくは、モバイル SEO のドキュメントをご覧ください。

フィードバックを送信...