Vue.jsベースのWebアプリケーション向けのマテリアルデザインフレームワーク・「Vue Material」
Vue Material Vue MaterialはVue.jsベースで作られたWebアプリケーションをマテリアルデザインに対応させるためのフレームワークです。コンポーネントやUIは再利用できるように意識して設計したそう。コンポーネン...
Resource - Webデザイナー向け
CSSで作るベーシックなローダーのセット・「CSS loader」
CSS loader CSS loaderはCSSのみで作れるベーシックなローダーを簡単に設定できるスタイルシートです。画像でよく見かけるエレメントをCSSで作った、みたいなもの。他に、少し凝ったものもあります。ここ最近はCSSのみで...
レスポンシブなEメールの雛形をユーザー登録不要で手軽に作成、ダウンロード出来る・「Pulp」
Pulp PulpはオンラインでRWDなEメールのテンプレを作成、ダウンロード出来るWebサービスです。無料で作成、ダウンロード可能で、ユーザー登録も不要、クレジットもコメントアウトで入るだけと手軽で気軽に使えます。エレメントを追加す...
CSSのみで出来たシンプルで実用的なアイコン集・「CSS ICON」
CSS ICON CSS ICONはCSSのみで出来たアイコン集です。それぞれのアイコンは上図のようにコードが紹介されており、各部位がハイライトされるようになっていて仕組みをわかりやすくしてくれています。スマフォの普及やオールドブラウ...
WordPressプラグイン不要で出来るコードを紹介する・「You Might Not Need That WordPress Plugin」
You Might Not Need That WordPress Plugin You Might Not Need That WordPress PluginはWordPressプラグインをわざわざ使わずとも少ないコードで実装出来...
レスポンシブなオーバーレイメニュー構築のためのフレームワーク・「responsive-overlay-menu」
responsive-overlay-menu See the Pen Responsive overlay menu - full menu with second menu example by Mario Loncarek (@ri...
WebアプリのためのシンプルでフレキシブルなUIフレームワーク・「Agile CSS」
Agile CSS Agile CSSはWebアプリケーションのためのフレキシブルなUIフレームワークです。タブやテーブル、通知、ツールチップ、ナビゲーションなどの各UIコンポーネントやエフェクト等、アプリに必要そうなコンポーネントが...
複雑なアニメーションにも対応できる、パフォーマンス重視のJavaScriptアニメーションエンジン・「KUTE.js」
KUTE.js KUTE.jsは高度なカスタムアニメーションにも対応できるパフォーマンス重視のJavaScript製アニメーションエンジンです。本サイトTOPにもあるような複雑なアニメーションコンテンツの実装をサポートしてくれます。コ...
ビジネスプロセスやサービス等の注文状況を管理するOSS・「Hydra OMS」
Hydra OMS Hydra OMSはビジネスプロセスや注文を管理するOMS(Order Management System)です。フローの自動化、ビジネスプロセスの強化・構築などが主な特徴とのことです。例えばピザ屋さんで配達のオー...
オープンソースとしても公開されているスマフォやタブレットにも対応のパスワードマネージャ・「bitwarden」
bitwarden bitwardenは様々なデバイスで使えるフリーのパスワードマネージャです。OSSとしてもソースコードが公開されています。ユーザーが登録したパスワードはAES256やPBKDF2によって暗号化されており、例えbit...
シンプルなラインで出来たアイコンフォント・「gonzocons」
gonzocons gonzoconsはシンプルな線のみでできたアイコンフォントです。フォントファイルとSVGが用意されています。汎用的で使いやすそうな印象でした。Font Awesomeと同じく、contentで使う時のUnicod...
TweetDeckライクにGithubリポジトリを表示する国産マルチタイムラインビューア・「Deck」
Deck DeckはGithubのリポジトリをTweetDeckのようにマルチタイムラインで表示してくれるビューアです。日本の方の開発されたアプリケーションで、Backlogにも対応してくれています。使い方も日本語で解説されていますの...
CSSアニメーションの遅延をコントロールする為のシンプルなフレームワーク・「Shift.css」
Shift.css Shift.cssはCSSアニメーションの遅延で要素をコントロールするフレームワークです。上記サンプルのように要素にかかるアニメーションを遅延させてコンテンツの構築をサポートしよう、というもの。CSSとほんの少...
ユニークな模様のパターンをSVGで配布する・「Hero Patterns」
Hero Patterns Hero Patternsはちょっとユニークな模様のパターン素材をSVGで配布するプロジェクトサイトです。結構昔に人気のあったSubtle Patternsっぽい感じ。使いたい模様をクリックすればメインカラ...
手軽にダミー画像を作成出来る軽量スクリプト・「placeholder.js」
placeholder.js placeholder.jsはクライアントサイドでダミー画像を生成する軽量スクリプトです。jquery等の他ライブラリへの依存もなく、2kb以下と軽量なのも良いですね。表示される画像はBase64ですが生...
CSSのみで作るシンプルなツールチップ・「Wenk」
Wenk WenkはCSSのみのツールチップを実装するシンプル軽量なCSSライブラリ。ツールチップの位置やテキストはカスタムデータ属性で管理できます。手軽で良いですね。PostCSS、Less、SCSSに対応しています。ライセンスはM...
任意のWebページのスクリーンキャストを撮って共有出来るChrome拡張・「Opentest」
Opentest Opentestは任意のWebページを自分の顔と一緒にスクリーンキャストを撮って共有出来るChromeエクステンションです。上図は試しに撮影したもの。カメラは起動させませんでしたがこのようにEmbedも可能です（無...
ドット絵+スプライトアニメーションを作成出来るピクセルアートツール・「ASEPRITE」
ASEPRITE ASEPRITEはドット絵の描画とスプライトアニメーションの作成が可能なピクセルアートツールです。Windows、Mac、Linuxで動作してくれます。使い方に関しては、かなり詳しく書いてくださっている方がいるのでそ...
input要素の入力をサポートする非依存スクリプト・「Cleave.js」
Cleave.js Cleave.jsはフォームでのinput要素の入力をサポートするスクリプトです。jQuery等のライブラリに依存せず、単体で動作してくれます。上記の動作サンプルのように、クレカの自動認識、右寄せ入力、電話番号入力...
記号や特殊文字を使ったローディング時のスピナーをCSSで作る・「text-spinners」
text-spinners text-spinnersは記号や特殊文字を使ってCSSで作るスピナーです。上例は分かりやすくするために大きなフォントで表示しています。contentプロパティに複数テキストを設定してkeyframesで動...
SVGで書かれたワイヤフレーム用のステンシルを検索、ダウンロードできる・「littleplaneapp.com」
littleplaneapp.com littleplaneapp.comはSVGで書いたワイヤーフレーム用のステンシルを探してDL出来るサービスです。SVGでワイヤーフレームを書くという発想が個人的にはあまり無かったのですがブラウザ...
WebサイトやアプリのUIをアニメーションで収集するギャラリーサイト・「UI Movement」
UI Movement UI MovementはWebサイトやアプリのUIをアニメーション画像で収集しているデザインギャラリーサイトです。と言っても管理者が収集しているのではなく、ユーザーが集めるキュレーションサービスのようです。実際...