約36時間でレスポンシブデザインを作る！効率最優先で作るため必要だったリソースや情報色々

July 01, 2012 WEBデザイン

先日このブログをリニューアルさせて頂いた旨をご報告させて頂きましたが、今回のリニューアルの主目的だったレスポンシブデザイン化について、とにかく効率優先で作業させて頂いた時のリソース関連や情報を一度僕自身の忘備録として抜粋してまとめさせて頂こうと思います！以前別のブログを作った時もそうですが、基本僕はとにかく効率重視派です。細部に渡る美しいデザインや、ガリガリのプログラミング。標準に法ったコーディングとかはその道のスペシャリストが仲間内に居るので、今回も僕は効率化に焦点を当てています！

ご紹介させて頂くのは主にFacebookやTwitter周りで共有させて頂いてきたリソースばかりですが、実際に使ってみると見えてくる注意点や、戸惑った部分、周りのデザイナーにも知っておいて欲しい部分等が見え隠れしてきたので、まずはその辺りを中心に、作業ステップ毎に簡単にご説明させて頂こうと思います。

僕と同じステップを踏む必要なんか全くないと思いますが、何かの参考レベルになってくれたのであれば嬉しい限りです！

※いつも通りワイヤーフレームは出来て上がってる前提で行きます！

まずはグリッドシステムを選定

まぁ、いきなりグリッド考えるのかよって声もありそうですが、スピードと効率化を重視するなら初めの段階で考えておいた方が絶対良いと個人的には思っています。

僕はこれまでも幅固定のデザインの場合は960 Grid Systemをずっと使わせていただいてきたのですが、今回作りたいのはレスポンシブデザイン。レスポンシブデザインに特化したGrid Systemは色々出てきているのは知っていたので、まずはこれまで知ったリソースを見直してどのレスポンシブデザインを起用するかをベースに考えることにしてみました。

で、最終的に候補に上がったのは下記の３つ。

Responsive Grid System

個人的には24カラムのGrid Systemが合ったことが非常にありがたかったですね。元々24カラム中の1カラム分を余白として空ける癖というか個人的な好みもあったのと、1800オーバーの設定がデフォルトで存在したことが今回のリニューアルの趣旨と合っていたので、今回のリニューアルはこちらを採用させて頂きました。

僕のブログは1920サイズのモニタで見る人が大半なので、ワイドモニター対応のResponsive Grid Systemを探してましたっす。

Gumby 960 Grid Responsive CSS Framework

ブラウザを縮小した時のロゴの拡大縮小がかっけぇ！って思ったのと、レスポンシブデザインのGrid Systemには珍しくGridレイアウト用のPSDファイルが入っており、しかもPC用とMobile用の二つに分かれていたのは凄く印象よかったのでギリギリまでこれ使う予定だったのですが、PSDは今まで使っていた960 Grid Systemでいいやんってのと、Mobile用って基本1カラムじゃね？って理由で今回は見送りました。

Responsive Web Design just got Easier with the Responsive Grid System

周りで使ってる人が何人かいたので、使えるようになっておくならこれなのかなぁって理由だけで見てたGrid System。結局24カラムが無かった事と、フレームワーク内のCSSファイルが沢山合ったのが個人的に合わず今回は見送りらせて頂きました。

その他のResponsive Grid System達

デザイン作業／リソース関連

960 Grid System

今回のデザインで使用したGrid System PSDテンプレートはいつもどおり960 Grid System！24カラムがどうしても個人的に必須だったのと、使い慣れた感から採用！

CSS Sprite Generator | Project Fondue

CSSスプライトは以前からずっと活用してきた上記ジェネレーターを使用！Fireworks CS6からCSSスプライト画像を作る機能がついたらしく、どっちにするか非常に迷ったところですが、今回は慣れを重視してジェネレーターを使用することでGo on!

とりあえずグリッドデザインでデザインした結果

