CSS3のコードスニペットと動作デモを紹介する・「CSSFlow」
CSSFlow CSS3を使ったエレメント等をデモと共に紹介するWebサイト。上2つは有料みたいですが下のは無料で利用出来るみたいです。スマフォサイトなんかと相性良さそうなエレメントが目立ちますね。 CSSFlow
Resource - Webデザイン補助
PNGやPSDファイルとしてエクスポートできるグリッド生成ツール・「Modular Grid Pattern」
Modular Grid Pattern Modular Grid PatternはPNGやPSD形式でエクスポートできるグリッド生成ツールです。幅やカラム数を指定してダウンロードするだけ。PhotoShopのエクステンションもあるみ...
猫の画像をダミー画像として使える・「{placekitten}」
{placekitten} {placekitten}は猫の画像をダミー画像として利用出来るツールです。URLでサイズやモノクロ指定をするだけでダミー画像が表示されます。 {placekitten}
Sass用のカラー調整Webツール・「SassMe」
SassMe SassMeはリアルタイムでSass用のカラー調整を行えるWebツールです。カラー関数のサブセットを視覚化してくれる、というシンプルなもの。使い方はベースカラーを入力してスライダーをマウスで操作するだけ。Githubでも...
デバイス画像のモニターにサイトを表示させてレスポンシブ対応状態を確認する・「Am I Responsive?」
Am I Responsive? Am I Responsive?は、レスポンシブWebデザイン対応かどうかを確認するチェックツールです。デバイス画像のモニター部分はフレームの為、URLを指定すると上図のデバイス画像内に実際にサイトが...
動作も軽く使いやすいモックアップ作成ツール・「Moqups」
Moqups Moqupsは動作も軽く、直感で使えるモックアップ作成ツールです。ドラッグ&ドロップで楽に操作することが出来て、基本的な機能も全て揃っています。ただし、画像をアップロードするにはユーザー登録が必要となります。 Mo...
Illustratorのデータをcanvasに変換する・「Ai to Canvas」
Ai to Canvas Ai to Canvasは、AIファイルをHTML5のcanvasに変換するプラグイン。アニメーションにも対応しているようです。現状は完全な物ではなさそうですが、今後も期待できそうな出来ですね。 Ai ...
レスポンシブWebデザイン対応確認用ブックマークレット・「VIEWPORT RESIZER」
VIEWPORT RESIZER VIEWPORT RESIZERは、閲覧中のWebサイトをリサイズしてレスポンシブWebデザイン対応状態を表示確認するブックマークレットです。PCと、タブレットやスマフォサイズに対応。 VIEW...
レスポンシブWebデザインのレイアウトチェックツール・「The Responsinator」
The Responsinator The Responsinatorは、レスポンシブWebデザインの表示テストを行えるツールです。縦長になってしまうのですが、まとめて表示確認出来るのは便利だと思います。 The Respons...
画面サイズごとの表示を確認出来る・「Screenqueri.es」
Screenqueri.es Screenqueri.esはレスポンシブWebデザインの表示確認ツール。iPhone、iPadやAndroidのような人気デバイスに限らず、GalaxyやBlackBerry、Kindleなど様々なデバ...
色を指定したら、その色に関連した色合いを抽出してくれる・「colllor」
colllor colllorは色のコードを指定する事で、その色と相性の良い色、トーンなどを抽出してくれるカラーツールです。 colllor
ダミー画像を簡単に生成出来る・「placebox.es」
placebox.es placebox.esはURLからダミー画像を生成出来るWebツール。サイズや色を指定すれば、その設定に見合ったダミー画像が表示される。 placebox.es
iPhoneのモックアップを作成・「iPhone Mockup」
iPhone Mockup iPhone MockupはオンラインでiPhone向けサイトやアプリのモックアップを作成できるツール。手書き風、イラスト風のスタイルを選択できます。多機能では有りませんが、サクッと作りたいときは便利です。...
色に関する様々な情報を提示してくれる・「ColorHexa」
ColorHexa ColorHexaは色に関する様々な情報を教えてくれるWebツール。指定した色と相性の良い色やRGB、CMYKから、カラースキームなども生成。CSSや、テキストに使用した際のデモなども。 ColorHexa
iPhone/iPad用のPhotoshop用テンプレート・「Photoshop Grids」
Photoshop Grids Photoshop Gridsは、iPad/iPhone用のグリッドとして作られたPhotoshop用テンプレート。ガイドも既に引かれており、モバイルファーストなWeb制作向けとして使えるようになってい...
Fireworksライクなモックアップ作成ツール・「Stylo」
Stylo StyloはFireworksっぽいUIのモックアップ作成Webツール。現在はCWebkitのみ対応。Githubでもソースが公開されています。 Stylo On github