ワケルくんサイトはアクセシブル

只今、本のキャラクターを制作中。Flash 本で登場させた monkey のように、エデュキャラとして露出させる予定である。

私は、デザイナーでもイラストレーターでもないので、あくまで第二領域として（要するに趣味で）キャラクターを作っているのだが、興味は強く、企業や自治体などのキャラクターもチェックしている。
ずいぶん前に一度ご紹介した仙台市ごみ減量・リサイクル情報総合サイトのキャラクター「ワケルくん」は、自治体キャラの成功例。キャラクターの世界観が構築されており、とても人気がある。シュールな癒しの魅力があって、私も好きである。「ワケルネット」をご覧になっていただきたい。

ワケルくんの部屋「CMギャラリー」では、コマーシャル（Flash Playerで見る）が公開されているが、これがなかなか良いのだ。（ワケルくんの歌も聴ける。）

ワケルくんの部屋「ペーパークラフト」もキャラクターの価値を高めるグッズとして効果的に機能している。ペーパークラフトのデータは、PDF で提供されている。

さて、話題はちょっとずれるが、このサイトは、XHTML + CSS でデザインされている。古いブラウザで閲覧しても、等しく情報が得られるし、音声ブラウザの読み上げ順も調整されている。
Webリフォームは水面下で着実に進んでおり、見栄えに変化がなくても、XHTML + CSS に変更したアクセシブルなサイトは増えているのだ。Webデザイナーの方々は、是非ともサイトのソースも日々見てほしい。

Adobe PageMill から得たもの

「Webリフォーム」コンセプトの新しい本、今日から構成の作業に入る。部分的に執筆もスタートする。（取材も始めようと思っている。）
現状把握のため、Webデザインの歴史についても触れていく必要がある。本のなかで是非とも紹介しておきたいのが「PageMill」というアプリケーションソフトである。今日は、少しだけ‥この話題を。

PageMill が登場するまでは、1ページ15,000〜20,000円が相場。これは基本ページの価格。（１ページの基準というのは紙ベースの考え方だったのだ。）作業は、原稿をテキスト入力してタグをマークアップするだけ。挿入されるイメージは、画像処理の別料金。テキストを流し込んだだけのHTMLファイル、

100ページこなせば150万円である。3日間ほどの売り上げだ。トップタイトルのGIFアニメーションに10万円〜という価格設定をしている制作会社もあった。

バブリーな時期はしばらく続いたが、1996年12月に「Adobe PageMill 2.0」がリリースされてから状況が変わってきたと記憶している。「Adobe SiteMill 1.0」のリリースも大きく影響した。SiteMill というのは、サイト管理ツールである。Dreamweaver の［ファイル］パネル（［サイト］パネル）をイメージしていただきたい。

安価なPageMill とSiteMill を導入して、ページデザインを安く受注する制作会社が増えてきたのだ。（当時、業務用のHTMLオーサリングツールは高額だった。）テンプレートにテキストを流し込んでレイアウトする作業などは、仕様書があれば学生アルバイトでも可能となり、プロのデザイナーはサイト全体のデザインにじっくり取り組めるようになった。この頃はまだ、Webデザイナー、Webクリエーターという肩書きで仕事している人は少なかったが、サイトの構造デザインへ移行した人は、Webプロデューサーと名乗っていたような気がする。
グラフィックデザイナーだけではなく、プランナーやプログラマ、カメラマンなどからWebプロデューサーという職へ移行した方々もいた。

プロジェクトで作業が進むようになって、Webサイトの仕様書、スタイルガイドなどを用意するようになった。例えば、行揃えで使用するタグを統一したり、カラーライブラリやグローバルパーツなどを専用ツールで管理して共有化するようになったのだ。また、CGIで新着情報を自動更新できる仕組みをクライアントに提供する制作会社もあった。（Macromedia のContribute のような自作ツールを提供して、Webに詳しくない担当者であってもページ更新を可能にしていたのだ。）

とにかく、Webデザインに携わるクリエーターは、泳ぎ続けないと死んでしまうサメのように、日進月歩で進化するWebテクノロジーを追いかけ、既存のデザイン技法を当てはめ、試行錯誤を続けながら、実践（仕事）するしかなかった。デザインが商売だから、仕事をして生活費を稼ぎながら勉強するのである。逆の見方をすれば、勉強しながら仕事している人ばかり、要するにベテランが存在しない業界だったのだ。

7、8年経った現在、当時、徹夜続きで寝袋を必需品としていたデザイナーの多くは、制作会社の経営者である。まだまだ若い業界だが、それでも‥ゆっくりと世代交代が進み、Webデザイナーを育成する立場でがんばっているのだ。

