既存WEBサイトからワイヤーフレームを生成し、デザインワークに役立てられうブックマークレット「Wirify」 2010年12月24日- Volkside | Introducing Wirify: The web as wireframes 既存WEBサイトからワイヤーフレームを生成し、デザインワークに役立てられうブックマークレット「Wirify」 専用ソフト等は一切必要なく、ブックマークレットに追加するとページをワイヤーフレーム化してくれます。 たとえば、New York Times は下図のようにワイヤーフレーム化できます。 既にレイアウトの仕方はWEBに出尽くしているはずなので、想像するサイトデザインに類似のサイトを見つけてワイヤーフレーム化し、そこからリデザインし、デザインを作るというような効果的な活用法が考えられますね。 当ブログもやってみると次のようにワイヤーフレームにすること

342 Vector Icons - Mike Brisk フリーで使える種類色々３４２種のベクターアイコン集。 次のように、実に様々な模様が円の中に描かれているアイコンセットです。 WEB用というわけではありませんが、WEBサービスに使えそうなアイコンも多く含まれています。 関連エントリ サイトで使える500近いフリーのPNGアイコンセット「spirit20」 手書き感がなんとも素晴らしいアイコンセット集 iPhone4向けのアイコン作成用Photoshopテンプレートファイル 10セットの1000種類にのぼる秀逸なフリーのアイコン集

JavaScriptやPHPで顔認識する場合は「face.com」のAPIが使えそうです。 先日、「1年で70億枚の顔写真をスキャンしたFace.comが顔認識APIを無料で一般公開」という記事にて知ったのですが、公式サイトのDownloadページにてPHPとJavaScriptのクライアントライブラリが公開されてるみたいです。 face.com developers site Download クラスライブラリの形なので非常に簡単に利用することができるようです。 face.comのビジネスモデルと事業の継続性については気になるところですが、お手軽に重い処理をアウトソースできるという点で魅力的ですね。 勿論、このサービスが停止しなくなれば使えなくなるので安定したサービスを提供したい場合には自前でOpenCVを入れてやった方が良さそうです。 関連エントリ PHPでOpenCVなしのピュアPH

10 examples of futuristic CSS3 techniques 近未来に頻繁に使われるであろうCSS3サンプルがまとまっていました。 本ブログで以前に紹介したものも多いですが、まとまっていて便利そうだったのでご紹介。 吹き出しをCSSオンリーで実装 シャドウ＆グラデーション付きの立体ボタン 枠付き写真をCSSで実装 ポラロイド写真風 角丸ファンシーなフォーム実装 立体的なドロップダウンメニュー MacOSのインタフェースをCSSで実装 近未来においては、こうしたものを組み合わせつつ更にJavaScript等とも組み合わさって今では信じられないインタフェースになっていそうな気がします。 １９９０年代後半の時代を振り返ってみると、あの当時当たり前だったサイトが一部のサイトで見られるものになるような、同じような状態になっているのかも。 関連エントリ CSS3等を使ったサンプル

Freebie: Incredibly Detailed 3D Icon Set 次のように、３Dの質感が詳細で美しいWEBアイコンセット（３０種類）が公開されています。 サイトのデザインがクリアで落ち着いた感じのサイトにマッチしそうです。 綺麗なのでワンポイントとして目立たせたい場所などに置いておくと良いかもしれませんね。 関連エントリ 2009年に発見した秀作アイコンのまとめ iPhoneアプリのツールバー部分に使えそうなアイコン色々 iPhoneブックマーク用のアイコンを作成しよう

NIXUS Icon Pack: 60 Beautiful Premium Icons (Free) | Tutorial9 次のプロジェクトに是非使いたくなってしまうような６０個のアイコンセット「NIXUS」。 次のようなアイコンがフリーで配布されてます。 グラデーションがなんともいい感じにかかってますね。 WEB的には、種類的にも基本的なものは殆どそろっているため使いやすそうです。 関連エントリ 2009年に発見した秀作アイコンのまとめ iPhoneアプリのツールバー部分に使えそうなアイコン色々

