新年あけましておめでとうございます。

旧年中は格別のお引き立てを賜り、心より御礼申し上げます。
本年も変わらぬご愛顧の程お願いいたします。

平成22年　元旦
アイビーネット　スタッフ一同

学生時代に年間300本映画を観るという偉業を達成した身としては「100本観るなど通過点！」と思っていたのですが...、やっぱり年取ると集中力って無くなりますねw。見始めるとすぐ睡魔に襲われてしまい、結局74本しか見られませんでした。

観るだけではつまんないなと思い、作品ごと4段階に評価をしてみました(ついでに感想文も書いたのですが、それ載せるととんでもなく長くなるのでまたの機会に)。

参考にしていただき、お正月の暇つぶしにでも観ていただければうれしいです。

あっ、先に言っておきますが、ちょっと変わった内容の映画が好きなので、クセの強いタイトルが含まれているかも知れません。ご覧になるときは自己責任でお願いしますw。

(追記：12月31日、3本追加)

超オススメ映画

• ダークナイト
• ノーカントリー
• ヒットラーの贋札
• スネーク・フライト
• サンキュー・スモーキング
• キングダム/見えざる敵
• アポカリプト
• ウォッチメン
• パンズ・ラビリンス
• トゥモロー・ワールド
• ヱヴァンゲリヲン新劇場版：破
• バニー・レークは行方不明
• 善き人のためのソナタ
• イングロリアスバスターズ
• ロッキー・ザ・ファイナル
• グラン・トリノ

オススメ映画

• クローバーフィールド
• レボリューショナリー・ロード/燃え尽きるまで
• ミスト
• ゾンゲリア
• モンスター
• ゼア・ウィル・ビー・ブラッド
• 28日後...
• 28週後...
• リトル・ミス・サンシャイン
• アメリカン・スプレンダー
• 主人公は僕だった
• アダプテーション
• 太陽
• マシニスト
• トランスフォーマー
• みんなのいえ
• 寝取られ男のラブバカンス
• スピード・レーサー
• スカイ・クロラ
• ファイナル・デスティネーション
• バンク・ジョブ
• THISI IS IT
• リンガー! 替え玉★選手権
• ブラック・スネークモーン
• スパイナル・タップ
• ボディ・スナッチャー/恐怖の街(モノクロ版)
• 殺人の追憶

イマイチ映画

• ヘルボーイ2　ゴールデンアーミー
• インディージョーンズ　クリスタルスカル
• 夜になるまえに
• ザ・マジックアワー
• カポーティ
• ナショナルトレジャー
• ラッキー・ブレイク
• ハプニング
• 誰が電気自動車を殺したか?
• アメリカンビューティー
• ボラット 栄光ナル国家カザフスタンのためのアメリカ文化学習
• ナイトミュージアム
• スラムドッグ$ミリオネア
• いのちの食べ方
• ヱヴァンゲリヲン新劇場版：序
• ホット・ファズ 俺たちスーパーポリスメン!
• ラヂオの時間
• ビハインド・ザ・マスク
• ハンコック
• イエスマン
• 天然コケッコー
• マインド・ゲーム
• サイダーハウス・ルール
• カンフー・パンダ

つまらん映画

• 舞妓Haaan!!!
• 真夜中の弥次さん喜多さん
• ナインスゲート
• ア・ダーティ・シェイム
• ストーリーテリング
• リーピング
• 劇場版 天元突破グレンラガン 紅蓮篇

ちなみに学生の時の偉業は友人と達成したのですが、その時の評価の仕方は「ケツ(お尻)が痛いか痛くないか」の2段階でした。「長時間観ていても、集中していてケツが痛くなるのを忘れた」らいい映画という基準です。

なので、映画館を出た後「ケツ軽！」とか「ケツ痛！」とか言ってました。アホですなw。

では、よいお年を！

東海地方最大級の観光鍾乳洞

竜ヶ岩洞の公式サイトによると、2億5千万年前の石灰岩地帯に形成され、総延長1000ｍを越える東海地方最大級の観光鍾乳洞。観光ルートは約400ｍあるそう。

当日は相当蒸し暑かった事もあり、一歩洞内に入ればひんやり快適。
天然のクーラー（約18℃）がとても気持ちよかったです。

ライトアップされた洞内は神秘的な雰囲気で、途中に落差30mという滝もあり、意外にスリルを楽しめました。

ナンバーワンづくしのテーマパーク

鍾乳洞を出た後は、売店にてアイスを購入。
「静岡県のバスガイドさんが選ぶアイスクリ−ムNO1」に選ばれたというここのアイス、休憩中のほとんどの人が食べていました。

一番人気という「ホワイトクリーム」を食べました。シンプルな牛乳の風味が美味しかったです。

この竜ヶ岩洞、鍾乳洞の外は少々B級な匂いのするテーマパークです。

門には煙を吐く竜がお出迎え。

さらに各種顔ハメ大賞に輝いたという日本一の「顔はめ」。

本物のヘルメットを使用しており、顔のフィット感が最高だそう。（写真：失敗）

こんなお土産もあったんですね。
「話題のグッツ」原人君Tシャツ

先日こんな本を読みました。また百式さんでのモニター募集で当選した本です。ありがとうございます。

• イヤな客には売るな!

前回読んだ、同じ石原明さんの書籍「うちの社長はなぜああなのか」も刺激的なタイトルでしたが、こちらもなかなかのインパクトです。

「顧客化」がもっと重要な経営課題

タイトルの「イヤな客には売るな！」の意味は、

やたらと文句ばかりの人、不当な請求ばかりしてくる人、こちらの誠意に感謝の念を抱いてくれない人、サービスに対してお金を払うことを理解していない人、いわゆる"イヤな客"などに無理に商品を売り込んでも、それでは一時の利益にしかならず、問題ばかりでリピートも期待できません。

そんなことに時間をかけるのだったら、あなたの会社の商品やサービスをいつも喜んで買ってくれる人、新しい商品が出たらそれも喜んで買ってくれる人、そればかりか、あなたの会社や商品を他の人に紹介してくれる人、いわゆる"顧客"が現れるような施策に時間をかける方が未来につながります。だから"イヤな客には売るな！"

ということです。

で、このイイ客「顧客」をキチンと戦略を立てて増やしていこう、「顧客化戦略」を進めていきましょうというのが本書の内容です。

顧客化を進める4つのステップ

1.「集客」=見込み客を見つけて、多く集めること

いきなり誰かに売ろうとするのではなく、買う可能性のある人をなるべく多く見つけ、育ててから販売に移る方が効率がいい。そのため、集客という最初のステップが重要な意味を持つ。

2.「見込み客のフォロー」=見込み客をフォローして買いたいお客様に育てる

集めた見込み客を、買いたいお客様に育てるというステップ。興味をより大きくさせる、より強く関心を持ってもらうために情報を提供する、あるいは教育することが重要な意味を持つ。

3.「販売」=実際のセールス。買いたい見込み客に多く会い、主導権を持った販売を行う。

買いたい気持ちになっている客の「ホントに役に立つの？」などといった不安を取り除き、スムーズに販売につなげていく。

4.「顧客化」=購入客をフォローして、リピート販売・新商品購入・紹介につなげる

1度買ってくれたお客をフォローすることで、ファンになっていただく。

顧客化戦略のポイント・注意点

• 3分の2(75%)が顧客からの紹介と顧客のリピート、3分の1(25%)が新たな営業活動によって得たお客様であるのが理想的なバランス。
• もし顧客化率を100%にしてしまうと、次第にお客様の質が低下する危険があるし、集客の感覚が鈍る可能性がある。
• 商品やサービスを値段も含めて喜んで買ってくれない人「イヤな客」には売るべきではない。
• 「いい商品やサービスを提供していれば、お客様はずっと使い続けてくれる、だから顧客化はできる」は妄想。
• 「顧客化」の秘訣は自社のことをお客様の記憶から消さないこと。定期的に情報を投げかける必要がある。
• あなたがこの人を顧客にしようと思って、情報を発信することで主体的に顧客にしていくもの。
• 「顧客化」は仮に情報が17個あるなら、最後の17個まで伝えることでようやく成立する。
• 「顧客化」とは、伝えるべき情報を相手にすべて伝えること。
• 日本の人口が減ってきていることもあり「顧客化」はもっと重要な経営課題となっている。
  

まとめ

どちらかというと技術書を読むことが多いのですが、この本はかなり興味深く読めました。

全体的には「うん、知ってるわかってる」という内容でしたが、それぞれの「情報」をバラバラに知っていただけでした。本当はそれらを組み合わせ「しくみ」として構築しなければ結果は出せないんですよね。

それと「顧客化」は、ある程度のレベル以上のサービス(商品)を提供できていて初めてできることです。そして、そのサービスを理解して人に矛盾無く説明できるようにしておく必要があります。まずは「顧客化」の大前提としてこれらが出来るようにしておかなければいけませんね。

「本って面白いなぁ」と改めて思わせてくれたよい本でした。

アクセシビリティに少なからず関心を持っている方は、まず「アクセシビリティを考慮したポップアップウィンドウ」というタイトルに違和感を感じるかもしれません。アクセシビリティを考慮するならば、そもそもポップアップウィンドウ(別ウィンドウ)を使わない方がよいからです。

しかし、案件上ポップアップウィンドウを使わざるを得ない場合もあるでしょう。これから紹介する方法は、その時にできる限りアクセシビリティを保つための方法です。

通常のポップアップウィンドウ記述

よく使われるポップアップウィンドウの記述は、下記のようにJavaScriptを使います。

<a href="javascript:void(window.open('popup.html','',''));">

• ポップアップウィンドウ デモA

この記述ですとJavaScriptを無効にしてある場合、なにも起こりません。リンクがあるのに何も起こらないというのはかなり不親切です。ついでにポップアップウィンドウ先のページが検索エンジンに登録されません。検索エンジンのクローラーがJavaScript経由のページを見つけることができない(できにくい)からです。

アクセシブルなポップアップウィンドウ記述

JavaScriptが無効になっていてもリンクが機能する記述は下記になります。

<a href="popup.html" target="open" onclick="if (window.open) { window.open('popup.html','open',''); return false; };">

• ポップアップウィンドウ デモB

この記述であれば、JavaScriptが有効であればポップアップウィンドウが開き、無効であれば別ウィンドウでリンク先が開きます。そしてa要素でリンクが張ってありますので、検索エンジンに登録されます。SEOも考慮することができるのです。

通常のポップアップウィンドウに比べるとソースは長くなりますが、受ける恩恵を考えるとたいした問題にはならないと思います。一度おためしあれ。

少し前の話になりますが、社員旅行で有馬温泉に行ってきました。日程は、4月11日からの1泊2日です。お宿は「月光園」さん。

川を挟んで建物が2棟に別れており、なかなか趣のあるすてきな旅館でした。

• 有馬温泉 旅館 月光園

南京町でブルース・リーに会う

1日目は神戸の南京町にある中華街に行ったり、異人館に行ったりしました。下記の写真は、南京町にいたブルース・リーの横で見得を切る、弊社デザイナーの勇姿です。イカスw。

ガラガラのユニバーサルスタジオ

2日目はUSJに行ってきました。私はアメリカのUSJに行ったことがあるのですが、アトラクションはほとんど一緒でしたね。

USJには9時30分ごろ到着したのですが、なんか全体的に空いてましたね。どの乗り物も1?2時間並ぶのは当たり前の覚悟をしていたのですが、どれも20分程度で乗れてしまいました。乗れたのは下記の6つ。

• スパイダーマン・ザ・ライド
• ジュラシック・パーク・ザ・ライド
• ハリウッド・ドリーム・ザ・ライド
• バック・トゥ・ザ・フューチャー・ザ・ライド
• ウォーターワールド
• シュレック 4-D アドベンチャー

たくさん乗れたので大満足でしたが、ここまで空いていると人事ながら心配になりますね。やはり不況の影響なのでしょうか。もしかしたらGWも空いてたりして。

バック・トゥ・ザ・フューチャーの乗り場もガラガラでした。

最近の若い人はE.Tを知らない

そういえばE.Tのアトラクションがもうすぐ終わりだそうです。無くなる理由は「最近の若い人はE.Tを知らないから」という事だそうです。

...でも、そんな理由だとするなら「ウォーターワールド」の方が知名度無い気がしますけどね。作品自体も○○映画(※)でしたし。

※口に出すのもはばかられるような侮蔑の言葉です。自粛しました。

おまけ、ウォーリーを探せ！

園内のどこかで見つけたウォーリー。さあ、USJにいってウォーリーを探せ！

CSSの文字サイズの単位は何を使っていますか？IEで可変させることを考えてemや%、smallなどでしょうか。では、印刷用CSSの文字サイズ単位はどうでしょうか。pxでしょうか？emでしょうか？

プリントアウトのことを考慮している(ように見える)サイトのCSSをのぞいてみると、文字サイズをpt(ポイント)で指定しているサイトをよく見ます。なぜptなのでしょうか？

pxはPCのモニター上でのサイズ単位として使用されます。そしてptは印刷(出版)での物理的なサイズ単位(72pt ＝ 1インチ ＝ 2.54cm)として使用されます。PCのモニター解像度はdpi(dot per inch(1インチの中に何ドット))で表され、CSSでは「1pt = 1/72インチ」となり「1px = 1ドット」となります。

この事からわかるとおり、ptの場合はモニター解像度(dpi)が変わっても印刷サイズは変わりませんが、pxの場合はモニター解像度が変わると印刷サイズが変わります。

印刷用CSSの文字サイズ単位は"pt"がベスト

まあ、ややこしい話はここまでにして実際の物を見てください。

上記画像は、それぞれptとpxでサイズ指定をした文字を、モニター解像度を変えてプリントアウトし、スキャナで取り込んだ物です。見てわかるとおり、ptはモニター解像度で変化しませんが、pxはモニター解像度が変わるとサイズが変わります。

Winの標準的なモニター解像度は96dpiです。Macのモニター解像度も、OS9のときは72dpiでしたがOSXになってからは96dpiになりました(たぶん)。

MacもWinも同じ96dpiになったのであんまり影響はなくなってきているのかなと思いますが、どんな環境でも同じ文字サイズでプリントアウトされるようにということで、印刷用CSSの文字サイズは「pt」で指定するのがベストではないでしょうか。

通常は10ptか11ptで

ちなみに指定するpt数ですが、通常は10ptか11ptにすると文字サイズのバランスが良いかと思います。高齢者を対象にしたサイトなどの場合は、12pt以上にするとアクセシビリティが向上するでしょう。

おまけ

自分のモニター解像度がよく分からない場合は、下記HTMLにアクセスしてみてください。何dpiかがわかります。

• dpi_check.html

• だから、部下がついてこない！
• バカを使いこなす聞き方・話し方

結構売れた本らしいのですが「こんな本が上司の机の上に置いてあったら、部下がどんな気持ちになるかわかんないのかなぁ。それに、部下に『こんな本読んでるんだ』と思われるのって、スゴく格好悪いと思うんだけどなぁ。だめだなぁ。」なんてことを思ったことがあります(読んでいないので、でたらめな事言ってるかも知れません)。

こういう本は、家でこっそり読んで欲しいですよね。

書籍「うちの社長はなぜああなのか」

話変わって、先週の日曜日にこんな本を家でこっそり読みましたw。百式さんでのモニター募集で当選した本です。ありがとうございます。

• うちの社長はなぜああなのか

こんなタイトルの本が社員の机の上に置いてあったら、社長はいやでしょうねw。タイトルだけ見るとネガティブな印象をもたれそうですが、中身はとてもポジティブな内容です。

2時間強で読めてしまったので「この前読んだ速読術本の効果か！」なんて思いましたが、そうではなく、この本自体がとても読みやすいからでした。著者の体験を元にストーリー仕立てで書かれており、スラスラと読み進めることができます。

大企業病は組織の病、中小企業病は社長の病

著者は経営コンサルタントの石原明さんです。いろいろな企業をコンサルしていく中で、中小企業が伸び悩む原因(中小企業病)はトップである社長に原因がある場合が多いとわかったそうです。そして、それらの社長はだいたい次の5つのタイプに分類できるとのこと。

• 「他者不信型」社長は愛に目覚めなければならない
• 「振り回され型」社長は格闘家にならなければならない
• 「目先没頭型」社長は仕事を忘れなければならない
• 「振り回し型」社長は部下にマネジメントしてもらわなければならない
• 「リスク回避型」社長はお金を使わなければならない

うまくいっていない中小企業の社長は、ほぼどれかのタイプか、もしくはどれかのタイプに特化していて他のタイプが若干ミックスされている状況なんだそうです。

欠点と長所は表裏一体ですから「他者不信型」でもうまくいっている会社はあります。うまくいっている間は問題ないのです。

しかし「キーパーソンが辞める」といった問題が起こるなど「あれ？最近なんか変だぞ、うちの会社」となったときに、その「なんか変だと感じる原因」を見つけるためのとっかかりとして、5つのタイプに分類して分析を進めていくのです。

社長がどのパターンかわかった次の展開として、その問題をどう解決していくといいか、というように進んでいくのですが、その解決方法が「まずは思考ではなく行動を変えてもらう」という点が面白かったです。

「人の思考を変えるのは至難の業です。だからまず行動してもらいます。行動が変われば自然に思考が変わるからです。」というのは名言ですね。行動を変えて実感が伴ってくれば、思考を変える自分への言い訳にもなりますしね。

自己診断で自分を見つめ直す

最後に自己診断ができるテスト用紙が添付されており「ああ、俺はこのパターンだ」という感じで、自分自身を振り返る事ができます。他人に診断してもらって客観的に見てもらう事もできます。

自分は技術書ばっかりであまりビジネス書というのは読まないのですが、この本はとても興味深く読めました。石原明さんの他の本も読んでみようと思います。

とりあえず「昔やっていた剣道を習い直そうかな？」なんてことを考えています。

• 「植木真のWebアクセシビリティはこう変わる！」開催
  2009年改定 JIS規格「JIS X 8341-3」草案を徹底研究する180分

1月22日に公開された「JIS X 8341-3：2009 改正原案」を見ながら、今までの「JIS X 8341-3：2004」からどのように変化をしているのか、対応方法はどのように変化してくるのかを教えてもらいました。

大きな変化として、2004年版では「推奨」と「必須」となっていた要求レベルが2009年版からはすべて必須になり、その中でアクセシビリティ達成等級が「A」「AA」「AAA」という形で付くようになりました。

とりあえず基準を満たす形ならば「A」、きちんと対応するならば「AA」、ガッツリ厳密にやるならば「AAA」ということです。

• JIS X 8341-3：2009 改正原案 (PDF：720KB)
  

JIS X 8341-3：2009　5つのキーワード

改正原案の前提として、5つのキーワードが挙げられました。

• 検証可能な基準
• 技術非依存
• アクセシビリティ・サポーテッド
• 依存する技術
• 国際標準との整合

検証可能な基準

2004年版は基準に曖昧さがあり客観的評価は不可能だったのですが、2009年版では検証がしやすいように具体的な数値で基準が決められました。

数値が具体的に出たものはチェックソフト等で機械的評価ができるので、その部分に関して判断がしやすくなりました。

しかし、機械的評価ができない基準(制作側で判断する基準)に関しては、逆に、2004年版よりも2009年版の方が曖昧な表現が多くなっています。

2004年度版では「HTMLでコレを実装する場合はこんな感じ」というように具体的な例(スクリーンショット)がある場合も多かったのですが、2009年度版では「HTMLでコレをどう実現するかは、制作者に判断をゆだねる」というスタンスになってきています。

いちおう例は載っているのですが「情報提供を目的としており、推奨を意味するのではない」となっており、別紙「Understanding WCAG 2.0」と「Techniques for WCAG2.0」に載っているという形になっています。

• Understanding WCAG 2.0(翻訳版)
• Techniques for WCAG2.0(英語のみ)

具体的な実装方法がはっきりしていない事もあり、独自で実装方法を考え、その方法に問題なさそうであれば「JISに対応している！」と宣言してもいいそうです。なーんか、文章にするとすっごい微妙な感じもしますが。

技術非依存

2004年版は、暗に「(X)HTML+CSS」ベースを想定していたそうですが、2009年版はありとあらゆるWebコンテンツに適応させられることを想定しています。

「Webの技術は常に変化していくので、具体例を載せてしまうと5年後には通用しなくなるかもしれないし、誤解を招く場合があるから」ということです。「検証可能な基準」といいながら具体的な例が無くなったのは、この考えからですね。

正直「4?5年したら、また検討すればいいんじゃないの？」とかって思ってしまいましたが...。

アクセシビリティ・サポーテッド

WCAG 2.0 では、「技術のアクセシビリティ・サポーテッドな使用法」という考え方を用いています。

で、この「技術をアクセシビリティ・サポーテッドな方法で用いる」というのは「支援技術(AT)および OS、ブラウザ、その他のユーザエージェントのアクセシビリティ機能と連携する」ということを意味します。あはは、なんのこっちゃですね。

かんたんに説明すると、アクセシビリティ・サポーテッドとは

1. Webコンテンツが「WCAG 2.0」で決められたアクセシブルな方法で制作されており、
2. それが、一般的なWebブラウザや音声読み上げソフトで利用できる方法であり、
3. ユーザーがその方法を用いてWebコンテンツをアクセシブルに利用できる
   

ことです。

用件を満たす技術が2つあったとするならば、みんなが使える技術を使いなさいという事ですね。セミナーでは、例として「alt属性」と「longdesc属性」が挙げられていました。

img要素に代替えテキストを用意してアクセシブルにしたい場合、alt属性でもlongdesc属性でも代替えテキストという用件は果たす事ができます。

しかし、longdesc属性に対応しているWebブラウザや音声読み上げソフトはほとんど無いので「longdesc属性はアクセシビリティ・サポーテッドな方法ではない」となり、達成基準を満たすことができない方法という事になります。

