Resource - Webデザイナー向け

任意の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アプリです たまにインフィニティスクロールのローディング時での採用も見かけますね。テキストが表示されますよ...
Ads

シンプルで扱いやすい、簡易的な選択式チャットボットフレームワーク・「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はスタイルを変更で...

画像をアップロードするだけで人物部分だけ切り抜いてくれるWebアプリ・「Trace by Sticker Mule」

Trace by Sticker Mule Trace by Sticker Muleは画像をアップロードすると、その画像の中から人物の部分を解析して自動で背景を切り取ってくれるWebアプリです 選択できないので精度に依存する事...

LaravelとVue.jsで構築されたオープンソースのプロジェクト管理ツール・「Goodwork」

Goodwork Goodworkはオープンソースとして公開されているLaravelとVue.jsベースのプロジェクト管理ツール/コラボレーションツールです basecampにインスパイアされて開発したそうです。非常にシ...

画像マウスホバーの様々なエフェクトを組み合わせて管理できるCSSエフェクトライブラリ・「Izmir Hover Effects」

Izmir Hover Effects Izmir Hover Effectsは画像へのマウスホバーの際に様々なエフェクトを組み合わせて実装、管理できるCSSエフェクトライブラリです 20のボーダーアニメーションエフェクト、9の...

SketchやAdobe XD、Figmaなどのプラグインを大量に収集している・「Awesome Design Plugins」

Awesome Design Plugins Awesome Design PluginsはSketchやAdobe XD、Figmaなどのプラグインを大量に収集しているキュレーションサイトです 各プラグインはそれぞれアクセスビ...

Blockstackを使ってデータを暗号化して保存できるオンラインのフォトストレージ・「pixus」

pixus pixusはBlockstackを使ってデータを暗号化して保存できるオンラインのフォトストレージです。名前がアレですが某プリンタの名前とは無関係です 検索や共有、フォルダによるカテゴライズが可能です。保存には...

企業のHTMLメールやテンプレート、リソースなどを紹介する・「Email Love」

Email Love Email Loveは企業などからくる、よく出来たHTMLメールを紹介したりテンプレート、リソースなどを紹介するHTMLメールギャラリーです 紹介されているEメールは全てHTMLで再現されているようです。H...

Font Awesomeを線画アイコンにした1300以上のアイコンセット・「Line Awesome」

Line Awesome Line AwesomeはFont Awesomeを線画アイコンにしたアイコンのセットです。Font Awesomeのカタログ全体を対象に線画アイコンを作成したそうで、その数は1300を超える量となっています...

Reactベースのライブ編集機能付きのCMSを構築する為のオープンソースなツールキット・「TinaCMS」

TinaCMS TinaCMSはGatsby及びNext.jsを使ったReactベースのライブ編集機能付きCMSを構築する為のオープンソースなツールキットです 軽量で分かりやすく理解しやすいUIに設計されており、直感的にコンテン...

アイソメトリックな画像を作成、SVGやPNG等でダウンロードできるオンラインエディタ・「Isobuild」

Isobuild Isobuildはアイソメトリック(等角投影法)な画像を作成、SVGやPNG、JPEG等でダウンロードできるオンラインエディタです 基本的には用意された素材を配置していくシンプルなもので任意の画像を生成...
Ads