うずら技術メモ

こんにちは。livedoor グルメを担当している澤田です。

livedoor グルメでは3月に、iPhone版Safariブラウザでの表示最適化に対応いたしました。これは、iPhone版Safariブラウザでlivedoor グルメを閲覧した際に、PC版の画面ではなく、iPhoneの表示サイズや使い方に合わせてカスタマイズされた画面を表示させるものです。

最適化されてないサイトの場合は、基本的にPCと同じ画面がiPhoneに表示されるので、表示される画面が小さく、大量の画像データなどを読み込むため表示に時間もかかります。

この「最適化」の作業を行うことで、iPhoneユーザーにとって必要な機能を、より使い易いナビゲーションで提供できるようになります。

今回はその画面開発時に、ユーザーの使い勝手に留意して設計した、いくつかのポイントについてご紹介します。iPhoneをお持ちの方は、ぜひSafariでlivedoor グルメを操作しながらお読みください。

【iPhone版 livedoor グルメ】　http://gourmet.livedoor.com/lite/
※iPhoneのSafariで閲覧してください

なお当サイトは、現状ではXperiaには対応されておりませんので、今回はiPhone版Safariへの最適化を対象としてご紹介していきます。

スマートフォンの基礎知識

最適な画面を考える前に、まずスマートフォンブラウザの基本的な利用や実装の環境を確認しましょう。以下のような環境下を前提としてスマートフォン用サイトを設計していく必要があります。

• 携帯できるので、外出先や移動しながらの利用が多い
• Wi-fiと3G回線（携帯電話回線）の両方の接続環境で利用される
• HTML、CSS3、Javascriptなどを利用して開発可能
• ネットをブラウジングするだけではなく、さまざまなアプリが利用できる

上 記から、利用される環境はモバイルに近く、実装環境はPCに近い、両者の中間に位置していることがわかります。また、多数のアプリと併用して利用されると いうこともスマートフォンならではの環境ですね。他にも、iPhoneではFlashが対応していないなどの特徴もありますが、今回の話ではフォーカスか ら外れているので省かせていただきます。
このことを踏まえ、以下のような点を注意して実装を進めていくといいでしょう。

一画面に表示する要素はできるだけ軽く、シンプルに

ス マートフォンを利用する場合、3G回線で利用する場合も非常に多いです。3G回線はWi-fiと比べると転送速度は格段と落ちるので、表示時間にかかるス トレスを極力軽減する必要があります。必要以上に画像データを利用したりして、画面の読み込みの負荷にならないように注意しましょう。
ボタンなども、全面画像にするのではなく、背景画像とCSSを用いて極力軽くするように心がけましょう。

▲「livedoor グルメ」トップページ

livedoor グルメのトップページでは、ロゴとボタンの背景のみにしか画像は使われておらず、できるだけHTMLとCSSだけでページを組んでいます。この辺はモバイルのサイト設計にも近いですね。

画面遷移を省いた表示方法を活用する

前 項と同じく、表示時間を軽減するという理由で、画面遷移そのものを極力減らす工夫も必要です。 Javascriptなどを用いることにより、画面を遷移させることなく（同一URL内で）、様々な見せ方ができます。これは前項とは逆に、モバイルサイ トでは実現できないインターフェースです。
例えばlivedoor グルメの中では、以下のような使い方をしています。

同一画面内でスライド表示するメニュー

表示メニューや場所、ジャンルなど、階層を持つ情報を出すときに、その都度画面を遷移させていたら時間がかかってしまいます。なるべくユーザーが選びたい情報をサクサク選べるように、同一画面内でスライドさせる方法を用いました。

トップの「条件から探す」にタッチすると、右側から条件メニューがスライド。
「場所」から、「都道府県」→「エリア」→「駅」と次々と絞り込まれ、条件を選ぶと条件メニューに戻ります。

同画面で一覧のページをロードする

「一覧ページ」も、読み込みに時間がかかることでストレスを感じやすいページの一つです。このページでも、次ページへの読み込みをスムーズにするため、同一ページで次ページを読み込むようにしています。