とりあえず、いつものようにグリッドデザインに沿ってデザイン。ただ、今回はレスポンシブデザインにする前提なので、いくつか注意したことがあります。

px指定ではなく%指定で可変するということ

意識したというか、分かってなければ成らないことかなと。デザイン時に常に考えていたのは、「サイズが可変しなければ成らない部分」のこと。通常のグリッドレイアウトでデザインする時は固定幅なのですが、今回は各オブジェクトのサイズや形状が変化する、リキッド化しなければ成らない部分の双方を考える必要があるため、ちょっと通常のデザイン時とは気遣うポイントが変わってきました。

これだけじゃ当然リキッドレイアウトなので、media-queriesを使いPCモニタの時は全体囲うcontainerの幅を固定値にしてる感じですね。

↑デザイン時、表示範囲によって大きさ（or 形状）を変えるであろう部分を特に意図したところ。

また、今回は一つのPSDで作ったデザインを可変に対応する想定で作業しましたが、受託案件の場合は想定するコンテンツ幅毎のデザインを提示することも当然あります（スマフォ用デザイン、PC用デザイン、各モニタサイズ毎デザインみたいな）。しかし、今回は効率優先で各デザインの調整はHTML作成時に考えることにしますた＞＜。個人ブログだしいっしょーとここはスルー。

Responsive Grid SystemでHTMLコーディング

Grid Systemでコーディングしたことがない人が僕の知り合いにいたので、一度超簡素に説明しておこうと思います。

そもそもサイトのデザインの大半はグリッドでできてますよね？（2カラムとか3カラムとか）その各グリッドやカラムで必要なCSSを最初から設定してくれているのがGrid System。例えば今回のResponsive Grid Systemの場合だと。。。

こういうCSSのクラスが用意されるわけです。

これをResponsive Grid Systemになぞって超簡素なHTMLで書くと。。。

[html]<div id="wrap" class="span_24"> <div id="header" class="span_24 row"> <div class="span_12 col"> ここにロゴが入る！ </div><!– logo area –> <div class="span_12 col"> ここにヘッダーのナビが入る！ </div> </div><!– header –> <div id="contents_wrap" class="span_24 row"> <div class="span_16 col"> ここにブログの記事が入る！ </div><!– contents –> <div class="span_7 float_right"> ここにサイドバーが入る！ </div><!– sidebar –> </div><!– contents_wrap –> </div><!– wrap –>[/html]

こーんな感じになるはずです！（なんか間違ってたらすいません＞＜）

ここで書かれているcolというのは横に並ぶカラムのこと。rowというのは縦に並ぶカラムのこと。Responsive Gird Systemにはこの各カラム数毎のWidth指定が既にされているので、速攻でこういったGridデザインが可能でっせという仕様！

当然、これを可変じゃなく固定で作るなら960 Grid Systemとかその辺を使うことになります！グリッドデザインで作る場合はとにかく便利で早いかと！使わない手は無い！

このサイトで使わせて頂いているResponsive Grid SystemのCSSを見てみると、各ボックス毎のCSSが設定されているのがわかると思います。

画像は『CSS Splite画像』と『通常表示しなければ成らない画像』を分ける形で対処

僕は相変わらずCSS Spliteを使い画像を表示するようにしてきたのですが、今回はレスポンシブデザインなので画像の伸縮が必要な箇所がいくつかありました。

ロゴ画像なんかは、モニタサイズによって細かく大きさを変化させたいので、背景画像で各表示領域用の画像を用意してあげるよりも、普通にimgで画像表示して大きさを可変してあげる方が楽だったからです。

伸縮が必要無い画像についてはCSS Splite

あきらかに伸縮が必要な物は通常どおり<img>タグで表示

こういった形で画像の表示方法を変えるのが、果たして正解かはさっぱり分かりません。とりあえず僕はそういった方法で対応したのですが、何か他に良い案があればぜひ教えて頂けると幸いです！

