マテリアルデザイン向けのカラーコードをコピーして使える・「Material UI Colors」 Material UI Colors Material UI Colorsはマテリアルデザインの為のカラーパレットです。カラーコードはHEX、RGB、RGBAなどをサポートしており、使いたい色をクリックすればクリップボードにカラーコー...2015.01.16 | 10時34分49秒
CSSのみで作られたシンプルなアイコンセット・「ICONO」 ICONO ICONOはCSSのみで作られたシンプルなアイコンのセットです。CSS3や擬似クラスを用いて形成されており、エレメントにclassを振るだけでアイコンを表示できるようになっています。SVGもフォントも利用せずに作ったよ!と...2015.01.13 | 10時59分42秒
Evernoteライクなクリップツールを構築する為のオープンソースソフトウェア・「Paperwork」 Paperwork PaperworkはEvernoteやMSのOneNote、Google Keep等のクリップサービスを構築可能なオープンソースのソフトウェアです。PHP製のフレームワーク、Laravelをベースに、Angular...2015.01.11 | 11時28分43秒
インタラクションデザインの導入例をアニメーションで確認出来るWebデザインギャラリー・「Hover States」 Hover States Hover StatesはWebサイトに導入したIxD例をアニメーションで確認出来るWebデザインギャラリーです。うまくIxDを取り入れて設計されたWebサイトをアニメーション画像で紹介しています。開発者やデ...2015.01.10 | 11時16分41秒
SVGをインラインに展開し、CSSでスタイル出来るようにするJSライブラリ・「deSVG」 deSVG deSVGはSVGをインライン展開してCSSでスタイリング出来るようにする為のJavaScriptライブラリです。<img>タグのsrc属性に挿入したsvgファイルを<svg>タグで表示出来るように...2015.01.09 | 10時46分46秒
CSS3による様々なマウスホバーアニメーションをまとめたスタイルシート・「Hover.css」 Hover.css Hover.cssはCSS3による様々なホバーアニメーションエフェクトをまとめたスタイルシートです。SASSとLESSにも対応。エレメントやアイコンなどにマウスホバーアニメーションが付けられており、classを振る...2015.01.08 | 11時00分44秒
モバイルアプリ開発向けのHTML5製フレームワーク・「Mootor」 Mootor Mootorはモバイルアプリ開発向けに構築されたHTML5製フレームワークです。オープンソースとして公開されています。と、ご紹介はしたものの、時間が取れず、まだあまり良く見ていません。デモを触った限りでは悪く無さそうです...2015.01.05 | 10時49分40秒
Bootstrapのひな形を手軽に作成出来る・「lollytin」 lollytin lollytinはBootstrapのひな形を手軽に作成できるツールです。大まかな型をドラッグ&ドロップで作成、コードを発行してくれます。1から作るよりは1を作ってくれるツールを使う方が工数稼げる、みたいな使い方にな...2014.12.31 | 11時12分40秒
Dribbbleに投稿されたデザインをCodopenで再現、比較している・「Give ’n’ Go」 Give ’n’ Go Give ’n’ GoはDribbbleに投稿されたものとCodepenで再現されたものを比較しているWebギャラリーサイトです。デザイナーの方がDribbbleに投稿したデザインコンセプトと、そのデザインをC...2014.12.30 | 10時42分41秒
Markdown記法をテキストに変換するjQueryのスクリプト・「jQuery.Markdown.js」 jQuery.Markdown.js jQuery.Markdown.jsはMarkdown記法で書かれたコードをテキストに変換するスクリプトです。jQueryに依存しています。シンプルで使い勝手も良さそうですね。日本の方が作成、公開...2014.12.26 | 10時58分52秒
Googleスプレッドシートのデータを元にチャートや地図、table等に変換するスクリプト・「Sheetsee.js」 Sheetsee.js Sheetsee.jsはGoogleスプレッドシートに書いたデータを元に、チャートグラフや地図、table等に変換してWebサイトに埋め込めるスクリプトです。動作にはjQueryが必要みたい。基本的にはコア必須...2014.12.25 | 11時14分43秒
オープンソースの Twitter Bootstrapのテーマ作成用ライブエディタ・「Cluckles」 Cluckles ClucklesはOSSとして公開されているTwitter Bootstrap用のライブエディタです。ファイルを読み込んだり全体やコンポーネントのスタイルを変更したり、CSSのカスタマイズ等が可能で、変更後即反映され...2014.12.24 | 10時37分10秒
フロントエンド開発のためのボイラープレート・「Front-end Boilerplate」 Front-end Boilerplate Front-end Boilerplateはフロントエンド開発をサポートするためのボイラープレートです。Web開発をより簡単に素早く行えるように設計している、との事。HTML5ベースでプリプ...2014.12.22 | 10時37分57秒
ドラッグしたテキストに検索や翻訳、地図検索等のサポート機能を付与するスクリプト・「textAssist」 textAssist textAssistはドラッグしたテキストにキーワード検索や翻訳、地図検索、Wikipedia等のサポート機能を付与するスクリプトです。jQueryに依存しています。デフォルトではGoogleマップ等が使われてい...2014.12.21 | 10時46分05秒
HTML5ベースの非依存型WYSIWYGエディタ・「wysihtml」 wysihtml wysihtmlはHTML5ベースのWYSIWYGエディタです。先日も同じようなリソースをご紹介したばかりですが・・jQuery等のライブラリに依存しないので導入はしやすそうです。コピペで挿入したコンテンツを自動でパ...2014.12.20 | 10時30分05秒
2色を選んでマテリアルデザイン向けのカラースキームを作成してくれる・「Material Palette」 Material Palette Material Paletteは用意された色から2色を選ぶと自動でマテリアルデザイン向けのカラースキームを作成してくれるツールです。選択するとスマフォで実際に使ったようなサンプルとカラースキーム、ダ...2014.12.19 | 11時09分59秒
CSSのみで作られたスマフォ向けのカレンダーアプリデザイン・「CSS-only Calendar App Concept」 CSS-only Calendar App Concept CSS-only Calendar App ConceptはCSSのみで作られたスマフォ向けのカレンダーアプリ用のスタイルです。日付の選択からカラー変更までをCSSのみで作れ...2014.12.18 | 11時19分10秒
HTML5製の軽量リッチテキストエディタ・「Squire」 Squire Squireは軽量なHTML5製リッチテキストエディタです。ケース次第では余計なものと扱われる部分を省いて軽量化を重視し、あくまでコンポーネントとして提供しているそうです。その為、ツールバーなどのUIは用意されていない(...2014.12.17 | 11時14分47秒
シンプルでミニマル設計なRWD対応の軽量CSSフレームワーク・「MNML」 MNML MNMLはシンプルでミニマルな設計のCSSフレームワークです。SASS、レスポンシブWebデザイン対応で2kbほどの軽量なものとなっています。悪く言えば特徴が有りませんが、特徴は自分の手で付加していきたい、という方には重宝さ...2014.12.16 | 11時43分40秒
女性や子供の為に立ち上げられたWeb制作技術を学ぶ為のリソースを提供するプロジェクト・「Ladies Learning Code」 Ladies Learning Code Ladies Learning Codeは女性やキッズ向けのWeb制作を学ぶためのリソースを提供する、非営利団体の立ち上げたプロジェクトサイトです。WordPressやHTML5、Photos...2014.12.14 | 10時19分16秒
商用でも無料で利用可能なHD動画を配布する・「Distill」 Distill Distillは商用利用でも無料のHD動画を共有、配布するWebサービスです。やや短めではありますが映像のクオリティは高そうです。まだ数は多くはないので今後増えてくれるよう期待したい所ですね。所謂写真素材の配布サイト同...2014.12.13 | 9時45分48秒
Webサイトの様々なヘルプコンテンツを追加出来るスクリプト・「FAQtoid」 FAQtoid FAQtoidはWebサイトに様々なヘルプ機能を追加するためのスクリプトです。jQueryに依存しています。動画や開閉式のFAQ、送信フォームやWebサイトツアーを、モーダルウィンドウ内に複数収めることが可能で、モーダ...2014.12.10 | 10時11分00秒