イベント後の質疑応答［再録3］

Q；Portfolioを見せてくれなかった
A；すみません、時間の都合上、紹介できませんでした。「Portfolio」の解説ムービー（Flash Video）が公開されていますので記載しておきます。

・ビデオチュートリアル
※再生にはFlash Playerが必要です

PortfolioでドキュメントからWeb素材まで一括管理し、Dreamweaverであればアセットを経由して活用できるようにします。デモで取り上げたファイル名「作業番号+使用箇所+日付 .拡張子」は管理しやすいようにルール化したものでした。
PortfolioはWindows2000、XP、Mac OS X 10.4.4以降で動作します。スタンドアロン版は25,200円。

※このイベントに関するエントリーは「CSS Nite LP」カテゴリにまとめられています

本日のエントリーは公開予約で投稿されています

イベント後の質疑応答［再録2］

RapidWeaverについての補足；
今回のプレゼンでたまたま使ったソフトなので、詳細は省きましたが興味を持たれた方がいらっしゃいましたので補足しておきます。尚、初心者向けのソフトですから「カスタマイズ」することが活用の前提になります（ご了承くださいませ）。

●コンストラクションキットの編集方法
オリジナルを作成するのではなく、既存のものを編集して試したい場合

［大きく表示（640x1184）］

●コンストラクションキット（テーマ）の作成について
Theme Development（英語）
※XHTML strictで記述します

●参考；
RapidWeaver Advanced Features（英語）

●プラグインの開発
Plugin Development（英語）
※デモで紹介したマルチカラムのドラッグ編集はプラグインの機能です。Ajaxによるアコーディオンやコラージュなど、さまざまなプラグインがあります。自分で開発することができます（要プログラミング）。

イベント後の質疑応答［再録］

Q；自動化とは？
A；エディタやユーティリティなどを使って進めていた「手作業」がアプリケーションソフトの新機能によって格段に効率化されることです。お話した通り、1997年（マークアップ）、2000年（テーブルレイアウト）に大きな動きがありました。今まで携われなかった人たちが作業に参加し始め、スキルの高い人たちは「必要に応じてエディタと使い分ける」といった作業が可能になりました。
但し、新しい動きには「良い面、悪い面」が必ず同居していますので、いろいろな意見が出され議論されます。社内の方針でテーブルレイアウトの機能を使わせない現場もありましたので、捉え方は多様です。

Q；自動化されて一時的に現場が混乱するのでは？
A；講演では「グラフィックデザイナー参入」を事例にしましたが、たしかにテーブルレイアウトが自動化されたことで「HTMLを記述できないWebデザイナー」がたくさん現場に採用された時期がありました。ただ、ディレクターによるチェック体制や要点を明確にした短期学習、ワークフローの見直しなどによって、生産性が向上するだけではなく表現レベルも大幅にアップしていきました。
1997〜2000年前後のWeb専門誌を見ると、テーブルレイアウトが自動化された後の（視覚表現レベルの）変化が確認できると思います。

Q；デモはMacだったがWindowsでは無理？
A；アプリケーションに依存することなので、現在はMac環境になります。あくまで「現在のところは‥」です。尚、制作会社によっては、今回のデモのような「プロトタイピングモデルのワークフロー」はMac、Windows環境問わず実現されています。過去の歴史が繰り返されるなら、そろそろ市販アプリケーションに搭載されるタイミングでは‥という推測です

Q；なぜ、RapidWeaver？
A；初心者向けのWeb制作ツールをそのままプロの現場に持ち込むことはできませんが「カスタマイズ」することで、直感的な操作環境を提供するオーサリングエンジンとして活用可能になります。カスタマイズが一番容易だったのが、RapidWeaverでした。

Q；Dreamweaverを使った効率的な作業方法は？
A；強引に今回のテーマに結びつけるなら‥Dreamweaver 8を少しだけカスタマイズして（デモで紹介した）QuicKeysを組み合わせることで、一歩進んだアセット活用が可能になります。「自動化」にはなりませんが、CSSEditを使わずDreamweaverだけで構造の視覚化ができます（もちろんMac、Windows問わず）。
上流できっちり仕様を決める鋼鉄のワークフローでは出番がないかもしれませんが、プロトタイピングモデルでは効果があります。

