レスポンシブウェブデザインサイトを作る時に役立フレームワーク

  • このエントリーをはてなブックマークに追加
  • Pocket
  • LINEで送る

20130610001
レスポンシブウェブデザインは、普通のウェブサイトをスマートフォンにも対応させる事の出来る技術です。
そんなレスポンシブウェブデザインサイトを制作する際、1から全て作るよりもベースとなるフレームワークがあったら便利ですよね。
そこで、海外でフレームワークを配布しているサイトがあるので紹介します。

 

レスポンシブウェブデザインサイトとスマートフォンサイトの違いは、過去の「3つのタイプのスマートフォン(モバイル)サイトとその違い」という記事で紹介しています。

Bootstarap

グリッドは12列あり、javascriptのプラグイン等も同梱されているので導入が簡単です。

 

20130610002.jpg

Foundation

とにかくテンプレートの種類が豊富にあるので、ある程度のUIだったら実現可能です。
2013年6月10日現在でテンプレートが13あります。
テンプレートはこちらから確認できます。

20130610003.jpg

Gridiculous

12列のグリッドを簡単に分割して配置する事が可能なフレームワークです。
その為、コンテンツを配置しやすい設計になっています。

20130610004.jpg

Responsive Grid System

このフレームワークは、グリッドを12、16、24から選ぶことが出来ます。

20130610005.jpg

Less+ Framework

Lessと呼ばれるフレームワークを基に作られていて、IEにも対応しているので助かります。
jQueryで画面の解像度に合わせて画像などのコンテンツを合わせる事も出来ます。

20130610006.jpg

Responsive Grid System

このフレームワークを利用しているサイトの紹介やレイアウトのサンプルなども用意してくれているので参考になります。
シンプルで制御しやすいフレームワークだと思います。

20130610007.jpg

まとめ

googleがレスポンシブウェブデザインを推奨しはじめてから、さらに対応サイトが増えてきている気がします。
私は、使い方によって良し悪しがあるなと感じてはいるのですが、コスト面と管理面ではとても有効的な作り方だと思います。
あとは、dreamweaver辺りがきちんと対応してくれるとありがたいのですが難しいでしょうね。

 

ユーザーとしてみた場合は、レスポンシブウェブデザインに限らず、スマートフォンサイト全体に言える事なのですがズーム出来ないのが不便だと感じます。
これは、人それぞれなので仕方ないのですが…

SNSでもご購読できます。

コメントを残す

*