• 首相官邸を採点する
• スキップリンク
• フォームのエラー通知

僕はスキップリンクのグループに入って、スキップリンクはいるのか、というディスカッションに参加させていただきました。このグループのモデレーターは、WAICの植木さんでした。ちなみに、「首相官邸を採点する」のモデレーターは、bAの大田さん、「フォームのエラー通知」のモデレーターは、Googleの小久保さんでした。

まず、植木さんによる「スキップリンク」についてJISやWCAG2.0の原文と解説書と技術書でお浚いからはじまりました。

2.4.1 Bypass Blocks: A mechanism is available to bypass blocks of content that are repeated on multiple Web pages. (Level A)

2.4.1 ブロック・スキップ： 複数のウェブページ上で繰り返されているコンテンツのブロックを通過できるメカニズムが利用可能である。　（レベル A）

原文では、Bypass Blocksと、日本語訳ではブロックスキップと書かれています。ゆえに

そして、スキップリンク（正確にはブロックスキップになると思うのですが）を提供することによって下記のユーザーにとってメリットがあると解説書に書かれています。

• スクリーンリーダー
• キーボードユーザー
• 画面拡大を利用しているユーザー

また、この達成基準を満たすための実装方法は下記になっています。これも解説書に書かれています。

• スキップリンクを提供
• 見出しをマークアップ

そもそもスキップリンクって要らないんじゃないの、というのが多くの人が思っていて、ここからディスカッションが本格化されてきました。そのディスカッションででた意見のメモです。

スクリーンリーダのユーザ向け

• UAが見出しジャンプ機能を持っている

しかし、実装されているのはOperaのみ、Firefoxはアドオンを入れることによってその機能を持つ

• リンク先が間違っていたり、スキップリンクとして機能していない
• 多くのスクリーンリーダーは見出しジャンプの機能を提供されている

見出しジャンプの機能があることを知らないユーザーもいるのでスクリーンリーダーユーザーのスキルレベルにもよる

• ブロックスキップは、アクセシビリティというよりも、ユーザビリティなのでは？
• ユーザーが実際に使える（使いこなせる／使い方を知っている）かどうか視点も必要
• スキップリンクは実際に使われているのか？

スキップリンクはマジ便利と言っているブログを見たことがあるとのこと

キーボードを使っているユーザ向け

時間がなく、キーボードを使っているユーザ向けの議論はそれほどできませんでしたが、下記がそのメモ

• キーボードを使っているユーザーにとってスキップリンクは必要なのか？
• 標準ブラウザのままで使っている人がどれだけいるか？

という感じで、スキップリンクのグループのディスカッションは終えました。結局、必要なのか不要なのかという結論はでませんでしたが、多くの人が不要と感じているのは間違いありません。個人的な意見としては、スキップリンクは必要ないと感じています。サイトに持たすのではなくUAに持たせる機能、スキップリンクはユーザビリティと感じているからです。しかし、キーボードを使っているユーザーには、スキップリンクではなくともTabキーでひとつひとつのリンクをフォーカスせずに済むように、クリックしたいリンクを一発で開けるような機能が必要だなぁと感じています。そういう意味で、accesskey属性はひとつの解決法だと思っていたのですが、ブラウザによって実装が統一されていないという残念な感じで忘れ去られた存在となっていますね。ある程度、キーの値が標準化されていたら、それなりにユーザビリティも向上していたではないかと思う今日この頃です。

関連

• アクセシビリティキャンプ東京#1を開催した - ただのにっき(2012-04-19)

ここ最近、「IA」という言葉（言葉ととっていいのかという疑問はあるが）をよく耳にすることが多くなってきたという印象があります。

IAとは、知識やデータの組織化を意味し、探している情報を見つけやすく、情報をわかりやす伝えるというもので、分かり易くするデザインといえると思います。

インターネットのよいところは、情報が多いことだと思うのですが、多さのあまり探している情報が見つけにくかったりします。そのような情報を探しているユーザーを迷うことなく目的まで導くことが重要となってきているからであると思います。

