世界ランキング情報を提供する Alexa で紹介しているトップ200のサイトのコードを検証した結果が The W3C HTML WG Top 200 (Alexa) Sites で紹介されています。ほとんどのサイトが正しく HTML/CSS が書かれていないのが分かります。

ただし、この結果は 2007年7月に調査されたので、現在もまったく同じ状況かといったらそういうわけではありません。例えば結果では DOCTYPE が書かれていないと表記されている Yahoo Japan は、現在では DOCTYPE が書かれています。また、ウェブアクセシビリティのガイドラインといえる WAI の警告が出ているサイトで、6以上あるサイトはひとつもありません。より多くの方にサイトにアクセスしてもらうための努力はされているのではないでしょうか。

正しくマークアップすることが重要でないから、このような結果になったとは一概には言えません。そして Valid でなければ、すべて「正しくない」とも言えないと思います。ただし正しくマークアップすることが、サイトを立ち上げてメンテナンスする際に生じる他の重要項目に比べると低いのかもしれません。実際それほど重要度は高くないのか、それとも啓蒙されきれていないのか、考えて行きたい部分です。

首都圏、関西圏で普段通勤通学に電車・地下鉄を使っている人なら、気が付いている人もいるかもしれません。最近駅の案内表示(看板)が、地の色が濃色（濃紺・黒に近いグレー・黒に近いグリーン等）で文字が白色のデザインに変更されたり、ホームの入り口近くの柱や階段・エスカレーターの出入り口の壁に大きく行き先が掲示されるようになりました。以前と比べて、表示がすぐ見つかり、かつ読みやすくなり、迷うことが減ってきたという気がしませんか。あと、駅以外の場所でも標識・案内に日本語以外に英語・中国語・ハングルの表記がなされることが増えてきました。 続きを読む

先週はウェブのプロモーションツールとしての活用が広がったことにより、ウェブサイト構築に営業・マーケティングセクションが関与する必要性が増してきたことを指摘しました。このこと自体はもはや常識ともいえるところですが、それだけではすまないような状況が広がりつつあります。

プロモーションの目的についてもう一度考え直してみましょう。プロモーションの目的は、あるメッセージをできるだけターゲットに対し広く・深く浸透させることです。ここで重要なのは、消費者の意識にメッセージを浸透させることであり、「サイトへのアクセスを増やすことではない」ということです。 続きを読む

といっても少し、まだ先の話だ。ただし、確実にtransformをFirefox3はサポートする。ただ、そもそもtransformとはなんぞやと思ってる方も多いとおもうので少し紹介しよう。transformとは主にボックスに対してscale(拡大／縮小)、skew(斜めへの傾き)、translate(移動)、rotate(回転)、とそれぞれ指定ができる。これはマウスをのせた状態（hover）に対しても指定が可能。いままでは、このプロパティに関してはwebkit系のみがサポートをしていたが遂にmozillaもサポートサポートを始めたようだ。ただし、minefieldというプロトタイプのみだ。このプロトタイプは以下のURLからダウンロードすることができる。

minefield
http://ftp.mozilla.org/pub/mozilla.org/firefox/nightly/latest-trunk/

さていよいよ肝心の書き方だが全てにvendor prefix(接頭辞)の-moz-をつけることになる。

まずはrotate(回転)

body{
-moz-transform: rotate(90deg);
}

※deg=degree(度)の略

これでウェブサイトが時計回りに90度回転する。非常に面白い機能だ。

transformには、他にも様々なプロパティが用意されている、SafariでもchromeでもそしてFirefoxのminefieldでも自由に試してみることができる。
確実にCSS3の時代はそこまできている。ただCSS3はまだ使い方というのはあまり、研究されていない。しかし研究をすれば使い方によっては人を驚かせるような素晴らしいUXを提供することができる。常に先をみてCSSを楽しもう！

※-moz-に関してはmozillaのブラウザーの開発者であるRobert O’CallahanがmozillaのWebTechブログにて最近ではOKと述べているので使用の是非についてはいまさら議論の余地はないだろう。

• 参考
  
  http://www.w3.org/TR/SVG/coords.html#TransformMatrixDefined
  

あなたが運営に携わっているウェブサイトは，何を目的として開設されているのでしょうか．一口にウェブサイトといっても，顧客や投資家への「情報開示」を目的としたものもあれば，商品やサービスの認知を拡大する「プロモーション」を目的としたものもあります．そしてネットバンキングや航空会社のサイトのように顧客との「取引の場」として設けられているものまであります．

それぞれ目的が異なるのですから，自ずとサイトの設計も変わってきます．「情報開示」のように必要な情報が「公開されている」ことそのものが重要である場合，各コンテンツへのアクセシビリティの良さと，更新の容易さを追求すればいいわけですが，「プロモーション」を目的となるとそれだけでは済みません． 続きを読む

各ブラウザでは、W3C の CSS の仕様では未だに草案段階のものや、仕様ではまだ十分な説明がされていないものを実験的に実装しています。Mozilla では「-moz」、Safari では「-webkit」、Opera では「-o」という接頭辞を追加して属性を記述すると、特定のブラウザに対して属性を継承させることが出来ます。こうした方法で各ブラウザで、いちはやく CSS3 を実装しています。

• Mozilla CSS Extension
• Safari Supported CSS Properties
• Opera 9 の CSS サポート

IE8 でも同様のアプローチがとられるらしく「-ms」と記述することで CSS3 や独自属性が使えるようになるみたいです。詳しくは Microsoft CSS Vendor Extensions をご覧ください。

Photoshop は機能がとても多いアプリケーションなので、それらをすぐに使えるようにキーボードショートカットも豊富に用意されています。CreativeTechsが提供するこちらのPDFファイルは、Photoshop で使えるショートカットをすべて網羅。たくさんあるショートカットを４ページとコンパクトにまとまっています。以下にぜひ知っておきたいショートカットを幾つかピックアップしておきます。ちなみに Windows で Photoshop を使った場合のリストになります。Macでは、CtrlをCmd、BackspaceをDeleteに変えて使ってください。

続きを読む

先週はウェブサイトの構成に注目し、サイトから内部の実態が透けて見えることを指摘しました。今週も引き続き企業や学校といった組織が運営するサイトについて考察していきたいと思います。

サイトの構成から内部の実態が透けて見えるという指摘を受けてドキッとされた方、いらっしゃると思います。急いで対処しなければ、、、、ということになるのですが、ちょっと待ってください。ここでやり方を間違うと、状況はさらに悪化してしまうのです。 続きを読む

と言ってもリリースはもう少し先のようだ。
だがmozillaの開発メンバーであるJohn DaggetsはMinefieldというWebfontsを使えるバージョンをついに紹介した。いままでデザイナーはユーザーのPCにインストールされているフォントしかウェブサイトで利用することができず見出しに画像を利用したり画像置換を利用して好みのフォントをウェブサイトでは表示してきた。

続きを読む

iPhone も 2.1 になってから、やっとスピーディに文字入力が出来るようになってきました。慣れてくると随分早く記入出来るようになりますが、押した感覚を作り出すことが出来ないタッチインターフェイスなので、もしかすると従来の入力方法とは別の方法が必要なのかもしれません。

Swypeは、タッチインターフェイスで考えられる別の入力方法を提案しています。タッチスクリーン上をスイスイ指を動かしながら入力するというこの方法。上達すると１分間に 50文字も書けるようになるそうです。