自己反省＆言い訳；
当日、ちょっとした事件がありまして‥気が動転している状態でプレゼンに挑みましたので、かな〜り早口で聞きづらい喋りになっていました。申し訳ございませんでした。

イベントの資料

昨日はお越しくださいましてありがとうございました。
終了後、いろいろご質問いただきましたので、スライドを公開しておきます。プレゼン時間の半分以上はアプリケーションを使ったデモンストレーションだったので、資料の一つでしかありませんが‥

■当日使用したスライドをPDFに変換したもの；
［sakai_cssnite.pdf］

■当日使用したスライドのバージョンアップ版
ワークフローなどの画面数が増えています
Keynote 3の形式です［sakai_cssnite.key.sit］

本日の講演

■講演テーマ：
「CSSデザインを自動化するための7つのルール」

●CSSデザイン・デモンストレーションで使用するアプリケーション

• プロトタイプ作成（カスタマイズ）：RapidWeaver [ J ]
• アセット管理ツール：Portfolio
• 自動処理ユーティリティ：QuicKeys
• CSS専用エディタ：CSSEdit

●関連するアプリケーション
（デモでは使用しません）

• Adobe Dreamweaver 8
• Adobe GoLive
• Aptana
• Style Master
• Sandvox
• iWeb
• GoodPage
• OmniGraffle

CSS Nite LP, Disk 1のお知らせ［5］

■講演テーマ：
「CSSデザインを自動化するための7つのルール」

プレゼンテーション・テーマに関連したお話を音声で配信しています。当日はPCを使ったデモが中心となりますので、深いお話はPodcastで（※もちろん聴かなくても大丈夫です、デモで完結していますので）。

第３回「当日のプレゼンテーション（デモ）内容について」
10月9日（土）配信（11分／MP3）

「商業デザインとビジネス（＆自然の秩序とデザイン）」については講演後、音声雑記にて配信します（イベントで話す内容をそのまま録音してしまいました）。

CSS Nite LP, Disk 1のお知らせ［4］

■講演テーマ：
「CSSデザインを自動化するための7つのルール」

プレゼンテーション・テーマに関連したお話を音声で配信しています。当日はPCを使ったデモが中心となりますので、深いお話はPodcastで（※もちろん聴かなくても大丈夫です、デモで完結していますので）。

※ボイスレコーダーから音声データをPCに転送できない場合が多い（故障か？）ため、今回も音声起こしでテキスト化するかもしれません。ただ、作業量が5倍くらいになるので可能な限りPodcast！（ボイスレコーダーの故障だった場合は買い替える予定）

第3回（最終回）は、当日おこなうデモンストレーションについてお話したいと思います。
また、執筆した本（発売日、詳細については公開されていません）についても簡単にお知らせいたします。CSSプランブックというのは、例えば‥こんな感じです‥と紹介するための本です。

第３回「商業デザインとビジネス（＆自然の秩序とデザイン）」
10月6日（金）配信

・テーブルレイアウトが自動化されて変わったこと
・画像分割（スライスイメージ）機能が搭載されて変わったこと
・HTMLを記述しないデザイナーに支えられていたワークフロー
・現在のCSSデザインはエディタによる手作業
・CSS「支援」ツールから「自動化」ツールへ
・実装工程の均一化と新たな価値
・「センスが良い」と評価されるデザインはどうやって生み出されるのか？
・当日のプレゼンテーション（デモ）内容について

■過去の配信：
第０回「イベント告知」
9月9日（土）配信（10分／MP3）

第１回「コンピュータが登場する前のデザイナー」
9月10日（日）配信（15分／MP3）

デジタルデザインの歴史は「手作業」をシミュレートしてきた自動化の歴史／今まで習得してきた技術、道具が必要なくなってしまった！／デジタル化されて作業が減ったのは最初だけ、手作業のときより忙しくなった

第２回「デザイン作業の自動化を意識するきっかけ」
10月2日（月）配信（音声データからテキスト化）

・自動化されない（しにくい）仕事／効率化できない（しにくい）仕事
／人間マクロ（同じ作業の繰り返し）は辛いけど改善できない／デザインアプリケーションソフトウェアと技

