ちょっとスマートフォンサイト制作時にデザイン・UIの参考になるサイトをまとめておきます。 iPhoneデザインボックス iShowcase スマートフォンサイト集めました。 iPhoneデザインアーカイブ 絶対見ておきたい有名企業のスマホサイトまとめ CSS iPhone & iPad Mobile UI Patterns 38 Mobile (iPhone) Sites Mobile Awesomeness jQuery Mobile Gallery 昨日は久々に会う友人とドライブからの食事。楽しかった！

木の素材を探している。 そんなときにおすすめなのが、『More Than 350 Free and Premium Wood Textures』。木のテクスチャ集です。 なかなかいい感じのものが揃っています。 Free Hi Resolution Wood Textures (9 Textures) 使いやすいシンプルな木の素材 Six Wood Textures (6 Textures) いろいろなタイプの木のテクスチャ6 Wood 01 (3 Textures) 使いやすそうな木のテクスチャ Wood Textures (45 Textures) シンプルなテクスチャ45 Tileable Wood Textures (3 Textures, Seamless) 優しいテクスチャ感の素材 木の素材を探している方は、一度見てみてください。 More Than 350 Free and P

91137817/ iStockphoto/ Thinkstock デザインの幅を広げたい。 そんなときに参考になるのが、『80 Fresh Photoshop Tutorials For Creating Awesome Websites』。素晴らしいサイトをデザインするためのPhotoshopチュートリアル集です。 ディテールまで解説されたものばかりで、いい感じですね。 Create a Watercolor-Themed Website Design with Photoshop 水彩画のようなテイストのデザイン。ワイヤーフレームの書き方から、960 Grid Systemを使ったレイアウトの方法、テクスチャをどこから探してどう使うのか、Photoshopでのエフェクトのかけ方など Create a Theme Store Website Layout in Photoshop デザ

98312899/ iStockphoto/ Thinkstock illustratorでアイコンを作りたい。 そんなときにおすすめなのが、『40 Excellent Adobe Illustrator Icon Tutorials』。illustratorでアイコンを作るチュートリアル集です。 かなりクオリティーの高いものが揃っていますね。 Create an Aperture Style Camera Lens Icon Apertureライクなカメラレンズのアイコン How to Create a Shiny Bucket Icon 光沢のあるバケツアイコン Create a Stylized GPS Icon iPhoneアプリに使えそうな、GPSアイコン Tutorial: How to Create a Television Icon かわいい旧式のテレビアイコン How t

フッターをデザインしたい。 そんなときに参考になるのが、『Beautiful Footers in Modern Web Design for Inspiration』。綺麗なフッターデザイン集です。 かっこいいものが揃っていますね。 Bits And Pixels 滴が垂れたようなデザイン。グラデーションも綺麗です Urban Pie 背景のテクスチャとイラストがかわいい「Urban Pie」 Miss Web Lash マルチストライプとテクスチャが綺麗な「Miss Web Lash」 Kailoon フッターにポートフォリオの画像を配した「Kailoon」 Straw Poll Now 木のイラストがかわいい「Straw Poll Now」 フッターのデザインを変えてみたいときに、一度見てみてください。 Beautiful Footers in Modern Web Design f

アプリケーションのデザインに使えるアイコンを探している。 そんなときにおすすめなのが、『25 Best Icon Sets for Application Design』。アプリケーションデザインに使えるアイコン25集です。 かっこいいのが揃っているのと、商用無料なのもありますね。 ↑はApplication Icon Set。商用無料 Nixus。商用無料 108 Mono Icons。商用無料 ぜひ使ってみてはいかがでしょうか？ 25 Best Icon Sets for Application Design 一つ挽回、と。眠いのでカフェにきて仕切り直し。

画像やswfなどをかっこよくオーバーレイで表示したい。 そんなときにおすすめなのが、『31 mind blowing collection of jQuery light box』。かっこいい画像オーバーレイ表示スクリプト集です。 いいものが揃っているので、いくつかご紹介します。 Milkbox オーバーレイのスライドショーが作成できるMilkbox。swfも読み込めます PrettyPhoto 角丸デザインで、動きも美しいPrettyPhoto。swfやYouTubeなども読み込めます SuckerFish HoverLightbox マウスオーバーで一覧表示されるギャラリーを作成できるSuckerFish HoverLightbox Moo Multibox ヒュイーンと移動して拡大されたり、ぱたっと畳まれて縮小する等、細かい動きを演出したMoo Multibox moo.Playgr

