さて今年も初っぱなから小難しい話でスタート。

• ドリコム、2月9日東証マザーズに新規上場へ
• Number7110（ドリコム社長のブログ）

ドリコムがマザーズ上場へ

新年早々、注目してきたIT企業「ドリコム」さんが上場するというニュース。とても技術力を持った会社で、最近では特にブログ関連事業に力を入れている。

WYSIWYG×Webツール＝ドリコムCMS

Web2.0なサービスを立て続けにリリースしてきた同社のサービスの中でも特に興味深いのがドリコムCMS。要するにブログCMSのような手軽さと、WYSIWYGソフトの自由度のメリットを併せ持ったサービスであるようだ。

このドリコムCMSのサイト自体も同サービスを用いて作成されているのでデザイン・ソースをみればどんな感じのサービスなのかある程度うかがい知ることができる。

ユーザーにはある程度以上のHTMLは必要

しかし、やれWYSIWYGだ、やれCMSだといっても、結局それらはHTMLを知らない人にとっては福音でもなんでもないよなー、という一種の違和感は拭えないでいたりする。

• SEO対策が万全といっても、知らない人にキーワードの選別ができるとは思えない
• いくら自動化されているといっても画像そのものは自分で用意しないといけない。MSペイントから排出されたBMP画像ではちょっとマズいと思う。
• 結局は熟考された論理構造のHTML文書にはかなわない。
• ブログという単純なCMSにさえ結構みんな四苦八苦しているのに、さらに自由度を増やしたツールを初心者が使いこなせるだろうか。

んでも逆を言えばHTMLを知っている人にとってはこのCMSツールの恩恵にあずかれそうだ。制作は制作会社に依頼しちゃってあとの更新作業は自社でやれる、というのがベストな使い方で最大のメリットのような気がする。それなら双方に利益があるわけだし。

• Sensitive: クイズ

firefoxでしか見られないページなのですが、これはどうやって表示されているのでしょうか？
http://cow.neondragon.net/stuff/nocode.php

面白いクイズがあったのでやってみた。

＃回答はつづきから

• 2005年 ウェブ・デザインの間違いトップ10

Web 2.0が声高に叫ばれる時代だが、もっと基本的なWebデザインもまた重要だ。そこで、ちょうど「ウェブ・デザインの間違いトップ10」というページを見かけたので、自分のサイトを照らし合わせつつ、考えてみたい。

＃関係ないけど、なんで「Web2」とか「NextWeb」じゃなくて「Web 2.0」なんだろう

1. 読みやすさに関する問題

フォントサイズ (△)

Web情報の大部分である文字情報。その可読性はユーザービリティの最も基本となるものだ。

誤解が多いが基準となるフォントサイズはユーザーが決めているものであって、フォントサイズ・デザインは（情報の重要度に対する）相対比でなければならない。よほどの理由がない限り固定フォントサイズは使うべきでない。

余談だが、Firefoxなどの先進的なブラウザでは固定フォントのサイズ変更が可能だったり、最小フォントサイズを指定できる。

＃とかいいつつ、このサイトの基本サイズは1emの90%…

行間サイズ (○)

ブラウザが基準にしている行間サイズは、アルファベット・フォントに最適化されているため、日本語フォントには狭い。だいたい1.2〜1.8倍のサイズを指定するとより読みやすくなるようだ。

SEO向きでもなく、嫌いなwindow.open()だが

window.open()は嫌いだ。だがWebをやっていれば使わざるを得ないときもある。じゃあ、使うときにはどうしたらいいんだ、というお話。

javascriptリンクはアンカーリンクではない

まずwindow.open()の問題点を挙げよう。

• javascriptが有効でないとページを閲覧できない
• 検索エンジンに登録されづらくなる^*

※Googleのボットは拾ってくれるみたい。

つべこべ言わずにサンプル・コード

普通にwindow.open()を使った場合のサンプル。

<a href="javascript:window.open('http://example.com');">アンカーテキスト</a>

アクセシビリティ＋SEOを考慮した場合のサンプル。

<a href="http://example.com" target="_blank" onclick="window.open('http://example.com');return false;">アンカーテキスト</a>

こう使えば上記の問題点は解消される。しかしwindow.open()は嫌いだ。