Podcastのテキスト版

■講演テーマ：
「CSSデザインを自動化するための7つのルール」

＜CSSデザイン自動化の話題に至までの（12、3年分の）長〜いお話＞

第２回「センス・感性とは？　自然の秩序とデザイン」
Podcast（MP3）のテキスト版：

［1］絵描きさんと自動処理

フロリダのディズニーワールドへ行ったときの話。

Pleasure Island（プレジャーアイランド）って知っていますか？
大人の遊び場なので、18歳未満は保護者同伴じゃないと入ることができません（たしか午後7時以降）。旅行者はパスポートを見せることになります。飲酒OK、クラブもあります。ただ、ディズニーワールドですから私服警備員がたくさん！（私はクラブ内で「サングラス取れ」と言われてしまいました。怪しかったのか？未だに理由がよくわからん‥）

通りには似顔絵を描いてくれる人たちがいます。よく見る風景ですが、ここはちょっと違います。パソコン（＋タブレット）を使って描くのです。

同行した知人が描いてもらうことになり、後ろで見学していました。
タブレットを使っているので、基本的には紙にペンで描く様子と変わらないのですが、時々瞬間的に絵が変化する。「ん、なんだ？」という感じです。みるみる絵ができ上がっていくのですが、何かおかしいんですね。

何が起こっているのだろうと思って、絵描きさんの背後に（まるで守護霊のように）立って、ジッと観察していたら理由がわかりました。部分的に作業を記録していて、必要に応じて実行していたのです。使っていたのは「Quickeys」というユーティリティソフト。実は私も使っていたので、すぐわかりました。

似顔絵を描くというのは完全にアナログちっくな「手作業」なんですが、「パソコンを使って」描いているというのがポイントでしょうね。手描きをプログラムによって実行させているペイントソフトウェアには、ハンドワークでは真似のできない機能がたくさんあって、描く作業を「支援」してくれます。

「支援」だけではなくて、ほんの少しだけど「自動化」してくれる工程もある。ここの絵描きさんたちは、タブレットを使ったハンドワークと「Quickeys」による自動処理を巧みに使い分けていたんですね。
絵のクオリティを落とさず、短時間で仕上げるシステムだったわけです。まぁ、なんといってもお客さんの数でその日の稼ぎが決まるわけですから。

［2］クリエーターの負担、もう限界！

この頃はまだPhotoshopにアクションが搭載されていなかったので、「Quickeys」を使っていました。やることは単純な作業の繰り返しで、例えば「ある画像をガイドラインに記載されているサイズにトリミングして、指定したフォーマットで書き出し、管理用のフォルダに移動させる」といったルーチンワークを自動処理していました。

ディズニー・プレジャーアイランドにいた絵描きさんのワークフローに影響を受けてしまってからは、もっとうまく活用できないか考えるようになりました。ちょうど、マルチメディアブームの頃でCD-ROMコンテンツの企画をたくさん手掛けていたので、強引に試してみることにしたんですね。

マルチメディアクリエーター（死語？）なんて、この頃「突然登場した職業」で、元はグラフィックデザイナーやっていた人が多かったような気がします。あと、エディトリアルをやっていた人、映像やっていた人、カメラマンから転身した人もいました。
つまり、ビジュアル系の人が多かったんですね。

マルチメディアクリエーター（死語？）の仕事はほんと大変で、グラフィックだけではなくインターフェイスデザイン、スクリプティング、アニメーション演出、サウンドからビデオ、おまけにCD-ROMマスター焼きまでやっている人もいて、午前中、スタジオに行くと「キャンプ場」のようでした（寝袋でお休みになっているという状況）。
まぁ、現在のWebクリエーターという職業はもっと大変なのかもしれませんが‥

クリエーターの方々はとてもアンテナが高く、新しい情報に敏感だったので最新のテクノロジーを積極的に仕事に取り込んでいました。情熱的でワクワクしながら作業している様子が伝わってきましたが、疲労は必ず蓄積されていくもの。一気に落ち込んだり、判断力が鈍って本来の力を発揮できないという場面も目にしていました。

