雑誌記事のサンプル

本日発売の「web creators」2005 2月号

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

★改善したムービー
●通常の方法で作られたオリジナルムービー

★改善したムービー
●通常の方法で作られたオリジナルムービー

flash motion-ラフスケッチ6

影付きオブジェクトからシルエットへ展開させる技法

Shadow-[ラフスケッチ]（10KB）

◆これでFlash本に掲載するサンプル・ラフスケッチは終了。
（書籍名、出版社、発売日などはまだ非公開）

お知らせ

続メイキングブック強化週間

12月27日（月曜日）、とうとう2004年最後の週となった。進捗は以下の通りで、かなり厳しい状況である。年末年始は日並びが悪いため、短い正月となりそうだが、仕事には都合がよいかもしれない。

書籍名：改訂新版 Webデザイン基礎
大幅改訂となる章が１つあり、そこが遅れている。Dreamweaver MX 2004を使った本格的なCSSデザインを紹介するパートだが、（画面ショットが多い分）もしかしたら‥ミラクルがあるかもしれない。

書籍名：CSS リフォームガイド（仮）
実践編の章が、年内厳しい状況になってきた。但し、クリエーターの方々から数多くの助言をいただき、実践的な内容に変貌している。（つまり見落としていたものが多々あったわけだ。）今週、構成できれば、その後の作業はかなりスピードアップできるはず。

書籍名：Webクリエーター次世代論（仮）
予定通り（作業は来月後半から、というスケジュールに変更なし）

flash motion-ラフスケッチ5

オブジェクトを回転させるベーシックな技法

Ceiling Twist-[ラフスケッチ]（10KB）

音声コラム「手作業の時代」

ラーニングサイト「common style.」（まだ‥非公開になっている）で公開するクリエーター向けの講座のなかに一言コラムがある。短いものなので、このブログでもアップすることに。我々、40代以上のオジさんたちが、どんなことを経験、学んできたか話していこうと思っている。FLASH GROOVEやWEB BASICで紹介する制作技法やワークスタイルの原点に触れていきたい。

[音声を聞く]（MP3／6分44秒）
※高圧縮、低音質でアップしていますので音量が小さいかもしれません。
※音声コラムのオリジナルは、ラーニングサイト「common style.」にあります。

flash motion-ラフスケッチ4

画面分割によるマルチ・モーション技法

Split Screen-[ラフスケッチ1]（10KB）

Split Screen-[ラフスケッチ2]（10KB）

本のターゲット［SWD］

返信雑記：
ここで公開しているメモは少々小難しいが、本はCSS初心者向けなので解説もやさしくなるよう調整している。
ターゲットセグメントは以下の通り。現在進行中の本はすべて、３番目のマスが対象。但し、オピニオン層から支持されなければ、広まっていかない。特にWebデザインの世界は狭いので影響は大きい。

■イノベーター　Innovator
マスよりも情報収集が格段に早く、積極的に採用し、具体的に試すなど、先進的なクリエーター層。
CSSデザインの可能性を日々探っており、テクニックにも詳しい。情報公開も積極的で早いが、表現のレベルが高いためマス層には難解。

■オピニオン　opinion
マスの初期少数層、一般より早く採用するクリエーター層。イノベーターより発する情報は絞られるが、マス層にもわかる言葉を使うので、影響力は大きい。多くの分野でターゲットにされる。

■マス／マジョリティ　majority
安定した手法や技術、ツールなどを徐々に受け入れ、広げていく最も数の多いクリエーター層。イノベーターやオピニオンの影響を受けながら、段階的に取り入れていく。とにかく、この層が普及のエネルギーとなる。

■ラガード　Laggard
古い手法や考え方、およびツールなどから新しいものへ移行しない層（保守層および無関心層も含む）
本音として「できればCSSデザインを習得したい」と思っていながら、逆の行動で見かけ保守という立場をとる層もいるので多少マスとクロスオーバーする。

先進的で上級者向けの本は、高額商品として成り立つが、シリーズ化しにくいこともあり、マーケティングで失敗すると大変である。マス向けの本は、数の期待が持てる分、他社と激しく競合する。差別化としての「解説のわかりやすさ」は基本として、やはりオピニオン層から支持される要素を見過すことはできない。

