Resource - Webデザイナー向け

SVGによる波状のラインをランダムで作成できるジェネレーター・「Get Waves」

Get Waves Get WavesはSVGによる波状のラインをランダム作成できるジェネレーターです。波は曲線やポリゴン風、凹凸型などを選択可能です。 また、波の色や起伏の頻度なども設定可能です。気に入ったらDLして使う、みた...

Bootstrapをベースに、新しいコンポーネントやスタイルが追加されたUI開発キット・「Avant UI」

Avant UI Avant UIはBootstrapをベースに作られたUI開発キットです。新しいコンポーネントやスタイルが追加されています。 例えばカラーはSNSなどのブランドカラーやグラデーションが追加されていたり、テーブル...

Googleスプレッドシートを瞬時にJSON形式にするWebアプリ・「Gson」

Gson GsonはGoogleスプレッドシートのデータをURLの入力だけで瞬時にJSON形式にコンバートされたURLを返してくれるWebアプリです。 使い方は他の同様のツールと同じで、CSV形式を選択して公開設定にしてから使え...
Ads

大きなサイズでも高速動作するシンプルなJSONビューア・「Dadroit」

Dadroit Dadroitは大きなサイズのJSONファイルでも高速表示できるJSONビューアデスクトップアプリです。Blockstackと連携させる事も出来るみたいです。 VSCodeやSublimeなど人気のテキス...

商用でもクレジット無しで無料で使える高品質な写真素材を配布するストックフォト・「picjumbo」

picjumbo picjumboは商用でも個人でもクレジット不要で無料で使えるストックフォトサイトです。高品質で高解像度な素材を提供してくれています。 6000x4000などの大きなサイズで提供されており、配布されている写真は...

円型での切り取りも可能な画像クロップライブラリ・「Cropme」

Cropme CropmeはJS製の画像クロップライブラリです。円型での切り取りや回転後の切り取りなどが可能となっています。バニラでもjquery併用でも対応可能です。 従来のクロップツールは画像が固定されていて、切り取る範囲を...

ユニークなCSSグラデーションをコレクションしている・「Gradient Magic」

Gradient Magic Gradient MagicはユニークなCSSグラデーションをコレクションしているプロジェクトです。 ユニークなmのだけでなく、ベーシックなものから複雑なもの、境界線が暈されてないものやチェ...

form要素を対話形式で作成できるスクリプト・「Conversational Form」

Conversational Form See the Pen Conversational Forms - native validation (v1.0.0 feature) by kachibito (@kachibi...

デザイナーと開発者が同じプロジェクトで一貫したUI設計が出来るよう配慮されたReact.js向けUIフレームワーク・「Atomize React」

Atomize React Atomize ReactはオープンソースのReact.js向けUIフレームワークです。デザイナーと開発者が同じプロジェクトで作業するにあたって一貫したUIを設計できるよう配慮されているそうです。 ア...

GoogleドキュメントでWebページを作成、公開できるOSS・「ImportDoc」

ImportDoc ImportDocはGoogleドキュメントで書いたコンテンツをそのままWebページとして公開できるようにするライブラリです。OSSとして公開されています。 Googleドキュメントで管理できるので簡易的...

オープンソースのシンプルでモダンなepubビューアスクリプト・「Foliate」

Foliate Foliateはオープンソースのシンプルでモダンなepubビューアスクリプトです。epub.jsがベースとなっているそうです。 ナビゲーションやスクロールバー設置、カスタムテーマ、注釈ツールやハイライトなど、ep...

軽量でカスタマイズ性重視の、カスタムプロパティを使ったモダンなCSSフレームワーク・「HiQ」

HiQ HiQは軽量でカスタマイズしやすいCSSフレームワークです。PostCSSで構築されており、カスタムプロパティを導入したモダン設計で管理もしやすい印象です。 カスタムプロパティをふんだんに使っており、直感的な変数...

LottieフレームワークとFeather Iconプロジェクトを併用したネイティブアプリやWebアプリ向けのアニメーションアイコンセット・「flight」

flight flightはLottieフレームワークとFeather Iconプロジェクトを併用したネイティブアプリやWebアプリ向けのアニメーションアイコンセットです。 FeatherのシンプルなアイコンをLotti...

任意のベースカラーを設定すると、WarningやSuccessなどの最適なアラート用カラーを自動で選出してくれる・「Eva Deep learning color generator」

Eva Deep learning color generator Eva Deep learning color generatorは任意のベースカラーを元に、最適なアラート用カラーを選出してくれるカラーアプリです。名前の通り、ディ...

シンプルさ重視の軽量CSSフレームワーク・「TypeSafe CSS」

TypeSafe CSS TypeSafe CSSはシンプルさ重視の軽量なCSSフレームワークです。見出し、パラグラフ、リスト、引用、テーブルとコードハイライトのみのスタイルを提供します。 日々複雑化していくWebの世界はそれは...

preタグに書いたデータをダイアグラムとしてビジュアル化するスクリプト・「Pinker.js」

Pinker.js Pinker.jsはpreタグに書いたデータをcanvasにダイアグラムとして描いてくれるスクリプトです。 特定のルールに沿った書き方をpreタグにする事で簡易的なダイアグラムを生成できる、というもの。割と複...

Webサイトマップをビジュアル化して見積もりを計算できる・「Octopus.do」

Octopus.do Octopus.doはWebサイトのサイトマップをビジュアル化して見積もりを計算、シェアできる見積もり計算アプリです。 ページごとに作成する項目を書き、工数を設定すると自動で計算してくれる、というも...

任意の画像にフィルターを掛けたりリサイズ、切り抜き等の加工を施してダウンロードできるOSSの画像編集ライブラリ・「Filerobot Image Editor」

Filerobot Image Editor Filerobot Image Editorは任意の画像にさまざまなフィルターを掛けたりリサイズ、クロップ、回転などの加工を施したうえでダウンロードできるようにする、画像加工ライブラリです...

コピペで使えてカスタマイズもしやすいCSSアニメーションコードをまとめている・「CSS WAND」

CSS WAND CSS WANDはコピペで使えるように工夫されたCSSアニメーションコードのまとめサイトです。HTMLとCSSをそれぞれコピーして簡単に利用できるようになっています。 まとめと言ってもまだ数は少ないですが、...

CSSフレームワークを元に、直感的な操作でWebサイトを構築できる開発者向けのWebサイトビルダー・「Frontnd Builder」

Frontnd Builder Frontnd BuilderはCSSフレームワークを元に作られたテンプレートから、D&Dによるレイアウト調整やクリック→テキスト編集など、直感的な操作でWebサイトを開発できるWebサイトビルダーです...

Flexboxでやりたいレイアウトを、ビジュアルを見ながら選択肢を選んで作成、コードをコピーできる・「Flex」

Flex FlexはFlexboxでやりたいレイアウトを、ビジュアルを確認しながら選択肢を選んで作成、コードをコピーできるシンプルなWebアプリです。設定項目の多いFlexboxは様々なレイアウトに対応できる反面で、覚えなければな...

使いやすさを最重視した、ミニマルで直感的に操作できるUIのフローチャート作成ツール・「Zen Flowchart」

Zen Flowchart Zen Flowchartは使いやすさ重視のミニマルなフローチャート生成ツールです。直感的に操作、作成する事が出来るよう設計されています。出来ることはノードやテキストの追加または移動、ノード同士の接...
Ads