音楽系の検索エンジンであるseeqpodのトップページでは、「クローラーが今こんな曲を見つけてきたよ！」をリアルタイムで教えてくれます。 ↑ こんな感じでどんどん曲が見つかっていきます。 検索エンジンをはじめて訪れたときは何を検索するか悩むもの。それよりもこうして候補が出てきてくれるとうれしいですね。またちょっとしたにぎやかさを演出する効果もありますね。 実際の動作は以下からどうぞ。 » SeeqPod Playable Search – Find. Discover. Watch. Listen. Share.

シンプルかつダイナミックなナビゲーションを採用したサイト。デザイナーのMelissaさんのポートフォリオサイトですね。 ↑ ここからスタート。「READY, GO!」をクリックすると・・・。 ↑ 画面がぐいーん！と動いて・・・。 ↑ このように切り替わります。 そんな感じでジェットコースター気分でサイトを見てまわることができます。ちょっと気分がいいですね。シンプルなサイトを作りたい方は参考にされてみてはいかがでしょうか。 » www.MelissaHie.com

家系図をつくれるサービス、Geniのお問い合わせ画面がなかなか便利です。 ↑ 普通の問い合わせ画面ですが、内容を入力しはじめると・・・。 ↑ その言葉をリアルタイムに解析して関連するFAQを表示してくれます。 他のサイトでも採用されているようですが、わかりやすいですよね。サポートコストが大変・・・というサイトで採用してみてはいかがでしょうか。 実際に動作している画面は以下からどうぞ。 » Geni – Help Center なお、元ネタはAjaxianでした。 » Ajaxian – Geni Smart Contact Form

お引越し支援サイトのmoveme.comのエラーメッセージがちょっと変わっています。 普通エラーがあると赤い文字で「正しく入力してください」とか、フォームの枠が赤くなったりしますが、このサイトではフォーム自体が左右にブルブルと震えてエラーだということを教えてくれます。 ↑ テキストボックス自体が横にブルブル震えますｗ。 ちょっとかわいいですね。実際の動作は以下からどうぞ。 » moveme.com – the site that makes moving simple

すでに各所で既出ですがメモとして。 便利なツール類をまとめて保存しておけるtlboxですが、ウェブデザイン用にくわえ、システム管理者のツールも揃ったようですね（前からありましたっけ？） これは使えそうですね。ツールを勉強することで新しい機能を知ることもできますしね。 ご利用は以下からどうぞ。 » tlbox – System Administration Tools

またかよ・・・という方もいらっしゃるかと思いますがｗ、Web 2.0風のロゴジェネレーターをご紹介。いろいろ設定できて便利ですよ。 ↑ 設定項目はこちら。フォントの色、サイズ、星の形などいろいろできます。文字ごとに色も変えられますね。 ↑ この設定で作ってみたのがこちら。 ↑ ちなみに別メニューでボタンジェネレータもありますね。こちらも便利。 似たようなジェネレータは他にもありますが、かなり柔軟に設定できるので個人的にはこれが今のところ一番かも。よろしければどうぞ。 » Web2.0 – Logo Creatr こちらもあわせてどうぞ。 » 簡単に2.0っぽいロゴがつくれるメーカー | i d e a * i d e a

そのままですが、Mashableで「Forget Photoshop: 15 Online Graphics Generators」が紹介されていました。 これはメモしておかねば。 Buttonator ボタンがいろいろ作れます。設定がいろいろあって良いですね。 RoundedCornr: Rounded Corner and Gradient Generator いわゆる角丸パーツを作れます。 Web 2.0 free buttons maker! 2.0っぽいボタンが作れます。 glassy buttons こちらもボタンジェネレータ。 Ajaxload – Ajax loading gif generator Ajaxのローディング中のパーツが作れます。 Web2.0 Logo Creator by Alex P Logo Maker : Web 2.0 Stylr 2.0っぽいロゴ

メモ書きも兼ねてエントリー。「E Logo Design」にて「Top 50 Logo Design Tutorials」が紹介されていました。 スタイリッシュなロゴからどこかで見たようなロゴまで。ロゴつくりの際には参考にしたいですね。 ↑ いわゆる一般的な企業ロゴ。 ↑ S○ype風。 ↑ ちょっと2.0風。 ↑ シンボリックなマークまで。 知っておくとなにかと便利ですね。チュートリアルへのリンクは下記からどうぞ。画像入りでわかりやすいですよ。 » Top 50 Logo Design Tutorials | E Logo Design はじめまして。 ロゴデザインのサイトを運営している ysk と申します。 （毎日、100shikiのメルマガを読まさせていただいています。） ロゴ自体の紹介やロゴ関係のツールやサイトの紹介をサイト上でやったりしているのですが、「ロゴ制作の過程が見られるサ