依存する技術

2004年版

JavaScriptをOFFにしている場合でも、コンテンツが利用できるようにしておく。
(イコール、JavaScriptでナビゲーションを提供するなって事)

2009年版

JavaScriptを利用してJISを達成できるならば、それはそれで問題ない。
なぜなら、ほとんどのWebブラウザでJavaScriptを利用できる(アクセシビリティ・サポーテッド方法である)から。

というように、2009年度版では「その技術を使うのがベストであり、かつアクセシビリティ・サポーテッドな方法で達成基準を満たしていればOK」というようになりました。

国際標準との整合

2004年版は(注1)日本語特有の問題など、JIS特有の項目を幾つか盛り込んでいました。そのため各国に支店を持つような国際企業の場合、ガイドラインがその国々に必要になりそれが負担になったりしていました。

そのため2009年度版では、その問題を考慮しWCAG2.0の内容をほとんどそのまま採用する形になりました。でもそうすると「日本語特有の問題はどうしたの？」となると思いますが、それらもWCAG2.0に含まれる形になりJISとの差はなくなりました。

注1：日本語特有の問題とは、「東　京」といったように単語内にスペースを入れた場合、音声読み上げの際に「とうきょう」ではなく「ひがしきょう」と読まれてしまう問題等のこと。

WCAG 2.0の4大原則を、JIS X 8341-3：2009でも採用

WCAG 2.0には下記の4大原則があるのですが、2009年版JISの方でもこれらを採用しています。上記の5つのキーワードと見比べればナルホドなという内容ですね。

原則1：知覚可能(Perceivable)

情報およびユーザインターフェースの構成要素は、利用者が知覚できる方法で提示される。

原則2：操作可能(Operable)

ユーザインターフェースの構成要素およびナビゲーションは、利用者が操作可能である。

原則3：理解可能(Understandable)

情報およびユーザーインターフェースの操作は、利用者が理解可能である。

原則4：ロバスト性(堅牢性)(Robust)

コンテンツは、支援技術を含む幅広い様々なユーザエージェントが確実に解釈できるように十分にロバスト(堅牢)である。

「原則4：ロバスト性」がちょっとわかりにくいですが、ようは、音声読み上げソフトやブラウザの種類など、さまざまな条件に左右されずに利用ができなければならない、という事です。

ちなみに「原則4.1：互換性(Compatible)」では「現在および将来のユーザーエージェント(支援技術を含む)で利用できるように、最大限の互換性を保つようにすること」となっています。

まとめ

2009年版は、機械的評価ができる基準ができた事でわかりやすくなった部分もありますが、制作側で判断する基準に関しては、逆に、2004年版よりも2009年版の方が曖昧な表現が多くなっています。

これにより、ちゃんと内容を理解できていない人は苦労する事になりそうですね。「この基準はこの方法で実装せよ！」なんて図入りの参考書ができれば売れそうな気もします。

それと、アクセシビリティ達成等級が「A」「AA」「AAA」という形になったことで「AAならばこれだけの工数です」といったように料金体系のメニューも区別しやすくなりそうです。

さて、後はこれらをどうやってビジネスに結びつけていくかですね。

アクセシビリティは、施したところでビジネスに直結するような性格のものではありません。この不況下、余裕がなければアクセシビリティは「まあ追々対応していきます」と後回しにされがちになります。

とはいえ「さあ必要になったぞ」となった時に対応できないでは話になりませんので、少しずつ理解を深めていこうかなと思っています。

あと余談ですが、今回のセミナー会場は机が用意されていなく椅子だけだったのですが、その椅子が堅いのなんの。そんな状態での3時間のセミナーだったので、ケツが割れそうでした...。

えっ？、最初から割れ(以下略)

追記：色々Webサイトのランキングがあるけれど、どれもイマイチ

質問コーナーの時に、下記の質問をしました。

Q：自分

「色々Webサイトのランキングがありますが『ココのランキングはしっかりやっている』というランキングはありますか？」

A：植木さん

「えーと、無いですw。まだまだどこも基準がいい加減です。例えば、某企業サイトランキングの場合『トップページから1クリックまでが審査範囲』となっていますが、これでは意味がありません。まあでも、参考になる部分が少しはあると思いますけどね。」

...うーん、厳しいご意見ですね。

先日、ある企業の担当者様から教えていただいて知った用語なのですが、過去の記事を見る限りでは2003年にはこの用語があったようです。

シャドーサイトとは、簡単に言えば不祥事を起こした際にアップする「お詫びページ」の事です。一般には公開しない形で用意をしておき、緊急時にそちらに切り替える形で運用をします。大企業などでは、危機管理体制の一つとしてこのシャドーサイトを用意しておく企業が年々増えてきているようです。

シャドーサイトという用語を初めて聞いたときには「また新手のSEOスパムが登場したのか」と思ってしまいましたw。

シャドーサイトはレベルに別けて用意

シャドーサイトは、起こった不祥事のレベルに別けて数パターン用意をしておくようです。たとえば危機レベル1〜4といったように4段階にしたとすると、すぐに切り替えが出来るようにCMSなどを用いてまずは仮ページを表示しておき、正式なコメントが出次第差し替えるという運用をするようです。

危機レベルおよび、シャドーサイト例

危機レベル1：会社の存続に関わる問題発生

トップページ全面差し替えパターン：例

危機レベル2：当社の製品、サービスが原因で人命に関わる問題発生

メインビジュアル差し替えパターン：例

危機レベル3：当社の製品、サービスが原因で健康に関わる問題発生

メインビジュアル直下にバナー作成パターン：例(09/02/23現在)

危機レベル4：ユーザーにお知らせするべき軽度の問題発生

ニュースリリースパターン：例

次にシャドーサイトは対応を経過で見られるページに変化

まず目的である「即時対応」が終わった後、シャドーサイトは「対応を経過で見られる」ページに変化していきます。その後は通常サイトに戻るべく、徐々に1コンテンツの形になっていきます。

運良くサイトのコピーが残っていた「トップページ全面差し替えパターン」の不二家を例に、時系列で紹介してみます。

1. '07年1月11日
   
2. '07年1月12日：更新一覧が時系列で表示される
3. '07年1月15日
4. '07年1月16日
5. '07年1月17日
6. '07年1月26日：社長による記名に変わり、不二家の歴史などの情報が追加される
7. '07年3月02日：「不二家は生まれ変わります」という宣言と共に商品情報が追加される
8. '07年6月20日：バナーリンクに変化
9. 現在に至る
   

不祥事発生時のために、大企業にはシャドーサイトが必要

シャドーサイトとは、緊急時を想定して事前に制作しておくコンテンツです。そう聞くと「そんなモン作る暇があったら、不祥事が起こらないように努力すればいい」なんて言葉が聞こえてきそうですが、TVでも放送事故が起こったときのために「しばらくお待ちください」という画面を用意しておいたりしますよね。あれと同じです。

それに人間誰しもミスをしますし、最近のマスコミは「何でもいいからまず謝れ」ってスタンスなので、そういったトラブルを避けるためにも必要になるのでしょう。

危機管理体制としては、シャドーサイト以外にも不祥事発生時のアクセスの増加対策としてキャッシュサーバーを用意したり、風説の流布を少しでも抑えるためにPPC広告(Overture等)を用いたりという事もあるようです。

シャドーサイトは(シャドーといいながら)いわば表の顔です。不祥事発生時には、その顔の裏でブランド戦略室が主体となり、広報部門や法務部門、リスク対策部門、情報部門等の関係各部門と連携の上、意見集約をしながら問題解決を測っているのです。

大企業ってのは大変ですね (って、最後は他人事かい)。

NHKで「出社が楽しい経済学」というバラエティが放送されているのですが、この番組オススメです。

• 出社が楽しい経済学

仕事や生活の中で起こる出来事を、ある経済用語キーワードを元にドラマ仕立てで紐解いていくという内容です。今回の経済キーワードは「価格差別」でした。

経済キーワード「価格差別」

• 学割やシニア割引があるのに、サラリーマン割引がないのはなぜだ。
• バーゲンセールはなんためにやるんだ。
• 携帯電話の料金プランを変更するのは、何であんなに面倒なのか。
• クーポン券はなんで必要なのだ。割引でいいじゃないか。

などなど、これらは「価格差別」という用語で理解できます。経済学といわれると難しい印象を受けますが、バラエティ仕立てなので楽しく学べます。次回は「裁定」がテーマのようです。

私も経済学に明るくなってこのフレーズを使ってみたいですね。
「な、な、な、ナンセンス！」

こんにちは。山田です。
今回はサントリー伊右衛門から届いた年賀状についてお話しします。

以前、サントリー伊右衛門の「氷出し碾茶一式当たります。キャンペーン」に応募したことがあり、残念なことに当たりはしなかったのですが、このお正月に年賀状が届きました。
応募したことすら忘れていただけに、ビックリ。

手ぬぐいをくれたりブックカバーをくれたり年賀状道具を作ったりと、何かとキャンペーンを展開している伊右衛門。すごい広告展開ですね。
年賀はがき一枚で、「またいいキャンペーンがあったら応募しよう(＝伊右衛門いっぱい買わなきゃ)」と、思わせてくれます。ほんとに上手。しかもちゃんと表面にお年玉のくじ番号ついてる・笑。

ちなみに、「氷出し碾茶一式」のデザインしたのはauraです。
aura shopは京都のCOCON烏丸にありますので、機会があったらぜひ！

• 映画「レボリューショナリーロード 燃え尽きるまで」

ラブストーリーじゃないよ

「タイタニック」のレオナルド・ディカプリオとケイト・ウィンスレットのコンビだという事や、宣伝コピーが「それは -- 誰もが逃れられない〈運命の愛〉」だったりで、観に行こうとしている方はラブストーリーを期待するのではないでしょうか。

自分も単なるラブストーリーだったのなら見に行かなかったと思いますが、「どうもそうじゃない」という噂wを聞いていたので、観に行ってみました。

結論から言うと、全然ラブストーリーじゃなかったです。間違ってカップルで見に行ったら気まずくなる事必死です。アメリカではかなり有名な小説が原作だそうで、この小説が1961年に発表されてから離婚率がかなり上がったそうです。

• 小説「レボリューショナリー・ロード--燃え尽きるまで」

これから観に行く方もいるでしょうから深くは書きませんが、いやー、ディカプリオがかなり情けなかったです。ダメ夫です。
観た後に色々と考えさせられる面白い映画でした。オススメ。

• デザイナーのためのプログラミング入門

デザイナーではないので「行っていいのかな？」と思いつつ、前回の参加者のBlogを見てみると「PHP初心者セミナー」のようだったので参加してみました。ちなみに無料の勉強会です。

今回は第2回目になります。第1回目は参加していなかったのでテキストを取り寄せてみたところ、if文やecho文(perlでいう「print」、JavaScriptでいう「document.write」みたいなもの)という基本は終わっているようで、今回はメールフォームを制作するという事でした。

勉強会自体は楽しく参加させていただきましたが、ちょっと物足りなかったかなぁとも感じました。でもPHPを始める知るきっかけにはなったので、それだけでも参加した意味はあったかと思います。

第3回に対する期待

会場入り口に受付らしき物が無く、スタッフらしき方に「どうしらいいの？」と聞いて初めて対応されたり、勉強会の内容がタイムテーブル通りにいっていなかったりと「まだ開催に慣れていないのかな？」とも感じましたが、これからに期待しております。第3回があるようでしたらまた参加したいと思います。

次回は、ぜひPHPのフレームワーク CodeIgniter(コードイグナイタ)を題材に、勉強会を開いて欲しいですね。

「本物のWebアクセシビリティー・セミナー」を受講してきました

社民党は"やしろみんとう"と音声読み上げソフトでは読まれてしまう。社民党サイト内でも対策はしていない。これは問題なのでは。

この時は、単に「問題だね、ダメだね、滑稽だね」だけで終わらしてしまいました。しかし、本当は「じゃあどうすれば問題が解決できるのか、どうすればベストなのか」まで展開しなければ意味がありません。

あれからだいぶ時間が経ちましたが、この「社民党は"やしろみんとう"と音声読み上げソフトでは読まれてしまう」件に関して再考してみました。

「社民党(しゃみんとう)」としてみる

音声読み上げソフトでは「社民党」を「やしろみんとう」と誤読してしまいます。これではスクリーン・リーダーユーザーは意味がわからなくなる恐れがあります。では「社民党(しゃみんとう)」と読み仮名を直後に付けてみてはどうでしょうか。これならば「やしろみんとう　しゃみんとう」と読まれ、少しわかりやすくなります。

しかし「社民党(しゃみんとう)」と表現した場合、今度は健常者が不思議に思ってしまうかも知れません。「社民党は"しゃみんとう"と読むに決まっているではないか。なぜこんな余分なものを付けるんだい？Why?」

rubyを使って読み仮名を付け、CSSで表示しないようにする

では、rubyを使ってそちらに読み仮名の「しゃみんとう」を記述し、CSSで表示しないようにするのはどうでしょうか。CSSで目に見えないようにしても、音声読み上げソフトでは読み上げがされます。

<ruby>
　<rb>社民党</rb>
　<rp>(</rp>
　<rt>しゃみんとう</rt>
　<rp>)</rp>
</ruby>

ruby rp,
ruby rt {
　display: inline-block;
　display: -moz-inline-box; /* Firefox 1-2向け */
　overflow: hidden;
　width: 0px;
　height: 0px;
}

• ruby+CSSでの読み仮名サンプル

出てくるすべての「社民党」にrubyを使うのか

rubyとCSSを利用する事で進めるとして、では毎回「社民党」が出てくるたびにrubyを追加するのはどうなんでしょう。正直、不効率すぎますし、ミスも増えそうです。

ではどうしましょう。よく行われるのは「ページ内で最初に出てきたときだけに付ける」という施策です。しかし、ページを上から下へ順番に閲覧してくれるとは限りませんので、これもあまりベストな方法ではありません。とはいえ、これ以上のよい解決法が見つからないのでこの方針でとりあえず進める事にします。

ここまでをいったんまとめてみます。

「社民党」がページ内で最初に出てきたときに、rubyを使って「社民党(しゃみんとう)」とします。こうする事で、音声読み上げソフトで「やしろみんとう しゃみんとう」と読まれます。

「やしろみんとう しゃみんとう」と読まれる事で、スクリーン・リーダーユーザーに「ああ、これ以降は"やしろみんとう"と出てきた場合には"しゃみんとう"と書いてあると脳内変換すればいいのだな」と認識してもらいます(微妙ですねぇw)。

音声ブラウザ「Net Reader」では読み仮名側のみを読みあげてしまう

ここで1つ問題が出てきます。音声ブラウザ「Net Reader」では読み仮名側の「しゃみんとう」のみを読みあげてしまうということです。こうなると先ほどの「"やしろみんとう"を"しゃみんとう"と脳内変換してもらう」というきっかけができません。

• 音声ブラウザ、NetReader(ネットリーダー)での読み上げテスト

となると、不効率ですがやはり「社民党」が出てくるたびにrubyを使った方がよいという事になります。毎回追加していれば「上から下へ順番に閲覧してくれるとは限らない」という問題や、「"やしろみんとう"を"しゃみんとう"と脳内変換してもらう」という事も問題にならなくなります。

「やしろみんとう、やしろみんとう」と何度も出てこれば気づくのでは

しかし、やはり毎回追加するのは避けたいです。「毎回書くのめんどいなー、イマイチ納得がいかないなー、これしかないのかなー」と、どうしようかと考えているときに、ふと下記ページを思いだしました。

table要素を使ってカレンダー式の情報を提供した場合の、アクセシビリティの保ち方

まぁ、でもね、ひ(日)、つき(月)、ひ(火)、みず(水)、くらいまで読んだときに、スクリーン・リーダーユーザーも大抵、あ、これカレンダーなんだなって気がつくと思うんですよね。だからあんまりそこにこだわらなくても(「月(つき)」を「月曜日(げつようび)」といちいち直さなくても)っていうか、パワーかけなくてもいいんじゃないかなって僕は思うんですけど。

光が見えましたw。「やしろみんとう、やしろみんとう」と何度も出てこれば、スクリーン・リーダーユーザーも「なにこれ？」と思い、付き添いの人などに聞くでしょうし、テレビなどで聞いていて「ああ、"しゃみんとう"ね」と気づく確率も高いはずです。「アクセシビリティを保たねば！」と変にこだわりすぎていたような気がします。

結論：社民党のWebサイト内では「社民党」でいい

ということで、ページ内に何度も出てくる場合は「社民党」で、1回2回ほどしか出てこないのであればrubyとCSSを使って「社民党(しゃみんとう)」とすればいいのではないでしょうか。

ですので「社民党」が頻繁に出てくる社民党のWebサイト内では「社民党」でいいのでは、と思います。そもそも「どこのサイトを訪れているのか認識してないの？」って話でもありますし。答えは単純でした。

まあどうも納得いかないってことであれば、ページ内で最初に出てきたときだけ、rubyを使わずに「社民党(しゃみんとう)」とすればいいのではないでしょうか。

追記：画像(alt)の場合は?

画像の場合は「alt="社民党　しゃみんとう"」とするしかないでしょうねぇ。ruby使えませんし。

新年あけましておめでとうございます。

旧年中は格別のお引き立てを賜り、心より御礼申し上げます。
本年も変わらぬご愛顧の程お願いいたします。

平成21年　元旦
アイビーネット　スタッフ一同

上記の年賀状は、立体アートスキャンという上面非接触の特殊なスキャナを用いて素材表面の凹凸や陰影を詳細に読み取って作成しています。画像をクリックしていただくと、もうちょっと大きな画像でご覧いただけます。

それでは、今年もアイビーネットをよろしくお願いいたします。

あっ、先に言っておきますが、ちょっと変わった内容の映画が好きなのでクセの強いタイトルが含まれているかも知れません。ご覧になるときは自己責任でお願いしますw。

オススメDVD

ユージュアルサスペクツ

見終わった後、多分こう叫びたくなるでしょう。「カイザーソゼ！」

マグノリア

すごく長ーい映画ですが、そんなに退屈はしないと思います。トムクルーズも出ているオムニバス形式の映画。

リベリオン

「バットマン・ダークナイト」のクリスチャンベイル主演。ガンカタがステキ＆カッコイイ！

フェティッシュ

「首を切ったら、その生首はなにをしゃべるのか？」が題材の映画。内容はそんなに残酷じゃないですよ。

シティ・オブ・ゴッド

ブラジルの貧民街(スラム)の歴史物語。かなり重い映画なので気合い入れてみてください。特に子どもがいる方。

シリアルママ

DVD化はされていないのでビデオで見てください。ああそうだ、見終わった後は必ず巻き戻して返却してくださいね。

新スタートレック(スタートレック ネクストジェネレーション)

全178話の傑作SFテレビドラマ。スターウォーズとよく比較されますが、あんなペラッペラな作品ではないです。作品の一部しかレンタルしていないので、DVDボックス買ってくださいw。

オールド・ボーイ

日本の漫画が原作の韓国映画。理由もわからず15年間監禁された男の話。もの悲しいBGMも作品にあっててよい感じ。

エビータ

マドンナ主演のミュージカル映画。サントラ買うほどハマりました。ドント・クライ・フォー・ミー・アルゼンチーナ♪

発狂する唇

阿部寛が出演している、スゲー変な血みどろ映画。オススメはしませんw。続編に「血を吸う宇宙」があります。

スイミング・プール

これぞフランス映画ってかんじで淡々と進んでいく映画。謎もなにも投げっぱなしで終わりますが、でもそこが奥ゆかしい。

オープン・ウォーター

スキューバダイビングをする人は見てはいけません。怖すぎてもう潜りに行けなくなります。

七人の侍

説明不要でしょうが傑作です。黒沢作品を見るときは、字幕ありで見る事をオススメします。

ホテルルワンダ

(日本に住んでいると)あまりにも非現実的なシーンの連続で「ホントにこれ実話なのか？」と疑いたくなる。見てる途中から涙が出た。

カウボーイビバップ

全26話のTVアニメです。超オススメ。ガンダムなんか見てる暇があったらこいつを見てください。オープニングから素晴らしいです。映画「天国の扉」も公開されました。

オススメDVD：番外編

所さんの世田谷ベース

所ジョージの趣味全快のうらやましい番組。ファミリーコブラが本気で欲しいです。オデッセイでっせい。

ゲームセンターCX

よゐこの有野が、懐かしのゲームをクリアする番組です。魔界村とかスペランカーに反応する人にはオススメ。

まだまだ紹介したい作品はありますので、また機会があったら紹介したいと思います。
では、よいお年を！

• <h1>タグの見出しはテキストであるべきでしょうか

質問主はたぶん「h1要素は、テキストの場合とalt属性の場合とではSEO効果に差が出るのか」ということと共に「差がさほど無いのなら見栄えの点から画像にしたいがどうか」ということを聞きたかったのだと思います。

しかし、質問自体がどっちつかずな事と最後の「＜補足＞」が起爆剤になり、ずるずると質問の趣旨から離れていっています。「デザインなんてクソ喰らえ・・とまでは思っていませんが」などという意見まで出てくる始末です。

気づいたときには回答が締め切られていましたが(というか書いてる途中で締め切られてしまったw)、私だったら下記のように答えたでしょうか。

<h1>タグの見出しはテキストであるべきでしょうか

HTMLの面から

h1要素は、各ページの固有のタイトル(最上位の見出し)を定義するものです。テキストである必要はありません。画像+alt属性で問題ありません。

参考ページ：

7.5.5 見出し: H1、H2、H3、H4、H5、H6要素

SEOの面から

最近の検索エンジンの傾向として、内的要因で強いのはtitle要素ぐらいです(たぶん)。ですので、h1要素が画像でもテキストでもSEO効果はほぼ同じです。