Webデザインではなく、ホームページ入門なら、また捉え方が変わってくる。著者としてやれることは、初期に「取材」後に「分析」「編集」、そして統一した言語でいかに執筆できるか、である。バランスや解説の”トゲ”は、編集スタッフがジャッジしてくれるので、最終的に商品クオリティをパスした本が出来上がる。

PS:
祝日にもかかわらず、たくさんのメールを頂きました。（ブログなのにワンウェイな投稿で申し訳ございません‥）

※［SWDメモ］が付くエントリーは、1〜2月発売予定Webデザイン本の執筆メモを断片的に掲載したもの。（2004/12/24）

CSS解析のツール［SWDメモ］

息抜き雑記：
本の執筆のため、さまざまなサイトを見てきた。テクニックを確認するときは、ブラウザに表示されるデザインよりも内部（CSSの構成など）をチェックするので、CSSツールの役割は大きい。CSSの解析は（Webクリエーターに人気のある）「Web Develope」を利用している。FirefoxおよびMozillaの拡張機能、WindowsでもMacOXでも使える。日本語版は、インフォアクシアから提供。

■ツールバーから操作できる（私は右クリックで選択する）

■CSSメニューの編集機能がとても役立つ

■WebページとCSSを一覧できる

■すべてのCSSが読み込まれるので構成を把握できる

※［SWDメモ］が付くエントリーは、1〜2月発売予定Webデザイン本の執筆メモを断片的に掲載したもの。（2004/12/24）

CSSパブリッシング・デザイン［SWDメモ］

Webクリエーターの作業はどこまで拡大するのか？　インターネットが普及し、Webサービスの利用者が増えれば、紙への変換（ブラウザから印刷する）需要も高まる。ペーパーレスで済まない情報とは何か、考えておく必要がある。
クライアントから「ブラウザに表示されるデザイン」と「印刷されたときのデザイン」２つの要望が出た場合、Webクリエーターは完璧に補完することができるか。（何を習得することで、その作業が可能になるのか。）

参考サイト：「God's Smuggler」

■CSSコンポーネントの構成

■CSSによるページデザイン（ブラウザ表示）

■パブリッシング・デザイン（ブラウザから印刷）
プリント用のCSSデザインが適用される

■CSSによるページデザイン（ブラウザ表示）
画像エレメントを駆使したグラフィカルなレイアウトページ、年表はスクロールさせて閲覧する仕組みになっている（検索も可能）

■パブリッシング・デザイン（ブラウザから印刷）
ブラウザに表示されているページをプリントすると情報が欠けてしまう（何より見にくい）ので、紙の閲覧に適したページが印刷される（デフォルトで4ページになる）
印刷用CSSによるレイアウトは、PDFやFLASH PAPERなどの電子文書にも反映できるので、紙以外の付加価値を持つ

※［SWDメモ］が付くエントリーは、1〜2月発売予定Webデザイン本の執筆メモを断片的に掲載したもの。（2004/12/23）

流行中のCSSテクニック［SWDメモ］

現在、流行っているCSSテクニックを調査中。暫定処置か、ノウハウとして蓄積される技法か、実験か、さまざまな視点から検証してみる。

参考サイト：「God's Smuggler」

■XHTMLによる基本ページ

■CSSでデザインされたグラフィカルなページ

■流行のCSSテクニックを採用している（最近急増中のoverflowヒドゥン・インターフェース）

※［SWDメモ］が付くエントリーは、1〜2月発売予定Webデザイン本の執筆メモを断片的に掲載したもの。（2004/12/22）

雑記

今日（午後〜）、明日、明後日、と「合宿」で作業追い込み、という状態になってしまった。なんとなく、まだ忘れている雑用がありそうだが、（プライベートなことなので）無視してもよいだろう。とにかく、予定している分を仕上げなければならない。
執筆を終えたパートのメモは順次、このブログに放り投げていくので１日の更新度は上がるが、（数複の同時執筆なので）意味不明のものになってると思う。あくまで本のためのメモ書きとして眺めていただければ‥と。

