CSS BloomというブログなどのCSSデザインをみんなで評価するサイトにて、高評価のデザイントップ20です。 日本のブログデザインのコンセプトとちょっと違うのが多く、見ているだけでも面白いです。ブログデザインの展示会といった感じ。また、どんなデザインのブログにしようかな～と思っている場合にはかなり参考になります。 Top 20 Blog Designs | Blog http://silentbits.com/?p=339 http://silentbits.com/?p=385 以下、上記サイトで出てきたトップ20のサイト第1弾。 Veerle's blog 2.0 - Webdesign - XHTML CSS | Graphic Design Avalonstar. The Aries Project. By Bryan Veloso. Matt Brett Joshuaink

アイコンやウインドウを実際の書類や本などと同じようにして扱うことができる3次元インターフェースです。実際の机の上に置いている書類や本棚みたいなのを想像してもらうと、いかに直感的な操作方法なのかが分かると思います。 実際に動作している様子のムービーを見るとそのことが非常に良く理解できます。ちょっとおはじきっぽい。ムービーは以下から。 YouTube - BumpTop 3D Desktop Prototype https://www.youtube.com/watch?v=M0ODskdEPnQ 高解像度のムービーは以下の公式サイトからダウンロードできます。 BumpTop Prototype - HoneyBrown.ca http://honeybrown.ca/Pubs/BumpTop.html 実際にはこういうペン形式での操作を主眼に置いているようです ムービーを全部見れば分かります

ミニチュア風、あるいはミニチュアっぽく見える写真というのがある。実写をミニチュアっぽく撮影するわけだが、もちろんある程度のテクニックが必要となる。 しかし、「HDR（ハイダイナミックレンジ）」という機能が搭載されたフォトレタッチソフトを使えば、あっという間に誰でもミニチュア風写真が作成できる。ミニチュア風と言うより、ものすごくファンタジーな感じにできるし、上記写真のようにまるで映画のセットみたいな非現実的光景を作り出すことができる。 以下、実写をミニチュア化っぽくしたり、映画セットみたいな画像を作る「HDR（ハイダイナミックレンジ）」についての説明。 ■まずミニチュア風写真の例 有名どころでは以下のような感じとなる。これらは今回の「HDR（ハイダイナミックレンジ）」とは違う手法なのだが、とにかくミニチュアっぽい。 Model World | Metropolis Magazine MONT

この「AJAX Google calendar Reader」を使えば、GoogleCalendarのRSSを表示可能。同様の原理でページに埋め込むこともできるらしいので、GoogleCalendarの予定を自サイトで表示したい場合に便利かも。 AJAX Magazine: Howto integrate Google Calendar in your website using AJAX オンラインデモはこちら http://phpmagazine.net/demo/ajaxcalendar/ ダウンロードはこちら http://phpmagazine.net/download/ajaxcalendar.zip 要するにRSSをページのコンテンツとして表示できるのであれば他のスクリプトでも同様のことは可能。

Google Maps API、AJAX、MySQL、PHPを使って自サイトへの訪問者をリアルタイムにGoogle Mapsにマッピングして表示する驚愕のスクリプトです。 vega.rd.no - Mapping website visitors in real time http://vega.rd.no/entry/200605_mapping_website_visitors 実際の例はこちら。 Visitors to vega.rd.no http://beta.vegard.name/gmap/ もっと工夫すれば吐き出すコードに応じて色分け表示とかもできそう。 Googleのアクセス解析もこんな感じでGoogle Mapsと連動できれば面白いかも。あれはあれで独自の世界地図上に表示していますが…。

ブログのテーマやテンプレートを最初から用意されているもの以外のデザインにしようと思うと、様々な知識が必要になり、結局あきらめてしまう人が多いはず。 しかしこの「Canvas for Wordpress」を使えば、自分の好きな機能の部品をドラッグ＆ドロップで配置するだけでお好みデザインのオリジナリティあふれるブログが完成。デザインについてのCSSやPHPの知識は不要。 ダウンロードは以下から。もちろん無料。 Welcome to Canvas http://www.freshpursuits.com/canvas/download ドラッグ＆ドロップで配置した後、それぞれのプラグインの設定もクリックすることで可能になる それぞれのブロックやプラグインについて複製したり削除したりするのも簡単 また、CSSの知識をあまり必要とせずにカラーやフォントを決めることもできます これが完成図 ベースとな