企画に参加していた某スタジオのプロデューサーが‥

「こんな状態が続くのはよくないね。そろそろ分業体制に移行していく時期かな」

とぼやいていたのですが、どうやって役割分担するか悩んでいて、とりあえずプロジェクトチームを結成。私もお手伝いすることになったんです。当時は学校の先生だったので、学生数名を引き連れてチームに参加しながら進めることにしました。
私の頭の中に「自動処理」のアイディアがあったのは言うまでもありません。

［3］自動化は想像以上に大変だった

制作現場ではたくさんのアプリケーションソフトが使われていました。まぁ、マルチメディア（死語）ってくらいですから、扱うデータの種類と同じくらいのソフトを必要としたわけです。

まず、実験的にアプリケーションソフト間のデータ変換を自動化することにしました。当時は同じ会社のソフトでも連携がとれていなくて、（何度も何度も‥）ファイルを開いたり閉じたり、クリエーターが機械的な作業もやっていたのです。

作業を分解して分かったのですが、こういう機械的な作業はたくさんあり、使っている時間も無視できないほど。つまり、効率化できる工程は想像以上に多かったということですね。
こうやって書くと、「機械的な作業の繰り返しはQuickeysで自動処理して〜」みたいな感じで、容易にいけそうな感じですが、実際はそんな簡単なものではありませんでした。自動化の作業が大変というよりも、なんというか‥人間をもっと勉強する必要があった‥ということです。

はっきり言うと、クリエーターさんが使いたがらない。
自動変換の仕組みを紹介すると「これは便利ですね」と言いつつ、忙しくなってくると「使うの面倒だから手でやります」となる。

プロデューサーから一言、「クリエーターの心理がわかってないね」と。
「ワークフローもでき上がってないのに、突然、新しいツールを渡してもダメだよ。どんなに便利なものでも後回しになる。とりあえず、役割分担を定義していこうよ。役割が曖昧で感覚的な作業環境に自動化のプロセスは入れにくいから。」

プロデューサー曰く、今後アプリケーションソフトの会社は「ソフト間の連携」を売りにしてくるという話。
1人に何本も買わせるというより、チーム作業で使えるようにするのが狙いだと。この頃は同じ開発会社なのにソフトごとにインターフェイスが違ってましたから、まぁ「そうなれば良いなぁ」という感じで聞いてました。

［4］どの作業にどのくらいの時間が必要か？

私は学校で教えていたこともあって、アプリケーションソフトの機能を基準としたデザイン思考には注意せよ！という立場をとっていました。本来の作業ではない部分（前述したデータ変換など）に時間をとられて、提出するデザイン案が減ってしまうのは問題というわけです。

○「デザイン案、6つくらい出してくださいね」

後日、

△「すみません、時間が足りなくて2案しかできませんでした」

○「クライアントとの意見交換で2案というのはマズイよ。何をやっていたの？」

△「いやぁ、扱うファイルが多いのでデータ変換に時間かかってしまいまして」

○「デザイナーが本来やるべき仕事って何なのかなぁ〜」

△「そんなこと言われましても。いろいろやることがあるんです。」

上記のような情景を目撃するたびに、（授業できちんと提示するためにも）デザインの作業区分について勉強しないといけないなぁと痛感していました。

その後、アプリケーションソフトの連携機能はどんどん進化して、ソフト側で簡単に処理できるようになっていったわけですが、楽になるのは最初だけ。今まで大変だった作業が自動化されると、クライアントからの要求も上がっていきます。さらに、10万円が相場だった作業に対して「3万円でやります」という人が出てくるのも、こういうタイミングです。
つまり、自動化されても「楽にはならない」

「楽にはならない」けど、大きなメリットが得られるのは間違いない。
本来やらなくていけないクリエイティブな作業で忙しいならOKということですね。

※長文なので新規エントリーへ

CSS Nite LP, Disk 1のお知らせ［3］

■講演テーマ：
「CSSデザインを自動化するための7つのルール」

プレゼンテーション・テーマに関連したお話を音声で配信しています。当日はPCを使ったデモが中心となりますので、深いお話はPodcastで（※もちろん聴かなくても大丈夫です、デモで完結していますので）。