World IA Day 2012 東京

その中、World IA Day 2012 東京（以下WIAD）は、日本初となるIAコミュニティ主催で世界14都市で同時開催されるイベントという身震いするような大規模なIAイベントです。登壇される方もIAのスペシャリストから学者からと様々な方達が登壇されました。当日のプログラムは下記のような感じです。

1. 基調講演：ジョージ・アロンゴ（ビデオ）
2. 基調講演：幅広いユーザーの理解のデザイン ～OpenUMプロジェクトを通じて～ ／ 坂本貴史（ネットイヤーグループ株式会社 UXディレクター）
3. 基調講演：ルイス・ローゼンフェルド（ビデオ）
4. 基調講演：ピーター・モービル（ビデオ）
5. ユーザーエクスペリエンスを正しく理解する ～「UX」と「UXデザイン」～ ／ 安藤昌也（千葉工業大学）
6. 行動経済学からわかるユーザーの行動とデザインのありかた ／ 山田歩（青山学院大学）
7. 「ストーリーテリング（物語）」によるユーザー理解 ／ 前田俊幸（UX Tokyo主宰）
8. パネルディスカッション：ストーリーとデザイン
9. ユーザー理解に合わせたユーザーインターフェイスデザイン ／ 上野学（ソシオメディア株式会社
10. パネルディスカッション：これからのUIデザイン

基調講演：ジョージ・アロンゴ（ビデオ）

ナビゲーターのコンセントの長谷川さんの開会の挨拶後にすぐに流れたジョージ・アロンゴの基調講演。この基調講演ですぐにこのイベントの空気に引き込まれる感覚を覚えたセッションでした。
彼の講演の中でもっとも印象に残っているのが、(1)情報を見つけ易いようにデザイン、（2）変化は様々であるが普遍なものは常に変わらないです。これらを自分なりの解釈としては下記です。

(1)は、ショッピングモールが例として挙っていました。ショッピングモールには、多くのサインがあり、それらは、来客に、注意を促したり、知らせたり、また探している情報を見つけ易くデザインされるている。これらのデザインによってユーザーの満足度に大きく左右されるからです。しかし、バランスが重要である。多い情報を十分な設計をせずにすると混乱を招くだけであると、確かにこれをWebサイトに置き換えると、Webサイトは情報を多く載せがちになってしまうし、似たような情報が多くあります。これがある意味、混乱を招く要因となっているのではないかと思います。これを最適に設計できることが大事になってくると感じました。

(2)は、技術などは変化していきます、それも急速に。しかし、積み上げた知識は変わることがありません。技術が変わっても、その新しい技術にも活かすことができる。変わらない知識と分野がIAである。

幅広いユーザーの理解のデザイン ～OpenUMプロジェクトを通じて～ ／ 坂本貴史

IAシンキング Web制作者・担当者のためのIA思考術の著者である坂本さんの講演でした。

セッションでは、「答えではなく問題を探す」がキーメッセージとなっていました。下記がセッション中にとったメモです。

• 答えがない、マニュアルに載ってないことに問題点にぶつかる。だから「答えではなく問題を探す」
• 問題に取り組む、どのような問題があり、いかに自分の意見を言えるか
• 目的にたどり着けるアプローチを探し見極める。

• 情報を得られるレイヤー、知恵、知識
• 伝えやすいようにする
• 利用者がなにを求めているのか、利用者中心の考え
• コンテンツファースト
• 論理的か直感的か、論理的な思考は最終的には直感に生かされる

問題は起こったときに、問題の解決を求めがちであるが、答えがない我々の仕事において、これはこうあるべき！という理想像に近づけるために、解決へのアプローチがなにが問題であるかを探す、というふうに捉えました。

基調講演：ルイス・ローゼンフェルド（ビデオ）

