Got Wood? UI Design Elements | MediaLoot これは斬新！木のUIで訪問者を驚かせよう、なUIパーツ。 木のiPhoneケースや木のキーボード等、木とITを絡めるとなぜかインパクト絶大ですが、木のUIキットを発見しました。 これでページデザインをすれば自然の温かみによってリラックスした気分でページを使えるのかも。 基本的なUIパーツはそろっているので頑張ればページに適用できるはず。 レイヤーに綺麗に分かれているのがいいですね。 見ていてなにか作りたくなりました。 関連エントリ かなりクールなPhotoshop用フリーUIキット-PSDファイル50個 モックアップ作成用PhotoshopのUIキット「Soft UI Kit」 ブルーが美しいモダンなＵＩキットPSD 色々と使えそうなフリーのUIエレメントPSD７０種

Free Floral Photoshop Brushes | Professional photo gallery | Create and buy flash xml photo gallery 女性向けサイト等に使えそうなイラスト風の花・植物のPhotoshopブラシ集が色々まとまったエントリのご紹介です。 サイトに使うことでサイトがオシャレになったりしそうです。 これは絶対に使えそうですね。 関連エントリ ハイクオリティなPhotoshopブラシをダウンロードできるサイト色々まとめ 100以上のクールなPhotoShop用ブラシがダウンロードできる「getbrushes.com」 動物に関するPhotoshopブラシ色々 クリエイティブでカッコいいPhotoshopブラシセット５０

A Collection of Free Butterfly Photoshop Brushes | Naldz Graphics 女性向けサイトなんかで使えそうな蝶のブラシいろいろ イラスト調から実写調まで色々なタイプの蝶のブラシがまとまっています。 高級感を出したりする際にも使えそう。 こういうものをフリーというのはなんともありがたい限り。 関連エントリ ハイクオリティなPhotoshopブラシをダウンロードできるサイト色々まとめ クリエイティブでカッコいいPhotoshopブラシセット５０ 100以上のクールなPhotoShop用ブラシがダウンロードできる「getbrushes.com」 動物に関するPhotoshopブラシ色々

Mega Web Buttons Pack #1 | Codrops 綺麗なアイコン付きボタン４２個パック。 次のように、ボタンにアイコンが付いてより分かりやすくなっているものをダウンロード可能です。 jQueryとCSSが使われていて比較的容易に実装できてマークアップもシンプルになってます。 アイコンがあると無いとでは格段に見やすさが違いますね。 関連エントリ CSSスプライトでカッコイイボタンを作るチュートリアル シンプルさがなんともいい感じのCSSボタン集「Super Simple CSS Buttons」 CSSでクールなボタンを作るまとめ CSSでボタンを綺麗にスタイルするサンプル集

カッコいい円形のメニューナビゲーション実装jQueryプラグイン「Flower Navigation」 2011年03月31日- jQuery Flower Navigation | jQuery Plugins カッコいい円形のメニューナビゲーション実装jQueryプラグイン「Flower Navigation」。 何の変哲もない円形のボタン。 クリックすると円の内側から画像がワサッとアニメーションでメニューが現れます。 カーソルを合わせると止まります。 マークアップは次のように書かれています。 デモではクリックしても飛べませんが、aタグのhrefを指定してあげれば飛べるということが分かりますね。 <nav id="websites"> <ul> <li><a href="#"><img src="http://soma.urlich.ch/_media/internet/mdm_sma

jRumble | A jQuery Plugin That Rumbles Elements 要素をバイブレーションさせられるjQueryプラグイン「jRumble」。 カーソルを合わせる等のアクションをトリガとして、アイテムを自由にバイブレーションして目立たせることが出来るjQueryプラグインです。 利用者の注目を集めたい場所に仕込んでおくことで、かなり注意をひけそう。 メニューなんかもブルブルさせて今の位置を分かりやすくしたりも。 CSS3で回転なんかもできるようになってよりリアルにブルブルしてます。 動きの強さなんかはパラメータで簡単に調整できます。 ユーザビリティを上げるための１つのテクニックとして覚えておいて損はないですね。 追記）CPU利用率が高まるということで利用には注意が必要です 関連エントリ １枚の画像でハイライトする画像メニュー作成が可能なjQueryプラグイン「i

