![](https://kachibito.net/wp-content/themes/cocoon-master/images/no-image-320.png)
Tools & Resources
![](https://kachibito.net/wp-content/themes/cocoon-master/images/no-image-320.png)
![](https://kachibito.net/wp-content/themes/cocoon-master/images/no-image-320.png)
任意の画像をアップロードし、PCモニター画像に合成してモックアップを作成してくれる・「Magic Mockups」
![](https://kachibito.net/wp-content/themes/cocoon-master/images/no-image-320.png)
ビジネス用Webアプリ構築の為のCSSフレームワーク・「Flakes」
![](https://kachibito.net/wp-content/themes/cocoon-master/images/no-image-320.png)
クレジットカードやPayPalなどの決済系のSVGアイコンフォントのセット・「PaymentFont」
![](https://kachibito.net/wp-content/themes/cocoon-master/images/no-image-320.png)
jsfiddleライクにWebGLの動作テストが可能なOSS・「WebGL playground」
![](https://kachibito.net/wp-content/themes/cocoon-master/images/no-image-320.png)
Gistで書いたコードをスライド表示にする・「GistDeck」
![](https://kachibito.net/wp-content/themes/cocoon-master/images/no-image-320.png)
SVGアイコンをアニメーションエフェクト付きで切り替える為のスクリプト・「SVG Morpheus」
![](https://kachibito.net/wp-content/themes/cocoon-master/images/no-image-320.png)
Markdown記法でリアルタイムプレビューを可能にする・「Livedown」
![](https://kachibito.net/wp-content/themes/cocoon-master/images/no-image-320.png)
AngularJSとPHPで作られたシングルページ専用のCMS・「Cosmo」
![](https://kachibito.net/wp-content/themes/cocoon-master/images/no-image-320.png)
正規表現のコードを図に可視化する・「Regulex」
![](https://kachibito.net/wp-content/themes/cocoon-master/images/no-image-320.png)
行単位でCSSを適応させるスクリプト・「LINING.JS」
![](https://kachibito.net/wp-content/themes/cocoon-master/images/no-image-320.png)
Dropboxに置いているCSVやGoogleスプレッドシートのデータをグラフ化するOSS・「CHARTED」
![](https://kachibito.net/wp-content/themes/cocoon-master/images/no-image-320.png)
任意のWebサイトのCSSを解析し、ステータスを表示してくれるオープンソースのソフトウェア・「CSS Stats」
![](https://kachibito.net/wp-content/themes/cocoon-master/images/no-image-320.png)
マテリアルデザインを取り入れたレスポンシブWebデザイン対応のCSSフレームワーク・「Materialize」
![](https://kachibito.net/wp-content/themes/cocoon-master/images/no-image-320.png)
モバイルやモダンブラウザ向けに、jQueryやzepto.jsの代替として作られた軽量ライブラリ・「laroux.js」
![](https://kachibito.net/wp-content/themes/cocoon-master/images/no-image-320.png)
Webサイトのスタイルガイド作成の為のリソースをまとめている・「Website Style Guide Resources」
![](https://kachibito.net/wp-content/themes/cocoon-master/images/no-image-320.png)
様々なAPIを探せる検索エンジン・「APIS.io」
![](https://kachibito.net/wp-content/themes/cocoon-master/images/no-image-320.png)
指定箇所のサイズを計測できるPhotoshopのスクリプト・「Size Marks」
![](https://kachibito.net/wp-content/themes/cocoon-master/images/no-image-320.png)
Webサイトのパフォーマンスチェックが出来るスクリプト・「PerfBar」
![](https://kachibito.net/wp-content/themes/cocoon-master/images/no-image-320.png)
Google DriveやSkydriveのようなオープンソースのドキュメントエディタ・「WebSyn.ca」
![](https://kachibito.net/wp-content/themes/cocoon-master/images/no-image-320.png)
閲覧中のWebページに使われているCSSを解析してくれるChromeエクステンション・「CSS Dig」
![](https://kachibito.net/wp-content/themes/cocoon-master/images/no-image-320.png)