通常のチェックボックスやラジオボタンと違う見た目のものをあらかじめ用意されている画像とCSSで作ろうというわけです。 実際の例と作り方の解説は下記サイトへ。 Styling Checkbox and Radio Graphics With Only CSS http://pdatabase.dyndns.biz/tutorial02.php ただしIEでは動作しません、あしからず。

システムとしては、サインアップ時のユーザー情報はMySQLに格納、パスワードはランダムに生成してから暗号化してデータベースへ、ログイン前にユーザーの電子メールアドレスが有効かどうかのチェック、データベースに登録した情報とログインするシステムとの連動、ユーザーがパスワードを失念した場合のリカバリシステム、PHPのセッションの基本的な使い方、ユーザーにメールを送る機能、などなどで構成されています。 PHP Help: Creating a Membership System with PHP and MySQL 日本語で使う場合は文字コードとかも考慮しなくてはならないのでもうちょっと違った感じになるのだと思いますが、それでもかなり細かく実際の例も交えて書いてあるのでかなり参考になるのではないかと。

クリックすると既存のページにオーバーレイ効果を施して表示されるボックスです。よくあるAJAX効果をより簡単に適用できるのがウリです。画像やログインフォームなどに応用可能。 どういう効果なのかは下記のデモを見れば分かります。アクセスしてとりあえず画像をクリックしてみましょう。 iBox Test Page http://www.ibegin.com/ibox/ibox-test.html ダウンロードと使い方の解説は以下から。 iBox / iBegin Blog (powered by evoBlog) http://www.ibegin.com/blog/p_ibox.html

しかもIE5.5、IE6、IE7β、Opera8、Firefox1.5などで動作確認済みというクロスプラットフォーム式。 cross browser multi page photo gallery http://www.cssplay.co.uk/menu/lightbox.html#flower8 これも同じ感じ。 Suckerfish HoverLightbox | Monday By Noon http://www.mondaybynoon.com/2006/03/27/suckerfish-hoverlightbox/

JavaScript のみでリアルタイムにアニメーションしてくれます、これはすごい。 [JavaScript] Animation.Cube - サイコロ回転エフェクト (rotating cube animation) http://www.kawa.net/works/js/animation/cube.html Animation.Cube クラスは、JavaScript のみでサイコロ回転風のアニメーションエフェクト(rotating cube animation)を実現するライブラリです。 事前に画像ファイルを加工(拡大縮小や分割処理)せず、JavaScript のみでリアルタイムにアニメーション処理を行います。 2画像の切替えエフェクト処理用、または、サイコロの4面に貼り付けた画像をループで回転させるような処理に利用できます。 画像の拡大縮小処理が入っているため、 ラスタスクロ

上記画像を見れば分かるように、水面やなめらかな金属などに映り込んだような効果を画像に簡単に持たせることができるようになります。わざわざ画像を加工するソフトウェアを起動する必要がなくなるというわけ。映り込みの度合いも調整可能です。 Internet Explorer 5.5以上、Firefox 1.5以上、Opera 9以上、Safariで動作する模様。 Reflection.js http://cow.neondragon.net/stuff/reflection/ 「class="reflect"」というのを加えるだけで基本的に利用可能になります。画像ごとに効果を加える必要がなくなるというのがメリットらしい。ブログのアバター画像などで使うことを主目的に開発されたらしいですが、そのほかにも何か面白いことができそうな気もする。 なお、上記サイトからWordpressやphpBB、vBulle

