サイト構造としては、

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

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

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

彼らの主張する理想的なチームの在り方。そのの対象として描かれている「現実」「大企業」「ワーカホリック」「従来のやり方」といった組織や働き手の姿は、どの国においても共通性のあるものだと思いますが、こと日本においては強く当てはまるのではないかと思います。

小さいことは通過点ではない。小さいことは、目的地でもある

小さな企業はもっと大きければと願っているのに、大企業は身軽で柔軟であることを夢見ている。

ワーカホリックはばかげている

仕事依存症患者は徹夜して、オフィスで寝る。プロジェクトで自分を死地に追い込むのは名誉だと思っている。しかし彼らはヒーローではない。彼らは危機を救うのではなく、時間を消費するだけだ。本当のヒーローは、仕事をさっさと片付ける方法を見つけ出し、とっくに帰宅している。

会議は有害

会議が一般的にテレビ番組のようにスケージュールされるのは不幸なことである。会議を30分か1時間の枠でスケジュールに入れるのは、スケジュールソフトがそのように動くから。

あなたの見積もりは最悪だ

避けることができない遅れなどなく、すべてが一番良いシナリオ通りに進むと思っている。現実は…

おっと、この調子で引用を続けたら本のほとんどになってしまうし、あまり意味はなさそうです。

興味のある人はぜひ読んでみてください。業種がWEBビジネスかどうかに関わらず面白いはずです！

翻訳版の読書ガイド

なぜこのタイミングでブログに書いたかというと、原著と翻訳版を読んだ北米に住んでいる（？）方が、知っていないと引用が伝わりづらい固有名詞の説明、少し分かりにくい訳のフォローなどを詳しく解説した読書ガイドを公開されているのを見つけたからです。

「小さなチーム、大きな仕事」読書ガイド REWORK Japanese Edition, a Reading Guide

確かに事例として紹介される企業名がおなじみのスーパーなのか、聞いたこともないのかで文章に含まれるメッセージの伝わり方も変わってきますし、訳に対する添削と改訳が詳しく書かれているので英語の勉強にもなります。

原書は装丁やイラストなどもかなりカッコいい感じになっているなのでこちらを読んでみるのもよさそうです。

この大会は今から1年半程前の2008年暮れ、私がトライアスロンに挑戦しようと決めたときに目標に設定した大会であり、それ以来ずっとこの石垣島を意識してトレーニングしてきたとも言える思い入れ深いものでした。

（といっても、私は根っからの理系男子かつお尻に根が張るようなオフィスワーカー。例えばバリバリのトライアスリートの方の身体をアメリカバイソンとすると自分は生まれたての子ヤギといっても過言ではないという前提で読んで頂ければ幸いです）

スタートライン

ほんの2年前までトライアスロンなんて自分とは一生無縁の世界だと思っていたのに、好奇心や思いつきとは面白いもので2010年4月25日、僕は石垣島の綺麗な海を目前に、1000人を超える参加者の方々と共にトライアスロン大会のスタートラインに立っていた。

近くにトライアスロンをしている人やスクールやサークル、専門ショップもなかったため、これまで全て自分なりにただ泳ぐ、走る、漕ぐといった練習っぽい事を数カ月やってきた。

「ついに！」という高揚感、「忘れ物ないかな、海でうまく泳げるのだろうか、体は大丈夫だろうか」という不安感が交錯して、異様なほど緊張してしまう。ウェーブスタートで自分は最後の方のグループだったため、その異様な緊張感が10分以上続く。

（写真中央：緊張のあまり遠い目をしている様子）

そしてそのままスタートの号砲、もうどうにでもなれ！という思いで海に飛び込んで行った…

スイム [ 1.5km ]

下半身はバランスを取る程度にし、できるだけ上半身だけで泳ぐ。
なるべく人のいない場所を探りながら、方向を間違えないように確認しながら、呼吸を整えて淡々。泳ぐのは割と楽に感じながらも、やはり人を避けながら進むのが難しい。時にスピードを緩めたり、回り込んで避けたりするのが想像以上に疲れる。

泳ぎながら綺麗な魚の群れが見えるほど綺麗な海。数メートル下の海底を見ることが出来るため、どのくらいのスピードで泳いでいるのかを実感することができる。「あの青い魚はなんだろう」などと考えながら淡々と泳ぐ。

750mの折り返しコースを2周、スイムのラップは26分。

ウェットスーツをぬぎぬぎ、バイクギアを身につけてバイクコースへ。
トランジションは去年の大会で経験していたこともあり、落ち着いてこなすことができた。

バイク [ 40km ]

石垣島を半周する40kmのコース。

