プロジェクターで投影することで服や背景を見せるという視覚的な面白さのあるCM。 世界中でスポーツ用品を販売するPUMAの靴「L.I.F.T」の宣伝として作られていて、靴だけは映像ではなく本物を履いています。 詳細は以下から。 I Believe in Advertising | Advertising Blog Community | Only selected advertising >> Puma: L.I.F.T 映像投影前。靴だけが鮮やかな色彩を放っています。 映像投影後。舞台は砂浜となり、服を着ているかのように見えます。 こちらはかなり判別が難しい。 この写真だとよく見ると実際に服を身につけていないことがすぐに分かります。 PUMAの公式サイトではこの投影手法をつかった演劇のムービーが見られます。 「WATCH」の所にマウスを移動させて表示される一番上の画像をクリック。YouTu

有料のフォントにはデザインの美しいものが多く揃っていますが、無料でダウンロードできるフリーフォントでも洗練されたデザインのものは多くあり、中には商用で使うことが可能で、使い勝手も良いものがあったりします。 基本的にアルファベットのみとなりますが、ここぞというときのインパクトや、全体の雰囲気をまとめておきたいときなどの使える良いフォントが多くあります。 各フォントの詳細は以下から。各フォントのライセンスについてもわかる範囲でメモしておきました。30 high-quality free fonts for professional designs | Design daily news ■その1：Miso 2006年にMarten Nettelbladt氏によって作成されたフォント。light・regular・boldの3種類のウェイトが揃っており、TrueTypeとOpenTypeの2種類が

無料のクリップアートを山ほどダウンロードできる「Open Clip Art Library」の姉妹プロジェクトで、パブリックドメインで利用できる無料フォントを集めるプロジェクト、それが「Open Font Library」です。置いてあるフォントはすべて無料でダウンロードして利用可能となっています。 詳細は以下から。 Open Font Library Type Casting. http://www.openfontlibrary.org/ フォントの一覧は以下から見ることができます。 Open Font Library Fonts フォント名をクリックするとこのように、実際のサンプルを見ることができます あとは「ttf」と書いてあるボタンをクリックすれば、フォントファイルをダウンロードすることが可能です。

最近のページやサイト作成に欠かすことのできない「CSS（カスケーディング・スタイル・シート）」ですが、そのレイアウト作成を行う際に便利なリソース22種類です。ゼロから作るよりは楽に製作できるはず。 詳細は以下の通り。 40種類のCSSレイアウトがそろっています。 Layout Gala: a collection of 40 CSS layouts based on the same markup and ready for download! CSSのフレームワーク blueprintcss - Google Code 16種類の異なるCSSベースのレイアウト intensivstation :: CSS Templates :: Templates 12種類のCSSによるレイアウト Dynamic Drive CSS Layouts- CSS Frames CSSのレイアウトを作成する

アップロードした画像からその画像を構成する色の要素を抽出し、カラーパレットを作成してくれる無料のネットサービスいろいろです。サイト全体のカラーを統一するときなどに使うと、かなりいい感じです。 詳細は以下から。 Generate a Color Palette from an Image | Arno Nel 2.0 Color Palette Generator アップロードした画像を300ピクセルの長さにリサイズし、解析してくれます。 Palette Generator: Automagically create a harmonious color palette from a photograph FlickrやPhotobucketなどのサービスとも連携可能なのがウリ。 colr.org ランダムにFlickrから画像を選んでカラーパレットを生成したり、あるいはウェブページのアドレ

ピーター・マスカス博士は、かつてBMWやメルセデス、ポルシェでエンジニアやコンサルタントをしていたことがあり、フェラーリやその他スーパーカー・スポーツカーを運転してきて「スポーツカーは遅くはないけれど、速くもない。二人乗って300ポンド(約136kg)ぐらいなのに、それを運ぶために3000ポンド(約1.4トン)のものが必要なのか」と思い、効率のいい車を求めてこの「Acabion GTBO」の製作にたどり着いたそうです。 車体重量は360kg、エンジンはスズキ・ハヤブサが搭載しているものを改良したターボ付き1400cc、700馬力。 詳細は以下。 Acabion Visionary Motion motoring.co.za - Acabion - why shouldn't supercars look like this? ブガッティ・ヴェイロンは時速400kmからトップスピードの時速4

操作感はAJAXで、画像などはCSSで実装されたわかりやすいプログレスバーです。進捗状況などの表示が簡単にできます。また、クリックする度に10％増やしたり、あるいは減らしたりといったことも可能。いろいろなウェブアプリの開発などに応用できそうです。 詳細は以下から。 WebAppers Simple Ajax Progress Bar with CSS by WebAppers ライセンスはMITライセンスで提供されており、以下から実際に試してみることができます。 Demo http://www.webappers.com/progressBar/ 実際にダウンロードしてみると、prototype.jsを使っており、使用するイメージ画像は2種類。その組み合わせでバーの増減を表現するとは、なかなかいい発想。

