common style meeting「ロールモデルとデザイナー」

本日、会場に行けないため‥Skypeによる発表になってしまいましたが、よろしくお願い致します。時間は30分程度です。尚、音声は収録して（音声ブログの方で）Podcastingいたします。

ロールモデルについて考えてもらうため、デザイナー50人を選出しました。
経営者向けの講座とは明確に線引きするため、現役で（プレーヤーとして）活躍していることを条件に選んでいます。

以下、ネット上の動画で見られる人たちだけ紹介しておきます。
BS朝日「追跡！フロントランナー」より〜
バックナンバーには、工業デザイナー川崎和男さんの映像もあります。

日本庭園デザイナー
枡野俊明(ますの・しゅんみょう）さん

「群言堂」デザイナー
松場登美（まつば・とみ）さん

工業デザイナー
奥山清行（おくやま・きよゆき）さん

ウェブ関連教育/会議メモ（common style）

common style リニューアル中のため、こちらにも議事録（PDF）と会議メモをアップしておきます。
今週は、まだカンズメ状態でホテルから出られません（すべては私の責任でありますが‥）。リニューアルプランは、9月中旬を予定。

2008年度のウェブ関連教育について：

レポート：
DTP業界における分業化の流れ（DTPデザイナー職からデザイナーとオペレータに分かれていった経緯）を20年間のタイムラインを見ながら紹介しました。
※タイムラインは、Adobe Illustrator 88（1988年）リリースの前年からスタートしています。

過去の講座：
1998年に始まった「ホームページ概論」、「ウェブクリエーター講座」は、2000年に入ってディベロップメント系の講座を設けて分業を前提としたカリキュラムに修正しました。2005年頃から（同じ職種でも要求されるスキルが大きく異なるなど）求人情報に大きな変化が出てきました。
多くの企業からテクノロジースキル（HTML、CSS等）や情報デザインだけではなく、視覚表現の基礎となるグラフィックデザインやエディトリアルデザインなどの教育要望をいただいています。

現状：
Web業界は（※今のところ）他分野と同様の道のりを歩んでおり、教養主義的な流れに入ってきました。2000年以降、業界に関わるようになった若い人たちが他分野の概念やノウハウをWeb制作に取り込み始めたことも強く影響しています。
多種多様なスキルを要求されるのはしかたのないことです。ただし、体系化できないと教育プランは作成できませんので、先行している海外の学校を参考にまとめ、「ウェブデザイナー」から「ウェブ」を取り、ベーシックデザインの教育と情報デザインの教育を分けることにしました。

図で示されている「Front-End Architect」（米国の事例エデュケーションプランを参照）が、情報構築から視覚表現への展開を担う役割であり、多種多様なスキルが要求されていたウェブデザイナーを情報デザイン寄りに専門化したものです。
尚、この呼び方は日本では理解されにくいため、教育プラン・ドキュメント内の使用にとどめます。

---

「Wildbit　Our team at glance」

Webデザイナーのためのレジュメビデオ入門

こちらもかなり遅れてしまいましたが、当日の記録を掲載しておきます。
（2007.8.23）

テーマ：セルフプロデュース
デザイナーは、エージェントと契約するとVideo Resumeを作らないといけません。このビデオはエージェントスタッフが営業用のツールとして使います。単なるポートフォリオではなく、音楽アーティストにおけるPVのような機能を持たせます。最近はYouTubeの利用などが増えてきましたが、DVDは必ず用意する必要があります。
今回は、海外の事例をみながら学習し、実際にVideo Resumeを作成してみましょう。

Video Resumeを作成する過程で、自分の職業を俯瞰することができます。「やりたいこと（理想）」「やるべきこと（現実）」「実際にやれること（実力）」など、ぼんやりしていたことが見えてくるでしょう。

Video Resumeの構成 15:00

1. アイスブレーク 00:30
2. プロフィール（簡単な自己紹介）01:00
3. トラックレコード（今までの実績）05:00
4. バリュー（最も得意とする作業）06:00
5. スピリッツ（仕事に対する信念）02:00
6. ワンフレーズ（最後に一言、印象に残る言葉）00:30

※バリューパートでは必ず自分の「作業シーン（コーディングしながら話す）」をベースに組み立てること
※テロップによる解説は避け、ホワイトボードなどを使うこと

参考：プレゼンテーションビデオ

ボディランゲージモデル
（オーバーアクション効果）
Innovation at Google
Presentation by Google CIO Douglas Merrill on Innovation at Google

クラスルームモデル
（ホワイトボードを使った動的な演出）
What is Web 2.0?
It's one of the biggest buzzwords out there, but what exactly does it mean? Andy Gutmans of Zend defines Web 2.0 and explains how it's changing the face of the Internet.

スタンダードモデル
（標準的な速度と目線）
Videos of the Week (Vol. 11): XHTML
Learn about XHTML, a language in which webpages are written!

スクリーン連動モデル
（斜め座り＆流し目／カット割り）
NeXTSTEP Release 3 Demo
Steve Jobs demoing the NEXT operating system. Many of the features shown here are now in Macintosh OSX.

---

参考：Webプロダクションのレジュメビデオ
GOING INTERACTIVE
Recruiting a Web Developer

---

サブテーマ：
自分のスキルを目に見えるかたちにする
「Webデザイナーのパーソナル・レコーディング」
自分の作業を記録して公開することのメリット

Creating Snazzy Message Boxes

CSS Tutorial // Div Layers, Classes

Introduction to CSS editing using Firebug

小さな白板だけで進行
SGML, XML and HTML Part 2

勉強会：タイポグラフィの技（再）

もう、かなり月日が経ってしまいましたが当日使用した資料をアップロードしました。恥ずかしいので、私が作成した書体は非公開。

「自分のオリジナルフォントを作成しよう！」PDF

参考：
2004年9月26日「ページ記述言語の衝撃」

書体つくりは、言語の歴史にふれながら「形」の連続性について考える良いきっかけになるでしょう。専門性は多少薄めて、また開催したいと思います

講演の補足：fixed elastic layoutとオプション価格（再）

追記（8/22 PM17:58）：

• IEがバージョン8でOperaのようなイメージズームレンダリングを実装すれば、現在のページズーム問題は解決（Flash問題も解決）する‥計算可能性の範疇
• 社内のアクセシビリティ指針が先取り価格にどう反映されているのか追記
• 議論のファーストロケットは「テキストズームはもはや欠陥機能」という発言だった

補足：

積極的に売り込まない「fixed elastic layout」がオプションにもかかわらず、採用されているのはなぜ？

制作会社のオプション価格について：

ワイドスクリーン＆ページズーム対策については、海外の動向をみてください（2、3年先のことかもしれませんが、すでにノウハウが蓄積されています）。講演で紹介したサイトも参考に。

• みずほ証券
• IKEA

em moduleについて（補足）

• em moduleによるoverrideを可能にする
• em moduleは常にreplasableである
• em moduleを外し、いつでも「fixed layout」もしくは「fluid layout」に戻せるようにする

IKEAのfixed elastic layout

discount priceの理由：
（どうやらFlash問題も解決したようです
著名なクリエーターが取り上げないかぎり、日の目を見ない話題です。RSSを取得して、関連情報に注視してください。

講演「暗黙知とイノベーション」（再）

このブログにはあまり関係のない企業セミナーなので告知のみ（‥といっても申し込み受付は終了？したらしい）。
久々に本業の肩書きでいきます。

テーマ「暗黙知とイノベーション」

• 難解な概念にカタチを与える人
• ビジョナリーは「たとえ話」に長けている
• 世界の「ことわざ」
• 暗喩「メタファー」と類推「アナロジー」
• 状況意味論
• 情報活用術と思考停止の関係（過度な情報収集が思考停止につながる理由）
• インターネットは「海」ではなく「プール」
• アフリカのネット普及率430%
• 未開拓市場「ブルーオーシャンの海」
• 企業研究：DOUGALL DESIGN
• ネットでつなぎリアルでまわす
• アートは芸術にかぎらない「ビジネス界のアーティストたち」

補足：Flash CS3アニメ塾「4つの技で作るアニメーション」

先ほどのエントリーの補足：
4年前の技法ですが、古びていませんので取り上げておきたいと思います。

「10k-noise」 2003年版
「適用例（DVDに使用した画面）」 2003年版

• running shy（見切り）
• motion blur（モーション・ブラー）
• vibration（振動の演出）　→この技法のB応用で作成できます
• screen composition（画面割り）

Flash CS3アニメ塾「4つの技で作るアニメーション」

昨年から予定されていた「Flatmotion ワークショップ」ですが、今月は原稿執筆の「超」追い込みで、時間確保できず（すべては私の責任‥）。10月に延期させてください。

今回、皆さんに作成してもらうFlatmotionは3年前、某クラブのライブで作ったものです。このときは60分以上かかりましたが、Flash CS3だと半分くらいの時間でオーサリングできると思います。

• 参加者のみなさんに作成してもらう作品
• 途中、（背景だけが表示されている）間がありますが再生は続きますので、1回ループするまで見てください
• 上記のページでデータをダウンロードできますが（古いので）Flash CS3用のFlatmotionデータを用意します
• Flash CS3用のライブラリも用意します

ワークショップの目的：
Webデザインのワークショップと同じ方針です。まず、型稽古（技の習得）を徹底的に反復し、試合（実戦）を重ねることで個性・オリジナリティが生まれるという考え方です。
「センスや感性などを前提としない形式知化」を目指します。

今回、習得していただく「型（技）」

• running shy（見切り）
• motion blur（モーション・ブラー）
• vibration（振動の演出）
• screen composition（画面割り）

最初に実写ビデオ（スローモーション映像）を見て、技の原理を解説します。
また、写真週刊誌に掲載されている著名人の顔写真（ヘンな表情を選んでいる理由）を、例にしてアニメーションのコツをお話します。「マヌケな表情を一コマいれると、なぜ表情豊かなアニメーションになるのか」等。

「CSSデザインの型でみる視覚表現」スライド資料のダウンロード

8月10日、六本木ヒルズにて開催されたイベント「D2」にご来場いただきまして、ありがとうございました（会場は、ほぼ満席でした）。

SESSIONで使用したスライド資料のダウンロードは、当日会場で配布されたプリントに記載されていると思いますので、ご確認ください。

私の講演（SESSION 5）のiPod用変換データ（360x270px）はここでダウンロードできます。
［Session5_CSS_20070810.zip］12.4MB
※データが欠けていました。PM20:00のアップロードが最新

※参照リンクは機能しませんので、あくまでダイジェスト版としてご利用ください。講演の内容を確認する場合は、（公式サイトから）PDF版をダウンロードしてください。
※PDF版のスライドは410枚ありますので、少々データサイズが大きくなっています。

---

iPodでスライドを見る場合は、iTunesの同期が便利です。

「CSSデザインの歴史」スライド資料のダウンロード

8月10日（金）の講演スライド資料の一部（CSSデザインの歴史）をダウンロードできるようにしました。音声を聞かないと意味不明の部分もありますが‥

当日の講演時間は60分ですが、CSSデザインの歴史についてはイントロダクションとして5分くらいでサラッ話します。残り50分ちかくはCSSの視覚表現についての話ですが、過去の経緯を知っておくと、より理解が深まると思います。

スライド資料（CSSデザインの歴史のみ）
PDF［session5_intro.zip］

尚、当日使用したスライド資料については、イベント終了後に運営事務局より（ダウンロード用IDなどの）お知らせがあると思います。

それでは、六本木でお会いいたしましょう。