それでもテキストの方がいいという事であれば、CSSで画像とテキストを置き換えてやる方法もあります。しかし、CSSでの置き換えはアクセシビリティ上の問題からあまり使われなくなってきています。

参考ページ：

画像置換の問題点

文書構造の面から

文書構造についてはよいに超した事はありませんが、結構奥が深かったりしますので追々というスタンスで良いかと思います。文書構造をバッチリに作ったとしても、その労力に合うほどのSEO効果は出ませんし。

参考ページ：

h1タグとSEO

結論

ということで、この質問の場合は「h1は画像+alt属性でよい」という答えになります。文書構造などといったものだけにとらわれるのではなく、役に立ち、使いやすく、かつ魅力的なサイトを制作する方が大切だと思います。そうすれば自然と外部リンクが張られ、それがSEOになるのではないでしょうか。

参考ページ：

Webサイトは"使いやすくて役に立つ"だけじゃダメなんだ

企業サイトも見た目が9割......ではないらしい

仕事柄よくWeb技術の本を買うのですが、最近はリアルよりもネットで買う事の方が多くなっています。以前はAmazonしか利用していなかったのですが、最近はオンライン書店ごとで特徴が出てきており、利用条件に合わせて使い分けています。

以下はオススメ順、というかよく使っている順でオンライン書店を紹介しています。それと品数に対しては、人それぞれ感じ方が違うかと思いますので参考程度にしてください。

Amazon.co.jp

• 品数：すごく豊富
• 送料：1,500円以上で無料
• 発送：早い

キング・オブ・オンライン書店。1,500円で送料無料はどこも一緒ですが、ここは本以外も売っているので、ついで買いがしやすい。あとキャンセルが簡単にできるのが便利。

発送は早いのですが、以前は午前中に注文すればその日のうちに配送が開始され次の日には届いていたので、実質注文してから1日で届けてくれていました。しかし「Amazon プライム」が始まってからは午前中に注文しても配送が次の日に回され、届くのは注文してから2日後になってしまった。偶然かな？

それと、千葉県だと配送業者が「カトーレック」になってしまい、日常的に配達遅延が起きるらしい。

ジュンク堂書店

• 品数：豊富
• 送料：無料
• 発送：早い

実店舗があるからか、品数は豊富。発送も早い。それよりなにより素晴らしいは、送料が無料という事。1,500円に達してなくて、でもって大きな書店でしか売ってなさそうな本は迷わずココで買ってます。

セブンアンドワイ - 本

• 品数：普通
• 送料：1,500円以上で無料
• 発送：早い。発送日が違う場合、送料かわらず別々に発送してくれる。

発送日が違う場合、送料かわらず別々に発送してくれる。これだけなら普通かもしれませんが、すばらしいのは「すぐ」発送してくれるという事。

しかしセブンイレブン店舗での受け取りにした場合、バイトがネット系の注文になれておらず、ほぼ100%の確率でモタモタする。その度に「ちゃんと教育しとけよオラァ！」と、心の中で叫んでます。

楽天ブックス

• 品数：少ない
• 送料：1,500円以上で無料
• 発送：普通

品数少なめで、予約できる品も少ない。在庫ありとなっていて注文すると「やっぱり在庫無しでした」ということが結構ある。
たまに使いますが、ポンカンキャンペーンが無ければ使わないと思う。これ以外のメリットが見あたらないダメ書店。

Fujisan.co.jp

雑誌・定期購読専門サイト。会社で定期購読する雑誌なんかはココで買うと少し安くなる。買い忘れが防げるので、個人的にも使ってます。

しかし、発売日当日に届かないことがよくある。

紀伊國屋書店BookWeb

• 品数：豊富
• 送料：380円。5,000円以上で無料。
• 発送：早い

実店舗があるからか品数とともに在庫も豊富。売り切れてしまった人気の本なども、結構売れ残っている。ブックサービスと共に最後の砦w。

5,000円以上で送料が無料になり、それから30日以内の注文は無料になるという変わった事をやっている。

ブックサービス ※1

• 品数：豊富
• 送料：1,500円以上で無料
• 発送：普通

クロネコヤマトがやっているオンライン書店。たしか歴史はAmazon日本語サイトより古かったはず。Amazon日本語サイトがオープンするまでは頻繁に使っていました。

利用した事はありませんが、法人向けに「ブックメイト」という月々の支払いを一本化するサービスを行っている。

※1 ブックサービスは、以前たしか「クロネコブックサービス」って名前でした。筆頭株主がヤマトホールディングスではなくなり変わったらしい。

bk1(ビーケーワン)

• 品数：普通
• 送料：1,500円以上で無料
• 発送：早い

キャンペーンをよくやっている。現在行われているキャンペーンでは、08/12/26までに1万円以上の注文すると1000ポイントもしくは1000円分のギフト券がもらえる。1割引って事ですね。

ボッサブックス

利用した事はありませんが、かっちょよかったのでご紹介。ボブサップ。

「ミニマイ棚」という、おもしろいブログパーツも用意されています。

その他

この他にもYahoo!ブックスなどもありますが、ほとんど使った事ないので省略しました。

なかなか考えさせられる興味深い内容だったのでもう少し掘り下げようと調べてみたのですが、そこで「ウイズダム・エンジン(PDF：24KB)」という考え方にたどり着きました。

ウイズダム・エンジン：知恵の結果による新しい知識

データと情報の違い

1. 123456：数値
   ↓
2. 素材としての数値：データ
   ↓
3. 構造と文脈を与え整理し、組織化されたデータ：情報

データとは「整理されていない情報」です。そして、データを整理して(例えばグラフ化して)意味を持たせることで「情報」になります。

情報をさらに昇華して知恵となし、そして新しい知識とする

3. 構造と文脈を与え、組織化されたデータ：情報
   ↓
4. フローから生み出される体系化された蓄積情報：知識
   ↓
5. 内面化され、個別の事象にとどまらない普遍的な知識：知恵
   ↓
6. 他人に説明できる形にした知恵：新しい知識
   ↓
7. 4の「知識」に戻る

「スイッチを押すと電燈がつく」というのは知識です。そして「部屋を明るくするために、ライターで手元を明るくして、壁にあるスイッチをさがして、見つけたスイッチを押せばよい」という情報を創り出すと知恵になります。

そして、知恵を人に説明できるようになると、知恵が「新しい知識」に変化します。そして、それを知識として人に引き渡せるようになります。

この「知識→知恵→新しい知識→知恵...」というサイクルメカニズムを「ウイズダム・エンジン」と呼ぶようです。

参考書籍が出てました

上記の考え方の入門書が出ていました。最近出版されたようですが、なぜかAmazonでは取り扱いがありませんでした。

• 課題を実現する革命的なもの・システムつくりの方法 ― 知識を知恵にかえる方法

上記書籍の詳細版「新プロジェクト管理の方法」は絶版になっているようですが、Webサイトに無料で公開されていました。サイトに飛んだ瞬間、いろんな意味で「うわぁ...これは...」と感じるかもしれませんがw、興味のある方は一度ご覧ください。

• 新プロジェクト管理の方法

少し前の話ですが「夢の扉　全盲者にも楽しく街を歩く喜びを与えたい」という番組を見ました。番組内では、盲人の方に向けて開発された「オーデコ」という名の「FSRS(額感覚認識システム)」が紹介されていました。

• 夢の扉　全盲者にも楽しく街を歩く喜びを与えたい
• オーデコ

「オーデコ」とは、サングラス状の眼鏡に付いたカメラで撮影された白黒映像を単純化し、さらにそれをドット絵にして額のパッドを通して皮膚を刺激する信号を送る装置です。こうすることで、全盲の方でも額から脳に直接映像を送り込むことで、目の前の物体の情報を得られるというわけです。

「脳に直接映像を」なんて聞くとえらい近未来チックに感じますが、実際に製品化されており、2008年の12月から販売されるようです。やー、すごい。「TNG ラフォージのヴァイザー」実現にまた一歩近づいた気がしますね。例えがマニアックすぎるかw。

余談：

とあるMLで知ったのですが、番組内で実際にオーデコを利用した全盲者の佐藤さん曰く「何かを立体的に認識できるようになるわけではないが、工夫と使用条件次第では歩行の助けぐらいにはなるだろう。番組の演出にはある程度協力したが、実際にはこんな大がかりな装置を見につけて町中を歩くのはかっこわるすぎて出来ない。」と仰っていたとの事でした。

サイズの問題は少し待てば解決されるでしょうね。小さくするの得意ですから、日本人。

FSRS(額感覚認識システム)をWebブラウザとして利用できないか

番組を見てて思ったのが「FSRSをWebブラウザとして利用できないかなぁ」ということでした。実現するにはどんな感じにしたらいいのかな、といろいろ妄想してみました。

• PCの画面のみ見えればいいので、装置は直接PCに接続する。
• 装置を直接PCに接続するのでカメラは要らない。
• 文字が読めるほどの高画質は難しいだろうから、同じように位置情報のみを表示。
• 音声読み上げソフトと併用する。
• 位置情報は得られるのだから、全部を読み上げるのではなくマウスを使ってドラッグ等をした場所を読み上げるようにする。
• ブックマークなどはショートカットで。
• img要素などは輪郭を強調して、他と区別をしやすくする。
• 画面が広くて解像度が足りない場合は、画面をいくつかに分割して表示する。

Webサイトの場合、img要素やtable要素などの意味を持った情報をすでに持っていますので、カメラで物体をとらえるよりも詳細な情報が得られるのではないでしょうか。

それと額ではそもそもの解像度が足りないということであれば、例えば背中に付ける装置を開発してみてはどうでしょうか。Webサイトを見ながら歩くことはないので、目に近い位置に装置がある必要はないと思います。その場合、装置名はセーナカでw。

アクセシビリティに熱心な電気機器メーカー、例えば富士通さんなんかが作ってくれないでしょうか。結構面白いと思うんですけど。

• 『ユーザー視点のWebサイトづくり』音声読み上げで検証するサイト構築(シリーズ1)

上記のDVDが、近日発売されます(タイトル長いなぁ)。DVDの収録映像の内容は下記のようです。

収録映像の内容

「視覚障害者から発信するWeb講座」(読売光と愛の事業団共催、2008年3・4・5月開催)より

• 音声ユーザーからのメッセージ
• 行政サイトの事例(板橋区)
• ホテル検索ポータルサイトの事例(じゃらん)
• オンラインショッピングの事例(楽天)
• 携帯サイトの事例

「本物のWebアクセシビリティセミナー」(クリーク・アンド・リバー社協賛、2008年7月18日開催)より

• 評価ツールだけでは役立たない！ユーザー評価でわかった使えないアクセシビリティの実態(政党のWebサイト事例)
• 東西の視覚障害者の生の声を聞く(パネルディスカッションから)

先行予約：5,500円(11月30日締切)、通常価格：7,500円
収録時間：約60分

視覚障害者の声を聞くよい機会

2番目の「本物のWebアクセシビリティセミナー」は私も参加しました。セミナーの感想にも書きましたが、このセミナーの中でパネルディスカッションが一番充実していたと思います。

視覚障害者の方が実際にWebサイトを利用している様子や、「こんな点に気をつけてもらえるとうれしい」といった意見などは、なかなか見たり聞いたりする機会がないと思います。そんな点からも、このDVDは役に立つのではないでしょうか。たぶん様々な発見があると思います。

とりあえず、私は買おうかなと思っています。

週に一度ほど、 弊社アイビーネットのサイトに関するキーワードの順位を「Ranking Checker」を利用してチェックしています。

• Ranking Checker

先日、「Ranking Checker」で弊社サイトの順位を確認してみると、Googleで「アイビーネット」と検索した際の順位が2位になっていました。しかしGoogleで実際に検索してみると、先ほどと違い1位に表示されています。

「あれれ？、なんで？、Ranking Checkerの不具合？」なんて事を思いましたが、他のスタッフのPCで検索すると確かに2位です。

何か順位が変わる条件があるのかと気になっていろいろ調べてみたのですが、どうやら「Googleにログインしていると検索結果が変わる」ようです。

例：「Web制作 名古屋」での検索結果順位(08/10/28)

Firefox3 ログイン「Web制作 名古屋」

1. ホームページ制作局
2. アイビーネット
3. アビリティコンサルタント
4. テラ
5. モンキーワークス

Firefox3 ログアウト「Web制作 名古屋」

1. アビリティコンサルタント
2. ホームページ制作局
3. テラ
4. モンキーワークス
5. アイビーネット

Safari3 ログイン「Web制作 名古屋」

1. ホームページ制作局
2. テラ
3. モンキーワークス
4. アビリティコンサルタント
5. ゴリラウェブ

Safari3 ログアウト「Web制作 名古屋」

1. ホームページ制作局
2. テラ
3. アビリティコンサルタント
4. モンキーワークス
5. KHデザイン

もうちょっと調べてみたところ、この現象は「パーソナライズド検索」というものだそうです。「アクセスしたコンテンツを記録して管理」するとともに「ウェブ アクティビティの傾向を追跡」し「関心に合わせて検索をカスタマイズ」しているようです。検索している人の関心事によって検索結果を変えているという事ですね。

• パーソナライズ検索結果: 基本
• ウェブ履歴について: 基本

その他、検索結果が変わる条件

その他、下記条件でも検索結果が変わるようです。

• 検索しているGoogleのIP
• 検索に使っているブラウザ

「検索しているGoogleのIP」に関しては若干揺らぎがあるという程度ですが、少し順位が変わるようです。Googleダンスの名残みたいなものでしょうか。

「検索に使っているブラウザ」に関しては、上記のようにFirefoxとSafariで検索結果が違いました。キャッシュかCookieかなと思いましたが、原因は良く分かりません。見に行っている「GoogleのIP」がブラウザごとで違うのかもしれません

それと検索キーワードの順番や、キーワードを全角で分けるか半角で分けるかでも若干結果が変わります。

検索キーワード例

• Web制作 名古屋
• Web制作　名古屋
• 名古屋 Web制作
• 名古屋　Web制作

Googleの検索順位チェックはログアウトして行うべし

Googleにログインしていると「パーソナライズド検索」になってしまい、一般のユーザーと検索結果が異なってしまいます。検索するキーワードによっては大きく結果が変わります。

ということで、検索結果の差異を少しでも少なくするために、Googleの検索順位チェックはログアウトしておこなった方が良いようです。

• パーソナライズ検索結果: カスタマイズをオフにする

先日、企業サイトランキング2008を実施した日経BPにおじゃましてきました。アイビーネットがリニューアル制作させていただいた「あるお客様」の採点結果について、広報部の方に同行して話を聞きに行ってきました(どこのお客様かは、制作実績を見ればすぐわかりますw)。

ランキングの採点項目と採点結果は入手していたのですが「どの部分がどのようにダメで減点されたのか」といった、具体的な内容については公表されていません。話を聞きに行くに際し、前準備として減点された対象の予測と改善策をまとめておいたのですが、9割方は予想通りの内容でした。

ランキング採点項目は5つの分野

1. 基本情報(13項目)
2. ブランディング(13項目)
3. リスク管理(12項目)
4. 使いやすさ(14項目)
5. アクセシビリティ(13項目)

採点項目は5つの分野に分かれているのですが、その中の「4.使いやすさ」と「5.アクセシビリティ」の審査対象になるのは「トップページから2クリック以内のページ」となっています。

「4.使いやすさ」や「5.アクセシビリティ」といった項目はサイト全体に関係する事ですので、サイト全体を調べて可否のパーセントを出し、ある一定のパーセント以上出来ていれば得点といったようにするのが理想です。

しかし、大企業となると1,000ページとかざらにあったりしますから、それをすべて採点するのは現実的な話ではありません。そこで「審査対象になるのはトップページから2クリック以内のページ」という事になったそうです。

その2クリック以内に、今回リニューアル対象外だったページがいくつかあったのですが、そのページで大量に減点されていました。とくに「5.アクセシビリティ」がズタボロでした。

5.アクセシビリティ(13項目)

1. 文字の色が、背景に対して見やすいか
2. Webブラウザーの設定で、文字の大きさを変えられるか
3. 文字を拡大したときに、文字が重ならないか
4. リンク名が分かりやすいか
5. フレームを使用していないか
6. 予告なしにWebページを自動更新したり、別のページに移動したり、新しいページを開いたりしないか
7. 会社ロゴやサイトロゴに代替テキスト(alt属性)を設定しているか
8. 会社ロゴやサイトロゴを除く、意味のある画像に代替テキスト(alt属性)を設定しているか
9. 会社ロゴやサイトロゴを除く、意味のない画像の代替テキスト(alt属性)は、空白(もしくはスペース)に設定しているか
10. プラグインソフトをインストールしていなくても、Flashの内容を把握できる代替情報を用意しているか
11. プラグインソフトをインストールしていなくても、PDFの内容を把握できる代替情報を用意しているか
12. 音声読み上げソフトを使用する際、ナビゲーションなど共通に使われるリンクやメニューを読み飛ばせるよう設定しているか
13. 見出しの設定に<H>タグを使用しているか
    

「リニューアル対象外のページだったから」なんて事はユーザー(利用者)には関係ありませんし、知った事ではない事情ですので、この減点については素直に受け止め、今後どのように改善し、どのようにサイト全体で統一していくのかを検討しようという事になりました。

ちなみに「11.PDFの内容を把握できる代替情報を用意しているか」は、代わりの静的htmlを用意するのではなく「第1四半期 決算ダイジェスト(PDF:165KB)」といったように「リンク先に何があるのかを把握できるリンクテキストにする」ということでした。

それ以外の減点に関しても、ほぼ納得の内容でした。「企業サイトランキング2007」時の採点項目に関しては「おや？」という項目がいくつか見られましたが、2008年版に関しては概ね納得できました。

企業サイトランキング2009は実施しないかも

その他、いろいろ質問をしたりお話を聞いている中で出てきた雑談のまとめです。

今年は2ヶ月前倒しで調査開始

いつもは7月頃から調査を開始するそうですが、今年は2ヶ月前倒しの5月から3ヶ月かけて調査をしたそうです。2ヶ月前倒ししたことで「従来通りの7月に間に合うようにリニューアルするスケジュールだったのに！」と文句をいってくる企業もあったそうですw。

他人事ですので笑い話になっていますが、当事者だったとしたら...、おー怖っ。

どのサイトもレベルが上がってきている

どのサイトもレベルが上がってきており、上位サイトでは満点が連発されています。その影響から、点数は上がっているのに順位が下がった企業もあり、「なぜ？何が問題だったの？」という問い合わせもあったそうです。

来年は点数がばらけるように、採点項目が増えるかもしれませんね(XBRLとか、WAI-ARIAとか、PDF自体のアクセシビリティとか)。

<h1>を同ページ内で2回使うのは減点した

<h1>を同ページ内で2回使うのはダメだそうです。<h1>が複数あるサイトというのはほとんど見ませんが、「1回しかダメ！」と言い切っちゃうのもちょっと微妙な気はしますね(例：bAが作成したh1が複数あるサイト)。とかいいながら、私は1回しか使いませんけど。

ある程度の期間が過ぎた後は1社単位で購入できる

企業サイトランキング2008の詳細な採点内容は、購入すると500社セットで189,000円と結構な値段がします。一部見させていただきましたが、かなり具体的でわかりやすかったです。10月31日発売です。

ある程度の期間が過ぎた後は、1社単位で採点結果を購入できるようになるそうです。2007年版はすでに1社単位で購入できるそうですが、サイト上にはそういった記述がありません。電話対応なのでしょうか？

企業サイトランキングに関して、企業の反応はどうだったか

ランキングに関して、企業の反応はどうか聞いてみたのですが、「反応は良いです。概ね好評です。今日も午前中に1社対応しました。これまでで50社近く面談対応しました。」という返事を頂きました。

中には「この採点は納得いかない！」といってくる企業もあったそうです。まあ、そういった反応も含めて思惑通りの反応＆影響力を持てたのではないでしょうか。

来年はやらないかも

評価対象企業を500社に増やしてから、ちょっと採算が厳しくなくなってきたそうで「来年はやらないかも」とおっしゃっていました。「えー、そんな、楽しみなのでやってください。」と、とりあえず無責任にお願いしておきました。

雑記：スタッフへの東京土産

会社のスタッフへのおみやげに「舟和の芋ようかん」を買っていったのですが、すごぶる好評でした。オススメです。11月7日に再度東京に行くので(Web Directions East)、また買ってこようかと思っています。

セミナーは大まかに3つのセッションで分かれていました。

• ディレクションについて座学
• ブレストとKJ法を実践
• 3枚紙プレゼン(提案内容・予算・スケジュール)

座学：コミュニケーション能力が低い人は、ディレクションが上手にはならない

座学はかなり内容が濃い＆量が膨大でした。「ディレクションにはこんなツールが便利」といったテクニカルな内容ではなく「どんな能力が必要か」だとか「常日頃どんな心構えでいると良いか」などといった、心理や精神面での内容が中心でした。

いろいろ印象に残る事を教えていただいたのですが、一番印象に残ったのは「コミュニケーション能力が低い人は、ディレクションが上手にはならない」ということです。

この事自体は常々感じていた事ではあったのですが、私自身があまり積極的に人と話す性格ではないので、なんか変にショックでした。「わかっちゃいるけどやめられない」みたいなところを、改めて指摘されたといった感じでしょうかw。

Web制作は、個人ではなくプロジェクト制(チーム制)が必要になってきた。
プロジェクト制における問題としては下記がある。

• 一人一人の意見が違う：あるべき姿よりも近視眼的な自分の利益を優先しがち。
• 個々人のゴールの形が違う：何をって「成功」「終了」とするのかが不明瞭。
• 進め方がわからない：ワークフローをはじめとする「共通言語」がない。

