Slideout.js - A touch slideout navigation menu for your mobile web apps. ネイティブアプリに近い動作のサイドメニューWeb実装「Slideout.js」。 ネイティブに近い実装をするのはなかなか難しいですが、比較的いい感じの挙動のサイドメニュー実装がJSのみで実現できます。 関連エントリ シンプルなサイドメニュー実装jQueryプラグイン「Panel slider」 開閉するサイドメニューの実装ができるjQueryプラグイン「tendina」 シンプルデザインなページサイドをメニューにできる「Simple Sidebar」

Inspiration for Button Styles and Effects | Codrops CSS3等をフルに活用してボタンのホバー時のエフェクトをこれでもかという位あつめたサンプル集。 単に数を集めただけではなく、それぞれの質も高く、流行りのデザインの物がまとまっているという感じで、ちょっとカッコいいボタンを作りたいというケースに参考になるサンプルです 関連エントリ ドラッグ＆ドロップにまつまるUIデザインのアイデア集 汎用iOS8用アプリアイコン30個セット「Jellycons iOS 8 App Icon Set」 フルスクリーンオーバーレイエフェクトの色々サンプル

pixle/subway GitHub 306種類のスマホアプリアイコンセット「subway」 次のようなデザインの汎用アイコンセットです。iOS, Android, WindowsPhone用のアプリに。 関連エントリ フリーのiOS7アイコン800個セット 地図と共に使えそうな２００のフリーベクターアイコン集

CSS3Ps - Download Plugin Photoshopで生成したグラフィックをCSS3に変換できるPhotoshopプラグイン「CSS3Ps」。 画像での出力ではなくてCSS3にするところが面白くて使い方によってはWEBサイトの高速化に使えそうです 関連エントリ 画像をRetina用にリサイズしてくれるフリーのPhotoshopアクション「Retinize It」 PhotoshopでデザインしたシェイプをCSS3に変換するプラグイン「CSS3Ps」

Distill: Free HD Stock Video Footage 商用利用もフリーの動画素材投稿サイト「Distill」 最近では動画を背景にするサイト等もでてきていますが、動画を自前で用意してもよいのですが、高品質な自分では撮影出来ないような動画が入手できるサイト。 今後もどんどん増えていくそうです。 関連エントリ 動画をフルスクリーン背景にすることができるjQueryプラグイン「Vide」 動画をクールにモーダル化してハイライトできるjQueryプラグイン「Video Lightning」 JavaScriptで動画やWebcamからGIFアニメを作れる「gifshot」 Youtube,Vimeo,Dailymotion等の動画APIを共通化できる「jquery-video」

Simple Morphing Search | Codrops 超カッコ良い検索フォームのチュートリアル＆デモ。 検索窓といえば、単にinputがあって、というのを想像しますが、こちらを見れば、検索フォームはもっと改善が可能だという事を思い知らされます 検索窓がバーンと広がって全画面に。検索のサジェスト等も表示されます。 関連エントリ より分かりやすいプレースホルダを実装するチュートリアル WYSIWYGなサイト利用チュートリアルを簡単実装「Shepherd」

Nibbler - Test any website WEBサイトの品質をテストしてくれるWEBツール「Nibbler」。 サイトのURLを入れて送信すると、サイトのアクセシビリティや利用テクノロジー、コードのクオリティやSNSスコア等が数値化されて表示されます。 自分のサイトの改善点を発見する意味でも一度試してみるとよさそう 関連エントリ 画像等を抽出しつつRSSフィードをTwitterに投稿できる等便利なWEBツール「Twibble.io」 フラットサイトのカラースキーム生成等に使えそうなWEBツール「colourcode」

HumHub - A flexible Open Source Social Network Kit for Social Enterprise Platforms, Social Intranets and other Social Collaboration facebook風のSNSを独自に構築できる「HumHub」。 ホスティングサービスと、Githubによるソースコード提供が行われています モダンなUIで簡易的にSNSが作りたい場合に使ってみてもよさそうです 関連エントリ Twitter,FB,Lineなどへのシェアを実現するシンプルなjQueryプラグイン「SNS Share」

