本の進捗メモ7［SWD］

引き続き、図版の見直し。Webデザインサンプル CSSバージョン［スリーパネル・ベーシック +ナビゲーション・トップレイアウトのパターン］を準備中。Webグラフィックパートの素材にこんな時間かけている場合ではないか‥（今気付いたが、作業の優先順位を誤っている。）

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

本の進捗メモ6［SWD］

Webデザインサンプル用のグラフィックを準備中。タブレットが使えないので（そもそもペンで絵を描けない）、一見ラフな”絵”でもベジェで計画的に構築する。同じようなテイストになるのはやむを得ない。ベジェの”絵”でよく使う技法は「エイジング（汚し）」である。例えば‥

・風雨にさらされた感じ、錆びた感じ
・古くするというリアリズム

といった表現に適している。Flashアニメーションにおいても、このエイジングを必要に応じて使える。今のところ手作業の方がダイエットできるので、コツコツ‥ベジェ描画。

作業しながら自問自答‥
CSSデザインの作業を分解していくと、ウォーターフローな一方通行型のデザインが通用しにくい。フリーランスのみなさんが「役を演じ分けるような作業」をおこなっていくは少々無謀とも思える。組織作業とは分けて、何かヒントを提示していく必要がありそうだ。

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

本の進捗メモ5［SWD］

引き続き、本の作業（図版の見直し）。改訂本の方は、原稿の追い込みも最終段階へ突入。あと数日である。このブログも久々の制作日記になる‥（今日はWebデザインのサンプルを見直す予定。）

現在Web関連の本を執筆している著者の方々共通の悩みがある。それは、DreamweaverやGoLiveなどWebメジャーソフトの次期バージョンが控えていることだ。（もちろん、いつ発売されるかは分からないが。）問題は、CSS機能の大幅向上である。単に「便利になる」というレベルではなく、クリエーターの作業に大きく影響するものと推測できる。

書店のWeb関連図書コーナーが、日々CSS本で埋め尽くされている現状を見ても、過去の技法と互換性をもたせたハイブリッドなWebデザインは掲載しにくい。中小企業向けのCSS研修も急増、まだ”流行”を感じるが、大きな流れをつくっているという事実については軽視できない。

本を出して、すぐに古びてしまうことも考えられるだけに、調整が必要という状況である。

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

本の進捗メモ4［SWD］

オーバースペック・リクワイアメントについて考える。日本は、過剰なほど品質にこだわる人が多い国なので、物やサービスを提供する側は大変である。逆な見方をすれば、だからこそ日本には高品質なサービスが多いのだ。宅配便にしても交通機関（特に鉄道）しても、素晴らしい。5分遅れただけで（車内放送を使って）車掌が何度も謝るという国は他にあるのだろうか。

さて、本の場合だが、陥りやすい問題がある。リクワイアメント（Requirement）を積み重ね過ぎると、確実にオーバースペックな本が出来上がってしまうのだ。
初めて書く人が特に陥りやすいのだが、”初めての試み”という場合も同様だ。私も昨年の段階では、500ページクラスのゾーンに入り込んでいた。後半、なんとか抜けだし、本来の購買対象者を確認することができた。あのまま進めていたら、「初心者には難しく中級者には物足りない」という内容になっていた可能性が高い。

映像には”時間”という制約、本には”ページ数”という制約があり、何を捨て何を盛り込むか、まさに「編集」技の世界なのである。有益な情報がいくらあっても、商品化にはテクニックが必要だ。

‥ということで、現在、テキストと図版をリミックス中である。私はこのプレイを「BJ」と呼んでいる。

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

本の進捗メモ3［SWD］

1月も‥なんと11日目である。このスピード感、侮れない。本日も引き続き、図版の作業を中心に進める。今週、来週は、本の進捗メモだらけの投稿になるかもしれない。
明日と金曜は、打ち合わせや会議、その他の外仕事が予定されているが、それ以外は3冊の本に集中したいと思う。
（今のところキャラクターオークションは予定通り‥）


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

