線で描かれたシンプルなアイコン200以上を配布する・「Iconbros」 Iconbros Iconbrosは線で描かれたシンプルなアイコンを配布するプロジェクトです。現在までで200以上のアイコンがPNGとSVGフォーマットで配布されています。数はまだ増えているようです。ライセンスポリシーに同意すればダウ...2017.11.11 | 10時42分55秒
Bootstrap 4向けのモダンで軽量なUIキット・「Shards」 Shards ShardsはBootstrap 4用のモダンで軽量なUIキットです。ナビゲーションやツールチップ、フォーム周り、モーダルウィンドウやバッヂ、アラート、ボタン、カードなどのコンポーネントが揃えられています。これらのUIの...2017.11.09 | 10時53分38秒
UI制作の際に役立ちそうなツールやリソース等の情報をまとめた・「designer lynx」 designer lynx designer lynxはUI制作の際に役に立つかもしれない情報をキュレーションしているWebサイトです。デザインギャラリーやカラーツールやプロトタイプツール、アイコンやタイポグラフィの情報などなど。施工...2017.11.08 | 10時58分44秒
任意の画像をデバイス画像に合成し、任意の画像やテキストも挿入できるモックアップ作成ツール・「MOCKUP GENERATOR」 MOCKUP GENERATOR MOCKUP GENERATORはさまざまなデバイスのモニタ画面に任意の画像を合成してモックアップを作成できるジェネレーターです。先発サービスとの相違点は、合成だけでなく、任意のテキストや画像も挿入で...2017.11.07 | 11時04分29秒
手書き風なゆるいスタイルのCSSフレームワーク・「PaperCSS」 PaperCSS PaperCSSは手書き風のゆるーいスタイルなCSSフレームワークです。フォントにはPatrick Handが使われ、ボーダーも真っすぐな線ではなく、ラジオボタンやチェックボックスも手書きのようなスタイルとなっていま...2017.11.06 | 10時39分13秒
Animate.cssをサポートしてくれるスクリプト・「jquery.animator.js」 jquery.animator.js jquery.animator.jsはAnimate.cssをサポートしてくれるスクリプトです。jQueryに依存します。Animate.css導入の際、使い方をもう少し手軽にしてくれる、というも...2017.11.05 | 10時56分05秒
UI開発速度を上げるために作られたユーティリティファーストなCSSフレームワーク・「Tailwind CSS」 Tailwind CSS Tailwind CSSはUI開発速度を上げるために作られたユーティリティファーストなCSSフレームワークです。BootstrapやFoundation、Bulmaなどのようにテーマやコンポーネントを持ち合わ...2017.11.04 | 10時37分13秒
シンプルでモダンな非依存型のチャートライブラリ・「Frappé Charts」 Frappé Charts Frappé Chartsはシンプルでモダンな非依存型のチャートライブラリです。GitHubで使われているチャートに触発されて作ったそうです。チャートは棒や折れ線等に対応、設定も簡単でチャートにマウスホバー...2017.11.03 | 10時51分30秒
URL入力だけでスマフォやタブレットで閲覧した際のスクショをまとめて撮れる・「Responsive Screenshots」 Responsive Screenshots Responsive ScreenshotsはURLを入力するとそのアドレスをスマフォやタブレット、ノートやデスクトップPCで閲覧した際のスクリーンショットをまとめて撮ってくれるWebサー...2017.11.01 | 10時28分27秒
ラジオボタンとチェックボックスを装飾するためのCSSライブラリ・「pretty checkbox」 pretty checkbox pretty checkboxはチェックボックスやラジオボタンを装飾するためのCSSライブラリです。JavaScriptを使わずCSSのみで実装可能で、CSSによる形状だけでなく、画像やSVG、アイコン...2017.10.31 | 11時14分53秒
CSSのみで手軽に実装出来るモーダルウィンドウライブラリ・「Light Modal」 Light Modal Light ModalはCSSのみで実装できるモーダルウィンドウライブラリです。エフェクトを追加する場合もJavaScriptを使用せず、Animate.cssを読み込み、任意のclassを付与する事でアニ...2017.10.26 | 10時49分01秒
音声付きのプレゼンテーションを作成できるサービス・「Draftsend」 Draftsend DraftsendはPDFファイルに音声を付けたプレゼンテーションを作成、公開できるWebサービスです。PDFをアップロードし、タイトルと説明文を入力すると、音声挿入画面に移行しますので、マイクで音声を追加していく...2017.10.25 | 10時12分35秒
MarkdownやLaTeXをサポートしている超シンプルなWebテキストエディタ・「Writing」 Writing Writingは超シンプルなブラウザ上で動くWebテキストエディタです。MarkdownやLaTeXをサポートしています。上図はTeX Wikiさんで書かれていたコードです。左ペインに書くと右ペインに出力されます。多く...2017.10.24 | 11時24分42秒
豊富なコンポーネントを揃えたモジュール式のオープンソースUIツールキット・「One-Nexus」 One-Nexus One-NexusはオープンソースのUIキットです。豊富なコンポーネントを揃えているだけでなく、UIモジュールを作成するためのフレームワーク、Synergyを導入する事でモジュール形式にされたパワフルなキットとして...2017.10.22 | 11時44分55秒
著名なWebサービスやツールの代替となりそうな類似サービスを紹介する・「Product Alternatives」 Product Alternatives Product Alternativesは様々な著名サービス等の代替となりそうな類似サービスを紹介してくれるWebサービスです。スタートアップ企業がどんなツールを使っているかを教えてくれるサー...2017.10.20 | 10時25分24秒
jsfiddleライクなエディタやカラーパレット作成ツール等を公開する・「Liveweave.com」 Liveweave.com Liveweave.comはjsfiddleライクなHTML/CSS/JavaScript実行ツールやカラーパレットを生成してSVGやPNGでダウンロードできるツール、CSSツールやベクターツールなどを公開...2017.10.17 | 11時05分11秒
css gridのコードを生成できる・「Griddy」 Griddy Griddyはcss gridのコードを手軽に実装できるツールです。実行結果を確認しながらdisplay: grid;のコードを生成してくれます。よくあるやつですね。css gridはちょっと複雑でとっつきにくい感あるの...2017.10.16 | 10時11分04秒
Bootstrapで使える要素を170種ほどセットにしてOSSとして配布する・「Froala Design Blocks」 Froala Design Blocks Froala Design BlocksはBootstrapで使えるフォームや地図コンテンツ、フッターや「値段表」、「製品詳細」のようなよく見かけるコンテンツなどをブロック単位にして170種ほ...2017.10.15 | 10時37分48秒
編集可能のシンプルなtableを実装するスクリプト・「jquery-fulltable」 jquery-fulltable jquery-fulltableは編集可能のシンプルなtableを実装できるスクリプトです。jQueryに依存します。編集ボタンを押すと編集可能になる、行を追加できる、というシンプルな機能のみになりま...2017.10.14 | 10時10分41秒
ユニークなエフェクトを要素に付与できるCSSアニメーションライブラリ・「mimic.css」 mimic.css mimic.cssはユニークなエフェクトを要素に付与できるCSSアニメーションライブラリです。よくあるエフェクトや需要の高そうなエフェクトは先発のライブラリがすでに実装してるので、という事みたいです。どれも使いどこ...2017.10.13 | 11時05分59秒
inputのtype=”file”で送信前に画像を表示させるスクリプト・「file-upload-with-preview」 file-upload-with-preview file-upload-with-previewはinput要素のtype="file"で画像をアップロードする場合、submit前にユーザーが表示確認できる、というスクリプトです。よ...2017.10.12 | 10時30分56秒
CSSだけでふわっと浮かぶ上がるツールチップを簡単な設定で実装できるCSSライブラリ・「Balloon.css」 Balloon.css Balloon.cssはCSSのみで設定可能なツールチップライブラリです。カスタムデータ属性を含めるだけで左右上下に自由に出すことができます。ふわっと浮かび上がるシンプルなエフェクト付き。 使い方は、da...2017.10.11 | 10時58分43秒