もしも、手間を惜しまず、理想主義的に「HTMLによる完璧にマークアップされた文書」を目指すのであれば、日本語特有である「漢字」についてもまた配慮が必要だと思う。

理想的「漢字HTML文書」の書き方

例えば「紫陽花」という単語をマークアップしてみたい。

<ruby>
<rb>紫陽花</rb>
<rp>(</rp>
<rt>あじさい</rt>
<rp>)</rp>
</ruby>

紫陽花 ( あじさい )

要するにすべての漢字と、すべての振り仮名を、文書に同封すべきだ、ということ。

これを文書内のすべての漢字に適用し、さらにCLASS名による意味づけも加えてみる。

<ruby class="difficult"><rb>紫陽花</rb><rp>(</rp><rt>あじさい</rt><rp>)</rp></ruby> が<ruby class="easy"><rb>咲</rb><rp>(</rp><rt>さ</rt><rp>)</rp></ruby>いている。

すると何ができるか？

以上のような理想的な文書では、次のような複数のスタイルシートを用意することで、閲覧者が適した漢字表示を選択することができる。

/* すべてひらがなで表示 */
RUBY RB { display: none; }
RUBY RT { margin:0;padding:0;font-size:100%; }

/* 簡単な漢字のみを表示 */
RUBY RT { display: none; }
RUBY.easy RT { margin:0;padding:0;font-size:100%; }
RUBY.easy RB { display:none; }

/* 難しい漢字も表示 */
RUBY RT { display: none; }
RUBY.easy RT, RUBY.difficult RT { margin:0;padding:0;font-size:100%; }
RUBY.easy RB, RUBY.difficult RB { display:none; }

なんて馬鹿なことを

全くもって「んなアホな」というカンジ・・・なのだが、将来的にはこれと同じことを機械がやることになると思う。なぜならば、検索における文字揺れの問題を解決することができるからだ。

＃いや、ほんと

サムネイル画像を作るのが面倒

ブログを書き続けていると、サイトを紹介する記事なんかも出てくる。で、そんな時にはリンクと一緒に"サイトのキャプチャ画像"を貼り付けておくと親切なのだが、これがまた手間の掛かる作業。

サイトキャプチャ画像を使い回す

ということで人様が作成した画像を使い回すという案を思いついた。…というか以前からあったらしい。

<img src="http://pthumbnails.alexa.com/image_server.cgi?id=[yoursite.com]&size=large&url=examplesite.com" width="201" height="147" alt="" />

<img src=" http://pthumbnails.alexa.com/image_server.cgi?id=[yoursite.com]&size=small&url=examplesite.com" width="111" height="82" alt="" />

画像提供はAlexaより。著作権も問題ないらしい。

ちなみに「とりココ.com」のようなマイナーなサイトの画像は無いのでAlexaのロゴ画像が表示される。

もっと柔軟なサービスが欲しいかも

ものすごく贅沢な悩みかも知れないが

<img src=" http://example.com/?url=http://www.toricoco.com/index.html&width=640&height=480" />

のような感じで常にサムネイル画像を返してくれるWebサービスがあったら、とか思う。

＃サーバーの負担がヒドそうなので誰もやらないだろうが…

どっちが使いやすいだろうか？

チェックボックスをクリック

<input type="checkbox" />チェックボックスをクリック

この文字列をクリックでもOK!

<input id="test_checkbox" type="checkbox" /><label for="test_checkbox">この文字列をクリックでもOK!</label>

いわずもがな、だと思う。

まだまだ足りないWebアクセシビリティ

Webクリエーターの端くれとして、自分がWebを閲覧していてチェックボックスやラジオボタンを見かけたときにはまず隣にある文字列をクリックするようにしている。

…そしてほとんどの場合、その行為は無駄に終わる事になるのだ。

知らないから使われないという悪循環

Googleなんかだとこの辺もキチっとしているのだが、ほとんどの人は腕をプルプルさせながら「日本語のページを検索」の脇の小っちぇえラジオボタンに向けてカーソルを動かしてしまう。

…いちWeb制作者としてこの現状は少し胸に痛い。

＃ちなみにIEだと<label>で画像を囲っても機能を果たさない。

関連記事

• なんで英語やねん

意外と知らない「複数のクラス指定」

少しこのブログの本流のひとつのはずである「Webデザイン」ネタを久々に。

CSSによるデザイン指定は