■Podcasting：
第２回「センス・感性とは？　自然の秩序とデザイン」
10月2日（月）配信

・自動化されない（しにくい）仕事
・効率化できない（しにくい）仕事
・人間マクロ（同じ作業の繰り返し）は辛いけど改善できない
・デザインアプリケーションソフトウェアと技
・「センスが良い」と評価されるデザインはどうやって生み出されるのか？
・デザイナーの仕事を分解

第３回「商業デザインとビジネス」
10月6日（金）配信

・テーブルレイアウトが自動化されて変わったこと
・画像分割（スライスイメージ）機能が搭載されて変わったこと
・HTMLを記述しないデザイナーに支えられていたワークフロー
・現在のCSSデザインはエディタによる手作業
・CSS「支援」ツールから「自動化」ツールへ
・実装工程の均一化と新たな価値
・当日のプレゼンテーション（デモ）内容について

■過去の配信：
第０回「イベント告知」
9月9日（土）配信（10分／MP3）

第１回「コンピュータが登場する前のデザイナー」
9月10日（日）配信（15分／MP3）

デジタルデザインの歴史は「手作業」をシミュレートしてきた自動化の歴史／今まで習得してきた技術、道具が必要なくなってしまった！／デジタル化されて作業が減ったのは最初だけ、手作業のときより忙しくなった

CSS Nite LP, Disk 1のお知らせ［2］

講演テーマ：
「CSSデザインを自動化するための7つのルール」

当日のプレゼンテーション・テーマに関連したお話を音声で配信していきます（不定期）。音声雑記ブログにて雑談テイストで‥
［このイベントに関するエントリーはCSS Nite LPカテゴリにまとめています］

Podcasting：
第０回「イベント告知」
9/9配信（10分／MP3）

第１回「コンピュータが登場する前のデザイナー」
9/10配信（15分／MP3）

デジタルデザインの歴史は「手作業」をシミュレートしてきた自動化の歴史／今まで習得してきた技術、道具が必要なくなってしまった！／デジタル化されて作業が減ったのは最初だけ、手作業のときより忙しくなった

第２回「センス・感性とは？　自然の秩序とデザイン」

デザインアプリケーションソフトウェアと技／「センスが良い」と評価されるデザインはどうやって生み出されるのか？／デザイナーの仕事を分解

第３回「商業デザインとビジネス」

CSS Nite LP, Disk 1のお知らせ［1］

CSS Niteの有料版「CSS Nite LP, Disk 1」が10月10日開催されます。私も主演させていただくことになりました。同時期に出版されるWebデザイン本からCSSに関連する内容を抜粋、拡張したテーマでお話したいと思います。
イベントの詳細については公式サイトをご覧ください。

講演テーマ：
「CSSデザインを自動化するための7つのルール」

デザイン作業にもPCが使われるようになって18年。新しいデザイン・アプリケーションソフトが登場する度に、作業の一部が自動化されてきました。DTP、オーサリング、Webなど、過去を振り返ると「デザイン自動化」の歴史がみえてきます。

tableタグを利用したグリッドレイアウトが流行ったとき、デザイナーは複雑な入れ子タグを手作業で記述していました。後にCyberStudioやDreamweaverなどのメジャーソフトがテーブルレイアウト機能を搭載し、作業の大半を自動化します。直感的なレイアウトワークが実現してからは利用者も一気に増え、デザイン論やテクニック、メリット・デメリットの議論などが活発化していきます。

現在、やっと定着してきたCSSデザインはまだ「手作業」の段階です。Dreamweaverなども支援ツールの提供にとどまっており、直感的な作業は困難です。このような過渡期、デザイナーは膨大な作業量をこなすことになります。tableタグのグリッドレイアウト作業も自動化されるまでは、複雑化によってデザイナーに大きな負担がかかっていました。それこそ、徹夜が当たり前の日々を送っていたのです。

過去の歴史をみれば、CSSデザイン・ワークフローの一部が自動化されるのは間近のように思えます。このセミナーでは「CSSデザインを自動化するための7つのルール」と題して、新しいワークフローを少しだけ先取りしてみたいと思います。