2010年7月29日木曜日

ソフトバンクアカデミア - 「孫の二乗の兵法」虎の巻

ソフトバンクアカデミアが開校されました

孫正義社長が自分の後継者を発掘、育成するために開設されたもので一般の人にも門を開き、誰にでもチャンスを与える形式での運営になるようです。

その第1回目、開校式が先日行われ、孫社長自ら孫氏の兵法と自信の経営理念を掛け合わせた「孫の二乗の兵法」というものを展開し、これからのアカデミアでの講義内容の凝縮版のような形での講義が繰り広げられました。

Ustream でも配信されてます

ソフトバンクアカデミア開校式

内容は2時間を越すもので、中身も十分に濃いモノなので皆さんも是非聞いていただきたいのですが、「時間がない」、「今度何かあった時に虎の巻として使いたい」といった方も多いと思いましたので、ダイジェストとしてまとめました。(ここではあえて孫社長のコメントを省いてあります。知りたい方は直接Ustreamを聞いてください)


「孫の二乗の兵法」(全25文字)

理念  :「道」「天」「地」「将」「法」
ビジョン:「頂」「情」「略」「七」「闘」
戦略  :「一」「流」「攻」「守」「群」
将の心得:「智」「信」「仁」「勇」「厳」
戦術  :「風」「林」「火」「山」「海」

【理念】

・道:理念。「情報革命で人々を幸せに」
・天:天の時、タイミング。「情報ビッグバンというタイミングを最大限に活かす」
・地:地の利。「情報革命はアジアから」
・将:優れた将。「志を共有できる将をどれだけ部下に持てるかが大事」
・法:方法、システム。「成功するためのシステムを作る」

【ビジョン】

・頂:頂上、ビジョン。「10年後や30年後といった明確な時期を決めて、その時のイメージを思い描く」
・情:情報。「1メートルを超す書類の束になるくらい集め調べ抜く」
・略:戦略、省略すること。「無駄なものを除去して、一番太い幹になりうる部分を手がける。」
・七:勝率7割で勝負。「勝率5割では愚か、9割では手遅れ」
・闘:闘うこと、事を成す。「自分で闘って成すことが大事」

【戦略】

・一:圧倒的な1位。「圧倒的でないと競争で利益が出なくなる」
・流:流れに逆らわない。「王道を進む。ニッチは選ばない」
・攻:攻める。「1つだけでは駄目、複数の攻め手を持つ」
・守:守る。「キャッシュフローを意識」
・群:同士的結合、マルチブランド。「シングルブランドは効率はいいが、300年は続かない」

【将の心得】

・智:知力。「高い次元で議論、交渉できるように多くのスキルを持つ」
・信:信義、信用、信念。
・仁:仁愛。
・勇:勇気。「攻める勇気、撤退する勇気」
・厳:厳しさ。「組織のために時には鬼となる」

【戦術】

・風:素早さ。
・林:静かさ、水面下での行動。
・火:徹底した行動。
・山:動かないこと。
・海:敵をも飲み込み平和にすること。


以上です。

2010年7月26日月曜日

アクセシビリティ・チェックポイント(9)- 入力装置いろいろ

(9)入力装置いろいろ

「入力装置についても教えてください」とのリクエストがありましたのでまとめてみました。まとめているうちに私も知らなかった製品やサイトもありましたのでまとめて紹介します。

・マウスを使うのが困難な人

親指が無いため握れない、握力がない、握った状態で動かせない、微妙なコントロールができない。こういった方は非常に多いです。そんな方の中でもマウスが使いたい方は下図のようなものを利用しています。



こことステップの「らくらくマウスⅡ」
http://www.kktstep.org/rm_04.html


マウスが使えなくてもボタンやジョイスティックなら使える人のための装置がいろいろ用意されています。


・キーボードを使うのが困難な人

指が震える(隣のキーを押してしまう)、思った場所からずれる(複数のキーを押してしまう)、押した指を離すのに時間がかかる(同じキーを何個も入力してしまう)など、キー入力が困難な方も非常に多いです。そんな方の中でもキーボードが使い方は下図のようなものを利用しています。



テクノツールの「小型ひらがなキーボードUSB」
http://www.ttools.co.jp/product/hand/kogata_kbd/usb_photo.html


