Resource - Archives

PCやスマフォで使えるパスワード管理ツール・「RememBear」

RememBear RememBearはWindows/Mac/iOS/Androidの他、ブラウザ拡張(現在Chromeのみ、FirefoxやSafariは準備中)にも対応したパスワードマネージャです。256ビット対応の暗号化でセキ...

3Dなスマフォのモックアップを作成できる・「threed.io」

threed.io threed.ioは3Dなスマフォのモックアップを作成できるジェネレーターです。よくあるSS合成ツールが3Dに対応している、みたいなもの。任意の画像をアップロードし、モニタに合成、好みの角度から見た状態の画像を作成...

ストックフォトやフォント、アイコン、カラースキームやチュートリアル等、Web制作に役立つツールやリソースを収集、公開している・「PinTab」

PinTab PinTabはWeb制作の際に役立ちそうな情報を収集しているキュレーションサイトです。ストックフォト、アイコン、フォント、PhotoshopやSkech、カラースキーム、プロトタイプやWordPress、Bootstra...
Ads

手軽に画像にパララックス効果を与えられるスクリプト・「simpleParallax」

simpleParallax simpleParallaxは手軽に画像にパララックス効果を与えられるスクリプトです。jQueryに依存します。本体を読み込んで画像をセレクタに指定すれば即反映されます。仕組みは、画像をtransfo...

商用でも無料で使えるフォントを定期的に紹介する・「WeeklyFonts.com」

WeeklyFonts.com WeeklyFonts.comは商用でも無料で使えるフリーフォントを定期的に紹介するWebサイトです。Myfonts.com、Fonts.com、Fontbros.com、Fontspring.com ...

複数ユーザーで共同作業も可能な、簡単に使えるシンプルなフローチャート作成ツール・「Wireflow」

Wireflow Wireflowは簡単に使えるシンプルなフローチャート作成ツールです。この手のツールの中でも特に手軽に作成できる印象でした。コンテナは既にデザインされたものを追加する簡易的なタイプですが、任意の画像をアップロードする...

ユーザー登録不要で使えるチャット機能付きのホワイトボードツール・「Draw.Chat」

Draw.Chat Draw.Chatはユーザー登録不要で使えるチャット機能付きの共同編集可能なホワイトボードツールです。ランダムなURLで部屋が生成され、招待する事でユーザーを追加できます。チャットはテキストとビデオチャットに対応し...

CSSのみで実装できる超軽量なツールチップライブラリ・「Microtip」

Microtip MicrotipはCSSのみで実装できる超軽量(圧縮版で1kbだそう)なツールチップライブラリです。aria-label属性で定義したラベルがそのままツールチップとして表示されます。位置はdata-microtip-...

Todoリストやカンバン、マインドマップやスケジュールカレンダー等の機能を持ったプロジェクト管理ツール・「Zenkit」

Zenkit ZenkitはTodoリストやカンバン、マインドマップやスケジューラーなどの機能を持ったシンプルなプロジェクトマネージャです。Trello代替を謳っており、データのインポートにも対応しているようです。スタイルもシンプルで...

任意のWebページにGoogle sheetやTrello等の簡易的な管理ツールを導入できる・「Integrations.js」

Integrations.js Integrations.jsは任意のWebページにGoogle sheetやTrelloなどの管理ツールを導入できるOSSです。上の動作サンプル(未設定なので表示のみのデモです)ではGoogle sh...

フレキシブルなclass名を意識して設計されたCSSフレームワーク・「Biomatic UI」

Biomatic UI Biomatic UIはフレキシブルなclass名を意識して設計されたCSSフレームワークです。どういう形が「フレキシブルだ」と感じるかは個人差があると思うので、ここでは柔軟であるかどうかは触れないでおきますが...

任意の画像からカラーパレットを作成するスクリプト・「Color Thief」

Color Thief Color Thiefは任意の画像からカラーパレットを作成するオープンソースのスクリプトです。画像を解析して主要となっているカラーをいくつか抽出、カラーコードを提供してくれます。WordPressのプラグイン等...

ベーシックなスタイルで軽量、コンポーネントも揃えられたCSSフレームワーク・「chota」

chota chotaはベーシックなスタイルの軽量なCSSフレームワークです。軽量ではあるものの、基本的なコンポーネントの他に要素の位置調整やスマフォ/タブレットでの表示ON/OFF等、よく使うユーティリティやカード、なども揃えられて...

HTMLやCSS、JavaScriptのコードを綺麗に整形してくれる・「DirtyMarkup」

DirtyMarkup DirtyMarkupはHTML/CSS/JavaScriptのコード整形ツールです。従来のフォーマッター同様にある程度の調整機能も付いています。また、本ツールはAPIも公開しており、今のところは無料で利用可能...

線で描かれたシンプルなアイコン200以上を配布する・「Iconbros」

Iconbros Iconbrosは線で描かれたシンプルなアイコンを配布するプロジェクトです。現在までで200以上のアイコンがPNGとSVGフォーマットで配布されています。数はまだ増えているようです。ライセンスポリシーに同意すればダウ...

Rails+Vueで作られたTodoistのクローン・「TUDU」

TUDU TUDUはRuby on Rails、Typescript、Vue.jsで構築されたTodoアプリです。Todoistのクローンとして作成されたようです。とはいえ、完全再現ではなく、機能は縮小されています。デモを触った限りで...

Bootstrap 4向けのモダンで軽量なUIキット・「Shards」

Shards ShardsはBootstrap 4用のモダンで軽量なUIキットです。ナビゲーションやツールチップ、フォーム周り、モーダルウィンドウやバッヂ、アラート、ボタン、カードなどのコンポーネントが揃えられています。これらのUIの...

UI制作の際に役立ちそうなツールやリソース等の情報をまとめた・「designer lynx」

designer lynx designer lynxはUI制作の際に役に立つかもしれない情報をキュレーションしているWebサイトです。デザインギャラリーやカラーツールやプロトタイプツール、アイコンやタイポグラフィの情報などなど。施工...

任意の画像をデバイス画像に合成し、任意の画像やテキストも挿入できるモックアップ作成ツール・「MOCKUP GENERATOR」

MOCKUP GENERATOR MOCKUP GENERATORはさまざまなデバイスのモニタ画面に任意の画像を合成してモックアップを作成できるジェネレーターです。先発サービスとの相違点は、合成だけでなく、任意のテキストや画像も挿入で...

手書き風なゆるいスタイルのCSSフレームワーク・「PaperCSS」

PaperCSS PaperCSSは手書き風のゆるーいスタイルなCSSフレームワークです。フォントにはPatrick Handが使われ、ボーダーも真っすぐな線ではなく、ラジオボタンやチェックボックスも手書きのようなスタイルとなっていま...

Animate.cssをサポートしてくれるスクリプト・「jquery.animator.js」

jquery.animator.js jquery.animator.jsはAnimate.cssをサポートしてくれるスクリプトです。jQueryに依存します。Animate.css導入の際、使い方をもう少し手軽にしてくれる、というも...

UI開発速度を上げるために作られたユーティリティファーストなCSSフレームワーク・「Tailwind CSS」

Tailwind CSS Tailwind CSSはUI開発速度を上げるために作られたユーティリティファーストなCSSフレームワークです。BootstrapやFoundation、Bulmaなどのようにテーマやコンポーネントを持ち合わ...
Ads