【レポート】CSS Nite LP, Disk 13 reprise

2011年2月5日にベルサール九段で開催された「CSS Nite LP, Disk 13 reprise」に行ってきました。
今回のテーマは、iPhone/iPadでのブラウザでのサイト設計と実装にフォーカスした内容でした。

スマートフォン時代のWeb制作(谷 拓樹さん)
  • iShowcase」・・・国内のiPhone / iPad最適化対応したサイト一覧
  • mixiに訪問者の1/10はスマートフォン経由
  • どのように対応していくか
    1. フロントの部分的な対応(ex.「Apple」)
    2. スクリーンサイズへの対応・Media Queries
    3. アプリ化(ex.「クックパッド」)
    4. 専用サイト(ex.「Yahoo!Japan」)
  • Mobile First・・・モバイル環境を前提に考え、ユーザのコンテキストを理解する
iPhone/iPadサイト制作でHTML5活用(益子 貴寛さん)
  • 大手企業でもHTML5の採用が進んでいる(ex.「ローソン」)
  • HTML5をサポートしていないIE6〜8向けに「html5shiv」を読み込ませる
  • タッチする領域は44px×44px必要とされている
  • label要素が効かないのでラジオボタンではなく、ドロップダウンメニューの方が良い
ライブコーディングで学ぶ、iPhoneサイト制作のキホン(たにぐちまことさん)
  • Cacoo」・・・共有できるオンラインワイヤーフレーム作成サービス。iPhoneのパーツも。
  • デザインの際はiPhoneのフレーム(ex.「iPhone 4 GUI PSD」)と一緒に行うと実機でのギャップが軽減される
  • Media QueriesはCSSのインラインに記述することも出来る
iPhone/iPadサイト制作でのCSS設計とデザイン最適化事例(小山田 晃浩さん)
  • valveat81」・・・PC、iPad横、iPad縦、iPhone横、iPhone縦でカラム割りが変わる
  • iPhoneでもデスクトップ用のCSSを読み込ませ、さらにiPhone用のCSSも読み込ませるやり方がベター(各デバイス用の差分を上書く)
  • 要素をまるごと縮小するにはzoomセレクタで。IE、webkitの独自拡張。
  • CSSファイルが多くなりすぎると管理がしにくい。インラインで記述するのがベター。
iPhone/iPadサイト制作でハマらないために(高津戸 壮さん)
  • iPhone、iPadは低スペックなデバイスであることを忘れてはいけない
  • 画像の数や容量が大きい(多い)と途中で読み込みをやめてしまう
  • 「iScroll」・・・滑らかなスクロールを再現。他の機能とバッティングする可能性もあり
  • アニメーションはjQueryだと数が多いと重くなり、CSSアニメーションはチラつく。一長一短。
Web制作のノウハウでつくるiPhoneアプリ(外村 和仁さん+クロカワ リュート)
  • Webアプリ(ブラウザから見るアプリ)はappStoreで公開できない
  • PhoneGap」・・・Webアプリをつくってネイティブアプリ化することができる。AppStoreへの申請も可能。
  • Running App」・・・HTML5、CSS3、JavaScriptのみでつくったWebアプリ
地方におけるミニマムなiPad用Webアプリ制作事例(多田吉臣さん)
  • 要件定義において意識するべきこと「必要性」「利用シーン」「誘導手段」
  • 新しいデバイスに対する可能性は誰もが感じている
  • サイト制作以上にユーザ視点が重要
  • 「受動→能動へ」求められるコミュニケーションが変化してきた
  • 成果を出すためのプロセスを良く考える。コミュニケーションデザイン
事例から学ぶスマートフォンサイトの設計手法(伊原 力也さん)
  • サッポロビール」のスマートフォン対応・・・期間約2ヶ月、2011年1月公開
  • サイト全体で20,000ページ以上ある→全部はムリ。優先コンテンツの洗い出し
  • コンテンツを主役にして、デザインを減らす
  • iPhoneの標準インターフェイスを踏襲し、迷わず使えるように
  • クライアントとも実機を使って確認する(PCは持ち込まない)
  • 選択と集中

6時間という長丁場でしたが、聞いているうちにどんどんテンションが上がっていくというか。早く自分の抱えている案件に、学んだことを落とし込みたくなる衝動に駆られました。

あと、ただなんとなくスマートフォン対応・・・ではなく、ユーザの利用シーンなどを考えて設計していかないと、ただの「対応しました」に留まってしまうことも再認識しました。

プロフィール

林大輔 写真
林 大輔
旅を売るWebデザイナー / ジャム男子
楽天トラベルでWebデザイナーとして働きながら、個人でもWebサイト制作業務を請け負う。趣味ではシャムをつくる自称・ジャム男子。
著書「FireworksレッスンブックCS6対応」「ガレリアCSS

詳しいプロフィールを見る

最新のエントリー