本の進捗［雑記6］

3月3日（木）発達した低気圧が接近中。午後9時、雨が降り出す。深夜、雪に変わって明日昼まで降り続くらしい。

午前、雑務を済ませ、午後から本の作業。Windows版のInternet Explorer 5 が必要となり、古いパソコンを取りに行くが、他の作業場にあることが分かり、引き返す。作業場に到着してパソコンを起動させると、いつの間にかバージョン6になっていて愕然とする。しかたないので都内のオフィスへ出掛けようとしたが、作業の優先順位を間違えていると判断、引き返す。

まずは原稿を上げることが優先されるべきなのだ。サンプル画像は後でも何とかなる。もうすでに夕方4時になっていたので、慌てて机にむかう。作業中、ここにも古いノートパソコンがあったことを思い出す。休憩の後、探し始めるが、見つからない。6時になった。作業の優先順位を間違えていると判断、探すのをやめる。

7時、やっと作業が軌道に乗ってきた。（遅い‥）
現在、CSSリフォームガイドの作業進行中。「CSS初心者のためのボックスモデル」の図版を準備中。回り込みとボックスモデル、ブラウザ（この場合はIE）ハックの集中トレーニングで、まずはCSSの基本レイアウトに慣れてもらうのだ。少々強引な学習かもしれないが、2段組、3段組のレイアウトに関しては「型」として稽古するスタイルにしたい。

CSSリフォーム本メモ[25]

3月1日（火）快晴、昨日のビジネス強行スケジュールの影響で午前中、ダメ人間と化す。午後、なんとか復活して現在、エンジン快調である。
第5章の構成に入る。これは3、4章とのバランス調整のためにおこなう。のんびりやっている場合ではないので、早々決定して、3章原稿を校正担当の方にお送りしないといけない。

CSS初心者に下図のような複雑な構造を理解させるのは難しいと思っていたが、ボックスモデルと回り込み、そして対策ハックだけに絞り込めば可能だということが分かった。絞り込むことの是非はあったが、すでによく出来たリファレンス本がたくさん発売されているので、乱暴なやり方ではないと思っている。むしろ、本をパラパラめくったときに「何の本」か即判断できるメリットは大きいと考える。そのためにも「CSS絵本」のコンセプトは守っていきたい。

CSSリフォーム本メモ[24]

初級編［第三章、第四章］

CSSリフォーム本メモ[23]

レガシーブラウザ、モダンブラウザ（IE6, Firefox, Opera7, Safari等）、オルタナティブブラウザ（音声ブラウザ等）でCSSページ・ビルディングを検証
初級編［第三章、第四章］
タイトル画像は「-1000px」ブラウザの表示領域の外へ／CSSが適用された場合は背景画像として表示する

CSSリフォーム本メモ[22]

写真のイラスト化について質問をいただいた。これは、Photoshopのフィルタを組み合わせただけの簡単な作業。ご興味のある方は、右のカテゴリーメニューから「Bitmap ReMix Material」を。

CSSリフォーム本メモ[21]

自分の全身写真を使ったCSSデザインサンプルを冷静に見て思った。これは失笑を誘いかねないと。「ファイト！一発」的なデザインだったので、尚更である。
もう時間はぜんぜん無いのだが、プロの写真を使うことにした。Flash本でも使ったデータクラフト社の素材辞典から選ぶ。やはり、どう考えても人物なら女性の写真が映えるだろう。
Photoshopでイラスト化してCSSラフに配置してみる。自分の全身像を使ったものより数百倍良い。まぁ、オッさんは、どう画像処理してもオッさんだったのだ‥

CSSリフォーム本メモ[20]

最先端CSSページ・ビルディング（海外編）の解析を終える。これはCSSモジュールの勉強になるし、テーブルデザインの呪縛から解放するための良い教材になるが、初心者本にはそのまま載せられないかもしれない。（実践編に載せようと思っていた。）ここまでやったが、ボツにする可能性あり。

CSSリフォーム本メモ[19]

CSSボックスモデル・ラーニングチャート
初級編-図［12］

CSSリフォーム本メモ[18]

CSSボックスモデル・ラーニングチャート
初級編-図［8］

CSSリフォーム本メモ[17]

CSSページ・ビルディングの初歩
解説用のサンプル-２段組リキッドレイアウト［初心者学習向け］
図［4］

CSSリフォーム本メモ[16]

CSSページ・ビルディングの初歩
解説用のサンプル-２段組リキッドレイアウト［初心者学習向け］
図［1］