• HTMLタグの再定義
• IDによる指定
• CLASSによる指定
• タグ埋め込みによる直接指定

の四種類に分類されるが、「CLASSによる指定」のみ複数の要素を適用できる。

百聞は一見にしかず。サンプルコード

CSSによるCLASS定義

.bold { font-weight:bold; }
.italic { font-style: italic; }
.big { font-size: 120%; }

HTMLからの複数のクラス指定

<span class="bold italic big">太字＋斜体＋サイズ大</span>

ブラウザ表示

太字＋斜体＋サイズ大

備考

• クラス名は半角スペースで区切る
• デザインの優先順位は後方指定が優先される

CLASS定義を細かくすれば効率があがりそうだけど、HTMLにCLASS名をだらだら連ねるのも大変。どう活用するかは使う人次第かな。ちょこっとデザインを変えたいときには有用かも。

ブラウザ対応状況

※8月5日更新

オーサリングソフト対応状況

※8月5日更新

＃テーブルレイアウトを整えたりは後ほど。

去る7月4日、マイクロソフト運営「MSN」がリニューアル。デザインがCSSに切り替わったりしているので誰か検証するだろうと思ったら、未だに見あたらないので自分で検証してみる。

思いがけない発見、"PICS指定"

PICSは青少年にふさわしくない情報をフィルタリングするのに用いられる。曰く、MSNは

• 暴力的表現：「傷害（動物・物的損傷）」まで
• 性的表現：「情熱的なキス」まで
• 性的露出：「水着などの露出的な服装」まで
• 言葉表現：「おだやかな悪口」まで

だそう。まあ、納得。

HTMLを検証

Another HTML-lint gatewayでHTMLを検証。HTMLコードは、サーバーがIE6用に動的に排出したものを使用。

XHTML1.0 Transitional としてチェックしました。
269個のエラーがありました。このHTMLは 5点です。タグが 35種類 755組使われています。

実はこれでもかなりの高得点。ヤフーは-112点、ライブドアは-87点など。

＃ちなみにとりココ.comは86点ｗ

CSSを検証

CSSはブラウザによって振り分けられ、特にIE/Firefoxで適切に表示される。しかしOperaブラウザではレイアウトがガタガタに崩れる。

よくコードを読んでみるとベースフォントサイズの"small"や、<UL>が"-30px"などがいけないぐらいで基本レイアウト自体は崩れてはいないようだ。

そこで、IE用のCSSをOperaに適用してみた。うん、悪くない。中心がずれているのはbodyを"margin:0 auto 0 auto"にしてないからだろう。

Opera用のMSN対応パッチ(Opera User JavaScript)

試しにコードを書いてみた。

//Fix for www.msn.co.jp
// 2005/07/20 by toricoco.com

if(location.href.match(/(^|\.)msn\.co\.jp\/home\.armx$/i) ){
document.addEventListener('load', msnIEcss, false);
}

function msnIEcss(){
var IEcss = "http://sc.msn.co.jp/css/newportal/newportal-win-ie6.css";
var tagLink = document.getElementsByTagName('LINK');
for (var i = 0; i < tagLink.length; i++){
if (tagLink[i].rel && tagLink[i].rel == "stylesheet") {
tagLink[i].href = IEcss;
}
}

document.getElementsByTagName('BODY')[0].style.width = '780px';
document.getElementsByTagName('BODY')[0].style.margin = '0 auto 0 auto';
}

もしもYahoo!JAPANがマイナーなサイトだったら

久々にWebデザインの話。少し根本を問い直してみよう。今回の引き合いは誰もがご存じYahoo!JAPAN。では、もしもYahoo!が誰も知らないマイナーなサイトだったらどうだろうか？

メジャーゆえのメリットは、マイナーにはデメリット

もしも自分が先入観無しにYahoo!を開いたら、まず間違いなく数秒後にページを閉じるであろう。それはなぜか、その原因を列挙してみよう。

1. 情報量が多い
2. サイトの趣旨がわからない
3. 検索窓はあるが使える可能性は低い

誤解しないで欲しいのはこれらはメリットでもある、ということ。ただその土台を成すものは「信用」に他ならない。つまりマイナーなサイトはこれらのメリットを捨て、これら直帰^*1に繋がる原因を克服しなければならない、ということだ。

*1「直帰」はページを開いた直後に帰ってしまう事を指す。