42 Clean Free Fonts for Your Projects PSDFan 新サービスに使えそうなフォントが４２種類紹介されたエントリのご紹介。 ロゴは訪問者に印象深いものにしたいですね。次のように、サービスに使えそうなフォントが満載です。 こういうフォントを見ていると新しいサービスを作りたくなってきますね。 関連エントリ カーブが美しいフォント色々 すごく良い感じの英文フォントいろいろ デザイン性の高いハイクオリティなフォント色々

20 High Quality Free Fonts for Designers | Freebies デザイン性の高いハイクオリティなフォントが色々集まったエントリのご紹介です。 汎用的なフォント、というよりは個性を出したい場合に使えそうなフォントが色々とあってここぞ、という時に使えるかもしれません。 手書き風だけど綺麗なフォント 漫画っぽいフォント。色合いもいいですね 鉛筆で塗りつぶしたようなアナログ感があるフォント 丸い形が印象的なフォント どれも個性があってつい使ってみたくなるデザインですね。 関連エントリ カーブが美しいフォント色々 すごく良い感じの英文フォントいろいろ これは素晴らしいアートが詰まった２４の絵文字フォント色々

30 Websites To Download Free Stock Photos フリーの写真素材が入手出来る30サイトがまとまってました。 すでにご存知のところもあるかもしれませんが、全部網羅したエントリを知っておくと探すときに便利ですね。 stock.xchng Studio7designs Woophy 沢山あるものですね。 関連エントリ フリーフォト、無料写真素材サイト「足成」 5000枚以上のパブリックドメインな写真素材集「Free Stock Photos」

PHPからTwitterを簡単に操作できるPEARパッケージ「Services_Twitter」がアッ... 次の記事 ≫：PHP関数の挙動をちょっと調べたいときに助かる「PHP Functions Online」 jQuery Form Tips Plugin フォーム要素にうっすらデフォルト値を入れてヒント表示できる「jQuery Form Tips」 フォームにデフォルト値を入れておくことで利用者が何をいれていいのか、というのが直感的にわかり、かつスペースもとらないのでよく使われる手法ですが、実装も超簡単にやりたいですね。 jQuery Form Tips を使えば、フォーム要素の title 属性に値を入れておくだけでヒントを自動表示できます。 <p> <label for="i1">Field1</label><br /> <input type="text" name="i1"

ページ内に雪を降らせられるjQueryプラグイン「jSnow」。 好きな文字をページ内に雪を降らせたような感じで浮遊させることができます。 デモページを見てみましょう 使い方は簡単で、flakeCode に配列を指定すると文字が指定でき、flakeColor 指定で色を指定できます。 $().jSnow({flakes:30,flakeCode:["&spades;","&clubs;"],flakeColor:["#f00","#00f"]}); ちょっとしたドッキリエフェクトとして覚えておくと使えるかもしれませんね。 以下のエントリを参照してください。 jSnow, a jQuery plugin for creating falling snow effect on your website | DuMmWiaM.com

皆さん、新年あけましておめでとうございます。 今年も読んでいただき、ありがとうございます。 では、早速ですが記事のご紹介。 20 Ultimate CSS Tutorials That Will Help You Master CSS | DWSmg.com これさえやればCSSをマスターできるかもしれないCSSチュートリアル＆サンプル20。 全部、そのメカニズムについて覚えたらかなりCSSに詳しくなるのは間違いなさそう。 Advanced CSS Menu カーソルを合わせたときにメニューがCSSオンリーで切り替わる CSS Based Navigation こちらも同様。JavaScriptレスでメニューを切り替えます CSS Fancy Menu CSSとJSを使ってFlashばりのアニメーションメニューを作成 Expandable CSS Tabs Tutorial テキスト長に応

