Web本の執筆メモ［V-010］

CSSコンポジション・モジュール・サンプル

●過去の執筆メモ：
［V-001］［V-002］［V-003］［V-004］［V-005］［V-006］［V-007］［V-008］［V-009］
［R-001］［R-002］
［制作日記（2006.8.21-start）］

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つのルール」と題して、新しいワークフローを少しだけ先取りしてみたいと思います。

アックゼロヨン・セミナー2006 Vol.3

30日（水）、アックゼロヨンの第3回セミナーが開催されます（無料／事前登録）。
株式会社ビジネス・アーキテクツのウェブ制作のアプローチについて講演されます。座席分はすでに埋まっているようですが、まだ申し込みを受け付けておりますので、ご都合のよい方は是非ご参加ください。
尚、イベントの詳細は公式サイトをご覧ください。

プレゼンタ：
森田 雄、佐藤 伸哉、青木 誠、茂出木 龍太（株式会社ビジネス・アーキテクツ）

一部「わたしたちについて」森田 雄
二部「大規模サイトにおける全体構造設計」佐藤 伸哉
三部「伝達するということ」青木 誠・茂出木 龍太

Web本の執筆メモ［V-009］

CSSデザインのルール化：
64パターンでビジュアルデザインの自動化（エレメントの置換えでバリエーションをデータベース化）

人に訴えるビジュアルを分類してみる
・ポストカードの魅力
・CDジャケット、レコードジャケットの魅力
・ファッションマガジンの魅力
・グッズの魅力

「理由はわからないが、なんとなく欲しくなるデザイン」を考察、自然の中にある形、色、配置についてまとめる

●過去の執筆メモ：
［V-001］［V-002］［V-003］［V-004］［V-005］［V-006］［V-007］［V-008］
［R-001］［R-002］
［制作日記（2006.8.21-start）］

Web本の執筆メモ［V-008］

ウェブデザイン・オーサリングツールの開発仕様書カバーとPART扉のビジュアルサンプル

●過去の執筆メモ：
［V-001］［V-002］［V-003］［V-004］［V-005］［V-006］［V-007］
［R-001］［R-002］
［制作日記（2006.8.21-start）］

Web本の執筆メモ［V-007］

「トップページを起点とした階層構造」が前提の旧ページデザインから、SFO（Search, Find & Obtain）およびRSS対応の「ページ単位」ユーザビリティへ。米国のNew York Timesを事例として検証する。
モダンパブリッシャーLPOプラグインに反映できるか模索してみる。

●過去の執筆メモ：
［V-001］［V-002］［V-003］［V-004］［V-005］［V-006］
［R-001］［R-002］
［制作日記（2006.8.21-start）］

Web本の制作日記について

現在、VOXにて更新中

サービスのフィードバックを兼ねて、試用している。ミクシィとブログをつなぐミディアムサービスを探していたので、利用してみようという動機になった。［mixi　←→　vox　←→　blog］という構造になるので（あくまで私の場合は‥）ブログと同時に活用することで利便性が高まる。特に注目したのは公開レベルの機能である。

●記事ごとに公開のレベルを設定できる

レベル1
［myself］自分だけ
レベル2
［Family］家族のみ
レベル3
［Friends］友人のみ
レベル4
［Friends & Family］家族と友人
レベル5
［Friends,Family,Friends & Family,Neighborhood］パブリック

学校全体がコミュニティとして、ある先生のブログで例えるなら‥

・記事Aを閲覧できるのは「学校全体」、コメントできるのは「全生徒と先生」
・記事Bを閲覧できるのは「学校全体」、コメントできるのは「Aクラスの生徒」のみ
・記事Cを閲覧できるのは「Aクラスの生徒」、コメントは誰からも受け付けない
・記事Dを閲覧できるのは「本人だけ」

等々、記事の公開とコメント許可を複数のプライオリティで自由に組める。
‥という例でいいのかな？
（3日前から利用し始めた初心者なので‥

一般のブログサービスと比較した場合、とてもシンプルに感じてしまうが、用途がSNS寄りなので‥意外と洗練されているのかもしれない。

Web本の執筆メモ［V-006］

CSSデザインの上流工程となるページビルディング・プロセスの自動化を試す。
昨年MdNさんのweb creatorsで紹介したネタを素材として使用してみる。手作業を分解して、12のパターンでオートメーション化。商店街の総合サイトとして売り込むパッケージを想定、可能性を探ってみる。可能なら事例としてまとめる。

●過去の執筆メモ：
［V-001］［V-002］［V-003］［V-004］［V-005］
［R-001］［R-002］

Web本の執筆メモ［diary-002］

