Archive for the ‘ 特殊効果 ’ Category
ニュースサイトを見ていると、後でまとめて読みたくなることがあります。
そんなユーザーのニーズに応えているのがInternational Herald Tribune。
このサイト、ところどころに別記事へのリンクが張ってあるのですが、どれもアイコンが付いています。そのアイコンをクリックすると、アイコンが消えて、右上にあるCLIPPINGSにどんどん貯まっていきます。
記事を読み終えたらCLIPPINGSに貯まった記事に飛ぶという感じです。ページが変わってもちゃんとCLIPPINGSの中身は保持。
セッションを使っているようでブラウザを閉じちゃうとCLIPPINGSは消えちゃいますが。
動画を撮ってわかりやすく。↓
わざわざ別のサービスのページを開いたり、いちいちユーザー登録しなくてもいいところがミソ。
サイト内完結の”便利なサイト”を目指すのも面白いかもですね。
完璧なホテルというのは印象に残らないそうだ。
逆に、ちょっとしたミスがあって、それを丁寧に埋め合わせるほうが印象に残るらしい。
結果として「完璧なホテルよりミスがあったホテルの方が感じがよかった」ということになるから人間の心理は不思議だ。
そう考えると「ちょっと間違えて印象づける」というメソッドがあるような、ないような気がする。
IP AddressからGoogle Mapを算出してくれるIP-Adressもそうだ。このサイトではロゴにわざわざ赤で修正をいれることによってドメイン名を印象付けている。
↑ IP-Addressではなくて、「d」はないよー、ということを印象づけていますね。
なーるほど。ドメインが取れなかったからかもしれないが、こういう挽回の仕方は賢いですね。
DropBoksは見た目に使いやすいオンラインストレージです。
ちょっとユニークなのはドラッグ＆ドロップでファイルの削除ができる点。普通にデスクトップでいらないファイルをゴミ箱にドラッグ＆ドロップする感覚です。
動画も撮ってみましたのでご覧ください。
ウェブ上でさまざまなことができるようになりましたが、デスクトップ環境で慣れ親しんだインターフェースを模してみると使いやすさが向上するかもですね。
このdropboks、登録しなくても使うことができるので一度お試しあれ。他にも小粋な仕組みがちりばめられた素敵なツールですよ。
■ 関連記事
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%までカウントアップしてくれたり、ぐぐっとエレメントを移動させたり、もっと複雑な効果を実現したり・・・。
↑ デモと一緒にコードも見られるのでわかりやすいす。
なかなか楽しげです。派手なサイトを作りたい方にはおすすめかと。下記サイトでスクリプトのダウンロードできたり、デモが見れたりします。
Javascriptでさまざまな効果を実現できるscript.aculo.usがバージョンアップ。今回の目玉は「モーフィング」。指定したエレメントをぐーっと変形させていくことができます。
といっても、見るまでわからないと思うので下記ページのデモをどうぞ。
script.aculo.usには他にもいろいろな効果がありますね。なにかサービスをつくるときには参考にされてみてはいかがでしょうかね。
しかしscript.aculo.usには二つの問題がありますね・・。
このブログはクラウド時代のレンタルサーバー、EX-SCALEによってホストされています。
