知らなきゃ損ですって!このサイトの制作で使った便利ツール&リソースいろいろ

       
tool

「サイト制作はのび太さんがお願いします!」
内藤さんとこの「Wenblish(フェンブリッシュ)」をやることになり、まずそう言われて正直めちゃめちゃ焦りましたね( ̄Д ̄;)!何と言っても時間がなかったので!ガッツリと制作に費やせるのは休日の2日間だけ。こんな時のためにとても役に立つツールやリソースがオンライン上にはいっぱいあります。今回はこのサイトを制作するときに使った全てのツールとリソース 、また、それに関連するものも一挙にご紹介したいと思います!




目次


Sassフレームワーク

制作時間を短縮したいならSassファイル付きのフレームワーク使うのは必須だと思います。レスポンシブサイトを作る時は特に!

Foundation

http://foundation.zurb.com/

今回僕が使ったフレームワークはFoundationです。1回試しに触って見た時から使いやすくてすぐに「これだぁ!」と思いましたね。
モバイルファーストで、CSSコンポーネント、JavaScriptなどがとても充実しています。Twitter Bootstrapと同じく誰もが知っているワイヤーフレームワークの定番中の定番。ちなみに、最近4から5になりましたよ〜。

GroundworkCSS

http://groundworkcss.github.io/

アイコン、ナビゲーションなど豊富なサポートがついたレスポンシブWebデザインフレームワーク。タブレットやスマートフォンと言ったデバイスはもちろんのこと、IEやFirefox、Operaなどでも利用可能です。

Gumby

http://gumbyframework.com/

カスタマイズを前提とした柔軟性の高いレスポンシブWebデザインフレームワーク。ダウンロード時に初期設定でカスタマイズが可能。フラットデザインにするかリッチデザインにするかを選択できます。

Centurion

http://jhough10.github.io/Centurion/

とてもシンプルなレスポンシブWebデザインフレームワーク。カスタマイズ性が高く使いやすそうです。

色選びツール

Webサイトを作る時に色はマジで重要っす!印象が全然変わりますからね。あれこれ悩んでしまって意外と時間が取られてしまう方も多いと思います。なんで色選びを早く決めるためのツールも必須です!

COLOURlovers Color Trends + Palettes

http://www.colourlovers.com/

今回僕が使わせていただいたのはこちら。多くのいろいろなユーザーが決めたカラーパレットに対しての投票結果がわかり人気のある色パターンがわかります。それぞれの色には名前が付けられており、 さまざまな条件でカラーを検索することができるし、HEXやRGBも表示されてとっても便利です。

Kuler

https://kuler.adobe.com/

超有名!Adobe製オンラインカラースキーマ。自分でカラーテーマをつくったり他のユーザーが作ったカラーテーマを見ることもできます。デスクトップなどの画像から色を抽出できたり、スウォッチにインポートできるファイルで保存もできます。

Color Scheme Designer

http://colorschemedesigner.com/

WEBページにしたときの配色サンプルページなども見れます。気に入った配色ができたら、Photoshopのカラーパレットや「HTML+CSS」で出せるんです。

HUE/360

http://hue360.herokuapp.com/

主役カラーを決めると、自動的それに合う色パターンを模索できるサービス。全体の色彩バランスの変更可能。

レスポンシブサイトでのブラウザチェック

レスポンシブWebデザインでは通常サイト以上にめっちゃ大変!便利ツール活用は絶対に欠かせません。ブラウザ上でより便利にチェックができるツールを、今回使ったもの以外にもご紹介します。

The Responsinator

http://responsinator.com/

シンプルで使いやすかったのと、iPhoneだけでなく、GalaxyやGalaxy tab、Kindleなど様々な端末でのチェックができてめっちゃ便利!今回はこちらを大いに利用させていただきました。

Demonstrating Responsive Design

http://www.jamus.co.uk/demos/rwd-demonstrations/

各デバイス画面がリアルで見やすく、非常に手軽です。

Resizer

http://codebomber.com/jquery/resizer/

ブラウザツールバーにインストールをして使うブックマークレット。ブックマークレットを起動してサイズを選ぶと、指定したサイズにリサイズされるんです。

サイト制作に必須のGoogleクローム拡張機能

Googleクローム拡張機能はいろいろありますが、今回はWeb制作に必須だと感じたものをご紹介します。今回のサイト制作にも大いに活用しまくりましたね。

MeasureIt

「これ何pxだ?」
そんなときはこの定規ツール。いちいちソース見てられませんよ。その場でサクッと測れます。

Lorem Ipsum Generator

ダミーテキストの生成ツールです。

Chrome Sniffe

使用しているライブラリやフレームワークを表示してくれるツール。ソースを見ずにどのライブラリなのかがわかります。

ColorZilla

見ているページで指定した場所の色情報を取得してくれます。そのままクリックすることでクリップボードにコピーされます。まさに「スポイト」とみたいな感じです。

Firebug

Chromeで見てる時サイトのHTMLやCSSを確認でき、オンライン上で一時的にHTML/CSSを編集できるようになります。

利用させてもらったチートシート

サイト制作してると「あの関数なんだっけ?」「あれの書き方なんだっけ?」ってことよくありますよね?なんでチートシートなしじゃやってらんないっすよ、マジで! 印刷して手元に置いときます。

WordPressチートシート(Webクリエイターさんより)

http://www.webcreatorbox.com/tech/japanese-wordpress-cheat-sheet/

HTML5チートシート

http://www.testking.com/techking/infographics/ultimate-html5-cheatsheat/

CSS3チートシート

http://www.smashingmagazine.com/2009/07/13/css-3-cheat-sheet-pdf/

Sassチートシート

http://sass-cheatsheet.brunoscopelliti.com/

いかがでしょうか?
今の世の中本当に便利なツール&リソースがオンラインで利用できて本当にありがたいですわ!もし今回使っていなければ制作時間が3、4倍には膨れ上がっていたでしょう。これからも使えそうな便利ツールはどんどん利用していきたいと思ってます。かぁ〜ありがてぇ〜、マジで!



英作文のフルーツフルイングリッシュ