本に関するメールを毎日数十通いただいている。有り難いことだ。明後日までは、返信およびブログ上でのお答えが滞ることを了承していただければ‥幸いである。
現時点の（本に関する）基本情報は、20日のエントリー「メイキングブック強化週間」を。

flash motion-ラフスケッチ3

テキストの切り替えと「回転オブジェクトの溶かし込み」に適用

Focus Transition-[ラフスケッチ2]（63KB）

標準に準拠した動的なデザイン［SWDメモ］

互換性のないDHTMLと標準に準拠した動的なページを比較してみた。Webデザインの必須科目は以下の通り。学校などのカリキュラムを参照。デザイン作業中心のWebデザイナーであっても、Webの基本として大まかに全体学習しておいた方がよい。

１）構造化言語：XHTML
２）プレゼンテーション言語：CSS
３）オブジェクトモデル：DOM
４）スクリプト言語：ECMAスクリプト

執筆中の本はすべて、構造化言語「XHTML」とプレゼンテーション言語「CSS」に絞るが、体系的に理解するには、DOMとエクマスクリプト（標準JavaScript）がどういう役割を担っているのか知っておく必要がある、と考えている。
過去、互換性のない独自仕様の「DHTML」が流行、普及したこともあり、情報を整理する必要があると判断する。そうしないと、なぜDOMが登場したのか把握しにくい。（※Flashなどの拡張機能と単純に比較してしまうことにも注意したい。）

以下は、DOMによる標準準拠レベルの3Dアニメーションとして公開されているもの（モダンブラウザで動作する）

［http://petern.paddy.nu/mozCube/］

■使われている画像
透明感や光源を表現するため、すべてPNG形式の画像（一番上の画像は白い光なので、ダミー背景を加えている。真っ白になってしまうので‥）

■ソース

※［SWDメモ］が付くエントリーは、1〜2月発売予定Webデザイン本の執筆メモを断片的に掲載したもの。（2004/12/21）

flash motion-ラフスケッチ2

Flash モーショングラフィック技法
ハーフトーン・トランジッションのサンプル

印刷用CSSが洗練されてきた［SWDメモ］

プリンタ印刷の需要が高いWebページに、印刷用CSSデザインを適用している事例が増えてきた。何を省略し、どうレイアウトするか、よく練られているサイトが意外に多い。（まだ少ないと思っていたが、水面下では着々と広まっているようだ。）プリントされたページは、シンプルで見やすくデザインされている。
情報デザインの視点で触れておきたい。

■CSSのmedia属性：
screen（パソコン画面）、print（プリンタ）、handheld（携帯端末）、tv（テレビ）、aural（音声出力）、all（すべて）、その他3種類

※［SWDメモ］が付くエントリーは、1〜2月発売予定Webデザイン本の執筆メモを断片的に掲載したもの。（2004/12/20）

flash motion-ラフスケッチ

Jump Cut-[ラフスケッチ1]（20KB）

Cut Zoom In-[ラフスケッチ2]（14KB）

メイキングブック強化週間

12月20日（月曜日）、とても慌ただしい１週間が始まった。幸い、本業の教育が一段落したので本に集中できる環境となった。本の進捗は、少々厳しく‥遅れ気味である。ここは、本の制作をお伝えするブログなので、可能な限り更新していきたいと思っている。
尚、共著のFlash本（ムック？）も進んでいるので、初期メモなど載せていきたい。

書籍名：改訂新版 Webデザイン基礎
出版社：技術評論社
発売予定日：2005年1〜2月
内容：「速習Webデザイン Webデザイン基礎」の改訂新版。最新動向、Webデザイン技法などのページを大幅に改訂。ワークフローなども新しいものに変更。

書籍名：CSS リフォームガイド（仮）
出版社：まだ非公開
発売予定日：2005年1〜2月
内容：CSS初心者向けのWebデザイン本。一から制作するだけではなく、既存のサイトをいかにリフォームしていくか解説する。

書籍名：Webクリエーター次世代論（仮）
出版社：まだ非公開
発売予定日：2005年2〜4月
内容：まだ非公開

