素材を駆使して表現力アップ　その３
ベクター形式によるイメージ描画方法

矢野りん／ライター

2006.08.01

　JPEGやGIFなどのビットマップ形式による画像の他、Webでは計算式を元にイメージを表示させるベクター形式という描画方法が利用できる。中でもSVGはW3Cが標準勧告したXMLの応用技術として知られている。

イメージをアクセシブルに

　絶対的な表示サイズに縛られず、色や形状の変更にも対応するベクター（ドロー）形式のイメージは、リアルタイムに変更が加わるチャート図の生成技術として期待されてきた。チャート図はWebサイトの内容理解を深める図版としても、また株式情報のような図に置き換えると理解がしやすい情報でも重宝する。

　こうした図の表示形式はJAVAアプレットやFlashのように書き出す仕組みを整えやすい形式に需要が集まり、SVGは図を描画する方法としてはあまり普及しなかった。2001年に標準勧告されながら、主要ブラウザでの表示サポートも進んでいないほどだ。

　しかし携帯端末に地図画像をリアルタイムに表示する仕組みなどではSVGを採用している開発者がたくさんいる。

　また、ブラウザに依存せずネットの技術を利用するウィジェットという技術ではSVGや、javaScriptで描画をコントロールするCanvasという手法が主に使われている。ビットマップ形式のように文字要素が取り出せなくなることもなく、システムとの親和性が高いベクター形式は人にも機械にもアクセシブルな画像描画方式なのだ。

アクセシブルな見出しが欲しい

　しかし地図やフローチャートをベクター化する機会は誰にでも訪れるものではない。それより普段頭を悩ますことになるのは、ページの見出し要素ではないだろうか？アクセシビリティを考えると、見出しはテキストデータに限る。

　だがHTMLで指定できるフォントは欧文タイプを含めほんの一握りだ。日本語に至ってはMSゴシック、明朝くらいなものだろう。見かけを重視すれば、画像化した見出しを使うほかない。しかし本来テキストであるべき要素を画像化すると、代替テキストの指定をしたところで使い勝手は悪くなってしまう。

　こうしたデザイン上の制限を乗り越えるべく、ベクター形式であるFlashを応用してアクセシブルな見出しを作る試みがいくつかある。

　欧文フォント埋め込みではsIFR（Scalable Inman Flash Replacement）【図１】というswfの見出しをXHTMLの見出しと入れ替える技術に支持が集まっている。この技術を参考に日本語フォントの埋め込みに挑戦したBeautifulJapanese【図２】という技術も存在する。Flash8を併用すると、ドロップシャドーなどのエフェクトを適用した状態で、選択、コピーが可能な通常のテキストデータと同様に振る舞う見出しができる。

　しかしながらフォントデータを埋め込んで再配布することを禁じているフォントベンダーもあるので、利用の際は利用規約の確認を忘れず行うことが大事だ。