プロジェクト制における問題を解決できる人が重要であり必要。その時に必要な能力は「コミュニケーション能力」。
コミュニケーション能力としては下記がある。これらは「考え」「組み立て」「実行する」能力。

• プランニング能力
• プレゼンテーション能力
• マネージメント能力
• 論理的思考能力
• 調整能力(洞察・判断・交渉)
• クリエイティブ能力
• 情報収集能力

コミュニケーション能力には、常に下記が伴う。

• 受信能力：ヒアリングスキル(「聞く」ではなく「聞き出す」)
• 発信能力：成果物やプレゼン、会話での説得スキル(説明して納得させる)
• 問題解決能力：問題の発見から原因分析、真の原因の発見、解決へ
  

これらは「ディレクション」に必要な能力。ディレクションとは「自分」から「他人・他社」へのコミュニケーションの手段と言える。

だから、コミュニケーション能力が低い人は、ディレクションが上手にはならない。

プレゼン：Yahoo！のアクセスを3倍にするには

お題は「Yahoo！のアクセスを3倍にするには」でした。6人のチームでブレストをおこない、出てきたアイデアをKJ法でしぼりこんで、最後に「提案内容」「予算」「スケジュール」の3枚にまとめてプレゼンをしました。

ちなみにウチのチームの「Yahoo！のアクセスを3倍にする」アイデアは「大人のYahoo！深夜限定」です。アクセスの少ない深夜に、エロでアクセスを稼ごうという魂胆ですw。

「Workshopだし、恥は掻き捨てだー」と思って私がプレゼンさせていただきましたが、制限時間3分(1分1スライド)の所を1分40秒ほどで終わらせてしまい、本当に恥をかいてしまった事はナイショですw (だって3分と知らなかったんですもの)。

どの行程も制限時間がかなり短く、あまり納得いく形には仕上げられませんでしたが、多人数で短時間集中(それも知らない他社の人と)という面白い体験をさせてもらえました。

まとめ：良い意味で危機感を感じた

「出来る人っていうのは、やっぱりそれだけ日々努力してんだなー」と名村さんのセミナー講師ぶりを見て、良い意味で危機感を感じることができました(なんてナマイキなw)。

Webディレクターとしてある程度できるようになれば次を、それができるようになれば次をと「他人に埋もれてしまわないように日々精進しよう！」と思わずにはいられない、モチベーションの上がる良いセミナーでした。

Amazonクレジットカードがサービスを中止するようです。メインで使っていたカードなので至極残念。

• Amazonクレジットカード サービス終了のご案内

で、サービスが終わった後はどうなるかというと「Amazonクレジットカードからシティプラチナカード、シティゴールドカード...への切り替えを希望しない場合は、自動的にシティクラシックカードに切り替えられます。年会費3,150円です。」だそうです。

うーん、自動的に解約にしてくれれば楽なんですが。

年会費払ってまで使いたいとは思わなかったので解約しようと思ったのですが、切り替えキャンペーンをやっているようです。とりあえず目を通してみたところ、キャンペーン中にシティゴールドカードに切り替えれば、初年度年会費無料で2,000円のキャッシュバックもあるそうです。

• シティゴールドカードに切り替え

一瞬切り替えようかなとも思いましたが、しかし下の小さい字をよく読むと「2009年3月31日以降にキャッシュバック」とあります。要するに「キャッシュバックもらって即退会、キャッシュバック分ウハウハ」とは行かないという事です。まあ、当たり前ですね。

カードを解約

ということで、やはり解約する事にしました。解約する場合は下記に電話をします。音声案内には「解約」のメニューが無かったので、「5.カスターマーサービス → 5.その他」から手続きしました。

シティカードカスタマーサービス

0120-003-081
(携帯)03-3472-6700

ちなみにAmazonクレジットカードは、解約しても2008年12月15日の23：59までは利用可能だそうです。

これからは、サブで使っていた楽天カードをメインにします。メインで使っていたカードが無くなると、振り込みとかの設定をし直さなければいけないので結構めんどくさいんですよね。どうか楽天カードは無くなりませんように。

• サイトシール変更のお知らせ

アイビーネットのサイトでは、特に必要性を感じなかったのでジオトラストのサイトシールのまま放置していました。

期限ギリギリまでそのままでも良かったのですが、変更を忘れて表示されなくなるのも困るので、覚えているうちに変更することにしました。

グローバルサインの新シールは背景色が白じゃないとかっこ悪い

新シールは上部文字の背景が透明に抜いてあります。しかし背景色が白系の場所に置くという前提で作られているようで、アイビーネットのサイトのように背景色が黒系の場合、上部文字の周りに白が残ってガタガタになり、とってもかっこ悪くなります。

サイトシール自体を編集できればいいのですが、データはグローバルサインのサーバーに置いてあるので変更することが出来ません。しかし、このままではかっこ悪くてアイビーネットのサイトには使えません。

余分な表示をCSSで消す

設置例：アイビーネット

サイトシール自体が変更できないということで、CSSで何とかすることにしました。

周りがガタガタになっていた「グローバルサイン認証サイト」という上部文字ですが、取ってしまってもたいした影響は無いだろうということで、いっそ消してやることにしました。

CSSで行うの処理は下記になります。

• 表示領域の高さを設定
• position設定で中身を自由配置に変更
• 表示したくない部分を表示領域の外に出す
• 表示領域からはみ出た部分を隠す

CSSソース

#globalsign {
	display: block;
	height: 46px;
	width: 115px;
	position: relative;
	overflow: hidden;
}

#globalsign object {
	top: -11px;
	position: absolute;
}

今回は115×57ピクセルのサイトシールを使うことにしましたので、表示したくない上部文字部分11pxを全体の高さから引き「57px − 11px ＝ 46px」を「height」の値としています。「object」はFlashの場合です。GIFの場合は「img」にしてください。

今回はグローバルサインのサイトシールを例にしましたが、この方法はいろいろな場面で応用できると思います。同じような問題でお悩みでしたら、一度試してみてはどうでしょうか。

余談　lintでエラーが出ないようにする

グローバルサインのディフォルトソースではURLが「<img src="//seal.globalsign.com/gs_noscript_115-57_ja.gif">」というように「http:」が省略されて記述されています。「http」でも「https」でも使えるようにということなんですが、lintでチェックするとエラーが出てしまいます。

もし、このエラーがいやでしたら「http」上では「<img src="http//seal...」とし、「https」上では「<img src="https//seal...」というように、セキュアエリアかどうかでソースを変えてやるとエラーが出なくなります。

しかし条件によっては、Winで表示した場合に「～」が崩れたように文字化けして表示がされる事があります。

「～ (から・波線)」がWinで文字化けする条件

「～」がWinで文字化けする条件ですが、下記がそろった場合などに起こります。

• Webページの文字コードが「UTF-8」
• Macで「～」を入力した
• Winで表示した (メイリオでは起こらない)

「～ (から・波線)」がWinで文字化けする理由

各OSで「～」を入力

	表示される文字
Winで入力	全角チルダ (Unicode：FF5E)
Macで入力	波ダッシュ (Unicode：301C)

UTF-8での表示

	Winで表示	Macで表示
全角チルダ (Unicode：FF5E)
波ダッシュ (Unicode：301C)

上記の表からわかるように、同じ「～」を入力していても、Winでは「全角チルダ(FF5E)」が表示され、Macでは「波ダッシュ(301C)」が表示されます。OSによって表示される文字が違うのです。

この「全角チルダ」と「波ダッシュ」ですが、Macでは同じ形状で表示されます。しかしWinではそれぞれ違う形状で表示され、Winの波ダッシュは崩れたような「～」で表示されてしまうのです。

余談：この現象は、WinのUnicodeに関連する問題から起こっています。WinのUnicode問題について詳しく知りたい方は、Wikipediaを参照してください。

「～ (から・波線)」がWinで文字化けする場合の対処法

ではどんな対処法があるかというと下記の方法があります。

• (イマイチ) Macで全角チルダを入力する
• (イマイチ) メイリオで表示させる
• (オススメ) Winで波ダッシュを全角チルダに変換する
• (オススメ)文字参照で全角チルダを表示する
• 「～」を使わないで「- (マイナス)」などで代用する
• 文字コード「UTF-8」をやめる

(イマイチ) Macで全角チルダを入力する

全角チルダであればWinでも文字化けしませんので、Macで作業する際に「～」を波ダッシュではなく全角チルダで入力すれば問題は起こりません。

「なんだ、じゃあ簡単じゃない」と思うかもしれませんが、(私が調べた範囲での話ですが)Macで全角チルダ(FF5E)を入力するには、文字パレットから選択して入力するしかありません。これはかなり手間な方法です。

ことえりの文字パレット

そして、なんとかがんばって入力したとしても、全角チルダと波ダッシュはMac上では見た目が一緒ですので、正しく入力できたかどうかの判断をすることが困難です。これでは正確な作業は出来ません。

これらのことから「Macで全角チルダを入力する」は、あまり現実的な方法とはいえません。

(イマイチ) メイリオで表示させる

「メイリオ」フォントでは波ダッシュと全角チルダは、同じ形状で表示されます。ですので、CSSの「font-family」を使ってメイリオで表示されるようにすれば文字化けは起きません。

しかし、条件として閲覧者のPCにメイリオが入っている必要があります。Win Vistaの場合、メイリオはディフォルトで入っていますが、Win XPの場合は入っていません。

Vistaの普及率を考えると「メイリオで表示させる」も、あまり現実的な方法とはいえません。

余談：Win XP IE6のUTF-8だと、メイリオを指定しても表示されない場合があります。その時は、html要素に「lang="ja"」を追加してください。表示されるようになります。ちなみに、Win XPのメイリオはこちらで配布されています。

(オススメ) Winで波ダッシュを全角チルダに変換する

とても単純な方法です。Winで波ダッシュを全角チルダに変換してやればいいのです。Winであれば、見た目で判断することが出来るので変換も容易です。

肝心の変換する方法ですが、Windows版のDreamweaverの「検索および置換」機能や、秀丸(ver.7)の「grepして置換」などを利用して、Webサイト単位で変換を行うのが確実で良いかと思います。

この「Winで波ダッシュを全角チルダに変換する」ならば容易に出来ますので、一番現実的な方法だと思います。

Mac環境で作業していて、かつUTF-8で納品する場合の注意点の一つとして「全角チルダと波ダッシュの問題」は覚えておいた方が良いかと思います。

09/05/12追記
(オススメ)文字参照で全角チルダを表示する

アイビーネットblogをリニューアルしたところ、Winで波ダッシュを全角チルダに変換しても、記事を上げる時点で文字化けを起こしてしまいました。原因はよく分かりませんが、MTやMySQLのバージョンが変わったことが影響しているのかもしれません。

そこで、全角チルダを文字参照「&#xFF5E;」で表示する方法に変えました。この方法であればMac上でも作業できます。単純に文字として全角チルダを表示する場合は、この方法が一番いいかもしれません。

Google独自のブラウザ「Google Chrome(クロムと読みます)」のベータ版がついに発表されました。Macは相変わらず迫害されているようで残念ですが、まあ少しすればリリースされるでしょう。こういう「新製品」はいじっていて楽しいですね。

• Google Chrome (BETA) for Windows

使い勝手などの感想は、雨後の筍のごとくアップされまくっているのでそちらを参考にしてください。「パスワードが丸見え」とか、Silverlightが動かない等の不具合もあるそうですが、だいたい評判は良いようですね。感想の中には「タブ使いじゃないから、IE6の方がいい」なんて、私からすると考えられない感想なんかもあっておもしろいですよ。

Google ChromeのマークはIE6未対応

Google ChromeはWin IE6からダウンロードしたのですが、ちょっとおもしろい画面が見られました。

下記はダウンロード後のThanks画面なんですが、Google Chromeマークの画像が妙な枠で囲まれています。じつはこれ、背景がアルファチャンネルで抜いてある32ビットPNG画像なのです。

ご存じの通り、IE6はアルファチャンネルに対応していません。ですので最近のブラウザでは背景が抜けて白くなるところが、変に灰色になっているのです。

でもよく考えると、背景は白一色ですから、元から背景を白にしておけば、アルファチャンネルで抜く必要はないんですよね。

そう考えると「これって、わざとかな？」という気もします。IE6ユーザーに「ヘーイ、ボーイ。いつまでそんな旧式のブラウザを使っているつもりだい。そろそろコッチにきなよ」とでも言いたいのかな？

まあ、単なる深読みしすぎの妄想に過ぎないのですが、ちょっと面白かったのでご紹介しましたw。

YUI Font CSSとは、各種ブラウザで表示文字サイズの差異をなるべく少なくする目的で作られたCSSライブラリーです。

以前ある案件で、同じような構造のCSSを自分で作って使っていたのですが、興味があったので今回はこちらを利用することにしました。

• Yahoo! UI LibraryのFonts CSS
• fonts.css(2.5.2)

Yahoo! UI Library Fonts CSS(2.5.2)を分解

どんな処理をしているのかを理解せずに使うのは危険と思ったので、細かく解析してみました。Yahoo! UI Library Fonts CSS(2.5.2)は、下記の3つのパートから成り立っています。

body {
	font: 13px/1.231 arial,helvetica,clean,sans-serif; /* 基本文字設定 */
	*font-size: small; /* Win IE7およびWin IE6標準準拠モード向け */
	*font: x-small; /* Win IE 5-5.5､6(後方互換モード)向け */
}

table {
	font-size: inherit; /* モダンブラウザ向け */
	font: 100%; /* Win IE 5-5.5､6(後方互換モード)向け */
}

pre,code,kbd,samp,tt {
	font-family: monospace;
	*font-size: 108%; /* Win IE全般向け */
	line-height: 100%;
}

YUI Fonts CSS：bodyパート

bodyパートは下記の処理をしています。

font: 13px/1.231 arial,helvetica,clean,sans-serif;

モダンブラウザに適用。

Firefox、Safari、OperaやMac IE5に適応される。Mac IE5は、文字サイズがpxで指定してもあってもブラウザで変更できるため問題なし。

フォントサイズ13pxを基準にしているのは、単純に12pxだとサイズが小さいからなのか、調整するのに都合が良かったからではないかと思います。

「/1.231」はline-heightの指定です。line-heightに単位(em等)が付いていない理由は、こちらを参考にしてください。

*font-size: small;

Win IE7およびWin IE6標準準拠モードに適用。

「アスタリスクハック( * )」を使いWin IE全般に適応。Mac IE5には適応されない。次の行で上書きするので、これはWin IE7およびWin IE6標準準拠モードのみの処理になる。

セレクタのアスタリスクハックではないので、Safariには適応されない。

*font: x-small;

Win IE 5-5.5､6(後方互換モード)に適用。

「アスタリスクハック」+「値が足りないショートハンド」なので、Win IE 5-5.5､6(後方互換モード)に適用される。

「値が足りないショートハンド」だけだとMac IEにも適応さてしまうため、「アスタリスクハック」が追加されている。

YUI Fonts CSS：tableパート

tableパートは下記の処理をしています。

font-size: inherit;

モダンブラウザに適用

font: 100%;

IE 5-5.5､6(後方互換モード)、Mac IE5に適用。

「値が足りないショートハンド」なので、IE 5-5.5､6(後方互換モード)、Mac IE5に適用される。この処理は、IE 5-5.5､6(後方互換モード)の継承バグを回避するための処理。

tableパートでは、2つの方法で文字サイズの継承を行っていますが、Mac IEには継承に関するバグはありませんし、モダンブラウザも「font-size: inherit;」などとしなくても継承します。

それらを考えると、tableパートはIE 5-5.5､6(後方互換モード)の継承バグ回避だけを考え「font-size: 100%」だけあればいい気もしますが...、ここの処理はよく分かっていませんです。

YUI Fonts CSS：pre,code,kbd,samp,ttパート

*font-size: 108%;

Win IE全般に適応。

「アスタリスクハック( * )」を使いWin IE全般に適応。そのままだと「pre」や「code」の文字サイズが小さくなるので、文字サイズを一回り大きくしています。

Yahoo! UI Library Fonts CSS　まとめ

全体を詳しく見ることで、大体なにをやっているかは分かったのですが、tableパートだけはよく分かりませんでした。天下のYahoo!が作ったCSSですので、全くの無意味ということはありえないと思いますが...、うーん。

時間が空いたときにでも、また追求してみます。

08/8/19　追記

YUI Fonts CSSのバージョン3 PR1がリリースされたようですね。

• YUI 3.x Preview Release 1
• yui_3.0.0pr1.zip

• Google マップ ストリートビュー

ネット上では、Googleストリートビューでおもしろスポットを探すのが流行っているようです。そこで私もそれに乗って「松本見聞録」の第一回放送に出てきた場所を探してみました。

ちなみに「松本見聞録」を知らないという方は下記からどうぞ。いつまで残っているかわかりませんが、リンクを張っておきます。

• 松本見聞録 #01 東京・中野編＆恵比寿編 (1/2)
• 松本見聞録 #01 東京・中野編＆恵比寿編 (2/2)

Googleストリートビューで見る、松本見聞録の各スポット

「首ピーン！」は探すのに苦労しましたが、それ以外は結構かんたんに見つかりました。ストリートビューが無かったスポットに関しては、その付近になります。

「首ピーン！」はたぶんこの辺

大きな地図で見る

「ドMかっ！」

大きな地図で見る

「英・印・沖！」

大きな地図で見る

その他

• 何でいかのおすしやねん！
• 逃げるか?っ！(この先)
• ゴリラ逃げてるでぇ?！
• 乗る気ゼロか?っ！(このちょっと先)
• キャシャーンみたいに言うな！
• どの中やねん！(この先のはず)
• そこそこかい！
• 何を言っとるんだ！

中部グラフィックコミュニケーションズ主催のセミナー「UD(ユニバーサルデザイン)セミナー」に参加してきました。参加費無料のセミナーです。

セミナー内容は下記です。

• 「ユニバーサルデザインフォント」の特徴と事例　(株)イワタ
• 色のユニバーサルデザインについて　東洋インキ製造(株)
• 「色覚シミュレーションモニター」のご紹介　(株)ナナオ

セミナー内容に関しては「どうしてUDが求められてきているのか」「2010年の人口ピラミッドはどうなる」「色覚障害者にはどう見えるか」など、まあごく普通の内容でした。

それに添える形で、それぞれの自社製品、自社ソフトが紹介されるといった流れだったのですが、その中の「色覚シミュレーションモニター『FlexScan Uシリーズ』」がなかなかの優れものでした。

リアルタイム色覚シミュレーションツール「FlexScan Uシリーズ」

色覚シミュレーションツールとは、色弱者の見え方をシミュレーションするツールです。色弱障害のタイプとしては下記があります。

• 第1色覚障害(赤色が欠落)：P型
• 第2色覚障害(緑色が欠落)：D型
• 第3色覚障害(青色が欠落)：T型(ごく希な障害)

この中の第1色覚障害と第2色覚障害の見え方をリアルタイムにシミュレーションしてくれるモニターが、ナナオの「FlexScan Uシリーズ」です。

いままでも、画面を静的にキャプチャして見せてくれる色覚シミュレーションツールは有りましたが、動的(リアルタイム)にシミュレーションしてくれるツールは初めて見ました。リアルタイムですのでFlashなど動画への対応なども含めて、効率よくアクセシビリティチェックが出来そうです。

静的色覚シミュレーションツール　例：

富士通 ColorDoctor

ナナオのモニターですので少々お高いですが(24.1型：定価142,800円、Amazonなら126,800円)、Webアクセシビリティチェック用に1台欲しいですね。

お題は下記の項目でした。

• 「Flashのアクセシビリティ」インフォアクシア 植木誠さん
• 「Webアクセシビリティ概論」東京女子大学教授 渡辺隆行さん
• 日本の政党を評価ツールとユーザーテストで検証、その結果発表と評価
• 視覚障害者の方による、パネルディスカッション
  

Flashのアクセシビリティ

アクセシビリティパネルを利用

Flashのアクセシビリティの問題点として「音声読み上げがされない」「キーボードのみで操作が出来ない」ということがよく挙げられます。しかし「アクセシビリティパネル」の「名前」と「タブインデックス」を利用すれば、これだけでも大幅にアクセシビリティは改善されるということでした。

アクセシビリティパネルの「名前」は音声読み上げソフトで読み上げられる文章、「タブインデックス」はtabキーを押したときにカーソルが動く順番を設定する機能です。

この施策は、Flashで行う最低限のアクセシビリティでもあるということでした。

アクセシブルなFlash例

• 沖電気メカトロニクス商品
• アクセシビリティPodcast

ちなみに、Flashのテキストタイプは「ダイナミックテキスト」にしないと読み上げられないようです。

ユーザーテストのポイントと、その結果をふまえた改善方法

Flashに限った話ではありませんでしたが、ユーザーテストのポイントを教えてもらいました。

1. ユーザーテストには、サイトにまったく関わっていない人を使う
2. パソコンリテラシーがある程度高い人を使う
3. ユーザーの属性(全盲、色覚異常、肢体不自由者、等)ごとに、5人に参加してもらう
4. 進行係はユーザーの手助けをしない、グッと我慢
5. ユーザーの利用感想を鵜呑みにしない

「ユーザーの利用感想を鵜呑みにしない」というのは、例えばユーザーから「○○が使いづらい、○○というようにしたら使いやすくなる」という意見をもらった場合に「じゃあそうします」ではなく、なにが原因でユーザーは問題を感じたかを考える必要があるということです。

問題の原因が「コンテンツ」なのか「ユーザーエージェント(例えば、Webブラウザ)」なのか「ユーザーのスキル」なのかなど、これらを考慮して問題を解決していく必要があるということでした。

Webアクセシビリティ概論

以前名古屋で開催された「Webアクセシビリティ＠名古屋」で講師の渡辺さんが仰っていたのと、基本的には同じ内容でした。