誤入力を減らすために入力ガードがあり、複数キー入力や隣のキー入力を抑えることができます。

他にも、指が変形して、そのままではキーボード入力ができない人向けの入力補助装置などもあります。



プロト・ワンの「タイプエイドA」
http://www.proto-one.co.jp/cgi-bin/proto-one/siteup.cgi?&category=1&page=1&view=&detail=on&no=10



・手が動かない人

手が動かない方は顔や肩、足でボタンを押して制御します。多くは画面にソフトウエアキーボードのようなものが表示され、光が左上から順に流れ、そのキーに来た時にボタンを押すといった操作があります。最近は予測変換等が充実し、入力にかかる時間が大幅に短縮されてきています。



国際電業の「たっちぴこ」
http://www.kdengyo.co.jp/


また、口(舌)で操作するタイプなども多く出ています。



アクセスインターナショナルの「ジョーズ2」
http://www.accessint.ne.jp/communi/computer/JOUSE2.html



最近ではユーザーの視線を追うアイトラッキングツールとしてマーケティング業界でも活用されている視線入力装置などもあります。

Tobii の「マイトビーP10」
http://www.tobii.co.jp/japan/application/assistivetechnology.aspx


・ほかにもいろいろ

下記のサイトは非常によくまとまっていました。私も今回大変参考になりました。みなさんも一度アクセスしてみてください。

こころWeb
http://at2ed.jp/kokoroweb/part1.html



・今回改めて気付いたこと・1

今回この記事を書くにあたって、いろいろなサイトを見て回りました。そこで気付いたのですが、以前に調べた時に参考にした企業がことごとく廃業していたということです。この業界はほとんどボランティアです。国の補助も含めていろんな方のサポートが無いと会社の運営自体難しいのだと思います。もっと認知してもらうためにも「アクセシビリティ」の本来の意味をこれからも伝えていきたいと思います。

・今回改めて気付いたこと・2

そしてもう一つ思ったことが、今回紹介した装置のほとんどが非常に高額だということです。しかもこれらをそのまま使えるユーザーはごく限られていて、多くの方はさらにその人のための調整が必要で、そこまでやると数十万円かかることが当たり前だということです。

そこまでして皆さんのサイトを見に来てくれています。全アクセス数からみると1%にも満たない僅かなアクセスかもしれませんし会社の利益には直結しないかもしれません。それでも、見に来てくれている人をそのまま追い返すような真似はしないでいただきたい。サイトに来るまでに大変な思いをして来てくれている方には少なくともサイト内は自由に渡り歩いていただきたいものです。

そういった視点を持って私のブログのこのシリーズを最初から読んでいただき、少しでもアクセシビリティに対して前向きに考えてくれる人が1人でも増えて、1社でも多くのサイトが良くなることを心から願っています。

それでは。

2010年7月25日日曜日

7/25 Google Analytics 利用率は 35.1% (前週から 0.3ポイント増)

今週も上場企業のWebサイト 3,828社分を調査してGoogle Analytics の利用率を調べてみました。

今週は先週から比べて 9社増えてました。

合計で 1,342社。前回の 34.8% から 0.3ポイント増えて 35.1% となりました。

ちなみに

SiteCatalystは 変わらずです。

企業サイトには 105社に入っています。
※SiteCatalyst は企業サイトには入れずにサービスサイトのみ導入している企業も多いので、これがそのまま導入数ではありません。

東京は猛暑日が続いています。夏バテ、冷房病、脱水症状など周りでもよくききます。まだまだこの暑さは続くらしいので、無理はしないで健康的な睡眠・食事を十分にとって安全に過ごしましょう。

それでは。

2010年7月23日金曜日

アクセシビリティ・チェックポイント(8)- 障がいではないけれど・・・

(8)障がいではないけれど・・・

(入力装置についてのリクエストをいただきましたが、未だ準備中のためそちらは来週掲載させていただきます)

世の中には障がいではない(障害者手帳をもらえない)けれども、ある特殊ではない普通の空間において不自由な状況になる方もいらっしゃいます。

例えば

