Smartphone スマホ

 
スマホデザイン・UI

重いサイト…どうスマホ表示させる? 8つのテクニック

重いサイトをどうスマホに適合させるか?

Golf Digest.com の8つの解決テクニック

コンテンツ容量が大きく、重いWEBサイトをスマホ向けに最適化するのは大変な作業です。大量のコンテンツを、どうすれば小さなスクリーンに上手く押し込めることができるのでしょうか?

Golf Digest.comは、世界をリードするConde Nast社が発行するゴルフマガジンです。世界中に600万人の購読者がおり、WEBサイトには毎月100万人ものユニークビジターが訪れます。最新ニュースやゴルフ用品情報、そして耳寄りな情報を得るのに最適なサイトであり、動画や画像、世界のトップゴルファーによる記事など、ユーザーのゴルフをより良くする素晴らしい情報源です。

一方で、Golf Digest.comは重いコンテンツを抱えるWEBサイトでした。そこで、モバイル変換サービスを使って、スマホサイトをリデザインし、最適化を実施しました。Golf Digest.comの開発チームは、ユーザー向けのフル機能なモバイル・エクスペリエンスを設計しました。これにより、いつでもどこでもゴルファーが利用できる、高速表示を実現した魅力的なモバイルサイトとなっています。

これから、Golf Digest.comが取り入れた、モバイルWEBデザインに最適な8つの手法を紹介します。

1.段階的に情報を少しずつ開示させる

スマホの画面は小さいのに、多くのサイトは大量の情報を提供しようとします。この小さな画面に大量の情報を細かく表示してしまえば、ユーザーはいともたやすく情報のオーバーロードに陥ってしまいます。

そこで、段階的開示(プログレッシブ・ディスクロージャー)により、コンテンツの外、つまりフレームの外側に、ほかの情報への導線を置きます。ユーザーがタップ、またはスワイプしたときに、次の情報が表示されるようにしましょう。

段階的に情報を少しずつ開示させる

Golf Digest.comは、サイトナビゲーションを最小化することでヘッダをシンプルに抑えています。一度タップするだけで、ナビゲーションを表示し、次のセクションに移ることができます。

2. 広告枠がうっとうしくならないように!

広告枠がうっとしくならないように!スマホ向けに最適化されていない広告は、UX(ユーザー・エクスペリエンス)を台無しにしてしまう可能性があります。これを避けるために、ユーザーがどのようにWEBサイトをブラウズするかを考え、広告システムが邪魔しないよう気をつける必要があります。ユーザーがじっくりと考えるような付加価値の高いコンテンツを扱っている場合、特に当てはまります。

Golf Digest.comのモバイルサイトは、UXを壊すことなく広告システムを統合する良い例のひとつです。

3. カルーセルを利用し、ユーザーの関心を引き立てる

カルーセルを利用しユーザーの関心を引き立てるカルーセルとは、ユーザーが横にスワイプしたときに、更なるコンテンツを表示するUIエレメントのひとつです。これは画像の一覧や、注目すべきコンテンツを表示する場合において役立ちます。

Golf Digest.comは、ホームページのヘッダに大きな画像カルーセルを使用しています。ユーザーは、画像を左右にスワイプして、興味のあるストーリーを見つけることができます。

4.固定ナビゲーションで、ブラウジングを高速化

固定ナビゲーションとは、サイト上のどの場所にいても、スクリーン内の同じ場所に常に表示されるナビゲーションメニューです。

固定ナビゲーションで、ブラウジングを高速化最近の調査では、固定ナビゲーションメニューは、サイトのブラウジングを最大で22%高速化することができるため、多くのユーザーがこの機能を好んで利用することが分かりました。スマホ利用者は、高速でページ間を移動することが多く、そのため固定ナビゲーションは有用な機能といえます。

Golf Digest.comは、固定ナビゲーションを用意し、次の目的地へ行くことを簡単にしています。ユーザーが活字、動画、画像で構成された記事間を素早く移動したい場合など、固定された移動手段を用意するのは良い選択だといえます。

