JOURNAL | ROSTRATA.net

CSS3を効果的に活用したKALEIDOSCOPE

ファイル比較アプリケーション「KAREIDOSCOPE」のWEBサイトを飾るCSS3による表現

ファイル比較アプリケーション「KALEIDOSCOPE」のWEBサイトを紹介したいと思います。
http://www.kaleidoscopeapp.com/

サイト構造としては、

階層構造を持たないシングルページ
リンクは全てモーダルウィンドウで展開
長いスクロールを飽きさせないダイナミックに切り替わるデザイン

と、パッと見でも2009年〜2010年のWEBデザインの流行の先端を行くものとなっています。

特に「長いスクロールを飽きさせないダイナミックな切り替え」という部分では、アプリケーションの機能説明ごとに雰囲気を切り替えていて、その1つ1つがカッコいいサイトデザインとして成立しそうな程造りこまれており、ため息が出てしまう程クール。Oh yes。

ただ、今回の本題はサイトの右上にあるアプリケーションアイコンに隠されたギミックです。

Webkitブラウザ（Safari、Chrome）で見てみると、アイコンの虹色がゆっくりと回転しているのが分かります。非常に面白い事例なので、実装方法を検証してみます。

CSS3によるマスキング

回転を前提とするため背景は円形なので、これをアイコン形状にマスクする必要があります。

虹色サークル

アイコンシルエット

虹色サークルをHTMLに画像として記述、ブロック要素で囲いそこに

-webkit-mask-box-image:url(/static/img/ks_mask.png) 460 stretch;
を指定。すると以下ような表示に。

透過PNGによる印影付け

その上に陰影情報だけを持つ透過画像を被せることで、立体的で美しいアイコンが出来上がります。Webkit以外のブラウザではそのまま静止画像が表示されるようになっています。

背景の回転

サークルの回転は外部JSからブラウザ判定しつつCSS3の

-webkit-transform: rotate();

にて実装。ここまでやりながら、あえてじっくりと見つめないと気付かないほどゆっくりとしたスピードで回転させている所にセンスを感じます。

その他、このサイトでは最上部の濃紺テキスタイルのグラデーションも -webkit-gradient で実装し、JSにてWebkitとFirefox3.6以外ではフラットにするという処理をしています。全体的なコーディングスタイルもシンプルでストレートであり、デザイン共々検証したいサイトです。

ギミックの使いどころ

CSS3ではマスクしたり回したりイージングしたりいろいろなことが出来るものの、それらは基本的にシンプルなプログラムによる幾何学的な動きになってしまいます。
単発として面白いサンプルを考えるのは簡単ですが、実務に活かすとなるとなかなか使いどころがない。そういう意味でこのような事例はとても印象的だと思います。

まだブラウザが限定的なのでどうしても「なくても困らない」ものに留められるし、そうなると実際の制作現場では「なくても困らないものに余計な時間コストをかけられない」ということになりがちです。
しかし例えばこのアプリケーションサイトのように「ターゲットもたぶんプロフェッショナル」な場合、その細かい部分を作り込む熱心さ、遊び心は伝わるだろうし、下手な広告戦略よりも効果的な遊びなのではないかと思います。

Posted on 2010/06/02DESIGN, 細かすぎて伝わらないCSS

2 Comments

まめこ | Posted on 2010/06/11
はじめまして、KALEIDOSCOPEについて検索していて見つけました。興味深い内容の記事でした! まじまじと拝見させていただいて、とても勉強になったので友人とやっている「まめことネコゼのどたばた会議」というweb系ラジオ&ニュースサイトにて紹介させていただいてもよろしいでしょうか？

内容を引用で表示させていただく事が多くなると思いますので、事前にご連絡させていただきました。

6月14日に記事を公開できればと思います。公開の際に改めてURL等お知らせいたしますが、内容を見ていただいてご指摘などあれば修正いたしますので、どうぞよろしくお願いいたします!
Takeshi | Posted on 2010/06/11
もちろんいいですよ！記事URLはぜひこちらでご紹介ください。