前回、Mocoro作Alex Pragerのウェブサイトを紹介したウェブサイトブラウジングシリーズの2回目です。Area 17というインタラクティブエージェンシーはご存知の方も多いのではないでしょうか。今回は彼らのウェブサイトで絶妙なアクセントとなっている赤いナナメ線について、すこし詳しく見てみようと思います。



URL : www.area17.com
制作 : Area 17
制作年 : 2009年10月頃



Area17は2003年3月に設立されたニューヨークとパリにオフィスを構えるウェブエージェンシーで、ウェブデザイン界では早い段階から実験的でありながら洗練されたデザインを実践しつづけている個性的なチームです。創設者でありデザイナーのArnaud Mercier氏は残念なことに先日亡くなられてしまったのですが、Elixir StudioからArea17、グラフィックからウェブデザインの分野で多くの魅力的な作品を残してきたデザインヒーローなのです。

本作の赤いナナメ線についても、機能性というよりはグラフィック的な視点を感じられる要素として配置され、サイトに個性的な印象を与えています。



で、この赤いナナメ線。
ページ内のサムネールや、リンクよりも前面を突っ切っています。大きなPNG画像を用意して乗せれば簡単に再現できそうに見えて、実はHTMLを書く人はあまりやりたがらない部分なのです。というのも画像を前面に配置してしまうと、その下にあるレイヤーが選択できなくなってしまい、背面に設置されたリンクやサムネールはクリックできなくなってしまいます。

そこで、このサイトではページが読み込まれたタイミングでJavascriptでfor文を回し、1pxずつ赤いdivをドットとして描画して赤いナナメ線を実現させています。上記動画参照。そうすれば、サムネール上をマウス移動させても赤いドットの1px以外の場所ではクリッカラブルな状態を保つことができるのです、ギコい( 技巧的である )。

めちゃくちゃ分りにくいですが、上記の通り、赤いdiv上の1pxだけクリックできないだけで、ナナメ線問題をクリアしている。

こういう部分は、デザイナーとプログラマーの連携が取れていないと、なかなか実現できないのではないでしょうか。一見とても簡単な仕組みなのですが、分業が進むと実現できなくなる要素の代表例だなぁと感じて、見るたびに、ほっとしてしまうナナメ線です。


さて最後に、突然ですが、今日はイブですね、メリークリスマス！寝ます…。