評価ツールはスペルチェッカーと同じ、それだけでは不十分

評価ツールでの検証は、スペルチェッカーのようにチェック項目と合っているかどうかしか見られない。中身(内容)までは理解出来ない。評価ツールでの検証だけでは限界があるので、やはりユーザーテストも合わせて行うことは必要であるし、大事だということでした。

代表的なアクセシビリティ評価ツール

• WebInspector
• aDesigner

Web制作者だけがアクセシビリティに責任があるという思い込みは違う

アクセシビリティを進めていくためには、実際の利用者(視覚障害者、等)、音声ブラウザを提供している開発業者、オーサリングツールを提供している開発業者、そしてコンテンツを作るWeb制作者が協力する必要がある。これらは相互依存の関係にあるからだ。

しかし、Web制作者だけがアクセシビリティに責任を感じている場合が多い。それはおかしな話。

このおかしな思いこみを打破していくためにも、Web制作者は、今後の製品に実装して欲しい具体的な機能を開発業者にフィードバックしていったり、アクセシビリティの大切さを周りに啓蒙していく、エヴァンジェリスト(伝道者)として活動する事が大事ということでした。

日本の政党を評価ツールとユーザーテストで検証、その結果発表と評価

NPO法人ハーモニー・アイによる研究発表でした。視覚障害者の方に、自民党、共産党、社民党、公明党のWebサイトで「後期高齢者医療制度の政策を調べる」という目的でユーザーテストを行い、その結果発表と評価報告です。

順位を付けるとすると下記になるそうですが、どのサイトもかなり問題がありました。ちなみに民主党がありませんが「時間がなかった」そうです。えぇー。

• 1位...公明党
• 同立2位...共産党、社民党
• 問題外...自民党

どのサイトもかなり問題が

色々問題があった中、「これはひどい」と思った物を挙げてみます。

• 全政党とも、Flashはまったく読まれない。
• 全政党とも、altが抜けている、間違っている画像が多々ある。
• 社民党は「ヤシロミントウ」と読み上げられる。
• 共産党の委員長「志位(シイ)」は「ココロザシイ」と読み上げられる。
• 共産党で「JCP」と言う単語が幾度か出てくるが、略語であるためまったく意味が分からない。(JCP = Japanese Communist Party = 日本共産党)

自民党はアクセシビリティ問題外

日本トップの政党「自民党」ですが、メインメニュー「政策」にaltが無く「index/seisaku.html」とリンク先URLが読まれてしまいます。これではユーザーテストが出来ないということでストップ、問題外という評価となりました。自民党は「音声読み上げソフト」を考慮していないようです。

余談ですが「政策」のページを見ると「自民党は、音声読み上げソフト等に対応できるWebページづくりを目指しています。」と書かれています。「音声読み上げソフトには、まだ対応出来ません」ということですね。素直ですが、いつ対応するつもりなんでしょうか。

まだまだ対策が不十分なサイトが多い

2年前の調査では、95%のサイトがアクセシビリティの問題を抱えていたそうです。その頃に比べればマシにはなってきていますが、まだまだ対策が不十分な、意識が足りていないサイトが多いようですね。

視覚障害者の方による、パネルディスカッション

年齢、性別、パソコンリテラシー、住んでいる場所、障害の程度がそれぞれ違う、4人の視覚障害者の方とのパネルディスカッションが行われました。

よく使っているサイトはどこか

• Amazon
• Wikipedia
• Google
• 生協のサイト(視覚障害者に優しい)
• サイトではないが、サーチエイドをよく使う

スキップリンクについてどう思うか

• 便利。
• 見出し飛ばしを使っているので必要ない。
• 使っているが、そもそも本文がすぐ始まるようにして欲しい。
• 便利だが、スキップリンクが利用出来ないソフトもある(PC-Talkerの事です。ちなみに解決方法もあるようです)。

Googleを使っていて、困った事はないか

• ほとんど困らない。
• PC-Talkerを使っているが、すぐ本文に行かないのでそれが不便。
• 解説文(スニペット)が短すぎて、ページ内容が分からない。結局リンク先を見ないといけない。

PDFについてどう思うか

• PDFは読まない。
• 容量を軽くして欲しい。
• テキストのコピーをしてソフトで読み上げさせるので、テキストのコピー許可を付けておいてほしい。
• テキストをコピーした場合、表は崩れてしまう。表のみExcel等にして欲しい。

その他の発言

• 勘違いされやすいが、視覚障害者でもTVは情報源、娯楽のひとつ
• 最近YouTubeをよく使う

など、かなり貴重な意見、感想、情報を聞くことが出来ました。このコーナーが今回のセミナーの中で一番充実していたと思います。

最後に視覚障害者のひとりの方が「別にアクセシビリティの教科書みたいなサイトが欲しい訳じゃない。楽しく、欲しい情報が手に入ればそれで良い。」と言われていたのは、なるほどなと思いました。

アクセシビリティというと、どうしても「どんな施策が正解なのか、どんな技術が正解なのか」という方に目がいきがちですからね。

先週の金曜日、7月11日に、協力会社のモンキーワークス様とサプライズ企画を行いました。
事の発端は前回のモンキーワークス様とのお食事会でした。

「今田さんの誕生日に一緒に何か出来たらいいですね」というお話を頂いて面白いなと思っていたんです。
ただし、誕生日2週間前まで何も行動に移さず...。ぎりぎりになってモンキーワークスさんに「誕生日企画を実行したいんですけどご協力いただけないでしょうか」とご相談したところ、快く承知していただけました。

今田に「2週間後の金曜日は空けておいて欲しい」とお願いしたところ、ご家族で過ごされるということでしたので、前倒しで1週間前の11日に行うことになりました。今田には内緒でメーリングリストまで立ち上げ、話は内密に進みました。
夜、モンキーワークスさんにこっそりと企画の打ち合わせに行ったり、手作りケーキの材料の搬入を行ったりと少し忙しかったですが、すごく楽しかったです。その間、今田は当日まで全く気づきませんでした。

納屋橋DRAEMONでのパーティー

そして、当日は納屋橋DRAEMONでパーティーを開きました。納屋橋DRAEMONは誕生日企画が面白いということで有名で、実際に行ってみると本当にすごかったです。

店員さんだけではなくお店にいるお客さんすべてを巻き込んで誕生日の人を祝ってくれるんですね。店員さんが誕生日の人の名前を読み上げたときに今田の名前を読み上げてくれたんですけど最初は全く気づいていませんでしたが、気づいたときにはすごく感動してくれたみたいです。僕自身もすごく楽しかったし、感動しました。

またあんなサプライズ企画を開きたいものです。今度は誰にサプライズをプレゼントしよう...。考えただけでわくわくします(笑)

普段の飲み会とばかり思っていましたが、裏ではサプライズ企画が用意されていたようです。

飲み会の最中に「イベントがあるので」とだけ伝えられタンバリンが配られ、店内が真っ暗に・・。
そして店員さんの歌と踊りが始まりました。

どうやら誰かのバースデーイベントのようだ・・。
なんか雰囲気の良い店だなーと、まったく人ごとのようにダンバリンを振っていたら・・・。

なんと自分のお祝いでした(￣□￣;)!!

みんなからのメッセージや手作りケーキなど・・。
怒濤のお祝の中、あまりの感動で泣きそうになってしまいました。

生まれてこの方、こんな誕生日は初めてです。

いつも一緒に頑張っているアイビーネットのみんな、
お世話になりっぱなしのモンキーワークスさん。

一生の思い出ができました。ありがとう。

• アックゼロヨン・アワード
• Yahoo! JAPAN インターネット クリエイティブアワード
• Web of the Year
• JWDA 日本WEBデザイナーズ協会　WEBデザインアワード
• movable typeコンテスト

その他にも様々なジャンルのものがあって面白いです。

コーディング

• コーディングコンテストVol.1
• ウェブ標準・コーディング・コンテスト
• 画像の使用を極力控えてかっこいいCSSデザインをやってみよう大会

ブラウザ

• Firefoxテーマコンテスト
• ブラウザ・デザインコンテスト
• iGoogleガジェットコンテスト

ブログ

• CNET Japan ブログアワード
• CMキング×ブログパーツコンテスト
• はてなダイアリー「公開デザイン祭2008春」

マッシュアップ

• Yahoo! JAPAN WEB API コンテスト
• マッシュアップコンテスト
• マッシュアップアワード
• マッシュアップ・アート・コンテスト

学生向け

• こどもホームページコンテスト
• 全日本中学高校Webコンテスト

地域

• 中小企業のためのホームページコンテスト京都
• 郡山地域ホームページコンテスト
• 浜松ホームページコンテスト
• 信毎ホームページ大賞

特定のジャンル

• エミダスホームページ大賞　-製造業のホームページコンテスト-
• 工務店WEB大賞
• J-KIDS大賞　-全日本小学校ホームページ大賞-
• 剣道に関するホームページコンテスト

海外

• Apple Design Awards
• 50 Best Websites 2007
• webdesign international festival
• カンヌ国際広告祭サイバー部門で「UNIQLOCK」がグランプリ、日本の11作品が受賞

その他

• Webクリエーション・アウォード
• 1-click Award
• Adobe AIR コンテスト
• Pitta!クリエイティブアワード

• PNG ファイルを Web 上で使ってはいけない

上記記事を読んで、ビクッとした。

この記事は「クライアントから電話口で『WebサイトでPNGを使うのは非常識です』と言われた。しかも曲がりなりにも『Webディレクタ』と言う肩書きを持ってる人から。ハッキリ言って理解できない。」といった内容です。

この記事に関しては「PNGが非常識って事はないよな。このWebディレクターさんは知識があまりないんだろうな。」という感想を持ちましたが、同時に「そういえば、PNGってアルファチャンネルPNG(PNG32)ぐらいにしか使ってないなぁ...、あれ？」とハタと思いました。あんまり他人事じゃなかった！w。

私がPNGを使わなかった理由は、以前(4〜5年前)PNGを利用したとき「重い」と感じ、「だったらJPGとGIFでいいや、FireworksならGIFの特許問題関係無いし、3フォーマットで比べるのもめんどいし」と思ったまま再考しなかったからです。...我ながらひどいですね。

画像フォーマットPNGとは？

そこで、今更ながら「画像フォーマットPNGとは？」ということで再考してみました。

PNGフォーマット種類

• PNG8(8ビットカラー) ＝ 256色
• PNG24(24ビットカラー) ＝ フルカラー
• PNG32(24ビットカラー ＋ 8ビットアルファチャンネル) ＝ フルカラー ＋ アルファチャンネル

PNGの特徴

• PNGのアルファチャンネルはIE6未対応。
• 1ビット透過(GIFの透過と同レベル)ならば、IE6も対応している。
• PNGに直リンクをした場合、IE5だと「ダウンロードしますか？」とダイアログが出る。
• PNGはガンマ値を埋め込める。
• 線画と写真が混在している画像でもPNGはキレイ。

PNGとGIF比較

• 256色の場合、GIFよりPNGの方が軽くなる事が多い。
• インターレスにした場合、GIFの方が軽くなる。
• ピクセル数の少ない小さな画像の場合、GIFの方が軽くなる事が多い。
• アニメーションPNGは、MNG形式とAPNG形式がある。全然普及していない。

PNGとJPG比較

• PNGは可逆圧縮なので画像が劣化しない。
• PNGとJPGで同程度の品質にした場合、PNGの方がかなり重くなる。

PNG、GIF、JPGの使い分け場面

PNG、GIF、JPGを比較して出てきた事のまとめです。

• IE5以降ならPNGに対応しているので、ブラウザ互換は気にする必要なし。
• ある程度のピクセル数があり、256色までのだったらPNGで。
• 線画と写真が混在している画像をキレイに保ちたい場合はPNGで。
• IE6を対応ブラウザに含むのなら、PNGのアルファチャンネルは使わない。
  (使いたい場合はIE PNG Fix等を利用。)
• i-modeに対応する場合は、PNGを使わない。(i-modeが対応していない)
• アニメーションさせたい場合は、普及しているアニメーションGIFで。
• 場合によるが、写真はJPGで。

PNGフォーマット再考してみて

ということで、再考してみた結論としては「三者三様の画像フォーマットを、条件によって使い分けるのが吉」といったところでしょうか。PCの場合なら全部PNGでも出来ますが、それはそれで乱暴すぎますし。

まあ今まで使っていなかった分、PNGが優れている部分に関しては積極的に利用しようと思います。愚かだった昨日までの自分よ、さようなら！

余談ですが、Fireworksファイルの拡張子「.png」と間違えやすいので、Fireworksの拡張子が「.fwd」とかに変わってくれると助かりますね。

セミナーの全体感は、弊社の市川の記事を見ていただければいいかと思いますので、こちらでは「リスティング広告」に特化して書いていきます。

SEM：リスティング広告で効果を上げるための4点

リスティング広告では、下記の4点に気を遣えば効果が出やすいとのことでした。
順に紹介していきます。

1. キーワード
2. 広告文
3. リンク先URL
4. 順位調整

1.キーワード

ロングテールのキーワード(例：不動産 横浜 ペット)を必ず入れる。ロングテールキーワードで訪問してくるユーザーというのは、数が少ないがすでに見込み客である可能性が高い。ロングテールキーワードを用いることで費用対効果は高くなる。

2.広告文

広告文によってクリック率は決まると言ってもいい。

クリック率が高い広告文

「無料」や「相談」といった単語を使った広告文

クリック率が低い広告文

「登録」や「申込み」といった単語を使った広告文

クリック率が高い広告文の場合、クリック数は多いが何となくでクリックされる率も高くなる。クリック率が低い広告文の場合、クリック数は少ないが見込み客がクリックする率が高くなる。

ビッグキーワード(例：転職)の場合、クリック率が高い広告文を使うと、上記のことから費用対効果が悪い場合が多い。ロングテールキーワード(例：転職 横浜 マーケティング)の場合、すでに見込み客である可能性が高いため、クリック率が高い広告文を使った方が費用対効果が高い。

まとめると、

• ビッグキーワード ... クリック率が低い単語を使って広告文を作る
• ロングテールキーワード ... クリック率が高い単語を使って広告文を作る

このようにすると、費用対効果は高くなる。

3.リンク先URL

リスティング広告のリンク先はサイトのトップページにしてはダメ。そのキーワードに合った各ページにリンクを張ること。

リンク先をトップページにした場合とキーワードに合った各ページにした場合の直帰率を比べると、トップページの方が直帰率が低くなる。なぜなら、そこから更に目的のページに移動する必要があるから。そしてトップページから目的のページへ移動する際、ユーザーの約1割は離脱してしまう。

リンク先をキーワードに合った各ページにした場合、直帰率は高いかもしれないが、成果率は高い。

LPO(Landing Page Optimization：ランディングページ最適化)という手段もあるが、いきなり始めるのではなくアクセス解析等の結果をふまえてから利用するべし。

4.順位調整

CPA(獲得単価)をチェックし、費用対効果で順位を調整するべし。費用対効果が高いキーワードは順位を上げ、費用対効果が低いキーワードは順位を下げる。

たまに語られる「表示順位が1位よりも3位ぐらいの方が費用対効果が高い」という決めつけは、根拠のないウソ。

戦略的SEMセミナー

検索エンジン対策について

検索エンジン対策とは、Yahoo Japan!やGoogleなどの検索結果で、自社サイトが上位に表示されるよう施策を施すことです。

検索エンジンの対策の考え方

例えば、自動車メーカーのサイトでは自動車を販売しているわけではないので、検索エンジンで「自動車」と打ち込んだ時に必ずしも一位に表示させる必要はありません。ただし、GMOさんにはブランディングのためだけに、ある自動車メーカーさんから検索エンジン対策の依頼があったそうです。
つまり、「『自動車』と打ち込んだときに上位に表示されること」が、「自動車=その某メーカー」とブランディングアップにつながると考えられているということですね。 今までは、個人的には検索エンジン対策はECサイトのように会社の利益に直結するような場合は検索エンジン対策が必要なのかなと考えていたのですが、ブランディングのために検索エンジン対策を行うというのも検索エンジン対策の目的のひとつとしてありなのかなと感じました。

検索エンジン対策の施策

弊社では既に当然のように行っていますが、主に

• タイトルタグに重要キーワードを入れる
• メタタグにサイトの内容を説明するキーワード、または説明文を入れる。
• CSSやJavaScriptの要素を外部ファイル化する
• 見出しに重要キーワードを入れる
• ページ構成の最適化

などがあげられました。

ページ構成の最適化

ユーザーが求めている情報を理解しやすいサイトを作成するには、「論文」を書くようにサイトを作った方がいいということです。 つまり、ページの中で起承転結の流れをつけて、段落ごとにコンテンツ(段落)を区切り分かりやすい見出しをつけることが大切ということです。 弊社でも原稿を作成する時には大切にしていることですが、「論文を書くようにサイトを制作した方が良い」と言われるとなるほどと思いました。これからお客様に説明するときにはこういう表現で説明しようかなと思います。

リスティング広告について

「転職」というキーワードで出稿する場合、

1. 登録　申し込み
2. 無料相談

という広告文ではどちらが適切だと思われますか。
正解は1の「登録　申し込み」です。「転職」というキーワードでは、かなり広く、コストが高くなってしまうため、「登録　申し込み」として敷居を高くする必要があるとのことです。
「幅広い出稿キーワード×敷居が低い広告文」はコストが高くなってしまうため行わない方がいいということですね。

広告としては、

• 幅広い出稿キーワード×敷居が高い広告文
• 絞り込んだニッチな出稿キーワード×敷居が低い広告文

で行った方がいいとのこと。これを参考に、現在、広告出稿のお手伝いをさせて頂いているお客様の内容を見直したいと思います。

戦略的SEMセミナー

ユーザーの消費行動プロセスの変化について

ご存じの方も多いかと思いますが、消費者の行動プロセスがAIDMAからAISASに変わってきたという話ですね。

• Attention (注意)→Interest(関心)→Desire(欲しい)→Memory(記憶)→Action(購入)
• Attention(注意)→ Interest(関心)→Search(検索)→ Action(購入)→ Share(共有)

消費者が関心をもつところまでは同じですが、その後の行動パターンがインターネットで検索して購入するように変化したということです。 また、購入で完結せず、その後にブログなどのCGMやMixiなどのSNSで情報が共有されて、他の消費者の行動パターンを生んでいくというお話でした。

Webデザインとユーザビリティ

ボタンとボタンじゃないところの区別がわかりづらいと、訪問したユーザーがクリックできないところをクリックできると思って何回もクリックしたりするなどしてユーザビリティが悪いので区別をつけた方がいい。
ぱっと見たときに立体的に見えていた方がクリックできる感じがするので、そういう面で、ボタンとボタンじゃないところでデザインに差をつけましょうというお話でした。認識はしていましたが、その翌日くらいにお客様とほぼ同じ内容の話が出てましたので、改めて認識しました。

今回のセミナーは理解している事が多かったため、次はWeb制作に携わる人向けのセミナーに行きたいなと思います。

OKWaveなどの質問サイトや質問掲示板を見ていると「WebサイトをWin IE6でそのままプリントアウトしたいけど、収まらず右側が切れてしまう。どうしたらいい？！」という質問をされている方をよく見ます。

色々な解決方法があると思いますが、私がオススメするのは下記の方法です。

* html {
	zoom: 80%;
	}

プリントアウトCSS解説

やっていることは非常に単純です。

1. 「* html」でハックして、IE6以前(IE5からIE6)に対してのみ適応させる。
2. 「zoom」で、全体の拡大率を変更する(例では80%に)。

よく使われる横幅760pxをA4に納めたいのであれば、80%前後にすれば収まります。

条件コメントを利用してCSSを綺麗に

「zoom」は、IE特有のプロパティですのでvalidatorでエラーが出ます。それが嫌でしたら条件コメント「<!--[if IE 6]>」を使って別CSSファイルにしてやってもいいでしょう。

条件コメントを使うのであれば、IE6へのハックも要らなくなります。

IE6ハック無しの記述

html {
	zoom: 80%;
	}

記述は簡単ですが、効果はあると思います。
Win IE6のプリントアウトでお困りでしたら、一度おためしあれ。

こちらは4月5日に東京で行われたMT4LP5の名古屋版で、基本的に再演(黒野さんのセッションを除き、若干短縮版)です。セッションは『Movable Typeプロフェッショナル・スタイル』という連動書籍に沿った内容でした。

【セッション内容】

Movable Typeテンプレートの基本

小中規模コーポレートサイト構築における実用的Tips

Movable Type 4.2の新機能とその活用

プラグイン開発と応用

MTの設置・運用に関するTIPS

管理画面のカスタマイズ

その他今回の名古屋版では、ベータ版が発表されたばかりのMovable Type 4.2を取り上げていただくなどおいしいところが満載でした。

小中規模コーポレートサイト構築における実用的Tips

書籍で予習をしていたのですが、自分にとって1番必要性を感じていたのがこのセッションです。普段Dreamweaverを使ったサイト構築で当然のようにやっていることを、MTでどうすれば実現できるのか。まだほとんどMTに触っていない私にとっては1から勉強しなければいけなかったことがまとまっている内容で、今後MTを制作する際に参照することが多いだろうなと思います。お題は以下の5つです。

1. カテゴリの増減に対応したローカルナビゲーション
2. いま見ているページと同じカテゴリに属するページの一覧を、ローカルナビゲーションに表示
3. カテゴリごとにタイトルの背景画像を変える
4. カテゴリごとに段組みを変える
5. n件ごとに特定のソースを出力させる

折りたたみ式ナビゲーションを構築する

ナビゲーションを制作する際に、すべてのメニューを表示せず必要な部分だけ展開し、今見ているカテゴリー以外のメニューは非表示にすることはよくあるケースです。