CSSリフォーム本メモ[15]

ブレイクダウン　-図［1］

CSS本はどうやって企画されたか？

2月22日（火）関東は快晴、東京は朝から湿度26%、乾燥注意報発令中。本日の作業場は、房総半島の某所。午前中、取材2件、お昼から執筆を再開。第二章をアップする予定である。

■この本が企画された経緯
「標準に準拠したアクセシブルなページに変更したい」という依頼が増えているという話を聞き、昨年秋から取材をスタートさせた。注目したのは「見栄えを変えたくない」という企業側の要望である。
簡単に言えば、現在公開されているサイトの見栄えを変更しないで、構造だけ作り替えてほしい、ということだ。テーブルタグでがっちり固定されたレイアウトを取り外して、文書構造を見直し、CSSでデザインするという作業になる。

その後、10数名のWebクリエーターさんと意見交換。ほとんどの方が「一からCSSでデザインするより面倒」と言う。海外ではどう対応しているのか調べてみると、数としては少ないが”建て直し”的なビジネスがすでに存在していた。大規模なリニューアルには、お金がかかるので企業も躊躇するが、リフォームなら興味深く聞いてくれるというのだ。トップページから、どのカテゴリの第何階層まで、といった料金体系で、予算にあわせてサイトを少しずつリフォームできるわけだ。

リニューアルではなく、リフォームという考え方でCSSを学習する本を企画してみようと思ったきっかけは、これらの取材・調査から。
続く‥

さて、原稿アップは28日。あと1週間だ。それなのに昨年書いた原稿をすべてボツにしてしまった。「CSS絵本」をコンセプトに最初からやり直している。
以下は、ボツにした原稿の一部だが、こういう話はすべてカットして、リフォームデザインに絞り込むことにしたのだ。

1-1. Webクリエーターの苦悩
・Webデザインは、まだ10年弱という始まったばかりの分野
・2000年頃からWebにおける「使いやすさ、わかりやすさ」の概念について、議論が始まる
・2001年に施行された米国の「リハビリテーション法508条」の大きな影響力
・見栄え重視から、ユーザビリティ、アクセシビリティの配慮へ

1-2. Webブラウザに振りまわされた日々
・「構造を定義するマークアップ言語」として勧告されたHTML 2.0
・HTML 2.0の思想をかき消したブラウザ開発戦争
・ブラウザ戦争によって生まれた独自拡張を取りこんだHTML 3.0の破棄
・最初の思想に立ちかえる、HTML 3.2からHTML 4.0へ

1-3. そもそもマークアップって何だろう
・マークアップは文書の要素をコンピュータに認識させる仕組み
・コンピュータが理解しにくい物理マークアップによるWebデザインが定着する
・CSS対応のブラウザがなく、構造とデザインを分離できなかった時代が長く続く
・CSS1が勧告された1996年12月から長い時間を要して、やっと本来の思想にかえる

昨年、ここで書いたことを繰り返していることに気付いたので、とりあえず、ここまで。

CSSリフォーム本メモ[14]

●ページ・ビルディングの概念
［Page Building Concept］
ブロックを積み重ねるようなイメージで構築していくページデザインの概念
●Structured Web Design
　ウェブ構造化デザイン
●Web Visualization
　ウェブ・ビジュアライゼーション
●Web Landscape Design
　ウェブ・ランドスケープデザイン

まとめ図

CSSリフォーム本メモ[13]

雑用で3時間ほど中断、先ほど作業を再開。第一章を終えて、第二章の準備に入る。Adobe Illustrator 大活躍である。

CSSリフォーム本メモ[12]

黙々と作業、進行中。
作成した図版（図解）が膨大にもかかわらず、ファイル名を統一しなかったので混乱してしまう。しかも3つのOSで好き勝手に作業してしまった。実に初歩的なミスである。ただ、本の専用サイトにアップしながら進めているので、だんだんと整理されていくはずだ。かなり遅れてしまったが、まだ帳尻を合わせることが可能、慎重に進めていこう。

ページ・ビルディング、デザイン制作概念のイメージ図

それにしても‥
昨日からのスピードで作業していれば、1週間強で本１冊の原稿が上がってしまう。要するに専念できる環境を作ればよいわけだ。打ち合わせや会議などを１週間にまとめて、次の週はまるまる空けておくとか‥
まぁ、なかなかそう簡単にできることではないのだが‥