Resource - Webディレクター向け

WordPressのプラグインで上位ダウンロード数TOP108を元素記号のように一覧化したWebサイト・「The Periodic Table of WordPress Plugins」

The Periodic Table of WordPress Plugins The Periodic Table of WordPress Pluginsは最もダウンロードされているWordPressプラグインを108個、一覧化し...

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

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

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

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

CSSのショートハンドを解除してから整形する・「FESS」

FESS FESSはCSSのショートハンドを解除して整形するWebツール。解除する機会は一般的にはあまり無いかも知れない&まだベータ版なので優れた精度では無いけど、珍しいので。精度に関しては、例えば background:red u...

素敵なデザインのランディングページをまとめたギャラリー・「Land-book」

Land-book Land-bookは素敵なデザインのランディングページを収集しているギャラリーサイトです。海外のなので参考になるかどうかは別の話ですが、覚えておいて損は無いかと思います。 Land-book

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

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

PDFファイルを画像やWord、Excel等にコンバートしたり24時間ホスティングしてくれる・「Cometdocs」

Cometdocs CometdocsはPDFファイルを様々な形式にコンバートしたり、時間限定でホスティングしたり、特定の誰かにメールを送ったり出来るPDF管理サービス。変換できるファイル形式はWordやExcelは勿論、GIFやPN...

Webサイトのスクリーンショットを撮って注釈をつけて共有できる・「Bounce」

Bounce BounceはWebサイトのスクショを撮って、任意の箇所に注釈をつけてシェア出来るツールです。Web上の相手に的確に場所を伝えるのに便利そうですね。 Bounce

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

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

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

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

Web制作に役立つツールをまとめている・「WebPlatformTools.org」

WebPlatformTools.org WebPlatformTools.orgはWeb制作に役立ちそうな様々なツールをまとめているWebサイトです。カテゴリ分けもしっかりされていてサムネイルもあるので探しやすいかも。 Web...

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

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

テキストの差分をチェックするだけのシンプルツール・「Diff Checker」

Diff Checker Diff Checkerはテキストの差分をチェックするだけのシンプルなツールです。左と右のフィールド内のテキストの差分をハイライトします。軽量で地味に便利かもしれません。が、日本語対応はあまり期待できません。...

Webページの任意の箇所をハイライトして共有できる・「inFocus.cc」

inFocus.cc inFocus.ccは特定のWebページの任意の箇所をハイライトさせて共有できるWebツールです。画像として保存されるものではなく、マウスで設定して保存するとURLが発行される、というもの。特定の箇所をシンプルに...

オンラインでシンプルなダイアグラムを生成出来る・「Graphity Diagram Editor」

Graphity Diagram Editor Graphity Diagram Editorはオンラインでシンプルなダイアグラムを生成できるWebツールです。マウスで直感的に作成、画像にエクスポートすることも出来ます。また、作成途中...

CSS3を使ったエレメントを簡単に作成出来るChrome拡張・「CSS-SHACK」

CSS-SHACK CSS-SHACKはChromeでCSS3を使ったエレメントを作成できるアプリケーションです。右のツールボックスで装飾するとリアルタイムで反映、そのままソースをエクスポートできるようになっています。レイヤー機能も付...

一度だけダウンロードできるファイル転送サービス・「JustBeamIt」

JustBeamIt JustBeamItは一度だけダウンロードできるファイル転送サービスです。ファイルをドラッグ&ドロップするとアップロードされ、URLが発行されるので送りたい相手にそのURLを知らせる、というシンプルなもの。ファイ...

猫の画像をダミー画像として使える・「{placekitten}」

{placekitten} {placekitten}は猫の画像をダミー画像として利用出来るツールです。URLでサイズやモノクロ指定をするだけでダミー画像が表示されます。 {placekitten}

デバイス画像のモニターにサイトを表示させてレスポンシブ対応状態を確認する・「Am I Responsive?」

Am I Responsive? Am I Responsive?は、レスポンシブWebデザイン対応かどうかを確認するチェックツールです。デバイス画像のモニター部分はフレームの為、URLを指定すると上図のデバイス画像内に実際にサイトが...

動作も軽く使いやすいモックアップ作成ツール・「Moqups」

Moqups Moqupsは動作も軽く、直感で使えるモックアップ作成ツールです。ドラッグ&ドロップで楽に操作することが出来て、基本的な機能も全て揃っています。ただし、画像をアップロードするにはユーザー登録が必要となります。 Mo...

オン/オフの切り替えスイッチをスタイル・「On/Off Flipswitch HTML5/CSS3 Generator」

On/Off Flipswitch HTML5/CSS3 Generator On/Off Flipswitch HTML5/CSS3 Generatorは、オン/オフの切り替えスイッチをスタイルできるジェネレーターです。スマフォライ...

オンラインでjQuery UIのデザインを作成・「jQUIT」

jQUIT jQUITはjQuery UIのデザインをオンラインで作成出来るツールです。アコーディオンやタブ、ボタン等のスタイルを簡単に設定できます。 jQUIT
Ads