ある日のWeb制作会社の風景
ディレクター「ほむ、利用規約同意後に遷移が必要と」
ディレクター「そもそも、利用規約なんて誰が読むんや」
ディレクター「まぁ、先方の要望やし規約は載せんといけんし」
ディレクター「長ったらしいし、別ページに飛ばしてしまおう」
ディレクター「よし要件できた」
ディレクター「利用規約は別ページで必要な人に読ませ、規約同意のチェックボックス後、ボタンを活性化や」
ディレクター「こんな感じの要件だから、デザイナちゃんデザイン起こしてもらい――」
ディレクター「できたものチェック！ええ感じや！」
ディレクター「ええやん、早速エンジニアくんに実装してもらお」
ディレクター「んじゃ頼むで」
エンジニア「りょーかいっす」
～数時間後～
エンジニア「できました！」
See the Pen userbility01 by nekoga_kuruga (@nekogakuruga) on CodePen.
ディレクター「ええやん！」
エンジニア「でもこれ、よくよく考えたらこれだめっすよ」
ディレクター「なんで？うちが定義した要件全部満たしてるやん」
エンジニア「チェックボックスだけがクリックできるのは優しくないっす」
エンジニア「あとチェックボックスの横に文言置くと勘違いされるっす」
ディレクター「お前、何言ってるん？」
あらゆる人のことを考えた実装設計
エンジニア「これ、チェックボックスのクリック範囲が四角だけじゃないですか」
ディレクター「せやね、なんか問題ある？普通に使えるで」
エンジニア「マウスを自由に使えるならいいっすけど、マウス操作うまくない人だと大変っすよね？」
ディレクター「そうやけど、そんな人おらんやろー」
エンジニア「まぁそれだけならいいすっけど、タッチデバイスのときも辛いっすよ」
エンジニア「こんなちっちゃいところを親指だけでタッチするの気を使いません？」
ディレクター「確かに」
ディレクター「んじゃどうすればええねん？」
エンジニア「こういうときは、チェックボックスとラベルをくっつけちゃえばいいんすよ」
ディレクター「合体するんかいな？」
エンジニア「そんなこといってねーっす」
エンジニア「文言とチェックボックスをラベルでくっつけるんすよ」
See the Pen userbility02 by nekoga_kuruga (@nekogakuruga) on CodePen.
エンジニア「inputにname属性を指定して、spanをlabelに変えてfor属性を入れて」
エンジニア「nameとforに同じ値を入れれば」
エンジニア「ほら、文章を押してもチェックボックスがつくようになりましたっす」
ディレクター「あーこっちのほうが使い心地ええね」
エンジニア「更に、文章にホバーしたときにカーソルすれば」
エンジニア「これで使い心地が最強になったっす」
ディレクター「ええやん！」
ディレクター「これで実装おっけーやね！終わり！」
エンジニア「ちょっと待ってくだせえ」
ディレクター「まだなにかあるん？」
リンク導線と色味を考える
エンジニア「ラベルの中にリンクが入ってます」
エンジニア「これだと間違ってクリックされてしまうっす」
ディレクター「せやね、んじゃ取り出して別場所に置こう」
See the Pen userbility03 by nekoga_kuruga (@nekogakuruga) on CodePen.
ディレクター「これでおっけーや！」
エンジニア「いやこれでもだめっす」
ディレクター「なんでや！」
エンジニア「利用規約がなんなのかわからんっすよ」
ディレクター「見りゃわかるやろ」
エンジニア「これがわかるのは、リンクだと知ってるウチらだけっすよ」
ディレクター「いやいやいや、普通の人もわかるって」
エンジニア「慣れてる人だけっすよ、それ」
エンジニア「もうちょい気を使ってあげましょうよ」
ディレクター「十分気を使ってるで」
エンジニア「これ、『利用規約』と書くと見た目だけでは結局なんのかわからんすよね」
エンジニア「ユーザーにどんなアクションを取ってもらいたいか考えてあげる必要があるっすよ」
エンジニア「このページに来た人は利用規約をどうしてあげたいっすか？」
ディレクター「読んでもらいもらいたいね」
エンジニア「だとすると、ユーザーにそのアクションを促すあしらいをつけてあげましょう」
エンジニア「『～を確認する』やリンクだとわかるアイコンをつけるといいっす」
エンジニア「アイコンはないから、今回は追加の文言加えましょう」
See the Pen userbility04 by nekoga_kuruga (@nekogakuruga) on CodePen.
エンジニア「いかがっしょ？」
ディレクター「おー、わかりやすい」
エンジニア「これで万人が利用規約がリンク、あるいは確認できる見た目になりました」
ディレクター「こんな感じで気にかけないといけないんやな」
ディレクター「めんどうやな」
エンジニア「めんどうでも考えるのがウチらの仕事っすよ」
エンジニア「今回は青なので、大丈夫っすけど」
エンジニア「赤とか緑の文字とは気をつけるっすよ」
ディレクター「何を気をつけるんや？」
エンジニア「色覚異常の人には赤とか緑は色が認識できないっす」
エンジニア「色だけで何かを表現しようとするときは、ちゃんと文字も付け加えるっすよ」
ディレクター「頑張るっす…」
webは誰かを助けるために
エンジニア「こういうのは難しいっすよね」
ディレクター「いろいろ勉強になったわ」
エンジニア「こんな感じで、『利用のしやすさ』や『安心感』を持たすことを『ユーザビリティ』なんて言ったりするっす」
エンジニア「考えておくと今後もよりよいページになるっすよ」
ディレクター「まぁ全員がwebに慣れればこんなこと考えなくてええのに」
エンジニア「元も子もないこと言わんでください…」