2005/10/31

近況とストラテジー

10月31日(月)5時起床、また寝坊する。外は薄暗く曇り空。
明日から11月になる。早朝から「本日中!」という仕事や雑務に追われる予定。移動時間をもっと有効に使えたらよいのだが、なかなか難しい。

11月から1ヵ月間、監視される日々が続く。自ら志願した。(多方面にご迷惑をおかけしたので今回は)時間のマネジメントをお願いしたのだ。余暇ゼロで辛いと思うが、音声雑記で自虐ネタを展開できそうなので相殺。辛ければ辛いほど話が面白くなる、複雑な気分だが楽しみでもある。

本日「Web STRATEGY」という新しい雑誌が発売される。Webの企画やディレクション、サイトプロデュースなどの記事で構成されているビジネス系の雑誌だ。もちろんクリエーターの方々にとっても有益な内容である。
私も教育関連の記事を書いた(本業の記事執筆は久しぶり‥)。
Web STRATEGY写真

書籍「FLASHキャラクターアニメーション」のサンプルアニメ予告編は、専用サイトにアップした。この専用サイトの公開は発売日お知らせのタイミングに合わせようと思う。
本のイメージ画

「グッズ本」は大詰めである‥
グッズ本

ビデオ版音声雑記(ビデオなのに音声というのはおかしいが‥)とマイクロセグメンテーション実証実験の話は、音声「クリエーターと個人市場」でだらだらと語ることに。

10月 31, 2005 [01mr1]執筆した記事の情報 | | トラックバック (0)

2005/04/29

雑記

4月29日(金)みどりの日、晴れて初夏の陽気。前橋は、今日も30度を超えたようだ。東京も27度の夏日。GWがスタートしたが、私の周辺はフリーランスが多く平常営業、いつでも自由に休める分、こういう時こそ新しい企画を仕込むぞ、と意気込んでいる。

午前中、作業を済ませ、打ち合わせ。これから取材の予定。道場行きはキャンセルして、久々に免疫学を勉強しておく。夜は本の作業を進めておこう。
web creators 6月号(本日発売)でFlash 関連の記事を書かせていただいた。ホストアプリケーションとなったFlash を体系的に振り返ってみる、という内容である。
web creators 6月号の表紙

本日、MacOS X Tigerが発売される。但し、夕方6時からである。現在Apple Storeでは各種イベントが開催されているが、発売は”夕方6時”だ。(←繰り返しておこう。)
「Tigal、ついに封印は説かれる」というサブジェクトのスパムメールが届いていた。もちろん、Appleからではない。本当のコピーは「Tiger、ついに封印は解かれる」である。タイガー(虎)でなくてはならない。最近のスパムメールは実に巧妙だ。

4月 29, 2005 [01mr1]執筆した記事の情報 | | トラックバック (0)

2004/12/27

雑誌記事のサンプル

本日発売の「web creators」2005 2月号
web creators表紙
以下は、特集「プロを感じさせるWebデザイン」に掲載した記事サンプル。Flashアニメーションの事例。
尚、CSSデザインの事例は後日アップする予定。

サンプル画面
改善したムービー
●通常の方法で作られたオリジナルムービー

サンプル画面
改善したムービー
●通常の方法で作られたオリジナルムービー

12月 27, 2004 [01mr1]執筆した記事の情報 | | トラックバック (0)

2004/12/04

高速レンダリング

雑誌のサンプル(業務連絡):
キャラクターアニメーションの一部とキューブが飛び交うシーンに適用。(Flash MX 2004 使用/Flash Player 7 必須)
サンプルアニメーションの画面
レンダリング改善サンプル(キューブのシーンに適用)]

12月 4, 2004 [01mr1]執筆した記事の情報 | | トラックバック (0)

2004/11/29

Flash Re.Ex.A