Opera でSEOスパムを見抜く

IEの脆弱性、（毎月やってくるアップデート指示には従っているが‥）さすがに心配になってきたので、IEコンポーネントを使用していないOpera7.53 をメインブラウザにした。

Operaといえば、DDIポケットのPHS「AirH”PHONE」（京セラ「AH-K3001V」）に搭載されて話題になった。「Opera for SmartPhone」というバージョンだが、スモールスクリーンレンダリングを搭載しているのでパソコン用のWebページが閲覧できる。しかもSSL対応、Flashは見られないがJavaScriptのWebゲームなどは動作した。
CSSは、media="handheld"が使用できるので、専用のCSSを用意しておいて振り分けることができる。但し、@mediaのメディアタイプ指定はできないようだ。（それにしても、まさかPHS用にCSSを書くとは思わなかったが‥）

<link rel="stylesheet" href="pc.css" type="text/css" media="screen">

<link rel="stylesheet" href="phone.css" type="text/css" media="handheld">

さて、Opera 7.53だが、スタイルをユーザーモードに切り替えると、なかなか面白い。Webページの文書構造を表示してくれるのだ。いろいろなサイトを見ていくと、

SEOスパムらしきテクニックが見えてくる。
例えば、H1タグをCSSで通常の本文と同じデザインに変えているものがあった。見た目は本文のようだが、実は高評価されるH1タグになっている。もちろん、SEOスパムということがバレてしまうのだが、問題はこの手法を純粋にデザイン（見栄え）として使った場合である。ロボットはそれを判断できないから、やはり不正行為とされる危険性がありそうだ。つまり、H1タグの強制改行、上下の空きがみっともなくても、CSSで調整するのは要注意、ということだ。

ロボットは判断できないが、人間は意図を理解できるので”通報”の心配はいらないかもしれない。
Googleへの通報は、http://www.google.co.jp/webmasters/spamreport.htmlである。Googleの担当者が、そのサイトを調査してSEOスパム行為ということになれば、インデックスから削除されるようだ。

文書構造表示でサイトを閲覧していくと、CSSを裏ワザ的に駆使したデザインが気になってしまう。SEOスパムに勘違いされる可能性があるからだ。（‥と言いつつ、自分のサイトも同じようなことをやっていたことに気付く。）

Opera 7のスタイル機能：

■スタイルの作成者モード

■スタイルのユーザーモード
　[設定なし]

　[擬似テキストブラウザ表示]

　[アクセシビリティレイアウト]

　[要素の構造を表示]

　[要素のアウトラインを表示]

■スタイルの作成者モード
　「首相官邸」

■スタイルのユーザーモード
　「首相官邸」
　[表(table)要素を無効にする]

次の本は、Webリフォーマー

自由民主党のWebサイト（トップページ）最上部にこう記述されている。

自民党は、音声読み上げソフト等に対応できるWebページづくりを目指しています。

要するに、アクセシブルなサイトにしていきます、という宣言である。最近、アクセシビリティ配慮についてのアピールを強めるサイトが増えている。前にも同じようなことを書いたが、その流れは加速している。

「Webサイトのアクセシビリティを向上させてほしい」という話を毎日のように聞く。もちろん、「まわりが始めているから、うちでも対応しておきたい」という流行に（いや、代理店に‥）踊らされている感じも受けるのだが、

この流れは想像以上に大きいと感じている。利用者に等しく情報を提供するという本質を語りたいところだが、まずは業界の動きに乗っからないといけない。

重要なポイントは、道路工事のような作業が圧倒的に多いということだ。１から設計できるのなら、そんなに問題はないだろう。実際は、現在あるサイトを表面的には変えずに、内部を大改造してアクセシブルにするという依頼が多いのだ。これは、非常に高度な作業となる。予算がなくリニューアルできないサイトが圧倒的であるから、これは当然のことかもしれない。

今求められているのは、改造屋である。
複雑難解なテーブルレイアウトで表現されたファッション雑誌のようなWebページをどう料理するか、という話になる。HTMLだけではない、Flashもある。視覚効果としてのFlashアプレットは別として、ナビゲーションや重要なコンテンツの一部を担っているFlashは、アクセシビリティを配慮しなくてはならない対象となる。

Webのリフォーマーは、大忙しだ。

現在、執筆中のDreamweaver本は、初心者向けのアプリケーション解説本なので（操作スキルを重視する必要があるので）、あまり詳しく取り上げることができないが、次に予定されている本で爆発させたいと思う。
‥と言いつつ、最終章で”Webリフォーム”について書いてしまった。