本の進捗メモ2［SWD］

現在の作業、遅れ気味‥
Adobe Illustrator で図版を作成しながら原稿の推敲も兼ねる。図解することで、テキストも洗練されていくが、あまり作業のハードルを上げすぎると、自滅するので注意しながら進める。
ブログを見てくださる方々にとって有益なメモにはならないが、本の制作アーカイブというノリで（図版、未完成サンプル等）どんどんアップしていく予定。


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

本の進捗メモ1［SWD］

本の作業、かなり遅れてしまったので追い込む。図版の構成を見直す。編集し直すと（当然だが）より完成度が増す。但し、時間の制約を守らずして商品成り立たず。このことは常に意識しておく必要がある。

Webデザイン・ワークフローに関しては、2つの視点（マシン・アプローチ、ヒューマン・アプローチ）から構成。バリエーションは、3つ用意する。

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

本のターゲット［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日のエントリー「メイキングブック強化週間」を。

標準に準拠した動的なデザイン［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）

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

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

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

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

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）

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

昨日アップした音声メモの中でパソコン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）

レガシーブラウザの呪縛から開放されて‥［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）

Structured Web Design Live !［2］

現在、執筆中の書籍「Structured Web Design」（←という名前の本ではなくて、A社、B社、C社から出版されるWebデザイン本に共通する概念のこと。3冊は各々、切り口が異なる。1月末？に発売されるのは2冊の予定。）の出版記念ライブは、以下の実演Bに決定。

■実演A：
商品パンフレットから必要な情報を取り出し、構造化、マークアップ（XHTML）、デザイン（CSS）の順に作業を進める。実演のポイントは、ワークフロー。

■実演B：→この内容で実演
すでに公開されているWebページ（テーブルレイアウト）を分解、再構造化、再マークアップ（XHTML）、リフォームデザイン（CSS）の順に作業を進める。実演のポイントは、CSSによる（アクセシビリティを損なわない）テーブルデザインの再現。

■検証：
CSS対応Webブラウザで検証
音声ブラウザで検証（ホームページリーダー3.01）
インターネットTVで検証
ページ印刷の検証

ライブでは、テーブルレイアウトなど、物理マークアップを含む既存サイトを「標準準拠」にリフォームする。単に「標準」リフォームして、すべて良し、とはならないのが現実。苦悩するWebクリエーターを演じてみたい。

出版記念ライブなどとカッコつけているが、執筆中の12月中に（こっそり‥）おこなう予定。今回は、Flashのように手際よくプレイできない可能性大。私は、デザインの仕事をしていないので、定期的にこのようなチャレンジをしないと、感性を維持できない。「頭で理解していても、実際に作業するとうまくいかない」という体験が欲しいのである。

”状況に応じた”Webデザイン［SWDメモ］

1995年11月、W3Cは「構造を定義するマークアップ言語」として「HTML 2.0」を勧告する。（今から9年前のことである。）ところが、激化するブラウザ開発戦争にかき消され、物理マークアップが定着してしまう。自社のブラウザを優位にするため、NNが文字を点滅させるタグを作れば、IEは文字をスクロールさせるタグを作る。互換性のない独自拡張タグが氾濫する。

W3Cは、ブラウザ戦争によって生み出された独自拡張タグを取り込み「HTML 3.0」の仕様作りを始めるが、けっきょく破棄した。（当時「HTML 3.0 入門」が何冊か発売されている。）
最初の思想に立ち返るため、1996年12月、「HTML 3.2」と「CSS 1」を勧告。”構造とデザインの分離”を推奨する。

但し、あまりにも物理マークアップが広まり、長い間使われていたので、段階を経て移行できるように「HTML 3.2」には、フォントサイズなど、数種の物理マークアップを可能にした。そして、1997年11月に勧告された「HTML 4.0」では、論理マークアップに移行、後‥「XHTML 1.0」でやっとWebデザインの原点に返る。

