2009-01

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

そこで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