新しい本

11月下旬発売

CSSを習得するための本ではなく、CSSの解説書でもなく、Web標準の啓蒙書でもない‥実験的なデザイン本です。長〜いPodcast（60分）を発売日に配信します。CSSルール・サンプルのサイトも同日に公開されます。

その他、最後のわがまま‥ワークフロー本は年内発売予定。

plan book［メモ］No.2

7 rule x 7layer ［ plan 49 ］
Webデザイン（プロトタイピング・モデル）49個の部品
LEGOとPost-itで構築する積み上げ型プロトタイプ（教育デザイナー向けカリキュラム／※パソコンは使用しません／2007年受講者募集）

plan book［メモ］

Dreamweaver 8 アイディアノート

アイディアノートの配布を終了しました。

コアデータを消失してしまったのでコピー不可能になってしまいました。ネットにも上がっておらず‥。まぁ、書籍では扱えないマニアックなテーマを同人誌感覚でパッケージにするというのが趣旨だったので、その試みには意味がありました。（もうテーマが古いのであまり見てほしくない‥という思いも多々あり‥）

尚、当初は同人誌サイトのサービスを利用して販売する予定でしたが、少々の違和感があり、「勝手にダウンロードしてください」という形に変更していました。

過去の記録（の残骸）：
Dreamweaver 8 アイディアノートCD-ROM [6]
Dreamweaver 8 アイディアノートCD-ROM [4]
Dreamweaver 8 アイディアノートCD-ROM [2]
Dreamweaver 8 アイディアノートCD-ROM [1]

関係者の皆様へ

各プロジェクト、教育関連の作業、書籍執筆などのスケジュール調整を進めております。本日午前中に順次メールをお送り致します。研究会（common style）および各勉強会は11月に変更することで調整中です。

※携帯電話の番号が変更されています
（今まで使用していた番号は停止しています）
※メールはすべて送受信可能になっています
（アドレス「f」が確実です）
※プロジェクト用のクローズドネットは停止中
※作業用サイトも一部停止していますが設定変更完了後、再開します（IDが変わりますのでメールにてお知らせします）

デジタルカメラで撮るノスタルジーと既視感

カメラ散歩「千葉県房総半島」

すでに2ヵ月も経ってしまいましたが、フィールドワークで撮った皆さんの写真をダウンロードできるようにしておきました。過去のメールを失ってしまったので、漏れがあると思います。ここでもお知らせしておきます。

このフィールドワークは、

デジタルデザインにどっぷり浸かっている人はアプリケーションソフトの機能主義に陥りやすいので、たまには「拾い」や「スケッチ」もやりましょう。

〜というのが趣旨でした。以下、再録。

・写真で表現する既視感（デジャビュ）は「共通体験」が鍵となる
・人が感じる「イメージ」
・なんとなく欲しくなるポストカードの写真（衝動買いの心理１）
・ジャケットの写真で買うレコード（衝動買いの心理２）
・スペックよりもイメージを優先する人（例；車などの高額商品であっても、乗り心地や安全性、燃費などよりフォルムがカッコイイから買うという判断がある）
・写真集というパッケージの魅力
・月に1回はパソコンとネット、ケータイを捨て、イメージクリエイションを実行してみよう！

カメラ散歩、12月もやります。着込んで歩きましょう。

業務連絡

以下の研究会は、資料データの再調査が必要になりましたので、延期することになりました。
（変更日のメールお送り致しました）

■common style.
「講義の無料配信によって得られるもの、失われるもの」
「学校が（学生にとって、先生にとって）魅力的な”場”として機能するには」

■教育デザイナー育成（準備会）
「専門および分野をつくらない俯瞰教育」
「教育デザイナーを育成するためのプラン」

イベント後の質疑応答［再録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）

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

Web本の執筆メモ［EX-001］

web design magazine RWaCe

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日（月）配信（音声データからテキスト化）

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

Web本の執筆メモ［R-017］

Webデザイン
レイアウト・ビルダー（コンストラクションキット）

●過去の執筆メモ：
［制作日記（不定期更新中）］
BOOK-V ［V-001, V-002, V-003, V-004, V-005, V-006, V-007, V-008, V-009, V-010, V-011, V-012］
BOOK-R ［R-001, R-002, R-003, R-004, R-005, R-006, R-007, R-008, R-009, R-010, R-011, R-012, R-013, R-014, R-015, R-016］

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ということですね。

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