「curvyCorners」はフリーのJavaScriptで、角が丸いコーナーをDIV要素で簡単に作ることが可能。特徴は画像を使ったのと同じくらい角がなめらかに丸くなる点と、いたって利用が簡単な点。 どれぐらい丸くなるのかという実例とコードのダウンロード、設置方法は以下を参照。 例その1、3ピクセルの白いボーダーを使い、角は半径20ピクセルで丸くなってます 例その2、固定幅と高さで画像を固定し、角は半径20ピクセルで丸くしている例 ダウンロードはこちらから 使い方は以下を参照 http://www.curvycorners.net/ ほとんどのメジャーなブラウザをサポートしているので汎用性も高く、使い勝手もいい感じです。

オーバーレイ効果を作り出す「Lightbox」というスクリプトの超軽量版です。 実際の例やダウンロードは以下から。 Litebox- Same great taste, less calories http://www.doknowevil.net/litebox/ 上記ページの画像をクリックするとどういう効果なのかがよく分かります。 Liteboxで使われているのがこの「moo.fx」という軽量なJavaScriptエフェクトライブラリ。 moo.fx - the next small thing http://moofx.mad4milk.net/ また、類似品としてはこんなのもあります。 GIGAZINE - オーバーレイ効果を作り出す軽量スクリプト「iBox」

通常のマウスオーバーを使うメニューだと、展開まで早すぎる、あるいは遅すぎる場合が多々あるわけですが、このスクリプトだとちょうどいい速度で展開してくれるらしい。 スクリプトの詳細は以下の通り。 Timeout your Mouseovers 上記ページの「Roll over me」の上にマウスを乗せれば展開されます。確かに今までのものよりもスピードやタイミングがちょうどいい感じな気もする。ちょっと一呼吸置いてから展開される感じですね。

ファイルサイズわずか10キロバイト、CSSの1から3、XPathをサポートし、Internet Explorer、Firefox、Safari、Operaで動作します。「JavaScriptのコードを書くのが楽しくなる」というのがモットーらしい。 ダウンロードや実際の例、使い方などの各種取り扱い説明は以下の通り。 jQuery: New Wave Javascript http://jquery.com/ 上記ページの「Run」をクリックするとその機能の一端を垣間見ることができます。面白い効果です。 その他のデモとしてはこんな感じでいろいろなところに使えます。特に一番下の「Example G」のボタンをクリックしてから本文の上にマウスを乗せると色が変わり、フェードしながら元に戻るというのはシンプルながら面白い。 JQuery http://codylindley.com/blogstuff

Firefoxの拡張機能として利用でき、GoogleとYahooの検索結果がそのままSEO対策リンク集に早変わりします。ページランク、いつからそのページがネットに存在しているのか、被参照リンクの数、Alexaでのトラフィックランク、Whois情報などが簡単に一覧できるようになります。 特定の対策を施したいキーワードで検索し、結果を見ればどのようなSEO対策を行うべきか（どこが既に強いのか、どこが弱くて伸ばすべき点なのか）が分かるというわけです。 実際に使ってみましたので、インストール方法と使い方、設定については以下を参照。 SEO for Firefox ■インストール まずは上記サイトにアクセスし、「Click Here」をクリック 初期設定ではこのサイトからインストールできないので、上部に表示されるバーの右にある「設定を変更」をクリック 「許可」をクリック 「閉じる」をクリック もう一

自分のパソコンに保存されている画像を使って、文字だけのもの、つまりアスキーアートに変換できます。上記画像は、GIGAZINEのロゴを変換したもの。よくできてます。 例としては以下のサイトにあるような感じ。 http://www.text-image.com/samples/face.html その他の例 http://www.text-image.com/samples.html TEXT-IMAGE.com :: Convert http://www.text-image.com/convert/index.html 変換方法は3種類、HTMLコードを使って色情報も維持したままで変換する方法、純粋に白黒の文字だけで構成する方法、さらに映画「マトリックス」で出てきた文字列のみで構成する方法。どれもこれもなかなか一風変わった効果を味わうことができます。

