Resource - Webデザイナー向け

オープンソースのプロジェクトを探したり比較できる・「Openbase」

Openbase OpenbaseはGithub等で公開されているオープンソースのプロジェクトを探したり比較できるWebアプリです。 TopページではJavaScriptやCSSなどのフレームワークを比較できると謳っていますが、...

FlexboxやCSS Gridでよく用いられるレイアウトのコードを提供する・「1-Line Layouts*」

1-Line Layouts* 1-Line Layouts*はFlexboxやCSS Gridでよく用いられるレイアウトのコードを提供するプロジェクトサイトです。 センター配置やサイドバーを持った2カラムレイアウト、ヘッダ/メ...

テキストや背景のグラデーションカラーを手軽に設定できるCSSライブラリ・「grxdients.css」

grxdients.css See the Pen KKVRrbN by kachibito (@kachibito) on CodePen. grxdients.cssはテキストや背景のグラデーションカラーを手軽...
Ads

HTML/CSS/JavaScriptで作られた汎用的なCC0のコンポーネントを動作確認したりコードをコピーしたり選んでまとめてダウンロードできる・「html.systems」

html.systems html.systemsはHTML/CSS/JavaScriptで作られた汎用的なコンポーネントをまとめたプロジェクトサイトです。 各コンポーネントはその場で動作や表示の確認をしたり、コードをコピーした...

サクサク使えるシンプルなカラーパレット生成ツール・「Color Palette Generator」

Color Palette Generator Color Palette Generatorはサクサク使えるシンプルなカラーパレット生成ツールです。 5色固定のランダム生成ですが基本的にspaceキーとCキーの2つのキーボード...

任意のキーワードでブランドと、そのロゴやテーマカラーを調べられる検索エンジン・「Brandfetch」

Brandfetch Brandfetchは任意のキーワードでブランドと、そのロゴやテーマカラーを調べられる検索エンジンです。 ブランド名は任意のキーワードを入力すると候補が表示されるインクリメント検索となっており、それぞれのブ...

ユーティリティも用意された超軽量なCSSレイアウトライブラリ・「lyt」

lyt See the Pen gOPXPLK by kachibito (@kachibito) on CodePen. lytはユーティリティも用意された超軽量なCSSレイアウトライブラリです。flexboxベース...

WebサイトやWebアプリのデザインや開発に役立つツールやリソースを探せる・「Webdesign Toolbox」

Webdesign Toolbox Webdesign ToolboxはWebサイトやWebアプリのデザインや開発に役立つツールやリソースを探せるキュレーションサイトです。 フォーラムや各デザインツール、開発ツール、メディアスト...

アートライクな背景パターンを配布する・「Paaatterns」

Paaatterns Paaatternsはアートライクな背景パターンを配布するプロジェクトサイトです。 いくつかのアートなパターンがSketch,やFigma、Adobe XD、Illustrator用のファイルやpng、sv...

生産性や効率の向上に貢献してくれそうなツールやアプリケーションを収集している・「theo.tools」

theo.tools theo.toolsは生産性や効率の向上に貢献してくれそうなツールやアプリケーションを収集しているキュレーションサイトです。 700以上のツールやアプリケーションが集められてて、業種や目的でソート出来るよう...

匿名で任意のファイルを共有できるOSSなWebアプリ・「beam.cafe」

beam.cafe beam.cafeは匿名で任意のファイルを共有できるOSSなWebアプリです。ログインやユーザー登録などは双方とも不要で共有用のURLを伝えるだけで利用可能です。 ファイルはサーバー上に保存されるのではなく、...

様々なブランドのロゴに使用されているフォントを紹介する・「Font In Logo」

Font In Logo Font In Logoは様々なブランドのロゴに使用されているフォントを紹介するWebサイトです。有名なブランドのフォントを探せる検索エンジンとして提供しているそうです。 開発者の所属するデザインチーム...

Webサイトやアプリのデザインや開発の際に役立つリソースやツールを各カテゴリに分けて集約した・「Undesign」

Undesign UndesignはWebサイトやアプリのデザインや開発の際に役立つリソースやツールを各カテゴリに分けて集約したキュレーションサイトです かなり細かいカテゴリに分けられているので迷うことなく目的から必要なツール等...

成功したブランドのWebサイトに焦点を当てたUIデザインギャラリー・「Convertux Interfaces」

Convertux Interfaces Convertux Interfacesは成功したブランドのWebサイトに焦点を当てたUIデザインギャラリーです。 ブランドが何を持って成功しているかは認知の数値に尽きると思うので、特別...

色のコントラストが視覚障害を持つ様々な人にどのように影響するかについて教えてくれる・「Who Can Use」

Who Can Use Who Can Useは色のコントラストが視覚障害を持つ様々な人にどのように影響するかについて教えてくれるユーザビリティツールです。 任意の背景とテキストのカラーを指定すると、色覚異常の各症状のシミュ...

手軽に扱えるタッチフレンドリーで汎用的なカルーセルライブラリ・「keen-slider」

keen-slider keen-sliderは手軽に扱えるタッチフレンドリーで汎用的なカルーセルライブラリです。 他ライブラリを必要としない非依存型でタッチデバイスファーストな設計となっています。操作もシンプルで様々な用途に使...

Animate.cssを使用してスクロールに応じてコンテンツにアニメーションエフェクトを追加できる軽量スクリプト・「Josh.js」

Josh.js See the Pen wvMzNYv by kachibito (@kachibito) on CodePen. Josh.jsはAnimate.cssを使用してスクロールに応じてコンテンツにアニ...

ブラウザで動作するオープンソースのテキストエディタ・「Writty」

Writty Writtyはブラウザで動作するオープンソースのテキストエディタです。HTML/JavaScript/CSSで作られています ライティングに集中できるよう、ミニマルなUIでツールバーも最小限に、且つサイドに寄せられ...

チャートも含める事が出来るテーブルライブラリ・「AnyGrids」

AnyGrids See the Pen YzwWpoK by kachibito (@kachibito) on CodePen. AnyGridsはチャートも含める事が出来るテーブル生成JavaScriptライブラ...

SVGのカスタムシェイプを直感的に作れるシンプルなWebアプリ・「Shape Divider」

Shape Divider Shape Dividerはヒーローイメージやセクション間で使えそうなSVGのカスタムシェイプを直感的に作れるシンプルなWebアプリです 実際に完成図を見ながらセッティング、作成できるので特別な知識な...

class不要で基本的なスタイルを提供するCSSフレームワーク・「Basic.css」

Basic.css See the Pen GRooBMO by kachibito (@kachibito) on CodePen. Basic.cssはclass不要で基本的なスタイルを提供するCSSフレームワーク...

フォルダの構造をビジュアル化してくれるクロスプラットフォームのファイルマネージャ・「cryo」

cryo cryoはフォルダの構造をビジュアル化してくれるクロスプラットフォームのファイルマネージャです。Windows、Linux、MacOSなどで動作します 左ペインから任意のフォルダを右ペインにD&Dすれば自動でビジュアル...
Ads