『レスポンシブWebデザイン入門』勉強会に参加して来た

勉強会

こちらの勉強会、最近良く利用させてもらっている横浜タネマキにて開催されるという事なので早速登録を済ませ、参加して来ました。

...っとその前に。先日訪れた際に発見した『進撃の巨人』全10巻、先日までは4巻まで読んだのでこの日少し早めに会場入りし、残りの6巻を読破しちゃいました！w そいえばジョジョの奇妙な冒険第6部もタネマキで読み途中だった(読破すれば全8部完全読破)ので早く読破しなければ...(笑)


勉強会本編は19:30からの開始となりました。以下メモ。

レスポンシブWebデザインの概要

レスポンシブWebデザイン入門 ~マルチデバイス時代のWebデザイン手法~

レスポンシブWebデザイン入門 ~マルチデバイス時代のWebデザイン手法~

  • レスポンシブWebデザイン(以下RWB)とは？
    • 1ソースで色々なデバイスに対応する手法。
    • どのデバイスでアクセスしても、CSSを買える事で適応した表示を行う。
    • CSSはどのような状況で切り分けるか。→表示領域で。
      • 幅：480px以下/768px以下/769以上...等。
    • デバイスの種類と言うよりも、デバイスの幅が如何程か、という意味合いが強いかも。
RWDのメリット
  • URLが1つで済む
    • Twitter/Facebook等で色々なサイトを共有する事が多い昨今、特定デバイスで見たいサイトが見れない場合もある。PCから共有/スマホで見れない、その逆も然り。
    • ↑このような事が無くなる。どのようなデバイスでも対応可能に。
    • また、Googleでもインデックスされやすい。推奨されている手法でもある。
  • ワンソース
    • 通勤時はスマホ、職場ではPC、リビングでタブレット...と言った具合に、色々なデバイスでサイトにアクセスする事が多くなっている。
    • HTMLは1つなので表示される内容情報は同じ。色々な機会でアクセスされる事を考えると『変えない』という設計は有効。

  • 更新が比較的カンタン
    • "ワンソース"の部分とつながる。
    • 1回更新しちゃえばどのデバイスでも瞬時に確認可能。
    • ※情報量を考慮して更新する必要がある。
  • 新しいデバイスに対応しやすい
    • 国内でもこれまでに発売されているスマホの種類は200以上。最近ではゲーム機、カーナビ、スマートTV等も。
    • そういった各種デバイスにRWDは比較的対応しやすい。
    • この点については、今後の予想は付けられない。でも十分新しいものが出てくることは考えられる。
    • そういった点でもRWDは表示に関してはそのまま対応可能。
    • 表示以外の部分…使いやすさ等は別途考慮する必要は勿論出てくる。
RWDのデメリット
  • 設計が難しい
    • そもそもRWDを用いての経験・知識に乏しいという点は否めない。
    • CSSだけでスタイルを変更するのでやりたい事ができるのか、の検討要。
  • 構成の制限がある
    • スマホ、desukutoopでガラッと変えると言うのは現実的には難しい。かなり無理をすれば行けるが…？
    • それなら最初から別々のサイトを作った方が良いかも。

  • テストの工数が増える
    • マルチデバイスとなるので、当然テストもそれなりに増える。
    • 出来るだろう、と言う考えではなく、最終的には実機確認しなければならないので工数は増える。
RWDに向くプロジェクト
  • 多数のデバイスに対応する
  • 柔軟な設計が許容される
  • 余分な要素の要らないデザイン
  • イチから設計が出来る
RWDに向かないプロジェクト
  • 各デバイスに特化した構成にしたい
  • ピクセルパーフェクトなデザイン
    • 固定デザイン、1pxのズレも許さない、と言うのはそこから乖離してしまうのでNG
  • ワークフローを柔軟に変えられないチーム体制
    • 新しい手法、ワークフローとなるので保守的なチーム等にとっては最終的にリスクは大きくなる
  • サイトの目的を明確にし、最適な手段を選択する 事が大事。

レスポンシブWebデザインの実装方法

Fluid grid(可変グリッド)
  • 規則性を持ったライン(grid)にそってコンテンツを配置。
  • Fluid grid＝グリッドの幅を相対値(％など)で指定。

Fluid Image(可変画像)
    • 画像を可変にする
    • 画像が親要素よりはみ出てしまうので、要素内に治める必要がある。
    • 手順1:HTML :幅と高さは省く。
    • 手順2:CSS: max-width:100、height:autoに。
Media Queries
  • メディアタイプと特性に関する条件を調べ、結果に応じた処理を行う手法。
  • メディア特性代表例
    • width(表示領域の幅)
    • height(表示領域の高さ)
    • device-width(デバイスの横方向の解像度)
    • device-height(デバイスの縦方向の解像度)
    • orientation(表示領域の向き)
    • resolution(解像度)
  • 書ける場所
    • html/linkタグ内に。
    • css/@import urlで。
    • css/@media で。
      • 基本的にこちらの手法を推奨。他2つは外部ファイルを読むロスが発生してしまう。
