スマートフォンで映画の公開日を調べ、検索結果から作品ページを開く。ところが文字が小さく、拡大すると配信情報の表が画面からはみ出してしまう。書かれている情報が正しくても、知りたいことを確かめるのに手間がかかるなら、そのページは読者の役に立ちきれていない。
モバイル対応は、スマートフォン用の見た目を用意して終わりではない。狭い画面を指で操作し、移動中や短い空き時間に読む人が、必要な情報にたどり着けるようにする設計だ。アニメ・映画の情報サイトなら、作品名で検索して来た人が、あらすじ、公開・配信状況、出演者を迷わず確認できるかを考えたい。
小さな画面では、情報の順番が使いやすさを決める
パソコンなら、本文の横に作品データや関連記事を置ける。スマートフォンではそれらが縦一列に並びがちだ。サイドバーをそのまま本文の下へ移すと、読者が探している情報が長いスクロールの先に埋もれることもある。
新作アニメの記事なら、冒頭近くに作品名と確認済みの放送・配信情報を置き、その後で見どころや制作陣を紹介できる。ただ、何を先に見せるかは記事の目的次第だ。レビューの読者には評価の根拠が大切で、作品データを何度も繰り返す必要はない。画面に合わせて要素を縮めるより、何を先に伝えるかを決める。そこからモバイル対応を考えたい。
読める文字と押せる操作は別々に確かめる
文字が画面幅に収まっていても、行間が詰まっていると長い記事はつらい。文字サイズや一行の長さ、段落の切れ目は実機で確かめたい。公開日などを画像内にしか載せていない場合、画面によっては細部が読めず、文字だけを拡大することも難しい。重要な情報は本文にも書いておく。
操作では、隣り合うリンクを指で押し分けられるかを見る。配信条件へのリンクやメニューが密集していると、別のページを誤って開きやすい。文字のコントラストやリンクの見分けやすさについても、ウェブアクセシビリティの基本的な考え方が確認の手がかりになる。
編集時に見たい三つの箇所
- 冒頭：作品名と記事の主題がすぐ分かるか。見出しや画像が大きすぎて、本文への到達を妨げていないか。
- 途中：長い出演者一覧、注記、引用や表が横にはみ出さず、読み進められるか。
- 末尾：次に確認できる情報へのリンクが押しやすく、行き先も分かるか。
リンクの文言も操作の一部だ。「詳しくはこちら」より「配信条件を確認する」のほうが、狭い画面でも押す前に判断しやすい。ボタンの形を整えるだけでなく、押した先に何があるかを言葉で示したい。
表示速度は、記事に到達できるかを左右する
モバイルの通信環境はいつも安定しているとは限らない。大きなメイン画像、自動再生の動画、読み込みに時間のかかる埋め込み要素が重なると、本文がなかなか現れない。予告編を載せるにしても、自動再生が必要かは考えたい。作品の基本情報まで動画の読み込み待ちにしてはいけない。
画像には表示幅に見合うサイズを用意し、本文より後にある画像には必要に応じて遅延読み込みを使う。ただし、冒頭の画像が遅れて現れてレイアウトが大きく動けば、読み始めた位置を見失う。画像の表示領域を先に確保し、読み込み中に見出しや公開情報がずれないか確認する。速度の数値だけでなく、いつ本文を読めて、いつ操作できるかを見ておきたい。
「画面に収まる」と「情報が正確に伝わる」は両立させる
上映情報や配信状況には、地域、期間、料金、視聴条件などの注記が付くことがある。画面に収めるために注記を隠したり、表の一部を省いたりすると、情報の意味まで変わってしまう。横に広い表なら、項目をカード状に組み替える、作品ごとに見出しを付けて縦に並べるといった方法がある。内容を残したまま、読み方を変えるわけだ。
確認できていない条件を補って書かないことも大切だ。「配信予定」と「配信中」は分け、確認日が判断に関わるなら情報の近くに示す。目立つバッジ一つで表したくても、実際に視聴できるかどうかは細かな条件で変わり得る。
確認はスマートフォンでの行動を一つずつ追う
制作画面の幅を縮めるだけでは、指で押したときの感覚や通信環境による違いは分からない。公開前には、検索結果から記事を開いた読者のつもりで、スマートフォンを使って順に確かめる。
- ページを開き、最初の画面で作品名と記事の主題が分かるかを見る。
- 公開・配信など目的の情報まで進み、横スクロールや予期しない表示のずれがないかを見る。
- 注記を読み、リンクやメニューを指で押して、行き先と戻りやすさを確かめる。
- 文字サイズを大きくしても、本文やボタンが欠けないか確認する。
一台で問題がなくても、画面幅や文字設定が変われば崩れることがある。まずはアクセスの多い作品記事と、情報量の多い配信案内で試すと、共通テンプレートの不具合を見つけやすい。出演者一覧が長い記事も開いてみよう。末尾の配信条件まで拡大せずに読めるか、リンクを一度で押せるか。その二つは、実際に指で確かめておきたい。