レスポンシブ化はMedia-Queriesで対応

こちらは今回使用しているCSS3 Media Queries用のCSSをちょっとだけ覗いて見るとわかるかもしれませんが。既にこちらのCSSにはスマフォ用、iPadなどのタブレット用、そしてこのGrid Systemで気に入った設定項目の一つとして各PCモニタサイズ毎（SXGA、UXGA、フルHD）のmedia-queryも用意されていますので、各表示毎に該当させる表示方法を変えて上げればいいだけですね。

たとえば、このサイトで使用している一週間以内の記事であることを示すNewアイコンがありますが、これは画面からはみ出てるので1024px以下（ってかタブレットとか）になった場合には表示方法を変えたかったんですね。

↑が1024pxオーバーのモニタで見た時のアイコン

↓がそれ以下のモニタで見た時のアイコン

通常は、はみ出ているNewアイコンで普通にCSSを設定しておいて、media-queriesを使えば以下のような記述で1024以下の表示域に対し設定が可能です。

[css] @media only screen and (min-device-width: 481px) and (max-device-width: 1024px), only screen and (min-width: 481px) and (max-width: 1024px) { ※ここに1024px以下のNewアイコンの設定を記載（表示領域481px〜1024pxの時のCSSを記載） } [/css]

こういった形で様々なmedia-queriesの設定内容に合わせて見栄えを変更して行きます。

で、今回のGrid System使用時に意外と肝になるのはスマートフォン対応の以下の記述かなと、

[css] only screen and (min-device-width: 240px) and (max-device-width: 480px), only screen and (min-width: 240px) and (max-width: 480px) { .span_1, .span_2, .span_3, .span_4, .span_5, .span_6, .span_7, .span_8, .span_9, .span_10, .span_11, .span_12, .span_13, .span_14, .span_15, .span_16, .span_17, .span_18, .span_19, .span_20, .span_21, .span_22, .span_23 { width: 100%; } .col { margin: 0; width: 100%; clear: both; } } [/css]

見たままですが、全てのカラムに対してwidthを100%表示にしています。なぜならグリッドデザインでカラムを分けた物のほとんどって、スマフォレベルにまで幅が狭まると全て1カラムになっているからです！このResponsive Grid Sysytemも通常は各カラムに横幅の適切な指定が入っていますが。このカラムサイズを全て100%にすることで、無理やりすべてのカラムを縦置きに変換して上げているんですね。

「あー、そりゃそうか。」って無駄に納得っしてしまったところでしたので、共有させて頂きます！

こういった各デバイスサイズに合わせたMedia-queriesを使って、CSSを最適化してあげるのがレスポンシブデザインには必要なので面倒かもですが、頑張って実装→検証を繰り返しましょう！

検証環境

Responsive Design Testing

検証環境として各デバイスを用意したかったところですが、そんなお金無いのでこちらのサイトで各表示サイズ毎の検証を行いました！デバイスによってフォントや見栄えは完全に一致させることは難しいですが、ある程度はこちらのサイトで合わせて実際にはちゃんと友人経由で様々なスマフォ、タブレット等を借りて表示確認させて頂きました！（笑）

WordPress導入

さて、お次はWordpressに導入しますが、今回は特にこのプラグイン入れました！というお話は抜きにし、レスポンシブデザインに必要だった設定系にフォーカス当てて書かせて頂こうかなと思います！

画像挿入時のサイズ指定を削除

Getting WordPress to play nice with responsive images | Tutorial | .net magazine

こちらに書かれている通りですが、Wordpressはデフォルトで画像挿入時にwidthとheightの設定をしてしまいます。media-queryはwidthの設定はCSSで変更することが出来ますが、Heightは固定値を保つという現象が僕も起こってしまっていたので、こいつはとにかく必須設定かなと思ったのでご紹介させて頂きました。

Facebook、Twitter、はてブ、各ウィジェットのレスポンシブCSS設定

