ブロックレベルで編集できるオープンソースのリッチテキストエディタ・「Editor.js」
Editor.js Editor.jsはブロックスタイルのリッチテキストエディタです。個人的に身近なもので言うとWordPressのGutenbergなんですが、WP使わない方だとピンとこない説明かもですね。ごめんなさい。画像やテキス...
Resource - Archives
NES.cssにインスパイアされたターミナルスタイルのCSSフレームワーク・「UITerminal」
UITerminal UITerminalはNES.cssにインスパイアされた、ターミナルスタイルのCSSフレームワークです。ドットフォントにはNES.cssと同じくPress Start 2Pが用いられています。各ボタンやプログレス...
InstagramやYoutube、Twitchなどの動画や画像をダウンロードできるOSS・「SocialSnapper」
SocialSnapper SocialSnapperはInstagramやYoutube、Twitch、Radditなどに投稿された動画や画像などをURL指定していしてダウンロードできるWebアプリです。OSSとしてソースコードも公...
ログインページや値段表、コンタクトフォームなどのUI/UXをより良くするためのチェックリスト・「Checklist Design」
Checklist Design Checklist Designは様々なUI/UXのベストプラクティスをチェックする為のリスト集です。例えばログインページならロゴは使われているか、ユーザーに何をさせたいかが明示されているか、どこにど...
アクセシビリティツールやデザインバージョン管理、モックアップや3Dモデリングなど、様々なデザイナーに役立ちそうなツールやリソースのまとめ・「Awesome Design Tools」
Awesome Design Tools Awesome Design Toolsは様々なデザイナー向けのツールやリソースを収集しているキュレーションサイトです。フィードバックツールを展開するFlawlessのスタッフが作成しているキ...
1mb以下だけ使える、広告無しのシンプルな無料ホスティングサービス・「1mbsite」
1mbsite 1mbsiteは容量1MBまで使える無料ホスティングサービスです。広告も無く、独自ドメインの設定も可能となっています。いくつかのテンプレートが用意されていました。エディターはプレビューモードや外部リソース登録機能等が備...
日々のメモや日記、アイデア等を記録できるデスクトップノートアプリ・「glimpses」
glimpses glimpsesは日々のメモや日記、アイデアや画像などをログとして残せるデスクトップ用のノートアプリです。以前ご紹介したNotableと少し似ていますが、もう少し高性能でカジュアルかもしれません。同じようにMarkd...
Bootstrap 4とreact.jsベースのオープンソースなダッシュボードフレームワーク・「Vibe」
Vibe Vibeはオープンソースとして公開されてる、Bootstrap 4とreact.jsベースの管理画面構築フレームワークです。よく必要とされるUIコンポーネントやサンプルアプリ、テンプレートが同梱されており、管理画面開発をサポ...
サンプルのUIを確認しながらカラースキームを作成、様々なコードでエクスポートできる・「Geenes」
Geenes GeenesはサンプルのUIを確認しながらカラースキームを作成、様々なコードにエクスポートできるWebアプリです。サンプルとして用意されたUI集のカラーが、色を変更する事でインタラクティブに変化するのでリアルタイムに確認...
サービス終了したGoogleのアプリをまとめている・「Killed by Google」
Killed by Google Killed by Googleはサービスが終了したGoogleのアプリをまとめているWebサイトです。サービスの賛辞と記念の為に作ったそうですがタイトルからして、多分皮肉を込めての事だと思います。ア...
白黒写真に自動で色付けしてくれるオンラインツール・「Colorize Photos」
Colorize Photos Colorize Photosは白黒の写真に自動で色付けをしてくれるオンラインツールです。アップロードするだけでカラー化、ダウンロードできるようになっています。と言っても元の色の再現ではなく、ディープラ...
よく見かけるCSSアニメーションエフェクトのスニペットコードをコピーできる・「CSSeffectsSnippets」
CSSeffectsSnippets CSSeffectsSnippetsはちょいちょい見かけるホバーエフェクト等を実装できるCSSコードスニペットをクリックだけでコピーできるプロジェクトサイトです。特にそれ以上の機能はなく、単純にス...
任意のWebサイト等のスクリーンショットを、簡易的なモックアップ画像に変換してくれる・「mockdowns」
mockdowns mockdownsは任意のWebサイトやコンテンツ等のSSをアップロードすると、簡易的なモックアップ画像に自動変換してくれるWebアプリです。UIの説明動画などを作る際に利用できるとの事です。忠実性はなかなかでした...
オープンソースのアバターイラスト作成ジェネレーター・「Avataaars Generator」
Avataaars Generator Avataaars Generatorはオープンソースのアバターイラスト作成ジェネレーターです。なんとなくよく利用されてるっぽいスタイルのアバターイラストを作成し、ダウンロードできる、というもの...
GraphQLとReactが使用されている、開発者向けのオープンソースなサーバーレスCMS・「Webiny」
Webiny WebinyはGraphQLとReactで作られた開発者向けのオープンソースなサーバーレスCMSです。大小を問わず、WebサイトやWebアプリケーションを構築できるように設計してあるそう。コンテンツ管理はビルトインされた...
スクロールに応じて要素にアニメーションエフェクトを付与できるシンプルで軽量なスクリプト・「lax.js」
lax.js lax.jsはスクロールに応じて要素にアニメーションを付与させる軽量スクリプトです。圧縮版で2kbほど、非圧縮でも8kbほどで依存性もありません。基本的にはスクリプトを読み込んで初期化、カスタムデータ属性で設定するだけの...
プレーンテキストでデータを入力すると自動でチャートを生成してくれるWebアプリ・「FastCharts」
FastCharts FastChartsはプレーンテキストでデータを入力すると、そのデータを元に自動でチャートを生成してくれるWebアプリです。データの入力方法は用意されているテストデータを使えばすぐに理解できるので割愛します。チャ...
チームで管理できるオープンソースのナレッジ管理システム・「BookStack」
BookStack BookStackはチームで管理できるOSSのナレッジマネジメントシステムです。Wikiを運用、構築する為のソフトウェアですが、基本的に編集にはログイン（GitHub、Google、Slackアカウントでのログイン...
色とアクセシビリティの関係について、インタラクティブな操作で体感しながら学べる・「Color.review」
Color.review Color.reviewは色とアクセシビリティに関してインタラクティブな操作で体感しながら学べるWebアプリです。用意されたカラーピッカー上には3本のラインがあり、色を変更する事で場所が移動します。このライン...
Markdown記法で書けるデスクトップ用のオープンソースなノートアプリ・「Notable」
Notable NotableはMarkdown記法で書けるデスクトップ用のノートアプリです。機能少なめのシンプルなものではなく、EvernoteやBoostnot、Quiver、stockなどのような3カラムからなる本格ノートアプリ...
オープンソースのGoogle Image Charts代替・「QuickChart」
QuickChart QuickChartはオープンソースのGoogle Image Charts代替ツールです。既に3月14日に停止されるImage Charts APIは廃止、Google chart APIに移行するよう求め...
座標とタイムスタンプのデータをJSONで渡すとGoogleマップ上でその経路をアニメーション表示してくれるスクリプト・「maps-journey-replay」
maps-journey-replay maps-journey-replayは座標とタイムスタンプのデータをJSONで渡すとGoogleマップ上に経路をアニメーション表示してくれるスクリプトです。説明下手なせいでピンとこないかも...