レスポンシブWebサイト作成に役立つツール

seo

パソコンだけではなくiPhoneやiPad、Galaxyなどのスマートフォンやタブレット端末に自動対応できるサイトが定着してきました。

そのようなレスポンシブ対応のサイトは、作成が難しいように思えますがツールをうまく使えば、そこまで難しくはありません。

ここでは、レスポンシブ対応のサイト作成に役立つ便利ツールをお届けします。

フレームワーク

フレームワークを使えば、初心者でも、ベテランなら短時間でWebデザインを完了できます。

一からCSSをコーディングするのではなく、テンプレートの役割をするCSSフレームワークをもとにコーディングすることで、かなり効率化できます。

しかも最近は、レスポンシブOKが当たり前です。

bootstrap

すっかり有名になったTwitter bootstrapは、Twitterが配布するレスポンシブ対応のフレームワークのオープンソースです。

レスポンシブ対応のサイト作成の経験がない初心者でも使いやすく、ハイセンスなデザインばかりで好評です。

bootstrap

Pure

Pureは、Yahoo!が開発して公開しているCSSフレームワークです。

シンプルで軽量なフレームワークが多いので、超初心者でも使いやすいです。

また、アレンジして使いたいエンジニアにも人気の基本フレームワークが多いです。

Pure

Foundation

高機能でレイアウトのバリエーションも豊かなテンプレートが多く、Twitter bootstrapと同じくらい利用者が多いです。

デザイン性だけでなく機能性を求めているWebデザイナーにおすすめです。

Foundation

レスポンシブ対応のWebデザインギャラリーサイト

フレームワークを使ったサイト作りから、さらにオリジナリティあるレWebデザインに仕上げるためには、参考デザインが役立ちます。

スマートフォンなどにも対応するとなると、サイズによってデザインが変わるので、参考サイトをもとに煮詰めていきたいですよね。

そんなときに役立つのが、ハイセンスなWebデザインを集めたギャラリーサイトです。

Responsive Web Design JP

Responsive Web Design JPは、日本の素晴らしいサイトのWebデザインを集めたギャラリーサイトです。

日本国内向けのサイト作成をする際に参考になります。

スマートフォンやタブレット、パソコンなどの3つのパターンでキャプチャ閲覧できるのでスピーディーにチェックできます。

Responsive Web Design JP

MediaQueries

海外向けのレスポンシブ対応サイト作成のWebデザインの参考にしたいのがMediaQueriesです。

こちらは、スマートフォンやパソコンなどの4つのパターンのキャプチャ閲覧ができて、各サイズのデザインを素早くチェックできます

MediaQueries

iPhoneやAndroidなどの表示を確認するツール

スマートフォンやパソコンなどの端末分けではなく、横幅サイズで複数の表示をキャプチャしてくれるサイトです。

URLボックスに確認したいサイトのファイルパスを入れるだけで一覧表示されます。

Responsive Design Testing

The Responsinator

The Responsinatorでは、iPhoneやiPad、GalaxyやGalaxy tab、さらにはKindleなどのスマートフォンからタブレット端末の表示確認ができます。

このように、フレームワーク配布サイトやギャラリーサイト、表示確認ツールを使うと、作業効率も上がるので、レスポンシブ対応サイト作成にお困りなら、是非、役立てていただきたいです。

The Responsinator



こちらの記事も読まれてます。