・白がまぶしすぎて見れない
・ダブルクリックが押せない
・ドラッグしたまま移動ができない
・距離感がわからない
・立体感がつかめない
・視野が極端に狭い
・音の距離感(前後左右)が分からない
・音が重なると聞き分けられない
・動くものの認知が遅れる
・ものの境界を把握できない
・文章を読むとき改行しても視点が次の行にいかない

など、いろいろな方がいらっしゃいます。

最近では

・3D 映像が 3D に見えない人

なども問題となっているようです。

しかもこの中には特別ではなく、結構な割合でそういう方がいらっしゃるものもあります。

FLASHを使って派手に作るのもいいですが、こういった方々も多いことを考えて、代替案を作り、それらへのアクセスが容易にできるような対策も考えてみてください。代替案を作ってもどこにあるのか分からないサイトが多いのも事実です。

アクセシビリティだけでなく、最近は

iPadに代表されるように、マルチプラットフォームでのアクセスが増えてきています。そういうユーザーに不便な思いをさせないようにするには上記とほぼ同等の制限事項に対する代替案を用意する必要があります。

そういった意味でも最近は「スマートフォン対応ページ」は良いアイデアだと思います。こういったページはいろいろな制限を考えて作ってあるので同時にアクセシビリティ対策もできているものが多いです。みなさんも「アクセシビリティ対策 兼 スマートフォン対策」を実行してみませんか?応援します。

短いですが。

それでは。

2010年7月21日水曜日

アクセシビリティ・チェックポイント(7)- 障がいの種類とその対応

(7)障がいの種類とその対応

障がいの種類は様々です。
障がい者手帳を持っていない方でも、Webサイトアクセスに不自由を感じている人はたくさんいます。今回はどういった方々の事を考えて、どのように対応すべきかをまとめたいと思います。

・目の見えない人

目の見えない方は、スクリーンリーダー、音声ブラウザ、点字モニタ等を利用します。キー入力は比較的問題無い方が多いですが、フォーカスが分からない事で今何を入力すべきか、欲しい情報にアクセスする為にはどうすれば良いかが分からないと不自由を感じます。また、リフレッシュ等の時間制限のあるページや、勝手にポップアップ画面が出るページ等、自分の意思以外でフォーカスが移動すると混乱をきたす場合があります。

 とるべき対応
  スクリーンリーダー等で読めるようなページにする
  画像やFLASHには代替テキストを用意する
  勝手にフォーカスを移動しない
 チェック方法
  実際にスクリーンリーダーで確認する
  テキストブラウザで疑似的に確認する

・視力の弱い人

見えるけども、小さい字がわからないという方です。これは極端に言うとメガネをかけている方も対象となります。文字が小さくて読みづらい、背景の模様と重なっている、文字を大きく出来ない等に不自由を感じます。

 とるべき対応
  CSS等、レイアウトを強制しない
 チェック方法
  CSSを使わないで表示してみる
  ブラウザの文字を大きくしてみて、他と重なったりしないか確認する

・色盲の人、色弱の人

クラスに一人はいると言われています。
色盲にはいろんな種類があります。また、それらを疑似的に見せるツールやブラウザも多数出ています。それらで確認して、読みづらいパターンがないか確認してください。

 とるべき対応
  CSS等、レイアウトを強制しない
  背景色、文字色が近いものは使用しない
 チェック方法
  CSSを使わないで表示してみる
  無料のチェックツールが多数出ています

・片手が不自由な人、両手が不自由な人

いろいろなパターンが考えられます。

 - 頭で操作する人
 - 足で操作する人
 - 声で操作する人
 - 舌で操作する人
 - 手が震える人
 - 事故で一時的に手が使えない人

あらゆる想定をして、対策を考える必要があります。

 とるべき対応
  時間制限がある場合は上記を想定して長い時間を確保する
  誤入力の際に最初から入力しなおしにならないようにする
 チェック方法
  実際に時間をかけてみる、間違ってみる
  左手のみで操作してみる
  ソフトウェアキーボードのみで操作してみる

・知的障がいを持つ人

わかりやすく作る事が必要です。どこをクリックすればどうなるか?なにを意味しているのか?想像が出来ること、また誰でも分かる文章にすることが重要です。
知的障がいの場合はどこまで対応すべきかが非常に難しい問題ですが、適当な操作で高額商品が購入できたり、契約したりということのないようにサイトを作る必要があります。

 とるべき対応
  難しい漢字にはふりがなをふる。
  略称や呼称を使用する場合は最初に正式名称を記載する。
 チェック方法
  アクセシビリティチェックツールで一部は対応可能


