サイト構造としては、

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

と、パッと見でも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月ですが、旧正月で考えれば十分セーフだと思います。

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

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

画像化？ sIFR？ どっちも飽き飽き

http://winnielim.com/

シンガポールのWEBデザイナーさんのサイト。
一見するだけでもセンスのある美しいデザインだと感じるサイトですが、なんとロゴを含む全てのテキストがプレーン（ブラウザフォント）テキストのまま。装飾のための最小限の画像と、CSS の工夫だけでこれだけのデザインを実現しています。

作者はサイト制作にあたり、このようなコメントを記載しています。

WEBサイトをシンプルに、うまく構造化し、かつ使いやすく作る為に、ブラウザフォントのみを利用するWEBタイポグラフィの限界やWEBカラーパレットの限界を押し上げつつも、その厳格な決まりをうまく使いたかった。

このデザイナーの考えの先進性や強い意思を感じます。
もちろんWindowsで閲覧したならばガビガビなのだけど、テキストの画像化や sIFR という考え方を突き進めると、結局はこうなるのでは。これこそがWEBサイトの一番あるべき姿ではないかと思います。2008年一番感動したサイト、WEBデザイナーです。

『WEBサイトらしい』レイアウトって、なんだったのか再考

http://www.alt-style.jp/

山梨県にあるインテリアショップのサイト。
業界的なトレンドに流されず、こういった斬新なレイアウトを思いつき、そして商用サイトとして現実化する、というのは想像するより難しいこと。デザイナはもちろん、運営者側を含めてセンスも意識も高くないとできません。
テクスチャの切り替えとか、1pxのラインを巧みに使った複雑なレイアウトとか、なんといいうのか…WEBのことばっかり考えてるような人たちだけでは、こういうデザインは生まれないような気がして、ガツーンときました。

スクラップブックを読みあさるワクワク感

http://blog.worldending.jp/

センスと高い技術をもち、個人名義で継続的にアウトプットをしているWEBデザイナー小野さんのサイト。
昨年末のリニューアルでの方向性は私にとっては意外なものでした。というのも、以前はオリジナリティのあふれるグラフィカルなものだったため、それが更に進むのかと思っていたからです。グラフィックデザインよりは、エディトリアルデザインといえるそれ。またこの段階で解像度ターゲットをWXGAにしてしまう所。紹介するまでもない有名なサイトだと思いますが、ブレイクスルーを感じるサイトとしては外せない1つです。

Flashにしない、ページをめくる体験

上記3サイトが「退化とは違うシンプル化」だとすれば、このサイトは「画面遷移の快適性の追求」の1つの解。
http://mekas.jp/

海外の視点から日本のファッションシーンをレポートするウェブマガジンのサイト。
シンプルなレイアウトとモノトーンの配色、そして個人的に写真のセンスがツボすぎて大好きなサイトなのですが、スパイス的な要素として雑誌を読み進めるような感覚の表現が斬新です。単にHTMLを遷移しているだけなのに、その瞬間のエフェクトを少し工夫するだけで、こんなにも「雑誌を読み進めてる感」が出せるのか、と関心させられました。長々とページを延ばしていくのも読み疲れるし、平凡なページネーションがついているだけでもなんだか味気ない。次のページを読み込んでみたくなる、そんなサイトです。
（ MEKAS というのは、日本語の「おめかし」という意味での「めかす」だそうです。素敵です。）

まとめ

以上、よくあるトレンドWEBデザイン記事とは違う視点で4つのサイトを紹介しました。ここにあるような「ブレイクスルー」が実際「トレンド」になっていくかどうかは分かりませんし、実用レベルで普及するかどうかも分かりません。

しかしただ既存のトレンドを取り入れているサイトではなく、一歩も二歩も先を考え、まだ理解されにくいだろう事柄をあえて実演していっている姿勢というのは
かっこいいと思います。

• 2008年のWebデザイントレンドおさらい｜HiGash.Net
• 【レポート】Shift2 – 2008年の海外Webデザイントレンドおさらい – ProjectDD Blog

などのエントリーで詳しく解説されていてとても参考になります。

私もこういうトレンドは好きで、沢山のCSSギャラリーをRSSで流れ購読するほどの WEBデザインギークではあるけれど、一方で日本国内の仕事として必要とされるデザインとは全く違うベクトルを持っていると思っています。