5. 大きなタッチターゲット = UXのホールインワン

限られたスクリーンの面積の中で、それぞれのエレメントを大きくするのはあまりいい方法ではありません。実際、ユーザーはスマホをそこまで上手に扱えるほど器用ではありません。指は、マウスによるピンポイントクリックより大きく、精度が低いのです。

大きなタッチターゲット = UXのホールインワン"これらを考慮して、サイト上のタッチターゲットをすべて大きくすることをオススメします。最低でも40px × 40pxで、周りに10pxのマージンを設けることを推奨します。

Golf Digest.comのリンクは一つひとつが大きく、どんな状況下でもタップが簡単です。たとえ、ソファに座ってブラウジングしている場合や、コース中に素早く情報を得ようとしている場合でも同じです。

6. PCは忘れて、コンテンツをスマホ向けに最適化する

モバイルでは、シンプルなものが美しいものに勝る傾向があります。またシンプルなものこそが美しくなる傾向もあります。

これも、有効なテクニックのひとつです。一度、スマホであなたのWEBサイトをじっくりと閲覧してみてください。情報は、効果的に伝えられているでしょうか? 現在のデザインは、メッセージの伝達を促しているでしょうか、それとも邪魔しているでしょうか?

デスクトップは忘れて、モバイル向けに最適化する

Golf Digest.comは、モバイル向けの画像ギャラリーを用意しています。画像のためのスペースを最大限に取るために、画像情報は隠されていますが、これらはタップやスワイプすることで表示できます。
 
また、ユーザーは画像の元記事についての情報を、左上の「i」をタップすることで得られます。さらに、右上の「x」をタップすることで画像の表示を解除し、元のページに戻ることができます(ブラウザの履歴APIを有効活用しています)。


7. 面倒なことは、すべてOSに頼る

面倒なことはすべてOSに頼るすべてのスクリーンやブラウザに対して、個別に綺麗なデザインを作成していると大変な作業になってしまいます。ドロップダウンやラジオボタン、スライダーなどのDOMエレメントに関しては、OSに存在するネイティブUIエレメントを利用すれば、そのような心配はなくなります。ネイティブUIエレメントはタッチターゲットとして十分な大きさを持っており、どんなデバイスでも見栄えがします。

Golf Digest.comではドロップダウンメニューに、ネイティブOSのエレメントを使用しています。

8. 縦横両方の表示に適合させる

モバイルデバイスは、縦横両方の向きで使用することができます。そのため、サイトもデバイスの向きにレスポンシブに対応していく必要があります。閲覧者が縦から横(またはその逆)の向きに変更したとき、可変グリッドレイアウトを使用してページをスクリーンに適応させましょう。

縦横両方の表示に適合させる

Golf Digest.comの柔軟なグリッドレイアウトは、コンテンツを異なるサイズ、異なる向きのスクリーンにもコンテツを適応させます。

 

【まとめ】常にユーザーを第一に考える

ユーザーは、サイト上のコンテンツを求めて、ウェブサイトを訪れます。しかし、素晴らしいコンテンツを用意するだけというのは、戦いの半分でしかありません。

その素晴らしいコンテンツを美しく表示すること――適切なデザインもまた非常に重要です。ユーザーの来訪の目的が学習、購読、ショッピング、ほかの何であれ、ユーザーはそのコンテンツがどんなデバイスからでもアクセスでき、また閲覧しやすいことを期待しています。

常にユーザーを第一に考え、コンテンツのデザインを最適化させましょう。ユーザーは時間、お金、そして忠誠を通じて、その努力に感謝してくれます。

<文/カナダ・Mobify社、翻訳・編集/ドーモ>

タグ

記事mobifyロゴ
Mobify(モビファイ)とは

Googleが認定しているマルチスクリーン対応のための最適化サービス。
デバイスに応じ、専用にデザインされたサイトを表示することができます。
ページの表示を高速化させる仕組みも持ち合せており、ユーザーの離脱を防ぐことが可能です。

▸Mobify(モビファイ)についてさらに詳しく

 最新記事