Webクリエーターを二分する時代

土曜から某半島の海沿いに移動、取材もあったので滞在ホテルを仕事場にしている。実は、スタジオに戻るまで、FLASH BASIC blog の更新ができない状態。データの入っていないノートパソコンを持ってきてしまったのだ。火曜の夜には戻る予定。

Dreamweaver 本の原稿執筆と前半部のゲラチェックを進めた。できるだけ、前書をベースに改訂したかったが、CSSに関しては無理だった。HTMLタグで装飾してしまうと、初心者は混乱してしまう。これが、一般の個人ユーザーが多いホームページ・ビルダーの本なら、うまく構成できるが、

（初心者とはいえ）Webクリエーターを対象にしているので、下手なごまかしは問題となる。

公的なサイトだけではなく、企業もアクセシビリティには神経質になってきた。これは、最近ほんとに痛感する。つまり、古いブラウザにも同等の表示を求めつつ、テーブルレイアウトなどは極力避けてくれ、という高度な要望が増えてきたということだ。テーブルレイアウトでやってきた柔軟なデザインをCSSで実現するには、多くのノウハウが必要となる。各ブラウザのバグなども含め、知っておくことは山ほどある（すべての利用者に等しく情報を提供することの意義を理解することが最も大切かもしれないが。）

例えば、「Webサイトはこう作るべきだ」という、ある１つの考え方が業界で熱くなってくると、作り手の議論など吹っ飛んでしまうことがある。我々がどう考えようと、世の流れはダイナミックに動いてしまうのだ。そして、この流れはWebクリエーターを二分するだろう。

Dreamweaver は、あくまでも（初心者であろうと）Webクリエーター、もしくはWebクリエーターを目指す人がターゲットなので、事実上の業界標準、ガイドラインには逆らえない。なぜなら、仕事が狭まるからだ。一般のアマチュア層、ビジネスユーザー、アート系アーティストとは、明確な線引きがある。
業界があって、仕事があって、ツールが存在する。もっと露骨に言えば、生活のためのツール習得であり、仕事に役立つ実践的なものでなければならない。（本当は、それだけではダメで、クリエーターのエゴがある程度許されないと成り立たないのだが‥）

ある意味、Flash本よりシビアなのかもしれない。
‥などと考えていたら、先に進まないので、どこかで割り切るが、現在、１つの流れが出来つつあることは意識しておくべきだろう。

子供が語るFlash

本の原稿執筆と企画書など、デスクワークが続く。Dreamweaver 本は、いよいよ後半戦。現在、取材もあるので、滞在ホテルが作業場である。猛暑なので、室内作業は都合がいい。夜になると浜辺から花火の音が聞こえる。

ラーニングサイトのレポートを書くため、久々に長時間のネット閲覧。今回は、小学生、中学生、高校生のラーニングサイトを探す。”小学生のための〜”ではなく、”小学生が運営している”ラーニングサイトである。

子供たちが自分のサイトを公開している「★ふみコミュニティ★」など、大きなところを中心にまわる。「これ、ほんと小学生が書いてるか？」と疑いたくなるほど有益なサイトもあり、

毎度のことながら‥びっくりする。著作権を侵害するような行為があると、（ポータルの判断で）ページを削除されるので、著作物を貼り付けたようなサイトはなかった。

さきほど発見した「アミュレット」というサイトは、年齢がグッと上がって17歳の高校生だが、なかなか良くまとめたHTML講座を公開している。テンプレートなども公開しているせいか、毎日1,000アクセスほどある。

前にも書いたことがあるが、自分が習得したことを他人に自慢したり、教えてあげたくなるのは自己表現欲求であり、子供たちも強く持っている。Webサイトという表現手段がこれだけ普及してくると、当然ラーニングサイトも増えてくる。

小学生のラーニングサイト、といっても軽く見てはいけない。ユーザビリティ、アクセシビリティとか、そういう用語は使っていないが、分かりやすい言葉で問題提起している。「おばあちゃんにも読んでもらえるHPとは」などと、身近なところから入っているのだ。

小学生に「ほとんどのフラッシュはうざい」などと書かれると寂しい気持ちになるが、使いやすく作ってくれよ、と言っているわけだ。数年前だが、ある高校生が運営していたサイトにゲーム講座があって、私もよく勉強した。学習社会というのは、こういうことか‥と実感したのだ。実社会で高校生に習う機会はほとんどない。しかし、ネットではよくあることだ。