ほかにも複数障がいを持っている方など様々なパターンがありますが、まずは上記を参考に対応していただければと思います。

それでは。

2010年7月18日日曜日

7/18 Google Analytics 利用率は 34.8% (前週から 0.1ポイント増)

今週も上場企業のWebサイト 3,828社分を調査してGoogle Analytics の利用率を調べてみました。

今週は先週から比べて 5社増えてました。

合計で 1,333社。前回の 34.7% から 0.1ポイント増えて 34.8% となりました。

ちなみに

SiteCatalystは 変わらずです。

企業サイトには 105社に入っています。
※SiteCatalyst は企業サイトには入れずにサービスサイトのみ導入している企業も多いので、これがそのまま導入数ではありません。

今週は3連休のためか、メンテナンス中のサイトが数社ありました。前半戦のリニューアルのピークのようにも思います。来週が楽しみです。

関東では梅雨が明けたようでものすごく暑い日が続くそうです。大雨の次は猛暑で極端ですが、夏バテしないように冷たいモノを取り過ぎないように注意してください。といってる傍から今日アイスを2つ食べた私は要注意です。

それでは。

2010年7月15日木曜日

アクセシビリティ・チェックポイント(6)- 文字画像に透過は使わない

(6)文字画像に透過は使わない

これは知ってる方にとってはあたりまえですが、意外と知られていないものです。

デザインの世界では背景色の上に重ねる文字画像は透過にしないと違和感が生じたりするので、透過を使うのが当たり前になっていますが、透過にすると、アクセシビリティの観点からはいろいろな問題が生じてきます。

例えば

・背景画像は表示しない設定にしている
・色弱の為に背景色と文字色を固定で設定している


こういった方はページ制作時に想定した背景とは違う背景になってしまい、場合によっては画像の文字と指定してある背景色が同じだと読めなくなってしまいます。

色弱の方、白い色がまぶしすぎて色調整している方などの為にも、透過は極力使わない(それ以前に文字は極力画像にしない、画像にする場合は背景色も気にする)ようにしてください。

本日は短いですが以上です。

それでは。

2010年7月13日火曜日

アクセシビリティ・チェックポイント(5)- 文字の書き方まとめ

(5)文字の書き方まとめ

今回はスクリーンリーダー向けの書き方を紹介します。
最近のものは前の文脈を把握して読み方を変えるものが多数出てきていますが、それでも位置や書き方で間違った読み方になる事があります。そういった事を少なくするためにもいくつか「書き方」を紹介いたします。

・日付や金額などは短縮型を使わない

× 2010/07 → ○ 2010年7月
× 12:00 → ○ 12時
※前に「日にち」や「時間」という文字を入れておくと間違った読み方をしてもある程度認識できます。

× (金)→ ○ 金曜日
× 10時-12時 → ○ 10時~12時
※「-」は「マイナス」、「~」は「から」と読まれることが多いです。

× 100百万円 → ○ 1億円
※決算情報など大きい数字が大量に出てくる場合は予め単位を先に記述しておいて、その単位に合わせれば問題ありませんが、数回しか出てこない箇所は単位を合わせるよりも、読まれやすくするべきです。上記の場合は「ヒャクヒャクマンエン」と読まれ、一瞬理解できない事も起こり得ます。

・全角や余計なスペースは注意

× 住 所 → ○ 住所
※前者は熟語として認識できないことがあります。
× 100 → ○ 100
※前者は「イチゼロゼロ」と読まれる事があります。

・テーブル内は単位も併せて記述

×




身長(cm)体重(kg)
田中17565
佐藤16666







身長体重
田中175cm65kg
佐藤166cm66kg


※数字が続くと今どの項目か分かりづらくなるので、セル内に単位をいれることで認識しやすくします。

他にもたくさんありますが、代表的なものだけ掲載いたしました。
気になる部分がありましたら是非使ってみてください。

それでは。

2010年7月11日日曜日

7/11 Google Analytics 利用率は 34.7% (前週から変わらず)

