UIアニメーションの動きをgifアニメでTumblrに収集している・「UI Animations」
UI Animations UI AnimationsはUIアニメーションをGifアニメにしてTumblrで収集しているサイトです。実際に触って体感することも大事ですが、こうして見るだけでも参考になりそうですね。まだ数は少ないですが、...
Resource - Webディレクター向け
Webフォントを使ったWebデザインのギャラリー・「WebfontsCorner 」
WebfontsCorner WebfontsCornerはWebフォントを使っているWebデザインをギャラリーにしているコレクションサイトです。まだ数は少ないですが、シンプルで見やすい印象ですので覚えておいて損は無さそうです。 ...
YoutubeやVimeo、Googleマップ等をレスポンシブWebデザインに対応させる為のツール・「Embed Responsively」
Embed Responsively Embed ResponsivelyはYoutubeやVimeo、Googleマップ等の埋め込み可能なサービスのコンテンツをレスポンシブWebデザインに対応させるツールです。指示に従って入力すると...
Google Web Fontのフォントの差分を確認出来る・「Tiff」
Tiff TiffはGoogle Web Fontでホスティングされているフォントを2つ指定して差分を確認出来るツールです。フォント名を入力し、任意のテキストを入力すれば文字同士が重なって表示されます。表示された文字はクリック...
フラットなWebサイトを構築する為のフロントエンドフレームワーク・「Furatto」
Furatto FurattoはフラットなWebデザインのサイトを迅速に構築する為のフロントエンドフレームワークです。Sassを使ってるみたい。ボタンやフォーム、テーブルからページネーションやツールチップなどのコンポーネント、カルーセ...
HTML5製のオンラインモックアップツール・「mocknow」
mocknow mocknowは、HTML5で作られたオンラインモックアップツール。出来る事はシンプルですけど、最低限の事は出来るみたい。サイズの変更がちょっと分かりにくいんですけど右下で変更できます。こちらを選択するかどうかは置...
CSSで装飾されたチェックボックスのコードをダウンロード出来る・「CSS Checkbox」
CSS Checkbox CSS CheckboxはCSSで装飾されたチェックボックスのソースコードをダウンロードできるサービスです。Checkbox CSS Styleで装飾の種類を選択してソースをコピペするだけ。ラベルの背景の画像...
WordPressのウィジェットやタクソノミー、ショートコード等を手軽に作成出来る・「Generate WP」
Generate WP Generate WPはウィジェットやタクソノミー、ショートコード等を手軽にオンライン上で作成出来るジェネレーターです。地味に面倒な雛形部分のコードを提供してくれます。カスタマイズ前の雛形としても使えそうです。...
要素をレンガ状に並べるライブラリ・「MASON.JS」
MASON.JS MASON.JSは要素をレンガ状に隙間なく並べてくれるライブラリです。jQueryに依存しています。余白を完全に埋める、という目的で作ったみたいですね。圧縮版で4KBほどなのも嬉しいです。 MASON.JS
HTML5やCSS、jQueryなどのAPIのドキュメントサイト・「DevDocs」
DevDocs DevDocsはHTML5やCSS、jQueryなどのAPIに関する情報をまとめたサイトです。かなりの情報量で綺麗に纏められているのでとても探しやすい印象でした。キーワードを入力するだけで即時に候補を抽出するインスタン...
ソーシャルコーディングが可能なオンラインIDE・「FriendCode」
FriendCode FriendCodeはブラウザで他のユーザーと共有しながら使えるオンラインのIDEです。プライベートなリポジトリも持てるみたい。アカウントはFacebookやGithubでログイン出来ます。他にもいろいろ。結構高...
SASS/Compassで構築されたCSSボタンライブラリ・「Buttons」
Buttons ButtonsはSASS/Compassで構築されたCSSボタンのプロジェクトです。classを振るだけで様々なボタンに装飾する事が出来る様になっています。Font Awesomeを使ってアイコンを加えたりCSS3でぼ...
FFFFOUND!からダミー画像を生成・「hhhhold!」
hhhhold! hhhhold!は、画像共有サイト、FFFFOUND!に上げられた画像をダミー画像にできるサービスです。サイズは固定サイズや任意のサイズで指定可能のようです。色合いも指定出来るみたいですね。 hhhhold!
CSSライブラリをコレクションしている・「CSSDB.co」
CSSDB.co CSSDB.coはCSSライブラリをコレクションしているWebサイトです。似たようなサイトを紹介した気もしますが・・割と評価の高めなライブラリに絞ってるっぽいですね。Githubへのリンクもあります。 CSSD...
軽量なJavaScriptライブラリをコレクションした・「microjs」
microjs microjsは軽量なJSライブラリだけをコレクションしているWebサイトです。5KB以内のスクリプトだけを纏めているようですね。簡単に特徴も書かれています。かなりの数ですが検索も出来るのでそこそこ探しやすのでは無いか...
カラーパレットを共有できる・「PLTTS」
PLTTS PLTTSはカラーパレットを共有出来るWebサービスです。カラーコードで検索すると、そのカラーが含まれるパレットを調べられるので参考にしたりインスピレーションの向上にもなるかもしれません。まだ数は多くないですが、シェアサー...
カウントダウンをGIFアニメで作成出来る・「Gif Countdown」
Gif Countdown Gif CountdownはよくあるカウントダウンタイマーをGIFで作れるWebツールです。需要はともかく技術が面白かったです。色の変更やタイムゾーンの指定も可能ですが、含まれるテキストは今の所、固定のよう...
BootstrapなどのフレームワークもサポートのWin/Mac対応オーサリングソフトウェア・「Pingendo」
Pingendo 各種フレームワークがビルトインされたオーサリングツール・Pingendoです。日本語も問題なし。Windows版とMac版が用意されています。使ってみた感じ、割と使いやすい印象でした。今だけかもしれませんが無料で利用...
Webサイトのサイトマップを作る為のCSS・「SlickMap CSS」
SlickMap CSS SlickMap CSSは、サイトマップを作る為のCSSです（sitemap.xmlではなく、人用のサイトマップ）。上図のように、階層を分かりやすく可視化し、ユーザーに取って分かりやすいナビゲーションを作成す...
レスポンシブWebデザイン用のモックアップを作成できる・「FROONT」
FROONT FROONTは、ブラウザでレスポンシブWebデザインに対応したWebサイトのモックアップを作成出来るサービス。ドラッグ&ドロップを基本操作としているので手軽に作成できそう。利用にはユーザー登録が必要です。 FROO...
レスポンシブWebデザイン対応のHTML5 / CSS3テンプレートを配布する・「HTML5 Up!」
HTML5 Up! HTML5 Up!は様々なHTML5 / CSS3なテンプレを配布するWebサイトです。全てレスポンシブWebデザインに対応しています。現在12~13個ほどあり、素敵なデザインに仕上がっています。ライセンスはCC-...
手軽にHTML形式のプレゼンテーションを作成できる・「Slid.es」
Slid.es Slid.esは、HTML形式のプレゼンテーションスライドを手軽に作成、共有出来るWebサービスです。モバイルにも対応しています。WYSIWYGを使ってスライドを作成していきます。アカウントはGoogleやFacebo...