Resource - Webデザイナー向け

任意のグラデーションカラーで色付けてダウンロードできるSVGアイコンパック・「Gradientify」

Gradientify Gradientifyは任意のグラデーションカラーで少し色付けた状態でダウンロードできるSVGアイコンのセットです 多種多様な沢山の線画アイコンに少しだけグラデーションで色付けて使えるようにされたもの。珍...

既存のCSSフレームワーク等と併用も可能な軽量CSSライブラリ・「sscaffold」

sscaffold See the Pen BayGXYV by kachibito (@kachibito) on CodePen. sscaffoldは既存のCSSフレームワークと併用も可能な軽量CSSライブラリで...

CC0で配布のゆるい手書き風の絵文字フォント・「beedii」

beedii beediiはゆるーい手書き風の絵文字フォントです。CC0で配布されています フォントをインストールして絵文字を入力すると手書き絵文字になってくれます。個人的に割と好きなので種類が増えてくれると嬉しいですね ...
Ads

手書き風のダイアグラムを作成出来るOSSのWebアプリ・「excalidraw」

excalidraw excalidrawは手書きライクなダイアグラムを直感的なUIで作成できるOSSのWebアプリです 上図のようなシンプルなダイアグラムを手書き風の背景、ボーダー、テキストで作成、ダウンロードできる、というも...

オープンソースで公開されているブラウザベースのシンプルなメモ用ピンボードアプリ・「manifest」

manifest manifestはオープンソースで公開されているブラウザベースのシンプルなメモ用ピンボードアプです グリッドがあるので綺麗にそろえられる、自動保存、メモをドラッグで移動、PWAになっているくらいしか機能はありま...

中小規模のWebアプリを構築するためのオープンソースの軽量PHPフレームワーク・「Wolff」

Wolff Wolffは中小規模のWebアプリを構築するために開発されたシンプルで軽量なPHPフレームワークです。小さい、スケーラブル、簡単で速い、がコンセプトのようです 大きなフレームワークを使うことなく構築可能で、シンプル故...

Codepenのようにブラウザでコードを書いて実行テストできる・「Blnq Studio」

Blnq Studio Blnq StudioはCodepenのようにブラウザ上でコードを書いて実行テストを行えるWebアプリです 同じようにHTML、CSS、JavaScriptの動作テストが可能なのですが、少し違う点はJSO...

デザイナー向けに作られた長文パスワードジェネレーター・「Design Password」

Design Password Design Passwordはデザイナー向けに開発された長い文字でパスワードを作ってくれるジェネレーターです どこがデザイナー向けなのか、ですが、こちらで生成されるパスワードはある程度意...

ツールやグラデーション、パレットやブランドカラーサンプルなど、色に関する様々な大量のリソースを集約した・「Colorsinspo」

Colorsinspo Colorsinspoは色に関する様々な大量のリソースを集約しているプロジェクトサイトです グラデーションやカラーツール、パレットサンプルやブランドカラーサンプル、インスピレーションの為の情報など、色に関...

共同編集も可能、データは暗号化されるセキュアな分散型ドキュメント作成OSS・「Graphite」

Graphite Graphiteはチームで共同編集も可能なドキュメント作成、共有ツールです。Blockstackが使われており、作成したドキュメントは全て暗号化されます UIや機能は概ねGoogleドキュメントと同じタイプ...

CSSだけで作られた500以上ものカスタマイズ可能なミニマルアイコン・「css.gg」

css.gg css.ggはCSSだけで出来た500以上のミニマルなアイコンを使えるCSSライブラリです スケーラブルでカスタマイズ性のある設計で非常に使いやすい印象です。個人的にはアイコンフォントよりも軽量で好みな感じ ...

MarkdownでLaTeXを使えるようにするスクリプト・「TeXMe」

TeXMe See the Pen rNazLQa by kachibito (@kachibito) on CodePen. TeXMeはMarkdownでLaTeXを使えるようにするスクリプトです。ちょっと語弊ある...

コントラストの比率と実際に背景とテキストカラーを使用した状態を確認できるカラーコントラストチェックツール・「Color Contrast Checker」

Color Contrast Checker Color Contrast Checkerは指定したテキストカラーと背景カラーの2つのカラーのコントラストの比率を確認しながら確認出来るWebアプリです コントラストはWCAGのガ...

オープンソースのSVGベースなプロトタイピングツール・「UXBOX」

UXBOX UXBOXはオープンソースとしてソースコードが公開されているプロトタイピングGUIツールです。ブラウザで動作します 作成したプロトタイプデータはSVGで吐き出されるそうで、多くのベクターツールで再編集したり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カラム、1カラムグリッドレイ...
Ads