Webデザイン本のコンセプト［SWDメモ］

W-B.T.O（Web - Built To Order）というWebデザインの作業方式をベースに技法、テクニックを紹介していく。

Webクリエーターの制作方式：
・受注後、１から作り始めるW-ETO
・受注後、基本デザインやテンプレートを駆使して仕上げるW-CTO
・受注後、CSSコンポーネントや要素パーツなどを組み合わせて作り上げる（リフォーム作業に対応した）W-BTO

［音声を聞く］（MP3/7分）
※直接リンクしていますので、すぐ再生されます、ご注意。

※［SWDメモ］が付くエントリーは、1月発売予定Webデザイン本の執筆メモを断片的に掲載したもの。（2004/12/19）

なぜFlashで7.5GBの画像を見ることができるのか？

Zoomify の仕組みを探ったとき、幻の画像処理ソフト「LivePicture」を思い出した。マルチレゾリューションとタイル構造の発想、「イメージストリーミング」の世界について語ってみる。

78,797 x 31,565ピクセルの超高解像度画像をスムーズに拡大縮小できる。

［音声を聞く］（MP3/10分）
※直接リンクしていますので、すぐ再生されます、ご注意。
※音声の中で「FilePix」と何度も言っているが正しくは「FlashPix」

■参考：
TNO TPD -GigaPix UK [The 2.5 gigapixel photo]
・TNO（オランダ応用科学研究機構）
・2.5 gigapixel（25億画素のデジタル画像）
・オンラインビュワーとして「Zoomify」を採用しているので、FlashPlayerが必要

frog motion

笑うケータイ・カエル [PCデスクトップバージョン]
ケータイ液晶画面の中でカエルを泳がせたい人向けバージョンも検討中（企画書のみ作成中）
※FlashPlayer 必須

ケータイ向けFlashおもちゃ箱

「エデュキャラ」の具体的な展開として、Flash対応の携帯電話向けミニアニメーションを企画。（「Flashオモチャ箱」の持ち込み企画として模索してみる。）
1998年に公開していたサンプルをリメイクする形で進める。（キャラクターは商標登録済み。）非常に古い作品なので、グラフィック、動画演出など、すべてにおいて問題あり。リメイク作品は、ケータイで楽しめるコンパクトで動きにキレのあるアニメーションにする。

■商標登録

■オリジナルFlashアニメーション（アーカイブ）
1998年に公開したファイルなので、最適化されていない。古いフォーマットなのでデータサイズは大きいが、再生には問題ない。
※尚、作品内で表示されるURLは存在しない。プロジェクトは6年前に終了している。

Flash 3 で制作
・wonder pop boy -1［108kb］
・wonder pop boy -2［120kb］
・wonder pop boy -3［135kb］

Flash 2 で制作
・wonder pop boy -demo［34kb］

アシスティブ・テクノロジーの補足

昨日アップした音声メモの中でパソコンOSのアクセシビリティについて取り上げた。質問メールをいただいたので、補足することに。
以下は、MacOSの場合だが、［ユニバーサルアクセス］というユーザー補助が備わっている。システム環境設定で使用する。画面表示（ズーム機能、黒地に白の画面に切り替える）や音声（警告音の代用など）、キーボード（複合キー、スローキー）、マウス（マウスが使えない場合の代用）などの設定がある。

ユニバーサルアクセスの例：
視力の低下した高齢者や弱視の人でも、ズーム機能を使えばWebサイトの小さな文字を読むことができる。（もちろん、Windowsにも同様の機能がある。）

OSには、この他に音声認識や読み上げ機能なども搭載されている。但し、実際はスクリーンリーダなどの専用ソフトをインストールして使用される。

Webデザインとアクセシビリティ［SWDメモ］

■執筆のためのキーワード
Webアクセシビリティが浸透し、クリエーターが意識し始めたのは、何がきっかけ？

・強制力
米国のリハビリテーション法508条
・啓蒙活動
マイク・パチェロ氏の著書「ウェブ・アクセシビリティ」
エバンジェリストのさまざまな活動

