ロクナナワークショップ NEWS & REPORT

レポート「魅せる!アート スクリプティング-ActionScriptで表現するビジュアルデザイン」

この記事を読むのに必要な時間:およそ 2.5 分

今北舞氏(左)高木久之氏(中央)梅津岳城氏(右)

今北舞氏(左)高木久之氏(中央)梅津岳城氏(右)

アートスクリプティング

アートスクリプティング(造語)とは,プログラミング言語を用いた表現手法の一つで,特定のプログラミング言語を指すわけではない。プログラム言語をデザインを表現するツール ペンに置き換え,ビジュアルデザイン・インタラクティブデザインを意味する一つの方法論といってもよいだろう。このような表現手法は国内外問わず多くの注目を集めており,その手段としてProcessing(プロセッシング)やFlash ActionScriptが活発だ。

イベントでは国内でもFlashクリエイターとして評価が高い,梅津岳城氏と高木久之氏を迎えて開催され,イメージをスクリプトに落とし込む表現の考え方から,実践的なプログラミングの作法まで,幅広く興味深い内容となった。

表現とユーザーインターフェース

画像

第1部ではmount inc.のデザイナーとして活躍する梅津岳城氏が,表現・使いやすさ・パフォーマンスを兼ねそろえた実装の方法論を解説した。梅津氏は自身が手がけた作品を数点例に挙げ,そのコンセプトと表現手法を語った。

まずは女性アパレルブランドRED CLOVERのウェブサイトを紹介。女性らしい繊細さ,柔らかさがビジュアルの随所に感じ取られる作品だ。

RED CLOVER トップページ(左)about red clover(右)

RED CLOVER トップページ about red clover

この柔らかい藁半紙のような質感を表現するために,よく見ると文字がかすれていることがわかる。このような表現はビットマップなら手軽だが,実装ではXMLを読み込んだダイナミックテキスト(動的に文字列を埋め込む手法)を用いているため,前述の方法は使用できない。そこで梅津氏はFlashでかすれのエフェクトを作成し,サイト全体で流用することで効率化を図るなど,スクリプトによるビジュアル表現を随所に採用している。ささやかなことだが,この独特の質感がユーザーに心地よさを与えている。さらにインターフェースのアプローチとして,愛らしいSE(効果音)を付加した他,コンテンツ遷移時に毎回違うビジュアルを表示することで,ユーザーが無意識にサイトのコンセプトを感じられるものとなっている。

次に,上海の地上101階建て超高層ビル,Shanghai World Financial Centerのウェブサイトを紹介。

このサイトでは,世界屈指の超高層ビルの高さを表現することをコンセプトとしている。これを実現したのがコンテンツ全体を1ページに集約し,縦長に積み上げたその大胆なサイト構成だ。イントロ部分ではこの縦長のコンテンツを下から上へスクロール。ユーザーに全てのコンテンツを見せながら上昇を続け,ようやく目的のコンテンツへと到達する。本来ならこのような演出はユーザビリティの観点から,タブー視されがちな行為ともいえる。しかしこのイントロの存在で,ビルがいかに高層であるかをユーザーが体感することができるのだ。

さらにパフォーマンスにも気を遣っており,「Flashで使用する画像はまとめてzipで読み込み,内部的に解凍することでサーバーのリクエスト数を劇的に減らすことができた」とのこと。計算されつくされた設計と配慮がうかがえるサイトだ。

続いて梅津氏がどのように1つのコンテンツを築き上げるのか,その過程をコンセプトからプロトタイプの作成,実際のソースまでを余すことなく解説がなされた。この解説には梅津氏の最新作,dajistudioを例に挙げて紹介。dajistudioはサウンドデザイナー 吉田健二氏のポートフォリオサイトである。

メインビジュアルにもなっているサウンドの波形に合わせた美しいビジュアライザが特徴的なサイトだ。実際にサイトをご覧いただきたいのだが,波形がまるで小魚のように流れる様は思わずサウンドに耳を傾けながら,無心で眺めてしまう。この美しいビジュアライザに至るまでに,梅津氏はいくつもスタディー(試行錯誤)してきたという。もともと既存サイトの問題を改善するために見やすく・聴きやすいを最低限の課題と設定。「必要最低限の要素で音楽を表現したかった」と述べた上で現在の形に辿り着くまでの過程を紹介し,ビジュアライザの設計とロジックについても解説した。

実際にソースを見ると,非常にシンプルに実装されている印象受けた。この解説の中で会場の注目を集めたのがFlash Player9.0で実装されたSoundMixer.computeSpectrum()メソッドによるサウンド波形の抽出だ。このメソッドは,指定したByteArrayクラスインスタンスにサウンドの左右チャンネル256個ずつ,左右あわせて512個の浮動小数値を格納するものだ。このメソッドで収得した値を使って今回のビジュアル表現に活用している。

さらに梅津氏はこの値を利用した動きの表現をより自由なものにするため,サウンドの周波数をSoundMixer.computeSpectrum()メソッドで抽出したあと,取得した256個のデータを分割し,値に対してランダム処理を加え,分割したデータを再合成するなどの実装を試みた。これにより動きは格段に気持ちのよいものとなっている。

画像 画像

このようなロジックを解説すると少し難解に感じられるかもしれない。しかしこのようなちょっとした処理をスパイス的に加えることが,ユーザーに対して無意識に快感を与えている要因だといえるだろう。またこれらのソースは参加者に公開・配布された。ハイレベルな方法論の数々に来場者も納得の第1部だった。

著者プロフィール

ロクナナワークショップ(ロクナナワークショップ)

アドビ認定トレーニングセンター ロクナナワークショップでは,Web業界の第一線で活躍中の講師陣による,実践的な講座を開講しています。全ての講座は最大6名・1日6時間で完結する,PCを操作しながらの集中トレーニングです。

また,各方面で活躍中のクリエイターをお迎えし,最新技術やアイデアをご紹介いただくイベントも開催しています。学生割引もありますので,是非一度参加してみてください。

URL:http://67.org/ws/

コメント

コメントの記入