Flickerplate Plugin フリックでページ切り替えができるようにするjQueryプラグイン「Flickerplate」 マガジンをめくるように横フリックで画面が変わるようなWEBサイトを簡単に作れるプラグインです。 必要なライブラリを読み込んだら、ulでページをリスト定義して、$(element).flicker() で初期化するだけで簡単にマガジン風ページができあがります 関連エントリ タップ操作とクリックのイベントを統一できるjQueryプラグイン「jQuery Finger」 ページを下に引っ張ると更新されるiPhone風UIを提供するjQueryプラグイン「Hook.js」 スマホ、PCで使えるサイドバー実装ライブラリ「Slidebars」 スマホアプリの操作ムービーに使えるジェスチャー素材「Precomposed Touch Gestures」 レスポンシブなカバー

Dynatable.js - jQuery plugin for HTML5 JSON interactive tables and more HTML5＋JSONでインタラクティブなテーブルを作れる「Dynatable.js」 JSONからtable、tableからJSON形式に変換でき、実装できるテーブルもソートしたり件数を絞り込めたり検索できたりと、リッチにしてくれ、かつシンプルなデザインで使いやすいテーブルが作れるライブラリです。 tableはデータと密接な関係にあることが多いですから、こういうライブラリは結構使えそうです。 関連エントリ テーブルを折りたたみ可能なツリー型グリッドに変換できる「TreeGrid」 普通のテーブルをExcel風に超カッコよくしてくれるjQueryプラグイン「ParamQuery」 テーブル行をインクリメンタル検索できるようにするjQueryプラグイン

Flatastic Mobile UI Kit | The Design Inspiration フラットな大量のコンポーネントが詰まったフラットなモバイルUIキット「Flatastic Mobile UI Kit」 次のようなフラットで美しいモバイルUIキットがダウンロード可能です。PSD、PNGの形式が利用可能です UIデザインの参考にしたり、活用したりできそう 関連エントリ 100以上のコンポーネントUIが詰まったフラットデザインのUIキットPSD素材「Flatic」 フラットなUIデザインキットPSD25個

Draggabilly 単体で動くドラッグ＆ドロップ用JSライブラリ「Draggabilly」 ドラッグ＆ドロップだけ使いたい場合に使えそう。マウスだけでなく、タッチにも対応しています。 ドラッグ開始、移動中、終了時にイベントハンドラを設定できます スマホサイトで軽く手軽にドラッグを使いたい場合に検討してみてもよさそうですね 関連エントリ ドラッグ＆ドロップでアップロードが簡単実現できるjQueryプラグイン「Dropzone.js」 ドラッグ＆ドロップによるクールなファイルアップロードを実現できる「Dropzone.js」 ドラッグ＆ドロップで並び替えができるダッシュボード作成jQueryプラグイン「sDashboard」 ドラッグで回転する3Dオブジェクトが作れる「ThreeSixty」 クロスブラウザでファイルのドラッグ＆ドロップ、Ajaxアップロードを可能にする「FileDrop」

PhotoJShop PhotoshopばりのフィルタをJSでかませるjQueryプラグイン「PhotoJShop」 画像をぼかしたり、シャープにしたり、エンボス加工したり、白黒・セピアにしたりとJavaScriptでブラウザ上で加工ができます。 若干重い処理になる場合もあるようですが、ブラウザ上で簡単にフィルタをかけられるのは便利かもしれませんね 関連エントリ 複数の画像を組み合わせて3Dっぽく回転できる「jQuery Interactive 3D」 画像、地図、動画等何でも埋め込めるクールでフラットでレスポンシブなLightBox「VenoBox」 線を描きながらギャラリーの画像を選択できるようにするjQueryプラグイン「Wrangle」 要素の背景画像を伸縮してくれるレスポンシブWEBデザインに必携のjQueryプラグイン「Wallpaper」 アップロードで簡単に画像をbase6

