jsfiddleやCodepenのようにブラウザでJavaScriptを実行テストできるオープンソースのWebアプリ・「Editor」
Editor EditorはjsfiddleやCodepenのようにブラウザでHTML/CSS/JSのコードを実行テストできるOSSです。emmetによるコード補完やLint機能、センターバーを動かす事でレスポンシブWebデザインの表...
Resource - Webデザイナー向け
JavaScript製のオープンソースなガントチャートライブラリ・「Frappe Gantt」
Frappe Gantt Frappe GanttはJS製のOSSなガントチャートライブラリです。サンプルのスケジューラーではタイムスケールはドラッグでチャートの移動や伸縮が可能で、クリックで詳細が表示されるようになっています。UIは...
任意の画像から美しいカラーパレットを自動生成、エクスポートできる・「ColorKitty」
ColorKitty ColorKittyは任意の画像から美しいカラーパレットを自動生成、PNGやJSON、SCSS、HEXなどでエクスポートできるWebアプリです。自動生成されますが、自己調整も可能で、画像上のカラーピッカーの役割の...
CMSやフレームワークとの統合を目的としたブロックベースのコンテンツエディタ・「Hyper Editor」
Hyper Editor Hyper EditorはCMSや各フレームワークとの統合を目的としたブロックベースのコンテンツエディタです。JS製で、バックエンドに依存しないのが特徴だそうです。JS製のエディタである事で、一方のCMSでは...
日本にも対応のシンプルな印刷用カレンダーを作れる・「Calendar Generator」
Calendar Generator Calendar Generatorはオンラインで印刷用のカレンダーを作れるWebアプリです。日本を含め、様々な国に対応しています、といっても休日等が反映されるのではなく、月～土や1～12月といっ...
軽量でレスポンシブ対応の、classを使わないCSSフレームワーク・「Water.css」
Water.css Water.cssは軽量でレスポンシブWebデザイン対応のCSSフレームワークです。classを使っていない為、セマンティックなHTMLのWebサイト制作に向いています。これといった装飾も無く、シンプルで見やすくす...
Markdownでナレッジを共有できるプラットフォーム・「CodiMD」
CodiMD CodiMDはMarkdownによるドキュメント、ナレッジを共有、蓄積できるプラットフォームです。Facebook、Twitter、GitHubなどの認証でログイン可能となっており、複数人でドキュメントを共有可能となって...
ログインページや値段表、コンタクトフォームなどのUI/UXをより良くするためのチェックリスト・「Checklist Design」
Checklist Design Checklist Designは様々なUI/UXのベストプラクティスをチェックする為のリスト集です。例えばログインページならロゴは使われているか、ユーザーに何をさせたいかが明示されているか、どこにど...
アクセシビリティツールやデザインバージョン管理、モックアップや3Dモデリングなど、様々なデザイナーに役立ちそうなツールやリソースのまとめ・「Awesome Design Tools」
Awesome Design Tools Awesome Design Toolsは様々なデザイナー向けのツールやリソースを収集しているキュレーションサイトです。フィードバックツールを展開するFlawlessのスタッフが作成しているキ...
サンプルのUIを確認しながらカラースキームを作成、様々なコードでエクスポートできる・「Geenes」
Geenes GeenesはサンプルのUIを確認しながらカラースキームを作成、様々なコードにエクスポートできるWebアプリです。サンプルとして用意されたUI集のカラーが、色を変更する事でインタラクティブに変化するのでリアルタイムに確認...
よく見かけるCSSアニメーションエフェクトのスニペットコードをコピーできる・「CSSeffectsSnippets」
CSSeffectsSnippets CSSeffectsSnippetsはちょいちょい見かけるホバーエフェクト等を実装できるCSSコードスニペットをクリックだけでコピーできるプロジェクトサイトです。特にそれ以上の機能はなく、単純にス...
任意のWebサイト等のスクリーンショットを、簡易的なモックアップ画像に変換してくれる・「mockdowns」
mockdowns mockdownsは任意のWebサイトやコンテンツ等のSSをアップロードすると、簡易的なモックアップ画像に自動変換してくれるWebアプリです。UIの説明動画などを作る際に利用できるとの事です。忠実性はなかなかでした...
オープンソースのアバターイラスト作成ジェネレーター・「Avataaars Generator」
Avataaars Generator Avataaars Generatorはオープンソースのアバターイラスト作成ジェネレーターです。なんとなくよく利用されてるっぽいスタイルのアバターイラストを作成し、ダウンロードできる、というもの...
スクロールに応じて要素にアニメーションエフェクトを付与できるシンプルで軽量なスクリプト・「lax.js」
lax.js lax.jsはスクロールに応じて要素にアニメーションを付与させる軽量スクリプトです。圧縮版で2kbほど、非圧縮でも8kbほどで依存性もありません。基本的にはスクリプトを読み込んで初期化、カスタムデータ属性で設定するだけの...
プレーンテキストでデータを入力すると自動でチャートを生成してくれるWebアプリ・「FastCharts」
FastCharts FastChartsはプレーンテキストでデータを入力すると、そのデータを元に自動でチャートを生成してくれるWebアプリです。データの入力方法は用意されているテストデータを使えばすぐに理解できるので割愛します。チャ...
色とアクセシビリティの関係について、インタラクティブな操作で体感しながら学べる・「Color.review」
Color.review Color.reviewは色とアクセシビリティに関してインタラクティブな操作で体感しながら学べるWebアプリです。用意されたカラーピッカー上には3本のラインがあり、色を変更する事で場所が移動します。このライン...
オープンソースのGoogle Image Charts代替・「QuickChart」
QuickChart QuickChartはオープンソースのGoogle Image Charts代替ツールです。既に3月14日に停止されるImage Charts APIは廃止、Google chart APIに移行するよう求め...
座標とタイムスタンプのデータをJSONで渡すとGoogleマップ上でその経路をアニメーション表示してくれるスクリプト・「maps-journey-replay」
maps-journey-replay maps-journey-replayは座標とタイムスタンプのデータをJSONで渡すとGoogleマップ上に経路をアニメーション表示してくれるスクリプトです。説明下手なせいでピンとこないかも...
どんなデバイスでも適切なフォントサイズにしてくれるスタイルシート・「RFS」
RFS RFSは様々なモニターサイズのデバイスでも適切なフォントサイズを計算するCSSです。RFSはresponsive font sizesの頭文字を取った略称だそう。Sass、PostCSS、Less、Stylusなどもサポートさ...
jQueryライクな構文でDOM操作を行うために開発された超軽量ライブラリ・「femtoJS」
femtoJS femtoJSはjQueryライクな構文でDOM操作を行うために開発された超軽量JavaScript(ES6)ライブラリです。たった20行、圧縮すると0.4kb程度のライブラリで、以下のように概ねjQueryと同じ書き...
任意のカラーの組み合わせのアクセシビリティをチェックしてくれる・「Accessible Brand Colors」
Accessible Brand Colors Accessible Brand Colorsは任意のカラー同士の組み合わせのアクセシビリティチェックを行ってくれるツールです。2つ、あるいは複数のカラーを選択すると、そのカラー同士のア...
PSやSketchファイルも用意されたBootstrap 4ベースのオープンソースUIキット・「Material Kit」
Material Kit Material KitはBootstrap 4ベースのUIキットです。その内容は極めて豪華なものとなっており、PhotoshopやSketchファイルも用意、HTMLだけでなく、WordPressテーマも用...