Business and Web Work Memo

Webプログラマーのビジネス＆仕事メモブログ

「WordCamp Osaka 2012」レスポンシブWEBデザインに役立つセッション(by 額賀さん)のメモ。

WordPress CSS3 HTML5 デザイン（スマホ） デザイン（PC）

前回に続き2012/11/03に大阪で行われた、「WordCamp Osaka 2012」で特に自分にとってためになったと思うセッションの自分用メモです♪今回「WordCamp Osaka 2012」で一番評判が良かったヌカガジュンコさんのセッションメモです♪

Session : 文系デザイナーでも大丈夫！レスポンシブWEBサイトをWordPressで作ってみよう

@nukaga / フリーランス 額賀順子さん

額賀さんは、カラーコーディネーター等の資格もお持ちで綺麗なWebサイトがお得意だそうです。セッションを拝見した限りでも、計画を持って積み上げて来られたご経験の豊富さが伺えました。お客さんが何を求めてられるかの聞き取りとプランディングをすごく大事にされているそうです。ご一緒させていただくと色々学ばせていただける方だと思いました♪きっとお仕事を任されてもご満足出来るサイトが必ず待ってると思います♪^^

レスポンシブWebデザインの理解

  • メリット
    • CSSだけで実装可
    • 1つのHTML(URL)で対応出来るのでSEOに有効
      （自分の実装理由はここが一番大きいです）
  • デメリット
    • サイトが重くなる可能性がある
    • 開発に時間がかかる可能性がある
    • 表示の最適化であって、デバイス（利用シーン）の最適化ではない
  • レスポンシブデザインに向いているサイト
    • 文字ベースのサイト
    • 構造の簡単なサイト
  • レスポンシブデザインに向いていないサイト
    • 各ページによって表示を変えたいなど構造が複雑なサイト
    • 利用シーンによって見せ方を大きく変えたいサイト
  • モバイルファーストの考え方
    • モバイルから先に制作し、その後PCに展開する（実際は難しい）
    • 画面が小さくなるので見せたいものが何かはっきりする（優先順位）
  • レイアウトの切り替えパターンを知っておく


  • ワイヤーフレームが非常に重要
  • モバイルファーストでありコンテンツファースト（内容ありき）である事が重要
    大事なのは考え方。なにを優先的に見せるか
  • 出来るだけ%やemなでど可変で組む（難しければpx）

ワークフローの提案

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

  • PC、タブレット、スマホのブレークポイントを決める

  • メディアクエリー（Media Queries）を利用
    • 表示サイズごとに読み込むCSSを分岐させる事が出来る
    • CSSソース内に表示 
      @media screen and (max-width: 1024px){
/*	  タブレット用のスタイル記述	  */
}
    • HTMLの内に書き込んでCSSを読み込ませる 
      <link rel="stylesheet" media="screen and (max-width: 1024px)"href="tablet.css" />
    • CSSの@importに記述する 
      @import url("tablet.css") screen and (max-width: 1024px)
  • モバイルのCSSから書くのがオススメ（結果的にソースが短くなる）
  • style.cssの方がやりやすい（特にWordPress）
  • viewportを設定
    • viewportの幅をデバイスのスクリーンの幅に合わせる 
      <meta name="viewport" content="width=device-width">
    • 一般的に多い設定 
      <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0">
      表示幅をスクリーン幅と一致,初期拡大率を等倍,最小拡大率を等倍,最大拡大率を等倍
    • 実際使った設定 
      <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.6, user-scalable=yes,">
      最大拡大率を1.6にして、ユーザーが画面を拡大できるようにした
  • IE8以下への対応
    • JavaScriptを使う（動作どちらも問題なし）
      • Respond.js
        https://github.com/scottjehl/Respond

        実例：Acru（アクリュ）
        f:id:soulja_boy:20121106065448p:plain

      • css3-mediaqueries-js
        css3-mediaqueries.js

        実例：劇団ヌカガ公式サイト
        f:id:soulja_boy:20121106065500p:plain

      • 実際あったトラブル
        他のJavaScriptライブラリも利用している場合に動かない症状が出たが、今回のJSライブラリを一番最後に持って行く事で解決した
  • 解像度によって画像が荒くなる問題
    画面サイズに合わせて画像を切替える。CSSで呼び出している画像の場合、メディアクエリーで切り替えて呼び出す画像を変える事が可能　→ 但し画像が各サイズ必要
  • 画像が重たいという問題
    • CSS Sprite
      • 1枚の画像の中に必要な画像を全部入れ必要に応じて 表示させる部分を変える手法
      • 1枚画像を最初に読み込む事によって余分なトラフィックが かかるのを防ぐ
    • データURIスキーム
  • WordPressの場合ユーザーが画像を更新して行くので、その画像に対しても設定が必要 
    @media only screen and (max-width: 480px)
{ 
 .cpost img { 
   max-width: 300px; width: auto; height: auto;
 } 
}
    ※ classを設定しないと全部の画像に反映されるので注意
  • 解像度によってフォントの大きさの変更が必要な場合
    ウェブフォントで対応
    • CSS3 @font-face
    • 日本語フォントが少ない
    • Windowsで読みにくい
    • 日本語フォント重い（タイトルのみなどにしておく）

便利ツール

レスポンシブテーマ

このセッションのスライド