Web本の制作日記は、Six ApartのVOXを使うことに（mixiお知り合いの皆さんが早速Neighborsに追加してくれる）。しばらく試用してみよう。
このブログでは、引き続き執筆メモのアップをしていきたい。

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

1週間ほど、Web本の制作日記‥始めてみよう

●過去の執筆メモ：
［V-001］［V-002］［V-003］［V-004］［V-005］
［R-001］［R-002］

近況報告、Webサービスと法律

8月21日（月）晴れ
朝6時の気温24度。先週末から半島の最南端に滞在中。

今週はプロジェクト2本と書籍の執筆に集中するため、ほぼ合宿状態となる。潮風と波の音は体を癒してくれるが、夜8時になるとすべての店が閉まり、真っ暗となる（とにかく夜が早い）。もちろん、コンビニもない。浜には若者も来ない。だから花火も上がらない。静寂。

さらに駅まで徒歩70分である。（そう簡単に脱出できないように‥）車を使わなかったので、ほんとに歩くしかない。街への買い出しは1回。
雑談大好きの私が「たった一人で」小屋にこもって作業。精神的に耐えられるか、若干不安もある。ただ、短期的にでも、こんなワークスタイルが可能になるのは、インターネットのおかげである。作業環境においては東京でも北海道でも沖縄でも、どこにいても支障なし。

2011年の停波まであと5年、政府は「ブロードバンドゼロ地域解消」を決めた。半島でも、電信柱にのぼって工事している光景をよく目にする。電信柱（NTT）、電柱（電力会社）どちらも賑やかである。

日本全国のブロードバンド化が完了すると、今まで困難だったサービスも可能になる。ただ、実際はそう簡単ではない。問題は「法律」だ。通信、放送の関連法は9本に分かれている、いわゆる縦割りの法体系。
いくら有効なアイディアがあっても、そう簡単に事業展開できないのである。Webの関連会社でも法律家と連携して、プロジェクトを進めているという状況だ。2010年までは法改正に最大の関心を払う必要がある。

●スパムメール
お盆休み中は、なぜか「激減」。スパムもお盆休みなのだろうか？

●書籍
3冊、平行して進行中。2冊は「10月中の発売！」と言い切ってしまう‥
本の執筆メモは引き続き、更新。

情報デザイン「effect vol.1」

Keynote 3で作ったビデオコンテンツ、映像ブログにて配信。
1本40分弱あるので、2回に分けてアップロード。iTunesに登録している場合は自動的にダウンロードされる。手動でダウンロードする場合は、右クリックでメニューから（拡張子が「m4v」になっているので）

iPodでも視聴できるように文字大きめに調整、PSPでも視聴OK！
※PSPはシステムソフトウェアを2.80にアップデートする必要がある

・effect vol.1「編集と作為」前編（18:16）
・effect vol.1「編集と作為」後編（19:40）

・effect vol.2「流行の作り方」前編
・effect vol.2「流行の作り方」後編

なぜ、ビデオなのにKeynote 3を使ったのか、理由は昨夜の音声雑記にて

［file-185］オートメーション・ファクトリー

情報デザイン系講座の公開（8）最終回

このエントリーのシリーズも今回で終わり。
記録を見ながら振り返ってみる。

１）先週末、Keynote 3を初めてさわる
２）講座ビデオの編集が自分のマシンでは非常に重たく、作業困難であることに気付く
３）Keynote 3で講座ビデオを作ろうと考える

４）Keynote 3のコツがつかめず試行錯誤の連続
５）Appleの自動処理ワークフローにはまる
６）けっきょく火曜日の夜まで「お勉強」が続く

７）Keynote 3と自動処理の概念、ある程度理解する
８）水曜日の夕方から講座ビデオの作業再開
９）講座ビデオが完成する

講座ビデオを編集して映像ブログにアップするという目的が、いつの間にかKeynote 3の習得とApple自動処理ワークフローの研究にすり替わってしまった。仕事を圧迫しない程度の「趣味」ということで、なんとか自分を納得させた。

けっきょく、Keynote 3による編集作業はトータルで6〜8時間くらい。

●完成したビデオのデータ：
オーサリング：Keynote 3
公開形式：QuickTimeムービー（MPEG-4）
ビデオの時間：38分

さて、現在は「圧縮中」である。
‥というのは、iDVDに転送してしまったのだ。フルサイズ、最高品質で書き出されてしまった。これをiPodで見られるように変換中。H.264圧縮、恐ろしく時間がかかる‥

すべて自動処理なので、こちらは何もしなくてよいが、待ち時間が耐えられない。まぁ、ぼんやり待ってる必要はないので、仕事をする。打ち合わせもある。

圧縮完了後、アップロード予定。

CSS Nite Vol.11

17日（木）、アップルストア銀座で「CSS Nite」が開催されます。