オライリーから出版されている「Web情報アーキテクチャ―」通称シロクマ本の著者の一人ルイス・ローゼンフェルドの基調講演です。主に、図書館情報学という なかなか聞き慣れない分野について話されていました。また、その中で 情報というチャレンジをどれがはやりで時代遅れか判断しなければならない

基調講演：ピーター・モービル（ビデオ）

同じくシロクマ本の著者のピーター・モービルは、下記の3点について話されていました。私自身の理解とメモです。

1. to keep defining the damn thing
2. cross-channel
3. value(s)

1. 定義すること。これはピーター・モービルは、シロクマ本にIAを定義したことで、彼のことを名刺に肩書きに書いてなくてもIAの人と認識してされる。

2. 「不得意な分野は得意な人に学ぶ」これがcross-channel

3.イベントを通して、ともにビジネスと私たちの価値を高めていこうというものでした。

ユーザーエクスペリエンスを正しく理解する ～「UX」と「UXデザイン」／ 安藤昌也（千葉工業大学）

UXプリンスこと安藤先生は「UX」と「UXデザイン」の定義を下記のように仰っていました。

体験そのものはユーザーの個人的なもの　　　→UX
　　↑　　↓
どんな体験をしてもらうか計画すること　　　→UXD
　　↑　　↓
体験が量産、再生産される仕組みを作ること　→UXD

ユーザー経験デザインを「体験が量産・再生産される『仕組みを作る』こと」というのは納得度が非常に高く仕組みのデザインの発想は非常に重要だと感じた。

行動経済学からわかるユーザーの行動とデザインのありかた ／ 山田歩（青山学院大学）

このセッションはイベントの中で一番興味が沸いたセッションでした。「行動経済学」という名称からのとおりものすごいアカデミックの観点からの学説とデータばかりでした。しかし、それが根拠となるので非常に貴重な講演だったように思います。

その中でも、「選択肢は多いほどよいか」とうのがあって、例としてジャムが挙ってました。世間一般的にも、選択肢は多いほどよいと恐らく言われていると思います。ここでは、選択肢が多いほど、生活は豊かになるが、多いすぎるとよくない。と言われてました。 そのジャムの例をとっても、選択肢が多いと購買率が下がるという結果がでたからです。恐らく、多ければ多いほど、ユーザーを混乱させるからだと思います。

以下は、セッション中にとったメモです。

熟慮は選択に質を高めるか

嗜好の理由を分析すれば、人はそれらしき回答をすることができる。

いかにも嗜好に左右するように見えるが、実際には重要でない要因に注目して、判断してしまう。

• 普段目にしたり、耳にしたりするのは思い出し易い。
• 一番目にでてくるほうが検索しやすいので、過ちを犯しやすい。

制作で言葉を変えるだけで、内容は同じでも数値がことなる。

「フレーミング効果。脂身25%と赤身75%、失業率5%と雇用率95%など、表現を逆にするだけで、人々の判断が変わる」

• 不要な選択肢をなくすことによって、判断もことなる、他に影響を与える。

• 「人々の選択を適切に導く『選択アーキテクチャ』の設計が大切」

「ストーリーテリング（物語）」によるユーザー理解 ／ 前田俊幸（UX Tokyo主宰）

このセッションは、僕自身の知識不足のせいかあまり耳にしたことがない「ストーリーテリング」についてでした。
セッションの冒頭で、オバマ大統領のMLの下りがあって、なんのことやらと思っていたら、「ストーリーテリングの目的」は、共感を引き出すこと、 ストーリーは共感（情動と結びついてる）を生んで最終的に行動に結びつけるとストーリーテリングのことを知らない僕のような人に説明されました。下記のようなフィードバックがストーリーではないかと説明されていました。

顧客に共感する　→　顧客を知りたくなる　→　顧客を調べる　→　共有したくなる　→　顧客に共感する

そして、ストーリの作り方の構成要素や構成パターンを説明いただきました。

構成要素

• 視点
• コンテクスト
• キャラクター
• 心的イメージ
• 言葉遣い