・啓蒙活動の参考：
ヤコブ・ニールセン氏の著書「ウェブ・ユーザビリティ」

［音声を聞く］（MP3/10分）
※直接リンクしていますので、すぐ再生されます、ご注意。
※ダイジェストなので、話題が急に変る箇所あり。

※［SWDメモ］が付くエントリーは、1月発売予定Webデザイン本の執筆メモを断片的に掲載したもの。（2004/12/14）

Webクリエーターの作業環境を考える［SWDメモ］

■水面下で進化しているWebデザイン
これからの動向〜

・アダプティブな能力が高いクリエーターたちは、CSSを駆使したデザイン・テクニックを模索。さまざまな技法、裏技が公開される。過去、テーブルタグによるページビルディングが急速に広まったように、多くのWebクリエーターが影響を受け、実作業に取り込んでいく。その過程で、テーブルレイアウトと同じような問題（例えば、div空タグの使いすぎ等）が指摘されるが、早い段階で整備されていく。

・現在、CSSコンポーネントを効率よく管理できるツールがないため、クリエーターが自らスケーラブルなシステムを構築することになる。この事例は、専門誌などによって広まり、その後、DreamweaverやGoLiveの次期バージョンなどに取り込まれていく。来年後期まで。

［音声を聞く］（MP3/8分）
※直接リンクしていますので、すぐ再生されます、ご注意。
※今回も”ささやくような”語り口の録音、大きな声を出せない環境であった。ご了承を。
※さすがに20分は長いので削って8分に。次回からもこの程度の時間に。

※［SWDメモ］が付くエントリーは、1月発売予定Webデザイン本の執筆メモを断片的に掲載したもの。（2004/12/13）

執筆のワークフロー

執筆作業についてメールを数通頂いたので、お答えしたいと。
複数の原稿サイトは、Dreamweaverで管理されているが、更新には外出用のノートパソコンを使用している。Contribute 3を活用しているが、使い勝手は概ね良好。作業場ごとにPCがあるので、すべてにContributeを入れておけば効率的。今後、検討したいと思っている。WindowsでもMacでも、どこで作業しても、同期できるのは有り難い。

執筆のための音声ファイル（取材、対談、雑談など）は、「iTunes」で管理している。iTunesは、音楽だけではなく、あらゆる音の管理に便利である。本の原稿サイト、およびブログなどの記事に関連付けているので、いつでも参照できるし、必要ならiPodなどのデジタルオーディオプレーヤーにコピーして、外出時にも活用できるのだ。（スタジオ内は、Rendezvousで共有可能。）

”語り”というのは膨大な情報量を含む。プロダクションの方々や現場クリエーターさんとの雑談は、本には盛り込めないノウハウがたくさん詰まっている。もちろん、読み解く作業は必要だが、新たな切り口のヒントを得る重要なナレッジといえる。この知恵を蓄積するだけでなく、有効に活用するためには管理システムが必要となる。現在のところiTunesが、その役割を担っている。XMLで書き出したファイルをリストとして活用できるし、ブログと連携することも可能なので、永続性は高い。

普通の人は、あまりやらないと思うが、セミナーなどを想定して（１人で）語ってみる。作業的には、本の”語り下ろし”と同じだ。（昨日アップしたMP3もその１つ。）考えて、書いて、最後に語ってみる。このプロセスは意外に効果がある。
本が出来上がったら、この音声ファイルもすべて公開したいと思う。私自身の語りなので権利処理も必要ないので‥

8年前のWebデザイン［SWDメモ］

1995年頃のWebデザインについてメモした音声ファイル。当時は、「ホームページ入門」とか「HTML入門」というベーシックな講座名でセミナー等をやっていた。破棄されたHTML 3.0やNetscape の独自タグの問題点は何だったのか振り返りながら、これからの新しいWebデザインについて考えてみる。

［音声を聞く］（MP3/15分）
※直接リンクしていますので、すぐ再生されます、ご注意。
※隣で会議中という環境だったので、”ささやくような”語り口の録音、聴きづらいと思う。

※［SWDメモ］が付くエントリーは、1月発売予定Webデザイン本の執筆メモを断片的に掲載したもの。（2004/12/12）