今週も上場企業のWebサイト 3,828社分を調査してGoogle Analytics の利用率を調べてみました。

今週は先週と変わりありませんでした。

合計で 1,328社。前回の 34.5% のままです。

ちなみに

SiteCatalystは 1社増えていました。

企業サイトには 105社に入っています。
※SiteCatalyst は企業サイトには入れずにサービスサイトのみ導入している企業も多いので、これがそのまま導入数ではありません。

今日の選挙でまた政局が荒れそうです。消費税はどうなるのでしょうか?景気はいつ回復するのでしょうか?まだまだ先の見えない日々が続きそうですが、自分の周りだけでも1歩1歩進めていきたいものです。

それでは。

2010年7月9日金曜日

アクセシビリティ・チェックポイント(4)- テキストに相対サイズを使用する?

(4)テキストに相対サイズを使用する?

これも「イメージ要素には ALT 属性を付ける」ぐらい有名なものですが、最近はこのチェック項目に対しての重要度が変わりつつあります。

本来は文字の大きさを変更させようとしても、絶対サイズ(pxなど)を使用していると大きくならない場合があるため、サイズを指定する際には相対サイズ(emなど)を使用するようにする、というルールがあり、一般的に浸透していました。

チェックツールでもスタイルシート内の px を探す事でチェックできるので容易に問題点を探せるという事もあり、調べやすい点や有効度などもあって浸透したものと思われます。

ですが、最近は

最近リリースされているブラウザはほとんどの種類で、「文字の大きさを変える」機能はなくなり、代わりに「画面全体のズーム」機能が追加されるようになりました。この「画面全体のズーム」機能ですが、画像なども併せてレイアウト崩れなく、全体的に大きくなるようになっています。ですので、絶対サイズで指定していても問題なく表示できます。

つまり、絶対サイズで指定することで困るユーザーが極端に減ってきています。

画面全体に1文字を大きく表示させるような強度の弱視の方はテキストブラウザベースのものを利用しますので、スタイルシートは関係ないですし、スタイルシートを利用して見れる程度の弱視の方は上記のようなズームで対応できます。

ということで、このチェックポイント「テキストに相対サイズを使用する」は優先度は下げても問題無いと思います。

この機能が必要な方がいらっしゃいましたら失礼ですが、連絡いただけますと嬉しいです。私の知識が足りない点をお詫びさせていただくと共に訂正をさせていただければと思います。

それでは。

2010年7月6日火曜日

アクセシビリティ・チェックポイント(3)- イメージタイプの要素(img/area/input等)には ALT 属性を指定する

(3)イメージタイプの要素(img/area/input等)には ALT 属性を指定する

画像には ALT 属性を指定する必要があります。

現象

目の見えない方向けの対策でもあり、SEO対策としても有名なポイントです。クライアントサイドイメージマップにALT属性を入れ忘れると、目の見えない方はそこから先のページに進むことができません。フォームのボタンもそうです。ページ移動する場合などは特に気を付ける必要があります。

対処方法

「スペーサーやボタン系には ALT="" を設定する」というルールで運営されている企業が多いと思います。ですが、できるだけ前後の意味がテキストだけで通じるか?を考えながら必要な場合は入れるようにしてください。

また、ページ移動する場合、移動する旨の説明を入れるとより親切です。例えば「○○のイメージ」と記載しているところで、「○○のイメージ。クリックで拡大表示します」といった記載にすることで、より動作をイメージすることができます。

(1)、(2)でも記載しましたが、誰の為に必要か?その人にとって分かりやすいか?間違った認識を持つ事はないか?という点でテキスト入力するようにしてください。

よくある間違い

矢印(→)画像に「矢印」と書いたり、四角(■)画像に「四角」や「■」と書いてあるページを良く見ますが、それだと前後の意味が通じなくなる事があります。前後の意味がスムーズに通じる事に重点を置いて修正してください。

2010年7月4日日曜日

7/4 Google Analytics 利用率は 34.7% (前週から 0.2ポイント増)

今週も上場企業のWebサイト 3,828社分を調査してGoogle Analytics の利用率を調べてみました。

今週は先週から比べて 9社増えてました。

合計で 1,328社。前回の 34.5% から 0.2ポイント増えて 34.7% となりました。

ちなみに

