サイト構造としては、

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

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

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

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

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

CSS3によるマスキング

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

虹色サークル

(Copyright © 2010 Sofa BV. )

アイコンシルエット

(Copyright © 2010 Sofa BV. )

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

-webkit-mask-box-image:url(/static/img/ks_mask.png) 460 stretch;

を指定。すると以下ような表示に。

(Copyright © 2010 Sofa BV. )

透過PNGによる印影付け

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

(Copyright © 2010 Sofa BV. )

背景の回転

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

-webkit-transform: rotate();

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

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

ギミックの使いどころ

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

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

美学における禅は、無常の仏教信仰、そして諸行無常（この世の現実存在はすべて、惑星も星も神も例外なく、姿も本質も常に流動変化するものである）から派生している。

これは少し前にSWISSMISSで紹介されていた「Japanese design principles」という記事から。

日本独特のわびさび感覚を英語で詳しく説明しているもので、見知らぬ英単語も沢山あったので興味があって日本語に訳してみました。

微妙な表現はそのまま1つの英単語とイコールにならない為か複数の類似した単語で表現していて、そのまま直訳してもあまり意味がない部分が多かったり、英単語のままの方がしっくりくる部分も多く、非常に難しかったのですが、辞書を引き引き、自分なりの解釈をしながらの訳。

ワビサビが何なのか、と問われても日本人ですら説明出来る人は多くないし、その概念すら忘れ去られつつある現代、こうして外からの視点で見たものを改めて読み解くのは非常に面白いものです。

記事のフォローという訳ではありませんが、今回の執筆をする中で平面色について改めて考えるきっかけとなったのでまとめてみます。RGBモニタで閲覧されるものをデザインをする人であれば、1つの知識として認識しておきたい要素ではないかと思います。

平面色とは何か

平面色（面色、film color）の言葉の意味としては

• 奥行きの次元で明瞭な位置を持たない
• テクスチャーや不等質性を欠いており、完全に均質に現れる

といったような定義がなされます。「完全に均質に現れる」というのが特に分かりやすい言葉で、近い遠い、まっすぐ斜め、明るい暗いなど関係なく、ある色が一面で完全に均質に現れるということを意味します。

平面色は架空のもの

現実世界で、私たちの目に入ってくる物は目と対象物の距離によって色は変わる、つまり距離感があります。

例えば、大きなポスターの一面を、高性能な印刷機で隅から隅まで完全に同じ黄色に塗りつぶしたとしても、実物を目の前に置いてみれば目とポスター上のある1点の距離によって、黄色は微妙に変化します。真正面は本来の黄色だとしても、隅の方では少し暗い黄色だったり、明るい黄色だったり。

逆説的になりますが、平面色は自然の摂理として現実的ではない、非現実的であるということが言えます。非現実的というのはあり得ないという意味ではなく、観察者が空間性を把握するための距離情報を持たないために結果として「非現実的な印象を持つ」ということになります。

具体的な事例

写真家の石川直樹氏は、熱気球での太平洋横断に試みた際の記録である著書「最後の冒険家」の中で、高度5000フィートの上空での体験をこのように描写しています。

青空は、見上げるとそこにあるものだと思っていたが、ここでは上を見ても下を見ても青しかない。近景も遠景もなく、広角レンズも望遠レンズも役に立たない、遠近感のない青である。色の中に入ってしまったかのような喪失感、あるいは圧倒的なまでの一体感があった。

これはまさに目の前全てが平面色となった状態ではないかと思います。

少し違うかもしれないけれど、ドラゴンボールの精神と時の部屋（真っ白で、特定の照明があるわけでなくどこまでも均一に明るく続く不思議な部屋）における「精神」とはこの非現実性に耐えられるかどうかではないでしょうか。漫画の中の話ですが、もし精神と時の部屋が実在したら、通常の人はやがて船酔い状態になり、酩酊し、あるいは発狂してしまうのではないかと思います。

RGBモニタと平面色

特殊な環境下でしか実現しないはずの平面色ですが、RGBモニタでは簡単に表現できてしまいます。特別な方法もなにもなく、画面いっぱいに広げたキャンパスを一色で塗りつぶせばよいだけです。
モニタは自然光の影響を無視できる照度で発光しているため、その色はほぼ完全に均質の状態で目に入ってくるのです。

もちろん家庭用パソコンのモニタはそれほど大きくないため、モニタで平面色を再現したからといって人は酔わないし、それが非現実的だとすら感じないでしょう。
しかし結果的に見る人に与える印象としてデジタルな感じ、バーチャルな感じ、を感じさせる要因になっていると思います。

まとめ

結論としてベタ塗りが良くない、グラデーションが良い、という訳ではありません。

