オープンソースのSVGベースなプロトタイピングツール・「UXBOX」
UXBOX UXBOXはオープンソースとしてソースコードが公開されているプロトタイピングGUIツールです。ブラウザで動作します 作成したプロトタイプデータはSVGで吐き出されるそうで、多くのベクターツールで再編集したりWebでの...
Resource - Webデザイナー向け
フリーランサーや中小企業向けに開発されたオープンソースのオンライン請求書発行アプリ・「Crater」
Crater Craterはフリーランサーや中小企業向けに開発されたOSSのシンプルな請求書発行Webアプリです。連動できるスマホアプリも同時にOSSとして公開されています 設計にはLaravelとVue.jsが、レイアウトには...
チェックボックスや画像を含んだリスト表を作れるカンバンライクなWebアプリ・「columns」
columns columnsはチェックボックスや画像などを含んだリスト表を作れるカンバン風のWebアプリです 基本的にはカンバンボードの感覚で使えるんですが、タスクへのフォーカスはそこまで強くなく、リストを機能させる点...
コントラストをベースに作れるOSSのカラージェネレーター・「Leonardo」
Leonardo Leonardoは子トラストベースのカラージェネレーターです。設定したキーカラーを元にコントラストを調整する事でカラースキームを生成する、というもの コントラストで調整する事で当方のブログのようにアクセシビリテ...
SVGをPDFに変換するJavaScriptライブラリ・「svg2pdf.js」
svg2pdf.js svg2pdf.jsはSVGをPDFに変換するJavaScriptライブラリです。基本的にはjsPDFと併用する事を想定しているみたいです 上の動作サンプルはSVGをPDFとしてダウンロードできるよ...
各ブラウザのCSSのデフォルトスタイルを検索できる・「Browser Default Styles」
Browser Default Styles Browser Default Stylesは各ブラウザのデフォルトスタイルを検索できるWebアプリです 主要なレンダリングエンジン（WebKit、Blink、Gecko、T...
アニメーションする背景をCSSで簡単に作れる・「Animated CSS Background Generator」
Animated CSS Background Generator Animated CSS Background Generatorはボケやレクタングルなどシンプルなオブジェクトがアニメーションする背景をCSSで簡単に作れるWebア...
オープンなエデュケーションプラットフォームを構築できるOSS・「Openki」
Openki Openkiはオープンな教育プラットフォームを構築できるオープンソースのソフトウェアです ちょっとピンと来ない感じですが、基本的には教えてほしい人と教えたい人を結ぶコミュニティで、グループで勉強会、みたいなイベント...
よく使用されている汎用的なレイアウトとUIパターンのCSSコードをコレクションしている・「CSS Layout」
CSS Layout CSS Layoutはよく採用される汎用的なレイアウトやUIパターンのCSSコードを60ほどコレクションしているプロジェクトサイトです 例えばレイアウトなら3カラム、サイドバー2カラム、１カラムグリッドレイ...
任意のWebサイトで採用しているCMSや使用言語を500ものCMSのデータを元に調査できる・「What CMS?」
What CMS? What CMS?は任意のWebサイトで使っているCMSやプログラミング言語などをチェックできるWebアプリです 500ほどのCMSのデータがあり、その中から使われているCMSがあるかチェック、情報を提供して...
LEGO®ライクなグラフィックを描ける軽量なJavaScriptライブラリ・「Legra」
Legra LegraはLEGO®ぽいグラフィックを手軽に描ける軽量なJSライブラリです。Legraは「Lego® brick Graphics」を略したものだそうです canvasにLEGO®を並べたようなグラフィックで色など...
モックアップ等でダミーテキストを表現する為のSVGを作成出来る・「Wireframer」
Wireframer Wireframerはモックアップ等でダミーテキストを表現する為のSVGを作成できるシンプルなWebアプリです たまにインフィニティスクロールのローディング時での採用も見かけますね。テキストが表示されますよ...
シンプルで扱いやすい、簡易的な選択式チャットボットフレームワーク・「Peekobot」
Peekobot See the Pen QWwLjJv by kachibito (@kachibito) on CodePen. Peekobotはシンプルで扱いやすい選択式チャットボットフレームワークです。上...
ブラウザでフローチャートを作れるシンプルなスクリプト・「Flowy」
Flowy Flowyはブラウザでフローチャートを作成出来るスクリプトです。シンプルで軽量なコードですがjQueryに依存します 上図のように左ペインからブロックをD&Dで追加、右ペインで各ブロックを編集するUIとなっていますの...
マウスポインタに合わせて画像を変えられるスクリプト・「Creepyface」
Creepyface See the Pen PoorKQe by kachibito (@kachibito) on CodePen. Creepyfaceはマウスポインタに合わせて画像を変更できるスクリプトです ...
ReactベースのシンプルなOSS管理画面テンプレート・「Simple React Admin template」
Simple React Admin template Simple React Admin templateはReactベースのシンプルな管理画面テンプレートです オープンソースとしてソースコードが公開されています。レイア...
Youtubeの埋め込みを高速レンダリングするスクリプト・「Lite YouTube Embed」
Lite YouTube Embed See the Pen dyyLzVd by kachibito (@kachibito) on CodePen. Lite YouTube EmbedはYoutubeのemb...
Vue.jsを使ったクレジットカード情報入力フォーム・「vue-interactive-paycard」
vue-interactive-paycard See the Pen Credit Card Form - VueJs by Muhammed Erdem (@JavaScriptJunkie) on CodePen. ...
AIが作った25000枚の人物画像を配布、顔も変更できる・「ROSEBUD AI」
ROSEBUD AI ROSEBUD AIはAIが作った2万5千枚の人物画像を配布するプロジェクトです。 以前ご紹介した、10万人の顔の画像を無料で配布する100,000 AI-Generated Facesと違う点は、背景も作...
レスポンシブWebデザイン表示一括確認Chromeエクステンション・「ResponsiveViewer」
ResponsiveViewer ResponsiveViewerはレスポンシブWebデザインの表示をさまざまなサイズで一括確認出来るChrome拡張です 各デバイスはモニタサイズとUAが設定されており、任意のモニタサイズおよび...
100日間書き続けた様々なイラストをオープンソースとして配布する・「illlustrations」
illlustrations illlustrationsはデザイナーのvijay vermaさんが行った100日チャレンジで100日間書き続けたイラストをOSSとして公開したイラスト集です 多種多様な100個のイラストがMIT...
CC0ライセンスで配布される、ゆるいスタイルのイラスト集・「Open Doodles」
Open Doodles Open Doodlesはパブリックドメインで配布されている、ゆるいスタイルのイラストのセットです 配布されている拡張子はPNG、SVG、GIFなどで、GIFはアニメーションが、SVGはスタイルを変更で...