レスポンシブwebデザインお助け便利ツール【webデザイン】


レスポンシブwebデザイン…….最近急激に案件が増えてきました;
今日は普段使っている便利ツールを紹介しまーす!

フレームワーク編

レスポンシブwebデザインの場合、何もない1から制作というのはどうしてもコストがかかります。

制作コスト短縮にはフレームワークがとっておきの方法です。では、紹介しまーす!

twitter bootstrap

定番ですね。もうあまりここで紹介する意味もないと思いますが、、、、

bootstrapの利点としては何より豊富なリソース
派生版も含めると結構あるんですよこれが。ドドーンと紹介します。

  • Bootswatch

    bootstrapのカラーを変更したテーマが配布されています。

    wordpressでbootstrapを使いたいという人はwordpress bootstrapに全部のカラーテーマが入っているのでこちらをインストールした方が早いかと思います。
  • wrapbootstrap

    [browser-shot url=”https://wrapbootstrap.com/” width=”800″]

    金払ってもコスパいいならという人はこちらのサイト。
    $10前後で質のいいbootstrapテーマが購入できます。

  • plusstrap

    [browser-shot url=”http://xbreaker.github.com/plusstrap/” width=”800″]

    どちらかというとGoogle strapに近い感じのbootstrap派生です。

使い方がわからないという方は以下のサイトを参考にしてみてください。

Twitter Bootstrapの使い方

ブートストラップスターターテンプレートv2.0.4

FASTER&EASIER WEB DEVELOPMENT

すっごく参考になったサイトです。主要なフレームワークの特徴がまとめられています。

使えそうなフレームワークを選んでください。ライセンスも書いてあるのがいいですー。
軽量なフレームワークがいいとかって時に役立ちますよきっと。
あ、紹介するのめんどくさくなったななんていわないでください;

CSS3編

スマホサイトってなるとふんだんに使えるCSS3。

after/beforeなどの疑似属性でもはやなんでも作れるんじゃないの?ってぐらいですよほんとに。

ってことで使えるサイトをご紹介します。

[browser-shot url=”http://www.cssmatic.com/” width=”800″]

cssmatic

ジェネレーターのなかではこれ。まさにアルティメット。一つのサイトでグラデーション・ノイズテクスチャ・角丸・ボックスシャドウが作成できます。

コピペで簡単。最強デス。

[browser-shot url=”http://css-button-generator.com/” width=”800″]

css button generator

CSS3だけでくるボタンジェネレーターです。

これもUiでいじってコピペでOK。なんで日本ってあまりこういうツール系のサイトってないですよね。

colourco

CSS3関係ないです。すみません。。。でも!僕は配色ツールの中でもこれを一番お勧めしたいです!直感で選べるっていうのがすばらしい。


[browser-shot url=”http://lea.verou.me/css3patterns/” width=”800″]

css3patterns

CSS3だけでパターンを再現しています。なんていうか、発想がすごいですよね。

こういうのみているとふとした瞬間に惨めになっちゃいます。
おれってコピペばっかじゃんって。コピペマスターから早く一人前のクリエーターなりたいです。

確認編

レスポンシブwebデザインで大変な確認作業。ウィンドウを狭めただけではわかりづらいですよね。

そこでiframeでサイズ指定して実際の画面をみてみるってサイトがいくつかあります。
初期段階ではわざわざiframeから用意していたそうです。開発者に感謝です。

respon.si

もっぱらこのサイトです。理由って理由はあんまりないんですが、、、なんか差ってあるんでしょうか

responsinator

はい、このサイトの方が使いやすかったデス。メモしかとってなかったけど、、、これ、全サイズ一緒に読み込まれるんですね!

記事書いてよかった!大発見です。

Adobe edge inspect

これはまだ使ったことないんですよね。いつか試してみたいな。

あとがき

ざらーっと紹介しましたが、いかがだったでしょうか?

僕たちweb制作者は時間との勝負ですからねー。ほかにもいいツールあったらぜひ教えてください!以上でしたー!

1shiharaT
1shiharaT
本名 : 石原隆志

2013年からWeb業界に身を置き、GrowGroup株式会社でWordPressやEC-CUBEなどのCMSを中心にWeb制作をやってます。
本名 : 石原隆志 2013年からWeb業界に身を置き、GrowGroup株式会社でWordPressやEC-CUBEなどのCMSを中心にWeb制作をやってます。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です