クリエイティブ・コモンズのライセンスで提供されており、自分の好きな画像を机の上に散らばったポラロイド写真風に表示することができるFlashファイルです。画像はダブルクリックすると拡大されます。 使い方は至って簡単で、同梱のファイルに表示したい画像ファイル名と、説明文を書くだけ。あとは表示させたい画像を一緒にアップロードすれば自動的に読み込んでバラバラバラ～っと並べて見せてくれます。Flashで作られているのでやろうと思えば自分のブログに埋め込むなんてことも可能です。また、編集できるようにFlaファイルも提供されているので改造もできます。 ダウンロードは以下から。 Polaroid Gallery v.1.01 http://no3dfx.com/polaroid/ ダウンロードしたZIPファイルを解凍し、中にある「photos.xml」を編集するだけです。実際にどんな感じで書くかというのは

サイトの説明によると、1万種類のフォントがダウンロードできるそうです。ほとんどのフォントはネット上からかき集めてきたモノとのこと。フォントのタイトルごとにページがまとめられており、それぞれどんなフォントなのかというサンプル画像も一緒に表示されます。 ダウンロードは以下から。 Download free fonts | ShowFont.net | Download 10,000 Free Fonts http://www.showfont.net/ まずはリストからダウンロードしたいフォントを選んでクリックします それから表示されているコードを入力して、「Download Font!」ボタンをクリックすれば、ダウンロードが始まります

設計図無しで作られた一見オブジェのような時計。ギミックが付いているものも多く、真鍮を使っているためかアンティークな雰囲気があるものからゲームのアイテムとして出てきそうなものまで面白い時計がいろいろあります。 詳細は以下から。 末吉晴男時計　作品一覧 「犬棒」 「蚤」 「貴方が噛んだ小指が痛い…ゴールデンナックルボンバー」 「dionaea(ディオネア)」 「輝く星座」 「第六指」 「ANGEL VS DEVIL」 「love it（ラビット）」 「平次2006時蕎麦～ジョン」 「スエッチ　ゴング」 「KAMOGAWA」 「マジカルミステリー〔妖術器〕」 「パパフィンガー改めダディーフィンガーストロング」 「ピース」 「ミラーマンの時計」 「ピーターパン」 これらの時計は末吉晴男氏の作品。以下のリンクの「新作案内」からは販売中の時計も見られます。 末吉晴男・手作り時計工房 時計は下北沢の「タ

クリエイティブコモンズライセンスにて提供されており、無料で使うことができます。また、16x16、22x22、32x32の3種類のサイズのPNG画像以外にも、SVG形式で提供されているため、好きなサイズに変換して利用することも可能です。 ダウンロードは以下から。 Tango Icon Gallery - Tango Desktop Project 使用条件についてはこのページの「Terms Of Use」に書いてあります。 また、SVG形式から好きなサイズのPNG形式画像に変換するには、フリーソフトの「Inkscape」を使うと簡単です。 Illustratorのようにベクター画像を扱うフリーソフト「Inkscape」 - GIGAZINE 起動したらSVG形式のファイルを開いて、「ファイル」→「ビットマップにエクスポート」を選ぶ。 あとは幅と高さを設定して「エクスポート」をクリックすればO

16×16、22×22、32×32、48×48、64×64、128×128までの各サイズがそれぞれ600個以上、全合計で3600個ぐらいある無料で利用可能なアイコン集、それが「Crystal Clear」です。クリエイティブコモンズライセンスで提供されており、PNG形式で提供されています。 ダウンロードは以下から。 Everaldo.com : Crystal Icons http://www.everaldo.com/crystal.html アイコンの一覧は以下から見ることができます。 Crystal Clear - Wikimedia Commons http://commons.wikimedia.org/wiki/Crystal_Clear もともとは以下の画像のように、LinuxのKDEのために作られたアイコンセットと言うことで、そのライセンスが適用されているようです。

技術的知識が無くてもタブを作れるフリーソフトからかなり派手な効果を伴うタブ作成ライブラリ、Yahoo！やGoogle、Adobeの作ったタブまで、いろいろと応用が利いて独自の特徴があるものをざっくりと18種類ほどピックアップしてみました。 いろいろなページやブログで頻繁に見かけるタブ方式のメニューですが、こうやって並べてみると実は見せ方も使い方も種々様々であることがよくわかります。 まずは知識不要でタブが簡単に作成できる「CSS Tab Designer」。Windows用のフリーソフトで、約60種類ものデザインが用意されています。その中にタブ方式のメニューもたくさん用意されており、ほかにも縦型のメニューやZDNet風メニューなども用意されています。 OverZone Software - CSS Tab Designer 細かいカスタマイズが可能なタブメニュー。画像を使ったサンプルも用意

ウェブサイトやブログを作る上で配色はかなり重要ですが、それ故に面倒なものです。そういった悩みを解消するのがこの「ColorBlender」。基準となる色を1つ指定すれば、それに合う色を5色出してくれます。 詳細は以下から。 ColorBlender.com | Your free online color matching toolbox まずスライダーでRGBを調節。 色が決まったら右の「Match blend from active colour」を押し、今のパレットを破棄することをOKする。 すると自動でピックアップされた色が出てきます。 Editing modeを「Direct Edit」から「AutoMatch」に変えると、スライダーを動かすだけで色がピックアップされます。 フォトショップ用やイラストレーター用のカラーパレットとして保存でき、作った配色にリンクするURLも生成可能