本日発売の「web creators」1月号でFlashインターフェースの3つの視点について書いた。WebデザインにおけるFlashエレメントをインターフェースデザインという切り口で見直してみた。
Flashインターフェースの3つの視点
これも、只今執筆中の‥「Structured Web Design」の考え方に則して、体系化したもの。「Flash Re.Ex.A」という(クライアント説得用の)バランスチャートも作成中である。

雑誌の方は、メニューデザインに関する基礎知識を学べるよう構成されている。再学習に役立つのではないだろうか‥
雑誌のページ画像

11月 29, 2004 [01mr1]執筆した記事の情報 | | トラックバック (0)

2004/08/27

Webホワイトスペース

28日(土)に発売されるweb creators 10月号の特集は「シンプルデザインのすすめ」である。Keep It Simple Stupid. は、Webにおいて常に意識すべき概念だ。
web creatorsの表紙

私は、ホワイトスペースに関する事例を1つ担当した。

西洋の美学が、シンメトリーと数理的な造形原理なら、日本は自然主義的である。わざとアンバランスなレイアウトにする、そして(左右どちらかに)ホワイトスペースを作り出して補うというコンポジションが素晴らしいのだ。浮世絵のモチーフを断ち切るというテクニックなどは、”粋”と言ってもよい。大胆かつ魅力的。今回は、その考え方を簡潔に書いてみた。
執筆したページ

サンプルは、Dreamweaver MX 2004 で制作。ヒドゥンアートWebサイト(のシンプル版)、初露出である‥

8月 27, 2004 [01mr1]執筆した記事の情報 | | トラックバック (0)

2004/07/26

Flashアニメーションの超高速化

今、発売中のWeb Designing8月号の特集「なぜ表示は遅くなるのか?」でFlashパートの記事を書いた。
‥と、ここで紹介したのだが、その時、補足解説すると書いていたのだ。(自分で書いて忘れていた‥)最近、関連したメールを多々頂くようになったので、少しだけこの話題を。

20040726_1.jpg

以前、CG検定の本を書いたとき、(参考のためと思い)レンダリングについての勉強会に参加した。現在のFlashアニメーション制作にも役立っているのが、

以下のキーワードであった。

1)フルシーン・アンチエイリアシング
2)アルファ・ブレンディング
3)ピクセルシェーダによるラスタライズの高速化

20040726_2.jpg

要するに、アルファやグラデーションなどは、ハードウェアで処理したらどう? という話。

例えば、Swiff Player は、ハードウェア・アクセラレーションを使ったリアルタイムレンダリングが可能だ。
下の写真は、1,600 x 1,200ピクセルに拡大表示した状態。

20040726_3.jpg

20040726_4.jpg

Swiff Playerは、フリーフェアだが、ビデオ系プレイヤーのようにSeek Bar が付いていて意外に便利である。レンダリングには雑なところがあるかもしれないが、使い勝手は良い。

20040726_5.gif

20040726_6.gif

これは、あくまで1つの事例だが、2Dグラフィックスにおけるハードウェア処理という視点は持っていた方がよい。例えば、企業のショールームのように複数の場所で同じスペックのPCを使えるような場合は、パソコンを強化して、レンダリングの高速化を図れる。博物館に常設されているキオスクなども同様だ。

ちょっと前のことだが、高解像度ディスプレイにフルスクリーン表示されているFlashアニメーションを見た。(もちろん、秋葉原だ。)これが凄いのである。100くらいあるオブジェクトが気持ち悪いくらいに動く。秒60フレームだったのかもしれない。
店員さんが、「ハードウェア・アクセラレーションが利用できないなら、重たいフレームだけアンチエイリアスをオフにしたり、ビットマップの品質を落として、決め絵だけクオリティを維持すればいい」という話をしていた。

Web Designingの記事では、ハードウェア・アクセラレーションには触れていないが、負担になる処理を軽くするという考え方はハードウェアの話から落とし込んだものである。今でも、オリジナルのFlash Playerを開発しているシェアウェア作家の方々にいろいろ聞きたいと思っているのだ。たくさんヒントが得られると思う。

