サイトのデザインをレスポンシブ ? にしてみた


WordPressのレスポンシブデザイン機能をフル活用

こんにちは。マヌカハニーを毎朝スプーンで一杯舐めて半年、すこぶる体調が良い、Faboの伊藤です。

本日(2013/1/21)、ファーボのWebサイトデザインを変更しました。

デザインのポイントは「レスポンシブ」です。
responsive = よく応対する
という感じですね。

Webデザインの世界では、ひとつのコンテンツ(HTML)をスマホ、タブレット、    PCディスプレイなど様々なデバイスに対して、適切な表現に変えてくれるWebサイトの実装方法です。

はい? デバイス? コンテンツ?

簡単にいうと「スマホ流行ってきたから、その小さい画面でも見やすいWebを作る」方法です。

・・・・見てもらったほうが早いですね。

今までのデザインはこれ

これは、これで悪くはなかったです。

新しくなったデザインはこれ

トップの画像とテキストは自動配置して、スライドしてくれるすぐれもの。

そして、今回のレスポンシブデザイン対応サイトを各デバイスで見た場合

タブレット(iPad1,2)で見た場合


スマホ(iPhone4)縦(タテ)で見た場合

 

 

スマホ(iPhone4)横(ヨコ)で見た場合

最近、スマホを横にしていないなぁ・・

これらを自動で最適化してくれる仕組みです。

 ※このブログをPCブラウザで見ている人は、ブラウザのサイズ(幅)をドラッグしながら狭めてみてください。段階的に画像のサイズも変わり、メニューを含めたレイアウトが変わるのがご覧いただけます。

 

これは、見る側にやさしいですよね。

さらに、作る側にもメリットがあります。
例えば、スマホ用のHTML(例:www.fab-o.com/mobiletop.html)を作らなくて良い
ということは・・・

  • 別々のページを作らなくて良い
  • もちろん、開発費(手間)が少なくなる
  • そして、ページURLはひとつなのでアクセスログ集計が楽

となる訳です。1粒で3回美味しいのです。

 

私は仕事柄、10年前から「ワンソース・マルチユース」なんて言ってましたが
それが楽々実現できる世界になったので、嬉しい限りです。

10年前ならこんなサイト作ろうとして、おしゃれなWebコンサル&開発企業に頼んだら
◯千万という見積もりが出てきたでしょう。

 

様々なデバイスで見た場合をシュミレーションしてくれるWebサービス

ちなみに、自分のWebサイトを色々なデバイスで見るのは大変でしょうし、「そもそも持ってないよ」という場合もあるかと思います。

そんな時はこのサイト「Screenfly(スクリーンフライ)」が便利です。

ここに自分が見たいサイトのURLを入力するだけ

 

それで、画面下に並んでいるデバイスを選ぶのです。

iPhone以外ではAndroid、ブラックベリー端末などもあります。

便利でしょ?

私はこれで助かっています。「ねぇねぇ、加古さん、自宅にあるAndroidのタブレットでこのWebサイト見ておいて、頼む!」といったお願いもなくなりました♪

 

→追記:2013年4月16日
画面シミュレーションとしては、「designmode」 http://designmodo.com/responsive-test/ というサイトのテストツールも便利です。

WordPressでレスポンシブデザインのテーマを安全かつ、簡単に見つける方法もそのうち公開していきます。
(すぐに知りたーいという方は、お気軽にご連絡ください。)

※ 参考サイト:ITに詳しい人ははこちらの解説が分かりやすいです。

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

 

→追記:2013年08月15日
Google先生がスマホへの対応が不適切なサイトの順位引き下げを発表しました。
http://googlewebmastercentral-ja.blogspot.jp/2013/06/changes-in-rankings-of-smartphone.html

どうやら、最良の改善方法は、レスポンシブデザインを採用することのようです。