Dreamweaverで静的に制作する場合、私であればオプション領域の機能を使って各ページごとに表示・非表示を制御します。これをMTで実現するための方法が、1と2にあたります。

CSSシグネチャを実装する

例えばページごとに見出しの色を変えたりレイアウトを変えたりする場合に、bodyにid属性を付けてcssでスタイルを変える方法がCSSシグネチャです。お題の3、4ではこのCSSシグネチャの実装方法と、それを使ったスタイルの変更例を見せていただきました。

ちなみに、Dreamweaverでは「属性を編集可能にする」でbodyのid属性やclass属性を編集できるようになります。

特定の条件のときに、特定のソースを出力させる

その他、書籍で気になっていたトピックスに「特定の条件のときに、特定のソースを出力させる」というものがあります。具体的に言えば、企業サイトの最新情報で「New」や「イベント」、「講演会」といったカテゴリや状況を表すアイコンを付けたりできるのです。

弊社で制作したサイトの中にも最新情報にアイコンをつけたものがありますが、視覚的にも見やすくなるため、お知らせ更新システム等をMTで構築する際には押さえておきたいところです。

今回のセッション内での解説は無かったのですが、宿題という形でたくさんの人のやり方を見られる場が設けられています。
http://cremadesign.jp/blog/mt4lp5_movable_type/post_6.html

投稿の中には、「(アイコンを)一定時間のみ表示させる」方法のヒントもあったりしてとても勉強になりますので、「MT勉強中」という方はぜひともご参考に。

Movable Type 4.2の新機能とその活用

MT4LP5 名古屋版に参加して1番おいしかったのがこちらのセッションです。ベータ版が発表されたばかりのMT 4.2の新機能が取り上げられました。書籍にも載っていない情報なので、大変貴重な内容でした。自分にとって注目すべき点は

• パフォーマンスの向上
• テンプレートプレビュー機能
• テンプレート一覧画面の再設計

こちらの3点です。速さの理由は構築時に「キャッシュ」を利用しているところで、全体を一括で指定することも、モジュールごとに必要なものだけ選んで設定することもできるようです。その際には「最近の記事」を表示させている場合は不具合が出る確率が高いので、注意が必要です。

また、検索機能にperlではなくSQLを利用したことで格段に検索のスピードが速くなったとのことです。

管理画面のカスタマイズ

MT4.1ではカスタムフィールド機能が新たに追加され、エントリーの項目に自由度が増えました。今回お話しいただいたのはカスタムフィールド機能だけでなく、MT本体のデータを修正することでユーザにとって不必要な項目の削除・非表示・グレーアウト等ができるというものです。

デフォルトの状態では、デザインテンプレートなど構築者側にとってはあまり触られると困るものがたくさんあります。お客様にとっても、使わない項目など始めから見えていない方が使いやすいのです。

「バージョンアップで管理画面のインターフェイスが変更された時どうよ」というお話も出ているようですが、ユーザに合った管理画面を提供することが、お客様にも構築者側にとっても良いのではと思います。

参考：Movable Type管理画面の「壊れにくい」カスタマイズのために。

欲を言えば、もう1つ聴きたかったこと

今回のセミナーはMTの設置・構築に関するセッションで構成されていましたが、個人的には構築後の『運用』(サーバやMT本体の運用でなく、エントリーの作成から公開までのワークフローやデータのバックアップ等)に関する部分も聴きたかったなと思います。書籍でいうと「MT4を使ったビジネスサイト」の「3　運用プロセスをデザインしよう」にあたるところです。

実際にライターから公開責任者と、きっちり担当分けされているケースは少ないと思いますが(「担当者は私1人でございます。」がほとんどかもしれません)、どんな担当の人間が使うかを考慮しなければ、野田さんのセッションで解説された『ユーザインターフェースを考えたCMSの構築』はできませんから。どこかで機会があれば、MTの『運用』に関するお話を聴きたいですね。

Windowsで付けることのできない名前

Windowsには予約デバイス名というものがあります。以下の名称はディレクトリ名(フォルダ名)やファイル名に用いることができません。

• AUX
• CON
• NUL
• PRN
• CLOCK$
• COM0?COM9
• LPT0?LPT9

これらはMS-DOS時代にOS側で用いられていた名称らしいのですが、最新Windows OS「Vista」でも利用できません。

アイビーネットでは、基本Macで作業するので、連結決算に関するページに「consolidated」を省略した「con」というのをディレクトリ名に使おうとして、納品間近まで気がつかなかったことがあります。

IE6でエラーが起きるCSS id名

• <div id="tags">

上記のようにCSS id名に「tags」を利用した場合、Windows IE6で印刷をしようとするとスクリプトエラーが出ます。

ちなみに、IE7であったり、idではなく「class="tags"」ならエラーは起きません。

IE6でエラーが起きる、input要素のname属性

• <input name="tags" />

input要素のname属性に「tags」と利用した場合も、同様にWindows IE6で印刷をしようとするとスクリプトエラーが出ます。

なんでスクリプトを使っていないのにスクリプトエラーが起こるのかわかりませんが、単純に名称「tags」を使わないようにすれば問題ないかと思います。例えば「tag」や「tags1」にするとか。

こちらも、IE7ならエラーは起きません。

日本の法律には「時効」があります。時効の是非などについて、時々思い出したかのようにワイドショーで取り上げられているのでご存じだと思います。

対して、アメリカでは原則的に殺人罪に時効がありません。長期間にわたり未解決となっている凶悪犯罪の事を、通称「コールドケース」と呼ぶそうです。最近だと「ロス疑惑」なんかがコールドケースでしょう。

今回紹介するのはその「時効がない」というのがテーマのドラマ「コールドケース」です。6月9日(月)からシーズン3がWOWOWで再放送されるのですが、これすごいオススメです。

コールドケース3

http://www.wowow.co.jp/drama/cold/

回想シーンの演出が秀逸

物語は20年、30年、80年前など、過去に起こった事件の殺人シーンから始まります。

当時のヒット曲(例えば、1978年の事件ならエアロスミスの「Dream On」、1987年ならマイケル・ジャクソンの「Man in the Mirror」など)がBGMに使われ、当時の流行ファッションに身を包んだ人物たちが登場する中、古めかしい映像の中で殺人が起こります。

そして、その殺人に関する新たな証拠や証言が見つかり、主人公のリリーを中心に「再捜査」が始まる、というのが毎回のパターンです。

登場人物の事件当時の姿と、現在の姿がダブる演出が要所要所で入るのですが、それがすごく効果的に使われています。

20年、30年前に起こった事件ですので、みな年を取り風貌が変わっています。その事件関係者が出てくるとき、一瞬昔の姿に変わる演出が入るのです。こういった、昔の事件という題材だからこそ出来る演出が秀逸です。

ラストシーンで毎回泣きそうに

ラストシーン、事件が解決し犯人が護送されるとき、その時の被害者が幻で出てきます。笑顔でいたり、少し複雑そうだったりと、様々な表情で犯人とリリーを見つめています。私は、このラストシーンで毎回泣きそうになっていますw。

7月12日(土)からシーズン4も始まり、今後も期待出来そうなドラマ、オススメです。
惜しむらくはパッケージ化(DVD化)がされていないという事です。こんなに面白いのにモッタイナイ。

追記：DVD化されない理由

DVD化されない理由ですが、Wikipediaによると「但しあらゆるヒット曲を贅沢に使っているために、著作権の問題でDVD化が難しくなっていると言われており、シーズンを重ねているにも関わらず未だにDVD発売は無い状態である。」ということだそうです。なるほどね。

音声ブラウザ、NetReader(ネットリーダー) XPを検証のために購入しました。

現在の所、NetReaderのシェアはさほど高くないと予想されますが、PC-Talkerのシェアや、ホームページリーダーの開発状況を見ると、今後は徐々に高まっていくのではないでしょうか。

今回は、NetReaderでの読み上げテストで気づいた点を書き出してみます。

大多数のユーザーの環境設定は初期状態のまま

以前から「音声読み上げソフトのユーザーというのは、ソフトの環境設定は初期状態のまま利用するのか」という疑問を持っていました。

そこで、ミツエーリンクスさんが行っている「アクセシビリティPodcast」に質問をしてみました。出演者の植木さんが、プロレスラーの越中詩郎のファンだということを知っていたので、ペンネームを「読み書き越中」としたのですが、期待通り思いっきり喰いついていただきました。ありがとうございますw。

• 「辻ちゃん・ウエちゃんのアクセシビリティPodcast」第15回 後編

Q：音声ブラウザについて質問なんですが、音声ブラウザのユーザーというのは、 ソフトの環境設定は、初期状態のまま利用するのでしょうか。健常者の場合、ブラウザを利用するためのハードルが元々低いこともあってか大抵の場合、初期状態で利用している場合が多いかと思います。
自分の印象では、音声ブラウザのユーザーというのは、ある程度知識があるユーザーではないかと思うので、環境設定を自分に合わせて修正している方が多いのではと予想しています。

A：読み上げ速度を変えるということくらいはやるが、ほとんど初期状態のまま利用。

以前「Webアクセシビリティ@名古屋」でも同様の質問をしたのですが、やはり同じ答えでした。

ということで、これ以降は「音声読み上げソフトの環境設定は、大多数のユーザーが初期状態のまま」というのを前提として書いていきます。

「alt=""」もしくは「alt属性」自体がない画像の場合、拡張子を省いたファイル名で読み上げられる

<p><img src="hoge.gif" /></p>
<p><img src="hoge.gif" alt="" /></p>
<p><a href="#"><img src="hoge.gif" alt="" /></a></p>
<p><img src="hoge.gif" alt=" " /></p>
<p><img src="hoge.gif" alt="空画像" /></p>

上記は「hoge、hoge、hoge、hoge、空画像」と読まれました。アクセシビリティの基本として「意味のない画像は「alt=""」とする」というのがあるのですが、それと相反するような仕様です。

環境設定を「環境→閲覧オプション→説明のない画像→表示しない」にすれば読み上げられなくなりますが、初期状態の「環境→閲覧オプション→説明のない画像→レイアウト用の画像なら表示しない」になっていると読み上げられてしまいます。

「レイアウト用の画像」というのは、なにをもって「レイアウト用の画像」と認識するのか

ここで疑問に思ったのが、環境設定の項目「レイアウト用の画像なら表示しない」というのは、なにをもって「レイアウト用の画像」と認識するのかということです。

正規ユーザーになったことですし、開発元の高知システムに質問してみました。

Q：「レイアウト用の画像」というのは、なにをもって「レイアウト用の画像」と認識するのでしょうか。

A：ファイル名 space.gif の用に、透明な画像を使い、画像の幅で桁位置を調整しているページがあります。表の中に書かれていることが多く、現在のバージョンは、この画像をレイアウト用の画像と認識します。
なお、将来は画像の解析が進化し、表の中ではない別の画像もレイアウト用と認識するような場合も考えられます。

ということで、早速実験してみました。

table要素内での「alt=""」読み上げ実験

<table>
	<tr>
		<td><img src="space.gif" /></td>
		<td><img src="space.gif" alt="" /></td>
		<td><img src="space.gif" alt=" " /></td>
		<td><img src="space.gif" alt="空画像" /></td>
	</tr>
	<tr>
		<td><img src="toumei.gif" /></td>
		<td><img src="toumei.gif" alt="" /></td>
		<td><img src="toumei.gif" alt=" " /></td>
		<td><img src="toumei.gif" alt="空画像" /></td>
	</tr>
</table>

上記は「空画像、空画像」とだけ読まれました。

「レイアウト用の画像」というのは、table要素内にある「space.gif」、もしくは「spacer.gif」というファイル名の画像を指すのかと思っていましたが、違うようです。単純に、table要素内にある「alt=""」もしくは「alt属性」自体がない画像を「レイアウト用の画像」と認識しているようです。

table要素内にある「alt=""」になっている画像を、すべて「レイアウト用の画像」と認識するのはちょっと乱暴な気がします。ちょっとこの仕様はイマイチですね。ちなみにPC-Talkerだと「alt=""」でもファイル名は読まれません。

初期状態ではファイル名を読み上げないようにした方がアクセシブルな気がしますが...、どうなんでしょう。

ruby要素の読み上げはルビ側のみ

ETC(自動料金収受システム)の場合、「ETC」でも「Etc」でも「etc」でも「エトセトラ」と読まれてしまいます。そこで、ruby要素を使って振り仮名「イーティーシー」を追加してみます。

<ruby>
	<rb>ETC</rb>
	<rp>(</rp>
	<rt>イーティーシー</rt>
	<rp>)</rp>
</ruby>

上記の場合、ホームページリーダーだと「エトセトラ　イーティーシー」と2回読まれてしまいますが、NetReaderでは「イーティーシー」と、ルビ側のみを読みあげてくれます。これはナイス仕様ですね。

table要素は左から右に読み流す

th要素やtd要素、headers属性などを駆使しても、まったく無視して左から右に読み流します。環境メニューを覗いてみましたが、table要素の設定は見あたりません。「テーブル読み上げモード」があるので、それで充分だという事なのでしょうか。

その他、余談

• 「アクセシビリティポリシー」を、なぜか「アクセシビリティポリトシー」って読む。なんで？
• NetReaderの開発会社、高知システムのサイトはすごく閲覧がしにくい。私が逆に(?)健常者だから？
• 高知システムのサイトのNetReader紹介ページに「ネットリーダー Web制作者向け価格」というメニューがあり、値段が違ったので何か機能が付かされるのかと思いましたが、通常のソフトとまったく同じ物でした。あれれ？

UAI研究会主催による「Webアクセシビリティ＠名古屋」に行ってきました。書籍『Webアクセシビリティ』の出版記念に開催されたセミナーです。

前回の続きです。「Webアクセシビリティ概論」についてはこちらをご覧ください。

アクセシブルなコンテンツ、ナビゲーション、フォーム

「アクセシブルなコンテンツ、ナビゲーション、フォーム」で印象に残った点を書き出してみます。

全学齢児童生徒の6.3%は、認知的な障害を持つ

中央教育審議会による平成17年の報告によると、学習障害(LD)、注意欠陥障害(ADD)、注意欠陥多動性障害(ADHD)などの認知的な障害の子供は、全児童生徒の約6.3%(約68万人)と推定されるそうです。思っていたよりも数が多いですね。

代替テキスト ＝ alt属性ではない

代替テキストとは、画像の代替となるテキストの事。つまり、代替になればalt属性でなくてもいい。alt属性に書くには記述が長すぎる場合などは、longdesc属性を利用したり、そもそも本文中に画像の内容を書いたら良いんじゃないかという話。

ちなみに、ホームページリーダーはlongdesc属性に対応していますが、PC-Talkerは未対応です。NetReaderも相変わらず未対応です。

Tabキーでリンクだけを辿っても意味が分かるように

たとえば「上記の詳しい内容はこちら」というアンカーテキストではなく、「初回キャンペーンの詳しい内容はこちら」というように、そのアンカーテキスト単体で意味が分かるようにしましょうという話。

これはSEOやユーザビリティにもつながる事ですね。

代替テキストは、音訳マニュアル【音訳・調査編】を参考に

視覚障害者用録音図書(デイジー図書など)製作のためのマニュアル「音訳マニュアル【音訳・調査編】」に、写真や図、グラフの音訳に関する解説が載っており、代替テキストを付ける参考になるということでした。

さっそく買ってみました。該当内容を抜粋してみます。

写真の説明の表現

• 主観的な表現は避け、客観的な表現につとめる
• 説明の順序として、まず場所や概略などの説明をし、次にテーマ、ポイントなる部分を説明する
• 写真のテーマとなるところ、ポイントの部分は詳しく説明し、周辺に属する部分は簡略化する
• 写真の説明文や本文中に書かれている事柄は、説明を適宜省くなどして、簡潔にする
• 写真中、確定的でないものには断定的な表現を避け、「?のような」などの表現を工夫する
• 白黒写真では、「白っぽい」「黒っぽい」の表現は、根拠がある場合以外使わない
• 1冊の本の中(Webサイトの中)で、説明の詳しさの度合いにばらつきがないように注意する

図の説明の表現

• 図のポイント、重要な部分をまずつかむ
• ポイントとなる部分を中心に説明するのが、分かりやすい部分が多い
• 必要な限り、図に表された情報は音声化する
  

講師の山口さん

講師の山口さんが、セミナーのスライドをWiiリモコンで操作していました。
色んな意味で「うわーうわー」って思いましたw。

フリートーク(質問コーナー)

前から気になっていたことを質問してみました。

Q：音声ブラウザについて質問なんですが、音声ブラウザのユーザーというのは、ソフトの環境設定は初期状態のまま利用するのでしょうか。

たとえばルビ(ruby)は、ホームページリーダーで初期状態の場合、テキストとルビとで2回読まれてしまいます。初期状態のまま利用するユーザーが多い場合、ルビの利用は逆に使いにくくなってしまうのではないでしょうか。

A：かなりいじっているユーザーと、まったくいじっていないユーザーと両極端です。しかし大半のユーザーは初期のままで利用しています。ルビに関しては、たとえ2回読まれたとしても付けた方がアクセシブルだと思います。

UAI研究会主催による「Webアクセシビリティ＠名古屋」に行ってきました。書籍『Webアクセシビリティ』の出版記念に開催されたセミナーです。

お題は下記の4項目＋質問コーナーでした。

1. Webアクセシビリティ概論
2. アクセシブルなコンテンツ、ナビゲーション、フォーム
3. WCAG 2.0最新情報
4. JIS X 8341-3改正の方針
5. フリートーク(質問コーナー)

セミナー内で発表された資料にリンクを張っていきますので、興味のある方はどうぞ。

Webアクセシビリティ概論

Webアクセシビリティ概論で、印象に残った点を書き出してみます。

「アクセシビリティ(accessibility)」を「a11y」と表記。

セミナー内では「アクセシビリティ(accessibility)」を「a11y」と表記していました。この表記は標準なんでしょうか？

それにならって、今回は「アクセシビリティ」を「a11y」と表記して書いていこうと思いましたが、読み返したらわかりにくかったので辞めましたw。

アクセシビリティへの配慮や対応は、企業の社会的責任(CSR)である。

CSRを掲げているような企業は、Webアクセシビリティにも対応しなければダメだよねという話です。そりゃそうですね。

障害者を製作プロジェクトに加えるとよい。

まったく異論ありませんが、現実問題として障害者を製作プロジェクトに加えるのは難しいです。

難しいならばどうするかというと、自分のおじいちゃんや小さい子供が利用する姿、障害者が利用しているビデオなどを参考にして、想像や予測を出来るようにして取り組むと良いということでした。

• 動画で学ぶ支援技術 スクリーン・リーダー篇
• 障害者のホームページ利用方法の紹介ビデオ

その他には、障害者の方が実際に使用して検証してくれるような会社に外注するのも手でしょうね。

文字だけにすればよいという思い込みはダメ。
全盲の視覚障害者だけがアクセシビリティの対象ではない。

アクセシブルなページというと、テキスト中心の軽いページや、音声ブラウザでちゃんと読み上げられるように制作されたページなど、全盲の視覚障害者を対象に考えられがちです。

しかし、アクセシビリティの対象は、全盲の視覚障害者だけでなく、聴覚、身体、発話、認知、脳機能障害など、他の障害者も含まれます。

認知障害者の場合などは、テキスト中心よりも図にした方がアクセシブルなページになります。全盲の視覚障害者だけでなく、他の障害者のアクセシビリティ問題も心にとどめておく必要があるということでした。

• サンプル：認知障害者向けのニュース「news-2-you」

Web制作者だけがアクセシビリティに責任があるという思い込みは違う。

実際の利用者や音声ブラウザを提供している開発業者、オーサリングツールを提供している開発業者にも努力してもらう必要がある。

だから、Web制作者は、今後の製品に実装して欲しい具体的な機能を開発業者にフィードバックしていったり、アクセシビリティの大切さを周りに啓蒙していく事が大事ということでした。

長くなったので「アクセシブルなコンテンツ、ナビゲーション、フォーム」は次回にします。

社員旅行で堂ヶ島温泉に行ってきました。日程は、4月26日からの1泊2日です。泊まったお宿はこちら「海辺のかくれ湯 清流」さん。

和風の旅館にチェックインすると、大抵お部屋に下の売店で売っているお茶菓子が置いてあると思いますが、この旅館では点てたお抹茶も付いてきました。思いがけないもてなしに、ちょっと感動。

部屋からの景色(あいにくの雨)

2日目は暑いぐらいの晴天

1日目はあいにくの雨でしたが、2日目は暑いぐらいの晴天で、堂ヶ島洞窟めぐりや大仁洋らんセンターなどを楽しんできました。

堂ヶ島洞窟めぐり

大仁洋らんセンター

B級スポット？富士見山 達磨寺

富士見山 達磨寺にも行ってきました。
高さ5ｍの達磨大師の像があったり、虎の剥製(虎大魔神という名前で、ストーカー厄除け)があったり、なぜか金さん銀さん人形が売っていたりと、そこはかとなくB級臭がするお寺でした。

高さ5ｍの達磨大師座像(ピンボケ)

金運アップの黄色いダルマ

今田が達磨寺で金運(売り上げ)アップの黄色いダルマを買っていました。やっぱり世の中金ですw。
今度の月曜日が大安なので、午前中に右目を入れます。願いが叶ったら左目を入れるのですが、入るのは何時になる事やら...。

金運の黄色いダルマ

今回は、鈴木と市川が体調不良で行けませんでしたが、次は全員一緒に行きたいですね。
楽しい旅行でした。

08/5/13　追記

5月12日が大安だったので、午前中に目を入れました。金運アップを願う場合は、一度に両目入れるそうです。

みんなで入れました。

「display: table-cell」とは、テーブルの構造を表現することができるCSSプロパティです。先日公開されたベータ版(IE8 Beta1)で確認しましたが、IE8からは「display: table-cell」に対応しているようです。