日時：8月17日（木）19:00〜
場所：アップルストア銀座 3F Theater
金額：無料
申込み：事前登録不要
ゲスト：株式会社ロクナナの中村享介さん

第1部が中村享介さんのプレゼンテーション「優雅なWeb制作のためのテクニック」、第2部は鷹野さんの「クロスブラウザを実現するCSSファイル管理」です。
Webデザインにご興味のある方は、参考になると思いますので是非お越しください。

情報デザイン系講座の公開（7）

Keynoteの各スライドに音声ファイルをドラッグして完成。
ビデオ書き出しテストは、解像度とフレームレートを下げて実行（それでも30分ほど待たされた）。書き出されたQuickTimeムービー、なんと40分ぴったり。

しかし、40分のビデオを公開するのはちょっと厳しいと思うので、「10分×4本」もしくは「20分×2本」に分けよう。
ムービー書き出し（要するに圧縮）にかなり時間がかかると思うので、処理させたまま就寝‥

情報デザイン系講座の公開（6）

仕事の合間、細切れ時間を使いながら進めているが、なんとかVol.1は完成しそうだ。
Webデザイナー向け講座としては、あまり一般的ではない内容だが、とても重要なので外さず構成した。
とりあえず‥本日中にまた更新（多分これが最後）

情報デザイン系講座の公開（5）

「趣味の時間」が終わって、やっと‥講座ビデオの編集に入る。
講座ビデオの編集といっても、再利用するのは音声と一部の図版のみ。当初、権利処理をクリアしているシーンだけを編集しようと思っていたが、映像ソフトを使った作業は恐ろしくヘビーで私のマシンでは対応できない。

実は映像ブログで公開しているビデオは、320×240ピクセルのMPEG-4を素材にしているのだ。手順は以下の通りである。

１）ムービーカメラをメモリスティックビデオレコーダーに接続
２）録画する（形式：H.264 AVC QVGA 768k）
３）メモリスティックに記録されたビデオファイルをPCにコピー
４）QuickTime Proで編集
※オーバーラップ処理やテロップを入れる場合のみ映像ソフトを使用

参考：ビデオ編集も自動化

上記の方法だとiBookでも軽快、簡単にビデオを作成できる。画質、音質は映像ブログにアップされているビデオを見ていただきたい。劣化しているが、低画質でもない。

今回はKeynote 3を使うことで、さらに軽い作業になっている。もちろん、実写動画が少ないスライドで構成された映像だから適しているのだが。

ずいぶん横道にそれてしまったが、情報デザイン系講座‥多分、明日中には公開できるであろう。

情報デザイン系講座の公開（4）

昨夜、完全に「趣旨」がすり替わっていることに気付いたが、この勢いを重視した。
（「講座ビデオを編集してアップすること」が「Keynoteの習得」になってしまったことを許したのだ。仕事だったら大問題だが、趣味というのは「気持ちよさ」と「好奇心」で満たされるので、良しとする）

おかげで、Keynote 3の特性が理解できた。
‥というより「iLife」「iWork」というパッケージのターゲットについて再考するきっかけになった。ルール・イン・ルールの概念、標準化を（特定の場所で）さらに標準化する効用もメモしておいた。

パーソナルなコンテンツファクトリーにとって、自動処理はとても重要だが「Automator」のアプローチはとても難しい。この世界はブラックボックスでよいのかもしれない。

さて、そろそろ「趣味の時間」も終わりにして、仕事に完全復帰しなくてはならない。その前に、講座ムービーをアップする。
本日中にまた更新。

余談：
「Windows Live Writer」にモダンパブリッシャーの香りが‥

情報デザイン系講座の公開（3）

Keynote 3のコツがつかめてくる。
それより、Automatorの自動処理にはまってしまった。

「Keynote 3　→iMovie HD　→iDVD」のワークフローが出来つつある。今後の講座スライドをKeynote 3で作成しておけば（音声を貼り付ける作業は省けないが）、ビデオキャスティングも自動化される。圧縮、ビデオ書き出しの後、ブラウザを起動、MP4ファイルのアップロードまで自動処理してくれる。
映像表現はかなり制限されるが、編集作業が無くなるのは有り難い。

まずい、いつの間にか目的がすり替わっている‥
（仕事もあるので、続きは明日朝に‥）

iDVDに転送すると、チャプターとメニューが自動的に構築される

情報デザイン系講座の公開（2）

今回、まったく新しいワークフローを試しており、（初めて使う）Keynote 3に四苦八苦。まだコツがつかめていない。Keynoteでチャプター付きのDVDが簡単に作成できるのは驚きだ（iDVDに転送すると自動的にオーサリングされているのだ）。

Keynote 3を使うメリット：