フォームに自分のサイトのアドレスを入れるだけで、Googleのページランク、Googleでの検索結果から類推されるリンクしているサイトの数、同じくYahoo！とMSNからのリンク数、さらにはAlexaのトラフィックグラフへのリンクなどをまとめて表示してくれます。 Who links to me http://www.wholinks2me.com/ ほかにもそれぞれのリンク元一覧がずらっとこのサイト下部に並ぶので、自サイトのメジャー具合を調べるのに都合がいいかもしれません。また、SEO業者に頼んでからその成果を見る場合に役立つかも。 なお、この「Who links to me」はRefererを見ているらしく、自サイトからリンクすればそのリンク元サイトの結果で自動的に表示してくれます。そこで自サイトからリンクする用のタグもページ最下部に提供されています。

サイトのコンテンツのレイアウトを考える場合、コンテンツをどのようなレイアウトでは位置すればいいのか悩む場合が多々あります。2コラムにするのか3コラムにするのか、それぞれのコラムの下にさらに子コラムを入れるのか否か、右サイドに置くのか左サイドに置くのか、などなど。 そんな場合に参考になるのがこの「Layout Gala」。CSSによるレイアウトの例が40種類あるので、自分の作りたいサイトのスタイルに近いレイアウトを実際に見てから、CSSファイルをダウンロードできます。Layout Gala http://blog.html.it/layoutgala/ 全部のレイアウトのファイルを詰め込んだファイルのダウンロードは以下から。 http://blog.html.it/layoutgala/allLayouts.zip また、「Yahoo! UI Library」にも単一のCSSファイルで100

上記画像のRSSアイコン、Firefoxに採用されているRSSアイコンですが、これをRSSアイコンのスタンダード、つまり標準のものとして普及させようというのが「Feed Icons」の趣旨です。既にマイクロソフトの次期Windows Vistaに搭載される「Internet Explorer 7」のRSSアイコンとしても採用が決定しており、事実上の標準アイコンとなりつつあります。 また、元になるアイコンの素材も配布されており、様々なサイズのGIF・PNG・JPEG画像、それぞれの元になったPhotoshop形式画像、EPS形式、Illustrator形式、SVG形式、PDF形式と考えられる限りのアイコン素材が詰め込まれています。サイズも10×10から128×128まで標準で入ってます。これによってデザインは同じでも色を違うものにするとかが簡単にできるというわけ。 ダウンロードは以下のサイト

Web2.0としてくくられるタイプの各種ネットサービス、いわゆるウェブアプリは以前とは比較にならないほど動的生成されるものが多く、結果としてものすごい負荷をシステムにかけるわけです。 というわけで、海外におけるデジカメ画像共有サービスの代表的なものである「Flickr」の開発者がJavaScriptを高速化する手法について解説しています。 Vitamin Features >> Serving JavaScript Fast 手順を分割して簡単にしてみたり、キャッシュを使ったり、転送量を圧縮して帯域を節約したりいろいろあるようです。なお、GIGAZINEはキャッシュシステムを採用して有効活用することで負荷を現在、当初の12分の1に抑えています。 また、こっちはリバースプロキシによる高速化手法。 ViSolve.com - Squid Support Service Apacheのモジュール

IBMにAJAXとPHPとMySQLを使ったRSSリーダーの作り方が掲載されています。 いわゆるサーバインストール型のRSSリーダーについて、個人で使うだけではなくその結果を閲覧者に見せるためのモードも搭載するという非常に凝ったものになっています。 ソースコードもダウンロードでき、実際のスクリーンショットなども使って解説されているのでRSSリーダーを作りたいと思っている人にはかなり有益な情報になるのではないかと。 作り方とコードのダウンロードは以下から。 Ajax RSS reader そのほかにも日本語で書いてあるのは以下のようなページ。 「Ajax + PHP」でRSSリーダーを作る : きまぐれ日記2『オンとオフの狭間』 http://sakipapa.sakura.ne.jp/blog/2006/03/002534.php Ajaxを使おう　RSSリーダーを作る - ［JavaSc

9800個もあるフォントを無料でダウンロードできるサイトです。ちゃんとプレビューも表示されるのでダウンロード前にどんな書体か確認もできます。 ダウンロードするには「DOWNLOAD THE FONT」の下にあるフロッピーディスクのアイコンをクリック。ポップアップしたウインドウに表示されるランダムなアルファベット3文字を入力して「Send」をクリック。あとは表示される「click to download the file」をクリックすればダウンロードできます。 9800 Free Fonts, fonts for free, font finder, download free fonts, free typography http://www.creamundo.com/index.php?lang=en ほかにも以下のサイトで無料のフォントを山ほどダウンロードできます。いざというときに備

