使い易さを重視したOSSのCSS/HTMLフレームワーク・「WEBPLATE」
WEBPLATE WEBPLATEは使い易さを重視したフロントエンドのフレームワークです。RWDやSASSにも対応しています。使いやすい、というのは本フレームワークの開発者さんの言葉を借りましたが、使いやすいかどうかは個人差もあると思...
Resource - Webディレクター向け
クライアントに伝わるように、という事を目指したワイヤーフレーム用UIキット・「C.ROWE Wireframe Kit」
C.ROWE Wireframe Kit C.ROWE Wireframe Kitは、クライアントにしっかり意図が伝わるように、という事を考えて作られたワイヤーフレームのUIキットです。線でかかれたダミー画像を使うのではなく、例えばマ...
レスポンシブWebデザイン対応のシンプルなHTMLメールのフレームワーク・「CERBERUS」
CERBERUS CERBERUSはRWD対応のシンプルなHTMLメールのフレームワークです。GmailやYahoo!メールからOutlookやThunderbird、iOSやAndroidのメールに対応可能です。レイアウトのみで装飾...
ブラウザ上で動作するHTML5製のアニメーションエディタ・「Animatron」
Animatron Animatronはブラウザ上で動作するHTML5製のアニメーションエディタです。描画ツールやSVG、動画や音声のインポート等が可能となっています。アニメーションはタイムラインで調整しながら作成する、というもの。H...
ブラウザで作成出来る、HTML5製のフォントエディタ・「Glyphr」
Glyphr GlyphrはHTML5製のフォントエディタです。ブラウザ上でオリジナルのフォントをデザインする事が可能です。軽量でUIも割と使いやすい印象でした。また、Githubでもソースコードが公開されています・・・が、ライセンス...
jsFiddleのようにブラウザでJavaScriptを書いて動作を確認出来るOSS・「tmpltr」
tmpltr tmpltrはOSSで公開されているjsFiddleライクな開発ツールです。ブラウザ上でJavaScriptを開発、実行テストができます。完全なクローンではありませんが、JavaScriptとHTMLで作られている為、軽...
人物の顔のダミー画像生成ツール・「ui Faces」
ui Faces ui FacesはUI設計に使える人物の顔のダミー画像生成ツールです。サイズや間隔の変更、角丸化などが出来る様になっています。許可等が気になったのですが、モックアップ等に使用してもいい、という方が自分でアップロードし...
GitHub製のテキストエディタ・「Atom」
Atom AtomはGithub製のテキストエディタです。CSS、JavaScript、HTML向けのもののようですね。スクリーンショットや詳細を読む限りではなかなか良さそうです。TextMateのテーマ等をインポートする事もできるみ...
Bootstrap 3のベクターデータUIキット・「Bootstrap 3 UI Kit」
Bootstrap 3 UI Kit Bootstrap 3 UI KitはBootstrap 3のUIキットです。ベクターデータで配布されています。コンポーネントやアイコン、テーブル等が揃っています。サンプル画像もありますのでチェッ...
CSS3のkeyframesを容易に設定出来る・「CSS3 Keyframes Animation Generator」
CSS3 Keyframes Animation Generator CSS3 Keyframes Animation GeneratorはCSS3のkeyframesを容易に設定出来るツールです。数値を各項目に設定するだけでコードを...
Chromeのブックマークをスクリーンショット付きにし、ソートしたり検索出来るエクステンション・「DEWEY」
DEWEY DEWEYはChromeに保存したブックマークをSS付きで検索出来るようにするエクステンションです。スクリーンショットはセッティングからShow thumbnailsにチェックを入れれば表示されます。僕もブラウザのブックマ...
シンプルで見やすいMarkdownエディタ・「writebin」
writebin writebinはとってもシンプルなMarkdownエディタです。余計な機能がありませんので、とても見やすく、Githubにも送る事ができます。Readmeやライセンスなどのドキュメントを書くのに良さそうですね。 ...
jQueryのカスタムビルドを作成出来るツール・「jQuery Builder」
jQuery Builder jQuery Builderはコアのカスタムビルドを作成する為のツールです。バージョンや圧縮の可否、追加するモジュールを選ぶ事が可能で、ファイルサイズも表示してくれます。また、本ツールはMITライセンスの...
SVGで描いた地図をクリッカブルマップにする為のスクリプト・「twism」
twism twismはSVGで描いた地図をクリッカブルマップにする為のjQueryのスクリプトです。予め描かれたSVGマップを色付けしたり、マウスホバーによる色の変更等を容易に行えるようにする為のものみたいですね。応用すれば日本地図...
UIとインタラクションデザインのパターンをGifアニメで紹介する・「useyourinterface.com」
useyourinterface.com useyourinterface.comはUIやインタラクションデザインのパターンをGifアニメで紹介してくれているTumblrのサイトです。それぞれGifアニメーションで動きを確認する事が出...
JSONデータからtableを作成するためのスクリプト・「DYNATABLE」
DYNATABLE DYNATABLEはJSONデータからtableを生成するjQueryプラグインです。目的はシンプルですが、仕様を見る限りでは結構高性能のようですね。同じようなスクリプトは既にありますが、JSONデータのテーブル化...
Webデザインのリソースサイトへのリンクを大量に収集している・「webdesignrepo」
webdesignrepo webdesignrepoはWebデザインに関するリソースサイトのリンク集です。ニュースサイトやインスピレーション、チュートリアルやスニペットなどなど目的に合わせて細かくカテゴリ分けされているので目的に合わ...
Android向けのUIキット・「Android FlatUI」
Android FlatUI Android FlatUIは、Android向けに作られたフラットなデザインのUIキットです。カラーテーマも12種ほど用意されています。フラットなUIはスマフォのように幅の狭い画面では見やすい印象ですね...
Font Awesomeのアイコンフォントにアニメーションエフェクトを加える為のCSS・「Font Awesome Animation」
Font Awesome Animation Font Awesome AnimationはFont Awesomeのアイコンフォントにアニメーションエフェクトを加える為のCSSです。CSSを読み込んで指定されたclassを加えればア...
オープンソースで公開されているベクターグラフィックエディタWebアプリ・「Mondrian」
Mondrian MondrianはOSSとしても公開されているシンプルなベクターグラフィックエディタです。SVGもインポート/エクスポートに対応しています。操作も割と楽な印象でした。ライセンスはMITとなっています。 Mondri...
背景に使えるパターン画像を収集、配布する・「The Pattern Library」
The Pattern Library The Pattern Libraryは背景に使えるシームレスなパターン画像を収集、配布しているプロジェクトサイトです。まだ始まったばかりのようなので数は多くありません。あまり見ないタイプのパタ...
描いたものがアスキーアートになるドローツール・「Asciiflow」
Asciiflow Asciiflowは、アスキーアート化されるドローツールです。マウスのみで作成できます。ボックスや矢印等のエレメントも用意されていますのでダイアグラム作成にも使える・・・かもしれません。便利かどうかはさておき、面白...