前回、あっさりとレスポンシブデザイン化を完了させてしまいましたので、ここで今回の試みについて小僧なりに（ディレクターなりに）締めをしてみます。まずは小僧ブログレスポンシブ化の一連の流れです。

①【見習い小僧×技術小僧】小僧ブログの課題と新企画

②【見習い小僧×技術小僧】レスポンシブデザイン！？

③【見習い小僧×技術小僧】5つの事例から学ぶレスポンシブデザイン

④【見習い小僧×技術小僧】いよいよレスポンシブデザイン実装！！

実際やってみて感じたのは、レスポンシブデザインはハマればとても作業が素早く進み（＝工数が少なくて済む→予算も抑えられる）、ワンソース化することでHTMLのページでも更新が楽になるなということです。でも“ハマれば”と表現したように落とし穴もあって、きっと情報量が多いサイトやデザインにこだわりたいサイト、また複雑な承認フローが必要なプロジェクトだと結局普通に作った方がいい場合も多々あるだろうなという印象です。

今回の場合、作業にかかったのは実質1人日くらいのものです。これだけ短期間でできたのは、技術小僧のジョーがこの技術を既に習得していたということが1番の理由です。ですがそれだけでなく、そもそも小僧ブログが2カラムでページ数も少ないこと、デザインがシンプルでスマホ上での細かな見た目にこだわらなかったこと、更にそれらを小僧と技術小僧だけというシンプルなチーム構成でどんどん意思決定できたことというような条件がなければ厳しかったかなとも思います。

ということで万能ではないかなという気持ちも残りましたが、ひとまず小僧ブログが、スマートフォンからもオリジナリティ溢れるデザインで閲覧できるようになったことは大きな進歩です！とても満足です。しかし実は、他にもやってみたいことはあるので、次回以降このシリーズはスマートフォン対応の枠を飛び出して突き進んでみたいと思います。

■おすすめ記事

アジャイル・UX・リーンな時代ver.2 at ロフトワーク烏丸

どうせ1人で過ごす花金なので、今夜は7つの魅力的な水族館サイトを見て楽しむ。

【Facebook広告】目を引くキャッチ「俺は、ローラが好きなんだ！」

技術小僧のジョーです。以前お話ししたとおり、小僧ブログのスマートフォン最適化はレスポンシブデザインで実装していくことになりました。現時点での小僧ブログスマートフォン対応の要件は、以下の通りです。

“５つの事例から学ぶレスポンシブデザイン”でも紹介したように、レスポンシブデザインでサイト構築するためにはブレイクポイント”について必ず考えなければなりません。これはどの画面幅に対してどのCSSを適用するかを決めるものですが、基本的には①スマートフォン②タブレット③PCの3つの画面幅を想定すべきでしょう。ところがこのブレイクポイント、実は標準的な数値や定石というものが無いので、サイトによって設定の仕方がバラバラなのです。そこで、ブレイクポイントを決定する際には、まずは基準のデザインをひとつ設定して、そこからウィンドウサイズを変更したときに内容が最適に表示されるように適宜ブレイクポイントを設定していく、というのが妥当な方法だと考えています。（小僧ブログではもともとのデザインを基準のデザインとして設定します。）

細かいことはさておき、とりあえず今回は2カラムしかないので、ブレイクポイントは1つだけ！！つまりスマートフォンとPCの2パターンに対応させることにしました。そして肝心のブレイクポイントは630pxに設定しました。この630pxを超えると画像が荒くなり、高解像度画像で対応したとしても今度は読み込みに時間がかかります。スマートフォンでサイトを見るなら、「表示の軽さ」というのはとても重要ですよね。

とまぁ御託はさておき、実はこのサイト、既にレスポンシブデザイン化されています！PCでご覧の方はウィンドウサイズを小さくしてみてください。いかがですか？？元のデザインのままスマートフォンに最適化されましたね。今回はPC用の固定幅レイアウトにスマートフォン用の変動幅レイアウトを加える形で設計しました。参考までにレスポンシブしない旧サイトを載せておきます。

小僧ブログ固定幅デザイン

■おすすめ記事

Pinterestを使った企業キャンペーン

京都の寺社の、見やすい2サイトと動きがかっこいい2サイト＋おまけ

【セミナーレポート】図解で考える顧客視点のウェブ解析設計

はじめまして。技術小僧のジョーです。現在入社3ヶ月目、学ぶことが多すぎてパンク気味です。これから、技術サイドの話は僕からお届けします。見習い小僧×技術小僧企画の記念すべき第一弾として、小僧ブログでスマートフォン対応を実現しようということになりました。

