インタラクションデザインの導入例をアニメーションで確認出来るWebデザインギャラリー・「Hover States」 Hover States Hover StatesはWebサイトに導入したIxD例をアニメーションで確認出来るWebデザインギャラリーです。うまくIxDを取り入れて設計されたWebサイトをアニメーション画像で紹介しています。開発者やデ...2015.01.10 | 11時16分41秒
SVGをインラインに展開し、CSSでスタイル出来るようにするJSライブラリ・「deSVG」 deSVG deSVGはSVGをインライン展開してCSSでスタイリング出来るようにする為のJavaScriptライブラリです。<img>タグのsrc属性に挿入したsvgファイルを<svg>タグで表示出来るように...2015.01.09 | 10時46分46秒
CSS3による様々なマウスホバーアニメーションをまとめたスタイルシート・「Hover.css」 Hover.css Hover.cssはCSS3による様々なホバーアニメーションエフェクトをまとめたスタイルシートです。SASSとLESSにも対応。エレメントやアイコンなどにマウスホバーアニメーションが付けられており、classを振る...2015.01.08 | 11時00分44秒
グラデーションな三角形パターンを作成するスクリプト・「TRIAGONAL ROTICEROD」 TRIAGONAL ROTICEROD TRIAGONAL ROTICERODはグラデーションカラーな三角形パターンを作成できるスクリプトです。上図のように三角形のオブジェクトを敷き詰めてグラデーションカラーにする事が出来ます。本スク...2015.01.07 | 11時03分37秒
ミニマルなjavascriptアニメーションライブラリ・「snabbt.js」 snabbt.js snabbt.jsはミニマル設計なアニメーションJSライブラリです。手軽にアニメーションオブジェクトを作成することが出来ます。またjQueryと併用することも可能のようです。設定も簡単で良いですね。ライセンスはMI...2015.01.06 | 11時17分19秒
モバイルアプリ開発向けのHTML5製フレームワーク・「Mootor」 Mootor Mootorはモバイルアプリ開発向けに構築されたHTML5製フレームワークです。オープンソースとして公開されています。と、ご紹介はしたものの、時間が取れず、まだあまり良く見ていません。デモを触った限りでは悪く無さそうです...2015.01.05 | 10時49分40秒
Bootstrapのひな形を手軽に作成出来る・「lollytin」 lollytin lollytinはBootstrapのひな形を手軽に作成できるツールです。大まかな型をドラッグ&ドロップで作成、コードを発行してくれます。1から作るよりは1を作ってくれるツールを使う方が工数稼げる、みたいな使い方にな...2014.12.31 | 11時12分40秒
Dribbbleに投稿されたデザインをCodopenで再現、比較している・「Give ’n’ Go」 Give ’n’ Go Give ’n’ GoはDribbbleに投稿されたものとCodepenで再現されたものを比較しているWebギャラリーサイトです。デザイナーの方がDribbbleに投稿したデザインコンセプトと、そのデザインをC...2014.12.30 | 10時42分41秒
MediumのWYSIWYGエディタのクローン・「Dante Editor」 Dante Editor Dante EditorはMediumで導入されているWYSIWYGエディタのクローンです。Medium同様に、ツールバーは普段非表示で、テキストをドラッグする事でツールバーがポップアップする、というもの。勿...2014.12.29 | 10時43分50秒
オープンソースで公開されている、Google Web Fontの補助ツール・「Google Webfonts Helper」 Google Webfonts Helper Google Webfonts HelperはOSSとして公開されているGoogle Web Fontの補助ツールです。ちょっとうまく説明出来ないので変なタイトルかもですが、Google ...2014.12.28 | 10時53分51秒
Markdown記法で書けるドキュメントページ向け静的サイトジェネレーター・「MkDocs」 MkDocs MkDocsはMarkdown記法で対応のPython製静的サイトジェネレーターです。仕様書などのドキュメントページ作成に特化しているみたい。。Bootstrapベースなのでスタイルも変更しやすいですね。ライセンスはBS...2014.12.27 | 11時16分30秒
Markdown記法をテキストに変換するjQueryのスクリプト・「jQuery.Markdown.js」 jQuery.Markdown.js jQuery.Markdown.jsはMarkdown記法で書かれたコードをテキストに変換するスクリプトです。jQueryに依存しています。シンプルで使い勝手も良さそうですね。日本の方が作成、公開...2014.12.26 | 10時58分52秒
Googleスプレッドシートのデータを元にチャートや地図、table等に変換するスクリプト・「Sheetsee.js」 Sheetsee.js Sheetsee.jsはGoogleスプレッドシートに書いたデータを元に、チャートグラフや地図、table等に変換してWebサイトに埋め込めるスクリプトです。動作にはjQueryが必要みたい。基本的にはコア必須...2014.12.25 | 11時14分43秒
オープンソースの Twitter Bootstrapのテーマ作成用ライブエディタ・「Cluckles」 Cluckles ClucklesはOSSとして公開されているTwitter Bootstrap用のライブエディタです。ファイルを読み込んだり全体やコンポーネントのスタイルを変更したり、CSSのカスタマイズ等が可能で、変更後即反映され...2014.12.24 | 10時37分10秒
世界中で利用数の多いJavaScriptライブラリを検索できる・「Libscore」 Libscore Libscoreは世界で需要の高いJSライブラリやスクリプトを検索できるツールです。jQueryやModernizrがどの程度使われているかを教えてくれます。とは言え、恐らく需要の高いであろうライブラリが出てこなかっ...2014.12.23 | 11時18分05秒
フロントエンド開発のためのボイラープレート・「Front-end Boilerplate」 Front-end Boilerplate Front-end Boilerplateはフロントエンド開発をサポートするためのボイラープレートです。Web開発をより簡単に素早く行えるように設計している、との事。HTML5ベースでプリプ...2014.12.22 | 10時37分57秒
ドラッグしたテキストに検索や翻訳、地図検索等のサポート機能を付与するスクリプト・「textAssist」 textAssist textAssistはドラッグしたテキストにキーワード検索や翻訳、地図検索、Wikipedia等のサポート機能を付与するスクリプトです。jQueryに依存しています。デフォルトではGoogleマップ等が使われてい...2014.12.21 | 10時46分05秒
HTML5ベースの非依存型WYSIWYGエディタ・「wysihtml」 wysihtml wysihtmlはHTML5ベースのWYSIWYGエディタです。先日も同じようなリソースをご紹介したばかりですが・・jQuery等のライブラリに依存しないので導入はしやすそうです。コピペで挿入したコンテンツを自動でパ...2014.12.20 | 10時30分05秒
2色を選んでマテリアルデザイン向けのカラースキームを作成してくれる・「Material Palette」 Material Palette Material Paletteは用意された色から2色を選ぶと自動でマテリアルデザイン向けのカラースキームを作成してくれるツールです。選択するとスマフォで実際に使ったようなサンプルとカラースキーム、ダ...2014.12.19 | 11時09分59秒
CSSのみで作られたスマフォ向けのカレンダーアプリデザイン・「CSS-only Calendar App Concept」 CSS-only Calendar App Concept CSS-only Calendar App ConceptはCSSのみで作られたスマフォ向けのカレンダーアプリ用のスタイルです。日付の選択からカラー変更までをCSSのみで作れ...2014.12.18 | 11時19分10秒
HTML5製の軽量リッチテキストエディタ・「Squire」 Squire Squireは軽量なHTML5製リッチテキストエディタです。ケース次第では余計なものと扱われる部分を省いて軽量化を重視し、あくまでコンポーネントとして提供しているそうです。その為、ツールバーなどのUIは用意されていない(...2014.12.17 | 11時14分47秒
シンプルでミニマル設計なRWD対応の軽量CSSフレームワーク・「MNML」 MNML MNMLはシンプルでミニマルな設計のCSSフレームワークです。SASS、レスポンシブWebデザイン対応で2kbほどの軽量なものとなっています。悪く言えば特徴が有りませんが、特徴は自分の手で付加していきたい、という方には重宝さ...2014.12.16 | 11時43分40秒