ビジュアライズでわかる多趣籍な4nchor5 la6(アンカーズ・ラボ)の共通点

現在雑誌Web Designingで展開されているエキソニモの連載は、HTMLのソースとそのレンダリング後の画面をセットで展開するという珍しいアート作品だ。レンダリング後の画面だけを見るとグラフィックデザインのようだが、HTMLソースのほうを見るとインタビュー記事が埋め込まれており、レンダリング後の画面でゲスト自体を、HTMLソースのほうでゲストとエキソニモの関係やバックグラウンドなどを知る事ができるという仕掛けになっている。

第5回ともなると、そろそろ連載のスタイルというのが決まってきて、安定してくる。前回はちょっと特殊な感じだったものの、今回の作品はいつもの連載らしいものだ。インタビュー記事があり、それをHTMLやCSSでその人物を表現するという展開である。

前回の作品で、インタビュー形式でなくなってしまったので、ひょっとしたらもはや人を取材することに飽きてしまったのだろうかと心配したが、今回はこれまでの連載の定番ともいえるスタイルの作品である。まず、表面を見ると、取材対象者である4nchor5 la6(アンカーズ・ラボと呼ぶらしい)の名前があり、4nchor5 la6は石原素、真鍋大度、柳澤知明、堀尾寛太の4人で構成されていますよという足し算が書いてある。

また、ページ下部にはよくわからない言葉の羅列が書かれている。一見ブログなどで見ることができるタグクラウド(ブログ内で使われている話題を使用量に応じて文字の大小で表現したもの。よくサイドバーなどに置いてある)にも見える。

この作品を読み解く上で重要となるのは、ページの上半分と下半分の関係性である。ページの上半分はグループのメンバー紹介をしているわけであるが、メンバーの名前がそれぞれ違う表示方法になっているのに気づく。石原素は2重の赤ボーダー、真鍋大度は背景画像、柳澤知明はイタリック(斜体)、堀尾寛太は大きな太い文字といった具合だ。そして、それらの表現を全部適用した文字が4nchor5 la6に当てられている表現という形になる。これらをページ下部にも当てはめて考えると、それぞれの言葉に当たっているスタイルがそれぞれのメンバーに関係している事項ととらえることが出来る。

さて、これらは何だろうということだが、実はこの表面だけを見るよりもソースを見たほうが内容はわかりやすい。裏面の下のほうを見てみよう。

<span class="石橋素 真鍋大度 柳澤知明">プログラミングはまかせろ< /span>

例えばこんな風に書かれており、石橋素、真鍋大度、柳澤知明という名前がそれぞれCSSのクラス(class)になっている。CSSではクラスごとにスタイルを割り当てることが出来るため、このようにスペースをあけて記述することで3人それぞれに定義されたスタイルが「プログラミングはまかせろ」という文字列にあたるという仕組みなのだ。CSSのクラスは普通はこんな風に日本語で書くことは通常あまりないのだが、日本語で書くとソースコードを見てもだいたいわかるようになるのが不思議だ。

ちなみに3名のスタイルは下記のように書かれている。

.石橋素 { /* インタラクティブなデバイス開発、テクニカルディレクションなどハードにこなす。今年、二人目の赤ちゃんが誕生する */
border: double 34px red; direction: technical; }
.真鍋大度 { /* 表情を電気刺激でコントロールする映像で時の人に。DJ/VJ/プログラマなど活動は多岐に渡る */
background: url(http://daito.ws/wp/wp-content/uploads/face/making/06.jpg) top center; }
.柳澤知明 { /* 英国RCAデザイン・インタラクション学科卒。デザイン・プログラム・デバイスをトータルにこなすクールな男前 */
font-family: serif; font-style: italic; behavior: cool; }

CSSは通常上記のように記述し、{}内が実際のスタイルの定義となる。/* から */まではCSSのコメントなので実行には影響しないが、それ以外の部分(border～)でスタイルを定義している。例えば、「border: double 34px red」は英語なのでわかりにくいが日本語カタカナでそのまま書けば「ボーダー: ダブル 34ピクセル レッド」となり、もう少しくだけて書くと「ボーダーは、2重で34ピクセルの幅、赤」ということになり、ここまでくだけると初めてCSSというものを見たことがある人にも理解しやすいことと思う。

ただし、今回の作品の遊び心として「behavior: cool;」のような実際には機能しないCSSを使って、世の中のものをCSS的に表現する方法もとられている。例えば、でたらめに書いたつもりでも、偶然CSSに当てはまってしまってスタイルがついてしまうという面白さもあり、今回の作品には無いが、こういう書き方をした場合は色がついてしまう。

< p style="color:#abc;"> 私はABCに勤務しています。< /p>

ABCという会社に勤務しているからColorプロパティに「#abc」ということにしたのだが、実は「#abc」はCSSのColorプロパティとして正式に機能する値なため、色が変わってしまうという具合である。ただし、今回はこういった部分があまりなく、出力画面には反映されないため、今回のようなシンプルな見た目となっているのだ。

表面を見てわかるとおり、メンバーの指向性は様々なものを持ちつつも、ある部分では共通していて、こういった視点で世の中を見るとトレンドなどが一発で見えるのだろうなと思う。元々タグクラウド自体が、俯瞰した視点で傾向を把握することが出来るものだが、4nchor5 la6のような小さなグループを見ると意外な共通点がかわって面白い。