7月 26, 2004 [01mr1]執筆した記事の情報 | | トラックバック (0)

2004/07/06

数百MBの高画質画像を快適に閲覧させる

現在発売中のweb creators 8月号の特集で書いた「数百MBの高画質画像を快適に閲覧させるワザ」に関する質問があったので情報を掲載。
使用した「Zoomify EZ」のサイトは、http://www.zoomify.com/ez/ Windows版、Mac版がダウンロードできる。操作手順は、雑誌を参照していただきたい。
私が作成したサンプルは、以下の通りである。(※Flash Player 必須)

サンプルの画面

[サンプルを見る]
ブロードバンド環境用

おまけとして、サンプルに使用した画像をアップした。この画像素材を使って、実際に試してみてほしい。6,600x2,000ピクセルの高解像度画像なので、6MBほどある。「Zoomify EZ」によって、これが膨大な細切れ画像となり、XMLで管理される仕組みが出来上がるのだ。

[素材画像のダウンロード]
この画像は「速習Webデザイン FLASH MX 2004」の全レッスン見本画像を1つにレイアウトしたもの。

素材画像の見本

7月 6, 2004 [01mr1]執筆した記事の情報 | | トラックバック (0)

2004/06/29

飛び出す3-D グラフィックの補足

本日発売されたWeb creators 8月号の特集で、3本の記事を書いた。「飛び出す! 3-Dグラフィック〜」「数百MBの高画質画像を快適に〜」「再生環境にあわせたFlash〜」である。
第一回講義の怪談コンテンツで、少しだけ3-D立体画像を話題にするので、ここでも雑誌記事の補足として取り上げておきたい。

Web creators特集記事のページ


作り方は簡単。絵を描いてから、複製して2つ並べる。編集するのは、右側の絵だけ。絵の要素を右に移動させると奥に下がり、左に移動させると手前に出てくる。必ず平行に移動させること。
各要素(この場合は、標識、サル、タイトル)がレイヤーに分けられている必要があるので、

レイヤー機能が搭載されているAdobe Illustrator がお薦め。(素材がビットマップ画像なら、PhotoshopやFireworksなどでもよい。)

3-Dアナグリフの制作解説図


バイクのレイヤーは固定して、奥行きと手前の距離を決めていく作業である。標識はバイクよりも奥にあり、flatmotion というテキストは一番手前になる。

3-Dアナグリフの制作解説図


左右の画像が出来たら、フリーウェア「Anaglyph Maker Ver1.08 」(Windows)で簡単にアラーアナグリフ画像を作成できる。(ソフトの操作は、雑誌を参照してほしい。)
Macには、「StereoPress」というフリーウェアがある。同様にアラーアナグリフ画像を作成できる。(但し、MacOS Xの動作は未確認。)

フリーウェアのアイコン画像


赤青メガネは、カラーセロファンで簡単に作成できるが、写真のように、明るい青(シアン)が適している。(3-Dの再現性に優れている。)週刊誌では年に数回、アナグリフのグラビアを載せるが、付属するメガネはとても良い。「STEREOeYe」では、赤青メガネ1つ80円で配布している。

赤青メガネの写真


怪談コンテンツの場合、最も効果的なシーンのみ、3-Dカラーアナグリフを採用する。但し、赤青メガネがなくても内容が把握できるように、メインとなる人物やアイテムなどは固定する。(つまり、ブレない絵にしておく。)

6月 29, 2004 [01mr1]執筆した記事の情報 | | トラックバック (0)

2004/06/23

大量執筆した2週間

先々週の後半から30ページ分の原稿を書いた。書籍と月刊誌3つの執筆が切れ目なく続いたのだ。書籍の方はこれからが本番だが、雑誌の方は終わった。近日、発売される。
実は、執筆の際、いろいろ検証することがあって、通常作らないようなサンプルをたくさん作成した。Flash ムービーは、40くらい作っただろうか。執筆の合間とはいえ、ハイペースだった。(ちょっとだけデザイナー気分であった。)