サイトにスライドショーを使いたい。 そんなときに参考になるのが、『30 Examples Of Great Slideshows In Web Design』。かっこいいスライドショーを使ったWebデザイン集です。 洗練されたデザインが揃っていますね。 Agnarson jQueryを使った、フェードイン&アウトで切り替わるスライドショー。動きがとても気持ちいいです Boerdam 大胆に画像が切り替わるインターフェース Dconvulsions PCの中で、画像がクールに切り替わるDconvulsions Etondigital 手作り感のある背景の上に、スライドショーを乗せたデザイン Graphik グラデーションが美しいスライドショー サイトデザインもかっこいいものが多いので、一度見てみてください。 30 Examples Of Great Slideshows In Web Des

83317481, Maria Teijeiro/ Lifesize/ Thinkstock フェードイン&アウトで切り替わるスライドショーが作りたい。 そんなときにおすすめなのが、『Build a Simple Image Slideshow with jQuery Cycle』。フェードイン&アウトで切り替わるjQueryのスライドショーです。 jQueryのスライドショーは画像が移動するものがよく見られますが、これは同じ場所で切り替わりますね。動きが自然で気持ちいいです。 デモは以下から。 View the demo デザインの仕方から、XHTML / CSS、JSまで解説されているので、ぜひ見てみてください。 Build a Simple Image Slideshow with jQuery Cycle いつもと違うカフェに入ってみた。客層も雰囲気も違っていい感じだ。 今日は作業

リアルな紙をPhotoshopで描きたい。 そんなときに参考になるのが、『Create a Realistic Paper Texture in 5 Minutes 』。Photoshopでリアルな紙のテクスチャを作る方法です。 以下のような流れで解説されていますね。 1280 x 1024pxの新規ドキュメントを作成。「長方形選択ツール」で矩形を描いて、qを押下。クイックマスクモードに入る。「フィルタ / ピクセレート / 水晶」でセルのサイズに「3」を入力してOK。もう一度qを押下してクイックマスクモードを解除、「Cmd+shift+alt+N」で新規レイヤーを作って、dを押下後、「Cmd+Delete」で選択範囲を白で塗りつぶす。「Cmd+D」で選択範囲を解除 「焼き込みツール」で露光量を20%にし、紙を暗く汚い感じに見えるまで塗る。その後、「フィルタ / テクスチャ / テクスチャ

Flashサイトからインスピレーションを得たい。 そんなときにおすすめなのが、『60 Creative Flash Websites You Should Not Miss』。見ておきたいFlashサイト集です。 かっこいいのが揃っているので、いくつかご紹介します。 If Your Milk Carton MoOOos, You Win! ミルクをモチーフにしたかわいいゲーム Case-Mate: I Make My Case iPhoneのケースデザインができるサイト Plate Interactive 遊び心のあるストップモーション IKEA Soft Toys AID IKEAの、ぬいぐるみの売り上げをSave the ChildrenとUNICEFに寄付するプロジェクト Infrared5 コンサルティングファームであるInfrared5のコーポレートサイト。重なった紙が切り替わっ

97653441/ iStockphoto/ Thinkstock Photoshopでテキストにかっこいいエフェクトをかけたい。 そんなときに参考になるのが、『70 Photoshop Tutorials For Creating Perfect Typography』。Photoshopで作るタイポグラフィーチュートリアル集です。 かっこいいエフェクトが揃っていますね。 Create a Cool Wet Ink Typography Effect in Photoshop インクが滲んだようなエフェクトをかけるチュートリアル Suspended Text Effect ぶらさがったように見せるタイポグラフィー Photoshop Tutorials: Colorful Light Burst Text 閃光が奥から迫ってくるようなエフェクト Wood Inlay Text 木のオブジ

CSSでグラデーションを表現したい。 そんなときにおすすめなのが、『Cross-Browser CSS Gradient』。クロスブラウザで動作するCSSグラデーションです。 画像を使わずに、ブラウザ上でグラデーションを描く方法ですね。CSS3の書き方ではFirefox3.6+やSafari4、Google ChromeなどのモダンブラウザにCSS Gradientsが効きますが、IEには対応していません。 そのため、IE用にfilterの記述を追加したものになっています。 IEのfilterでは、水平か垂直方向の2色のグラデーションしかできないため、それに対応させた書き方になっているようです。シンプルなグラデーションを表現したいときにはいいかもですね。 一度見てみてください。 Cross-Browser CSS Gradient 一つ挽回。 久々に服を買いたくなってきました。週末に見に行

91831729/ iStockphoto/ Thinkstock サイトをさっと作りたい。 そんなときにおすすめなのが、『Top 10 Html/CSS Web Templates Of March 2010 For Free Download』。フリーのXHTML / CSSテンプレート集です。 いい感じのものが揃っています。 Photographer Enterprise Solutions Corporate 使いやすいものが揃っていると思うので、ぜひ見てみてください。 Top 10 Html/CSS Web Templates Of March 2010 For Free Download また遅れてしもうたすんまへんm(_ _)m今日は天気よくて気持ちいいですね〜。 いろいろ詰まっているので進めます。

