デザイナー向けのリソースを収集、公開しているプロジェクト・「DesignBase」
DesignBase DesignBaseはアプリやWebなどのデザイナー向けのリソースを収集しているプロジェクトサイトです。色やフォント、UI、モックアップからインスピレーション、ストックフォトなどなど様々なリソースがまとめられてい...
Resource - Webデザイナー向け
チームで使えるオンラインダイアグラム作成ツール・「Diagramiq」
Diagramiq Diagramiqはチームで使えるコラボレーションダイアグラム作成ツールです。オンラインで使えて動作もなかなか軽量、サインアップもGoogleアカウントで出来るようになっています。UIも分かりやすい印象です。公開/...
ミニマルなスタイルのHTML5製ミュージックプレイヤー・「cPlayer」
cPlayer cPlayerはHTML5製のミニマルなミュージックプレイヤーライブラリです。上図のように省スペースでミニマルなスタイルのプレイヤーを実装できる、というもので見た目のシンプルさとは異なり、リピート機能やプレイリスト、連...
スクロールアニメーションを実装できる超軽量且つ非依存のライブラリ・「Sal.js」
Sal.js Sal.jsはページのスクロールに応じて動作するアニメーションエフェクトを実装出来る非依存型のJavaScriptライブラリです。軽量で他ライブラリ不要で動作、導入も簡単と、良い仕様な印象でした。エフェクトはカスタムデー...
プロトタイプやフレームワークの為の落書きフォント・「Scribble Font」
Scribble Font Scribble Fontはプロトタイプやフレームワーク作成時用に作られた落書きタイプのフォントです。上図のような適当に書いたフォントをタイプできるようになります。同じ用途のフォントも既に開発されていますの...
要素にYoutubeの動画IDを含めるだけでポップアップ再生できるようにするスクリプト・「GRT Youtube Popup」
GRT Youtube Popup GRT Youtube Popupは任意のHTML要素に動画IDを含めるだけでポップアップ再生できるようにするスクリプトです。jQueryに依存します。下記のような書き方で上デモのようにポップアップ...
InVisionがフリーで配布するPhotoshop/Skechのワイヤーフレームキット・「Form」
Form Formはプロトタイピングツールを展開するInVisionがフリーで配布しているワイヤーフレームキットです。Photoshop用とSkech用が配布されています。PC向け、スマフォ向け、タブレット向けがそれぞれ用意されており...
イージングに使われるペジェ曲線に合わせた法則でカラースキームを作り出す・「ColorBox」
ColorBox ColorBoxはイージングアニメーションの法則に沿って新たなカラースキームを作り出すプロジェクトサイトです。イージングの詳細は「イージングの基本 | Web | Google Developers」をご参照...
OSSで公開されているeBay製のテンプレートエンジン・「Marko」
Marko Markoはオークションサービスを展開するeBayが開発、公開したJavaScript製のテンプレートエンジンです。HTML/CSS/JSの知識があれば少ない学習コストで使用できるようになるシンプルな設計だそうです。主にe...
ランディングページのひな型を作成、ダウンロードできるシンプルなLP作成ツール・「Unicorn Platform」
Unicorn Platform Unicorn PlatformはシンプルなLP作成サービスです。出来る事は用意されているコンテナを追加/削除してDLする、という事のみとなっています。テキストやカラー、要素の編集等は出来ませんのでH...
TEDが公開するオープンソースのAtomic CSSライブラリ・「shed.css」
shed.css shed.cssはTED.comが公開しているOSSのCSSライブラリです。「CSSの終わりの始まり」をキャッチコピーとしています。詳細はまだ調べていませんが、ユーティリティファーストを元に設計されており、それぞれの...
任意のロゴのデザインをチェックできる・「Logo Lab」
Logo Lab Logo Labは任意のロゴデザインをチェック、テストできるWebサービスです。ロゴファイルをアップロードすると、グリッドによるバランスのチェック、グレースケールや白黒にしても機能しているかどうかのチェック、視覚障害...
Alibabaが開発、公開しているオープンソースのHTML5製ゲームソリューション・「Hilo」
Hilo HiloはOSSとして公開されているHTML5製ゲームエンジンです。中国のAmazonと言われるAlibabaグループが開発、公開しているようです。HTML5によるゲーム開発の速度向上をサポートする事が目的のよう。オブジェク...
ダウンロード可能なさまざまなカラースキームを大量に保管している・「SchemeColor」
SchemeColor SchemeColorはさまざまなカラースキームを超大量に保管しているWebサイトです。ダウンロードや編集も可能です。基本的にはシンプルな機能ですが、量が非常に多く、ざっと数えただけでも1万ほどあるようです。ま...
オープンソースのSVGアイコンのセット・「Ikonate」
Ikonate IkonateはOSSとして公開されているSVGアイコンのセットです。カスタマイズ性、パフォーマンスを重視しているそうです。数もそこそこ用意されており、いずれも汎用的なものとなっています。また、本サイトではカスタマイズ...
Matter.jsを使ってスクロール時に背景をアニメーションさせる・「Floaty Bubbles」
Floaty Bubbles See the Pen Floaty Bubbles by Will Boyd (@lonekorean) on CodePen. 物理エンジンのMatter.jsを使って、背景をスクロールに応じてアニ...
縦に撮られた動画を専門に無料配布している・「Vyoo」
Vyoo Vyooはスマフォ用に縦に撮られた動画だけを無料配布するWebサイトです。数は多くないように見えますが、週ごとに配布する動画が更新されるタイプみたいですね。本サイトはオンラインで動画を加工してダウンロードできるVEEDという...
美しいカラーパレットを手動収集している・「Trendy Palettes」
Trendy Palettes Trendy Palettesは美しいカラーパレットを手動収集しているパレットキュレーションサイトです。本ツールのユーザーや開発者が世間で人気の配色を収集しているそうです。本ツールはGradient H...
Webサイトのパフォーマンス向上に役立ちそうなツールや情報をまとめている・「Progressive Tooling」
Progressive Tooling Progressive ToolingはWebサイトのパフォーマンス向上に役立ちそうなツールやリソースを収集しているプロジェクトサイトです。アクセシビリティやスピード、ファイルサイズ最適化の為の...
CSSのClip Pathを直感的な操作で簡単に作成できる・「Clip Path Generator」
Clip Path Generator Clip Path Generatorはその名の通りClip Pathを作成できるジェネレーターです。直感的な操作でパスを生成、コードを発行してくれる、というもの。マウス操作でパスを生成したら即...
43のローダーをまとめた・「43 loaders」
43 loaders See the Pen 43 loaders by Subin (@meemaw1) on CodePen. 43 loadersは43のCSSローダーをまとめたCodepenです。CSSといってもアニメーショ...
Vue.jsベースのオープンソースUIコンポーネントフレームワーク・「Vuesax」
Vuesax VuesaxはVue.jsベースのUIコンポーネントフレームワークです。Vue.jsを使ったアプリケーション開発をサポートしてくれます。カラースキームやグリッド、フォーム、タブなどの基本UIはもちろん、スライダーやカード...