常識と思われていたものが、実は違っていた‥ということが度々ある。
例えば、Webセーフカラー216色のように、引用の引用がはてしなく続いて、市販書籍にも何の疑いもなく掲載される。後で、実はそれ違っていたらしいよ、という。
今回の検証でも、あれ?と思うことがあった。
雑誌が発売されたら(全部、今月出るはず)、ここで取り上げてみたいと思う。

▼お馴染みの原稿サイト

原稿サイトの一部

6月 23, 2004 [01mr1]執筆した記事の情報 | | トラックバック (0)

2004/06/13

Flash 劇画

タブレットで描いた重たいベクトルグラフィックをスムーズに動かす技法。技術的なことより、ベーシックなアニメーション技法が重要であった。メリハリのある演出に効果大。

劇画タッチのFlashアニメーション

[Flashサンプルを見る]

某雑誌にて紹介する予定。後日、お知らせ。

6月 13, 2004 [01mr1]執筆した記事の情報 | | トラックバック (0)

2004/06/10

本の執筆作業の60%はモバイルワーク

Dreamweaver 本、そろそろイエローカードを出されてもおかしくない状況になってきたので、引き締めることに。
改訂とはいえ、油断をしてはいけない。

私の本執筆におけるワークスタイルは、こんな感じである。

まず、ノートにキーワードを箇条書きしていく。
このプロセスで本の構成が出来上がってくる。絵で情報を整理していくので、図解的になる。作業は、喫茶店などが多い。(最近はドトールとかスターバックス)ノートとペンさえあればよいので、場所に依存しない。打ち合わせまでの空き時間など、有効に使える。

ノートにキーワードを書いていく

内容がまとまったら、

実際にアプリケーションを動かしながら確認する。
この作業だけは、スタジオのデスクワークとなる。つまり、打ち合わせの合間とか、喫茶店で作業、というのは困難。しっかりとスケジュールを作っておかないといけない。

動作確認が終わったら、テキスト化して専用サイトにアップする。
専用サイトというのは、編集担当さんとのデータやり取りの場である。伝言板的な機能もあり、さまざまな情報をアップするのだ。(ID、パスワードで管理しており、下版後はサーバーから削除している。)

専用サイトの画面


テキスト化は、NTTドコモのシグマリオン2を使う場合が多い。小さくて、バッテリがなかなか消費しないのだ。2、3日は連続して使える。ネットに接続するときは、PHSカード(64K P-in Comp2@ct)を使用。ネット接続だけはバッテリを消費するので、サッと済ませる。

専用サイトからプリントアウトしたもの。
外出するときは、これをカバンに入れて持ち歩く。暇があったら見直したりする。

プリントアウトした原稿


本の作業‥
40%はガチガチのデスクワーク、60%は空き時間を利用したモバイルワークという感じである。

例えば、Flash 本のスケジュール表を見ると、机に向かって作業する時間は意外に少ないのだ。やはり60%くらいは、日常の細切れの時間、外出している時間を利用していることがわかる。
アプリケーションを動かしながらの作業は、これ以上短縮できるものではないので、ワークスタイルが今後大きく変わることはないが、モバイルワークの質がかなり向上するのではないかと期待している。

あと、専用サイトは著者にとって財産になる。
本の作業が完了すると、それまで使ってきた資料やプリントアウト、ゲラなど大量の紙が残る。うまく整理しておけば、後々役立つわけだが、そう簡単なことではない。終わってしまった仕事の資料整理というのは、モチベーションが上がらないのだ。
大切に保存しておいても、まず活躍の場を与えられない。

専用サイトの場合は、体系的にまとまっていて、すべての情報を閲覧できるようになっているので、他の本の執筆のときに見やすい。
雑誌の記事なども必ず専用サイトを立ち上げているので、現在10ほどのサイトがあり、貴重な資料になっている。

6月 10, 2004 [01mr1]執筆した記事の情報 | | トラックバック (0)