マウスオーバー時のエフェクトに凝りたい。 そんなときに使えそうなのが、『HoverAttribute jQuery plugin』。a要素のマウスオーバー時にテキストをふわっと切り替えるjQueryです。 アンカーテキストにマウスオーバーすると、a要素かrel要素に指定してあるテキストに、ふわっと切り替わります。ちょっと変わったエフェクトをつけたいときによさそうですね。 デモファイルがダウンロードできるので、一度見てみてください。 HoverAttribute jQuery plugin 大阪と神戸と京都を満喫中。めちゃ楽しい。もうちょっと京都を楽しんで東京に帰ります。

95156966/ Hemera/ Thinkstock 家具や雑貨を買ったり、引越しや部屋づくりの際に役立つiPhoneアプリ（※一部iPad専用アプリとなっています）を集めてみました。 Houzz iPad専用。豊富な写真やインテリアアイデアを集めることが出来ます。お気に入りの写真を集めて自分だけのインテリアアイデアブックを作ってみては？ Interiors and Furniture for Youngsters 部屋ごとに美しいインテリア写真がまとめられたアプリ。高画質な写真をカメラロールに保存することも出来ます IKEA Catalogue 2010 UK IKEA UKのカタログアプリ。インテリア写真をコーディネートの参考にするだけのために使っても良さそうです My Measures & Dimensions 撮影した写真に寸法線を記入して保存しておくことが出来るアプリ。部屋の

jQueryのプラグインをチェックしておきたい。 そんなときにおすすめなのが、『12 Helpful jQuery Plugins to Check Before Ending April 2010』。2010年の間に見ておきたいjQueryプラグイン集です。 いい感じのものがまとまっているので、いくつかご紹介しますね。 jQuery ajaxContactForm plugin フォームのバリデータ。背景色を変えることでシンプルにアラートしてくれる。MITライセンス Image Puzzle Using jQuery 画像のパズルゲームを作れるプラグイン jQuery Mega Menu jQueryを使った、見た目も動作もクールなドロップダウン型メガメニュー JCoverflip Macのカバーフローのようなギャラリーインターフェースを作れるプラグイン jQuery Bubble Po

98431998, iStockphoto/ Thinkstock WordPressをカスタマイズしたい。 そんなときに参考になるのが、『Top WordPress hacks of early 2010』。WordPressをハックするためのTips集です。 なかなか面白いものが揃っていますね。 Display an incrementing number on each post A List Apartで見られるような、post数の合計数を表示。functions.phpに追記する Display “time ago” dates 投稿してからの経過時間を表示。functions.phpに追記する Disallow theme switching クライアントへの納品時に、テーマの変更を不可能にする方法。functions.phpに追記 WordPress navigation o

サイトにかっこいいUIを実装したい。 そんなときにおすすめなのが、『25+ Best jQuery Plugins To Beautify Your Website』。サイトをかっこよくするためのjQueryプラグイン集です。 初めて見るものもあっていい感じです。 YoxView lightbox系の画像オーバーレイスクリプト。ナビゲーションとキャプションがフェードアウトしたりとディテールが気持ちいいです Fade In and Out Tooltips for Prototype and Scriptaculous フェードイン&アウトで表示されるツールチップ Sweet Titles Transparent and Fading Tooltips ページロード時に、画像をフェードインして表示させるスクリプト Captify Displays Pretty Image Captions

97412913, iStockphoto/ Thinkstock よりよいロゴをデザインしたい。 そんなときに参考になるのが、『45+ Beautiful Logo Design Tutorials and Resources for Designers』。デザイナーのためのロゴデザインのチュートリアル&素材集です。 いい感じのものが揃っていますね。 3D Logo Tutorial illustratorとPhotoshopを併用して3Dのロゴを作るチュートリアル Logo Design Project Step By Step Walkthrough コンセプトメイキングから実制作までを解説した記事 Design a Grungy Circular Logo 円形でグランジのテクスチャ感のあるロゴの作り方 Step By Step Logo スケッチからロゴを作るまでのチュートリアル

