iPhoneやApple Watch、Androidのアプリアイコンにリサイズ出来るツール・「App Icon Resizer」
App Icon Resizer App Icon Resizerは作成したアイコンをiPhoneやApple Watch、Android向けのサイズにリサイズしてくれるWebツールです。チェックボックスにチェックを入れてアイコン画像...
Resource - Webデザイナー向け
Canvasベースのグラフを描けるjQueryスクリプト・「Flot」
Flot FlotはCanvasを使ったチャートを実装する為のライブラリです。jQueryに依存しています。上図のようなシンプルなグラフに限らず様々なビジュアルのグラフに対応することが可能です。グラフのリアルタイムアップデートにも対応...
SVG関連の情報を配信する・「SVG News」
SVG News SVG NewsはSVGに関するチュートリアル記事や情報を配信するニュースサイトです。SVGをこれから勉強する、もう少し向上させたいという方に良さそうな印象でした。若干の探しにくさはありますが、このような特化したキュ...
RWD対応のシンプルなUIキット・「Poly」
Poly See the Pen Poly – A simple, modular UI kit built with Sass by Guil H (@Guilh) on CodePen. PolyはレスポンシブWebデザイン対応...
Go製のミニマルで軽量なブログエンジン・「Journey」
Journey JourneyはGoで書かれたミニマルなブログエンジンです。OSSとして公開されています。使いやすく、軽量で高速なブログエンジンの設計を心がけているとの事。Ghostのテーマと互換性があるみたいなのでテーマの作成も割り...
SASSで構築された軽量なフロントエンド開発フレームワーク・「Penguin」
Penguin PenguinはSASSで構築されたフロントエンド開発の為の軽量スターターキットです。OSSとして公開されています。必要最低限のコンポーネントも揃えられており、RequireJS併用でモジュールの管理も可能との事。個人...
Sketchのプラグインを探せる・「Sketch Plugin Filter」
Sketch Plugin Filter Sketch Plugin FilterはSketchのプラグインをまとめているWebサイトです。スクリーンショット付きでプラグインを紹介してくれています。Sketch Toolboxを使っい...
Foudationをマテリアルデザインに対応させた・「Material Foundation」
Material Foundation Material Foundationは人気のCSSフレームワーク・Foudationをマテリアルデザインに対応させたCSS/JSのセットです。日本ではBootstrapほど馴染んでいない印象で...
チートシートをアップロード・共有出来る・「Cheatography」
Cheatography Cheatographyは任意のチートシートをアップロード、共有するためのWebサービスです。国やタグを設定して公開、共有する事が出来る・・との事なので少し試してみたのですが、上手く動きませんでした・・・が、...
HTMLをmarkdown記法で書いたようなスタイルにするCSS・「i-love-markdown.css」
i-love-markdown.css i-love-markdown.cssはHTMLをmarkdown記法で書いたようなスタイルにするCSSです。上図はh1やtableタグで書いていますが、このようにmarkdown記法に見せるC...
HTML5ベースのノベルゲームを実装出来る国産ゲームエンジン・「O₂ Engine」
O₂ Engine O₂ EngineはHTML5ベースのノベルゲームエンジンです。HTML5なのでブラウザはまだ選ぶものの、デバイスを気にせず作れるのは素敵ですね。本ゲームエンジン開発者が提供するノベルゲームサービスのノベルスフィア...
動画のように表現出来るコンテンツスライダー・「Jquery Image Player」
Jquery Image Player Jquery Image Playerはコンテンツを動画のように再生して連続表示出来るJSスライダーです。jQueryに依存しています。上図のように、HTMLで書かれたテキストや画像等が含まれた...
商用でも自由に使えるCC0ライセンスの動画を配布する・「Pexels Videos」
Pexels Videos Pexels Videosは商用利用でも無料のCC0ライセンスな動画を配布するプロジェクトです。動画のカテゴリも食べ物や車、街や人物、太陽や空、海などの景色やビジネス向けなど様々用意されています。ダミー動画...
Googleフォントや任意のWebフォントの表示テストを行う為のオープンソースソフトウェア・「webfont test」
webfont|test webfont testはGoogleフォントや任意のWebフォントの表示テストを行うためのOSSです。テストしたいフォントを選ぶと、上図のようにベースラインとフォント、ダミーテキストが表示されます。テキスト...
CSSのみで作られたローディングアニメーションのセット・「Loaders.css」
Loaders.css Loaders.cssはCSSのみで作られたローディングアイコンのセットです。CSSで作られているのでスタイルの変更やスピード調整もしやすく、軽量で済む反面、対応ブラウザも限られるので現状ではスマフォ向けになり...
セマンティックなフロントエンドフレームワーク・「mice」
mice miceはセマンティックなフロントエンド開発の為のRails製フレームワークです。設計も複雑な箇所はなく、主要なUIコンポーネントもひと通り揃えられている印象でした。アイコンはお馴染みのFont Awesomeが使われていま...
jPlayerとBootstrap併用でiTunes検索を実装する為のスクリプト・「iTunes Search」
iTunes Search iTunes SearchはjPlayerとBootstrap併用で、その場で視聴可能なiTunes検索を実装する為のスクリプトです。jQueryに依存しています。検索はSearch APIからjsonでデ...
スクロールに応じて映画のPV風にコンテンツを表示させるスクリプト・「Space.js」
Space.js Space.jsはスクロールに応じて映画のPVのようにコンテンツを次々と表示させていくスクリプトです。うまく説明出来ないので本サイトでスクロールをお試し下さい。以前流行ったパララックスなWebサイトの応用、みたいな感...
Webサイトのスタイルをユーザーがデスクトップ向けとモバイル向けに切り替えられるようにするスクリプト・「Responsible.js」
Responsible.js Responsible.jsはWebサイトのスタイルをPC⇔モバイルでスイッチ出来るようにするスクリプトです。他ライブラリに依存せず、単体で動いてくれます。前提条件として、Media Queriesを使用...
FoundationやBootstrapを使用しているWebサイト上にグリッドを表示するブックマークレット・「Grid displayer」
Grid displayer Grid displayerはFoundationやBootstrapといった人気のフレームワークを使用したWebサイト上にグリッドを表示させるブックマークレットです。単純にグリッドを表示させるだけでなく...
tableに書いたデータをGoogle Chartを使ってグラフ化する為のスクリプト・「Chartinator」
Chartinator Chartinatorはtableに書いたデータをGoogle Chartでグラフ化する為のスクリプトです。jQueryに依存しています。既存のtable要素に書かれたデータを可視化出来るのでユーザビリティの改...
アニメーションエフェクトのパターンと、その実装コードをコレクションしている・「AniCollection」
AniCollection AniCollectionはよく見かけるアニメーションエフェクトと、そのエフェクトを実装する為のコードをコレクションしているWebサイトです。各エレメントにマウスホバーするとエフェクトを見ることが出来ます。...