sDashboard GoogleAnalyticsみたいなダッシュボードが作れるフレームワーク「sDashboard」。 次のように、ページ内にドラッグ＆ドロップで移動できるウィジェットを配置し、各種グラフやリストで表示できるダッシュボード作成フレームワーク。 １画面でサイトやアプリの重要な指標をまとめたい場合に使えそうです。 関連エントリ HTML5＆レスポンシブなPHPダッシュボード作成フレームワーク「RazorFlow」 ドラッグ＆ドロップで並び替えができるダッシュボード作成jQueryプラグイン「sDashboard」 Windows8スタイルのダッシュボードUIが作れる「Dashing」 どんなデータもリアルタイムなグラフにできるフレームワーク「FnordMetric」 水量・温度・メーター等、産業用のグラフを描画できるjQueryプラグイン「Industrial.js」

Pizza Pie Charts | Playground from ZURB レスポンシブな円グラフが描画できる「Pizza Pie Charts」 次のような円グラフ、ドーナツ型の円グラフが描画可能。マウスカーソルに応じてインタラクティブに動作する他、ブラウザサイズに応じて最適なサイズにリサイズされるレスポンシブ仕様。 グラフも当然レスポンシブ対応していたほうが使いやすいですね。 関連エントリ フラットデザインがクールな円グラフ描画jQueryプラグイン「Pie Chart」 シンプルだけどカスタマイズが簡単でインタラクティブなグラフが色々描ける「Ember Charts」 クールでアニメーションするグラフを描画できるHTML5チャートライブラリ「Chart.js」

Domain Name Search ドメイン名の空きをチョッ速検索できる「domize」 com, net, org, co, io に対応していますが、サービス用にドメインを取る際に活用できそうです。 関連エントリ フラットでシンプルさがいい感じのツールチップライブラリ「Simptip」 フラットデザインが美しいシンプルかつスモールなツールチップjQueryプラグイン「Tipr」 JavaScriptオフ、CSSをのみで動くツールチップライブラリ「hint.css」

Font Combiner | Custom web fonts and web icons 大量のフォントから好きなフォントだけ抜き取ってWEBフォント化できる「Font Combiner」。 使う文字だけをドラッグ＆ドロップで移動させて好きなWEBフォントが作れます。アイコン等も多数用意されているので、自分のサイトだけに最適化されたWEBフォントが作れます 関連エントリ サイトのフォントを特定のWEBフォントでプレビューできる「TypeWonder」 Webフォントとして使えるピクトグラムアイコンセット「MFG Labs icon set」 ブラウザ上でアイコンを選んでアイコンフォントが作れる「IcoMoon」 汎用で使えそうなフリーのアイコンフォント「Genericons」 手書き風の英文フォント10

Web Audio API Demo Web Audio APIを使ったクールな音楽プレイヤーデモ。 次のようなフラットなデザインですがカッコいい音楽プレイヤーの実装デモです。 再生、停止の他、ボリューム調整機能もカッコよく、音声にエフェクトをかけることもできます 普通のプレイヤーじゃだめだ、という方は参考にしてみては。 関連エントリ シンプル多機能なWebオーディオ再生ライブラリ「howler.js」 レスポンシブ＆タッチフレンドリなWEBベースの音楽プレイヤー実装デモ

文字を高速に切り替えながらテキストをカッコよく表示できるjQueryプラグイン「Text Effects」 2013年07月25日- Text Effects | Fourdesire 文字を高速に切り替えながらテキストをカッコよく表示できるjQueryプラグイン「Text Effects」 表示するテキストを１文字ずつ切り替えながら読めるテキストにしていく、Flashなサイトではよく見るエフェクトをjQueryで実現。 $(".text-effect").textEffect() みたいに実行するだけで簡単。 速度やリピート回数などのオプション指定が可能です。 関連エントリ CSS3による多彩なテキストアニメーションが実装できるjQueryプラグイン「Textillate.js」 テキストエリアを動的リサイズ＆カスタマイズ可能なjQueryプラグイン テキストを要素内にうまく収めてはみ出

skrollr - parallax scrolling for the masses iOS/Android/PCで使えるパララックスページ作成用jQueryプラグイン「skrollr」 プログレスバー付きのパララックス効果が作れます。デモがなかなかいい感じです。 パララックスなサイトを作る際の１つの選択肢として覚えておいてもよさそう 関連エントリ レスポンシブなパララックス効果付きサイトを作るフレームワーク「CoolKitten」 パララックスなスライダーを実装できるjQueryプラグイン「FractionSlider」 パララックス効果を作るスクリプトやプラグインのまとめ