クールなプロフィールページを作れるJavascript

「ページをマトリックス風に表示するJavascript」で人気だったbodytag.orgからもうひとつ便利なJavascriptをご紹介。 ちょっと変わったプロフィールページを作りたいときに便利っぽい。自分の実績を示すインタラクティブな年表を作ってくれるのだ。 ヘッダー部分の年数をクリックすると、ページがスルスル切り替わって気持ちいい。(実際の動作はこちら) 実装するにはトップページからダウンロードしたnav.htmlの以下の部分を修正するだけ。(それぞれのhtmlファイルは自分で用意) var events = [ [‘intro’,’intro.html’, 0, 0, 2000], //[‘タイトル’,’ファイル名’,’日’,’月’,’年’] [‘sausage’,’sausage.html’, 15, 3, 2000], [‘abstraction-now’,’absnow.html’, 31, 9, 2003] ]; プロフィールページはサイトの信頼度を高めるのに大事ですね。 他のおもしろいプロフィールページもあったらまたご紹介しますね。

絵葉書風コメントフォーム

こんな絵葉書風なコメントフォームを見つけました。(絵葉書風に見えるのはあくまでも主観ですが・・・) 普通のフォームとは違いとてもシンプルだし、手紙を出すような感覚でコメントできる。(たぶん) 実現するにはフォームに以下のスタイルシートを適用するだけ。 <style type="text/css"> #hoge { font-size: 10px; background: white; width: 165px; margin:2px 0; padding: 0; border: 0; border-bottom:1px solid #dddddd; } </style> <input type="text" name="hoge" id="hoge" value=""/> 詳しくはdeliciousdays.comを参照のこと。 今ではすっかり懐かしくなった絵葉書。 こうした懐かしいインターフェースをあえて使ってみるのもいいかもですね。

ページをマトリックス風に表示するJavascript

これは新しい。 なんとあらゆるページをマトリックス風に表示してくれるのだ。(実際の動作はこちら) 実装するには以下の1行をコードに加えるだけ。 <script src=”http://bodytag.org/bt_melter/bt_melter.js” type=”text/javascript”></script> するとbodyタグの中身全部に適用される。 なお、javascript自体はbodytag.orgからダウンロードできる。 日本語にも対応しているようなので、サイトにアクセントを加えるちょっとした小細工として使えそうですね。

トップページをアクティブに演出

サイトのトップページが見るたびに違っていると、また来たくなるものである。 traineoはみんなでダイエットに励もう!というサイトであるが、トップページがにぎやかなのが特徴である。 時々刻々と変化していく数字は参加者が消費したカロリーを表している。 また、ダイエットに関するちょっとしたトリビアも次々と表示されていくのでついつい見入ってしまう。 訪れる人にいつも違うインパクトを与えられるようなトップページ。 そのためのちょっとした仕掛けに頭をひねってみるのもおもしろいですね。

ブロックコメントという考え方

Jack Slocum’s Blogでは、ブロックコメントという新しいコメント方法を実装している。 下のほうを見てもコメント欄は見当たらないが、左の黄色いクリップをクリックするとコメント欄が出てくる仕掛けである。 つまり、パラグラフごとにコメントできてしまうというわけ。 Yahoo! UI LibraryのDrag and Drop Utility Grid Componentを用いており、動きもサクサクで気分がいい。 自分で実装してみたい人はこのブログからダウンロードしたり、ドキュメントを参照することもできる。 ひとつのブログに何個もコメントしちゃいたくなりますね。

お得感を演出する

サイト上で懸賞キャンペーンをやることはよくある(かのYouTubeも最初のビデオを集めるためのiPodを配ったのだ)。 そんなときはPollDaddyのように「切り取り線のメタファー」を使うのも一つの手であろう。 「切り取り線」は「クーポン」を連想させ、「クーポン」は「お得感」を連想させる。 お得感を演出するには切り取り線。ちょっと覚えておいてもいいかもですね。

踊るウィンドウ

ウィンドウサイズは常に一定。 その常識をひっくり返してくれるのが、このmotion-wave.comの作品です。 見ているだけで楽しいので是非実際に見てみてください。ポップアップウィンドウなのでブロックをしている人は外してからどうぞ。 音楽に合わせて、 こんな感じに次々と、 サイズが変化していきます。 いわゆるデザイナーさんのサイトなのですが、自己紹介(結構笑える)を軽快な音楽にのせて魅せてくれます。しかも、音楽にあわせてウィンドウサイズがどんどん変化していきます。気持ちいいですね。 いつもはいやな感じのするポップアップウィンドウですが、これは一気に魅せてくれますね。音楽と合わせて強烈なインパクトを狙いたいときに使える技かと。映画の公式サイトやコンサートやイベントページにもいいかもしれません。 ウィンドウサイズもデザインの一部、という考え方はアリですね。 » Motion-wave.comのポップアップ

newsingのカレンダーエフェクト

ソーシャルニュースサイトのnewsing。カレンダーから日付を選んだときのエフェクトがなかなかユニークです。 以下のアニメーションがわかりやすいかな。 画面にオーバーレイしてさまざまなエフェクトをかけるのが流行していますね。 カレンダーに限らずこういうエフェクトはまだまだ開発できそうですね(あまり多用してもちょっとアレですけどね)。

タイムゾーンを入力させない方法

最近のウェブサービスのトレンドは「シンプル」。そのためにはユーザーの入力項目は極力少なくしたいものです。 そういう意味でちょっと参考になるのが「Oh, Don’t Forget…」です。 » Oh, Don’t Forget。指定した日時にリマインダーを送ってくれます。 このサイト、シンプルなリマインダーサービスなのですが、タイムゾーンを入力しなくても世界中どこからでも指定した時間に届きます。 その秘密はJavascriptのgetTimezoneOffsetメソッド。 次のようなスクリプトでローカルPCの設定時間を取得し、標準時からの時差を計算しています。 <script type="text/javascript"> Now = new Date(); tzOff = Now.getTimezoneOffset (); tzOff = tzOff/60; </script> あとは実際にリマインダーを送るときにこの時差を調整すればいいだけですね。 ウェブサービスであれば世界中どこからでも使いたいもの。こうしたテクニックは覚えておきたいですね。

あなたのブログの目的は何?

自分のブログを読んでもらったあとに何をしてもらいたいか?その答えはフッターリンクに用意しておくべきです。 もっと記事を読んで欲しかったら「最近の記事投稿一覧」や「関連する記事一覧」を置くとよいでしょう。 ではブログで仕事がもらいたい場合はどうでしょう? 最近は次のようなリンクをよく見るようになりました。 ↑ 最近良く見るのはプロフィールをフッターリンクに置く手法 こうした手法はデザイナーやコンサルタントの人に多く使われているようです。記事を読んだ人が「これはいったい誰が書いているのだ?仕事頼めるかな?」と思う心理を先読みしているわけですね。 フッターリンクまでたどり着いた人は何かのアクションを起こす可能性が高いでしょう。あなただったら何を置きますか?