一風変わったボタンも即席で作れてしまうボタン作成素材がまとまっているエントリのご紹介です。 Photoshopファイルなどで配布されており、ライセンスには注意したいですがちょこっと変えてボタンが作れそうです。 以下のエントリを参照してください。 39 Free Buttons And WebDesign Resources From Deviantart | Graphic and Web Design Blog -Resources And Tutorials 関連エントリ ボタン作りにもう手間はかからないPhotoshopのボタン素材１５０

エントリ元がリンク切れしています。Googleのキャッシュ等を参照してみてください 類似のエントリ：これは押したい！というボタンを作成するチュートリアル集 ボタン作りにもう手間はかからないPhotoshopのボタン素材１５０がまとまっています。 知っておけば、ちょっと凝ったようなボタンも一瞬で作れるのでデザインの効率を上げられるでしょう。 Glossy Button DifferentButtons Set Button.PSD Carbon Button リンク先は以下のエントリを参照してください。 150 Free PSD Buttons For Every Day Use | Flash, Design, Vector, Photoshop, Adobe Tutorials | GraphicMania.net

秀逸なWEBデザインの注目すべき細部デザイン色々。 全体を見ていると見落としがちな細部ですが、細かいところにこだわりつつ色々なサイトの紹介がされています。 かなり細かいところですが、細かくこだわることで、サイトデザインの深みやインパクトが強められそうです。 CSSのテクニック的にも色々と使っていて参考に出来そうな部分も多そうです。 影や角の畳んでいる部分など詳細にアクセントを持たせている例 角丸で影付き。背景ともなじんでいる例 飛び出したナビゲーションメニュー。影もあり 凝ったドロップダウンメニュー 凹凸をうまく表現したタイトル＆メニュー リンク先、その他全て見るには以下のエントリを参照してください。 30 Web Designs with Amazing Attention to Detail

HiFi RegExp Tool - Write and Test Regular Expressions in Real-Time その場で動作させて確認する正規表現入門ツール「HiFi RegExp Tool」 ボックスの中に、正規表現を入れるだけで、リアルタイムにページの内容が正規表現に沿ってマッチング＆ハイライト表示され、どの正規表現がどういう意味を表すのかというのが一目で超クイックに分かってしまう便利ツールです。 ボックスに入れられた正規表現に沿って次のように、ハイライト表示されて、カラフルに色分けしてくれます。マッチしたテキストの一覧もページ下部に色付きで分かりやすく表示してくれます。 ページ内のテキストはクリックすることで自由に書き換えることも可能です。 サイドバーには正規表現のチートシートも掲載されています。 これはかなり便利。正規表現入門の高速道路ですね。

リアルな現実をサイトデザインに組み込んだサイトデザイン作成チュートリアル集。 次のような、ノートをそのまま開いたような自由なレイアウトの作成チュートリアルをまとめてみました。 Create a realistic web layout デスクにノートを広げたようなユニークなレイアウト作成チュートリアル Nature Portfolio Layout Interior Design Layout 3D Blog Layout Create a grunge personal portfolio layout Computer Store Web Layout Professional Business Layout Desktop Style Web Layout Photoshop Tutorial 机上スタイルのレイアウト作成チュートリアル Grunge Photographer Lay

光が超カッコいいPhotoshopのブラシを色々とまとめてみました。 次のような、サイトに入れると迫力満点の光のブラシ集です。 Abstract Brushset X - Free Photoshop Brushes at Brusheezy! Abstract Brushset XI | Qbrushes - Photoshop Brushes ABSTRACT BUTTERFLY BRUSHES Abstract Brushes Vol 2 - Free Photoshop Brushes at Brusheezy! Abstract ps brushes for Photoshop | Qbrushes - Photoshop Brushes BRUSHES PACK 3 CS4 BRUSHES ECOL BRUSHES Exclusive - Galactic Brushes -