ユニークな模様のパターンをSVGで配布する・「Hero Patterns」
Hero Patterns Hero Patternsはちょっとユニークな模様のパターン素材をSVGで配布するプロジェクトサイトです。結構昔に人気のあったSubtle Patternsっぽい感じ。使いたい模様をクリックすればメインカラ...
Resource - Webディレクター向け
手軽にダミー画像を作成出来る軽量スクリプト・「placeholder.js」
placeholder.js placeholder.jsはクライアントサイドでダミー画像を生成する軽量スクリプトです。jquery等の他ライブラリへの依存もなく、2kb以下と軽量なのも良いですね。表示される画像はBase64ですが生...
CSSのみで作るシンプルなツールチップ・「Wenk」
Wenk WenkはCSSのみのツールチップを実装するシンプル軽量なCSSライブラリ。ツールチップの位置やテキストはカスタムデータ属性で管理できます。手軽で良いですね。PostCSS、Less、SCSSに対応しています。ライセンスはM...
任意のWebページのスクリーンキャストを撮って共有出来るChrome拡張・「Opentest」
Opentest Opentestは任意のWebページを自分の顔と一緒にスクリーンキャストを撮って共有出来るChromeエクステンションです。上図は試しに撮影したもの。カメラは起動させませんでしたがこのようにEmbedも可能です（無...
ドット絵+スプライトアニメーションを作成出来るピクセルアートツール・「ASEPRITE」
ASEPRITE ASEPRITEはドット絵の描画とスプライトアニメーションの作成が可能なピクセルアートツールです。Windows、Mac、Linuxで動作してくれます。使い方に関しては、かなり詳しく書いてくださっている方がいるのでそ...
input要素の入力をサポートする非依存スクリプト・「Cleave.js」
Cleave.js Cleave.jsはフォームでのinput要素の入力をサポートするスクリプトです。jQuery等のライブラリに依存せず、単体で動作してくれます。上記の動作サンプルのように、クレカの自動認識、右寄せ入力、電話番号入力...
記号や特殊文字を使ったローディング時のスピナーをCSSで作る・「text-spinners」
text-spinners text-spinnersは記号や特殊文字を使ってCSSで作るスピナーです。上例は分かりやすくするために大きなフォントで表示しています。contentプロパティに複数テキストを設定してkeyframesで動...
SVGで書かれたワイヤフレーム用のステンシルを検索、ダウンロードできる・「littleplaneapp.com」
littleplaneapp.com littleplaneapp.comはSVGで書いたワイヤーフレーム用のステンシルを探してDL出来るサービスです。SVGでワイヤーフレームを書くという発想が個人的にはあまり無かったのですがブラウザ...
WebサイトやアプリのUIをアニメーションで収集するギャラリーサイト・「UI Movement」
UI Movement UI MovementはWebサイトやアプリのUIをアニメーション画像で収集しているデザインギャラリーサイトです。と言っても管理者が収集しているのではなく、ユーザーが集めるキュレーションサービスのようです。実際...
Githubのコードを任意のWebページに埋め込める・「github-embed」
github-embed github-embedはGithubのコードを任意のWebページに埋め込むためのスクリプトです。上図のように複数ファイルを同時に埋め込む事も可能です。Gistライクにリポジトリ内のコードを埋め込めるgist...
サービス終了するMy Yahoo!ライクに使えてRSSデータのインポートも出来るシンプルな代替国産フィードリーダー・「Feed Watcher」
Feed Watcher Feed WatcherはMy Yahoo!ライクに使える国産フィードリーダーです。RSSを登録し購読、ウィジェットは自由に配置する事が出来ます。ユーザー登録もSNSアカウントで登録出来るのでメールアドレスを...
CSSやSVG、GIF等でローディングアイコンを作成出来る・「loading.io」
loading.io loading.ioはブラウザでローディングアイコンを作成、ダウンロードできるWebアプリです。型を選択してサイズやアニメーションのスピード、色等をカスタマイズし、SVGやCSS、GIF等でダウンロードする事がで...
よくアクセスするWebページ等を管理できるChromeエクステンション・「Toby」
Toby TobyはChromeでよくアクセスするWebページ等を管理できるエクステンションです。毎日見るページ、自分の管理サイトのログインページ、利用しているWebアプリなど、ブラウザのブックマークとは別の形で目的別に管理する事が出...
色覚障害の方に対応したWeb制作の為のChromeエクステンション・「ChromeLens」
ChromeLens ChromeLensは色覚に異常のある方に対応出来るWebサイトの制作をサポートするChromeエクステンションです。拡張機能を追加すると、デベロッパツールにChromeLensという項目が追加されます。このタブ...
軽量シンプルなオープンソースのUIキット・「Css-mint」
Css-mint Css-mintはWebアプリ構築の開発をサポートする為に開発されたUIキットです。Normalize.cssを元に作成、OOCSSに沿ったクリーンな設計を心がけているそう。class名は確かに直感で分かるようにされ...
WordPressの管理画面内でドラッグ&ドロップによるレイアウト作成が可能なプラグイン・「Tailor」
Tailor TailorはWordPressの管理画面内でレイアウトをD&Dで作成出来るWordPressプラグインです。テーマカスタマイザーで要素をドラッグし、そのまま各所を編集出来るようになっています。テーマカスタマイザーはレス...
flexboxベースの軽量でレスポンシブなCSSフレームワーク・「Basis」
Basis Basisはflexboxベースの軽量でRWD対応CSSフレームワークです。軽量でモバイルファースト、クリーンなコード、ミニマルなスタイルの設計を特徴としています。各コンポーネントやユーティリティ、サンプルテンプレート等も...
モニタサイズ次第で入りきらない部分だけスライドインさせるレスポンシブなメニュースクリプト・「okayNav」
okayNav okayNavはモニタサイズ次第では入りきらない部分をスライドインするようにしてくれるスクリプトです。jQueryに依存します。メニューの種類が多いコンテンツや動的、増え続ける等、ケースによってはよく紹介されているよう...
手軽にスクリーンショットを編集、シェア出来るWebサービス・「Snaggy」
Snaggy Snaggyはスクリーンショットを手軽に編集、共有できるWebサービスです。WindowsならPrint ScreenしてからSnaggyページに戻ってペースト(Ctrl+v)するだけ、任意のWebページのSSを撮りたい...
モーショングラフィックスの基本要素を元素記号表で表現した・「モーション周期表」
モーション周期表 モーション周期表はモーショングラフィックスの基本要素を元素記号表で表現したプロジェクトサイトです。武蔵野美大の方の卒業制作作品みたいです。以下、引用。 モーション周期表はモーションへの理解を深めるために作成...
大量のデバイスに対応可能なMedia Queriesジェネレーター・「Simple CSS Media Queries」
Simple CSS Media Queries Simple CSS Media Queriesは大量のデバイスに対応可能なMedia Queriesのコードジェネレーターです。iPhoneは2GからiPhone6+まで、Andor...
Twitter公開の絵文字のtwemojiをFont Awesomeライクに使える・「Twemoji Awesome」
Twemoji Awesome Twemoji AwesomeはTwitterがOSSとして公開している絵文字、twemojiをFont Awesomeライクに使えるようにする為のプロジェクトです。カナダに在住されている日本の方(El...