スマートフォン最適化の方法ですが、大別すると①別途スマホ用のサイトを１から作る②プラグインでパパッと最適化する③レスポンシブデザインを適用するの3つに絞られるかと思います。①の方法だと『最適化』とは言えず、またWordPressを使用したブログということもあって、運用の煩雑さからも今回の課題には適していません。一方、現状の小僧ブログでは、スマートフォン対応に②の方法を利用しています。

これはWordPressのスマートフォン最適化用のプラグインを使用していて、制作の手間もかからずとってもラクチンです。しかし、このプラグインで自動生成したスマホ用サイトでは、確かにスマホサイトらしいUI（ユーザーインターフェース）にはなりますが、元々あったデザインはほとんど活かされていません。PC版に登場する愛くるしい小僧アイコン等のデザインが無いなんて！モッタイナイ！！もちろん、スマートフォン最適化プラグインの中にはよりPCデザインに近づけてくれるものもあります。しかしプラグインによってスマホに最適化されたデザインは、ほとんどがプラグイン独自のUIを組み込むものです。今回の場合は、元々のシンプルなデザインをスマートフォンでもほとんど完全に継承しつつ、なおかつスマートフォンの画面幅に最適なサイズで表示したいということなので、選択肢は③レスポンシブデザインに絞られます。

それでは、レスポンシブとは一体全体何なのかと誤解を恐れずに言いますと、『1つのHTMLファイルに対して、画面幅に応じて複数のデザイン(CSS)を適用する』ということです。『画面幅に応じて』というところがキモです。サイトのウィンドウサイズを変更すると、レイアウトががらっと変わる、あれです。

ARです蚊？アプリサイト

上に出したのが先日ブログでもお伝えした『ARです蚊？』アプリのサイトです。ウィンドウサイズをガンガン変えてみてください。（IE9未満は非対応）いかがでしょうか。5段階ほどカクカクっとレイアウトが変わるのをご覧いただけたかと思います。いずれのサイズにおいても横スクロールバーが出ないので、スマートフォンの小さな画面であっても縦方向のスクロールだけでサイトの全体を閲覧することができますね。これがレスポンシブデザインです。

というわけで、『見習い小僧×技術小僧 企画第一弾』のスマホ対応ミッションは、小僧ブログのレスポンシブデザイン化という方法でクリアしていこうと思います。また次回からは実際に小僧ブログを段階的に設計＆コーディングしていく予定なので、乞うご期待です！

■おすすめ記事

紅葉シーズンに向けて気になる、創業100年を超す京都老舗旅館のWebサイト5選

【見習い小僧×技術小僧】5つの事例から学ぶレスポンシブデザイン

【セミナーレポート】図解で考える顧客視点のウェブ解析設計

始めてから1年以上が経ち、記事数も90件に近づいてきた小僧ブログですが、比較的早い段階からずっと気になっていた課題がありました。いくつかあるのですが、そのうちの1つがスマートフォン対応です。現在、スマートフォンからこのサイトを見ていただくと、一応スマートフォンに最適化された表示がされるようになっています。（方法は、WordpressのWPtouchというプラグインを使って対応させています。）しかし、それはあくまで簡易的な方法での対応ですので、デザインがPC版のものを踏襲できておらず、せっかくの小僧イラストや小僧ブログロゴをモバイルでも見られるようにしたいというのは当初からの課題でした。

ここで話が飛びますが、6月からインフォバーンKYOTOには、バイトのジョー（仮名）が入社してくれました。彼は「3か月貰えればどんな技術でもマスターします！」という意気込みで入社してくれたやる気に満ち溢れた逸材で、実際に入社3か月で多くのことをマスターして進化を遂げてきました。そんな彼と僕とは歳が近いこともあり、以前から「小僧ブログで『見習い小僧（レオ）×技術小僧（ジョー）　企画』をしたい」と話していました。

そこで今回、『見習い小僧×技術小僧　企画第一弾』として、小僧ブログをスマートフォン表示に対応させる！というテーマを設けてみました。ただやるのではもったいないので、その様子や途中で使った技術の紹介もブログ上でしながら、多くの企業で課題となっているサイトのスマートフォン対応の1つの事例紹介になればと思っています。

とはいえ小僧ブログですから、そこはゆる～く！肩ひじ張らない記事制作を心掛けていきますので、どうぞゆるふわにご期待ください。このシリーズは右の『見習い小僧×技術小僧』カテゴリにまとめていきます！

■おすすめ記事

【見習い小僧×技術小僧】5つの事例から学ぶレスポンシブデザイン

京都の寺社の、見やすい2サイトと動きがかっこいい2サイト＋おまけ

【Facebook広告】目を引くキャッチ「俺は、ローラが好きなんだ！」