特殊効果 Archive

ニュースサイトを見ていると、後でまとめて読みたくなることがあります。

そんなユーザーのニーズに応えているのがInternational Herald Tribune。

このサイト、ところどころに別記事へのリンクが張ってあるのですが、どれもアイコンが付いています。そのアイコンをクリックすると、アイコンが消えて、右上にあるCLIPPINGSにどんどん貯まっていきます。

記事を読み終えたらCLIPPINGSに貯まった記事に飛ぶという感じです。ページが変わってもちゃんとCLIPPINGSの中身は保持。

セッションを使っているようでブラウザを閉じちゃうとCLIPPINGSは消えちゃいますが。

動画を撮ってわかりやすく。↓

わざわざ別のサービスのページを開いたり、いちいちユーザー登録しなくてもいいところがミソ。

サイト内完結の”便利なサイト”を目指すのも面白いかもですね。

» The International Tribune

以前、紹介したオンラインストレージDropBoksが今度は右クリックに対応しました。

ファイル名にカーソルを置いて右クリックするとちゃんとメニューが出てくれます。
これでダウンロードや名前の変更がスムーズに行えますね。

» DropBoks

たしかロリポップのウェブＦＴＰにも似たようなメニューが・・・
っと、こちらは左クリックでした。

» ロリポップ

オンラインストレージのようなサービスだと、デスクトップ環境に近づけることが操作性UPの近道かもしれませんね。
他にも右クリックをうまく使っているサービスがありましたら教えてください。

■ 関連記事

• ドラッグ＆ドロップでデスクトップ環境に近づける

完璧なホテルというのは印象に残らないそうだ。

逆に、ちょっとしたミスがあって、それを丁寧に埋め合わせるほうが印象に残るらしい。

結果として「完璧なホテルよりミスがあったホテルの方が感じがよかった」ということになるから人間の心理は不思議だ。

そう考えると「ちょっと間違えて印象づける」というメソッドがあるような、ないような気がする。

IP AddressからGoogle Mapを算出してくれるIP-Adressもそうだ。このサイトではロゴにわざわざ赤で修正をいれることによってドメイン名を印象付けている。

↑ IP-Addressではなくて、「d」はないよー、ということを印象づけていますね。

なーるほど。ドメインが取れなかったからかもしれないが、こういう挽回の仕方は賢いですね。

» IP-Adress

DropBoksは見た目に使いやすいオンラインストレージです。

ちょっとユニークなのはドラッグ＆ドロップでファイルの削除ができる点。普通にデスクトップでいらないファイルをゴミ箱にドラッグ＆ドロップする感覚です。

動画も撮ってみましたのでご覧ください。

ウェブ上でさまざまなことができるようになりましたが、デスクトップ環境で慣れ親しんだインターフェースを模してみると使いやすさが向上するかもですね。

このdropboks、登録しなくても使うことができるので一度お試しあれ。他にも小粋な仕組みがちりばめられた素敵なツールですよ。

■ 関連記事

• シンプル＆スタイリッシュ (DropBoks.com)

Jim Wimpeyさんのサイトで「CSSだけで文字にドロップシャドウをつける方法」が紹介されていました。これ、便利そう。

» Good-Looking, Sharp Offset, CSS Text Styling

実例はこちら。

↑ 適用前。

↑ 適用後。かっくいい。

やり方はいわれてみれば簡単で、1pxずらして影をつけただけ（というか影を先に書くのか）。

実際のコードは以下のような感じですね。スタイルシートには次のように記述します。

h1 {
color: #000;
position: relative;
}
h1 span {
color: #fff;
display: block;
position: absolute;
top: -1px;
left: -1px;
}

実際のHTMLの方はこんな感じ。

<h1><span>Lorem Ipsum</span>Lorem Ipsum</h1>

ちょっと画像を作るのが面倒、というときによいかもしれませんね。

追記（2006-11-27）:

たくさんの方からコメントいただきありがとうございました。アクセシビリティ、SEO等の観点からこの手法にはいろいろ問題があることがわかりました・・・軽率な掲載でしたが勉強になりました・・・。ご利用される方はコメント欄をご覧の上、欠点がわかった上でご利用ください。

prototype.jsが必要ですが、さまざまな特殊効果を実現するanimator.jsが便利っぽい。

0%～100%までカウントアップしてくれたり、ぐぐっとエレメントを移動させたり、もっと複雑な効果を実現したり・・・。

↑ デモと一緒にコードも見られるのでわかりやすいす。

なかなか楽しげです。派手なサイトを作りたい方にはおすすめかと。下記サイトでスクリプトのダウンロードできたり、デモが見れたりします。

» Bernie’s Better Animation Class

Javascriptでさまざまな効果を実現できるscript.aculo.usがバージョンアップ。今回の目玉は「モーフィング」。指定したエレメントをぐーっと変形させていくことができます。

といっても、見るまでわからないと思うので下記ページのデモをどうぞ。

» モーフィングデモページ （すげぇ・・・）

script.aculo.usには他にもいろいろな効果がありますね。なにかサービスをつくるときには参考にされてみてはいかがでしょうかね。

しかしscript.aculo.usには二つの問題がありますね・・。

• サイトが激重い・・・。
• なんて発音するのかいまだにわからない。

» script.aculo.us公式ページ