Posts Tagged Design

20100228

WordPress x ロクナナワークショップ
実験!WordPressラボラトリー

WordPress x ロクナナワークショップ 実験!WordPressラボラトリー

イベント詳細

本イベントでは、既にWordPressをCMSとして使っている方、WordPressの仕組みをより深く理解したいという、中級者の方を対象としています。

ゲストには、WordPress.com を運営する Automattic社 よりNaoko McCracken(マクラケン直子)氏、Press This ブックマークレットやP2、Monotone、Duotone などのテーマを開発した Noel Jackson(ノエル・ジャクソン)氏、ニューヨークを拠点とした情報システムコンサルティング会社 1080d の最高情報責任者 Ned Watson(ネッド・ワトソン)氏をお迎えします。

オーガナイザーは、ロクナナワークショップの講師でありWordPress、Movable Type関連の書籍も多数執筆されている 高山一登(タカヤマカズト)氏。

開催概要

  • 日時:2月28日(日)15:00 – 19:30(開場:14:30)
  • 会場:東京・新宿「 関東ITソフトウェア健保会館
  • 出演者:
    マクラケン直子氏
    ノエル・ジャクソン氏
    ネッド・ワトソン氏
  • オーガナイザー:高山一登(ロクナナワークショップ講師)
  • 料金:3,200円(税込み)※学生料金(数量限定):1,600円(税込み)

ブログなどでご紹介いただく際のバナーをご用意いたしました。

WordPress x ロクナナワークショップ 実験!WordPressラボラトリー

20091002

Web広告の作り方・映像広告の作り方

Web広告の作り方・映像広告の作り方

イベント詳細

媒体が違えば戦略も違う。
CM/映像業界からは ディレクター 柴田大輔 氏を、Web業界からは Webデザイナー 鎌田貴史 氏をお迎えし、「広告」をテーマに、実際の案件をもとにコンテンツ制作の考え方や制作過程をご紹介いただきます。

開催概要

  • 日時:10月2日(金)18:00 – 20:45(開場:17:30)
  • 会場:東京・代々木「 TKP代々木ビジネスセンター 2号館 B1
  • 出演者:柴田大輔(THE DIRECTORS GUILD)、鎌田貴史(spfdesign Inc.)
  • オーガナイザー:今北舞(ロクナナ)
  • 料金:3,800円(税込み)
    ※学生料金 1.900円(数量限定・税込み)

ブログなどでご紹介いただく際のバナーをご用意いたしました。

Web広告の作り方・映像広告の作り方

20091002

FlashユーザーのためのiPhoneアプリ開発入門

FlashユーザーのためのiPhoneアプリ開発入門

イベント詳細

ToyCamera 開発者 深津貴之(ふかつたかゆき)氏と、NatsuLion for iPhone 開発者 森琢磨(もりたくま)氏をお迎えし、Flashユーザーを対象としたiPhoneのアプリ開発のための入門セミナーを開催します。

開催概要

  • 日時:10月2日(金)13:30 – 16:15(開場:13:00)
  • 会場:東京・代々木「 TKP代々木ビジネスセンター 2号館 B1
  • 出演者:深津貴之(fladdict)、森琢磨(takuma104.log)
  • オーガナイザー:加茂雄亮(ロクナナ)
  • 料金:3,800円(税込み)
    ※学生料金 1.900円(数量限定・税込み)

ブログなどでご紹介いただく際のバナーをご用意いたしました。

FlashユーザーのためのiPhoneアプリ開発入門

20090807

2人のアートディレクター
仕事・生き方・考え方

2人のアートディレクター 仕事・生き方・考え方

イベント詳細

日本を代表する新進気鋭のアートディレクター Jeong-ho Im(イム・ジョンホ)氏と 西田幸司(にしだこうじ)氏をゲストにお迎えし、具体的な制作過程を元に、スタイルの異なる2人の仕事・生き方・考え方について語っていただきます。

開催概要

  • 日時:8月7日(金)17:00 – 21:15(開場:16:30)
  • 会場:東京・渋谷シアターTSUTAYA 「 Prologue(プロローグ)」
  • 出演者:Jeong-ho Im(mount inc.)、西田幸司(RAKU-GAKI)
  • オーガナイザー:今北舞(ロクナナ)
  • 料金:4,600円(税込み・ワンドリンク付き)
    ※学生料金 2,300円(数量限定・税込み)

ブログなどでご紹介いただく際のバナーをご用意いたしました。

2人のアートディレクター 仕事・生き方・考え方

20090417

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

イメージ:魅せる!アート スクリプティング

イベント詳細

日本を代表するFlashクリエイターの 梅津岳城 氏と 高木久之 氏をゲストにお迎えし、ActionScriptで表現するWebデザインセミナーを開催します。