上記写真はCGでも特殊加工してあるわけでもありません。これらはいわゆる「ストーム」というレベルにまで達するレベルのものばかり。こんなものを目撃した日には一生の思い出になりそう。 Extreme Instability http://www.extremeinstability.com/index.htm 嵐の写真を年度ごとに分類したページはこちら http://www.extremeinstability.com/imagesbyyear.htm あまりにもすごすぎます。

マイクロソフトがWindows Vistaで何ができるようになるかをムービーで解説してくれるサイトをつくったようです。謎のおじさんが出てきてくれます。しかも、何も再生しないで放置していると、こっちのディスプレイをコンコンと叩いて何かするように促してきます…… :: Welcome to See Windows Vista :: http://www.seewindowsvista.com/ 「Connecting with Poeple」の「Otto」とかいうショッピングサイトのデモは近未来的。「Managing the Big Picture」の「Skelta」はビジネスのプロセスを図示化するもの。「Areva」は交通情報をリアルタイムに表示するらしい。これはすごい。 中でも「Expanding Your Possibilities」の各ムービーは必見。一番最後の「iBlocks」はかな

コンピュテーションアートとは、いわゆるアルゴリズムや数式などによってグラフィックイメージを自動で創り出すというもの。マンデルブロ集合などがその例です。中でもこの「Complexification」にて公開されているものはどれもコレもクオリティが尋常ではないくらいに高い。 また、このグラフィック生成に利用されているJavaAppletも公開されており、オリジナルの画像を作成できる。それどころかソースコードまで提供されている。 Complexification | Gallery of Computation http://www.complexification.net/gallery/ 例えばこれは上から見下ろした街並みのようなイメージを生成するアプレット。放置しておけばどんどん細かく美麗になっていく。なんとなくシムシティの超高速版みたいな印象も受ける。 Substrate（900×900

「Google Spreadsheet」というウェブベースのオンライン表計算サービスの限定テストが開始されたわけですが、早速ざっくりと使ってみました。ちゃんと日本語入力も可能で、既存のExcelファイルも読み込めました。 以下、さらなる詳細。 一応先着順でテストには参加できるらしく、まずここから申し込みます。 Welcome to Google Spreadsheets (Limited Test) http://www.google.com/googlespreadsheets/try_out.html 既に作成済みのGoogleアカウントを入力すればおしまい。「Your invitation to try Google Spreadsheets」という件名のメールが来るので、本文に書いてあるアドレスにアクセスすれば参加できるようになります。 コレがその画面 ログイン直後の画面、まんまE

チェックしたいサイトのアドレスを入力するだけでGoogleページランク、Yahoo!WEBランク、トラフィック世界ランク、サイト来訪者数、サイト来訪者の平均ページビュー、最重要に設定されているキーワード、最重要キーワードの月間検索数、Google/Yahoo!/MSNの最重要キーワードでのサイトの順位と競合数・狙い目数値、Google/Yahoo!/MSNの被リンク数、ドメイン取得年月日などがわかります。 今まであちこちの同種のサイトを使っていたのがかなり楽になります。国内サービスなので表示も全部日本語で、非常にわかりやすいです。 SEO TOOLS http://www.seotools.jp/ SEOアクセス解析ツール http://www.seotools.jp/001_seoanalyze/ SEO TOOLS - 順位チェックツール http://www.seotools.jp/

むちゃくちゃたくさんあります。 Hubble Heritage Gallery of Images http://heritage.stsci.edu/gallery/gallery.html 壁紙バージョンは以下にあります。 HubbleSite - Wallpaper http://hubblesite.org/gallery/wallpaper/ ちなみにこのカラフルな色は勝手に想像で決めたわけではなくて、ちゃんと以下のようなフィルタの原理に基づいて決定されています。 HubbleSite - Light & Filters

