7月2日に行われたSwapSkills doubbbleに参加してきました。
今回は「モバイルサイト制作に見る、次世代ウェブのカタチ（One Web）」ということで、
スマートフォンサイトを含めた、今後の主流となっていくであろうサイト制作の考え方から、
詳細な実装まで5時間にわたり受講してきました。
どちらかというと細かい実装を知っておくというよりは、ディレクターとして必要な知見をまとめておきたいための参加でした
ちょっと残念だったのがYahooさんの「スマートフォンのUX」というセッションで、タイトルにUXとついているので、「Yahooさんはユーザーの体験、経験をどうゆうふうにスマートフォン制作に生かしているんだろう？」と楽しみにしていたのですが、セッションでは「UX=UI」という内容でお話をされていたので、「う〜ん？？」という感じでした。
もしかしたら、制作者向けのイベントなので、UXという本来の意味についてはあえて触れないようにしたのかもしれませんが、それにしてもWeb制作者までUX=最高のUIという認識が広まってしまうのはちょっとよくない流れです。
後半は細かな実装のお話になるので、 Webディレクターが最低限抑えておくべき、前半の2セッションのみ備忘録としてまとめておきます。
■概要
SwapSkills doubbble vol.01
モバイルサイト制作に見る、次世代ウェブのカタチ[One Web]
2011年07月02日(土) 13:00 ~ 18:00
■「Mobile First:モバイルファースト」が意味する今後のWebコミュニケーションデザイン
長谷川 恭久(はせがわ やすひさ) (could）@yhassy
■新潮流、デバイスに振り回されないスマートフォンサイト制作
菊池 崇(きくち たかし) (Web Directions East LLC)@mantangs
■マルチデバイスに対応する jQueryMobile
吉川 徹(よしかわ とおる)@yoshikawa_t
■スマートフォンの徹底検証とサイトパフォーマンス
馬場 宣孝(ばば のりたか)（NHN Japan 株式会社）@pesblog
■スマートフォンのUX
藤木 裕介(ふじき ゆうすけ)（Yahoo! JAPAN 株式会社）@fujikky
伊東 宣之(いとう のりゆき)（Yahoo! JAPAN 株式会社）
■スマートTVへのアプローチと制作
Daniel Davis(ダニエル デイビス)（Opera Software AS）@ourmaninjapan
「Mobile First」が意味する今後のWebコミュニケーションデザイン長谷川恭久
数年前、女子高生の会話「iPhoneって使えないね？」
現在→iPhoneを普通に使う。
↓
わずか３年で急変した。
■世界のモバイル利用状況
人口68億人の
77%がモバイル端末を持っている
アフリカがモバイルの最先端
PCなどとあわせると、
360億の端末がWebにつながっているといわれている。
今後もモバイルデバイスは増加していく。
■モバイルデバイス
85％がWebブラウザーを持っている。（アプリは除く）
毎日24のWebサイトを見ているといわれている。
2011年の売り上げがPCを超える見込み。
■タブレット
32%の人がPCをあまり使わなくなった（2011 Nielsen）
パソコンを業務として使用しない人にはタブレットが合っている。
■PCサイトとモバイルサイトの利用者の特徴と傾向
▼PCを使う人の特徴
→ひとつの場所で使う。
→ほぼ室内
→大きなスクリーン
→電源が十分
→安定した回線
▼モバイルを使う人の特徴
→常に動いている
→ながら行動（テレビを見ながら、PCを使いながら）
→小さなスクリーン
→電力は常に気になる
→不安定な回線
※これを前提として作成しないと行けない
→モバイルファースト（ルーク・フォブレウスキ）
■モバイルファースト
→最初にモバイルに注目することによって、
他のスクリーンサイズのデバイスの制作ができる。
逆説的な手法
・スクリーンサイズ
→スクリーンサイズが小さいことによって、フォーカスしないといけない
（1アプリケーションだったり、1サイトだったり）
サイトのエッセンスだけを抜き取らないと行けない
強制的にフォーカスしないといけない、
だからこそモバイルファーストが有効ではないか。
あえて、捨てないといけないものもでてくる。
・コンテンツ、機能
→サイトの性格、魂
→これを強調するためには何をすればいいか考える。
モバイルならではの機能
→Geo LacationやTouch
（生かされるのはモバイル）
■例
▼映画のデータベース
→モバイルだと人気の映画のみ表示されるようになる。
エッセンスにならないものは削除したり見えなくしている。
▼ファッションサイト
→ナビゲーションは下になり、コンテンツが真ん中になり、
検索も大きくなる。
■Mobile First Country
海外
→WAPなど（テキストベースのSNS）
日本
→日本はもともとモバイルファーストだった？（i MODE EZweb）
ただ、iModeやEZwebは独自機能でクローズドだった。
（コンテンツもキャリアの許可が必要だったり）
海外に比べれはモバイルファーストだったが、いつのまにかに抜かれてしまった。
→スマートフォンが要因
■スマートフォンが進化した理由
▼Webテクノロジー API
→既存のウェブテクノロジーと相性がよかった。
▼ツールキット
→参入しやすい環境が整っていた、
Web制作者が入りやすい技術だった。
■アプローチ方法
・Progressive Enhancement
・Responsive Design
・OS/Device/Specific（ちょっと例外）
■Progressive Enhancement
→全く同じ見え方で制作することは不可能
→それぞれのブラウザの特性にあわせて、
利用者の最高の環境にあわせて制作すること。
■Responsive Design
→ワンソースで、様々な状態に最適化する。
（メディアクエリーで実装）
■OS/でバイス特化
→はじめからモバイルに特化
例 インスタグラム
例 Mac OS Lion
スマートフォンで得られた経験をPCに転化。
(Windows 8でも同じことをする予定)
※デスクトップとモバイルの発見が相互にサイクルしていく。
■もっとも重要なのは？
Progressive Enhancement
→どこまでやるの？
可能なところから段階的にやっていく。
■モバイルファースト≠モバイルサイト制作優先
→イコールではない、イエスでもありノーでもある。
なぜ
→スクリーンサイズと機能
・スクリーンサイズの違う端末がたくさん出てきたため。
（フューチャーフォンサイズのスマートフォンなど。）
・様々な機能が出てきている。
↓
みんな違う、
モバイルファーストってどれよ？
↓
デバイスを基準を決めてしまうと、昔のサイト制作に戻ってしまう。
↓
じゃあ、どうするの？
■アップルの事例
サポートページをリニューアルした。
→ボタンやクリックできるエリアを大きくして、
多少の不便はあるかもしれないが、
どの端末でも使えるようにしている。
スクリーンサイズで最適化されているわけではないが、
とりあえず使える。
■じゃあ、モバイルファーストって結局なによ？ モバイルファーストの神髄
・Content First
→すべてのデバイスに共通
そこで見られるコンテンツはなんなんだろう、
ユーザーが見たいコンテンツはなんなんだろうか考える。
▼Mobile Firstのメリット
・スピード
・即時性
→コンテンツ提供者ではなく、利用者がすぐ欲しいコンテンツがどれか考える。
・小さい
（ファイルサイズ、文字数など）
・ポータブル
持ち運びやすいコンテンツ
★使いやすい、アクセスしやすい、見つけやすい。
■ナビゲーションはコンテンツの次
・ナビゲーションを隠すタイプ
→即時性のあるコンテンツを上に持っていく。
・コンパクトにする。
・ナビゲーションを下に置くタイプ
・コンテンツをUIにするタイプ
コンテンツを見せつつ、UIを機能させている。
■ポーダブルにする。
→パッケージ化して、コンテンツを提供できるか、
ポータブルに最適化されているか？
ソーシャルメディア最適化ではない、
今後でてくるデバイスや環境にも適用できるように最適化すること。
■モバイルファーストでできること。
むずかしいこと（根本的なこと）
→プログレッシブエンハンスメントが課題になってくる。
▼サイトの基本構造
サイトの基本構造を根本的に考え直さないといけない。
（いまだにWeb制作業界にはすべてのブラウザに最適化する手法が残っている）
▼考え方の変化が必要
→プログレッシブエンハンスメントはわかるけど、
仕事のことを考えると、導入できない、（クライアントの説得）
↓
ブレイクスルーする必要がある。
（スキルアップとはちがい、むずかしい。いかに上司やクライアントに啓蒙していくか）
▼入念なプランニング
→今まで以上に入念なプランニングが必要。
・技術的な課題
→スクリプティングリクエストの制御
（見えてないけど、リクエストしている端末などもある）
→画像はどうするの？
企業の組織図はどうするの？ サイズ変えたら見えない。
（画像を作り替えて、画像置換も可能だけど、そこまでコスト掛けるのか）
・フォーカスとは選ぶこと
Focus＝Choose
→選択を余儀なくされる。
→情報は平等ではない。
今まではスクリーンサイズが大きかったから自由だったが、
今後はフォーカスする必要があるので、
クライアントともに「何がユーザーにとって必要な情報か」
ディレクションをする必要がある。
→利用者にとってメリットになることを、
利用者とビジネス双方のメリットを考える必要がある。
※ベーシックであるが、非常に難しい課題が見えてくる。
■まとめ
・ポストPC時代の利用者を知る。
・技術だけが利用者を補助してくれるわけではない。
（利用者の状況を考える）
・コンテンツへフォーカス
・試行錯誤、開拓時代
海外でも試行錯誤している。正しい答えはないが、
普遍的なのはコンテンツファースト。
デバイスに振り回されないスマートフォンサイト制作菊池崇
■足し算と引き算
スマートフォン制作では２つのアプローチがある、
「足し算と引き算」
■失敗した事例（足し算のアプローチ）2010年5月
２つだけが対象
iPhoneとDesire
動画がからむので、どの機種でも動画が見えるように。
▼HTMLの振り分け
→9つぐらいのHTMLの振り分け指定があった
▼動画の対応
webmとH264への対応
▼運用も必要
→毎週7本
※小規模チームだとかなり厳しい。
■OSの種類
・iOS
・Android
・Windows Phone
■ブラウザ
・Safari(iOS)
・Android(Webkit)
・IE9（WindowsPhone）
■各キャリアのスマートフォン比率
３キャリアで56%
■デバイスのスクリーンサイズ
かなりの数がある。
※スクリーンサイズは横もある???
スマホは１機種で２つのスクリーンサイズを持っている。
■解像度の多様化
iPhone4だとiPhone3の4倍の解像度
■デバイスの増殖
→テレビ＋インターネット
UAが非公開（振り分けできない）
→カーナビ
■コストは？
スマホ振り分け対応の維持費
▼もし検証機を全部準備したら？
2900円× 24ヶ月 = 69000円
50種類 × 69,600円＝300万オーバー。
端末はだいたい50種類なので、300万オーバー
テレビも含めるともっと大変なことに。
■振り分けできるのか？
中小企業では対応できない、
クライアントにも請求できない
■引き算の対策
・パタゴニアの社長
→100％を目指さない、80%にする。
・ユーザが必要としていることを80%すればいい、
必要としてない20％として対応する。
■80%の大切な所って？
本当にユーザーが必要な情報を表示する。
じゃあ、引き算のデザインって。
→Responsive Web Design
■Responsive Web Design
例：About.com
http://www.about.com/
→ブラウザをリサイズすると内容が変化する。
▼Responsive Web Designを実現するためには３つの要素がある。
・Liquid Layout
・Grid Design
・Fluid Image
▼Liquid Layout
→横幅を％で組む。
（最初はPXで作成してから、%に変換する。）
▼Fluid Image
→画像が伸縮する。
画像に対して、
img{max-width:100%;}にする。
▼Grid Design
→グリッドを使用したデザイン
※実際には細かいテクニックが必要な場合もある。
Responsive Web DesignはHTML+CSS+Jsで実現できる。
■HTML+CSS+Jsのメリット
▼フロントエンド
→サーバー環境などは関係ない、ローカルでも確認できる。
エミュレーターの起動も必要ない。
▼技術者の確保
→誰でも大抵は作れる
▼CMSを選ばない
→振り分けすると、テンプレートを作るだけで大変。
■Media Queries
・CSS3
・スクリーンサイズ
・オリエンテーション
@media screen and (min-width:480px;){
body {width:90%;}
}
■Mobile Boiler Plate
→Googleの開発者が作成したテンプレート
・テンプレート
・IE6-9対応
・IEモバイルにも対応
・解像度差異対応
※菊池さんはさらにひと手間加える。（320andUP）
Mobile Boiler PlateはMobile Firstに対応していない箇所があるため。
■320andUP
まずは320px用のCSSを書いて、
480px用を書いて、
タブレット用を書いて、
PC用を書いて、
TV用を書いていく。
今まではPCサイト用を準備して、
Display:noneで消していくのが主流だった。
→なぜ下から？
余計な画像を読み込まないように。
■引き算のアプローチを！！
→Mobile First
■まとめ
・全て振り分けは難しい
・モバイルではユーザーが必要なのはコンテンツ
・Responsive Web Design
・人、時間、金のコストを考えよう。
プログレッシブ・エンハンスメントについては色々なところで聞かれるようになってきましたが、制作者側にも発注側にも浸透していないのが現状なので、何が大事なのか理解して、発注者側にも制作者側にも啓蒙できるようにしたいところです。
コメント