30km/hを割らないように、平均35km/hで漕ぎ続ける。
コース中盤はアップダウンが激しく急な下りがあったかと思えば急な上りといった繰り返しで、距離以上のものを感じた。

（雨の大会前日、レンタカーで下見ドライブをした際の写真）

気持ちよく晴れた当日の写真がないのが残念だが、ただ青い海と緑緑とした緑の広大な風景の中、平坦な道と追い風が重なった時の気持ちよさは格別で、気持ちを切らすこと無くグングンと漕いで行った。

バイクのタイムは1時間28分。
40kmとはやはり長い距離で、マリンブルーの海岸沿い、緑緑とした森林の合間、田畑が続く広大な景色、島の人々が沿道に並ぶ市街地と、思い返すと1時間半のツーリングがロードムービーのように頭に蘇ってくる。

ラン [ 10km ]

鉄かと思った。
バイクを降りてシューズを履き替え、走り始めた瞬間。
両足が鉄になってしまったかと思った。

100mほど走ると太股の表側の内側広筋が引き攣ってしまい、激痛。

ここではじめて、自分が競技全体を完走するためのマネジメントに失敗したことに気づく。
バイクの気持ちよさに調子に乗りすぎたため「10km走るための脚を残すこと」を全く考えていなかったのである。

沿道に立ち止まり、しばしマッサージしてみるも筋肉が完全に固まってしまったよう。
生物学的にはリタイアした方がいいのかな…などと思いつつ、歩いてでもゴールしようと思いゆっくり歩き始める。

やがて痛みをこらえれば歩くほどのペースで走れるようになり、そこの筋肉をかばうような走り方で3kmほど走るとその痛みは消えていった。

そしてそのまま長い長い、長い長い10kmを走り終え、ついにゴールすることができた。
とぼとぼと走り続けたランのタイムは55分。

完走

総合記録は2時間50分55秒、総合順位はシチズンクラス112位 / 完走562人。

ゴールした後は達成感、充実感、ここまでのいろいろな心配ごとや不安がすべて消え去った最高の気分。
頭はボーッとして身体はフラフラでも、とにかく「やった！やった！！」という言葉しか出てこなかった。

トライアスロンは過酷な体育会系スポーツというイメージが強く実際その要素も大いにあるのだが、やってみるととても頭を使う競技だということが分かる。

大会は1つのプロジェクトのようなもので、長時間にわたるレースでの身体的管理はもちろんのこと、トランジションをスムーズにこなすための用具の準備、管理、セッティング。大会当日までの体調管理、バイクのメンテナンス、現地までの輸送の手配、宿泊の手配…。たった1日の1つの大会にでるだけでもとても多くの計画や準備が必要になる。

レース完走は競技そのものの満足感の他に、それらの一連のプロジェクト管理が全てが成功裏に終わったということも意味していて、それが達成感を更に強くするのだと思う。またプロアスリートとして誰かの支援を受けている訳ではない以上、そのどれか1つが失敗してしまったとしても、すべて自分の責任でしかないというのも重要だ。

（無駄に爽やかなゴール後）

（おもむろにローカル局のインタビューを受ける友人T）

今後について

私がトライアスロンを始めるとき「40才にはロングディスタンスを楽しんで完走できる感じのおっさんになりたい」という理想がありました。そして逆算して「35才にはオリンピックディスタンスを余裕をもって完走できる」→「30才にはトライアスロンを始める」という割とのんびりしたプランを立てました。

この5月に30才を迎えるにあたり、その前に完走できたことにひとまず大満足しています。

初のオリンピックディスタンスは完走こそしたものの、ペース配分もハチャメチャで競技後の身体のダメージも大きすぎたため、今後はまだタイムを気にせず「余裕をもって完走できるマネジメント」ができるようになることを目標に経験を積んでいきたいと思います。

最後に

自分のことばかり書きましたが、石垣島を走りきって「応援される」ことの力も改めて感じました。

沿道からランナーとハイタッチをしようと差し出してくれる小学生の手が、どれだけ力をくれるか。
自宅前に腰掛けて、ゆっくりと手を叩いているおばあさんの笑顔が、どれだけ気持ちを奮い立たせてくれるか。

辛い顔をして走り抜けてしまうことしかできなかったけど、頭が真っ白になっていた中で、そういう情景が強く心に残っています。

ぜひ今後も出場し続けられればと思いました。

以上、ご精読ありがとうございました。

チェコの公用語はスラブ語を源流とするチェコ語で、外国人にとっては発音どころか、字面を見ても何を意味しているのかすら難解。各所に多言語のリーフレットが充実しているのは国際的観光地ならではですが、言語に頼らない案内図、インフォグラフィックが各所に見られました。