意外と大変だったのが、各ウィジェット関連のレスポンシブ化。というか、widthを100%にする方法。一応の今回の設定で使用したCSSをご紹介させて頂きます。

Facebook Likebox

[css] .fbcomments,.fb_iframe_widget,.fb_iframe_widget[style],.fb_iframe_widget iframe[style],.fbcomments iframe[style],.fb_iframe_widget span { width: 100%! important; } [/css]

※参考：Make Facebook Comments responsive | TheHacked.com

Hatenaブックマークウィジェット

[css] .hatena-bookmark{ width:100% !important; } [/css]

Twitterウィジェット

[css] .twtr-doc{ width: 100% !important; } [/css]

Facebook Comments

[html] </p> <div class="fb-comments" data-href="<?php the_permalink() ?>" data-num-posts="4" data-width="320"> &amp;nbsp; </div> <p> [/html]

PCモニタは全く問題無いけど、FacebookコメントだけはなぜかスマートフォンでのWidth指定が効かなかった…なのでとりあえず貼り付ける時に普通にdata-widthをスマフォの最小値に設定して対応。今後も要検証が必要っす。

課題：Retina周り

Retinaディスプレイに関するWEB業界の反応は色々な議論を生んでいますね。

この辺りでまとまっているような対応策は色々あると思いますが、Responsive Grid System上では、CSS上の-webkit-min-device-pixel-ratioで指定できるよう既に枠だけは用意されていました。

[css] @media only screen and (-webkit-min-device-pixel-ratio : 1.5), only screen and (min-device-pixel-ratio : 1.5) { /* Styles */ } [/css]

が、今回のリニューアルでは特にまだ対応できてるわけじゃないので、今後アクセス解析を元にこりゃまずいって状況になったらコツコツ対応していこうかなと思います。

現時点での僕の対応策としては、スマフォ時の表示だけは考慮に入れなければ成らなかったので、取り急ぎ見出し部分はCSS3を使って装飾程度に押さえています。

以上、いかがでしたでしょうか？

がっつり作業してだいたい２日、Dropboxで同期した作業ファイルの過去歴を見た通りであれば大体35時間くらいで作業できたっぽいですが、まぁブログであったことと、当然自分のサイトであったことは大きな要因にはなっていると思います。

今回ご紹介させて頂いた項目意外にも色々注意した点等がありますが、まずは今回特に効率を意識した際にお世話になったリソースや設定、情報関連の部分をご紹介させて頂きました！本当は作業環境のことも書こうと思ったのですが、ちょっとボリュームオーバーになりそうだったので今回は控えさせていただきまっす！

主に今回はアクセス解析を元に表示範囲を意図したリニューアルだったので、もしかしたら一般需要からはちょっと離れてしまうのかもしれませんが、今回の一連の作業の中から何か参考にしていただけそうな部分がひとつでもあれば嬉しい限りです！

まだまだがっつり勉強中なレスポンシブデザインですが、とりあえず今回は現時点で僕が作業してきた中で、最も確実で最も早いレスポンシブ対応におけるアレコレをご紹介させて頂きました！

Retina対応含め、今後もレスポンシブデザインに関する情報はがっつり集めまくりますので、また何か発見や情報があれば皆様とシェアさせて頂ければと思います！

ではでは、皆様良きレスポンシブデザインライフをー！

PS:36時間に含まれる作業

何件かお問い合わせ頂きましたので追記させて頂きますが、全体作業で36時間くらいだったので大体の感覚値です！ちゃんと測ってなくてすいません！

レイアウト検討：2h
新規デザイン（PSD）／スプライト化：14h
HTML・CSS組む（レスポンシブ化）：10h
WordPress入れて：6h
動作確認と悶々と修正する時間：4h

大体こんな感じでしょうか。。。昔のサイトはまだ残ってるので（もうすぐ消えますが・・・）、これから今の状態にするまでって感じっすー！