40 Beautiful Free HTML5 & CSS3 Templates HTML5&CSS3を利用した美しい４０のフリーテンプレート集がまとめられていました。 HTML5とかCSS3をベースにしたサイトを作りたい方は参考にできそうです。 HTML5とかCSS3を使ったサイトのレイアウトの感覚をつかんで、そうしたサイト制作の際に参考にできますね これらがフリーとはすばらしい 関連エントリ HTML5＋CSS3ベースのテンプレート集１２ HTML5とCSS3を使ったフォームデザインのチュートリアル集３０ HTML5＋CSS3でクールなオーディオプレイヤー「ZEN」

タブが何個になってもOKなUIを作成できるjQueryプラグイン「Infinite Rounded Scrolling Tabs」 2011年10月17日- Infinite Rounded Scrolling Tabs | jQuery Plugins タブが何個になってもOKなUIを作成できるjQueryプラグイン「Infinite Rounded Scrolling Tabs」 次のような角丸デザインで、幅が足りない場合はスクロールボタンが表示されるタブUIが作れます こういうのは過去にあんまりなかったかも。デザインとかはCSSで調整できますね スクロール部分は自分でやろうとするとめんどくさそうなのですが、これは参考にできそうです 関連エントリ 閉じられるタブUIを実装できるjQueryサンプル「Magic Tabs」 jQueryベースのタブUI１５種まとめ textareaやin

25 Best Photoshop Text Effects of All Times 新しめのPhotoshopテキストエフェクトチュートリアル集 古いものも含まれていたりしますが、新しめの面白いテキストエフェクトも多数まとまっていました。 テクニックは色々と応用できそうです 関連エントリ テキストと人物を組み合わせてカッコイイ画像を作るPhotoshopチュートリアル 動画で学べるPhotoshopチュートリアル２０ 広告デザインのためのPhotoshopチュートリアル１５

jQuery ComboGrid Plugin リッチなオートコンプリートを実装できるjQueryプラグイン「ComboGrid」。 input type="text" に文字を入れて、候補が表示されたりするオートコンプリートがありますが、そのオートコンプリートをグリッドにしてリッチにし、よりヒントを多くすることでユーザビリティを上げるような使い方が可能。 表データがあって、その中から選んでもらいたいようなケースに使えそうですね。 中身のデータは当然ですがAjaxで読み込んで表示しています。 基本的には $(element).combogrid(options); というので利用が可能です。 サンプルコードは以下。 関連エントリ クールで高機能な次世代検索ボックスを作成できる「VisualSearch.js」

How to Create a Slick Blue Button in Photoshop | Grafpedia 立体的にアイコン付きでいい感じにデザインされたボタン作成Photoshop素材＆チュートリアル。 次のようなボタンの作成チュートリアルとPSDのダウンロードが可能です。 凹凸バージョンがあっていい感じです。色合いも自由に変えられるので色々と汎用に使えそうですね。 関連エントリ ボタンデザインにまよったら参考にできるPSDボタン素材まとめ シンプルなボタン実装用PSDテンプレート ボタンやインフォボックスなどを集めたＵＩパーツのPSD

パスワードの強度チェックを簡単に導入できるjQueryプラグイン「jQuery Strong Password」 2011年10月03日- jQuery Strong Password Plugin: Power PWChecker | EGrappler パスワードの強度チェックを簡単に導入できるjQueryプラグイン「jQuery Strong Password」 自分で実装しようとすると面倒そうな機能ですが、これを使って比較的簡単に実装できます。 記号などを入れないとStrongにならないように設定されているみたいです 日本サイトへの適用は翻訳のカスタマイズが必要かもしれませんが１から作るよりはるかに楽に導入できそうですね。 各種コールバックの設定も可能なので柔軟に使えそうです 関連エントリ 中身が画像のselectボックスを作るjQueryプラグイン リッチなドロップダウンメニュー

12 HTML5 CSS3 Beautifully Designed Themes HTML5＋CSS3ベースのテンプレート集１２ 色々とテクニックが使われており、学習後の実用例として参考にできそうです。 スマホ主流の流れでますます重要度が高まっているので本格的に学んでおきたいですね 関連エントリ ほんとにフリー？というクオリティのXHTML/CSSテンプレート２０ 綺麗にデザインされたフリーのHTML/CSSテンプレート１０ 34のフリーで綺麗なXHTML/CSSテンプレート フリーの(X)HTML/CSSテンプレート５０