構成パターン

• 規範的
• 英雄
• 新しいものに親しむ
• フレーム構造
• 階層的
• 文脈的幕間

しかし、自分の理解力が足りないのか、いまいちつかみどろこがなかったです。そのつかみところというのが「ストーリーテリング」のつかいどころですが、 どのようにして活用していくのか、これを最適にするには、ということで、「ストーリーテリング」の意味も含めて、疑問ばかりが残りました。

ストーリとストーリーテリングの違いみたいなのが、下記に載っているので、参考までに（←自分向けです）
ストーリーテリング - HUMAN VALUE

ユーザー理解に合わせたユーザーインターフェイスデザイン ／ 上野学（ソシオメディア株式会社

最後のセッションは、内容の中心としては、「モーダルvsモーダレス」で非常に興味深いものでした。世の中には、いろんなユーザーインターフェースのデザインパターンが存在しますが、大きく2つ、両極のコンセプトであるとれが「モーダル」と「モードレス」です。

どうやら「モードレス」というのは、Appleのインターフェースガイドラインに出てくる言葉ということで、Appleが推奨しているということです。「モーダル」と「モードレス」と言われても分かりにくいので、例を挙げると下記のような例になります。

モーダル

モードがある状態。コンピューターを使っていて「なんとかモード」に入って作業をするようなもの。
動詞 → 名詞：命令を選んでから対象物を選ぶこと。
言語的：シーケンシャルであること、手続き的であること、始めと終わりが決まっていること。
ユーザーが行うタスクに会わせてデザインされる

• 電車
• 直進ボタン｜左折ボタン｜右折ボタン
• コース料理
• Windowsの「画面のプロパティ」コントロールパネル
• タスクベースの画面遷移

モードレス

モードがない状態。自由な順序と方法で作業するようなもの。
名詞 → 動詞：対象物を選んでから命令を選ぶこと。
空間的：例えば GUI。2次元の空間上にオブジェクトが置いてあって自分の好きな順序で操作していい。
ユーザーが扱うオブジェクトに合わせてデザインされる

• 自動車
• ハンドル
• お弁当
• Mac の「デスクトップとスクリーンセーバ」環境設定
• オブジェクトベースの画面遷移

セッションの中で、「ユーザー理解=自分なりの使い方ができる」ことを挙げられていて、どうも「モードレスデザインこそ最高」という風に捉えれられる内容でした。それがダメなのかというとそうではないですが、すべてのアプリケーションがモードレスデザインであるほうが優れているとは思えなかったからです。

また、「シンプルにする」というのも挙っていました。これは非常に納得します。納得するのですが、 シンプルなデザインがモードレスであるとするならば、それは違うと感じています。モーダルであってもシンプルにデザインできるのではないかと思うからです。また、人の様々な属性にも依存すると思うからです。モードレスデザインのデメリットに「使いこなすには創造性が必要」挙げられていましたが、操作に創造性が必要があるならば、ユーザーを迷わすことになるので、シンプルと反するデザインになってしまうのではないかと感じました。

それを考えると、モードレスやモーダルが重要ではなくて（もともと重要とは述べてませんでしたが）、シンプルで分かり易いというひとつのコンセプトでよいのはないかと感じました。しかし、非常にセッション内容は面白く基調講演を除けば、一番関心が沸いたセッションでした。

スライド

参考：

World IA Day 2012 Tokyo で講演しました

まとめ（ほぼ感想[じゃー感想と書けばいいんじゃね？]）

このイベントを通してまずは自分がもともと感じていた「情報は多くしない」「シンプルに」が確信に変わりました。 しかし、それと同時にアカデミックな要素が詰まりまくったIAという分野の奥深さと自分自身の理解力の浅さが分かりました。さらに、その浅さが分かったのですが、どの部分を埋めれば深くなるのかが明確になりませんでした。
奥が深く広いといえばそこまでですが、どこかで今より知識が深くなれるように努力するだけです。

