【レポート】CSS Nite LP, Disk 27: スマートフォン対応サイト制作

2013年5月25日にベルサール九段で開催された「CSS Nite LP, Disk 27: スマートフォン対応サイト制作(3)」に行ってきました。

セッション中、特に気になった

スマートフォン今昔物語/神森 勉さん
  • 日本のOSのシェア(201301)・・・Android-45.8%、 iOS-49.2%
  • Android OS・・・2011年の主力「2.3」、2012年の主力「4.0」、2013年の主力「4.2」になるのでは?
  • 2011年購入ユーザーの2年縛りが解けるので、今年は4.Xのシェアが増える
  • 2013年のOS・・・iOS7?、 Android5?、FirefoxOS (KDDI)、Tizen (Docomo)
モバイルデザインパターンの取り入れかた/矢野りんさん
  • スマホデザインで定規を多用するようになった→ピクセルではなくミリメートル
  • タップ領域のサイズ・・・7mm四方
  • 文字・・・全角で2mm四方のサイズでも読める
  • 太文字は海外端末のAndroidで使えないことが多い→情報の需要度は文字の大きさで示す。
  • ビミョーな色の違いも、スマホでは再現できる(PCよりも画面の性能が高い)
スマートフォン向けサイト制作の基本/益子 貴寛さん
  • viewportの基本パターンはもう確立されている
  • Media Queriesのブレークポイントは、768pxが一般的
  • CSS3セレクタを積極的に活用していこう!
  • デバイスの向きによってテキストの大きさを変えない
    body { -webkit-text-size-adjust: 100%;}
レスポンシブWebデザイン実践編/こもり まさあきさん
  • ブレイクポイント・・・最近は[スマホ] - [PC,tablet]が主流
  • ブレイクポイント・・・emで切り替えが主流。pxの概念がだいぶ怪しくなってきている
    320px=20em、480px=30em、768px=48em、960px=60em
  • 複数サイズの画像を切り替える方法・・・先行実装するPicturefillを使ってみる
スマートデバイス時代のWebサイト構築術LIVE/たにぐち まことさん、田代 豊さん
  • プロジェクト管理ツール「Backlog
  • ペーパープロトタイピング「POP
  • 辞書登録ツール「TextExpander
  • クリップボード履歴ツール「Alfred
  • シュミレーター「Android Studio」など
スマートフォンサイトにおける画像の最適化と使いどころ/松田直樹さん
  • SVG・・・XMLによって記述されるベクター形式のフォーマット。拡大・縮小を行っても画像の劣化が少ない。Android2.Xでは非対応。
  • SVGは「Illustrator」「sketch」などで作成。イラレでは、アートボードのサイズがSVGのサイズになるので注意。
  • SVGは単純なパスを持った画像であれば最適。複雑な画像であれば、両方書き出して検討。グラフ、チャート、地図にも適している。
  • アニメーションをするならCanvas。Canvasは、アニメーションが目的であると考える。
  • Web icon font・・・事例「Adobe ADC Plus」、サービス「icomoon
  • ビットマップは死なない・・・「ビットマップはコンテンツである」
よくあるトラブルと解決方法・回避方法/西畑一馬さん、木村 哲朗さん
  • 横位置表示で画面が見切れる
  • labelのタップが効かない
  • フォーカス時にズームする
  • 明朝体で表示されてしまう
  • google cdnからjsを読み込もう。一度でも読み込んでいると、別サイトで読み込んでいてもキャッシュされる。

明日から使える系"あるある"連発のセッションでしたが、ソースコードだらけになりそうでしたので、具体的な解決方法は省きました。

ケーススタディ・NTTデータグループウェブサイトのマルチデバイス対応/伊原 力也さん
  • レスポンシブWebデザインを選んだ理由・・・「1.プロジェクトの要件に沿っていたから」「2.マルチデバイス」「3.同一性の保持」「4.ワンソース」「5.耐用期間を長く」「6.アクセシビリティの確保」
  • 「デザイニングインブラウザ」の手法が取り沙汰されているが、今回はデザインカンプをつくった(代表的な数ページ、幅が太い版&細い版のデザインカンプ)→クライアントへの確認のため
  • プロジェクトチームでStudy&Reviewを繰り返した(ワイヤーでもデザインでも実装でも)
  • デザインする人と実装する人が、ペアで実現していく(ペアデザインニング?)
  • 本当に必要なもの・・・メンバー間の「のりしろ」→自分の業務領域を超えた知識を理解する(デザイナーでもエンジニアの知識を、その逆も)。スキル的な部分だけではなく、チームの雰囲気など、信頼関係の部分でも。
スマホ制作サイトのディレクション術/小林 信次さん、矢野りんさん
  • スマホサイトサイトをつくらないという選択肢もあり→Beams、GAP、三菱自動車の3社はスマホサイトを廃止した
  • ディレクターはクライアントと事前にしっかり決めておくことがある「UA判定 サーバーサイド or クライアントサイド」「Cookie or localStrage」「同URL or 別URL」「検証対象機種は?」

6時間10セッションという長丁場で盛りだくさんのセミナーでしたが、30分単位でセッションが変わっていくので、逆に集中力を切らさず聴くことが出来ました(登壇する方は大変だと思いますが)。
知らない知識を吸収できたことはもちろんですが、みなさんが壁にぶつかっていること、悩んでいることも共有できたような気がした、そんな1日でした。

プロフィール

林大輔 写真
林 大輔
旅を売るWebデザイナー / ジャム男子
楽天トラベルでWebデザイナーとして働いています。ごくたまに個人でもWebサイト作ってます。趣味ではジャムをつくる自称・ジャム男子。
著書「FireworksレッスンブックCS6対応」「ガレリアCSS

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

最新のエントリー