モバイルファーストのメリット
    • 書くスタイルが少なくなる。
    • モバイルのスタイルは1カラムが多いので、モバイル用のスタイルを書く＝必要な要素だけ記述すれば良くなるケースが多い。
PCファーストのメリット
  • Media Queriesに非対応のブラウザ対応が簡単
  • 非対応のブラウザについては悩むところだが、幾つか方法はある。
    • IE8以下:モバイルで書いていき、jsで対応。
    • 結構古いブラウザもあるので、なるべく対応させないで行う方法、固定CSS等で案件の予算や時間に応じて選択。
ブレークポイント


  • 決めるヒント
    • 主要となるデバイスの幅から
      • 主要となるデバイスを予め決めておいて、それを元に決める
    • コンテンツから
    • 幅をemで指定
      • 1em=16px / 768px=48em
      • 文字の大きさを元にサイズを決めるので、より適したレイアウトが制御可能。
Viewport
  • viewportに指定されたサイズでページを描画する
  • iPhoneの場合、デフォルトは980px。

-Media Queriesはこのviewportの値を読んでしまう。

セミハンズオン(レスポンシブWebデザインの作成)

ここからしばらくの間は、小川さんの実演する作業内容を眺めつつ、用意されたファイルを用いてサイト(HTML/CSS)をレスポンシブなものにしていくセミハンズオンを実施。以下のような流れで進めていました。

  • ファイルの確認
  • viewportの設定
  • fluid image
  • ナビゲーションのスタイル
  • meda queriesの設定(コンテンツ幅:px)
  • コンテンツ幅を相対指定
  • テスト

ハンズオンの終盤には、作業過程で使える、便利なツールのご紹介も。





ワークフローのポイント

  • メインブラウザ・デバイスは？
    • OSブラウザは最初に決めておくべき。マルチデバイス
    • より最適化させるためにも予め絞っておく。
  • ピクセルパーフェクトに拘らない
    • 今までのサイト
      • 特定のデバイス対応
      • コンテンツの幅は固定
      • どの表示領域でもレイアウトは変わらない
    • RWD
      • マルチデバイス対応
      • コンテンツ幅は可変
      • 表示領域幅でレイアウトが変わる
  • グレイスフルデグラデーション
    • 基準はモダンブラウザで対応し、
    • 古いブラウザに対しては、最低限の機能は提供(グレードダウン)
  • ワークフローが変わる
    • RWD、作って見ないとわからない。
    • 早めにプロトタイプを作成して、テストしながら完成へと近づける
  • カンプについて
    • 従来のサイト制作に於けるカンプ
    • RWDにおけるカンプ＝そもそも色々なデバイスで表示やレイアウトが変わってくる。
    • カンプって？
    • その都度都度で体制を柔軟に変えられる事が大事。

ファイルサイズを軽くする工夫

サイトの最適化手法は、たくさんあるが、まずはパフォーマンス。

画像の最適化
  • CSSを使う
    • ボタン表示など、CSSで出来る事は極力やろう。
    • 対応していないブラウザ等については最低限の対応に留めるか、js等を使う。

  • 画像を圧縮する
    • 最近は画像圧縮ツール等も多い。 ※jpegMiniを使用、　imageoptim, punyPng
  • Webフォントを使う
    • 基本的に今までのサイトだとユーザーのデバイスしか無い。
    • こちらでサーバにあげたフォントを使う。
      • google のweb font
      • adobe edge web fonts
      • FONT PLUS
      • Type square
    • retina等、高解像度のものにも対応。
    • ※日本語についてはまだあまり実用的ではない。また有料なので実装に耐えられるか検証して検討。
    • ※欧文については色々あるので使うと効率UP。
  • ※Webアイコンフォントを使う、と言う手法もあり。
  • 画像を差し替える
    • CSSのみだと背景画像なら差し替えられるが…
    • picturefillというタグを使い、画像を差し替える事が可能。
    • jsを使って使えるように
    • tool:
      • picturefill
      • responsice images
      • adptive images

書籍については、このあたりがやはり(と言うか)鉄板。

ハイパフォーマンスWebサイト ―高速サイトを実現する14のルール

ハイパフォーマンスWebサイト ―高速サイトを実現する14のルール

そして今回のまとめ。

  • RWDはワンソースでマルチデバイスに対応。
  • メリット・デメリットを把握して手法を選択。
  • RWDを実装する要素各種のポイントを押さえ、リスクを減らし効率的に進める。
  • 最適化のための工夫


『レスポンシブWebデザイン』というテーマの今回の勉強会、使いどころを見極める必要はありますが(適した/条件に合致した)場合によってはかなり有効な手段となりそうですね。関連するツールや環境も新しく、便利なものが沢山ある事を知れたのも今回の収穫でした。