jScrollbar : make your own scrollbar for scrolling contents with jQuery UI - MyjQueryPlugins 独自デザインのスクロールバーにする際に使えるjQueryプラグイン「jScrollbar」 綺麗にデザインされたバーもブラウザ依存のスクロールバーで台無しになってしまったり、OSによってデザインに違いが出てしまったりとあまりよいことはないですね。 かといってデザインを崩したくない場合なんかで、スクロールさせないわけにもいけないような時に使えそうなプラグインです。 以下のような自由なデザインのスクロールバーが作れます。画像を切り替えることで簡単に独自デザインにも出来ます。 で、独自デザインにしつつも、ちゃんとマウルホイールにも対応しています。 Twitterの新UIなんかでもスクロールバーが独自になっていたり

もう他のは要らないかも、なクールなツールチップ作成フレームワーク「Tipped」 2011年04月11日- Tipped - The Javascript Tooltip Framework | jQuery & Prototype Tooltips もう他のは要らないかも、なクールなツールチップ作成フレームワーク「Tipped」 これ１つで出回ってるであろう殆どのツールチップは作れる気がします。しかも全てハイクオリティ。 フレームワークということで以下の点をカスタマイズ可能 ・スキン ・ツールチップの位置設定（左右上下など） ・コンテンツをAJAX読み込み ・ローディング画像のカスタマイズ ・コールバック機能(afterUpdate)、イベント(onHide, onShow) ・APIの提供 スクリーンショットを以下にサンプルとして掲載。 それぞれがセンスがよくてどれをつかってもよい気が

50 Free Photoshop Brush Sets Everyone Should Have | Web Design Blog, Web Designer Resources これは覚えておいたほうがいい！というPhotoshopのブラシ５０セット。 かなり使えそうなものが多かったのでご紹介します。 クラウド時代の雲のブラシ。何ともリアル 自然のいい感じが出せそうなブラシ ペンキなんかをぶちまけたようなブラシ いろんなタイプの草のブラシ なんか地球爆発してるっぽいブラシ 油絵っぽい感じを出せるブラシ 光がかっこいいブラシ 北斗の拳の髪の毛もかけちゃうヘアブラシ フラクタル 他にも色々あるので是非元エントリを参照してみて下さい。 関連エントリ ハイクオリティなPhotoshopブラシをダウンロードできるサイト色々まとめ 100以上のクールなPhotoShop用ブラシがダウンロードでき

500 Exceptionally Beautiful Photoshop Patterns For Classy Designs | Multy Shades 高級っぽさを演出できるPhotoshopパターン500がまとめられたエントリのご紹介です。 絨毯地やグラデーション等、背景にすればサイトがとたんに高級っぽくなりそうなパターンには困らなさそう。 単なる画像なわけですが、高級感が簡単に出せたりするところはWEBサイトのデザインの面白いところですね。 関連エントリ 200を超える非常に美しいPhotoshopのパターン集 背景画像に使えるPhotoshopの背景パターン2000 PhotoShopのブラシやパターンがいっぱい「myphotoshopbrushes.com」 サイトの背景に使うと印象を際立たせられそうな50のPhotoshopパターン集 背景画像に使えるレトロなPhoto

長〜いulリストを１行で複数行に分割できるjQueryプラグイン「Multi-column lists」 2011年02月03日- Multi-column lists | jQuery Plugins 長〜いulリストを１行で複数行に分割できるjQueryプラグイン「Multi-column lists」。 <ul><li>1</li><li>2</li> ....... </ul> と、長い ul リストを、jQuery("ul").columns(5, true);のようにすることで、5行に勝手に分割してくれます。6行にしたければ6を指定 次のようになります。 通常これをやろうとすると、数値で割って、規定値にきたら一旦</ul>で閉じてみたいなことをする必要がありますね。 これをたった1行で出来るというのはかなりHTML出力側のプログラムが楽ちんになり、頭を使う必要がないですね。 行

画像要らずのローディング表示を実装できるjQueryプラグイン「Activity Indicator」 2011年01月31日- Activity Indicator 画像要らずのローディング表示を実装できるjQueryプラグイン「Activity Indicator」。 通常こうしたローディングイメージを実装するにはアニメーションgif等で対応しますが、このプラグインを使うと、画像なしに綺麗なアニメーション付きの読み込みエフェクトを実装出来ます。 SVGやVMLを使ってクロスブラウザで動作するように設計されており、なんとIE6等でもＯＫだそう。 背景が何色だって気にする必要もありません。 関連エントリ クリックした位置にそのままローディング画像を出せるjQueryプラグイン「Spinner」 現在ローディング中であることをマウスカーソル近くにちょこんと可愛く出せる「prettyLoade

