PNGやEPS形式のワイヤーフレーム作成用キット・「WIRED」 WIRED WIREDはワイヤーフレームを作成するためのメディアファイルキットです。Webサイトでよく利用される様々なコンポーネントの素材がパッケージングされています。また、iPhone5用の素材もあるみたいです。 WIRED2013.04.26 | 10時26分31秒
Webページのベースラインをチェック出来るブックマークレット・「Gridwax」 Gridwax GridwaxはWebページのベースラインをチェック出来るブックマークレットです。起動させると、ラインが表示されます。グリッドの高さはshift+↑や↓で、位置はshift+→や←で調整できます。グリッドの色は起動後に...2013.04.23 | 10時42分48秒
ドラッグ&ドロップでBootstrapのレイアウトを作成出来る・「LayoutIt!」 LayoutIt! LayoutIt!hは、D&DでBootstrapのレイアウトを作成出来るWebツールです。まだベータ版で若干バグ的なものも確認出来ますが、それなりに作成出来るようです。フォームやボタン、プログレスバーなどのコンポ...2013.04.20 | 10時53分23秒
国産のダミー画像生成サービス・「Placehold.jp」 Placehold.jp Placehold.jpは国産のダミー画像生成ツールです。画像サイズや任意のテキスト、背景やテキストカラーの変更や、JSONを使ったCSSによるカスタマイズなども可能です。 Placehold.jp2013.04.16 | 12時24分09秒
ダミー画像を手軽に作成する・「PlaceIMG」 PlaceIMG PlaceIMGはダミー画像生成サービスです。マウスでスライダーを動かしてサイズを決めたり、数値でサイズを指定、ダミー画像のカテゴリの指定、フィルターでセピアやモノクロ化なども出来ます。 PlaceIMG2013.04.13 | 10時10分49秒
CSSを書いてリアルタイムでプレビューできる・「CSSDesk」 CSSDesk CSSDeskはその場でCSSを書くと、すぐに結果が反映されるインタラクティブなWebツールです。背景の変更や書いたコードをHTMLでダウンロードする事も可能。 CSSDesk2013.04.12 | 12時37分00秒
任意のWebサイトの使用カラーを抽出する・「ColrGrabr」 ColrGrabr ColrGrabrは、任意のWebサイトで使用されているカラーを抽出するツール。使う機会は少なそうだけど、時には便利な事もあるかも。ブックマークレットも用意されています。 ColrGrabr2013.04.10 | 9時54分07秒
CSS3のコードスニペットと動作デモを紹介する・「CSSFlow」 CSSFlow CSS3を使ったエレメント等をデモと共に紹介するWebサイト。上2つは有料みたいですが下のは無料で利用出来るみたいです。スマフォサイトなんかと相性良さそうなエレメントが目立ちますね。 CSSFlow2013.04.09 | 11時39分01秒
PNGやPSDファイルとしてエクスポートできるグリッド生成ツール・「Modular Grid Pattern」 Modular Grid Pattern Modular Grid PatternはPNGやPSD形式でエクスポートできるグリッド生成ツールです。幅やカラム数を指定してダウンロードするだけ。PhotoShopのエクステンションもあるみ...2013.03.31 | 11時42分05秒
猫の画像をダミー画像として使える・「{placekitten}」 {placekitten} {placekitten}は猫の画像をダミー画像として利用出来るツールです。URLでサイズやモノクロ指定をするだけでダミー画像が表示されます。 {placekitten}2013.03.23 | 12時00分47秒
Sass用のカラー調整Webツール・「SassMe」 SassMe SassMeはリアルタイムでSass用のカラー調整を行えるWebツールです。カラー関数のサブセットを視覚化してくれる、というシンプルなもの。使い方はベースカラーを入力してスライダーをマウスで操作するだけ。Githubでも...2013.03.21 | 10時40分58秒
デバイス画像のモニターにサイトを表示させてレスポンシブ対応状態を確認する・「Am I Responsive?」 Am I Responsive? Am I Responsive?は、レスポンシブWebデザイン対応かどうかを確認するチェックツールです。デバイス画像のモニター部分はフレームの為、URLを指定すると上図のデバイス画像内に実際にサイトが...2013.03.17 | 19時32分46秒
動作も軽く使いやすいモックアップ作成ツール・「Moqups」 Moqups Moqupsは動作も軽く、直感で使えるモックアップ作成ツールです。ドラッグ&ドロップで楽に操作することが出来て、基本的な機能も全て揃っています。ただし、画像をアップロードするにはユーザー登録が必要となります。 Mo...2013.03.11 | 10時59分14秒
Illustratorのデータをcanvasに変換する・「Ai to Canvas」 Ai to Canvas Ai to Canvasは、AIファイルをHTML5のcanvasに変換するプラグイン。アニメーションにも対応しているようです。現状は完全な物ではなさそうですが、今後も期待できそうな出来ですね。 Ai ...2013.03.02 | 9時55分28秒
レスポンシブWebデザイン対応確認用ブックマークレット・「VIEWPORT RESIZER」 VIEWPORT RESIZER VIEWPORT RESIZERは、閲覧中のWebサイトをリサイズしてレスポンシブWebデザイン対応状態を表示確認するブックマークレットです。PCと、タブレットやスマフォサイズに対応。 VIEW...2013.02.26 | 16時56分02秒
レスポンシブWebデザインのレイアウトチェックツール・「The Responsinator」 The Responsinator The Responsinatorは、レスポンシブWebデザインの表示テストを行えるツールです。縦長になってしまうのですが、まとめて表示確認出来るのは便利だと思います。 The Respons...2013.02.21 | 22時14分17秒
画面サイズごとの表示を確認出来る・「Screenqueri.es」 Screenqueri.es Screenqueri.esはレスポンシブWebデザインの表示確認ツール。iPhone、iPadやAndroidのような人気デバイスに限らず、GalaxyやBlackBerry、Kindleなど様々なデバ...2013.02.21 | 19時57分04秒
色を指定したら、その色に関連した色合いを抽出してくれる・「colllor」 colllor colllorは色のコードを指定する事で、その色と相性の良い色、トーンなどを抽出してくれるカラーツールです。 colllor2013.02.21 | 19時37分51秒
ダミー画像を簡単に生成出来る・「placebox.es」 placebox.es placebox.esはURLからダミー画像を生成出来るWebツール。サイズや色を指定すれば、その設定に見合ったダミー画像が表示される。 placebox.es2013.02.20 | 21時37分00秒
iPhoneのモックアップを作成・「iPhone Mockup」 iPhone Mockup iPhone MockupはオンラインでiPhone向けサイトやアプリのモックアップを作成できるツール。手書き風、イラスト風のスタイルを選択できます。多機能では有りませんが、サクッと作りたいときは便利です。...2013.02.20 | 16時38分25秒
色に関する様々な情報を提示してくれる・「ColorHexa」 ColorHexa ColorHexaは色に関する様々な情報を教えてくれるWebツール。指定した色と相性の良い色やRGB、CMYKから、カラースキームなども生成。CSSや、テキストに使用した際のデモなども。 ColorHexa2013.02.20 | 12時29分30秒
iPhone/iPad用のPhotoshop用テンプレート・「Photoshop Grids」 Photoshop Grids Photoshop Gridsは、iPad/iPhone用のグリッドとして作られたPhotoshop用テンプレート。ガイドも既に引かれており、モバイルファーストなWeb制作向けとして使えるようになってい...2013.02.20 | 2時02分06秒