モダンブラウザの歴史［SWDメモ］

［拡大表示する］

レガシーブラウザからモダンブラウザの最新バージョンまでを概観する。Webデザイン・ポリシーをモダンブラウザの種類（IE、Netscape、Mozilla、Opera、Safari、Firefox）とバージョンをベースに考えてみる。CSS検証データベースも同時に構築する。
ここを明確に図表化しておけば、Webクリエーターがもつ（CSS移行の）不安を軽減できる可能性がある。

※［SWDメモ］が付くエントリーは、1月発売予定Webデザイン本の執筆メモを断片的に掲載したもの。（2004/12/9）

高速レンダリング

雑誌のサンプル（業務連絡）：
キャラクターアニメーションの一部とキューブが飛び交うシーンに適用。（Flash MX 2004 使用／Flash Player 7 必須）

［レンダリング改善サンプル（キューブのシーンに適用）］

最高の”おまけ”Flash Paper 2

本の原稿を公開するための（関係者向け）専用サイトをContribute で更新している。サイト管理は、Dreamweaver MX 2004（Windowsマシン）でおこなっているが、出張のときはPowerBook を持参する。一応、G4だが‥Dreamweaver はあまりにもヘビーなので、Contributeを使って更新、同期させているのである。
とても便利なのだが、記述されるコードに少々不満があった。そこで、リリースされたばかりの新バージョン「Contribute 3」にアップグレード、税込み10,500円。レンダリング速度も向上し、なかなか使いやすくなった。

インストール後、別件で企画書を印刷しようとプリントダイアログを開いた。するとメニューに「Flash Paper」という項目が表示されていることに気付く。バージョン2のMac 版にはFlash Paperが付属していなかったので、すっかり忘れていたのだが、Flash Paper 2もインストールされていたのだ。せっかくなので、いろいろ試してみたが、なかなか面白い。複雑なCSSを適用したWebページをそのままSWFに変換できるので、コレクションしたいWebサイトのサムネールライブラリが作れそうだ。複数のWebページを一覧できるのは有り難い。（但し、ブラウザによっては正しく変換できないので完璧なものではない。）

以下は、うまく変換できなかったAdobe Illustrator のファイルをPDFで保存し、MacOS Xに付属している簡易ビュワーで開いて、プリント（変換）したもの。データサイズは、PDFファイルの半分くらいになった。

［Flash Paper を表示する（72KB）］
※OSによってはフォントが置き換わってしまう可能性あり

工夫次第で使い込めそうなFlash Paper 2だが、Macにはスタンドアローン版がない、しかも機能制限がある。マクロメディアのサイトを見ると、Windows 98とMacはサポート対象外になっている。フル機能を使うなら、Windows 2000/XP/2003（.NetServer 2003）をプラットフォームにするしかないので、少々残念。
それでも、1万円でアップグレードしたContribute 3 の”おまけ”として考えれば、お得感がある。ズーム、スクロール、検索のインターフェース付きSWFをエディタやブラウザから書き出せるのだから。

Windowsユーザーの方は、17日に発売されるソースネクストの「いきなりPDF FLASHPAPER」を。価格は、税込み1,980円。

レガシーブラウザの呪縛から開放されて‥［SWDメモ］

時代遅れになってしまった古いシステムのことを「レガシーシステム」と言う。レガシーシステムを残すことによって、新しく導入するシステム運営の障害となる場合がある。これはシステム更新の重要な課題として扱われる。

IE4.x、Netscape4.x以下をレガシーブラウザ、2000年以降にリリースされたものをモダンブラウザ、携帯電話用や音声ブラウザなどをオルタナティブ・ブラウザと呼ぶ。（用語として定着したものではない。）現在、Webデザインの現場では、レガシーブラウザをどう扱うかというテーマに変化が見られるようになってきた。簡単に言えば、以前ほど固執する場面が少なくなってきたということだ。

レガシーブラウザに対しては、等しく情報を提供できれば（基本情報が欠けてしまうことは許されないが）、見栄えは犠牲になってもよいという判断が大勢である。それよりも、SEO対策やアクセシビリティ配慮をサイトポリシーとして打ち出す方に予算がまわっているようだ。