先日ご紹介した第三弾に続き、第四弾。さて、いつまで続くのやら・・・と思いつつエントリー。 小粋なインターフェースを実現する25のコード 小粋なインターフェースを実現する25のコード （パート2） 小粋なインターフェースを実現する25のコード （パート3） 今回も素敵なコードが揃っていますよ。いくつかご紹介。 ↑ CSSでアラートメッセージを作る方法。ウェブサービスなどにいいですね。 ↑ こうしたメニューのコードをブラウザ上で作れるジェネレーター。 ↑ スライド式のナビゲーションメニュー。 新しくウェブをつくるときに参考にしたいですね。ご利用は以下からどうぞ。 » 25 Code Snippets for Web Designers (Part4)

これはすごい。あらゆるページに拡大鏡を設置できるJavascriptです。 ↑ こんな感じに拡大鏡を設置可能。 画像と簡単なスクリプトをインストールすればOKなようです。 追加するコードは以下のとおり。 まずはページのヘッド部分に以下を追加。 <script type="text/javascript" src="loupe.js"></script> そして拡大鏡を追加したい画像にonLoadで以下を追加。 <div> <img id="..." onLoad="initLoupe(this.id);" src="..." width="356" height="205" alt="..."> </div> 細かい写真などを見せたい場合に便利ですね。知っておくとよさそうです。 ダウンロードや詳しい使い方は以下をご覧ください。 » Loupe.js

シリーズもの第三弾が発表されていました。ウェブ製作に使えるちょっとした小技集です。パート1と2もあわせてどうぞ。 小粋なインターフェースを実現する25のコード 小粋なインターフェースを実現する25のコード （パート2） 今回も全部で25個ありますが、気になったものをいくつかピックアップ。 ↑ Flickrのようにクリックするとその場で編集できるようにする方法。 ↑ テキストがフェードイン、フェードアウトしていくような効果を作る方法。 ↑ CSSだけで上のようなボタンを作る方法。 ↑ CSSだけでリストをこのようなツリーのようにする方法。 全部見たい方は以下からどうぞ。一度試しておくと技の幅が広がりそうですね。 » 25 Code Snippets for Web Designers (Part3)

「小粋なインターフェースを実現する25のコード | S i M P L E * S i M P L E」の続編が出たようです。 今回もなかなか小粋な技がそろっていますね。新しくサービスを作られている方は参考にされてみては。 ↑ ツリー構造のテーブルを実現。 ↑ CSSでプログレスバー。 ↑ CSSでちょっとかっこいいボタン。 ↑ CSSでドロップシャドウかな。 世界中でこうした知識が共有できるようになりましたね。いい時代になったものです。さて、あとはこれをどういうアイディアで実現するか、ですな。オリジナリティのあるサービスつくりたいなぁ。 » » 25 Code Snippets for Web Designers (Part2)

まとめ系エントリーが続きますが、ウェブ職人のためのネタ帳を目指しているのでご容赦くださいませ・・・。 さて、25 Code Snippets for Web Designersなる記事をご紹介。角丸やら噴出しやら、CSSでのグラフなどなど、すぐに使える小技がたくさんです。 ちょっとサイトにスパイスを・・・というときに眺めると便利ですね。このサイトで既に紹介したものもいくつか含まれていますね。よろしければ。 » 25 Code Snippets for Web Designers (Part1) Part 1なので続編もありそうですね。続編が出たらまたお知らせします。

テキストなどがするすると現れたり消えたりするスライド効果はときどき使いたくなりますよね。ただ、それだけのためにPrototype.jsとかscript.aculo.usを使うのもね・・・という方のためのスライド効果作成講座。 細かいところはコードを見てもらうとして、素敵なスライド効果をシンプルなスクリプトだけ（CSSとJavascript）で実現できます。ダウンロードもできます。 » Firblitz: Re: How to Create Digg Comment Style Sliding DIVs with Javascript and CSS 応用例としてスライドする時間を設定したり、スライド終了時にアラートしたりする方法も紹介しています。 個人的にはまだまだJavascriptを勉強中なので、このサイトの丁寧な説明がうれしかったですね。 setTimeoutとかこう使うのねー、と読