Resource - Webデザイナー向け

ゆるいスタイルのイラストを組み合わせてオリジナルイラストを作成、ダウンロードできる・「Vector Creator」

Vector Creator Vector Creatorは最近よく見かけるゆるーいスタイルのイラストを組み合わせてオリジナルイラストを作成、ダウンロードできるWebアプリです この手のイラストを配布しているicon8が...

Veu.jsで作られたオープンソースのサムネイル付きオンラインブックマークマネージャ・「Moodboard」

Moodboard MoodboardはVeu.jsとFirebaseで構築されたオープンソースのサムネイル付きオンラインブックマークマネージャです Googleアカウントでログインできるようになっており、URLを指定するとサム...

手書き風のチャートを実装できる非依存のJavaScriptライブラリ・「roughViz.js」

roughViz.js roughViz.jsは手書き風のチャートを作成できる非依存のJSライブラリです 他ライブラリを必要とせず単体で動作してくれます。チャートの種類も棒チャートやドーナツ、散布図、円チャート、折れ線などよく使...
Ads

unsplashの写真から自動でカラーパレットを作成している・「ImageHues」

ImageHues ImageHuesはunsplashの写真を元に自動でカラーパレットを作成しているプロジェクトサイトです Favorite機能以外、特に特別な機能は無いシンプルな仕様ですが個人的には割と好きでしたので備忘録と...

1000以上のシンプルな線画と色付きのアイコンをセットで配布する・「Milk Icons」

Milk Icons Milk Iconsは1000以上ものアイコンを配布するプロジェクトです。シンプルな線画と色付きが用意されています メールアドレスの登録が必要ですが、大量のアイコンを商用でも無料で利用可能となっています ...

分散型のプライベートストレージを備えた、ブラウザで動作する画像圧縮ツール・「Compress.Studio」

Compress.Studio Compress.Studioはブラウザで動作する画像圧縮ツールです。jpg、jpeg、png等に対応しています Blockstackと連携させる事で圧縮した画像をプライベートなストレージに暗号化...

Markdown用のオープンソースのWYSIWYGエディタ・「Markdown Editor」

Markdown Editor Markdown EditorはMarkdown用のオープンソースのWYSIWYGエディタです。Web向けもデスクトップアプリ向け(Electron)もあります。 入力エリアとプレビューエリアの2...

オンラインでスライドを作成してPWAとして公開できるオープンソースのスライドエディタ・「DeckDeckGo」

DeckDeckGo DeckDeckGoはオンラインでスライドを作成してPWAとして公開できるオープンソースのスライドエディタです。DuckDuckGoとは基本的に関係ないようです。 DeckDeckGoはよくあるスライドエデ...

CC0ライセンスの写真や動画を配布するストックサイト・「ISO Republic」

ISO Republic ISO RepublicはCC0ライセンスの、著作権放棄された高品質な写真素材や動画を配布するストックサイトです ドメインも名前もコンセプトも変わってしまいましたが、以前はFOODIE FACTORとい...

Bootstrapベースの管理画面テンプレートを探せる・「BootstrapDash」

BootstrapDash BootstrapDashはBootstrapベースの管理画面テンプレートを探せるWebサイトです 有料/無料が混在しており、有料版はプランによって使用制限があるみたいです。無料版は基本的にはOSSと...

200以上のアニメーションするアイコンを無料で配布する・「Animated Icons」

Animated Icons Animated Iconsは200以上のアニメーションするアイコンを配布するプロジェクトサイトです。 以前ご紹介したんですが、内容もライセンスも変わっていたので改めて こちらは音源配布サイト...

CSS GridとGradientsを使ってランダムにパターンを作成、コードをコピーできる・「CSS Grid-ient」

CSS Grid-ient See the Pen CSS Grid-ient by Jordan Marshall (@TheCSSKing) on CodePen. CSS Grid-ientはCSS GridとG...

CSSによるアニメーションエフェクトの動作確認しながらコードをコピーできる・「CSS Animo」

CSS Animo CSS AnimoはCSSによるアニメーションエフェクトの動作確認しながらコードをコピーできるWebサイトです コードはクリックのみでクリップボードにコピーされるので気に入ったエフェクトをコピペするだけで使え...

アスキーアートのラップトップを作って画像などを組み合わせて使えるCSS・「laptop.css」

laptop.css See the Pen RwbEorO by kachibito (@kachibito) on CodePen. laptop.cssはアスキーアートのラップトップを作って画像などを組み合わせて...

オートセーブ機能付きでMarkdownとプレーンテキストの両ペインでメモを取れるシンプルなOSSメモアプリ・「QuickJots」

QuickJots QuickJotsはオート保存機能が付いたシンプルなメモアプリです。Markdownとプレーンテキストの両ペインにそれぞれメモを残せます 左ペインはMarkdown、右ペインはプレーンテキストエリアで、記述と...

AIで生成された、現実に存在しない10万人の顔の画像を無料で配布する・「100,000 AI-Generated Faces」

100,000 AI-Generated Faces 100,000 AI-Generated Facesは現実に存在しない10万人の顔写真をAIで生成し、無料で配布するプロジェクトです。 写真素材(と言っていいか分かり...

Can I Use?のようにHTMLメールのタグ対応状況を各メールサービスで調査できる・「Can I email…」

Can I email… Can I email…は、Can I Useライクな使い方が出来るHTMLメールタグ対応状況調査ツールです。 HTMLメールで使えるタグは各メールサービスによって制限があったりなかったりして一貫性が無...

指定したWebページ内にあるリンクやボタン等のデフォルト時、ホバー時、フォーカス時のアクセシビリティチェックをしてくれる・「Button Contrast Checker」

Button Contrast Checker Button Contrast Checkerは任意のWebサイトのURLを指定すると、そのページ内にあるリンクやボタンなどのデフォルトの状態、マウスホバー時、フォーカス状態におけるカラ...

CSSデバッグを少し手伝ってくれる小さなスクリプト・「debugCSS.js」

debugCSS.js debugCSS.jsはCSSのデバッグ作業を少しだけ手伝ってくれる小さなスクリプトです。サイズは非圧縮でも1kb、圧縮版は600バイトほどです。 何をしてくれるかは上サンプルの通り、要素にアウトラインを...

ブラウザでイラストを複数描いてGifアニメーションやmp4でダウンロードできるオープンソースのソフトウェア・「ANIMATE IT」

ANIMATE IT ANIMATE ITはブラウザでイラストを複数描いてGIFアニメやmp4の動画ファイルとしてダウンロードできるアニメーションドローツールです オープンソースとしてソースコードも公開されています。mp4には音...

React.jsによるアプリケーション開発の為のモジュール式UIコンポーネントライブラリ・「Chakra UI」

Chakra UI Chakra UIはReact.jsによるアプリケーション開発の為のUIコンポーネントライブラリです。モジュール式で必要なコンポーネントを必要な分だけ追加するタイプとなっています。 WAI-ARIAに準拠した...

閲覧中のWebページの任意の要素のHTMLとCSSを選択してコードをjsfiddleのようなエディタで確認できるブラウザ拡張・「SnipCSS」

SnipCSS SnipCSSは閲覧しているWebページの任意の要素を選択すると、その要素に使われているHTMLとCSSを検出してjsfiddleのようなエディタで確認できるChromeエクステンションです。 ブラウザの...
Ads