現実的な質感を出すためにグラデーション、テクスチャ、シャドウを用いて画面内のものが実存しているような親しみのある雰囲気を出す場合もあれば、わざとそういった処理を排除し、ゲーム的、バーチャル、非日常、アート、といったキーワードの雰囲気を作っていく場合もあります。またあえてそれらを混在させ、（異素材の切り返しでデザインされたおしゃれなバッグのように）面白い雰囲気を作っていくテクニックもあります。

「なんとなくデジタルっぽいから塗りつぶす」「なんとなく立体感が欲しいからグラデーションを付ける」ということではなく、平面色と人間の関係やRGBモニタの特性を理解し、それを意図的に操るかどうかは、モニタ上でのデジタルデザインの最終的な完成度に大きく影響するのではないかと思います。

ゲームは主に3Dソフトで立体表現がシミュレーションされていくのに対し、WEBデザインでは2Dのキャンバスに手動でグラデーションをつけていくことになりますが、そのためには現実の光の当たり方や反射に対する物理的な知識、観察力が不可欠になります。
それは結果として昨今のWEBデザインの1つの評価とされる「リッチな表現」「パースペクティブの変化」「リアリスティックな表現」に繋がっていくと思います。

豆知識

反対にRGBモニタで表現するのが難しいのが「蛍光色」を使った平面です。
街の広告や注意喚起サインに蛍光色が使われるのは、周辺の環境光に影響されにくいからだそうです。光っている（ように感じる）という意味ではパソコンモニタと同じ原理だということに気付きます。

参考

色の基礎知識として書かれた本は多くありますが、コンピュータ上での表現を含めて書かれたものはまだ少ないようです。矢野りんさんの本『デザインする技術』では、平面色についても取り上げられていて、今回参考にさせて頂きました。

その中でも、あのランス・アームストロングの復活はあらゆる自転車ファンを興奮させるものだと思いますが、彼の目的はレースに勝つ事はもちろん、癌撲滅を目指すLIVESTRONG財団のキャンペーン活動でもあるようです。

今年4月にはナイキとランス・アームストロングが世界的アーティスト参加の展示会である「STAGES」プロジェクトを立ち上げ、全ての収益をランス・アームストロング基金（LAF）へ寄附するとしています。

前置きが長くなりましたが、正に今フランスを走っているランスのバイクがマークニューソンによるデザインということで、そのバイクが非常にかっこいい。

Trek Customized by Marc Newson

グロスブラックをベースに明るいイエローというシンプルなカラーリング。
リアホイールの特徴的なドットによる “ Stroboscopic（ストロボデザイン）” は、ホイールの回転によってパルスのように見えるように描かれているようです。

トレック公式サイトの解説によると「このバイクは世界で最も洗練され歴史ある自転車イベントに新しいデザイン水準をもたらし、同時にはガン防止意識を表すLIVESTRONGイエローの旗を揚げる」というメッセージが込められているとのこと。

他にも「STAGES」には

Shepard Fairey, Tom Sachs, Geoff McFetridge, Raymond Pettibon, José Parlá, Ed Ruscha, Kaws, Christopher Wool, Dzine, Eric White, Barry McGee, Kenny Scharf, Os Gêmeos, Marc Newson, Rosson Crow, Taryn Simon, JR, Yoshitomo Nara, Suejin Chung, Lari Pittman, Aaron Young and Jules de Balincourt.

といった面目が参加しています。

競技自体も猛烈に盛り上がっていて楽しみなのですが、参加デザイナー達の作品も楽しみですね。

追記：この写真のイラストは！

デザインイメージそのままのリニューアル

どんな仕事でも普通「リニューアル」といえばデザインを変えてなんぼ、見た目を全替えするリニューアルがほとんどです。なので、このような「前のデザインを維持しながらブラッシュアップ」という作業は意外と新鮮な作業でした。

同じデザインでも色あいやグラデーションを微妙に変えたりして全てのイメージファイルを書き換えていたり、2.0Xのまま放置してあった WordPress を最新バージョン2.7へ飛び級アップデートしたり、テーマも完全な白紙から組み直してより更新を簡単にしたり、管理側の地味な部分では完全にリニューアルしています。

年末にやり始めたものの年明けから一気に忙しくなりそれどころじゃなくなってしまい、また数ヶ月延びそうな気がしたのである程度形になったとこで思い切って公開処理してしまいました。なので少しずつ手を加えてコードを綺麗にしていきたいと思います。

（そもそもこのサイトでPV稼いで広告貼ろうとか営業しようとかいう目的がなく、正直そこまでモチベーションがないというのも事実…。）

あと、

あけましておめでとうございます

もう2月ですが、旧正月で考えれば十分セーフだと思います。

フキョーフキョーとそれが世間の合い言葉みたいになっていますが、グチる暇もない程仕事してやる！という気持ちで、マイペースでやって行きたいと思います。

本年もよろしくお願いします。