Resource - Webデザイナー向け

説明的なネーミングを施された実験的なカラーパレットを紹介する・「colors.lol」

colors.lol colors.lolは説明的なネーミングを施された実験的なカラーパレットを紹介するプロジェクトサイトです 色の名前の無いものに説明的な名前を付けてパレットを作る、みたいなプロジェクトみたいです。名前にはちょ...

CSS製の円グラフを手軽に作れるWebアプリ・「CSS Pie Chart Generator」

CSS Pie Chart Generator CSS Pie Chart GeneratorCSS製の円グラフを手軽に作れるシンプルなWebアプリです 画像だと管理が面倒だしCSSだとコード書くのが面倒な円グラフなので地味に需...

開発者向けの様々なチェックリストを公開している・「Checklist」

Checklist Checklistは開発者向けの様々なチェックリストを公開しているプロジェクトサイトです どこかで公開されているチェックリストを引っ張ってきているのではなく、こちらを公開しているAtölye15が社内で共有し...
Ads

unsplashの写真を比較してダウンロード数が多い方を当てるゲーム・「TopShot」

TopShot TopShotはunsplashの写真を比較してダウンロード数が多い方を当てるゲームアプリです CC0でクオリティの高い写真を提供するunsplashの写真で2つの写真を比較、DL数が多い方を選べたら次へ、間違え...

シンプルで汎用的な、オープンソースで提供される300以上のSVGアイコンセット・「Tabler Icons」

Tabler Icons Tabler Iconsはシンプルで使いやすい、オープンソースで提供される汎用的な300以上のSVGアイコンセットです TablerはOSSのシンプルなダッシュボードを提供するプロジェクトで、その一環で...

ユーティリティに焦点を当てた、インタラクティブなUI開発をサポートするCSSフレームワーク・「Shorthand」

Shorthand Shorthandはユーティリティに焦点を当てたモダンなCSSフレームワークです。インタラクティブなUI開発をサポートしてくれそう いわゆるプロパティの一括指定(ショートハンド)に関するものではなく、単純に開...

スミソニアン博物館に保管されている美術品など280万点をデジタル化、データをダウンロードできる・「Smithsonian Open Access」

Smithsonian Open Access Smithsonian Open Accessはアメリカにあるスミソニアン博物館に保管されている美術品など280万点をデジタル化、データをダウンロードできるオープンプロジェクトです ...

SVGアイコンを一か所でまとめて整理、管理できるデスクトップアプリ・「Iconset」

Iconset IconsetはSVGアイコンを一か所でまとめて整理、管理できるデスクトップアプリです MacアプリのIconJarと似たような感じでしょうか。フォルダを作ってセットで管理しつつ、アイコン単体にタグ付けす...

Webデザイナー向けに収集されたカラーとフォントのツールやリソースをまとめている・「Colors & Fonts」

Colors & Fonts Colors & FontsはWebデザイナー向けに収集されたカラーとフォントのツールやリソースをまとめているWebサイトです よくあるキュレーションサイトのように様々なアプリや記事をたんたんと纏め...

CC0で配布されている、髪型や顔などのパーツの組み換え可能な人物イラストを配布するプロジェクト・「Open Peeps」

Open Peeps Open Peepsは髪型や顔などのパーツの組み換え可能な人物イラストを配布するプロジェクトです CC0で配布されており、商用でも個人でも無料で自由にクレジット不要で利用する事が出来ます イラストは全...

プレビューを見ながら任意の平面充填を描画できるユニークなタイリング専用ドローツール・「EscherSketch」

EscherSketch EscherSketchはプレビューを見ながら任意の平面充填を描画できるドローツールです いわゆるタイリングを、結果を見ながら作成可能で、作ったタイル絵はタイル単位で保存したり描画する様子をSVGで保存...

Webページの各所の役割等をユーザーに伝えるページツアーを実装するスクリプト・「GuideChimp」

GuideChimp GuideChimpはWebページの各所の役割等をユーザーに伝えるページツアーを実装するスクリプトです 使い方も手軽で簡単、既存のWebページにも組み込む事が出来ます。nextはカーソルキーにも対応してあり...

ソフトなCSS Shadowを作れるシンプルなWebアプリ・「Neumorphism.io」

Neumorphism.io Neumorphism.ioはソフトなCSS Shadowを作れるシンプルなWebアプリです 上記や下部のような柔らかい印象の影を直感的な操作で作る事が出来ます ツールバーや背景のカラーピ...

軽量で非依存な、ダーク/ライトモード切り替えスクリプト・「DarkModeJS」

DarkModeJS See the Pen VwLYLzd by kachibito (@kachibito) on CodePen. DarkModeJSは軽量で非依存なダークモード/ライトモードの切り替えスクリプ...

JavaScriptライブラリやフレームワークを使わずHTML5、CSS、バニラなJSだけで作られたプロジェクト集・「Web Projects With Vanilla JavaScript 」

Web Projects With Vanilla JavaScript Web Projects With Vanilla JavaScriptはフレームワークやライブラリ等を使わずに純粋なHTML5+CSS+VannilaなJSで...

Webサイト開発の際にあると地味に便利なミニツールをまとめている・「Tiny helpers」

Tiny helpers Tiny helpersはWebサイトやアプリ開発の際にあると地味に便利なミニツールを集めているWebサイトです 1つのツールにつき1つの目的のために作られたミニツールをカテゴライズしている、みたいなも...

都市名を入力すると、その都市の道路のみを線画で抽出するオープンソースの地図アプリ・「city-roads」

city-roads city-roadsは任意の都市名を入力すると、その都市内の道路だけを線画で抽出、色などを変更してSVGなどでダウンロードできる地図アプリです OSSとしてソースコードが公開されています。企業や店舗の地図作...

任意のグラデーションカラーで色付けてダウンロードできる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で配布されています フォントをインストールして絵文字を入力すると手書き絵文字になってくれます。個人的に割と好きなので種類が増えてくれると嬉しいですね ...

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

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

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

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