海外のトレンドは実際の仕事に反映できるのか

多くのクライアントにとって「こういうグラデがトレンドなんですよ」とか「やっぱツヤツヤ感が気分ですよね！」とか全く意味がなくて、そのクライアントのビジネスに見合う、またそのクライアントの顧客が理解可能な範囲で良いと思えるものを深く読む方がずっと重要な事柄です。

昨今の進化では一番分かりやすい「幅広化」も、そのサイトの想定ユーザの環境によっては 760px であるべきかもしれないし、1000px であるべきかもしれない。そんな部分に「トレンドどうこう」はデザイナーのマスターベーションに過ぎないと思います。
企業の担当者や代理店の人など、何を読んだかこういうトレンドでやたら頭でっかちになってしまって「（鼻息荒く）幅は950pxで！」などと言う人が時々いますが、大抵は広すぎる。

海外のトレンドを注意深く観察するのはよいことだと思うけど、ただ単にトレンドこそ正義と思ってしまうのは大きな間違いだと思います。
よっぽどWEBデザインが注目されるような（WEB系イベントサイトなど？）場合以外、日本国内では意図的に1年〜2年くらい前のトレンドを取り入れる方がクライアントの理解度、満足度は高いのかもしれません。

では本題となる2008年のWEBデザインについて自分なりの考察。

グラフィック合戦は燃え尽きる

2008年のデザイントップ10などを見ても、やはり表現の幅がどんどん広がっています。
しかし、CSSデザインが一気に浸透してギャラリーサイトも急増した2006年、2007年から、驚く程劇的な進化はないようにも感じます。私はこの方向性はもう頭打ちなのではと思っています。

というのも、グランジエフェクトとかウッディとか、周りに植物沢山生やすとか、きらびやかな装飾つけるとか、はっきり言ってキリがない。「手の込んだグラフィックを背景にあててコテコテにする」というのは結局はそのグラフィックパワーそのものであって、言ってしまえば Photoshop 勝負であって、それだったらWEBデザイナーはグラフィックデザイナーにかなわないんでないか。
「あの超絶カッコいい絵が描けるグラフィックデザイナーがちょっとHTML覚えれば、中途半端なWEBデザイナーなんて吹けば飛ぶよね」っていう方向性なんだと思います。

WEBデザインは進化し過ぎたかもしれない（海外では）

例えば、私がこの ROSTRATA.net をデザインし公開した2006年8月、当時それほど多くなかったCSSデザインギャラリーのいくつかが取り上げてくれました。当時新しいっぽいデザインにしていた事に加え、CSSレイアウトだったこと、Flash のような表現を JS で実装していたこと（その後やめた）、ブログエンジン WordPress をベースにしながらスタティックサイト風に構築していたこと、それらが珍しかったからだと思う。
ただそれから2年、それらは平均的なWEBデザイナーであれば当然のようにできることになったし、珍しくもなんともない。

そして更にレベルの高いデザイナー達は「独自に利用する」のではなく「共有する」ことに目を向け、PSD を配布したり、デザインを WordPress テーマとして配布するようになりました。
今では印象的な処理をした PSD を無料でダウンロードできてしまう、Wordpress のテーマ適用ボタンを押すだけで美しいWEBデザインのサイトを所有できてしまう。

それがオリジナルのデザインであるのか、配布されたものであるか、実にどうでもよく、調べる価値もないし、クレジットを消したりちょっとした手を加えてしまえばそれがオリジナルにも見えてしまいます。
つまり2008年末現時点において、少なくともリッチグラフィック思考のWEBデザインはグラフィックデザインとしては価値があれど、注目すべきWEBデザインとしてはそれほど価値がないと思います。
（時々、どこかで配布された Awesome! な WordPress テーマをそのまま利用している WEB制作会社を見る事があるけれど、よく見てる人には分かってしまうのが恥ずかしい）

じゃあWEBデザインへの情熱はどこへ向ければいいの

WEBデザインは情報閲覧ツールとしてのインターフェイスデザインとしての進化がコアとなり、退化とは違うシンプル化、スクリプトによる画面遷移の快適性の追求などに向いていくのではないかと思います。（ただ日本では海外ブログのようなグラフィック合戦もまだ始まってない）
冒頭でリンクしたWeb Design Trends For 2009 の中でも、1年2年前に比べて、グラフィック系のトレンドよりもインターフェイス表現に関するものが多くなってきています。