開催概要

  • 日時:4月17日(金)18:00 – 21:00(開場:17:30)
  • 会場:東京・渋谷「 ティーズサロン
  • 出演者:梅津岳城(mount inc.), 高木久之(wildcard inc.)
  • オーガナイザー:今北舞(ロクナナ)
  • 料金:4,000円(税込み)※学生料金(数量限定):2,000円(税込み)

ブログなどでご紹介いただく際のバナーをご用意いたしました。

魅せる!アート スクリプティング

イベントレポート

イメージ:今北舞氏(左)高木久之氏(中央)梅津岳城氏(右)
[今北舞氏(左)高木久之氏(中央)梅津岳城氏(右)]

アートスクリプティング

アートスクリプティング(造語)とは、プログラミング言語を用いた表現手法の一つで、特定のプログラミング言語を指すわけではない。プログラム言語をデザインを表現するツール ペンに置き換え、ビジュアルデザイン・インタラクティブデザインを意味する一つの方法論といってもよいだろう。このような表現手法は国内外問わず多くの注目を集めており、その手段として 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 のウェブサイトを紹介。

Shanghai World Financial Center
[Shanghai World Financial Center]

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

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

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

dajistudio
[dajistudio]

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

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

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

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

プログラムから生まれるクリエイティブ

イベント第2部では wildcard inc. の代表取締役兼ディレクターでもある高木久之氏が登壇。

制作するにあたって触れる気持ちいいインタラクティブを軸としているのだという。オーガナイザーである ロクナナ 今北舞氏の質問パフォーマンスと表現の折り合いについて「どんなに気持ちよくても(再生速度が)重かったら意味がない」と高木氏は語る。またそのインタラクティブには「意外性を作っていくと、人はその作品に深く関わるようになる。…どの作品にも意外性を持たせている」と、自身のこだわりを作品を交えながら解説した。

このときあげられた事例が高木氏自身が立ち上げ、wildcard inc.のサイトで紹介されているLine Project線のみでどこま表現できるかに挑んだこれらの作品は、技術的にも表現的にも素晴らしいものばかりだ。中でも、LineProject 005 MISTYLINEは、わずか50行のロジックで動いているという。しかしながら高木氏は「このプログラムがどう動いているかを学ぶことは大して勉強にはならない、大事なのはそこに至るまでのプロセス」と説く。

LineProject 005 MISTYLINE[LineProject 005 MISTYLINE]

やはり地道なスタディー(試行錯誤)が欠かせないようだ。

「MISTYLINEはまず線を描くことから始まった。しかしただ線を永遠と描画するのではパフォーマンスもどんどん落ちてしまうため、制限をかけ、次にマウスの動きに反応する動きを付加した」と、パフォーマンスとのバランスを解説。気持ちよさを追求する中で試行錯誤を積み重ね、構築していることがわかる。

さらにブラッシュアップについては、ユーザーがモノを120%コントロールしている感覚を狙ってを検証を繰り返す。その結果MISTYLINEでは加速をマウスコントロールと絶妙に繋げることで、ユーザーはまるで自分の意志を線に直接投影しているような気持ちにさせられる。

高木氏は一連のプロセスをロジカルに組み立て、フィジカルにきめると定義。ロジックが組み上がった段階で、あとはひたすら自分で触ってみて、足りない気持ちよさをどんどんブラッシュアップする。頭で考え、体で考えるというプロセスを反復するという高木氏。自分の体でフィードバックし、体感することの重要性が感じられる。

ビジュアル表現とソフトウェア制作の対比について「正確に動くことはもちろんのことだが、ソフトウェア制作論と異なり、このような表現手段にはイメージする気持ちよさ・さわり心地が目標とするゴールと、その先にあるクリエイティブな考え方」を語る。その中で「ソフトウェア・プログラミングをビルディングの建築だとするならば、インタラクティブ・プログラミングは家具や粘土細工」と喩えた。

また高木氏は昨今のFlash界のなんでもできる不自由さに警鐘を鳴らす。
「あまりになんでもできすぎる故に、Flashシーン全体が道具に縛られている」ActionScript 3.0の登場によって、Papervision3DやBox2D等の大規模ライブラリを始め、処理速度の向上によって表現の幅が広がったことは確かだ。しかし、簡単に高度な表現ができる反面、視野が狭くなり、それだけで満足しがちだ。
高木氏は「3Dが動くのは当たり前。ライブラリは道具として捉え、使い倒さないと意味がない。その先に何があるのか、それがインタラクティブデザインをする人が考えることではないか」とコメントした。

ちなみに高木氏自身は、パラメータの調整が必要な場合や、Z軸が加わることで直感的な調整が難しいPapervision3Dを扱うときは、パラメーターを直感的に変更できる制作補助ツールを作成し、開発の手間を省いているという。

イメージ:デバッガー