SiteCatalystは 1社増えていました。

企業サイトには 104社に入っています。
※SiteCatalyst は企業サイトには入れずにサービスサイトのみ導入している企業も多いので、これがそのまま導入数ではありません。

1年も半分が過ぎました。皆さん年初に立てた計画は半分以上進んでますでしょうか?私はこれから追い上げが必要です(笑)。こらから暑い夏がやってきます。夏バテすると身体が思うように動かなくなるので、今のうちから冷たいモノは控えて夏バテしないように注意したいと思います。皆さんも体調に気を付けてください。

それでは。

2010年7月2日金曜日

アクセシビリティ・チェックポイント(2)- ポップアップや別ウィンドウが開かれる場合は、その旨をユーザーに通知する

(2)ポップアップや別ウィンドウが開かれる場合は、その旨をユーザーに通知する

ポップアップ等、新規ウィンドウが開かれる時、またはアクティブ・ウィンドウが変更される時にはユーザーにその旨を通知する必要があります。

現象

商品の詳細を見せる時などに、ページをクリックするとポップアップ画面が表れて商品が表示され、xボタンで画面をクローズするといったページを良く見ます。これらは読み上げツールなどを利用しているユーザーには非常に使いづらいシステムです。アクティブ・ウィンドウが変更されたのに気付かずに前のページへ戻ろうと back ボタンを押しても戻れません。前のページへも戻れず、先のページへも進めずといった状態で、また最初からと思わせてしまうことも多くあるという事を認識してください。

対処方法

新規ウィンドウが開かれることをユーザーに通知しないまま、target="_blank" または target= "_new" 等を使用することはなるべく避けてください。
新規ウィンドウを開く事自体あまりお勧めいたしません。必要な場合はその旨をユーザーに通知することで、上記のような混乱を防ぐことができます。

(ここ重要)よくある間違った対処 - 誰の為の対策か?

ここでよくある間違った対処方法を紹介します。

新規ウィンドウを開く場合に、その旨を知らせるアイコンを表示させるのですが、これを CSS で定義して、"_blank" があった場合にそのアイコンを表示させるといった記述をしている企業サイトがたくさんあります。
ルール上はそれで対応したことになります。

でも、良く考えてみてください。それが無いと誰が困るのか?

上でも記述したように、読み上げツールのユーザーは特にこの問題には悩まされます。また、読み上げツールのユーザーは目の見えない方が多く、そういった方々は CSS を必要としません。つまり CSS は読み込まない設定となっています。CSS を読み込まないということはアイコンが表示されません。本当に必要なユーザーにはその旨を伝えていない事になります。

新規ウィンドウが開く場合はその旨を「CSSで記述しないで」必ずHTML文中に記述するようにしてください。

2010年7月1日木曜日

アクセシビリティ・チェックポイント(1)- リンクに JavaScript を使用している

今回から、アクセシビリティに重点を置き、どういった部分に優先度を置き、どのように対応すべきかについて記載していきたいと思います。

(1)リンクに JavaScript を使用している

このパターンで最も多いのがページ内の文字を大きくする機能などでの「大」「中」「小」ボタンです。ソースをみると「<a href="javascript:void(0)">」等の表記がみられます。

現象

これらのタイプのリンクは、多くの携帯電話やPDAのブラウザなど、JavaScriptをサポートしていないブラウザでは機能しません。「押しても押しても何も反応しない」という状態になります。また、一部の企業ではポリシーとしてJavaScriptを無効にしている企業もあります。目が不自由な方の読み上げツール等でも無効にしている場合がほとんどです。

対処方法

このような場合でも対応ができるように href 属性には実リンクを貼るようにしてください。
また、JavaScriptが機能しないと意味のないコンテンツの場合は、それら全てを <script>タグで囲って、無効なブラウザでは表示すらしないようにすることで、より優しいページにすることができます。

その他

twitterアイコンや rssアイコン、はてなブックマークアイコンなど、アイコン系にはこのような記述のものが多くみられます。これらもアクセシビリティの面では不都合になりますので、

・href はそれぞれのサービスサイトへリンクし、onclick で実行する
・全体を <script> タグで囲み、JavaScript が無効なユーザーには見せない

のどちらかの対応をおすすめいたします。