構造とデザインの分離の思想は、今から8年前にあったもの。ずいぶん時間がかかった。ゆっくりと動き出したのは、2000年である。CSSに対応したブラウザが出揃ってきた時期だ。

現在、Microsoft、Netscape（AOL）、Opera などのブラウザベンダーは協調しており、ようやく矛盾のないスタンダードなWebデザインが可能になってきた。

これからWebデザイナーが学ぶことは、「標準」である。但し、テーブルを使ったレイアウトデザインなど、まだ捨てきれない物理マークアップが多々ある。クライアント（発注者）との意見交換を積極的におこない、”状況に応じて”使い分けないといけない。

Webクリエーターの力量が問われる時期がきた。「テーブルレイアウトはそのままでいい、まずSEOの対策を急いでくれ」と依頼された時、マシンアプローチの学習が必要となるが、その前に「標準」を習得しておくべきだろう。「不必要なタグを取って、CSSで現在の見栄えを再現してほしい」という要望も同様だ。
”状況に応じた”Webデザインの時代がこれから数年続く。

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

次世代オーサリングツールから発想するStructured Web Design［SWDメモ］

1997年、今から7年前、テーブルタグを使ったグリッドシステムの手法が広まる。専門誌では、最先端のWeb技法として紹介されていた。それ以前からテーブルレイアウトは使われていたが、システム化されたものをワークフローに取り込んでいったのは、この頃である。サイト構築の支援機能が注目され評価されていたNetObjects 社の「NetObjects Fusion 2.0」などもリリースされた。

テーブルタグを使ったグリッドシステムの需要は日々高まり、GoLive Systems 社の「GoLive CyberStudio 3」が大胆に‥採用した。（このオーサリングツールは、現Adobe GoLiveの前身。）DTPソフトのようなルック＆フィールを実現したツールとして話題になった。

CyberStudioが可能にする、レイアウトグリッドによる正確なページビルディングは、Webクリエーターにとって待望していた機能だった。しかし、印刷物のようなレイアウトデザインを試みた多くのWebページには、膨大なテーブルタグが記述され、画像ファイル並のデータサイズになることもあった。当時、テーブルタグを手作業で減してくれる有料サービスもあったほど。
それでもCyberStudioが残したものは大きい。これをきっかけに、構造を複雑にせず、表現力を高めるテーブルレイアウトのレベルが向上したのだ。

現在発売されているGoLiveやDreamweaver、ホームページビルダーなどのオーサリングツールには、まだテーブルタグを使ったレイアウト機能が残っているが、プロモーションにおける扱いは小さい。現バージョンは、CSS対応やアクセシビリティへの配慮を売りにしている。但し、想像の域を出ていないものだ。大きな関心は、来年発売される新バージョンである。

本書のテーマであるStructured Web Design は、（少々大袈裟だが‥）次世代オーサリングツールを開発するための発想に近い。そういうプロセスで本の構成を考えるべきと判断した。Webクリエーター仕事の大半は、見栄えを保証することだが、マシンアプローチに関わる概念をどこまで取り込めば、ヒューマンアプローチと相互作用するのか、よく考えないといけない。

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

マシンアプローチとヒューマンアプローチ［SWDメモ］

本書は、これからCSSに取り組んでみようというWebクリエーターやWebリフォームの発注をしなければならないIT関連の担当者などを読者として想定している。専門用語は避けて通れないので、いかに体系的に解説していくか、というのが肝となる。
昨日、「Webデザインが非常にややこしくなってきた」とメモしたが、最初に行う作業は絡まった糸をほどいていくことだ。そこで「人間」と「機械」という判断しやすい視点で進めていこうと思う。

まず「マシンアプローチ」と「ヒューマンアプローチ」に分け、理解しやすいキーワードを取り上げながら、まとめていきたい。
そもそもマークアップというのは、自然言語による「文書」を「マシンに理解」させるためのもの。だから、論理マークアップが正であり、Webクリエーターが行っていた物理マークアップは問題があったのだ。しかし、デザイナーの仕事の大半は、見栄えを整えることだから、ブラウザに表示される結果で評価されるという事実を軽視できない。かつてCSSを使うと簡素なデザインにしかならない、と言われていたが、ある意味しかたないと考える。