・音声付きビデオで配布できる
・PDFで配布できる
・チャプター付きのDVDで配布できる

※Automatorでビデオ、PDF、DVDが自動処理される。この自動処理がポイントだ。書き出しの作業さえ手間がかからないので、ほんとに楽である。Windowsでこういうワークフローを”簡単に”構築するにはどうしたらよいのだろう？

ビデオで公開するのに、映像ソフトを使わないというのはFlash以来か。
夜までに終わらせる予定だが、ズレこむ可能性あり‥
本日中にもう1回更新。

情報デザイン系講座の公開

講座名：effect
配信日：8月14日（月）夜になります
ビデオ形式：QuickTimeムービー（MPEG4）
内容：対象を「一般向け」に変更して再編集
関連：講座編集についてのエントリー

近況報告、Webサイト評論家と芸能プロダクション

8月9日（水曜）台風7号
朝、気温24度である。昨日は23度だった（8月の気温とは思えない涼しさ）。
半島で仕事。本日まで。

・台風
只今「大雨、雷、強風、波浪、洪水」注意報発令中。お昼頃、7号が真上を通過するらしい。無風になったり、急に横殴りのすごい雨が降ったり、不安定。

・スパムメール
本日朝は、314通で少なめ。件名に「残暑お見舞い」が登場‥（開くと「セレブからのご指名です」だが）。日本のスパムメールは季節を感じさせてくれる。

・講座再編集
ここで告知していなかった‥。「情報デザイン」系の講座に決まったので、編集中である。諸事の理由から（権利関係）、すべてのビデオが使えないので半分くらいは新規になりそうだ。1週間程度で公開。

・YouTube
作家や評論家、ライターの方々（もちろん一部）が、YouTubeを重要な映像データベースとして評価、資料としてハードディスクにアーカイブし始めている‥という話を聞く。

・Webサイト評論家
以前、Webサイト評論家（←この職業については過去の音声雑記を参考に）が毎月、1、2台のハードディスクを買って、評価対象とするWebサイトを丸ごとアーカイブし続ける「一人Google」について取り上げた。例えば、「某企業の2000年春におこなった商品キャンペーンサイトは？」と検索した場合、すぐに全てのWeb情報（サイトデータだけではなく、公開期間や公開後の処置、業界の反応などの周辺データも含む）がハードディスクから取り出せるという環境を構築しているのだ。これをあと2年くらい続けてWebサイト評論家としてデビューしようという人たちが‥（割愛）

某評論家の仕事部屋に数千本のビデオ（テレビ番組の録画）が収納されていて驚いたことがある。この数千本のビデオが数百台のハードディスクになっているというイメージである。今のハードディスクはVHSテープより少々大きいくらいだから見た目もあまり変わらない。
毎月1、2台買っているといっても、250GBのハードディスクが6,000〜8,000円程度で買える時代だ。CDアルバムを月に2枚買うくらいの金額と考えれば、高くはない。次世代DVDだとコスト高で検索性も低下する可能性があるので、しばらくこの状態が続くのだろう。

一般ユーザーは「検索」、専門家は「アーカイブ＋α」という感じか‥。

Webサイト評論家（名前はダサいが‥要するに「公開されるWebサイトを日々検証し、歴史や最新トレンドにものすごく詳しい人」のこと）という存在のニーズは意外に高く、問い合わせも多いのだが、「そんな人いないなぁ」と返すばかり。でも、そろそろ‥「あんた誰？」くらいの唐突な感じで登場してくるかもしれない。
テレビのテロップ的には「ホームページ評論家」か‥。一般向けには浸透しやすい。

商用化されて10年少々のメディアなのだから、そろそろ（テレビや映画、音楽、書籍などと同様に）専門の評論家が出てきてもいい、と考える人たちが現れ、何かを仕掛けてもおかしくはない。
もう少し深い話は音声雑記にて‥

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

ピクトグラムでプロジェクトワークフローを視覚化

・閲覧保証するブラウザ・アイコンをドラッグして集めると、ドキュメント（HTMLもしくはXML）の仕様候補、移行プランが表示される

・ブラウザ閲覧保証プログラムのバージョンを採用時に確認できる

●過去の執筆メモ：
［V-001］［V-002］［V-003］［V-004］［V-005］
［R-001］［R-002］

Web本の執筆メモ［V-005］

構造化ドキュメント（XHTML等）を視覚的に作成するためのツールを選出、検証する。優れたツールの機能をまとめ、他と比較してみる。

Aptana (beta)：
ココログのテンプレートを読み込んでみる

RapidWeaver 3.5 Public Beta 3：
ブログを作成してみる

●過去の執筆メモ：
［V-001］［V-002］［V-003］［V-004］
［R-001］［R-002］