そこで、今回はこの「display: table-cell」を使うことで、どんなことが出来るのかを見ていきたいと思います。

「float」と「display: table-cell」でのカラムレイアウトを比較

左右のカラムが固定で、中央のカラムが可変というような3カラムのレイアウトを表現したい場合、CSSでは通常「float」を使います。カラムレイアウトは「display: table-cell」でも表現できますので、この2つの方法を比較してみたいと思います。

「float」を使った従来の3カラムレイアウト

「float」で3カラムレイアウトを表現する場合、下記のようなHTMLとCSSになります。

HTML

<div id="body">
	<div id="navigation">navigation</div>
	<div id="content">
		<div id="content-inner">content</div>
	</div>
	<div id="sidebar">sidebar</div>
</div>

CSS

#navigation {
	float: left;
	width: 200px;
	margin-right: -200px;
	background-color: #FFCC66;
}

#content {
	float: left;
	width: 100%;
}

#content-inner {
	margin: 0 200px;
	background-color: #CC6633;
}

#sidebar{
	float: left;
	width: 200px;
	margin-left: -200px;
	background-color: #FF9966;
}

• サンプル：「float」を使った3カラムレイアウト

ネガティブマージン(マイナスマージン)を使ったり、真ん中のカラムをdiv要素で余分に囲ってやらなければと、結構複雑な記述になります。floatを使っているので、clearもしないといけません。

「display: table-cell」を使ったシンプルな3カラムレイアウト

「display: table-cell」で3カラムレイアウトを表現する場合、下記のようなHTMLとCSSになります。

HTML

<div id="body">
	<div id="navigation">navigation</div>
	<div id="content">content</div>
	<div id="sidebar">sidebar</div>
</div>

CSS

#body {
	width: 100%;
	display: table;
}

#navigation, #content, #sidebar {
	display: table-cell;
}

#navigation {
	width: 200px;
	background-color: #FFCC66;
}

#content {
	background-color: #CC6633;
}

#sidebar {
	width: 200px;
	background-color: #FF9966;
}

• サンプル：「display: table-cell」を使った3カラムレイアウト
  ※IE8 Beta、Firefox2、Safari2、Opera9などで見てください

CSSソースの長さ自体は大して変わりませんが、パッと見でなにをしているかわかるぐらい非常にシンプルな記述になります。floatを使っている場合に必要だったclearもいりません。

いままではfloatを使って行っていたカラムレイアウトが、この「display: table-cell」を使うことによって、よりスマートに表現できるのです。

「display: table-cell」で縦方向に対する高さを揃える

「display: table-cell」には、もうひとつ利点があります。「display: table-cell」は、文字通り「table」ですので、CSSでは再現しにくい、縦方向に対する高さを揃えることが出来ます。そして「table」ですので、カラム内での縦方向の位置「vertical-align」も思った通りに作用してくれます。

• サンプル：「display: table-cell」で縦方向に対する高さを揃える
  ※IE8 Beta、Firefox2、Safari2、Opera9などで見てください

3カラムの高さがバラバラに設定してありますが、最大の100pxに揃っています。そして、カラム内での縦方向の位置も表現できています。

「display: table-cell」が使えるのは数年後？

「display: table-cell」を使うことで、CSSで出来る表現が広がります。table要素で記述した方が良い部分まで「display: table-cell」で記述する必要はありませんが、カラムレイアウトの表現に活躍してくれそうです。

しかし、惜しむらくはIE8からしか対応していないということです。2008年4月現在でさえIE6を使っている方が大勢いることを考えると、この「display: table-cell」が活躍するのはだいぶ先の話になりそうです。

Firefox2やSafari2など、IE以外の主要なブラウザがこの「display: table-cell」にちゃんと対応していることを考えると、ホント「Fuck IE！」と叫びたくなります。

余談：「display: table-cell」でこんな事も出来ました

「display: table-cell」を色々いじっていたら、こんな事も出来ました。なんか不思議な感じですが「display: table-cell」以外でも表現できるのでしょうか。

• サンプル：「display: table-cell」でこんな事も出来ました
  (※IE8 Beta、Firefox2、Safari2、Opera9等で見てください)

前回「画像をダウンロードさせない方法？」ということで、本画像を背景に配置し、その上にダミーの透明画像を配置するという方法を紹介しました。しかし、この方法ではソースを見れば画像のURLはすぐわかってしまいます。

今回は、前回の方法に、画像のURLをわかりにくくする方法を追加してみました。

続・画像をダウンロードさせない方法？手順

1. 本画像を背景に配置
2. 上にかぶせるようにダミーの透明画像を配置
3. 画像配置を外部JavaScriptに記述
4. 外部JavaScriptの、画像URLをHTMLエンティティ化
5. 外部JavaScriptを難読化

上記の手順に沿って、実際に作ったサンプルです。

• サンプルHTML
• サンプルJavaScript

画像の配置方法

画像の配置ですが、単純に横並びに配置した画像をCSS「position」で制御して重ねているだけです。今回はimg要素で画像を配置しましたが、CSS「background-image」で制御しても良いかもしれません。

<p><img src="http://www.ibnet.ne.jp/images/logo.gif" /><img src="http://www.ibnet.ne.jp/images/spacer.gif" width="221" height="59" /><p>

p { position: relative; }
p img { position: absolute;}

画像配置JavaScriptの記述

外部JavaScriptですが、行っているのは「document.write」で画像を2つ配置しているだけです。元々はこんな感じになります。

document.write('<img src="http://www.ibnet.ne.jp/images/logo.gif" /><img src="http://www.ibnet.ne.jp/images/spacer.gif" width="221" height="59" />');

画像URLをHTMLエンティティ化

まず画像URLを、まずHTMLエンティティ化します。

HTMLエンティティ化

document.write('<img src="&#104;t&#116;&#112;&#58;&#47;&#47;k&#46;y&#105;&#109;&#103;&#46;&#106;&#112;&#47;i&#109;&#97;&#103;&#101;&#115;&#47;top&#47;&#115;p&#47;&#108;&#111;&#103;o&#46;&#103;&#105;f" />');

JavaScriptを難読化

次にJavaScriptを難読化します。

JavaScriptを難読化 /packer/

eval(function(p,a,c,k,e,r){e=function(c){return c.toString(a)};if(!''.replace(/^/,String)){while(c--)r[e(c)]=k[c]||e(c);k=[function(e){return r[e]}];e=function(){return'\\w+'};c=1};while(c--)if(k[c])p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c]);return p}('q.b(\'<n e="&#8;7&#l;&#4;&#d;&#0;&#0;k&#2;a&#6;&#5;&#1;&#2;&#j;&#4;&#0;i&#5;&#g;&#1;&#h;&#3;&#0;c&#0;&#3;p&#0;&#m;&#9;&#1;o&#2;&#1;&#6;f" />\');',27,27,'47|103|46|115|112|109|105|t|104|111|y|write|top|58|src||97|101||106||116|108|img|||document'.split('|'),0,{}))

ここまで行えば、パッと見では画像のURLがどこら辺に書かれているかすらわからなくなります。
まあ、この方法も画面をキャプチャーされれば終わりですし、ちょっと時間をかければ画像のURLもわかっちゃいますが、軽い気持ちでダウンロードしようという方々には効果あるかもしれません。

「めんどくせぇ！もーやめた！」と思わせたら勝ちかな、という程度のローテクな方法の紹介でした。

08年11月4日　追記：

JavaScriptを利用したもっと簡単な方法を見つけました。CSSのclass「protect」を付けるだけで出来るので、画像が複数あっても楽に出来ます。

しかし、JavaScriptやCSSを切ってやればダウンロード出来ていまいます。なかなか「コレ！」という方法は見つかりませんね。

• MooTools 1.2 Image Protector: dwProtector
• view the example

4月11日（金）に協力会社のモンキーワークス様と懇親会を開きました。モンキーワークス様とのお付き合いは、僕が入社する前からになるので２年以上前からになります。それにも関わらず、今まで一緒に食事をしたりする機会がなかったのです。モンキーワークス様は僕が入社した頃には、あいちベンチャーハウスでお仕事をされていたのですが、昨年の11月に法人化され、事務所を移転され、現在はとてもおしゃれで清廉なオフィスで仕事をされています。
打ち合わせでお伺いするのが毎回とても楽しみです。これからも色々とお世話になるかと思います。

一次会：食事会

さて、食事会は地下鉄東山線今池駅から徒歩3分の「早乙女ふるまゐ」というソバダイニングのお店で開きました。IBメンバーは胃腸の調子があまりよくない人が多かったこともあり、さっぱりしていて美味しかったです。ぜひまた行きたいですね。食事をしながらお話をするというのは色々な話を聞くことができていいですね。モンキーワークス様の日常の光景が垣間見られてとても楽しかったです。

二次会：ボーリング

そして二次会は「星ヶ丘ボウル」で３チームに分かれて３ゲームでボーリング大会を行いました。

• Aチーム:多川様、辻本様、今田
• Bチーム:古庄社長、押谷、市川
• Cチーム: 川澄様、小川、山田

上記の３チームで戦いました。

同じチームになった古庄社長はビリヤードはとてもお上手という話を聞いていたのですが、ボーリングに関しては話を聞いていなかったので、ボーリングが上手なのかどうかお聞きしたところ、

「大丈夫！カリスマボウラーだから！」

とのことだったので一安心。

ただし...、始まってみたら「見てて、大丈夫だから」の言葉とは裏腹に全然スコアが伸びていないんです...。

今田がスコアを200をだして、勝つのは難しいかなと思ったのですが、ボーリング上級者の今田にはマイナスのハンデがついていたことと、古庄社長が途中でスコアがすごく伸びたこともあり、Bチームが勝ちました。

女性陣もみんな平均してスコアが良くてびっくりしました。みんなボーリングお上手なんですね。

ボーリングが終わって時間を見てみると1時半でしたので、ビリヤードをやりたかった人もいましたが、今回はとりあえずここまでで解散としました。モンキーワークス様とより近くなれましたし、本当にすごく楽しかったです。ぜひまたみんなで行きたいです。

前回日記で書いた「割に合わなかった韓国料理コース」ですが、本当に面白い場所でした。その韓国料理屋さんには新年会とお疲れ様会で2回行ったんですけど、とりあえずサービスで出てくる料理のボリュームが多すぎます！そして店員さんがとても陽気な方で面白かったです。

山田が、「お手洗いどこですか」と聞いたところ、「教えな〜い(笑)」と返ってきたり、僕が出てきた料理に対して、「これはどんな料理ですか」と聞いたところ、「豚と牛！」と返ってきたり、とにかく面白い店員さんでした。またがっつり食べたい時にはぜひ行きたいものです。

会社で、自衛隊に配給されているというカップヌードル「SDF (Self-Defense Force) ヌードル」なる物を買いました。

この「SDFヌードル」、単なる企画物ではなく、実際に自衛隊で当直勤務の夜食用に配給されているそうです。いわゆる「ミリメシ」ってやつですね。

市販はされていないようで、その証拠にパッケージにはバーコードがありませんでした。

中身は市販品とほとんど一緒

中身ですが、Wikipediaによると「内容はカップヌードルのレギュラーとほぼ同一であるが、具の量が少なく味がやや濃い目になっている」ということで、市販の物とあまり変わらないようです。

肉体労働に従事する陸上自衛隊向けに濃い味になっているのでしょうか。ということは、一般に人が食べるとあんまり体に良くないのかもしれませんね...。実際に食べてみましたが、噂通りちょっとしょっぱかったです。

味はしょうゆ(赤い方)とシーフード味(青い方)の2種類です。海上自衛隊の金曜カレーにちなんで、カレー味とかもあるかなー、と妄想していたのですが、そんな味はないようです。残念(?)。

フレームという機能をご存じでしょうか。フレーム(フレームレイアウト)とは、ひとつのブラウザ画面に複数のページを表示する機能です。最近ではユーザビリティの観点からほとんど使われなくなってきています。

フレームページ例

http://www.ld-dvd.co.jp/

フレームを使ってはいけない理由

フレームが使われているWebページの場合、フレーム内のページが変わってもtitile要素は親のtitile要素のままです。

これでは「今見ているページが、なんというテーマのページなのかわからない」という事が起こります。これが「ユーザビリティを高くするためには、フレームは使っちゃダメ」といわれる理由の一つです。今回は、それをほんのちょっと解決する方法を紹介します。

フレームページのユーザビリティを高めるJavaScript

function ftitle(){
	parent.document.title=document.title;
	}

<body onLoad="ftitle();">

このJavaScriptを本文フレームに埋め込めば、本文フレームが変わるたびにtitile要素もそれに合わせて変わってくれます。フレームを仕方なく使わなければいけないときに使用してみてはどうでしょうか。

ブックマークするときもそのtitile要素が使われます。とはいっても、URLは親フレームのURLのままです。ですので「ほんのちょっと解決するJavaScript」なのです。

余談：
Yahoo! で「フレームページ」と検索すると、とっても恥ずかしい検索結果が見られます。
なぜか学校、病院が多いですね。

PNGというのは、画像フォーマットの1つです。特長の1つとしてアルファチャンネル(透過属性)を持つことが出来ます。このアルファチャンネルを使うことで、ホームページの制作をシンプルにすることが出来たりします。

しかし、まだまだ主流であるIE6では、このアルファチャンネルPNGに対応しておらず、使う場合にはDirectXの機能を使ったりと結構手間でした。(IE7からは対応)

IE6で透明画像(png)を簡単に使う方法

• IE PNG Fix

こちらを使うことで、IE6で透明画像(png)を使うことが簡単に出来るようになります。
しかし利用に関していくつか注意点があります。

注意点1：パス指定は絶対パスで

CSSからファイルへのパス指定が、CSSからではなく、読み込んだファイルからの指定でなければいけません。ですので絶対パスで指定すると良いでしょう。

例：img, div { behavior:url(/common/iepngfix/iepngfix.htc) }

ついでにIE6のCSSハックするなら下記

* html img,
* html div { behavior:url(/common/iepngfix/iepngfix.htc) }

注意点2：階層内に含まれているpng以外の背景部分も消える

「div id="container"」などと上階層部分でIE PNG Fixを使ってしまうと、条件はよく分かっていませんが、その範囲内で使っている背景部分(background:)も消えてしまう場合があります。

子要素がない最下層で利用する場合であれば、上記の問題は出ませんので、下記のように個別指定で利用すると良いでしょう。

#main-image img { behavior:url(/common/iepngfix/iepngfix.htc) }

注意点3：背景画像の繰り返しができない

背景画像を繰り返す「repeat-x」「repeat-y」「repeat」が効きません。ですので、繰り返し処理で事が済みそうな背景画像でも、大きな画像を用意する必要があります。

08/09/03　追記

v2.0からは、背景画像の繰り返しにも対応したようです。

アルファチャンネルPNGは便利

アルファチャンネルPNGが標準で使えるIE7のシェアもだんだんと増えてきています。使うのに少しコツが要りますが、非常に便利な機能ですので、一度使ってみてはいかがでしょうか。

• 長渕剛 OFFICIAL WEB SITE

種明かし

確かに画像を保存しようとしても、無関係な透明画像しか保存できません。

では、どうやっているのかとソースを覗いてみると、人物の画像をbackgrouundにして、真上に同じ大きさの透明画像「spacer.gif」をおいて、画像を保存できないように見せかけていました。

メチャクチャローテクですが、ソースを見ることが出来ない人には効果あるでしょうね。たぶん画像の無許可二次利用を防ごうとしての施策なんでしょう。altも透明画像の方に付いているので画像検索にもかかりません。

画面をキャプチャーされれば終わりだし、余分なソースで汚くなってしまいますが、こんな方法もあるんだなーと感心してしまいました。

追記：08/4/17

「続・画像をダウンロードさせない方法？」を書きました。

そのままテーブル要素をコピー＆ペーストですめば問題ないのですが、大抵はwidthやcolor、CSS等の要素が追加されています。流用するにしてもこのような要素は要らないので、まず削除しなければいけないのですが、これが結構面倒くさいのです。

そこで、簡単にテーブル要素を初期化する方法はないかと色々試してみたところ、良い方法を見つけました。

テーブル要素の初期化に必要な物

• Excel
• Dreamweaver
• 汚いソースを憎む心
  

テーブル要素初期化手順

1.テーブル要素ソースをExcelで開く

まずテーブル要素ソースをExcelで開きます。文字化けする場合がありますが、その時はHTMLに含む形にし、「charset=Shift_JIS」を付けましょう。

2.Excelで書き出し

Excelで開いたら「CSV(カンマ区切り)」か「テキスト(タブ区切り)」で保存しなおします。

3.Dreamweaverで取り込み

次にそれをDreamweaverの「挿入 - テーブルオブジェクト - 表データの読み込み」から取り込みます。するとrowspan属性やcolspan属性が取れてしまったり「2.0」などの数字が「2」と置き換えられたりしてしまいますが、まっさらの綺麗なテーブル要素になります。

コピーミスもほぼ起こらないので使えるのではないでしょうか。「汚ねえソースだなチクショウ！」と叫びたくなったら、状況によって使ってみて下さい。

デジタルなトイカメラ「Vista Quest VQ1005」を購入しました。トイカメラとは...、なんて説明は要りませんね。ググってください。

フィルム不要のデジタルなトイカメラ

大抵のトイカメラはフィルムが必要になります。しかし、フィルムだとフィルム代やプリント代がバカにならなかったり、現像するまでは見られなかったり等、デジタルに慣れた身にはどうしても面倒に感じてしまいます。

私も以前からトイカメラには興味があったのですが、これらの理由から手を出すのをためらっていました。しかし、この「Vista Quest VQ1005」は、デジタルカメラなのでそんな煩わしさもありません。SDメモリカードに記録されるので、気兼ねなく撮影できます。

近所をパシャパシャ

さっそく昼休みに近所をパシャパシャ取ってみました。
トイカメラの割に、写りはなかなか良いです。

Vista Quest VQ1005の購入方法

「Vista Quest VQ1005」は、下記のサイトで購入できます。4色あるようですね。

• Vista Quest VQ1005：アンシャンテshop
• Vista Quest VQ1005：ガジェットクラブ

OEM製品で「Genie III」なんてのもあります。ほとんど同じ物だそうです。

• Genie III

価格もそんなに高くありませんし、忙しい日々の息抜きにトイデジカメ、どうですか。

ようやく初投稿させていただきました。
Webに関する事から、日常の些細な事など色々書いて行きたいと思っていますので、今後ともよろしくお願いいたします。

さて今回は先日購入したお気に入りグッズの紹介をします。

【USBあったかスリッパDual 2008年モデル】

最近人気のおもしろUSBグッズのひとつ。パソコンのUSB接続でヒーター内蔵のスリッパが暖まるという商品。
冷え性の私は、暖房で上部は暖かくても足もとだけが冷えている状態が苦手。これは！と思い即注文しました。

スリッパ本体がヒーターなしでもあったかそうなボリュームです。ふんわりとした履き心地がナイス。
内蔵のアルミニウムヒーターのパキッとした感触が少々気になりますが、歩く訳ではないので許容範囲でしょう。

アルミニウムヒーターが内蔵されています。

強・弱の温度調節機能付き。
弱でもじんわりとした暖かさが得られました。

足が温まるだけで全身が温まってきます。
これで部屋の暖房を消す、もしくは温度を下げる事ができれば、多少の省エネになるかもしれませんね。

ちなみに履いたまま歩く事のできる、充電式のワイヤレス版も販売されています。

新年会を開催

先日、インターネット課のメンバーによる新年会を行いました。
楽しい宴の詳細は、後日市川よりご報告させていただきます！

ブログへの初投稿が新年のご挨拶になってしまいました。
このブログを知っているお客様からは「ブログを書かれているのは小川さんだけですね」と言われます。みんなブログで何を書いたら良いのか苦心しているようです。

さて、明日は新年会でインターネット課のメンバーで韓国料理を食べてきます！
グルメウォーカーを見て、

「コース（￥2800〜）は4名から、前日までに要予約」

と記載があったので早速の予約の電話を入れてきました。

その電話のやり取りがすごく面白かったので紹介します。

市川：「グルメウォーカーを見たんですけど明日、19時から7名の予約をお願いします。コースでお願いします。」
お店の人：「コースは?3800か?5800円の2コースありますが、どちらにしますか？」
市川：「グルメウォーカーには?2800のコースが掲載されているので、そのコースをお願いしたいのですが...」
お店の人：「割にあわないからそのコースはやめました。でも大丈夫！心をこめてつくるから安心して。」

とのこと...。おそらく店員の人は韓国人で日本語の微妙なニュアンスをうまく表現することが出来ないんでしょうねぇ。
結局は?3800円のコースを注文することにしました。でも、家庭的な店員さんでよかったです。

最近、疲れてきている他のメンバーもきっと癒されるはず！明日のご報告は改めてブログにて紹介させて頂きます。

でも胃腸風邪でお腹の調子が悪い人がいるけど、韓国料理を食べに行っても大丈夫なのでしょうか...。

• 視覚障害者のパソコン・インターネット・携帯電話利用状況調査2007

この資料の中から、音声ブラウザのシェアを取り上げてみたいと思います。

音声ブラウザのシェア

• ホームページリーダー...165人(35%)
• PC-Talker...146人(31%)
• 95Reader...43人(9%)
• JAWS...37人(8%)
• VDM...30人(6%)
• サーチエイド...13人(2%)
• その他...26人(5%)
  (ボイスサーフィン,ALTAIR,FocusTalk,xpNavo,CatWalk)

ホームページリーダーとPC-Talkerで、66%近くのシェアを持っています。もっと高いかと思っていましたが、以外に低いですね。

