Resource - Webデザイン補助

PNGやEPS形式のワイヤーフレーム作成用キット・「WIRED」

WIRED WIREDはワイヤーフレームを作成するためのメディアファイルキットです。Webサイトでよく利用される様々なコンポーネントの素材がパッケージングされています。また、iPhone5用の素材もあるみたいです。 WIRED

Webページのベースラインをチェック出来るブックマークレット・「Gridwax」

Gridwax GridwaxはWebページのベースラインをチェック出来るブックマークレットです。起動させると、ラインが表示されます。グリッドの高さはshift+↑や↓で、位置はshift+→や←で調整できます。グリッドの色は起動後に...

ドラッグ&ドロップでBootstrapのレイアウトを作成出来る・「LayoutIt!」

LayoutIt! LayoutIt!hは、D&DでBootstrapのレイアウトを作成出来るWebツールです。まだベータ版で若干バグ的なものも確認出来ますが、それなりに作成出来るようです。フォームやボタン、プログレスバーなどのコンポ...
Ads

国産のダミー画像生成サービス・「Placehold.jp」

Placehold.jp Placehold.jpは国産のダミー画像生成ツールです。画像サイズや任意のテキスト、背景やテキストカラーの変更や、JSONを使ったCSSによるカスタマイズなども可能です。 Placehold.jp

ダミー画像を手軽に作成する・「PlaceIMG」

PlaceIMG PlaceIMGはダミー画像生成サービスです。マウスでスライダーを動かしてサイズを決めたり、数値でサイズを指定、ダミー画像のカテゴリの指定、フィルターでセピアやモノクロ化なども出来ます。 PlaceIMG

CSSを書いてリアルタイムでプレビューできる・「CSSDesk」

CSSDesk CSSDeskはその場でCSSを書くと、すぐに結果が反映されるインタラクティブなWebツールです。背景の変更や書いたコードをHTMLでダウンロードする事も可能。 CSSDesk

任意のWebサイトの使用カラーを抽出する・「ColrGrabr」

ColrGrabr ColrGrabrは、任意のWebサイトで使用されているカラーを抽出するツール。使う機会は少なそうだけど、時には便利な事もあるかも。ブックマークレットも用意されています。 ColrGrabr

CSS3のコードスニペットと動作デモを紹介する・「CSSFlow」

CSSFlow CSS3を使ったエレメント等をデモと共に紹介するWebサイト。上2つは有料みたいですが下のは無料で利用出来るみたいです。スマフォサイトなんかと相性良さそうなエレメントが目立ちますね。 CSSFlow

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制作向けとして使えるようになってい...
Ads