次のIE7やFirefox、Opera、Safariなどでサポートされる「CSS3」に関する情報をまとめたサイトです。テーブルの角を丸くするとか、文字に影を付けるとかの効果を確認できる実際にCSS3を使ったサンプルもあります。 Everything you should know about CSS3 - CSS3.info http://www.css3.info/ プレビューいろいろ。 CSS3 Preview - CSS3.info http://www.css3.info/preview/ 例としては以下のような感じです。なお、FirefoxなどのCSS3に対応したブラウザで見ないと効果がわかりませんのであしからず。 角を丸くする、四隅の内2つとか、上だけとか下だけとかも可能 http://www.css3.info/preview/rounded-border.html 文字に影

オープンソースだったり、フリーだったりといろいろ。ブログのデザインの参考にしたり、見映えのするサイトを作りたいときとかに便利。全部でサイトデザインの総数は3000個以上ありますので、よりどりみどりです。 まずはこれ。数は少ないですが、ブログ用とかウェブサイト用以外に、写真もあります。 Open Source Website Templates and Downloads studio7designs studio 7 designs 次のサイトは現時点で1645もウェブサイトのデザインが置いてあります。 Open Web Design - Home 以下のサイトはテンプレート79個＋35個＋11個。ほかにもロゴとかもあります。 Zymic ¨ Free Templates & Tutorials 最後のサイトは現時点で1688もデザインがあります。 Open Source Web Desi

解像度は1200×900から1600×1200まで。ファイルサイズは400KBから1.5MB程度。ちょっとだけ日本語対応。 ジャンルは12、テクスチャ、動物と昆虫、テクノロジー関係、植物、液体・気体・光、建物・家・インテリア、いろいろな物、雲、景色・風景、花、季節のイベント、パターン、といった感じです。 ダウンロードは下記から。 Free Royalty Free Stock Photography - Home http://www.adigitaldreamer.com/gallery/index.php こんな感じでディレクトリの中が丸ごと見えるので、ダウンロード支援ソフトで一括ダウンロードしてしまうのも良いかも。 Index of /gallery/albums/animals http://www.adigitaldreamer.com/gallery/albums/animal

ログインする人も何もかもがピクセルでできています。空いているビルの看板をクリックすると本当に広告を出すことも可能です。街の中はAJAXでうろうろすることが可能。 実際に体験するのは以下から。 citypixel.com http://www.citypixel.com/index.htm 広告はこんな感じで出てきます。街の看板そのもの。 こんな感じで出てくるナビゲータの矢印の上にマウスを置けばぐりんぐりん移動してくれます。 また、ログイン登録すると自分で作ったピクセル人物を置くことができるらしい。なかなかよくできてますね。将来的にはポストをクリックしたらメールを出すとかいろいろできるようにする予定らしいです。

上記画像のような警告アイコンというか警告看板みたいなのを簡単に作ることができるサイトです。 使い方などは下記参照。 Warning Sign Generator http://www.warningsigngenerator.com/ まず「Step #1」で大雑把な枠を選択し、次に「Step #2」でアイコンを選びます。そして「Step #3」で表示する文字を選びます。使用できるのは英数字及び記号のみ。最後に「Step #4: Click this button...」の直下にあるボタンをクリックすれば、画像が生成されます。 なお、これの前バージョンはこちら。大きさやレイアウト、使用できるアイコンなどが違います。 Warning Label Generator http://www.warninglabelgenerator.com/

パブリックドメイン、クリエイティブコモンズでライセンスされている各種クリップアートをダウンロードできます。 サイト作成、プレゼンテーションやレポートなどで使えるアイコン風のものも多いので、ちょっとしたアクセントを加えたいときに便利です。 ダウンロードは以下から。 Open Clip Art Library :: openclipart.org :: Drawing Together. http://www.openclipart.org/ 上記ページの「Clip Art Search by Keyword BETA」から検索して探すこともできます。 ジャンル別に探したい場合はここから http://www.openclipart.org/cgi-bin/navigate まとめて全部ダウンロードしたい場合はこちらから http://www.openclipart.org/downloads