Webサイトの音声ブラウザチェックは、ホームページリーダーとPC-Talkerで行っておけば大丈夫かと思っていましたが、66%ではそうでもなさそうです。

ちなみに、この調査は2007年5月から7月に行われたそうで、2007年10月に発売された、高知システムの「NetReader」は調査対象に入っていないそうです。

音声ブラウザのシェアは変化するか

1位のホームページリーダーですが、開発元が「Vistaに対応しません」ときっぱり言っています。

質問：Windows VistaおよびInternet Explorer 7へ対応の予定はありますか？

回答：いいえ、対応する予定はありません

対応しないという事であれば、OSがVistaにだんだんと移行していく中で、音声ブラウザのシェアも変わっていくのかなと思えそうですが、同時に発表された視覚障害者のOS利用状況を見ると、そう単純ではなさそうです。

視覚障害者のOS利用状況

• Windows XP...349人
• Windows 98...44人
• MS-DOS...21人
• Windows Me...20人
• Windows 2000...17人
• Windows Vista...16人
• Windows 95...3人
• Mac OS...2人
• Windows CE...1人

XPが圧倒的ですが、98とかMS-DOSもいまだに使われています。この事からも視覚障害者の多くの方は、OSを乗り換えることがかなり困難なのではと予想できます。となると、ホームページリーダーがVistaに対応しなかったところで、シェアはまだまだ下がらないのではないでしょうか。

こちらの資料は、2月の最終報告書作成に向けてデータを再集計中だそうで、多少の変動があるとのことでした。

08/5/16追記　最終報告書が公開されていました

最終報告書が公開されていました。サイトでPDFファイルのダウンロードや、報告書の冊子を申し込んだり出来ます。

報告書の冊子は、私が08/4/24に頼んだときには在庫がありましたが、もしかすると、もう無いかもしれません。

アクセシビリティに興味がありましたら、一度ご覧になることをオススメします。

• 視覚障害者のパソコン・インターネット・携帯電話利用状況調査2007　最終報告書

新年あけましておめでとうございます。

旧年中は格別のお引き立てを賜り、心より御礼申し上げます。
本年も変わらぬご愛顧の程お願いいたします。

平成20年　元旦
アイビーネット　スタッフ一同

上記の年賀状は、親会社の年賀状の別案を拝借してBlog用に仕上げた物です。
立体スキャナでスキャンした物で、なかなか刺繍の立体感が出ていると思いますが、どんなもんでしょうか。画像をクリックしていただくと、もうちょっと大きな画像でご覧いただけます。

それでは、今年もアイビーネットをよろしくお願いいたします。

なんのきなしにGoogleウェブマスターツール見ていたところ、アイビーネットにサイトリンクが生成されていました！

サイトリンクとは

サイトリンクとは、Googleの検索結果の下に表示されるリンクリストの事です。有名企業や有名サイトを検索したときなどに表示されているのを見た事があると思います。

サイトリンクが生成される条件

Googleのヘルプによると、サイトリンクが生成されるのには、ある程度の条件があるようです。

検索結果の下に表示されるリンク リストを編集するにはどうすればよいですか。

サイトリンクは、ユーザーの役に立つと Google が判断した検索結果についてのみ表示します。サイトの構造が原因で Google のアルゴリズムが適切なサイトリンクを見つけることができない場合や、サイトリンクとユーザーのクエリとに関連性がないと思われる場合、サイトリンクは表示されません。

ということは、アイビーネットのサイトを「ユーザーの役に立つと Google が判断した」という事なのでしょうか。すばらしい！

結果を見る限り、ディレクトリを工夫してカテゴリー分けを明確にしたページが、リストとして生成されているようです。

サイトリンクが表示される条件

でも、いまのところ、アイビーネットのサイトリンクが生成されていても表示される事はありません。サイトリンクが表示されるもう一つの条件として「サイト名で検索されたときに1位に表示されている」というのがあるからです。07年12月27日現在、「アイビーネット」と検索しても1位に表示されていないので、表示がされないのです。

忙しさにかまけて、何年も自社サイトを放っておいたツケがこんな所にも出ております(泣)。来年は、この反省をふまえて自社サイトの充実を計っていこうと計画しています。

それでは、よいお年を！

08年10月17日　追記：

アイビーネットのサイトリンクが「ibnet」と検索したときに表示されるようになっていました。サイトリンクが表示される条件として「サイト名で検索されたときに1位に表示されている」というのがあると書きましたが、どうやら間違っていたようです。

サイトリンクが表示される条件としては「あるキーワードで検索したときに1位で表示され、かつそのキーワードにかなり適合したサイト」ということのようです。ですので「サイト名にかなり適合したサイト」であれば、サイト名で検索したときにサイトリンクが表示されるということです。モンキーワークスさんなどがそうですね。

では「そのキーワードにかなり適合したサイト」にするにはどうしたらいいかというと、すいませんよく分かっていません。下記Blogでは「タイトル(タイトル要素)に特定キーワードを必ず入れる」を上げていますが、アイビーネットの場合タイトル要素に「ibnet」は入っていませんので、これも正確ではないようです。

• web2.0：Googleのサイトリンクを制する

先日、MyMiniCityで自分の都市「ibnet City」を作りました。

せっかく作ったのだから、都市の様子をブログに表示したいなと思ったのですが、現状ではブログパーツのようなものは提供されていません。

なにか良い方法はないのかと調べていたところ、自分のブログ等にMyMiniCityを表示するCGIを見つけました。

• MyMiniCityはじめました - The blog of H.Fujimoto

現在のibnet City

現在の「ibnet City」の街並みです。

すぐにこんなCGIを用意しちゃうなんて素晴らしいですね。サイズと表示領域を調整をすればブログパーツとして使えそうです。

少額ですが、ドネーションしておきました。

ルールをすごく簡単に説明すると、アクセス数によって都市が発展していき、アクセスされたURLによって発展のしかたが変化していくようです。

さっそく自分の都市を作ってみました。

ibnet City

http://ibnet.myminicity.com/

12月19日22時の「ibnet City」です。ぽっつーん...。

発展しまくると、下記のような高層都市になるそうです。

お暇な方も、そうでない方も、我が都市に一度いりゃあせ。
http://ibnet.myminicity.com/

弊社アイビーネットWebサイトを8月末にフルリニューアルしました。

リニューアル時に行った施策として「301リダイレクト」をご紹介しましたが、それ以外にも「404エラーページ」をカスタマイズしました。404エラーページとは「そのページが見つからない場合」に表示される画面です。通常は下記のように味気ない画面になります。

この画面が表示される原因はいくつか考えられ、サーバーに元々ファイルが存在しなかったり、リンク先のURLを間違って指定していたという事などがありますが、サイトをリニューアルした事によってURLが変更されている場合にも起こります。

上記のような味気ないエラーメッセージでは、せっかく検索エンジン経由などでアクセスしてくれたユーザーも去っていってしまいます。それを少しでも解消するために404エラーページをカスタマイズしてみました。

オリジナルの404エラーページを用意

弊社では下図の404エラーページを用意しました。404エラーページは、通常のHTMLで制作する事が出来ます。

このエラーページが表示されてしまったユーザーに色々な選択肢を与えるため、「ホームへの移動」「サイトマップへ移動」「お問い合わせへ移動」などを用意しました。そして、検索エンジンのクロールが大体終わった頃「Googleカスタム検索」によるサイト内検索を追加しました。

アクセス解析を見ていると、この404エラーページからサイト内に移動してくれるユーザーもいるようで、まずまず成功しているようです。

404エラーページを適応させる

404エラーページが用意できたら、次に「.htaccess」ファイルを用意します。

.htaccessの記述例(404エラー)

.htaccessは下記のように記述します。

ErrorDocument 404 /404ページファイル名
(例：ErrorDocument 404 /404error.html)

記述が完了し、サーバに.htaccessをアップしたら、うまくいっているかチェックをしましょう。下記のサイトでチェックが出来ます。URL欄には存在しないURL(例：http://www.ibnet.ne.jp/☆☆)を入力してやります。

• View HTTP Request and Response Header

下記のように赤丸の部分に「404 Not Found」とでれば問題ありません。これでオリジナルの404エラーページを適応させることができました。

間違った.htaccessの記述例(404エラー)

下記のように後半のファイル名を絶対URLで書くと「404 Not Found」ではなく「302 Found」になってしまうので間違えないようにしてください。

間違った.htaccessの記述

ErrorDocument 404 絶対URL/404ページファイル名
(例：ErrorDocument 404 http://www.ibnet.ne.jp/404error.html)

「301リダイレクト」と併用でさらにユーザビリティを高める

「301リダイレクト」と「404エラーページ」を併用する事で、さらにユーザビリティを高めることができます。301リダイレクトで旧URLから新URLに誘導してやり、404エラーページで不明ページから目的のページに誘導してやるのです。

.htaccessに301リダイレクトと404エラーを併記する場合は、下記のように続けて記述してやります。

ErrorDocument 404 /404error.html
Redirect 301 /bigei/ http://www.bigei.co.jp/
Redirect 301 /ibnet/index.html http://www.ibnet.ne.jp/
...
...

かっこいい404エラーページ集

最後にかっこいい404エラーページ集をご紹介します。

弊社サイトの404エラーページは、あんまり面白くないデザインになってしまっているので、下記のサイトなどを参考においおい直していこうと思っています。

• Wanted: Your 404 Error Pages
• 404 Error Pages: Reloaded

• SESSION-1 : ホームページリーダーに聞いてみよう
• SESSION-2 : 良いフォームを考えてみよう

SESSION-1 : ホームページリーダーに聞いてみよう

SESSION-1では講師の方が来ていました。なぜかプロレスのマスクをかぶってジャージ姿です。正体はケンドーコバヤシでしょうか。最初から最後までマスク姿のまま講演をする姿には、感動すら覚えました。当然、嘘ですが。

講義は下記のような内容でした。

• 音声読み上げソフト(音声ブラウザ＆スクリーンリーダー)の癖も気にしながらマークアップしましょう
• ターゲットユーザーを考慮して制作しましょう
• 頭で考えるだけでなく、具体的に音声読み上げソフトで読み上げてみましょう

「音声読み上げソフトの癖も気にしながらマークアップ」に関しては、下記のような事が挙げられていました。

• 「07.10.31」はダメですよー、「2007年10月31日」と書きましょう
• 「住　所」などと、位置を合わせのスペースは使ってはいけません、個別に読まれてしまいます
• 削除文(KO・U・HU・N☆ ←こんなの)は読まれちゃいます、文末にでも一言コメントを添えましょう

「ターゲットユーザーを考慮して制作しましょう」に関しては、面白い例として「音声ブラウザにバッチリ対応した液晶テレビのサイトって、誰のために必要？」なんてのが挙げられていました。

ちなみに、以前CSS Niteで受講したアクセシビリティ講座では「音声読み上げソフトは、IBMホームページリーダーとPC-Talkerでチェックすれば、大体のユーザーはカバーできる」という事でした。

基本的な内容が中心でしたが、色々な方の意見が聞け、有意義な時間を過ごす事が出来ました。

SESSION-2 : 良いフォームを考えてみよう

事前の宿題に「このフォームは良い！というのを3〜5程度調べておいてください」というものがあり、それらに対してディスカッション＆発表するという形式でした。知らない優秀なサイトもたくさん出てきて、勉強になりました。

参考になったフォームをいくつか紹介します。

ジョインベスト証券　新規口座開設フォーム

懇切丁寧な開設Flashフォーム。素早く入力できるHTML版もぬかりなくあります。

Instant Domain Search

Ajaxな検索フォーム。検索結果をブラウザに保存しておく機能(右上)が面白い。

FFFFOUND!

左メニュー「Sign in」から。ライトボックス的なログインフォームが面白い。

アップル

右上の検索窓から。検索結果がリッチ＆クイックレスポンス。Mac OSXのSpotliteに似てる。

digitalBush Masked Input Plugin

本文内の「Demo」タブから。入力欄の書式をマスクしてくれる。面白い。

少し前(11/22)の話ですが、朝の番組「特ダネ」で司会の小倉さんが「camomile Best Audio」というSACD(スーパーオーディオCD)についてとても熱く語っていました。「SACDのマルチチャンネルで聞くと、本当に音の広がりがあって、素晴らしい音」だと。

• camomile Best Audio [Hybrid SACD]

私も安物ながら、5.1ch(というか7.1chですが)の音響システムと、SACDが聞けるプレーヤを持っているので買ってみました。ちなみにSACD初購入です。

SACDのマルチチャンネルで聞いてみた

SACD自体を初めて聞いたので、他と比べて高音質なのかどうかという事は分かりませんが、いいです。いい音です。

5.1chの映画なんかでよくある「後方上空から来た飛行機が前方へ抜けていく」なんていう派手な演出は無く、主に前面空間を大きく使うという演出でした。

ボーカルは正面の空間から聞こえ、その他の楽器(パーカッションや鈴なんか)は左右上空から聞こえてくる感じでした。CDに付いていた解説書に「鈴の音は上空から降ってくるようにした」とされていましたが、まさにそんな感じでした。

私は、もっぱら映画ばかり見ていてあまり音楽は聴かないのですが、SACDにはちょっとはまりそうな気がします。

通常のCDプレーヤーでもいい音

ちなみに、このCDはHybrid Discなので通常のCDプレーヤーでも聞く事が出来ます。マルチチャンネルのSACDにくらべると少し劣りますが、通常のCDプレーヤーでもでもいい音でしたよ。オススメ。

• Google ウェブマスター ツール
• Yahoo! Site Explorer
• Live Search Webmaster Tools(MSN)

日本における3大検索エンジン(Google、Yahoo、MSN)のウェブマスターツール群です。

登録したサイトの被リンク数(外部リンク)や被リンクサイト名、サイトマップの登録、検索エンジンにどのページが登録されたか、検索エンジンクローラーがいつ来たかなどを知る事が出来ます。

各検索エンジンからの効率的な情報収集が出来るので、Webサイト管理者の方には必須のツールではないでしょうか。

Yahoo! Site Explorerを利用するには、米Yahoo!のアカウントが必要

Yahoo! Site Explorerは米Yahoo!のサービスなので、Yahoo! Japanのアカウントではログインできません。米Yahoo!のアカウントを取得する必要があります。

• 米Yahoo!のアカウント取得(Yahoo! Registration)

米Yahoo!のアカウントが取得できたら、Yahoo! Site Explorerにログインしてサイトを登録しましょう。

• Yahoo! Site Explorerにログイン

ちなみに米Yahoo!とYahoo! Japanのデータベースは一緒のようで、米Yahoo!で登録してもYahoo! Japanにちゃんと反映されます。

Live Search Webmaster Toolsは、まだ微妙

最近登場したMSNのLive Search Webmaster Toolsは、まだベータ版だからでしょうか、時々データが表示されなくなったりと不安定です。ついでにあまり役に立つ情報を得る事も出来ません。

ですが、今から利用しておいても損はないと思いますので、興味のある方は登録してみてはどうでしょうか。

• Live Search Webmaster Tools(MSN)

Live Search Webmaster Tools管理画面

もうこうなったら買っちゃう勢いで真剣に検討するか、と検討し始めたのが8月初め頃。あれから4ヶ月さんざん悩んだあげく、ついに買っちゃいました。

• ボディ：ニコン D80
• レンズ：AF-S DX VR Zoom-Nikkor ED 18〜200mm F3.5〜5.6G(IF)

で、とりあえずマニュアルもろくに読まずに初撮影！庭で犬を撮影してみました。

...よくわかんない絵になっちゃいました。なんか変に暗いですね。

精進あるのみ。

前回「リニューアル時は301リダイレクト(永久的なリダイレクト)で」と書きましたが、Yahoo!のヘルプには「302リダイレクト(一時的なリダイレクト)でもOK」みたいな事が書かれています。

• Yahoo!：リダイレクトを設定している場合、どちらのURLがデータベースに登録されますか？

そこで、どちらでも良いのならばこそ、Yahoo!では301と302のどちらが良い結果が出るのか、自社サイトのリニューアル時に実験をしてみました。

301リダイレクトの場合

旧：http://www.ibnet.ne.jp/ibnet/column/column.html　を
新：http://www.ibnet.ne.jp/sitemap/old_column/index.html　に301リダイレクト。

8月27日

Webサイトリニューアル。301リダイレクト開始。

9月7日

旧URLで検索しても表示されない。旧URL消滅。
新URLで検索するとsitemap.xmlが表示された。新URLが認識され始めたみたい。

9月10日

旧URLで検索しても表示されない。
新URLで検索すると正常に表示された。

9月12日

旧URLで検索すると、新URLが表示された。リダイレクト完了。

302リダイレクトの場合

旧：http://www.ibnet.ne.jp/ibnet/homepage.html　を
新：http://www.ibnet.ne.jp/web/index.html　に302リダイレクト。

8月27日

Webサイトリニューアル。302リダイレクト開始。

9月7日

旧新両URLとも表示確認。それぞれ別ページとして認識されている。

9月13日

旧新両URLとも表示確認。旧URLで検索すると、タイトルとスニペット(説明文)が新URLのものに変わってた。

9月21日

旧URLで検索すると、新URLが表示された。リダイレクト完了。

Yahoo!でも301リダイレクトの方が良い

上の例からわかるとおり、301リダイレクトの場合は、ちゃんとURLが移行した事を検索エンジンが認識していますが、302リダイレクトの場合は、新旧URLが同じ内容で両方表示されるなど不安定な部分が見られました。

Yahoo!の場合でも、301リダイレクト(永久的なリダイレクト)の方が良いようですね。

弊社アイビーネットWebサイトを8月末にフルリニューアルしました。

2005年頃にtableレイアウトからCSSレイアウトに変えましたが、内容的には2002年からほとんど変えていませんでした。ですので5年ぶりのリニューアルになります。とんでもないですねw。

5年も前に作ったサイトですからファイル名も適当(というか思慮不足)で、会社概要が「kaisha.html」なんて名前になっていました。今回のフルリニューアルでは、当然このURLも修正の対象になります。しかし、URLが変わるという事は、その古いURLへアクセスしてきたユーザーや、これまで蓄積した検索エンジンの評価(リンクポピュラリティやページランク)を取りこぼしてしまうことになります。

この取りこぼしをなくすために、旧URLから新URLへと自動的に切り替えが行われるように設定しておく必要があります。いわゆる「リダイレクト(転送)」です。

リダイレクトの方法はいくつもありますが、検索エンジンの評価をちゃんと継承したいのでしたら「301リダイレクト(永久的なリダイレクト)」を利用するといいでしょう。GoogleやYahoo!も301リダイレクトを推奨しています。

• Google：クロールが完了できなかった URL エラーとは何ですか。
• Yahoo!：リダイレクトを設定している場合、どちらのURLがデータベースに登録されますか？

301リダイレクトの記述のしかた

301リダイレクトは「.htaccess」を使うと良いでしょう。

.htaccessの記述例(301リダイレクト)

.htaccessは下記のように記述します。

Redirect 301　[旧サイトのURLからドメインを除く部分] [新サイトのURL]

http://www.ibnet.ne.jp/ibnet/　以下のページを
http://www.ibnet.ne.jp/　以下の同じページにリダイレクトしたい場合には、下記のように記述します。

Redirect 301 /ibnet/ http://www.ibnet.ne.jp/

1ファイルごと301リダイレクトしたい場合

もっと細かく1ファイルごと設定したい場合、例えば

http://www.ibnet.ne.jp/ibnet/kaisha.html　を
http://www.ibnet.ne.jp/company/　にリダイレクトしたい場合には、下記のように記述します。

Redirect 301 /ibnet/kaisha.html http://www.ibnet.ne.jp/company/

複数ある場合には下記のように個々に記述します。

Redirect 301 /bigei/ http://www.bigei.co.jp/
Redirect 301 /ibnet/index.html http://www.ibnet.ne.jp/
Redirect 301 /ibnet/kaisha.html http://www.ibnet.ne.jp/company/
...
...

301リダイレクトのチェックサイト

記述が完了したら、うまくいっているかチェックをしましょう。下記のサイトでチェックが出来ます

View HTTP Request and Response Header

下記のように赤丸の部分に「301」とでれば問題ありません。

リニューアル時には301リダイレクトをすべし

上記の方法は、弊社のリニューアル時にも行いました。今回のリニューアルではドメインが変わるわけではなかったので、それほど深刻な問題にはならないかもしれませんが、SEOの点からも、ユーザビリティの点からも301リダイレクトは行った方が良いですね。

仕事でブログを書くのは久しぶりです。以前も「コラム」という形で、SEOを中心に、あとまれにユーザビリティの事なんかを書いていました。アクセス解析を見てみると、こんなつたないコラムにもリンクが張られていたりして、当時は自分で書いておきながら「こんなコラム役に立つのか？」とか思ってました。

この頃はSEOに熱中していて、2003年のログを見てみると、キーワード「ホームページ制作」の検索結果で最高4位に表示されたりもしていました(遠い目)。今は無き「インターネットマガジン」という雑誌から「SEOについて記事を書きませんか」なんて問い合わせがあったのもこの頃です。

その頃は、特に忙しい時期だったので「面倒くさい」と断っちゃいましたが、あの時記事を書いていたらどう変わっていたのかなー、と考えると複雑です。

Webの仕事をやる前はCGをやっていまして、Mayaの前身であるPower Animatorなんかをいじっていました。でも当時、名古屋でCGの仕事なんて無かったので、やむなくWebに移行していきました。

ちなみに今は名古屋でもCGの仕事が増えてきました。弊社の親会社、伊藤美藝社のCG部門は大盛況です。どんどん人が増えていっています。

...とまあ、自己紹介はこれぐらいにして、ブログには、アクセシビリティ、ユーザビリティ、CSS、Web標準、デザイン等々何でも雑多に書いて聞こうかなと思っています。

では、よろしくお願いします。