• IAの世界的なイベント！World IA Day 2012に参加してきました
• World IA Day 2012 Tokyo Keynote
• 2012年2月11日 World IA Day Japan #wiadj

HTMLは下記のようなどこにもあるようなdiv要素です。

<div id="shape">
aaaa
</div>

CSS

その肝心のCSSが下記です。:after擬似要素を使って、borderの幅を使って三角形を作って、アレコレしています。三角形のサイズを変更したいときは、20pxのところを良しなに変更してください。

#shape {
	position: relative;
	width: 100px;
	height: 100px;
	background: #5dc;
}

#shape:after {
	display: block;
	position: absolute;
	bottom: 0;
	right: 0;
	border-left: 20px solid transparent;
	border-bottom: 20px solid #4ac; 
	content: "";
}

画像を使わずに実装するか

事の発端を言うと、新型iPad対策です。新型iPadでWebサイトを見られた人は多いと思いますが、あの解像度はヤバイですよね。そして、解像度の低い画像の見栄えの悪さといったら・・・ 画像を使ったほうが工数は短くなるところでも、CSSでやれるところはやっていこうという方針でなぜか進んでいます。

• Cookieがない場合は、スマホサイト表示
• Cookieがある場合は、PCサイト表示

当然ながらという表現は微妙ですが、iOS4.2（iPhone4）とiOS5（iPhone4S）では問題無く、上記の条件において意図した表示になってくれました。
しかし、Android端末で検証すると、意図した表示になる機種もあれば、意図した表示にならない機種がありました。その機種が下記です。

• IS03 (Android 2.2）
• GALAXY S SC-02B (Android 2.2）
• OPTIMUS CHAT (Android 2.2）
• IS04 REGZA (Android 2.2）

意図した表示になったのが下記です。

• GALAXY S SC-02B (Android 2.3）
• GALAXY S SC-02B (Android 2.2）
• OPTIMUS CHAT (Android 2.2）
• Xperia　SO-01B (Android 2.1）

※GALAXY S SC-02B (Android 2.2）とOPTIMUS CHAT (Android 2.2）は意図した表示になったり、ならなかったりしました。

Cookieは表示される

なぜこうなるのかの仮説として、「Cookieが消える？」とはじめに考えました。どこかで、勝手にCookieが消えたという現象はスマホとか関係なく聞いたことがあるので、このケースにも当てはまるのではないかと思い、Cookieがあるかどうかを確認するために、Androidの標準ブラウザのURLバーに下記のJavaScriptを実行。（めっちゃメンドーです。）

javascript:alert(document.cookie);

とすると、「あるやん！！」。

機種依存によるバグと期待したのですが、該当するCookieが表示されました。ならばなぜにCookieを判別してくれないのか、悩みまくっていたのですが、「Cookieが送信されてるのか確認した？」というアドバイスをいただきました。

これを確認するために、PHPでテストファイルを作成、ちなみにコードは下記です。下記のコードを適当なファイル名にして（拡張子は『.php』）、このファイルに実機でアクセスして検証という手順です。

<?php
var_dump($_COOKIE);
?>

Cookieが送信されていたら、下記のような表示が返ってきます。（Cookie名とかその辺りは捏造しています。）

array(2) { ["hoge"]=> string(4) "hoge" ["Cookieの内容"]=> string(3) "INT" }

しかし、IS03等で確認すると

array(2) { ["hoge"]=> string(4) "hoge" [""]=> string(3) "INT" }

Cookieの内容がありませんでした。ということでCookieが送信されていないということが判明しました。

結果的には、機種依存による不都合と捉えたのですが、検証になかなか時間を費やした結果となりました。いや本当にAndroidは鬼門すぎて泣きそうです（泣いてますけど・・・）。同じような現象で悩まれている型がおられば、一度お試しください。

他のサイトでは、Cookieをどのように扱っているんですかね？Cookieを使わずにlocalStorageでやっていたりするのでしょうか。そのあたり知りたいですね。