少なくとも、WEBデザインを仕事としている人たちが今目を向けるべきなのは、海外のリッチグラフィックサイトのトレンド追っかけではなく、それが正しいか正しくないかを別とした「ブレイクスルー的な何か」なのではないでしょうか。

次のエントリーで、そんな「ブレイクスルー的な何か」を感じたサイトを紹介したいと思います。
2009年WEBデザイン新潮流（後編）

なぜ日本語サイトは間抜けな印象になるのか

「意味が分からないことで文字自体をデザインとして見ることができる」という感覚的なものもあるけれど、特にWEBにおいて言えることは、「ピクセル表現上での日本語は可読性を保つ為の最小文字サイズが大きい」という点があると思います。

ローマ字はその造形自体がシンプルであること、また単語ごとに必ずスペースが発生するという法則から、10pxの文字でも十分に読めてしまう。
それが日本語となると、漢字が混じることで10ピクセルではとてもじゃないけど読みづらい、また読みづらい以前に文字が潰れてしまう。

文字が小さくできるローマ字は、カラム自体が１つのブロックオブジェクトとして扱いやすくなり、全体のデザインがまとまりやすくなる。
文字を大きくせざるを得ない漢字は、カラムがブロックではなく「文字のちらばり」のような印象になってしまうため結果的にデザインとしては扱い辛く、スカスカのブロックのような印象になる。

この文字自体の特性をうまくまとめる所に、全体のサイト印象に大きく影響するセンスが現われると思います。

『フォントサイズが大きい＝読みやすい』ではない

読みやすさを重視すれば「フォントサイズを大きくすればいい」と単純に考えがちですが、「フォントサイズが大きければ見やすい」とは限らないのがWEBデザインの特徴だと思います。

理由として、スクリーンという固定サイズの画面上では、フォントの大きさと一覧できる文字量が反比例するからだと思います。文字サイズが大きければそれだけ一覧性が犠牲になり、一覧可能な範囲が狭いということはまた別のストレスを生みます。

なのでフォントサイズも大切ではありますが、もっと気を遣うべきなのは実は CSS でのフォントの種類、行間、1行の文字数、背景色と文字色の関係だと思います。

Glam 日本版がそこまで野暮ったくならなかったというのも、その辺りがポイントではと思います。

その他、アンチエイリアスが綺麗な MacOS や Windows Safari などでの閲覧を前提として、日本語の良さが出る明朝体をうまく使っているサイトはとても読みやすく、綺麗です。

話は大きくそれて

この Glam.jp を見ていてひどく残念な部分もありました。
メインコンテンツはいわゆるスイーツな女性たちのブログなのですが、人によって写真サイズがばらばらだったり、改行スタイルも統一されていなかったりと、書式については無法地帯だということ。

またワードか何か、他のエディタからそのままコピーペーストされ、様々なスタイル情報がインラインで入ってしまいサイトの文字スタイルが無視されてしまっている記事まであります。

これはある意味で仕方なかったり、今をときめく改行ばかりの文章もそれが個性と言ってしまうこともできますが、ブランディングを含めたサイトの継続的なクオリティ維持の為にはこの辺りまでしっかりと統一した方がいい気がします。

ブログは WordPress で作られているようなので WISYWIG で自由に書いているのだと思いますが、例え更新者にHTML の知識がないとしても、最低限読みやすい段落の付け方くらいは意識してもらい、改行を1回押す事、2回押す事、Shift押しながら改行すること、それらがどんな意味を持つのかという教育は必要だと思います。

CMSにしたからといって、権限を渡すだけでは不十分というよい例ではないかと思います。あえてスイーツっぽさを醸し出す戦略だとしたら、それはそれでハイレベルです。

http://picnic.rostrata.net/

何かが書きたくて始める訳ではなく、ただデザインしたくて作っただけのブログなので内容はありません。現在のブログの『PIECES OF MY LIFE』カテゴリをそのまま移して更にふざけて書こうと思います。

CSS maniaはギャラリーサイトの中でも歴史が長く有名どころということもあり、掲載によるアクセス数グラフがその日だけ東京タワーみたいになりました。