プロのクリエーターや企業、学校が運営しているラーニングサイトに欠けているものを発見できる。ただ、学校を卒業して社会人になったら、同化してしまうのだ。だから、小学生、中学生、高校生のラーニングサイトという括りで見る。個人を追うことはない。今回のレポートでは、そこを掘り下げてみたい。

参院選開票速報

Flash を活用した開票速報、今回もなかった。
多くの開票速報サイトは、JavaScriptもしくはJavaを採用していた。選挙の開票速報などは、（エンタテインメントの呪縛から抜け出すための）効果的なショーケースになるので、選挙の度にコンテンツホルダーとのタイアップを期待しているのだが‥

CSSから学習する人たち急増中！

打ち合わせの後、CSSの勉強会があったので、見学してきた。一般向けのCSS勉強会、と聞いていたので興味があったのだ。
始まってすぐに”一般向け”という意味がわかった。集まっている人の半分くらいは、本格的なWebサイトを作ったことがないのである。HTMLについては、ほどほど知っているが、通常あまり意識していないようだ。

では、なぜ‥こういう場が成り立つのかというと、「ブログのデザイン」がテーマだったからだ。ブログの場合、HTMLは自動生成され、デザインについてはCSSを編集するしかない。

しかし、まさかHTMLを飛び越えて、CSSからスタートする人たちが出てくるとは想像もしていなかった。この方々は、

最初から、HTMLは文書構造が記述されるもので、文字の大きさやスタイル、カラー、ページのレイアウトはCSSを使う、という認識で学んでいるのだ。

プラットフォームは、ココログとかブログ人など大手サービスが提供しているものだが、CSSをダイレクトに編集しているので、私が執筆しているDreamweaver本のCSSパートの内容と何ら変わりがない。

例えば、ココログやブログ人だと、記事を引用表示したい場合、引用文を選択して［引用］アイコンをクリックする。すると、blockquoteタグが記述される。通常、これをブラウザで表示すると、左右に余白ができて、インデントのような表示になるが、今日集まった皆さんは、「ここから引用ですよ」というマークアップの理解しかない。
どう表示するかは、自分で決めるという話になる。ブラウザの解釈と同じように左右に余白を作るのか、線で囲むのか、地に色を付けるのか、全て自分が決めるのである。要するに、CSSで blockquoteの視覚表現を定義するのだ。

まだ一部の特殊な事例かもしれないが、ブログが普及してきて、自分なりにページをデザインしたいと思ったら、CSSを学習するしかないので、こういう勉強会は増えるだろう。
多分、書籍もどんどん出版されるはずだ。ブログのページデザインという本は、需要が出てきていると思う。

Dreamweaver本を書いていて、テーブルでレイアウト〜云々という解説に違和感が出てきてしまった。まぁ、ハイブリッド・デザインについては外せないが、CSSについても正しく解説しないといけない。

WebデザインとJIS規格

Dreamweaverの書籍執筆モードに再突入。
現在、避暑地に逃げているせいか、暑さの苦痛はない。Dreamweaver MX 2004のCSSワールドに戸惑いながらも、ハイブリッドデザイン最後の本であることを感じる。

日本規格協会が、「JIS X 8341-3:2004」を公示した。アクセシビリティに配慮したWebコンテンツを企画、開発、運用するための基本方針などを掲げている。CSSの使用やテーブルレイアウトは極力避ける、フレームは推奨しない等、Webクリエーターにとっては、すでに配慮済みのことだが、JIS規格として公示されることの影響力は大きいかもしれない。
クライアントからの要望が強くなっている傾向はすでにある。

ブログが流行ってきたことで、個人サイトの方が、XHTML+CSSの基本的要件を満たし、プロのWebデザインが現在でもテーブルレイアウトや装飾画像をHTMLで扱っているというのは、皮肉な状況だ。

Webクリエーターは全て理解した上で、ハイブリッド・デザインを扱うことが大切だ。もちろん、CSS デザインのスキルは必須。現状、強引に移行することの問題も多いので、臨機応変がしばらく続くと思うが、依頼されたら、即対応しないといけない。CSSを勉強しながら仕事を進められるほど、簡単ではないので先送りは、かなり不安。

勉強するなら、やっぱり‥今から、という話になる。
100%適用できる状況に到ってないが、今からスキルを磨くことは、すごく重要なことかもしれない。

JIS X 8341-3:2004
高齢者・障害者等配慮設計指針−情報通信における機器，ソフトウェア及びサービス−第３部：ウェブコンテンツ
Guidelines for older persons and persons with disabilities -- Information and communications equipment, software and services -- Part 3: Web content