［スポンサーリンク］
パソコンだけではなくiPhoneやiPad、Galaxyなどのスマートフォンやタブレット端末に自動対応できるサイトが定着してきました。
そのようなレスポンシブ対応のサイトは、作成が難しいように思えますがツールをうまく使えば、そこまで難しくはありません。
ここでは、レスポンシブ対応のサイト作成に役立つ便利ツールをお届けします。
フレームワーク
フレームワークを使えば、初心者でも、ベテランなら短時間でWebデザインを完了できます。
一からCSSをコーディングするのではなく、テンプレートの役割をするCSSフレームワークをもとにコーディングすることで、かなり効率化できます。
しかも最近は、レスポンシブOKが当たり前です。
bootstrap
すっかり有名になったTwitter bootstrapは、Twitterが配布するレスポンシブ対応のフレームワークのオープンソースです。
レスポンシブ対応のサイト作成の経験がない初心者でも使いやすく、ハイセンスなデザインばかりで好評です。
Pure
Pureは、Yahoo!が開発して公開しているCSSフレームワークです。
シンプルで軽量なフレームワークが多いので、超初心者でも使いやすいです。
また、アレンジして使いたいエンジニアにも人気の基本フレームワークが多いです。
Foundation
高機能でレイアウトのバリエーションも豊かなテンプレートが多く、Twitter bootstrapと同じくらい利用者が多いです。
デザイン性だけでなく機能性を求めているWebデザイナーにおすすめです。
レスポンシブ対応のWebデザインギャラリーサイト
フレームワークを使ったサイト作りから、さらにオリジナリティあるレWebデザインに仕上げるためには、参考デザインが役立ちます。
スマートフォンなどにも対応するとなると、サイズによってデザインが変わるので、参考サイトをもとに煮詰めていきたいですよね。
そんなときに役立つのが、ハイセンスなWebデザインを集めたギャラリーサイトです。
Responsive Web Design JP
Responsive Web Design JPは、日本の素晴らしいサイトのWebデザインを集めたギャラリーサイトです。
日本国内向けのサイト作成をする際に参考になります。
スマートフォンやタブレット、パソコンなどの3つのパターンでキャプチャ閲覧できるのでスピーディーにチェックできます。
MediaQueries
海外向けのレスポンシブ対応サイト作成のWebデザインの参考にしたいのがMediaQueriesです。
こちらは、スマートフォンやパソコンなどの4つのパターンのキャプチャ閲覧ができて、各サイズのデザインを素早くチェックできます
iPhoneやAndroidなどの表示を確認するツール
スマートフォンやパソコンなどの端末分けではなく、横幅サイズで複数の表示をキャプチャしてくれるサイトです。
URLボックスに確認したいサイトのファイルパスを入れるだけで一覧表示されます。
The Responsinator
The Responsinatorでは、iPhoneやiPad、GalaxyやGalaxy tab、さらにはKindleなどのスマートフォンからタブレット端末の表示確認ができます。
このように、フレームワーク配布サイトやギャラリーサイト、表示確認ツールを使うと、作業効率も上がるので、レスポンシブ対応サイト作成にお困りなら、是非、役立てていただきたいです。