SIMPLE*SIMPLE ～ Web職人のための小粋なネタ帳

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

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

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

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

» snitch.name :: The Social White Pages

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

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

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

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

» Data Visialization

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

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

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

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

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

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

↑ GIFアニメでどうぞ。

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

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

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

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

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

↑ GIFアニメにしてみた。

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

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

» PhotoPeach: Social Slideshow Sharing

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

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

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

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

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

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

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

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

↑ 浮き輪ｗ。

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

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

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

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

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

» WordPress › CommentLuv « WordPress Plugins

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

↑ 微妙にめくれないｗ。

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

» Quantcast

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

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

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

» Remindr