Resource - Webディレクター向け

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が標準とするには理由があると思いますので...

MarkdownやLessにも対応したオープンソースのjsFiddleライクな軽量コードテストツール・「Jotted」

Jotted JottedはjsFiddleライクにブラウザでJSやHTML、CSSのコードを実行テスト出来るツールです。OSSとしてソースコードが公開されています。動作は非常に軽量でMarkdownやLess、CoffeeScrip...
Ads

Hacker Newsライクなオープンソース専門のニュースサイト・「OSwatch」

OSwatch OSwatchはHacker NewsライクなOSS専門のニュースアグリゲーションサイトです。Hacker Newsライクというか、厳密にはHacker Newsクローン(だと僕は思ってる)のOSSであるLobster...

安否確認の為のシンプルな見守りメールアプリを構築出来る国産WordPressテーマ・「pigeon」

pigeon pigeonは、いわゆる「見守りメール」をWebアプリとして構築できるWordPressテーマ。日本国産で作りも簡単ですので利用ハードルは高くなさそうです。WordPressテーマですが、特にブログ機能やCMS機能は無く...

色覚異常の方やプリンターによる印刷を意識したGoogle謹製のカラーパレットジェネレーター・「palette.js」

palette.js palette.jsはGoogle謹製のカラーパレットジェネレーターです。生成されるカラースキームは色覚異常の方への配慮だけでなく、プリンターフレンドリーにも設計してあるそうです。生成されたパレットはマウスホバー...

オープンソースのシンプルなモックアップ作成ツール・「QuickMockup」

QuickMockup QuickMockupはシンプルなモックアップ作成ツールです。Webサービスとしてではなく、あくまでオープンソースソフトウェアとして公開されていますのでフォントやエレメントは変更しないとアレな感じです。とは言え...

軽量且つクリーン、ミニマルな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っぽい感じですね。一応プリント購入も出来るみたい。写真投稿サイトは数多に有りますので選択肢の一つとして。...

Githubで公開されているjQueryのプラグインと詳細をまとめている・「jQuery Cards」

jQuery Cards jQuery CardsはGithubで公開されているjQueryのプラグインと詳細をまとめているWebサイトです。詳細はREADME.md等を引っ張ってきてるみたいです。また、全てではありませんが、動作デモ...

シングルページの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...

CSSで変更できるカーソルとコードの一覧・「CSS Cursor」

CSS Cursor CSS CursorはCSSで変更できるカーソルとそのプロパティ、対応ブラウザの一覧ページです。思いの外しらないものもあったので備忘録的に。HTML製のWebアプリも増えているので以前よりも需要は高くなっているか...

商用でも利用可能なシンプルなデザインのロゴを配布する・「logodust.com」

logodust.com logodust.comは商用でも利用可能なシンプルデザインなロゴデータを配布するWebサイトです。と言っても、配るために作成されたものではなく、過去のプロジェクトでボツとなったロゴデザインをこのまま捨てるの...

WebベースなAirDropのオープンソースクローン・「Snapdrop」

Snapdrop SnapdropはAppleのAirDropクローンです。オープンソースとして公開されています。HTML5製のWebベースとなっており、ブラウザを利用して異なるデバイス間でのファイル転送が可能との事。ブラウザは同じも...

gistやYoutube、Vine、TwitterやGoogle Mapなど、様々なサービスをembed出来る・「embed.js」

embed.js embed.jsは様々なサービスの埋め込みを容易に行えるようにする為のスクリプトです。テキストから自動で文字列を解析し、embedしてくれる、というもの。例えばGistやYoutubeなら、URLを貼るだけで勝手に埋...

ブラウザでPDFを作成するスクリプト・「pdfmake」

pdfmake pdfmakeはブラウザ上でPDFを作成する為の非依存型スクリプトです。JSONライクな記法で作成出来るみたいです。が、例によってこのままだと日本語は読み取ってくれませんので対応が必要になります。コードテストできるので...

Web制作時に役に立つ(かもしれない)ツールを大量に公開している・「Richard’s Toolbox」

Richard's Toolbox Richard's ToolboxはWeb制作時に役に立ちそうなツールを大量に公開しているWebサイトです。Skypeや各SNSでの表示確認ツール、Webサイトのロードテスター、Whoisチェックツ...

アニメーションのピクセルアートを作成できるオンラインドローツール・「Draw!」

Draw! Draw!はアニメーションするピクセルアートを作成出来るドローツールです。サイズは16x16で、よくあるピクセルアートエディタにレイヤー機能が付いた、みたいなもの。2枚目からは右下部の+ボタン(add frame)でレイヤ...
Ads