Webページにドローツールを埋め込むためのスクリプト・「Drawingboard.js」
Drawingboard.js Drawingboard.jsはWebページにおえかきツールを埋め込むためのスクリプトです。Canvasベースで出来ており、コントロールに必要な機能も一通り揃っている印象です。ある程度他のライブラリにも...
Resource - Webデザイナー向け
モバイルアプリ向けのランディングページテンプレート・「Takeoff」
Takeoff Takeoffはモバイルアプリ向けのランディングページのテンプレートです。よく配布されているような、いわゆるWebページのテンプレは使わないのですけど、こちらはスタイルを初期化すれば使いやすそうだったので備忘録として。...
レスポンシブWebデザイン対応のシンプルなイベントカレンダーを実装出来るスクリプト・「monthly.js」
monthly.js monthly.jsはシンプルなイベントカレンダー実装の為のスクリプトです。jQueryに依存しています。レスポンシブWebデザインにも対応しており、デイトピッカーとして利用する事も可能となっています。少し触って...
FlexboxベースのモダンなCSSフレームワーク・「Bulma」
Bulma BulmaはFlexboxベースのモダンなCSSフレームワークです。レスポンシブWebデザインに対応しており、オープンソースとして公開されています。カラースキームもいいセンスしてますね。これはなかなか使いやすそうです。 ...
Instagramライクな画像フィルターを簡単に設定可能でCSSコードも出してくれる・「cssFilters」
cssFilters cssFiltersはInstagramライクな画像加工をCSSで施せるWebアプリです。画像はUnsplashから引っ張るか任意の画像をアップロードします。CSSgramが使用されており、プレビューを見ながらス...
サウンドインタラクションを追加する為のシンプルなJavaScriptライブラリ・「Loud links」
Loud links Loud linksはWebコンテンツにサウンドインタラクションを追加する為のシンプルなJSライブラリです。audio属性を使うみたい。非依存型で軽量なのは良いですね。音源を用意して特定のclassとカスタムデー...
CSSのみで縦の年表のようなタイムラインを作れる・「Timelined」
Timelined TimelinedはJavaScript不要でタイムラインを作成出来るスタイルシートです。CSSのみで縦の年表を作成出来ます。カスタマイズ性も優秀で、アイコンの有無や吹き出し、アイコンのサークルカラー、タイムライン...
大量のパブリックドメインな写真素材を探せる・「FindA.Photo」
FindA.Photo FindA.PhotoはCC0な写真素材を探せるWebサービスです。色やシーン、配布元サイトなどからもコマンド検索可能みたい。動作も割と軽いので結構使いやすい印象でした。素材のページではその写真のカラースキーム...
自動でアクセシビリティのチェックを行うオープンソースツール・「pa11y」
pa11y pa11yは自動で任意のWebサイトのアクセシビリティチェックを行ってくれるツールです。OSSとして公開されています。監視したいWebサイトを設定すると毎日チェック、スコアを出してレポートを作成してくれます。30日間のレポ...
任意の画像からカラースキームを生成する・「ColorFavs」
ColorFavs ColorFavsは任意の画像からカラースキームを生成するツールです。画像はアップロードとURLの選択肢がある他、ベースカラーと色相、明度を指定してランダムに生成する事も出来ます。生成されたカラースキームはシェアも...
Codepenで2015年に話題になった投稿TOP100をまとめた・「MOST The HEARTED 2015」
MOST The HEARTED 2015 MOST The HEARTED 2015はCodepenで話題になった投稿TOP100をランキング化したWebページです。最もグッと来た投稿、コードを紹介しています。心に来たコード＝実際に...
Web標準の16色を綺麗なカラーパターンにする為のCSS・「COLORS」
COLORS COLORSはCSS2.1で設定されている標準カラーを少し変えて綺麗なカラーパターンにする為のCSSです。17色のうち、whiteを除く16色に手を加えてみたよ、みたいなの。W3Cが標準とするには理由があると思いますので...
色覚異常の方やプリンターによる印刷を意識したGoogle謹製のカラーパレットジェネレーター・「palette.js」
palette.js palette.jsはGoogle謹製のカラーパレットジェネレーターです。生成されるカラースキームは色覚異常の方への配慮だけでなく、プリンターフレンドリーにも設計してあるそうです。生成されたパレットはマウスホバー...
オープンソースのシンプルなモックアップ作成ツール・「QuickMockup」
QuickMockup QuickMockupはシンプルなモックアップ作成ツールです。Webサービスとしてではなく、あくまでオープンソースソフトウェアとして公開されていますのでフォントやエレメントは変更しないとアレな感じです。とは言え...
ブラウザのサポート状況をチェックする1KBの軽量スクリプト・「Feature.js」
Feature.js Feature.jsはブラウザのサポート状況をチェックしてくれる高速且つシンプル、軽量なブラウザの特徴検出スクリプト。他ライブラリへの依存も無く、わずか1KB程度で動作してくれます。Modernizrライクに利用...
軽量且つクリーン、ミニマルなUIフレームワーク・「Milligram」
Milligram Milligramは軽量でミニマルなUIフレームワークです。必要最低限のコードでクリーン、圧縮版で2KBと軽量な設計ながら欲しいUIコンポーネントは一通り揃っていて使いやすそうな印象でした。大きな特徴がこれといって...
モダンブラウザ向けのjQuery代替な軽量スクリプト・「cash」
cash cashはモダンブラウザ向けのjQuery代替スクリプトです。と言っても100％代替を目指すつもりは無いようで、あくまで軽量さを保ちつつ、ある程度jQueryで出来ることをカバーしていく、というもののようですね。cashのコ...
ブレンドモードにも対応のオープンソースなダミー画像生成ツール・「Placemat」
Placemat Placematはブレンドモード対応のダミー画像生成サービスです。よくあるダミー画像サービス同様に、URLでダミー画像を利用する事が出来ますがほかと違ってシンプルなURLとは言えないかも。URLは上記デモのHTMLソ...
CSSのフィルターを手軽に扱えるようにするスクリプト・「Philter」
Philter PhilterはCSSのfilterを手軽にコントロールできるようにする為のスクリプトです。jQuery版とvanilla.JS版があります。CSSを書かずとも、例えばdata-philter-grayscale="1...
品質重視のフォトグラファー向け写真投稿型コミュニティサイト・「Fotoblur」
Fotoblur Fotoblurは品質を重視したフォトグラファー向けの写真投稿型コミュニティサイトです。500pxや1x.comっぽい感じですね。一応プリント購入も出来るみたい。写真投稿サイトは数多に有りますので選択肢の一つとして。...
シングルページのWebアプリケーションエンジン・「Senna.js」
Senna.js Senna.jsはオープンソースのシングルページなWebアプリケーションエンジンです。軽量で他ライブラリに依存しないフレームワークとなっており、高速ブラウジング可能なWebアプリ構築をサポートしてくれるとの事。ライセ...
ブレンドモードを利用したカラフルなフィルタの為のCSS・「Colofilter.css」
Colofilter.css Colofilter.cssはcssのblend modesを使用したカラフルなフィルタの為のCSSです。mix-blend-modeプロパティを予め設定し、classでフィルタをかけられるようにしたCS...