23 Arrow Brushes | Free Photoshop Brushes 手書きゆるゆる感がいい感じのPhotoshopブラシ２３個セット。 次のような横方向の矢印が２３個つまったブラシセットです。手書き感がなんとなくほっとします パレットのサムネイルは以下。 関連エントリ 手書きでいい感じの矢印ブラシ素材「Mini Arrows」 手書き感が温かさを感じさせるPhotoshopのブラシ集 カラフルなイラストレーター用、水彩ブラシ集

リッチなドロップダウンメニュー実装ができるjQueryプラグイン「Mega Drop Down Menu」 2011年09月27日- jQuery Mega Drop Down Menu Plugin ? Downloads Design Chemical Lab リッチなドロップダウンメニュー実装ができるjQueryプラグイン「Mega Drop Down Menu」。 次のような商用サイトでそのまんま使ってもかなり便利になりそうなドロップダウンメニューが作れます メニューバーのカラーは色々選べるようになっているのでサイトのイメージにマッチしたものを使うことが出来ます 垂直バージョンもあるみたいです 画像も組み合わせることで分かりやすいメニューが作れますね 関連エントリ スマフォでもイケてるクールなドロップダウン実装jQueryプラグイン「DropKick」 Googleスタイルのシンプ

Pop From Top Notification | CSS-Tricks ピュアCSSでページ上に通知を出すチュートリアル Twitterなんかで、ページ上に表示されるあの通知をピュアCSS(CSS3利用）で実現するテクニックです。 当然、CSS3対応していないブラウザでは使えませんがテクニックとして知っておいても損はなさそう。 関連エントリ Ajaxスタイルのローディングも画像を使わずピュアCSSで実現するデモ ピュアCSSでSVGやcanvasなしの3Dオブジェクト描画デモ ピュアCSSでスライドアウトインタフェースの実現

Diapo | a free jQuery slideshow by Pixedelic 画像切替が超カッコいいスライドショーが実装できるjQueryプラグイン「Diapo」。 様々な切り替えエフェクトがあって、画像と共に動きも楽しむことができます。 キャプションのアニメーションもクールで、ボタンを設置できたりもします。 Youtube動画の埋め込みも可能です。 あとどうやっているのか不明ですが、Youtubeの動画なんかも次のようにスライドショーさせることができてます。 単に写真を配置するよりもこうしたものを使うほうがよりよく写真を見てもらうことができるのかも。 インデックスもついていて、カーソルを合わせるとツールチップでサムネイルが表示されるなどのこだわりも見られます。 関連エントリ 3D効果を使って迫力あるスライドショーを作れる「Slicebox」 迫力あるフルスクリーンの背景スライ

40 Professional and Creative WordPress Themes of August 2011 - OurTuts.com プロフェッショナルでクリエイティブで参考になるWordPressテーマ４０ フリーではありませんが、WordPressのテーマが多数紹介されています。フリーでも高機能でクオリティの高いものはありますが、その中で有料とあって、更に気合の入ったテーマが入手できる他、WordPressでのサイトを作る上での参考になったりすると思います。 「WordPress、米新規サイトの22%で利用 」なんていう記事が先日あがりましたが、ブログに限らず、サイトをWordPressで作っちゃった方がプラグインで簡単にどんどん機能拡張できるしフリーだしということでこの流れが進んでいくとWordPressテーマ作成できるというのは１つのスキルとしてアピールできる要素と

15 Ways to Improve Website Crawling | PVM Garage サイトのクロールを最適化するための１５のTIPSが公開されていました。 検索エンジンにうまくクロールしてもらえないと検索ページにも表示されず、トラフィックをみすみすのがしてしまうことにもなりそうですが、クロールを最適化するTIPSが公開されており、サイト作成時や公開時の参考にできます 以下にその目次と個人的に知っていることを追記しています。 オリジナル記事の翻訳ではないので、元記事を読みたい場合は元記事を参照してみてください。 パンくずリストを作る - サイト構造を検索エンジンに教えることができる 検索結果にもパンくずリストが出ることがありますね。ユーザビリティだけじゃなくSEO的にも意味があるとのこと。 個別のポストに３〜５の関連エントリを添える 同種のエントリを加えることでグルーピングがで

Pure CSS3 typing animation with steps() | Lea Verou ピュアCSS3でタイピングアニメーションするデモ。 タイピングした文字を画面に表示するような効果をJSなしでピュアCSS3でsteps()を使って実現しています。 こんなことが出来ちゃうんですね。 一目見ておくだけでも可能性について感じ取ることができます。 関連エントリ Ajaxスタイルのローディングも画像を使わずピュアCSSで実現するデモ ピュアCSSでSVGやcanvasなしの3Dオブジェクト描画デモ ピュアCSSでスライドアウトインタフェースの実現

23 Free PSD Mock-ups To Make Your Presentations Look Better! | Logolitic プロダクトのプレゼンなどに使えそうなPSDファイル色々 プロダクトのプレゼンに使う画像なんかのベースにできそうな素材がたくさん公開されています。 当然ながらWEBサイト用の素材としても使えますが、より商品が魅力的に見えるように活用することができそうですね。 製品のロゴなんかを入れればいい感じになりそうです。 関連エントリ AndroidのGUIセットが収録されたPSDファイル 色々使えそうなフリーのPSD素材ファイル３０ クールなUIパーツを収録したUI作成用PSDキット「Transparent Glass UI」

Slicebox - A fresh 3D image slider with graceful fallback | Codrops 3D効果を使って迫力あるスライドショーを作れる「Slicebox」 一見普通の画像のスライドショーかとおもいきや、画像切替の際に超かっこよく3D効果を使って切り替わるスライドショーの実装ができます。 画像が立体的にぐるりと切り替わる感じは超クール エフェクトが色々と用意されています。 jQueryプラグイン形式なので、<div>のなかに画像をつらつらと並べて初期化するだけでOKの簡単実装。 3D transformを使っているみたいですが、フルに活用するとこういうこともできるんですね 関連エントリ 迫力あるフルスクリーンの背景スライドショーが実装できるjQueryプラグイン これは新しい、回転させて切り替えるスライドショー実装jQueryプラグイン 次の画

CSS3 vs Photoshop: Transforms | Webdesigntuts CSS3で動画再生部分を立体的にする等のデモ。 Photoshopでの画像加工をCSS3でどのようにするかの対比について書かれた記事ですが、その中のデモに動画部分を立体的にするデモがあり、なかなか面白いです。 次のように動画部分やその他を transform プロパティを使って立体的に傾かせているデモです。そのまま再生なんかもできます。 デモページ CSS3が動くブラウザでないとダメですが、動画にちょっとしたインパクトを持たせたい時に使ってみてもよさそう 関連エントリ CSS3を使ったクリエイティブなテキストエフェクト集２３ CSS3だけで実現する幅広で使えそうなドロップダウン実装チュートリアル 味気ないサムネイルリストをCSS3で回転させてオシャレにするチュートリアル

Just some other awesome CSS3 buttons - demo アイコン付きの分かりやすいボタンをCSS3で実装するサンプルが公開されています。 ボタンの横にアイコンが表示されており、何を意味するのかが分かりやすく使い勝手向上に貢献しそうです。 関連エントリ CSSスプライトでカッコイイボタンを作るチュートリアル Google＋風のボタンをCSSで実装するサンプル

Automatic Image Montage with jQuery | Codrops 並べた画像を敷き詰めて超カッコよくするjQueryサンプル。 <img>を単に並べるだけであとはブラウザの幅に応じて画像を次のように並び替えてくれちゃうデモとスクリプトのダウンロードが可能です。 画像間の調整や背景色の調整等が行えるようです。 デモページはこちら ブラウザサイズを変更しても画像を再計算して表示しなおしてくれます。 背景を黒にするとよりオシャレな感じです。 関連エントリ 異なる幅・高さの画像も超綺麗に整列させるjQueryプラグイン「Atteeeeention plugin」 ブロックサイズ内に画像を綺麗に収めるjQueryプラグイン「CJ Object Scaler」

42 Outstanding FREE UI Kits for Web Designers | Queness UIの研究や作成に参考にできるフリーのUIキット４２。 PSD形式などで利用することができるようです。サイトのアイデアを練りつつ、どんなUIにしたらベストかな？といったことを考える際にもUIが揃っているので参考にできるかもしれません。 関連エントリ LionのUIキットPSD これは注目の超リッチなUIを実装できるjQueryベースのUIライブラリ「jQuery EasyUI」 独特のUIを提供してくれるjQuery用のUIフレームワーク「Ninja UI」 色々と使えそうなフリーのUIエレメントPSD７０種