フリーでオープンソースなフォントのプロジェクトサイト・「The League of Moveable Type」
The League of Moveable Type The League of Moveable Typeはオープンソースなフォントのプロジェクトサイトです。Webフォントにも利用出来るみたい。英字のみになります。フォントのライセ...
Resource - Archives
jQueryのプラグインを大量に収集している・「Unheap」
Unheap UnheapはjQueryのプラグインを大量の収集、紹介しているWebサイトです。かなり細かくカテゴライズされているので探しやすい印象でした。社内向けに作ったリソースサイトらしいです。 Unheap
PhotoshopをWebデザインで使う際のファイルの扱い方をまとめる・「The Photoshop Etiquette Manifesto」
The Photoshop Etiquette Manifesto The Photoshop Etiquette ManifestoはWebデザインをする上での、Photoshopのファイルの扱い方のエチケットをまとめているサイトで...
Webページのベースラインをチェック出来るブックマークレット・「Gridwax」
Gridwax GridwaxはWebページのベースラインをチェック出来るブックマークレットです。起動させると、ラインが表示されます。グリッドの高さはshift+↑や↓で、位置はshift+→や←で調整できます。グリッドの色は起動後に...
ドラッグ&ドロップでBootstrapのレイアウトを作成出来る・「LayoutIt!」
LayoutIt! LayoutIt!hは、D&DでBootstrapのレイアウトを作成出来るWebツールです。まだベータ版で若干バグ的なものも確認出来ますが、それなりに作成出来るようです。フォームやボタン、プログレスバーなどのコンポ...
CSSのショートハンドを解除してから整形する・「FESS」
FESS FESSはCSSのショートハンドを解除して整形するWebツール。解除する機会は一般的にはあまり無いかも知れない&まだベータ版なので優れた精度では無いけど、珍しいので。精度に関しては、例えば background:red u...
正規表現をブラウザ上で実行テスト・「refiddle」
refiddle refiddleはWeb上で正規表現をテストできるツールです。jsfiddleライクに正規表現を試すことが出来ます。上にコード、下にテキストを書いて、マッチした部分がハイライトされる仕組み。 refiddle
素敵なデザインのランディングページをまとめたギャラリー・「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フレームワークの機能が一目で分かる一覧表・「CSS Front-end Frameworks with comparison」
CSS Front-end Frameworks with comparison CSS Front-end Frameworks with comparisonは様々なCSSフレームワークの持ち合わせている機能を一目で確認出来る一覧...
CSSを書いてリアルタイムでプレビューできる・「CSSDesk」
CSSDesk CSSDeskはその場でCSSを書くと、すぐに結果が反映されるインタラクティブなWebツールです。背景の変更や書いたコードをHTMLでダウンロードする事も可能。 CSSDesk
iPhone, や、iPad、MacのアプリサイトのWebデザインギャラリー ・「App Sites」
App Sites App SitesはiPhoneやiPad、Macのアプリを紹介しているWebサイトのデザインギャラリーです。アプリデベロッパーの方のインスピレーション向上になりそう。Tumblrで作られています。 App ...
Web制作に役立つツールをまとめている・「WebPlatformTools.org」
WebPlatformTools.org WebPlatformTools.orgはWeb制作に役立ちそうな様々なツールをまとめているWebサイトです。カテゴリ分けもしっかりされていてサムネイルもあるので探しやすいかも。 Web...
任意のWebサイトの使用カラーを抽出する・「ColrGrabr」
ColrGrabr ColrGrabrは、任意のWebサイトで使用されているカラーを抽出するツール。使う機会は少なそうだけど、時には便利な事もあるかも。ブックマークレットも用意されています。 ColrGrabr
CSS3のコードスニペットと動作デモを紹介する・「CSSFlow」
CSSFlow CSS3を使ったエレメント等をデモと共に紹介するWebサイト。上2つは有料みたいですが下のは無料で利用出来るみたいです。スマフォサイトなんかと相性良さそうなエレメントが目立ちますね。 CSSFlow
CSSによる三角形をジェネレートできる・「CSS triangle generator」
CSS triangle generator CSSで三角形を簡単に作成出来るツールです。オールドブラウザのシェアもかなり低下していて良い傾向ですけど、まだ対応する必要があるケースもあるので覚えておくと便利かもしれない。 C...
ソースコードを画像化してInstagramライクに装飾できる・「Instacode」
Instacode Instacodeはソースコードを画像化してInstagramライクに装飾できるWebサービスです。マウスホイールで拡大、ドラッグで角度を設定できます。ネタ要素が強いツールですが、一部の方には需要があるかも。 ...
デバイスに応じたMedia Queriesのコードをコピペ出来るスニペット一覧表・「Media Query Snippets」
Media Query Snippets Media Query Snippetsは、任意のデバイスに対応する為のMedia Queriesのコードを一覧にしてコピペ出来るようにまとめているWebサイトです。チートシート的に使えて良さ...
テキストの差分をチェックするだけのシンプルツール・「Diff Checker」
Diff Checker Diff Checkerはテキストの差分をチェックするだけのシンプルなツールです。左と右のフィールド内のテキストの差分をハイライトします。軽量で地味に便利かもしれません。が、日本語対応はあまり期待できません。...