35 Illustrator Icon Design Tutorials - Web Design Blog ? DesignM.ag イラストレータで綺麗なアイコンを作るチュートリアル３５。 ベクターデータでアイコンを作ることで各サイズのアイコンを作る必要はなくなりますね。イラストレータでアイコンを作るチュートリアル集です。 １つのスキルとして身につけておくと役に立ちそうです。 関連エントリ イラストレーターでWinXPのフォルダアイコン作成チュートリアル インパクトのあるアイコンをIllustratorで作成するチュートリアル集 立体的なサイコロ画像を描画するイラストレーターチュートリアル iTune用アイコン作成チュートリアル

Creating 3D Dice from Scratch in Adobe Illustrator (Super In-Depth!) | Tutorial9 立体的なサイコロ画像を描画するイラストレーターチュートリアル。 次のようなサイコロ画像を描画するチュートリアルです。 立体感の出し方なんかは参考にできそうですね 関連エントリ イラストレーターでWinXPのフォルダアイコン作成チュートリアル

iPhone・Androidアプリ等に使えるアイコンセット総まとめ：2010 年末に暇な時間にアプリを作ろうなんて思っている方の参考になれば幸いです。 iconSweets 2 Even more free icons by Yummygum iPhone・Android・WEBに使える400以上のアイコンセット「iconSweets 2」 app-bits.com | Slick user interface and icon design 次のようなアイコン64個セット DEFAULT iCON ::: Free Elegant Icons 173のシンプルなアイコンセット 108 Mono Icons: Huge Set of Minimal Icons | Tutorial9 108個のシンプルデザインアイコン Free iphone toolbar icons | Blog |

Freebie: Massive Web UI & Button Set | MediaLoot ボタンやインフォボックスなどを集めたＵＩパーツのPSD。 次のようなデザインのＵＩパーツキットがダウンロード可能です。 サイトにあてはめてより分かりやすいデザインにするために活用できそう PSD形式なので色は自由に変えられます 関連エントリ クオリティの高いUIパーツのPSDファイルを日替わりで「365psd」 ボタンやフォーム要素、シールなどWeb2.0っぽいUIパーツ集 Extバリの超クールなUIを提供するJavaScriptライブラリ「Jx Library」

Moleskine Notebook with jQuery Booklet | Codrops jQueryでリアルな本をペラペラめくるＵＩ作成チュートリアル。 デザインの美しさも素晴らしいのですが、アニメーションしながらめくれる感じもちゃんと出てるところがすごいです。 デモページ jQueryベースというのはあまり見たことがなかったのですが、これを参考に作れそうですね。 CSS3なんかも使われているので、総合的に学習できる資料として役立ちそうです。 関連エントリ Flashで本をペラペラめくる感じのUIを実装する「Dynamic Page Flip v2」 Flashで本をペラペラするUI実装いろいろ

iconSweets 2 Even more free icons by Yummygum iPhone・Android・WEBに使える400以上のアイコンセット「iconSweets 2」 次のようなテイストのアイコンが400個あつまったアイコンセットが公開されています。 アイコンの感じがスマートフォンに表示されているようなものになっています。 32x32, 16x16, 64x64 のサイズがベクター形式で入手できます。 これは覚えておいて損はなさそう 関連エントリ iPhoneアプリのツールバー部分に使えそうなアイコン色々 iPhoneのアイコンっぽいフリーのソーシャルメディアアイコン集 iPhone等のスマートフォンのアイコンが詰まったパック

“SocialShift” Icon Set: 246 Free Social Networking Icons | Freebies | instantShift 246種類のクリアで美しいソーシャルアイコンセットが公開されています。 過去にも沢山のソーシャルアイコンを紹介してきましたが、トップクラスのデザイン性を持ちます。 16x16ピクセルのアイコンがなかなかいい感じ。 関連エントリ 押してもらいやすそうな綺麗なボタンっぽいソーシャルアイコン集 選びたい放題のフリーのソーシャルアイコンセット色々 iPhone用アイコンみたいなソーシャルアイコン集「Social Network Icon Pack」 アイデア満載なフリーのソーシャルアイコン色々

横に長くなりがちなテキストも自動でサイズ調整してレイアウトを崩させないjQueryプラグイン「Shorten」 2010年12月14日- Shorten - A jQuery Plugin for Truncating Styled Text 横に長くなりがちなテキストも自動でサイズ調整してレイアウトを崩させないjQueryプラグイン「Shorten」。 ブロック要素に長いテキストがあって、折り返されないような場合、レイアウトが崩れてしまいますが、このプラグインを使えば、次のように、長いテキストも最後を ... more のように短くすることが出来ます。 $(element).shorten() メソッドを呼ぶだけですが、width で、収めたいサイズを、tail で、続きへのリンクを設定できたりします。 .shorten({width: 400, tail: '<a href="">..