ページの制作において必須とも言えるCSSですが、そのCSSファイルを最適化することによってページの読み込みを早くしてみたり、トラフィックの多いサイトであれば転送料の節約にも貢献できるらしい。 というわけで、現時点で存在するCSS最適化ネットサービスをいろいろと探して列挙してみました。最適化といってもサービスによって方法はいろいろなので、この中から自分の目指す方向の最適化サイトが見つかるかも。 CSSの最適化とファイルサイズ削減をしてくれる無料ネットサービスのリストは以下の通り。 Clean CSS - A Resource for Web Designers - Optmize and Format your CSS http://www.cleancss.com/ コメントを残したり、並べ替えたり、圧縮したり、最適化レベルやオプション指定によってかなりカスタマイズできるCSSファイルの容

最近はWeb2.0的なバイラルマーケティング、いわゆるクチコミ的な広告手法が広告主には好まれるようになってきましたが、やはり広告の王道は「おもしろい」という点につきます。クチコミだろうが何だろうが、おもしろくない広告は価値が下がるわけです。 というわけで、いろいろと見ていてイマジネーションを刺激される広告をいろいろと見てみましょう。 閲覧は以下から。 人の顔っぽく見える ハインツのトマトケチャップですが、色は大切ですね これは禁煙の広告。誰がワトソン君を殺したのか？ 動物園の広告。ぬいぐるみを買うよりもホンモノを見に行く方が安い。 PSPの広告 牛乳の広告。よく牛乳を飲むのでこれはわかる気がする。 そのほかにも、以下のサイトにいっぱいまとめてあります。 Moronland.net - 50 Amazing Ads You Haven't Seen

Web2.0のデザイン的要素として「グラデーションをかける」という重要なものがありますが、このグラデーションのかけ方が実際にやってみると実に難しい。ネット上でいろいろ調べてみるとグラデーションのかけ方自体は様々な方法やチュートリアルが見つかるものの、「何が正解なのか？」というのは見つかりません。つまり、何がそのときに最もベストな方法なのかがわからないわけです。 また、ブログのテンプレートを選ぶ際にも、どのようなグラデーションが自分の目指すテーマのブログにふさわしいのかも基本的な知識がないとなかなかわかりにくいものです。 というわけで、今回はグラデーションを使ったデザインの仕方について。デザインをしない人でもどのデザインを選べばいいかがわかるように書いてみました。 ■間違ったグラデーションなど無い まず一番わかりやすいグラデーションについての誤解はこれ、汚いグラデーションやださいグラデーショ

日頃から使っているパソコンのイメージを一新する一番簡単な方法はデスクトップの壁紙を変更すること。壁紙を変えるだけで随分と気分が違ってくるものです。 というわけで、デスクトップ用の壁紙を配布しているサイトを総まとめにしてみました。 XSHOCK | virtual creations 1280x1024が多いですが、1600x1200、1680x1050なんていうサイズも用意。非常にシャープで鮮烈な印象を持つ壁紙が多いです。海外の壁紙をいろいろと集めているサイトだとこの系統が非常に多い。個人的にはかなりお気に入り。 Desktop Wallpapers - 3d MayaとかLightwave、Photoshopなどを駆使し、3次元空間をうまくCGで表現した壁紙がメイン。単なる3DCGとは違い、空間に奥行きや高さが感じられます。 Blogpaper フランスのサイト。イラスト調の壁紙がメイン

いろいろなユーザーがデザインしたカラーパレットに対して投票を行っており、そのデータを見ることができるサイト。それぞれの色には名前が付けられており、その組み合わせであるカラーパレットにも全部名前が付いています。カラーパレットはユーザー投票によってスコアが決まっており、どういう色の組み合わせの人気が高いのかが分かります。また、さまざまな条件でカラーパレットを検索することができ、HEXやRGBも表示されるので、配色に迷った場合には役に立ちます。 詳細は以下の通り。 COLOURlovers Coup.0 :: Color Trends & Palettes http://www.colourlovers.com/ 中でもかなり面白いのが、既存の雑誌の表紙デザインをもとにしてカラーパレットを抽出しているトレンドのコーナー。 COLOURlovers Coup.0 :: Trends たとえばこれは

CSSを使って吹き出しを作成することができるCSSファイルとJSファイル、それから画像ファイルをひとまとめにしたセットです。XHTML1.0準拠で、Internet Explorer 6 と 7、Firefox 2.0、Safari 2.0、Opera 9.0で動作確認ができています。 ダウンロードは以下から。 willmayo.com >> CSS Speech Bubbles 実際のサンプルは以下にあります。 CSS Speech Bubbles 角をまるくしているのは、「curvyCorners」を使用しているとのこと。 ほかにもこの吹き出し方のものは以下に多くあります。 入力欄（フォーム）部分をマウスでクリックすると吹き出しが出てくるタイプ Tooltip for forms リンクの上にマウスを乗せると吹き出しが表示されるタイプ Ajax tooltip リンクの上にマウスを乗せ