「例えばこんなの」を提示してくれるインターフェース


さまざまなSNSの人名検索をだだだっと出してくれるsnitch.nameですが、検索ボックスについたボタンが素敵です。

ex

↑ この「or see an example」ってやつ。

どんなサービスが知りたいけど最初から説明を読むのは面倒ってときはよくありますよね。そうしたときにこのようなわかりやすい位置に「例えばこんなのが出ます」って表示されていれば素敵かな、と。

実際に動作している様子は以下からどうぞ。

» snitch.name :: The Social White Pages

クリックすると固定リンクをコピーしてくれるインターフェース


よくブログやサイトで見る「固定リンク」。コピーしてどこかに貼り付けるためにクリックすることも多いですよね(じゃない?)。

そこでgridplaneでは、クリックするだけでその固定リンクがコピーされるというインターフェースを実装したようです。

copied

↑ GIFアニメでわかりやすくつくってみた。

なかなか使いやすそうと思うのは僕だけですかね。「固定リンクをコピー」というリンクがあってもいいかも?!わかりずらいかなぁ。

» Data Visialization

さりげないレイアウト調整パネル


昨日と同じサイトから。右下にある「レイアウト調整パネル」がさりげなくていい感じです。最初は付箋のはしっこだけが見えていて、クリックするとメニューが現れます。

moji

↑ 最近GIFアニメばっかだなw。

文字の大きさとか一行の最大文字数が決められますよ。アクセシビリティ的に良いですね。このスクリプト、どこかで配布されているのかな・・・。

実際に動作している様子は以下からどうぞ。画面右下です。

» FirefoxまとめサイトのPukiwikiスキン “White flow” – Liner Note

コメント、ブックマーク、トラックバックを並列に見せる


このサイトのコメント類の見せ方、素敵ですね。ずらずらと並んでいるよりわかりやすいです。

comments

↑ GIFアニメでどうぞ。

これらは縦に並べるよりもこうして並列に横に並べたほうがいいかもですね。実際に動作している様子はこちらからどうぞ。

» FirefoxまとめサイトのPukiwikiスキン “White flow” – Liner Note

「パスワードを忘れたら?」をフォーム内に配置


ちょっと見たことがなかったインターフェースなのでメモ。

ログインフォームのテキストボックス中にアイコンを配置するのはよく見ますが、「パスワードを忘れたときに?」も「?」として中にいれちゃってますね。

マウスオーバーすると「Forgot?」が出てきます。

login

↑ GIFアニメにしてみた。

コンパクトなフォームを作りたいときにはいいかも・・かな。あまり邪魔じゃないですし。

実際に動作している様子は以下からどうぞ。

» PhotoPeach: Social Slideshow Sharing

スクロールすると変化しながらついてくる画像


CSSでこんなこともできるのですねぇ。すごい。

css_trick

↑ アニメーションでどうぞ(クリックすると実際のデモ画面へ)。

応用すると次のような効果も実現できますね。これもおもしろい。

css_trick2

↑ シュレッダーちっくに(クリックで動作する画面へ)。

アイデア次第でいろいろ使えそうですね。

実際のマークアップの仕方は以下に詳しいですよ。

» Mike asks the CSS Guy about a scrolling trick with background images (Ask the CSS Guy)

codebaseのヘルプページのアイコンがかわいい


コード管理システムのcodebaseですが、ヘルプメニューについたアイコンがかわいいです。

codebase

↑ 浮き輪w。

助けを求めている感が直感的でいいですね。

» Codebase – Git repository hosting with source browser, changesets, ticketing & deployment tracking. – aTech Media

コメントしてくれた人の最新ブログ記事タイトルを表示


WordPressの「CommentLuv」なるプラグインを使えばコメントしてくれた人のブログの最新記事タイトルもあわせて表示してくれます。今まで知りませんでしたがこれはいいですね。見ている人もそのタイトルが気に入ればその人のブログに行くことができて、うまいぐあいにトラフィックを流し合えますね。

luv

↑ こんな感じ。普通にURLがあるより全然いいですな。

ちょっと重くなりそうな気がしないでもないですが、なかなかうまい仕組みだと思います。

» WordPress › CommentLuv « WordPress Plugins

検索結果のチラ見せで会員登録を促すインターフェース


ちょっともどかしいですが、quantcastのインタフェースがユニークです。このサイトではサイトの訪問者に関する分析結果を教えてくれるのですが、会員登録をしていないと、大事なところで次のような感じに。

biz.gif

↑ 微妙にめくれないw。

結果がちょっと透けて見えるのがなんとも。会員登録をさせたいときに参考にしたいインターフェース・・・かな?

» Quantcast

おちゃめな入力例をランダムで出すリマインダー


どうしても忘れたくないリマインダーをセットするのに便利なRemindrですが、サンプルであらかじめ入力さているリマインダーの例がしゃれています。何種類かあって、ランダムで出しているようですね。

remin.gif

↑ Remindrについてブログに書く、といったおちゃめなものもw。

普通に「ここにリマインダーを入力してください」とあるよりも人間味があっていいですよね。参考にしたいところです。

» Remindr