気持ちよさを追求するには、それだけ細かな調整とブラッシュアップが求められる。必要に応じて検証用にツールを制作する事も、インタラクティブデザインの匠に近づく一歩なのではないだろうか。

この日のセッションを通して二人から感じたことは、まさに職人であるということだ。彼らに妥協という言葉はない。気に入らなかったら一から作り直し、ひたすらブラッシュアップを続け、納得いくまで繰り返すのだ。一歩先を行くあくなき追及心は、誰も体験したことのない気持ちよさを表現する。そうして組み上がったものが人々を魅了し、驚嘆や感動に導くコンテンツへと変貌を遂げるのだろう。

このイベントに参加した誰もが表現することの本質的な重要性というものをはっと気付かされたようだった。著者自身も非常に強いインスピレーションを受けるイベントとなった。

(2009/4/24 加茂 雄亮)

20090217

実験!Movable Typeラボラトリー
- 最強のパブリッシングプラットフォーム・MTテンプレート徹底活用 -

実験!Movable Typeラボラトリー

イベント詳細

Movable Typeは考え方次第で、Web公開用に限らない様々なファイルを生成するプラットフォームとして使うことが可能です。本イベントでは、様々な観点からMovable Typeの新しい使い方を探っていきます。

開催概要

  • 日時:2月17日(火)18:00 – 21:00(開場:17:30)
  • 会場:東京・渋谷「 ティーズサロン
  • 出演者:黒野明子(crema design), 上ノ郷谷太一(シックス・アパート)
  • オーガナイザー:佐々木京子(ロクナナ)
  • 料金:4,000円(税込み)※学生料金(数量限定):2,000円(税込み)

ブログなどでご紹介いただく際のバナーをご用意いたしました。

実験!Movable Typeラボラトリー

イベントレポート

Get Adobe Flash player

20081202

キャラクタークリエイター タロアウトの仕事
- Dior ゴルメットちゃん誕生の秘話 -

キャラクタークリエイター タロアウトの仕事

イベント詳細

ディオール ファインジュエリー(Dior fine jewelry)の「 ゴルメットちゃん 」、日産自動車「キューブ」のブログパーツ「 CUBOX 」のキャラクタークリエイターとしても知られる タロアウト 氏によるトークセッションを開催します。タロアウト氏のキャラクタークリエイティブの秘密に迫ります。

開催概要

  • 日時:12月2日(火)18:00 – 21:00(開場17:30)
  • 会場:東京・渋谷「 ティーズサロン
  • 出演者:タロアウト
  • オーガナイザー:今北舞(ロクナナ)
  • 料金:3,200円(税込み)

ブログなどでご紹介いただく際のバナーをご用意いたしました。

alt=

20081118

面白法人カヤックが語る制作会社のお仕事とAdobe AIR最新事例と制作実演

面白法人カヤックが語る制作会社のお仕事とAdobe AIR最新事例と制作実演

イベント詳細

「つくり続ける」企業、面白法人カヤックの現場において、どのようにFlashやAIRのコンテンツが作成されているのか、実演を交えながらご紹介していただきます。

開催概要

  • 日時:11月18日(火)18:00 – 20:45(開場17:30)
  • 会場:東京・渋谷「 ティーズサロン
  • 出演者:鈴木啓央(面白法人カヤック), 瀬尾浩二郎(面白法人カヤック)
  • オーガナイザー:大重美幸(ロクナナワークショップ講師)
  • 料金:3,200円(税込み)

ブログなどでご紹介いただく際のバナーをご用意いたしました。

面白法人カヤックが語る制作会社のお仕事とAdobe AIR最新事例と制作実演

20081107

【無料】今からでも遅くない! Flash CS3超入門講座(アップルストア 銀座)

今からでも遅くない! Flash CS3超入門講座

無料イベント

Adobe Flash超入門者の方を対象に、ロクナナの今北舞が、Flashの基本操作からすぐに使える実践テクニックまで、実際にサンプルムービーを作成しつつ解りやすくご紹介します。

開催概要

20080917

【無料】今からでも遅くない! Flash CS3超入門講座
え?いきなりActionScript 3.0!?

今からでも遅くない! Flash CS3超入門講座

無料イベント

Adobe Flash超入門者の方を対象に、ロクナナの今北舞が、Flashの基本操作からすぐに使える実践テクニックまで、実際にサンプルムービーを作成しつつ解りやすくご紹介します。

開催概要

  • 日時:9月17日(水)18:00 – 21:00(開場17:30)
  • 会場:東京・渋谷「 T’s 東宝ビル別館 ホール204 」
  • 出演者:今北舞(ロクナナ)
  • 料金:無料

Flashの学校 67WS

出張講座・貸し切り講座

ロクナナワークショップでは、会社・学校などご希望の場所への出張や、個人や団体での貸し切りも受け付けております。

出張・貸し切り講座について

  • ロクナナワークショップ 開校10周年の記念企画