モダンブラウザにおいては最高の見栄えを要求されるが、Webクリエーターが頭を悩ます問題は、マシンアプローチの作業にかかる労力が評価されていないこと。リニアライズなどの隠された作業は、なかなか大変だ。制作費見積もりの見直しを早々に始めた方がよいかもしれない。

レガシーブラウザの呪縛から解放されても、新たな要求が次々と突きつけられる。日進月歩の世界では、やむを得ないことだが、今の時期はとくにポッカリと穴があいている状態。具体的な方法論が専門誌などで紹介されていないし、解説本もない。（今のところ、ビジネス誌の範疇なのかもしれない）参考にできるソースはネット上に溢れているが、収集・編集された記事は少ない。

納品後にクライアントから「もちろんSEOには配慮してくれましたよね？」と言われ、「そんな話してたか？？」と真っ白になるクリエーターの話を聞くと、まだまだ”おまけ”扱いが多いのかもしれない。

今後、（マークアップエディターなどがいて）分業が確立しているプロダクション所属のクリエーターが最先端をいき、そのノウハウが専門誌などに流れ（特集記事で紹介され）、フリーのクリエーターに下りてくるのは、もうしばらくかかる。さらに時間が進めば、蓄積されたノウハウが、DreamweaverやGoLiveなどのプロフェッショナル・オーサリングツールに採用されるはずだ。

近い将来をイメージすることで、今、何を伝えるべきか見えてくることがある。リファレンス本ではないので、とても重要なことだ。もう少し、取材やヒアリングを続けてみよう。

※［SWDメモ］が付くエントリーは、1月発売予定Webデザイン本の執筆メモを断片的に掲載したもの。（2004/12/2）

Hackをテクニックとして扱うべきか？［SWDメモ］

2000年以降、CSSに対応したWebブラウザが出揃い、現在やっと「構造とデザインの分離」に立ち返ることが可能になった。（CSS1が勧告されてから、8年も要したことになる。）ネット閲覧していて、わかるのは「見栄えはそのまま、中身は「標準」」というリフォームされたWebサイトが日々増えていることだ。

では、Webクリエーターが容易に移行できるかといえば、まだ壁がある。たしかにCSSに対応しているブラウザは出揃ったが、初期のものは完璧な対応ではないのだ。最悪なのは「バグ」を含むものである。バグのあるブラウザに対しては、Hackと（ハック）と呼ばれる裏ワザで対処するのが一般的だが、できるだけ使用しない方がよいという意見も多く、扱うのであれば、きちんとした方針を決めなければならない。

Hack（裏ワザ）に関しては、期限付きの対応と考えるべきである。つまり、裏ワザの使用中止という選択も考慮しておき、必要に応じて取り除くことを可能にした方がよいのだ。

［Hack の取り扱いを記した仕様書］

基本は、トリッキーなことをしない、である。但し、現実はシビアなもの。不具合は、Webクリエーターへのクレームとして突きつけられる。だからこそ、サイト制作の方針を決め、クライアントから共通の理解を得ておく必要がある。ここが、ビジネスとしてWebデザインをしていない人との大きな違いだ。プロの立場であれば、理想と現実に苦悩するのが当然となる。

もし、クレームを恐れて「標準」から逃げているなら、プロとして問題かもしれない。”状況に応じたWebデザイン”の領域に入るのは、怖いことかもしれないが、明日から切り替えろ、という話ではない。仕事では、ゆるやかに導入していけばよいのだ。

‥と書くのは、簡単だが、CSS初心者向けの書籍なので、正論だけでは伝わらない危険性がある。特にHackの場合は、注意しないといけない。言えることは、テクニックとして解説した方がわかりやすくなることだ。セミナーなどでは補足できるが、本にはページ数という制限があるため、何らかの工夫が必要。
本音は、Hackは極力使わない、としてスタンダードの意義を書くべき‥だが、どうなる。要検討。

※［SWDメモ］が付くエントリーは、1月発売予定Webデザイン本の執筆メモを断片的に掲載したもの。（2004/12/1）