SSK World

ちょっと前の記事にしたばかりのエプソンとキヤノンのカラーインクジェットプリンタ戦争が、この秋の新機種を立てての新ラウンドに突入しました。キヤノンの新製品は、一見しただけではとてもプリンタに見えないような箱形の外観が印象的です。見た目だけではなく、前面の給紙カセットや自動両面印刷を標準装備し、使い勝手の面でもこれまでのインクジェットプリンタの枠を超えたものを感じます。

一方のエプソンは、高性能の複合機を前面に出しています。これまでは、複合機というと下位クラスのプリンタと下位クラスのスキャナの組み合わせで、「一応カラーコピーができますよ」というレベルでしたが、今回は多色インクによる写真画質プリンタとネガフィルムも読める高解像度のスキャナ…という今どきの売れ筋同士の組み合わせです。ようやく自分でも使う気になれそうなものが出てきました。

両社の広告を見ていると、プリンタがこれまでの定位置だったパソコン脇から離れたがっているように見えてなりません。デジタルカメラの普及が進んですっかり一般的になり、銀塩写真をマニアックな趣味の道具に追いやろうとしている今、プリンタの活躍の場はどんどん増えています。パソコンの周辺機器という枠を飛び出した両社の切磋琢磨に今後とも期待しましょう。

SSK WorldのWebサーバーを移転し、デザインも一新しました。移行作業自体はもう2ヶ月以上の間続けていたんですが、仕事やその他いろいろ忙しいこともあり、なかなか作業が進んでいませんでした。実際にまだオープンしていないコーナーもあったりしますが、少しずつ整えていく予定です。

これに伴い、URLそのものも変更しています。とは言っても最後の3文字が違うだけなんですが、これが違っては正しいWebサイトにはたどり着けません。当面はどちらでもアクセスできるようにしておく予定ですが、「表玄関はドットネット」ということでお願いします。

私のWebデザインのコンセプトは「シンプルにかっこよく」ということで昔から変わっていないつもりなんですが、そのために使う手段はいろいろと変わってきました。今回のキーテクノロジはスタイルシート。これまでも取り組んではきた技術なんですが、今回はCSS2の機能をかなり突っ込んだところまで使っています。

トップページは2段組のデザインになりました。これまでなら「透明な表組み」を使ってレイアウトするのが常套手段で、商用サイトでもそうしているものが多いのですが、私のトップページには表組みが一切ありません。スタイルシートでは文字や画像の入った枠をかなり自由に配置できるので、今回はこれを利用しています。

また、今回最大の「仕掛け」は、左側に各コーナーのアイコンを並べて、マウスでポイントするとコーナー名がポップアップして表示される、「サイドバー」と名付けたメニューだと思っているんですが、これもスタイルシートとJavaScriptだけで作られています。今どきのブラウザの標準機能だけで動いていますから、プラグインなどの面倒はありません。ここがFlashとの最大の違いかも。細かいことを言うと、他にもこの技法ならではのことがいろいろあるんですが。

ただ、これは対応ブラウザを比較的新しいものに限定したからこそできることで、より多くの人に見てもらう必要性が高い商用サイトではなかなかここまで踏ん切れないところもあると思います。さらに、「CSS2に対応」を謳っている各ブラウザの間でもレイアウトに対する解釈が違い、表示がずれてしまうものがあるんです。これがInternet Explorer と Mozilla や Opera との間で違うのならともかく、Internet Explorerの5.5と6とで違ったりするので話はややこしくなります。このあたりのバランスを取るためにずいぶん時間を使ってしまったのが実情です。

既に各ブラウザのバグを利用したスタイルシート適用の振り分け方法が確立しているので、トップページに挙げたようなブラウザでは、大きな破綻のない画面が表示されるはずです。一部「Operaだとずれてるなぁ」などの現象が残っているんですが、これについては最大シェアを持つInternet Explorerで最適になるように調整しました。ただ、他の環境で、特にApple Mac用のInternet ExplorerやSafari（Mac OS Xの標準ブラウザですね）あたりでどう見えるのかは気になるところです。Macユーザーの皆さん、良かったら私に教えてください。

スタイルシートを使ったことで、もう一つ利点がありました。矛盾した話のようですが、スタイルシートに対応していないブラウザへの対応度が上がったんです。これには、あの悪名高いNetscape Navigator 4.xへのスタイルシートの適用を完全に回避できる方法がわかったこともあるんですが、それだけではありません。例えば携帯電話で見てもこれまでよりは画像の少ないシンプルなサイトを見られるようになっています。ただ、ケータイ向けには最適化ができていないので、パケット通信料のことを考えてもあまり積極的にはお勧めできませんが。

スタイルシートの本質は、画面を派手に飾り付けることよりもむしろ、飾り付けの部分をスタイルシートとしてHTMLから分離し、残ったHTMLの側はテキストの内容に集中できる…というところにあります。先に挙げた「レイアウト制御のための透明な表組みの使用」などは、これとは対極にあるものですよね。

こうすることによって、編集する私からするとページ全体の見通しが良くなり、更新や修正、リニューアルといった作業もこれまでより簡単になります。さらに、こうして整理できたHTMLは機械からも読みやすくなるという利点が出てきます。Googleなどのロボット型検索エンジンは、HTMLタグなどの構造を見てページの内容を判断しているらしいですからね。最近はやりのキーワードの一つであるSEO（Search Engine Optimization：検索エンジンに向けた最適化）にも役立つわけです。

Webサイトは「中身が大事、でも見た目も大事」だと思っていますが、こうしてそれぞれの管理を分離することによって、それぞれを大事にすることができるような気がします。そういえば、スタイルシートが最近普及してきた理由の一つに、ブログツールでスタイルシートがデザインの制御に使われていることがあるらしいですね。ブログはまさに中身が勝負。でも、見た目にだってこだわってみたい…そう、どちらも大事なんですね。