jQueryで実装するツールチップまとめ
Create a jQuery Popup Bubble
Create a jQuery Popup Bubble » Digital Visions Queenstown （別窓）
非常にシンプルながらスタイリッシュなフェードインするツールチップ。
拡張性には乏しいですが、ちょっとアクセントがほしいという場合の選択肢としてあってもいいかもしれません。
Simpletips
Simpletip - A simple jQuery tooltip plugin （別窓）
非常に豊富なカスタマイズが可能なツールチップ。
ちょっとしたアニメーションをつけられるほか、表示位置の変更も簡単に出来ます。
BeautyTips
BeautyTips Demo Page （別窓）
最高峰かもしれないツールチップ。
トリガーが豊富に用意されているほか、ツールチップを表示させるために操作を行う要素自体にも効果をつけられます。
おわり
まとめと言いながら3つしか紹介できてませんが、ツールチップでやりたいことは2つ目と3つ目で大体実現できると思います。もしかしたらあなたのニーズに合ったものが見つかるかもしれません。
印象的な背景を用いたサイトとその作り方
Website Backgrounds: 70+ Impressive Trends, How To’s & Best Practices （別窓）
印象的な背景画像が用いられたサイトと、その背景画像に似たテイストのものを自分で作成する方法が紹介されています。
再現方法を知るだけでもデザインの幅が広がるので、こういった実例を用いた紹介は嬉しいですね。
印象的な背景画像が用いられたサイトと、その背景画像に似たテイストのものを自分で作成する方法が紹介されています。
再現方法を知るだけでもデザインの幅が広がるので、こういった実例を用いた紹介は嬉しいですね。
2009.01 Best of the Web!
Best of the Web: January - NETTUTS （別窓）
2009年の1月にWebの技術関連の情報収集を怠ってしまったという人もこれだけ見れば安心！
というのは少し言いすぎかもしれませんが、2009年1月に書かれたWebに関する素晴らしい記事がまとめられています。
その内容はデザイントレンド、jQuery、WordPress、Twitterウィジェットなど非常に多岐に渡るものとなっています。
あまり情報収集を出来なかった人も、特に優れた記事を知りたい方も満足できる内容になっていると思いますので、是非ご覧下さい。
2009年の1月にWebの技術関連の情報収集を怠ってしまったという人もこれだけ見れば安心！
というのは少し言いすぎかもしれませんが、2009年1月に書かれたWebに関する素晴らしい記事がまとめられています。
その内容はデザイントレンド、jQuery、WordPress、Twitterウィジェットなど非常に多岐に渡るものとなっています。
あまり情報収集を出来なかった人も、特に優れた記事を知りたい方も満足できる内容になっていると思いますので、是非ご覧下さい。
これはすごい！様々なUIパターンを網羅「Quince」
Infragistics Quince: UX Patterns Explorer （別窓）
Quinceは様々なユーザーインターフェース（以下UI）パターンを集めたサイトです。
閲覧にはSilverlightが必要です。
素晴らしさは実際に触って感じて欲しいのですが、ちょこっとだけ紹介してみます。
まず最初に表れるのは検索窓、そして「All Patterns」、「By User Tasks」、「By Tag Relations」、「By Wireframe」という4つのボタン。
UIを閲覧するにあたり、5つの大きな絞込み方法が提供されているわけです。
全てのパターンがアルファベット順に表示されます。
「EXPLORE RELATED」ボタンに関しては、下の「By Tag Relations」の方をご覧下さい。
各UIの詳細画面は以下のような感じ。
そのUIパターンの実例と、それに関する説明が書かれています。
さらに下部にはユーザーがコメントを出来る領域が表示されています。
また、画面右には以下のようなインターフェースが表示されています。
これを用いることで、アルファベット順の絞込みに加えて用途による絞込みが可能です。
こちらはUIの種類から絞込みをするモード。
先ほどのアルファベットに加え、「Find Stuff」、「Edit Things」、「Explore Info」、「Analyze Data」という4つのカテゴリで絞込みが出来ます。
こちらはUIの種類と、それらの関係性を見ることが出来ます。
各ページに表示されていた「EXPLORE RELATED」を押すと、そのUIがこの関係図においてどこに属するかが以下のように表示されます。
最後にWireframeですが、こちらではまず中央にコンテンツの全体像の例が表示されます。
そしてそのコンテンツにおいて、どのUIがどこに配置されるかが表されています。
こちらではAll Patterns同様に、右側にフィルタリングを行うインターフェースが表示されています。
絞込みの方法が多く用意されているのは非常に魅力的ですね。
Silverlightで構築されたコンテンツで感動したのは初めてです。
ユーザー登録をすることでコメントや例の追加なども出来るようなので、興味がある方は登録してみてはいかがでしょうか。
画像が多くなってしまいましたが、いかがでしたでしょうか。
少しでもこのコンテンツの魅力が伝われば幸いです。
Quinceは様々なユーザーインターフェース（以下UI）パターンを集めたサイトです。
閲覧にはSilverlightが必要です。
素晴らしさは実際に触って感じて欲しいのですが、ちょこっとだけ紹介してみます。
まず最初に表れるのは検索窓、そして「All Patterns」、「By User Tasks」、「By Tag Relations」、「By Wireframe」という4つのボタン。
UIを閲覧するにあたり、5つの大きな絞込み方法が提供されているわけです。
All Patterns
全てのパターンがアルファベット順に表示されます。
「EXPLORE RELATED」ボタンに関しては、下の「By Tag Relations」の方をご覧下さい。
各UIの詳細画面は以下のような感じ。
そのUIパターンの実例と、それに関する説明が書かれています。
さらに下部にはユーザーがコメントを出来る領域が表示されています。
また、画面右には以下のようなインターフェースが表示されています。
これを用いることで、アルファベット順の絞込みに加えて用途による絞込みが可能です。
By User Task
こちらはUIの種類から絞込みをするモード。
先ほどのアルファベットに加え、「Find Stuff」、「Edit Things」、「Explore Info」、「Analyze Data」という4つのカテゴリで絞込みが出来ます。
By Tag Relations
こちらはUIの種類と、それらの関係性を見ることが出来ます。
各ページに表示されていた「EXPLORE RELATED」を押すと、そのUIがこの関係図においてどこに属するかが以下のように表示されます。
By Wireframe
最後にWireframeですが、こちらではまず中央にコンテンツの全体像の例が表示されます。
そしてそのコンテンツにおいて、どのUIがどこに配置されるかが表されています。
こちらではAll Patterns同様に、右側にフィルタリングを行うインターフェースが表示されています。
おわり
UIを紹介するサイトだけあって、UIがとても優れています。絞込みの方法が多く用意されているのは非常に魅力的ですね。
Silverlightで構築されたコンテンツで感動したのは初めてです。
ユーザー登録をすることでコメントや例の追加なども出来るようなので、興味がある方は登録してみてはいかがでしょうか。
画像が多くなってしまいましたが、いかがでしたでしょうか。
少しでもこのコンテンツの魅力が伝われば幸いです。
美しい＆使いやすいナビゲーションメニュー50選
50 Beautiful And User-Friendly Navigation Menus | Design Showcase | Smashing Magazine （別窓）
美しいナビゲーション、使いやすいナビゲーションが合計50個紹介されています。
CSSを用いたもの、CSSとJavascriptを用いたもの、Flashを用いたもので分けて紹介されており、それぞれの特徴を把握するのにも役立つかもしれません。
最近はjQueryやMootoolsのおかげでJSでFlashに見劣りしない挙動が実装出来るようになりましたが、それでもやはりFlash独特の動きは魅力的です。
これらと比べてしまうとCSSのみで実装されたナビゲーションはチープに見えるものの、工夫次第でそのチープさを拭うことが出来るのもおもしろいところですね。
こちらの記事ではその工夫が非常に凝らされたものが紹介されており、CSSの可能性を感じさせてくれます。
User experience and web design consultants | Clearleft Ltd. （別窓）
これは非常にシンプルですが、工夫されたデザインだと思います。
CSS Spriteの参考にもなるいい例ではないでしょうか。
tap tap tap ~ tasty bits for your iPhone （別窓）
また、これは一見Flashを使っているように見えますが、実はCSS+JSで実装されています。
これ以外にも魅力的なデザインが多数紹介されているので、是非ご覧下さい。
美しいナビゲーション、使いやすいナビゲーションが合計50個紹介されています。
CSSを用いたもの、CSSとJavascriptを用いたもの、Flashを用いたもので分けて紹介されており、それぞれの特徴を把握するのにも役立つかもしれません。
最近はjQueryやMootoolsのおかげでJSでFlashに見劣りしない挙動が実装出来るようになりましたが、それでもやはりFlash独特の動きは魅力的です。
これらと比べてしまうとCSSのみで実装されたナビゲーションはチープに見えるものの、工夫次第でそのチープさを拭うことが出来るのもおもしろいところですね。
こちらの記事ではその工夫が非常に凝らされたものが紹介されており、CSSの可能性を感じさせてくれます。
User experience and web design consultants | Clearleft Ltd. （別窓）
これは非常にシンプルですが、工夫されたデザインだと思います。
CSS Spriteの参考にもなるいい例ではないでしょうか。
tap tap tap ~ tasty bits for your iPhone （別窓）
また、これは一見Flashを使っているように見えますが、実はCSS+JSで実装されています。
これ以外にも魅力的なデザインが多数紹介されているので、是非ご覧下さい。
海や火星のツアー、そしてタイムスリップまでできるGoogleEarth5.0がリリース
「Google Earth 5.0」公開、海底探検や過去の画像の閲覧が可能に （別窓）
GoogleEarthでついに海中探索まで出来るようになってしまいました。
上の記事によると、海の中だけで20のコンテンツレイヤーが用意されているようです。
こちらは火星。
NASAとの協力で実現したもので、火星の地形や高解像度の画像を閲覧することができます。
こちらは過去の衛星航空写真を閲覧出来る機能。
スライダーを動かすことで日付を指定し、その場所の過去の衛星写真を見ることが出来ます。
さらに、オリジナルツアーを記録する機能も持っています。
音声を入れることが出来、それを公開することでGoogleEarthを導入している全てのユーザーがそのツアーを体験することが出来ます。
観光のプランに困ったとき、GoogleEarthで他人のツアーを参考にするなんてことも出来るかもしれませんね。
ダウンロードは以下から。
Google Earth （別窓）
GoogleEarthでついに海中探索まで出来るようになってしまいました。
上の記事によると、海の中だけで20のコンテンツレイヤーが用意されているようです。
こちらは火星。
NASAとの協力で実現したもので、火星の地形や高解像度の画像を閲覧することができます。
こちらは過去の衛星航空写真を閲覧出来る機能。
スライダーを動かすことで日付を指定し、その場所の過去の衛星写真を見ることが出来ます。
さらに、オリジナルツアーを記録する機能も持っています。
音声を入れることが出来、それを公開することでGoogleEarthを導入している全てのユーザーがそのツアーを体験することが出来ます。
観光のプランに困ったとき、GoogleEarthで他人のツアーを参考にするなんてことも出来るかもしれませんね。
ダウンロードは以下から。
Google Earth （別窓）
Googleが大変なことになっていた件
1/31の23時半ごろから、Googleで検索をするとあらゆるサイトに「このサイトはコンピュータに損害を与える可能性があります。」と表示される事態になっていました。
この「このサイトはコンピュータに損害を与える可能性があります。」という表示はマルウェアを警告する機能のようです。
本日0時15分ごろ復旧したようですが、果たしてGoogleに何があったのでしょうか。
今日はGoogleから目が離せません。
画像のプレビューをポップアップで表示するjQueryプラグイン
New jQuery plugin: ‘imgPreview’ - James Padolsey （別窓）
画像にリンクを指定し、そのリンクにカーソルを合わせるとポップアップでプレビューを表示してくれるjQueryプラグインです。
idの指定だけで簡単に導入することが出来ます。
アニメーションの時間の指定などもコールバックで簡単に変更が可能です。
画像にリンクを指定し、そのリンクにカーソルを合わせるとポップアップでプレビューを表示してくれるjQueryプラグインです。
idの指定だけで簡単に導入することが出来ます。
アニメーションの時間の指定などもコールバックで簡単に変更が可能です。
404エラーページいろいろ
404 Error Pages, One More Time | Design Showcase | Smashing Magazine （別窓）
様々な404エラーページが紹介されています。
ユニークなものだけではなく、他のコンテンツに誘導するものなど、それぞれ工夫が凝らされています。
他の404エラーページを見たい方は、以下の記事もあわせてどうぞ。
60 Really Cool and Creative Error 404 Pages | Inspiration （別窓）
49 Nice And Creative Error 404 Pages | Inspiration （別窓）
A Collection Of 404 Error Pages | Back to Essentials （別窓）
様々な404エラーページが紹介されています。
ユニークなものだけではなく、他のコンテンツに誘導するものなど、それぞれ工夫が凝らされています。
他の404エラーページを見たい方は、以下の記事もあわせてどうぞ。
60 Really Cool and Creative Error 404 Pages | Inspiration （別窓）
49 Nice And Creative Error 404 Pages | Inspiration （別窓）
A Collection Of 404 Error Pages | Back to Essentials （別窓）