【注 意！】詳細ページへ遷移した後、ブラウザバックで一覧へ戻ったとき、これまで開いていた次ページが閉じて1ページ目のみの表示に戻ってしまいます。そうす ると元のお店も閉じられてしまい、以降のお店を探すときまたページャーをスクロールさせる必要が出てしまいます。開いたページがブラウザバックで閉じない ような処理を忘れないようにしましょう。

外出先で必要とされる機能を重視する

前述のとおり、スマートフォンは外出先で多用される可能性が高いです。そのため、外出先でのニーズが高い機能の優先度を上げて設計していく必要があります。逆に外出先ではいらない機能を捨てるという取捨選択も必要です。

前述したlivedoor グルメのトップページでは、今いるところから近くのお店をすぐに検索できるよう、「現在地周辺」の検索軸を最優先に置きました。他にも、例えば以下のような機能も実装しています。

写真を撮ったらその場でサイトへメール送信

iPhoneユーザーの中には、お店の写真をiPhoneで撮影するユーザーも少なくありません。しかし撮影した写真をPCに取り込み、livedoor グルメへアップロードするのは手間がかかりますよね。
その手間を省くため、当サイトではメールで写真を送信することで、livedoor グルメ内の自分のページに写真を保管することができるようにしました。

事前に投稿用メールアドレスを登録し、撮影した写真を指定のメールアドレスに投稿することで、送られた写真がマイページの「写真一覧」に保存されます。

撮っ た写真をその場ですぐにメールで送信し、食べ終わったら歩きながら、または家に帰ってゆっくりとお店のクチコミを投稿することができます。画像編集アプリ をインストールしている人なら、送信前に画像の編集がその場で簡単にできてしまうのも、スマートフォンの良いところですね。これもまた外出先での利用なら ではの機能です。

スマートフォン本体やアプリなどで馴染みのあるUIを参考にする

スマートフォンを活用しているユーザーは、当然他のアプリも併用で利用しています。独自のUIを設計したところで、他との使い勝手が違えばユーザーはその違いに戸惑いを感じることがあるでしょう。
場合によっては、他のアプリでも馴染みのあるUIを参考にしていくのもひとつの手ですね。

前の画面に「戻る」ボタンは左上に設置する

iPhone版のSafariにはデフォルトで下のツールバーにブラウザバックのボタンが設置されています。しかし、他のアプリをよく見てみましょう。

大抵のアプリでは前の画面に戻る場合は、画面の左上に「戻る」ボタンを設置しています。使い慣れたユーザーは無意識のうちに「前に戻る場合は左上のボタン」という認識を持っているでしょう。
「Safariでは左下、他のアプリでは左上」という区別を、意識して利用できるユーザーはそう多くはありません。できる限り左上に「戻る」導線を置いてあげる方が親切といえるでしょう。

まとめ

今回はスマートフォン用サイトを設計する際に、ユーザーのために留意する観点として、以下の4つを挙げました。

• 一画面に表示する要素はできるだけ軽く、シンプルに
• 画面遷移を省いた表示方法を活用する
• 外出先で必要とされる機能を重視する
• スマートフォン本体やアプリなどで馴染みのあるUIを参考にする

もちろんその他にも、それぞれのサイトに合わせた使い勝手を考慮する必要がありますが、上記のことは最低限のこととして抑えておきたいところです。

今 回はiPhone版Safariを対象にご紹介しましたが、これからはAndroid携帯など他のスマートフォンや、iPadのようなタブレット型PCへ の対応も必要となってきます。PCでの閲覧を前提としたままだと、個々のデバイスでサイトが見にくかったり、利用シーンと合わなかったりする問題が発生 し、ユーザーの支持を得られなくなる危険があります。

限られた通信環境や画面、操作性の中で、ユーザーにとってどの情報が必要で、どの情報がいらないのかを判断しながらナビゲーションなどのサイト設計を行うことで、本当にユーザーに必要とされるサービスを提供できるのではないでしょうか。

ライブドアでは新たなデバイスにも柔軟に、ユーザーの使い勝手を意識して開発を進めることができるディレクターを募集しています。