地下鉄で移動してみる

現在「MALOSTRANSKA」という駅にいて、「Flora」という駅に行きたいとします。
ホームを挟んで両岸に上り下りの線路があるアイランド型のプラットホームです。

線路のある壁は個性的なデザインで楽しいですが、そのラインがどちらに進むかどうかは特に明記されていません。日本ではよく左右の矢印と共に前後の駅名が書かれていますが、それは無いようです。

ホームの上には線路と垂直に次のような案内版があります。

「MALOSTRANSKA」と書いてある緑の丸で示された所が現在地のようです。

線路の壁には線路と並行方向での案内が存在していませんでしたが、ここでは線路と垂直方向にこのラインの地下鉄マップをまとめて表示してあり、左の列車に乗れば右側に並ぶ駅に向かう、左の列車に乗れば右側に並ぶ駅に向かう、ということが直感的に理解できます。

「Flora」駅に行きたい場合、駅名は現在地より左側に書いてあるので「左側の電車に乗る」、そして6つめに書いてあるので「6つ目の駅で降りる」ということが分かります。

どちらのホームから乗ればよいのか、いくつ目の駅で降りればよいのか、がこの案内図1つだけで一瞬で分かります。2つめの「Mustek」が黄色のBラインと、3つめの「Muzeum」がCラインと連結しているということは言うまでもありません。

駅名以外に「Kolej」「Smer」という単語がありますが、意味が分かる人には少し親切に、分からなくても全く問題ないもの。「読ませる」文字情報が最小限に絞られています。

前提となる知識は最小限

日本ではよく最終駅名を利用して「◯◯方面行き」という表現が使われますが、もしその方法で案内されていたら「Flora」に行きたいだけなのに終着駅「DEPO HOSTIVAR」という駅名を覚えなければいけない。現在地「MALOSTRANSKA」の前後にどんな駅があるのかもチェックしておかなければいけない。

住人ならまだしも、短期的に訪れる外国人旅行者にとっては難しい駅名を覚えるのは出来るだけ少なくしたいもの。この地下鉄案内図は地味ながらも情報が完璧に整理され、デザインされているようで感激しました。

実際に、何の下調べもせずガイドブックも持たずチェコ語も分からず、初めてプラハに着いて初めて利用した時から何の迷いもなく目的の駅に行くことができました。これはすごいことだと思います。

読ませるのではなく、感じさせる

日本の大都市がよい例ですが「いろんな国の人が利用出来るようにしよう」となった場合、しばしば文字情報で解決しようとしがちです。
「出口」の下に連なるExit、Salida、退出、출구…の各国語。一見親切に見えますが、それ自体が情報を煩雑に見せてしまったり、いずれの言語も分からない人はどうするのかという問題が残ります。

プラハはヨーロッパに位置する国際的な観光都市であり、しかも旅行者のほとんどは独自言語であるチェコ語は話せない。そういう状況で、文字情報はチェコ語と英語との併記という安易な策ではなく、最小限のチェコ語表記に留め、インフォブラフィックでの表現が大きな役割を担っているように感じました。

まとめ：WEBサイトは異国の街

強引にWEBに関連付けてまとめます。

「インターネットに慣れない人が、WEBサイトにアクセスする。」
この状況は、旅なれぬ人が外国の見知らぬ街に訪れるという状況に似ていると思っています。

沢山の情報があちこちで手招きすればするほど訪問者の視界は狭くなり、ピントは一点に集中し、迷い、本当に見たいものが何か分からなくなっていく。

ヴィジュアルデザイン以前の、情報デザイン。情報デザイン以前の、言葉のデザイン。
こういうものが非常に大切だなあと思ったのでした。

おまけ：分からないこともある

チェスキー・クルムロフ城の入口にある注意事項、左下の絵について。

解釈1：ライター禁止
解釈2：チョビひげは短めに

街中に、唐突にあった公式な感じの表札。

解釈1：車がくるから遊ぶな
解釈2：車も子ども家も、みんな平和なプラハです

それは、

最新トレンドのグラデーションをチェックする事でもなく、
セクシーなjQueryエフェクトを習得する事でもなく、
HTML5やCSS3の斬新な表現で同業者を驚かせる事でもなく、
CMSのありあまる余計な機能を使いこなす事でもない。

誰もいない静かな湖畔で

快適なチェアに腰掛けて

たった100ページの本『シンプリシティの法則』を読むこと

（もちろん、iPhoneは自宅に置いておこう）

◆

このエントリーはプロローグ。また詳しく読み解いていきたい。
Amazon：シンプリシティの法則：John Maeda (原著), 鬼澤 忍 (翻訳)