デザインについていろいろと学びたい。 そんなあなたにおすすめなのが、『Creative Sessions』。クリエイティブなWeb講座が見られるサイトです。 Sessions are blocks of articles, interviews, tutorials and content on a particular creative subject. とのことで、クリエイティブに関するあるテーマについての記事やインタビュー、チュートリアルなどを掲載していくようですね。Tuts+ネットワークのサイトです。 第一回目は、「Character Illustration」ということで、キャラクターのスケッチからイラレを使ってのイラストレーションの方法が、たくさん解説されています。 次回は「Illustrative Lettering」ということで、手作りのフォントの作り方などが紹介されるよう

ちょっとメモ。 WordPressで、たとえば年別アーカイブのリンクを表示したい場合は以下のように書きますが、素のリストタグが生成されて、クラス指定ができません。 <?php wp_get_archives(‘type=yearly’); ?> <li class="arrow"></li> というようなコードを生成したい場合、「functions.php」の最下行に、以下のコードを追記すればOKです。 functions.php function my_archives_link($link_html){ $link_html = preg_replace('@<li>@i', '<li class="arrow">', $link_html); return $link_html; } add_filter('get_archives_link', 'my_archives_link'

サイトにスライドショーを使いたい。 そんなときに参考になるのが、『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

HTML5 / CSSでできることをざっくり掴みたい。 そんなときに参考になるのが、『Create An Elegant Website With HTML 5 And CSS3』。HTML5 / CSS3のソースがダウンロードできるサンプルです。 HTML5で使われる<section>や<aside>、<header>、<footer>などの各タグの解説と、CSSにおける「RGBa」、「box-shadow」、「border-radius」、「text-shadow」などのプロパティーの解説がされています。 デモは以下から。 Download Source ソースのダウンロードも提供されているので、参考に見てみてはいかがでしょうか？ Touch The Future: Create An Elegant Website With HTML 5 And CSS3 あることが一つ決まった。と

Web制作に使えるChromeのエクステンションを探している。 そんなあなたにおすすめなのが、『15 Google Chrome Extensions for People Who Build Websites』。Web制作者のためのGoogle Chromeエクステンション集です。 またいろいろと増えているようですね。 Web Developer Firefoxで便利なWeb DeveloperのChrome版 Resolution Test 解像度別の表示テストができるアドオン Pendule Web Developerに似た、デベロッパーのためのツール。マークアップのバリデーションや、画像を非表示にするなど Image Cropper スクリーンショットが撮れるアドオン。座標とサイズの表示もあります Webpage Screenshot 見ているページの全体のスクリーンショットが撮れ

98125356/ iStockphoto/ Thinkstock かっこいいアイコンを自分で作りたい。 そんなときに参考になるのが、『35 icon design tutorials in Photoshop and Illustrator』。クオリティーの高いアイコンデザインチュートリアル集です。 Photoshopと、illustratorのチュートリアルがたくさん紹介されていますね。かなり細かく解説されているのでわかりやすいのと、psd、ai(eps)　ファイルがダウンロードできるものもあります。 How to Make a Professional Buddy Icon in Photoshop Photoshopでスーツ姿の男性のアイコンを作るチュートリアル Icon design tutorial:How to make a Calendar icon iCalのような、カレ

サイトをWordPressで作りたい。 そんなときに参考になるのが、『40 WordPress-Powered Websites With Awesome Designs』。WordPressで構築された美しいサイト集です。 かなりかっこいいサイトが揃っています。 Theme Garden WordPressのテーマを配布しているTheme Garden Aaron Irizarry テクスチャとタイポグラフィーが美しいデザイナーのブログ kazuhide fukuyama 日本のフリーランスデザイナー、Kazuhide Fukuyama氏のポートフォリオサイト UpThemes メニューやスクリーンショットの置き方、ボタン等、洗練されたデザインのUpThemes Awesem 反応の速いドロップダウンメニューと、スライドショーが美しいAwesem WordPressユーザの方は、一度見て

96636636/ iStockphoto/ Thinkstock CSSでのフォント指定を工夫したい。 そんなときに参考になるのが、『Five Minute Upgrade – Variety in Title and Body Fonts』。海外サイトにおけるタイトルと本文のフォントの使い方です。 タイトルにセリフ体、本文にサンセリフ体を使用した例（例えば、タイトルにGeorgia、本文にArial）や、タイトルと本文どちらもサンセリフ体を使った例（Smashing Magazineでは、タイトルにHelvetica、本文にVerdana）が紹介されています。 欧文書体でよく使われているフォントがわかるかと思うので、一度見てみてください。 和文書体でいうと、明朝体とゴシック体を組み合わせたり、ゴシック体で統一したりと、参考にできそうですね。 Five Minute Upgrade –

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のコーポレートサイト。重なった紙が切り替わっ

はけで塗ったようなブラシを探している。 そんなときにおすすめなのが、『53 Incredible High Resolution Photoshop Paint Brushes』。商用無料のPhotoshop用ペイントブラシ集です。 27.4MBとちょっと重いですが、高解像度のペイントブラシがたくさん入っています。 ダウンロード後のreadme.txtにライセンスの記述があって、商用無料となっています。.abrファイルを開けば、Photoshopのブラシパネルに追加されます。 ぜひ使ってみてはいかがでしょうか？ 53 Incredible High Resolution Photoshop Paint Brushes Sizzlerで食事。初めて行ったんですが、いいところですね〜。サラダバーだけでお腹いっぱいになる感じで、すごく楽しめました。

98081514/ iStockphoto/ Thinkstock インテリアショップで「家」も買いたい。 そんな夢を実現してくれる意欲的なショップが、数は少ないながらも徐々に増え始めています。 今回はそんな「デザイン住宅」を扱っているインテリアショップを集めてみました。 無印良品の家 スケルトンインフィルを用いた家づくりを行っている無印良品。現在「木の家」「窓の家」「朝の家」の３つのコンセプトがあります IDEE HOUSE PROJECT 「美意識のある暮らし」をコンセプトにしたイデーの住宅プロジェクト。『Apartments 南雪谷』など、実際の施行例も出てきています 生活を遊ぶ家(SEKISUI HOUSE×ACTUS) ACTUSと積水ハウスのコラボレーションによって生まれたコンセプト住宅。住む人がワクワクするようなインテリアが詰め込まれた家になっています F.O.B HOMES

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 木のオブジ

lightbox系の、画像拡大スクリプトを探している。 そんなときにおすすめなのが、『jQuery.popeye 2.0』。画像をオーバーレイで拡大できるスクリプトです。 マウスオーバーすると、前後の画像へのリンクと、拡大アイコンが表示されます。動作が速くて、ユーザビリティーにはなかなかいい気がしますね。キャプションも入れられるようです。 ナビゲーションを画像の外に固定配置するタイプもあります。 一度見てみてください。 jQuery.popeye 2.0 ブログ書きまくり。久々に面白い記事が多いので止まらん。。止めたい。

86496010, Jupiterimages/ Comstock/ Thinkstock iPhoneやAndroidでの表示を確認したい。 そんなときにおすすめなのが、『Mobile Web and App Development Testing and Emulation Tools』。モバイルサイトをテストするためのツール集です。 たくさんのツールが紹介されています。 Google Android Emulator Windowsでスタンドアローンのソフトとして動作するAndroidのエミュレータ TestiPhone.com – iPhone Application Web Based Simulator iPhoneでの表示のされ方をブラウザ上で確認できるシミュレータ iPhoney iPhoneの解像度（320x480px）での見え方を確認できるiPhoney W3C mob

Use the drop-down navigation above to browse covers by year, by select designers, and by other more 'synthetic' categories. Only the 'Time Flies' chronological section is fully updated. There are well over 1,000 covers in the archive. I keep adding to the collection, but can only ever represent a fraction of what's out there. This archive is about graphic design. I've attempted to label each cove