猫の画像をダミー画像として使える・「{placekitten}」
{placekitten} {placekitten}は猫の画像をダミー画像として利用出来るツールです。URLでサイズやモノクロ指定をするだけでダミー画像が表示されます。 {placekitten}
Resource - Webデザイナー向け
Sass用のカラー調整Webツール・「SassMe」
SassMe SassMeはリアルタイムでSass用のカラー調整を行えるWebツールです。カラー関数のサブセットを視覚化してくれる、というシンプルなもの。使い方はベースカラーを入力してスライダーをマウスで操作するだけ。Githubでも...
デバイス画像のモニターにサイトを表示させてレスポンシブ対応状態を確認する・「Am I Responsive?」
Am I Responsive? Am I Responsive?は、レスポンシブWebデザイン対応かどうかを確認するチェックツールです。デバイス画像のモニター部分はフレームの為、URLを指定すると上図のデバイス画像内に実際にサイトが...
モバイルファーストなCSSフレームワーク・「Blok Grid System」
Blok Grid System Blok Grid SystemはモバイルファーストなレスポンシブWebデザイン対応のCSSフレームワークです。スマフォ、タブレットを中心に考えたCSSで構築されています。IE8にも対応。 Bl...
CSSタイポグラフィの使用例をコレクションしている・「Typespiration」
Typespiration TypespirationはWebフォントとCSSによるタイポグラフィをコレクションしているギャラリーサイトです。CSSコード、カラースキーム、利用したフォントと使用例を紹介しています。 Typesp...
動作も軽く使いやすいモックアップ作成ツール・「Moqups」
Moqups Moqupsは動作も軽く、直感で使えるモックアップ作成ツールです。ドラッグ&ドロップで楽に操作することが出来て、基本的な機能も全て揃っています。ただし、画像をアップロードするにはユーザー登録が必要となります。 Mo...
レスポンシブ且つグリッドなレイアウト生成ジェネレーター・「gridpak」
gridpak gridpakは、レスポンシブWebデザインに対応したグリッドレイアウトジェネレーターです。従来のグリッドジェネレーターにブレークポイントを設定出来る項目が付いているので操作も楽に行えます。 gridpak
面倒な作業のみをカバーしたシンプルなCSSフレームワーク・「inuit.css」
inuit.css inuit.cssは、面倒な作業のみをカバーしたシンプルなSassベースのCSSフレームワークです。コアと別用途向けのCSSを分けてあるため、例えばグリッドレイアウトにする場合は別途用意されたCSSを使うようにしま...
PhotoshopのレイヤースタイルをCSS3に変換する・「CSS3Ps」
CSS3Ps CSS3Psは、PhotoshopのレイヤースタイルをCSS3に変換するプラグインです。Sassにも対応しています。 CSS3Ps
4つのCSSツールを1つのサイトに集約した・「CSSmatic」
CSSmatic CSSmaticは、4つのCSSツールを集約したツールサイトです。グラデーション、角丸、ノイズテクスチャ、ドロップシャドウを作成出来ます。 CSSmatic
レスポンシブWebデザインのレイアウトチェックツール・「The Responsinator」
The Responsinator The Responsinatorは、レスポンシブWebデザインの表示テストを行えるツールです。縦長になってしまうのですが、まとめて表示確認出来るのは便利だと思います。 The Respons...
レスポンシブWebデザイン対応のテンプレ生成ジェネレーター・「Responsify」
Responsify Responsifyは、レスポンシブWebデザインに対応したWebサイトのテンプレートを作成出来るジェネレーターです。グリッドのカラム数やブレークポイントなどを指定してからダウンロードします。 Respon...
画像をDataURIスキームに変換する・「Data URI Generator」
Data URI Generator Data URI Generatorは画像をアップロードすると、同じ画像をDataURI形式で出してくれるジェネレーターです。尚、画像の大きさには制限があります。 Data URI Gene...
画面サイズごとの表示を確認出来る・「Screenqueri.es」
Screenqueri.es Screenqueri.esはレスポンシブWebデザインの表示確認ツール。iPhone、iPadやAndroidのような人気デバイスに限らず、GalaxyやBlackBerry、Kindleなど様々なデバ...
色を指定したら、その色に関連した色合いを抽出してくれる・「colllor」
colllor colllorは色のコードを指定する事で、その色と相性の良い色、トーンなどを抽出してくれるカラーツールです。 colllor
様々なWebサイトのワイヤーフレームを紹介する・「Wireframe Showcase」
Wireframe Showcase Wireframe Showcaseは様々なWebサイトのワイヤーフレームを紹介するギャラリーサイト。実際に公開されているサイトとそのワイヤーフレームをギャラリーとして紹介しています。 Wi...
ドラッグ&ドロップでGIFアニメをオンライン生成・「Mothereffinanimatedgif」
Mothereffinanimatedgif Mothereffinanimatedgifはドラッグ&ドロップでアニメーションgifを作成出来るジェネレーター。中央にgifアニメに使いたい画像をドロップしていけばアニメーションgifが...
HTML5のテンプレートを作るスタータージェネレーター・「Initializr」
Initializr InitializrはHTML5で作るWebサイトを構築するためのスターターキットをジェネレートするツールです。様々なオプションもあるので好みの雛形を作成する事が可能です。 Initializr
オンラインでクロスブラウザテスト・「browserling」
browserling browserlingはクロスブラウザのテストを行えるツールです。バージョン別の様々なブラウザでの表示を確認できます。 browserling
Android専門のアプリUIギャラリー・「Android App Patterns」
Android App Patterns Android App PatternsはAndroidに特化したアプリのUIパターンデザインギャラリー。ユーザーに人気のアプリのUIを表示確認する事が出来ます。 Android App...
ダミー画像を簡単に生成出来る・「placebox.es」
placebox.es placebox.esはURLからダミー画像を生成出来るWebツール。サイズや色を指定すれば、その設定に見合ったダミー画像が表示される。 placebox.es
iOS向けの様々なフレームワークをまとめた・「iOS Frameworks」
iOS Frameworks iOS FrameworksはiOS向けのアプリやWebサイトなどを制作するためのフレームワークをまとめたWebサイト。ゲームエンジンやUIフレームワークなどコレクションされたフレームワークの種類は様々で...