モバイルフレンドリーに準拠したメディア挿入の注意点
Expression Web 4のツールボックスパネルのメディアには、Flash ムービーをはじめ、SilverlightやDeep Zoom等の挿入がサポートされていますが、モバイルフレンドリーには準拠していません。そこで、メディアの取り扱いにあたり、モバイルフレンドリーに準拠したコンテンツ制作の注意点について確認してみましょう。
はじめに
Google ウェブマスターツールによると、モバイルユーザビリティとして以下のポイントを挙げています。
- 端末の画面サイズに合わせて調整される、定義済みの表示領域（「ビューポート」）。
- ユーザーが水平方向にスクロールしたり画面をピンチしたりしなくてもページ全体を表示できる、ビューポート内でフローするコンテンツ。
- 小さな画面でも読みやすい、拡大縮小が可能なフォント。
- ボタンなどの要素同士が十分離れている、タップしやすい要素。
- モバイル対応技術を駆使した、視覚デザインとモーション。
Expression Web 4のリリース当時では、まだモバイルユーザビリティについてあまり強く言及されていませんでした。あくまでデスクトップでWeb標準のサイトを構築しましょう、という感じです。動的メディアも全盛期（？）で、各社から様々なメディアタイプが登場しました。
Expression Web 4から、Deep Zoom というメディア形式もあったり、自社開発の Silverlight といったものもありますが、私見では Deep Zoomはほとんどの方は知らないと思いますし、Silverlightもなんだかフェイドアウトしていった気がします。とりわけ、Silverlight は Surface とか Surface 2 には対応していないため、Gyao動画が見れない！という声がネット上に溢れたりなんかしてました。
ページのモバイルユーザビリティの問題を修正する
Googleにおけるモバイルユーザビリティレポートでは、以下のチェック項目があります。
- Flashが使用されています
- ビューポートが設定されていません
- 固定幅のビューポート
- コンテンツのサイズがビューポートに対応していません
- フォントサイズが小です
- タップ要素同士が小さすぎます
以上のなかで「Flashが使用されています」というのが挙げられていますよね？
ほとんどのモバイル用ブラウザでは Flash コンテンツが表示されません。したがって、モバイル ユーザーは、コンテンツ、アニメーション、またはナビゲーションを表示するために Flash に依存しているページを使用することはできません。最新のウェブ技術を利用して外観やページのアニメーションをデザインすることをおすすめします。詳しくは、ウェブの基礎ガイドのルック アンド フィールの説明をご覧ください。
モバイルユーザビリティを考えるのであれば、Flashは使ってはいけないのです。
マルチデバイス対応のメディアを提供している動画配信サイトであればOKです。Youtubeとかニコニコ動画とかはたいていマルチデバイス対応しています。
もし、どのデバイスにも対応させたい場合は、自前のサイトでFlashを使わずに、Youtube等にアップロードして埋め込み挿入が確実でしょう。それとも、FlashからHTML 5とJavaScriptの組み合わせへの移行を検討してください。
ちなみに、Windows Media Player は Windows のみ対応なので、これも論外ですね。