本記事は、アーカイブに保存されている過去の記事です。最新の情報は、公益社団法人日本印刷技術協会(JAGAT)サイトをご確認ください。
スマートフォンに対応したWebはどのようなトレンドがあっただろうか。
まず第1世代として、iPhoneに注目した時期がある。iPhoneの(iOSの)デザインを模したWebのことを指す。iPhone利用者に馴染みやすい、iPhoneっぽい挙動が注目された時期があった。
そして第2世代として、iPhoneに加えてAndroidを意識したサイト。この段階では、Yahoo!JAPANやNAVERといったサイトが、スマートフォン向けのWebサイトのトレンドを引っ張っていく。
どのようなWebサイトがスマートフォンに最適化しているだろうか。
・キーボードが使いにくい
・QRコード利用不可
・携帯サイトのような分類がない
スマートフォンはURLを打ちにくい。しかしフィーチャーフォン時代にはQRコードがあった。スマートフォンになるとそれが通用しない。そのため、Google対策が重要となってくる。
また、キャリアによる公式サイトなどの考えがない。PCサイトと競合することに繋がり、やはりSEOが重要となる。さらには、スマートフォンの場合は検索結果ページおけるキーワード広告の表現も異なる。実際にスマートフォンでGoogle検索してみると理解できるが、キーワード広告はPCのように上部+右側には出ない。下部に少し出るのみである。スマートフォンのSEM対策は非常に難しい状況である。
また、2011年12月にGoogleのWebmaster Central Blogにて発表があった。Googleによるスマートフォン用のBotがクロールを始めているようである。Googleの検索結果がスマートフォンに最適化した状態に変化する可能性があるということである。
スマートフォン向けWebサイトを設計する上での注意点とは、以下のようになる。
・横スクロールを避ける
・画面幅は固定しない
・3G回線は回線速度が遅い
・1ページを長くする
・文字やパーツはPCよりも大きく
スマートフォン利用者が多くの場合3G回線でアクセスしていることを考慮しなくてはならない。PC向けメディアのように、何ページにも分割した記事などはスマートフォンでは逆に読み込みのストレスが増える。1ページを長くしてでもストレスを軽減する工夫が必要となる。あわせて、データロードを考慮して画像の多用をおさえる必要もあり、これはCSS3に関連する。
スマートフォンは指でタッチする。PCの場合はマウスカーソルで細かい操作が可能だが、スマートフォンではインターフェースが異なる。そのため、Appleで発表しているヒューマンインターフェースガイドラインが参考になる。ここではタッチできるエリアを44x44ピクセルで作ることが推奨されている。
スマートフォンで閲覧している際、横画面にしたときには当然画面幅が変わる。単純に引き伸ばすのではなく、柔軟にレイアウトが変更となる見せ方もある。
HTML5とCSS3で新しい機能でユーザに新しい体験を提供できる。
前述したように、これまで画像で行っていた細かいデザインなどもCSSで実現できることもある。これにより通信におけるファイル容量の軽減にもなる。
スマートフォンらしい、動きのあるデザインも実現できる。スライド、タブ、カルーセル、続きを読む、バルーンといったものである。
また、PCの場合はマウスオーバーでリンクしている箇所を表現するなどの表現があるが、これらはスマートフォンでは不可能なので、目で見てリンクだとわかる工夫が必要となる。
ただし、動きのあるデザインについてはトレンドは変化しつつある。Yahoo!JAPANのスマートフォン向けサイトを見ると、動きのあるデザインが減っている。リリースによれば、「機能性を損なわずにこれまでの2倍から3倍の高速表示を実現」とある。
よりリッチに、よりスマートに、という要望が最初にありがちだったが、ユーザによっては見られなかったり重い、飽きたなどの感想を抱く可能性があることも認識する必要がある。
今後のスマートフォンの変化をどのように予想して動いていくのがよいのだろうか。
スマートフォンに最適化したWebサイトの考え方としては、レスポンシブWebデザインというものがある。
未来館のひと
http://blog.miraikan.jst.go.jp/
Team PAWS Chicago | Brian Drum
http://briandrum.net/team-paws/
これらのサイトでは、ブラウザ幅を変化させると理解できるが、各コンテンツが可変したり位置が変化する。最近では画像多用のサイトであっても、幅がフレキシブルに変化するサイトも出てきている。
こういったサイトのメリットは、
・画面解像度にあわせてレイアウトできる
・ワンソースで管理できる
・レイアウトが大きく変わらない
などがある。逆にデメリットは
・スマートフォンにPCサイトの要素が読み込まれる
・設計、コーディングが煩雑となる
・FLASHやリッチなJavaScriptなどはスマートフォン対応しにくい。
例えば、マウスオーバーで下層メニューがアニメーションして表示されるようなものは、そもそもスマートフォンでも難しい。
現在のトレンドは、モバイルファーストという考え方である。
つまりモバイル版を先に考えましょうという概念である。これまではPC版を作ってからモバイル版という流れだったが、これを逆にするわけである。まずスマートフォン版を先に作る。その際に、どういう要素、コンテンツが必要かを考える。その後PC版として対応する際に要素やコンテンツを付け加えていく。
スマートフォン向けに最初に作るので、画像が軽めで先に作ることになる。PC版では別画像を用意して読み込むこととなるが、スマートフォン利用者にとっては軽い画像のみ読み込むので負担が少ない。PC版はインフラが整っていることを想定して、モバイル向け画像の後に重い画像を読み込んでいく流れである。
ただし、IE9未満ではメディアクエリが効かないという面もある。また、CSSだけで無理にやるのではなく、JavaScriptで置き換えるところも必要になる。
そういった点で、最近のトレンドはモバイルファースト+JavaScriptといったところだが、まだノウハウが確立していない部分もあり、試行錯誤が続くところでもある。
また、モバイルファーストの制作指向に加え、ユーザーにとっての使いやすさ、利便性、はては「使って楽しい」というUX(ユーザー・エクスペリエンス)という考え方も求められるようになっている。直観で理解できて、しかも使いやすくサービスを提供するためには色や配置などは主観で行っても意味はなく、データ中心で行う必要がある。
スマートフォンアプリUIにおける基本的な設計思想
(クロスメディア研究会セミナーレポートと「Jagat info」を元に加筆修正)(木下智之 )