シンプルさと軽量さを重視したFlexboxベースのCSSグリッドフレームワーク・「Grd」
Grd Grdはシンプルさと軽量さを重視したFlexboxベースのグリッドフレームワークです。単純にグリッドシステムの提供のみでUIの提供は一切ありません。圧縮版で512バイトとの事。グリッドシステムはよくあるUIフレームワークの一部...
Resource - Webディレクター向け
オープンソースとしても公開されているシンプルなビデオチャットツール・「Hubl.in」
Hubl.in Hubl.inは手軽にビデオチャットのルームを作成出来るWebサービスです。サービス提供だけでなく、オープンソースとしても公開されています。ユーザー登録も不要です。部屋を作ったらチャットしたいユーザーを招待すれば良いだ...
UI / UXデザイナー向けの、紙にデバイスの形状を印刷する為のテンプレートのまとめ・「Sketchsheets」
Sketchsheets Sketchsheetsはモバイルやタブレットデバイスの形状を印刷するためのテンプレートです。UI/UXデザイナー向けに作成したそうで、スケッチ等の為に紙にタブレットやモバイルデバイスを用紙に印刷出来るように...
スマフォアプリのUIを動画で紹介するシンプルなギャラリーサイト・「Appealing」
Appealing AppealingはスマフォアプリのUIを動画で紹介しているWebデザインギャラリーです。Tumblrで更新、その場で動画の閲覧が可能です。一応タグで分けられていますが、そこまでしっかりカテゴライズされている訳では...
オープンソースのフォントを厳選して収集、公開している・「open-foundry.com」
open-foundry.com open-foundry.comはOSSとして公開されているフォントをプロの目で厳選、収集しているWebサイトです。ノイズの無いオープンソースのフォントプラットフォームを目指しているそうで、選ばれたフ...
製品等のデータ比較のためのtable要素にフィルタ機能を付与する・「Products Comparison Table」
Products Comparison Table Products Comparison Tableはよくある製品情報の比較tableにフィルタ機能を付与するためのコードです。上記のようなUI。比較対象が沢山ある場合、ユーザーが任意...
ライブ等のイベント管理やチケット販売が可能なオープンソースソフトウェア・「Attendize」
Attendize Attendizeは音楽ライブやイベントなどの管理とチケットの販売を可能にするOSSです。PHPフレームワークのLaravelが使用されています。モバイル、タブレットフレンドリー、embed機能、イベントの主催者、...
3Dな都市の地図を作成するオープンソースのプロジェクト・「ViziCities」
ViziCities ViziCitiesは都市の地図を3D化するオープンソースのプロジェクトです。OpenStreetMapを地図ベースに3D化を進めているそうです。単純な3D化ではなく、リアルタイムなデータを付与した3Dマップを目...
リストやテーブルにフィルタリング機能やソート、検索機能を付与するスクリプト・「List.js」
List.js List.jsは既存のHTMLリストやテーブルに検索やソート、フィルタリング機能を付与するスクリプトです。他スクリプトを追加する事になりますが、ページネーションにも対応しているみたいです。他ライブラリに依存せず、シンプ...
モバイルファーストなヘルプデスク向けツール構築の為のオープンソースソフトウェア・「Helpy.io」
Helpy.io Helpy.ioはモバイルファーストに設計されたヘルプデスク向けのツール構築ソフトウェアです。社内外両面からの問い合わせ対応のためヘルプデスク要員を設けている企業も少なく無いと思いますが、そのヘルプデスクをサポートす...
シンプルなチャットシステムを導入する為のスクリプト・「Chatjs」
Chatjs Chatjsはシンプルなチャットシステムです。Facebookライクに右下に小さく表示されるシンプルなもので、プラットフォームにも依存しないそうです。ソーシャル要素を持ったWebアプリにあると便利かもしれませんね。Fac...
VSCOのようなフィルターを実装する為のスタイルシート・「CSSCO」
CSSCO CSSCOはスマフォの写真加工/共有アプリ、VSCOで出来るようなフィルターを画像にかけるためのスタイルシートです。InstagramのフィルタをかけられるCSSGramにインスパイアされたらしく、そのVSCO版を作成した...
メニュー等で利用されるハンバーガーアイコンから別のアイコンにアニメーションしながら変化させる為のCSS・「Hamburgers」
Hamburgers Hamburgersは、ハンバーガーアイコンから別のアイコンにシフトする際にアニメーションエフェクトを加える為のCSSです。スマフォ等のUIではおなじみのハンバーガーアイコンから矢印やxアイコンなどに変える際にア...
レスポンシブWebデザインにも対応した、APIのドキュメント作成キット・「Slate」
Slate SlateはAPIのドキュメントを作成する為のテンプレートです。RWD対応で、基本的には目次、説明、サンプルコードの3カラム構成になっているようです。このタイプの仕様書が個人的には一番見やすいです。ナビゲーションもよく見か...
シンプルなコンテンツエディタ構築の為のスクリプト・「Substance」
Substance Substanceは文章向けのシンプルなドキュメントエディタ構築の為のスクリプトです。いわゆるリッチテキストエディタのような類のものですが、少し趣が異なる印象ではありますね。動作サンプルでは文章用に特化した形に...
OSSやコード専門の検索エンジン・「CoCycles」
CoCycles CoCyclesはOSSやソースコード専門の検索エンジンです。よく見てませんが今はGithubのみの検索っぽい（違ったらゴメンナサイ）。コードやスターの数、最終コミット日、ファイルサイズ等はその場で表示してくれます。...
モバイルアプリ開発向けに構築されたBootstrapベースの軽量フレームワーク・「Mobility」
Mobility MobilityはモバイルWebアプリの為のJS/CSS/HTMLフレームワークです。Bootstrapベース(現在はVer.3)となっており、軽量さを売りにしているみたいです。基本的なUIもそれなりに揃えられており...
スマフォやタブレットのモニタに任意の画像を合成してモックアップを作成できる・「Smartmockups」
Smartmockups Smartmockupsはスマフォやタブレット、Apple Watchのようなウェアラブルデバイスのモニターに任意の画像を合成出来るWebサービスです。よく見かける合成サービスですね。以前ご紹介したMocke...
Bootstrapで使えるコードスニペットを集めている・「CodeLab」
CodeLab CodeLabはBootstrapで使えるコードスニペットを集めているWebサイトです。jQueryの情報を配信するjqueryRainというWebサイトで作っているコンテンツのようです。スニペットは動作デモも用意され...
Googleスプレッドシートを見やすく整形して任意のWebサイトに表示出来る・「Awesome-Table」
Awesome-Table Awesome-TableはGoogleスプレッドシートを見やすく整形して任意のWebページに表示してくれるサービスです。上記サンプルはGoogle公式のテンプレートをそのまま使って整形したもの。表示項目の...
オープンソースのデスクトップ用Gmail / Inboxクライアント・「Wmail」
Wmail Wmailはデスクトップ用のGmail / Google Inboxクライアントです。オープンソースとして公開されており、現在はOSXとLinuxに対応、Windowsへの対応も間近だそうです。複数Googleアカウントで...
React向けのリッチテキストエディタ用フレームワーク・「Draft.js」
Draft.js Draft.jsはリッチテキストエディタ構築のためのフレームワークです。React.js向けに作られており、カスタマイズしやすくシンプルに作られているみたいです。この手のフレームワークはあまり見かけないので覚えておく...