JSONデータのバリデーションやコンバート、整形等が出来る・「JSON Formatter」
JSON Formatter JSON FormatterはJSONコードのバリデーションや整形、圧縮、XMLやCSVのコンバート等が可能なWebツールです。シンプルで使いやすい印象でした。保存も出来るみたいですね。他にもこの手のツー...
Resource - Webデザイナー向け
jQueryライクに使える5kbほどの軽量ライブラリ・「Selector」
Selector SelectorはjQueryライクに使えるユーティリティな軽量ライブラリです。5kbほどでjQueryと同じような書き方 が出来ます。セレクタも結構同じものがサポートされています。jQuery代替と言えるかどうか...
家系図のような縦表示の階層を描けるスタイルシート・「hierarchi-view」
hierarchi-view hierarchi-viewは上図のような家系図でよくある縦表示の階層を描けるCSSです。例では企業等での役職順が表現されています。こういうの作るの割と面倒なので地味に使いみちあるかもですね。 hi...
REACTのコード実行テストをブラウザ上で試せてEmbedも出来る・「CODESANDBOX」
CODESANDBOX CODESANDBOXはReactのPlaygroundツールです。ブラウザ上で実行テスト、上のようにEmbedも出来ます。また、Githubアカウントでのログインやフォーク機能など、この手のツールに備わってい...
Foundationに加える事ができるUIコンポーネントを配布する・「Building Blocks」
Building Blocks Building BlocksはCSSフレームワークのFoundationに加える事ができるUIコンポーネントを配布するWebサイトです。zurbが公式に公開しているものになります。ナビゲーションやメデ...
軽量でカスタマイズ性を重視したCSSフレームワーク・「mini.css」
mini.css mini.cssは軽量且つカスタマイズ性を重視したCSSはフレームワークです。各種コンポーネントも用意されており、構成はBootstrapやMaterial Framework、Foundation等を意識しているの...
ファンタジーをイメージしたアイコンを使えるFont AwesomeライクなCSSツールキット・「RPG-Awesome」
RPG-Awesome RPG-AwesomeはファンタジーRPGをイメージして作られたアイコンフォントのセットです。Font Awesomeライクな作りになっているようですね。オーラをまとった人物ピクトグラム、ドラゴンの羽や武器、モ...
HTML5やjQuery、React など様々な言語やライブラリのboilerplateをキュレーションしている・「BOILRPLATE」
BOILRPLATE BOILRPLATEは様々な言語やライブラリのboilerplateを収集しているキュレーションページです。様々といっても底まで多くなく、HTML5、Go、React、node.js、AndroidやElectr...
CSSフレームワークのBulma向けのテーマを配布する・「Bulmaswatch」
Bulmaswatch Bulmaswatchは以前ご紹介したCSSフレームワーク、Bulma向けのスタイルテーマを配布するWebサイトです。多くはないものの、20以上のテーマが公開されています。Bulmaを使ってこれから何か作る予定...
AngularJSとPHPで出来たシングルページ向けのオープンソースCMS・「Cosmo CMS」
Cosmo CMS Cosmo CMSはシングルページ向けのCMSです。AngularJS x PHPで出来ておりOSSでとして公開されています。モバイルファーストでRWD対応、SEO/ソーシャルフレンドリーな設計だそう。WYSIWY...
軽量シンプルなツールチップライブラリ・「Tippy.js」
Tippy.js Tippy.jsは軽量シンプルなツールチップライブラリです。他ライブラリを必要としない非依存型となっています。Popper.jsがベースみたいですね。オプションもいろいろ。使い方も簡単そうですね。ライセンスはMIT。...
商用でも使える顔写真アイコンを提供するプロジェクト・「Diverse UI」
Diverse UI Diverse UIは商用でも使える人物の顔写真のセットを提供するプロジェクトです。以前ご紹介したTinyFacesと同じようなプロジェクトです。こちらはSketchプラグインも提供してくれています。女性のみ、男...
CC0で提供されている高品質なストックフォトサイト・「BURST」
BURST BURSTはCC0で高品質な写真素材を提供してくれるストックフォトサイトです。shopifyが運営しているみたいですね。割と大手の企業が運営しているので少しは安心して使える気がします。と思ったけど大手企業さんのキュレーショ...
オープンソースで公開されているシンプルなカラーピッカーChromeエクステンション・「Eye Dropper」
Eye Dropper Eye DropperはChromeエクステンションで使えるシンプルなカラーピッカーです。任意のWebページで任意の箇所のカラーを取得する事が出来ます。余計な機能は要らんから色だけ取得させてくれ、という方にはピ...
PhotoshopやSkechのUIのリソースを配布する・「PSDDD.co」
PSDDD.co PSDDD.coはPhotoshopやSkechで使えるUIのリソースを配布するWebサイトです。モックアップやWeb/モバイル向けのUIキット、ワイヤーフレーム素材等を無料で配布しています。 PSDDD.co
jsfiddleやJSBinのようにコードテストが出来るオープンソースソフトウェア・「CodeWich」
CodeWich CodeWichは jsfiddleやJSBinのようにJS/HTML/CSSの実行テストが出来るOSSです。embedは出来ないみたい。Googleにお勤めの方が作成されたようですが、Google公式のものではない...
WordPressの良プラグインをキュレーションしている・「WP Plugin Directory」
WP Plugin Directory WP Plugin DirectoryはWordPressの良プラグインをキュレーションしているWebサイトです。大まかなカテゴリに分けられていますので割と探しやすい印象です。大量のプラグインが...
スクロールに応じて要素にアニメーションエフェクトを付与できるライブラリ・「AOS」
AOS AOSはスクロールに応じて要素にアニメーションエフェクトを付与出来るライブラリです。Animate On Scrollの略だそうで、簡単にスクロールに応じたエフェクトを実装する事が出来ます。ライブラリを読み込んでエフェクトを与...
基本的なUIコンポーネントを備えたミニマルなCSSフレームワーク・「Look」
Look Lookはリストやボタン、フォーム、カラーパターン等の基本的なUIコンポーネントを備えたミニマルなCSSフレームワークです。基本的なUIと言っても、ある程度のコンポーネントを全て揃えているものではないようです。他、配置の為の...
SVGを使ったプログレスバーを実装出来るスクリプト・「jQuery-svg-progress」
jQuery-svg-progress jQuery-svg-progressはSVGを使ったプログレスバーを実装出来るスクリプトです。jQueryに依存します。SVGなのである程度自由にカスタマイズできる点が魅力ですね。モニター幅の...
JSONデータから年表のようなタイムラインを作れるスクリプト・「Albe Timeline」
Albe Timeline Albe TimelineはJSONデータから年表を作成出来るスクリプトです。jQueryに依存しています。JSON形式で書かれたデータで自動的に上図のようなタイムラインを作ることが出来ます。シンプルに、た...
SNSのシェアボタンを手軽に設置できるスクリプト・「jquery.sharebox」
jquery.sharebox jquery.shareboxはSNSのシェアボタンを手軽に設置できるスクリプトです。名前のとおり、jQueryに依存しています。スクリプトとCSSを読み込んで空の要素を設置すればそのページに対応したシ...