WordPressのテーマを作りたい。 そんなときにおすすめなのが、『Elastic Theme Editor』。自分でWordPressのテーマが作れるようになるプラグインです。 ダウンロードした「elastic-theme-editor」フォルダを、「wp-content/plugins」に置いてプラグインを有効化することで、利用可能になります。 ヘッダやコンテンツ、サイドバーの領域をドラッグすることで、それぞれのテーマファイルを作ることができます。シンプルな2カラムで作ったのが以下ですね。 カラム数やレイアウトを自由に作れるのと、ヘッダやサイドバーなどのシンプルなテーマファイルがそれぞれ作られるので、一からテーマを作りたいときに便利なのでは、と思います。 ぜひ見てみてください。 Elastic Theme Editor プログラマと打ち合わせ。周りに仕事を振れるようになってきました。

96124501/ Hemera/ Thinkstock Photoshopのグラデーションファイルを探している。 そんなあなたにおすすめなのが、『25 High Quality Gradient Sets for Photoshop – 750+ Gradients』。クオリティーの高いPhotoshopのグラデーションファイル集です。 いい感じのグラデーションがまとまっていますね。 Clean Gradients Set 著者が注意深く選んだ約50個のグラデーションファイルを、フリー素材として配布しています Ocean Breeze 海をテーマにした青系のグラデーションファイル Vintage 深みのあるグラデーションファイル集 Dooffy Gradients Set 美しいグラデーションファイルがまとまっています Adobe CS3 Gradients Adobe CS3のアイコン

かっこいいスライドショーを作りたい。 そんなときにおすすめなのが、『28 Useful JQuery Sliders You Need To Download』。jQueryのかっこいいスライドショースクリプト集です。 かなりいい感じのものが揃っています。 Automatic Image Slider w/ CSS & jQuery CSSとjQueryで作られた、自動でスライドするギャラリー Animate Panning Slideshow with jQuery 大きい画像の一部がパンしながら移動するスライドショー SlideDeck jQuery plugin とてもかっこいいスライドショー。無料版と$99の有料版がある。Basecampのサイト等、実装例多数 jQuery Infinite Carousel スムーズな動きのカルーセル（イメージスライダー） Easy Slider

サイトをさっと作りたい。 そんなときにおすすめなのが、『30 Latest High-Quality Free (X)HTML/CSS Templates Must See Now』。クオリティーの高いフリーのXHTML/CSSテンプレート集です。 いい感じのものが揃っています。 Urban Gear スライドショーのある、ECサイトのデザイン Ornare サムネイル付きのスライドショーのある、すっきりとしたサイトデザイン My Porfolio ポートフォリオに使えるデザインテンプレート Megan シンプルなタイポグラフィーデザイン Cantya ビジュアルにイラストをうまく使った、見やすいレイアウト PSDファイルが含まれているものもあるので、ぜひ見てみてください。 30 Latest High-Quality Free (X)HTML/CSS Templates Must See

CSSのフレームワークを使ってサイトを作りたい。 そんなときにおすすめなのが、『ZURB』。クールなCSSグリッドフレームワークです。 カラム数や幅を指定して、CSSを生成できますね。Screen Widthを変えて確認することもできて、なかなかいい感じです。 似たサイトだと、960 Grid Systemがありますね。 こちらは制作事例も多く、参考になるのではないでしょうか。デザインの制約を受けそうですが、コーディングの手間を多少減らしつつデザインする、ということができそうです。 一度見てみてください。 ZURB CSS Grid Builder ここ数日夜はちゃんと寝るようにしているので体調がいい。この調子でいきます。

jQueryでシンプルな動きのメニューを作りたい。 そんなときにおすすめなのが、『7 Vertical Menus With jQuery Effects』。jQueryで作る垂直メニュー集です。 メニューにマウスオーバーすると、　中のテキストがすっと右にずれたり、背景がびよーんと伸びたりするメニューの実装方法になっています。 jQuery Easing Pluginを使っていて動きが滑らかなので、気持ちいいですね。 デモは以下から。 View Demo 一度見てみてください。 7 Vertical Menus With jQuery Effects ふぅ、やっと少し落ち着いた。今週はずっと集中しっぱなしでした。昨日ブログ書けなかった分を挽回挽回！ Web Designingの方にお声がけいただいて、「サイトを彩るパーツのアイデア集」という特集で、見出しやテーブル、検索ボックスやTwitt