●マシンアプローチ： 構造化、マークアップ、メタデータ、SEO対策

●ヒューマンアプローチ：
・ユーザービリティ
・ユーザーエクスペリエンス
・アクセシビリティ
インターフェースデザイン、レイアウトデザイン、グラフィックデザイン、アニメーション、映像、サウンド、インタラクティブデザイン

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

ユーザー・コンプライアンス［SWDメモ］

Webデザインが非常にややこしくなってきた。「テーブルレイアウトは衰退していく」と言われているが、単純にCSSで再現するだけなら、分かりやすい。ところが実際は、かなり複雑なことになっている。

取材を通して感じたことは「コンプライアンス（compliance）」というキーワード。通常、企業においては「法令遵守」、簡単に言えば法律、規則を守ることだ。
これがWebにおいては（Complyの「願い、要望に応える」という意味から）「ユーザー・コンプライアンス」というレベルに落とし込まれる。簡単に言えば、多くのユーザーの期待に応えることである。もっと具体的に言えば、企業サイトのトップページに「○○社はアクセシビリティに配慮したWebサイトづくりを実践しています」と表記すること。必要かどうかの検証よりも、その取り組みを外に示すことが重要となる。バンドワゴン効果だったり、右に倣えの安易なやり方であっても、これが出発となる。ヒアリングによって、後に引けない状態になっているのが見えてきた。

そのしわ寄せは、Webクリエーターへやってくる。真っ先に直面するのは、Webサイトのリフォームである。自治体のサイトなどを見ると、見栄えを変えずに再構造化、再マークアップ、CSSデザインに移行した例が多々ある。（テーブルレイアウトは一切使われていない。）企業サイトでも増えてきた。この流れは、Webデザイン業界の中で見るより、代理店の思惑や企業が打ち出すユーザー・コンプライアンスの強制力を見た方が先読みできると思う。

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

今月末まではWebデザイン本の制作日記

今日から、しばらくの間、（実は作業も切迫してきたので‥）Webデザイン本の執筆作業を公開していきたいと思う。‥といっても原稿を公開するのではなく、執筆のためにメモしたものを載せていきたい。思いつきメモなどランダムに載せるので、記事としては成立しないかもしれない。また、実際に発売される本にすべて反映されるわけではないので、ご了承を。メモがある程度、まとまってきたら「WebDesign MAKING BOOKS」ブログに移行する予定。

Flash 関連本の仕事が現在ないので‥Flash記事は滞り気味になるかな、という感じだが、雑誌記事に関連した話題は合間に公開していくつもりだ。（※講座の方も‥心苦しく弁解。）
ただ、Webデザインの中には当然、Flashも含まれているので、クロスオーバーする内容も多い。特にアクセシビリティとFlashに関する話題については深く考えていきたい。

Structured Web Design Live !

書籍を執筆中もしくは出版後にいつも行っている実演ライブ、今回は「SWD Live !」と題して挑戦。Flash 以外では初めての試みである。現在、執筆している本はすべてWebデザイン関連（しかも「Structured Web Design」という新しいテーマ）なので、以下のような内容で考えている。（実演A、Bどちらか選択。）

■実演A：
商品パンフレットから必要な情報を取り出し、構造化、マークアップ（XHTML）、デザイン（CSS）の順に作業を進める。実演のポイントは、ワークフロー。

■実演B：
すでに公開されているWebページ（テーブルレイアウト）を分解、再構造化、再マークアップ（XHTML）、リフォームデザイン（CSS）の順に作業を進める。実演のポイントは、CSSによる（アクセシビリティを損なわない）テーブルデザインの再現。

■検証：
CSS対応Webブラウザで検証
音声ブラウザで検証（ホームページリーダー3.01）
インターネットTVで検証
ページ印刷の検証

詳細は、後ほど。