ajike switch

最低限知っておいてほしい、レスポンシブwebデザインのはなし

レスポンシブwebデザインでのサイトも増えていますが、技術面に関してどのくらいの認識でいるでしょうか?
もしも、『いろんなデバイスに対応するために、ブラウザサイズを変えたときに可変する』くらいの認識しかなかったら、効果的ではない使い方をしてしまったり、技術的に厳しい設計をしてしまった、などの問題が出てきてしまうかもしれません。
そこで今回は、コーダー目線でかんたんなレスポンシブwebデザインを説明します。

レスポンシブwebデザイン(Responsive Web Design)とは

Webサイトの閲覧環境(パソコン・iPad・iPhone・Android などのスクリーンサイズ)に応じて、ページレイアウトを動的に変更させる手法です。ブラウザーのスクリーンサイズを基準にスタイル調整することができるので、同じHTMLを使えるという利点があります。

最近のwebサイトは、多様化するデバイスに対応しなければならない現状があります。
それに対応する方法のひとつとしてレスポンシブwebデザインが注目されています。

ここで一つ注意しておきたいのは、レスポンシブwebデザインがスマートフォンや、その他のデバイス対応の最適な手段かといえば、そうではないということです。
理由は、メディアクエリによってcssに余分な記述が増えたり、画像にしても一番大きいサイズの画像を使いまわして縮小表示するので、実際には大きいサイズが読み込まれています。
例えばメインビジュアルがあったとして、PCでは1000px × 350px、スマホでは640px × 224pxとデザインされていた場合、PC用の画像サイズ(大きいほう)を用意します。

そのため、対応方法を見極めて適した方法をとらないといけません。
方法はいくつか種類があり、それぞれにメリット・デメリットがありますので、次で方法と種類を説明していきます。

対応方法

下記の対応方法などがあります。

  1. レスポンシブwebデザイン

    先で説明しているので省きます

    メリット:ワンソースで各デバイスサイズに対応できる

    デメリット:PCと同じリソースを使用するためページ容量過多になりやすい。ワンソースなので設計に縛りがある

  2. マルチソース方式

    各デバイスの専用HTMLファイルを作成する方法(pc.html、smartphone.html など)

    メリット:各デバイスの最適化ができる。設計の縛りもない

    デメリット:更新・修正が手間。URLがそれぞれ違う。UA判定などで振分けるので新しいデバイスに対応しにくい

  3. プログラム変換方式

    システムによりデバイスを判定してindexファイルとして出し分ける
    (同じindex.htmlでもアクセスしたデバイスで中身が変わっています)

    メリット:更新が比較的容易。URLが同じ

    デメリット:開発コストがかかる。UA判定などで振分けるので新しいデバイスに対応しにくい

  4. 対応しない

    下手に対応するなら対応しないほうがいい場合もあるかと思います。
    この考え方も対応方法の一つとします。

    メリット:対応しないのでコストがかからない

    デメリット:そもそも最適化していないので、対応したとは言えない…

コーディングについて

ここでは、どのようなことをしてレスポンシブwebデザインを実現しているのか簡単に説明します。
何となく知っておけば、無理な設計をしてしまうなどのことが防げるかもしれません。

  1. ピクセルで値をパーセントに変換

    デバイスサイズを選ばないとうことなので、基本的にサイズは%で指定して可変するように組みます。

  2. 画像サイズを Fluid Image にする

    スクリーンサイズに合わせて画像のサイズも動的に変化するようにします。Fluid Imageとはその手法です。

    次のようなcssを書きます。
    ※cssハックかIE用の条件分岐コメントなどで指定してください

    /*モダンブラウザ用*/
    img,
    iframe,
    object {
        max-width:100%;
    }
    
    /*IE7用*/
    .ie7 img,
    .ie8 object {
        width:100%;
    }
    
    /*IE8用*/
    .ie8 img,
    .ie8 object {
        width:auto9
    }
  3. メディアクエリでスタイルを振り分ける

    cssファイルをデバイスサイズによって振り分けられるようにします。
    そのためにcss3のメディアクエリ[Media Queries]という機能を使います。
    ※IE8以下は対応していないので、jsで対応しなければならないです。

    振り分けかたにはいくつか方法があります。

    読み込むcssファイルを変える

    <link href="css/mini.css" rel="stylesheet" media="only screen and (max-device-width:480px)">
    <link href="css/mini.css" rel="stylesheet" media="only screen and (max-width: 600px)">

    cssファイル内でサイズごとのスタイルを書き分ける

    @media screen and (max-width: 1024px) {
    ...
    }
    @media screen and (max-width: 768px) {
    ...
    }
    @media screen and (max-width: 480px) {
    ...
    }
  4. metaタグで Viewport を制御する

    meta要素に viewport を追加することで、文書の表示領域を設定することができます。
    設定項目は色々あるのですが、最低でも下記を設定します。

    <meta name="viewport" content="width=device-width">

    何も指定しない場合は、デフォルト値の980pxになるので、どのデバイスから読込もうが幅980pxのデバイスと認識されメディアクエリが効きません。

自分としては、これらの部分を何となくでいいので知っておいて欲しいと思うところです。
どんな技術で表現されているからこれは無理かもとか、別の方法のほうがいいかもと思えるようになっていただければみんな幸せになるのではないでしょうかww
※別に無茶振りされた経験とかはないですよ

このテーマ設定の背景には、以前読んだ記事で、知識の浅いwebチームがレスポンシブデザインのサイトを作ったら最終的にcssのdisplayで切り替えなければ再現できない事態になってしまった… といったような残念なものがあったからです。
適していない仕様でも全く知らないせいで『レスポンシブ流行っているからやってよ♥』とか、『実はあまり知らないけどワイヤー or デザイン作ったよ(無茶仕様)。これもう変更できないから♥』なんてこと言ってきたら、お酒でも飲みながら説教してやろうと思います!!
※再三言いますが、別に無茶振りされた経験とかはないです

新しい技術が出てくると学習コストがかかり、自分に関係ない領域だと専門の人に任せきったりしてしまうこともあるかもしれませんが、最低限の知識はもっていなければですね。

.textreturn{
/* CSS 2.0 */
white-space: pre-wrap; /* CSS 2.1 */
white-space: pre-line; /* CSS 3.0 */
white-space: -pre-wrap; /* Opera 4-6 */
white-space: -o-pre-wrap; /* Opera 7 */
white-space: -moz-pre-wrap; /* Mozilla */
white-space: -hp-pre-wrap; /* HP Printers */
word-wrap: break-word; /* IE 5+ */
}
.mTreset{
margin-top:0 !important;
}
.fs12,.fs12 *{
font-size:12px !important;
}

servi

ajike switchの更新をメールでお伝えします!

8年以上ajikeが蓄積したデザイン思考とUXデザインの知見を発信し続けるブログ<ajike switch>の更新情報を無料でメールにてお知らせ致します。

×