test
コメントを残す
色に頼らないビジュアル表現を考える
このコンテンツはテストのため、色に頼らないビジュアル表現を考えるの記事を引用したものになります。意味が通らないものもありますので、原文を読まれることをおすすめいたします。
いきなりですが、質問です。以下の文章を見てください。
実はこのテキストの中には、どこかがリンクになっています。どこのテキストにリンクが指定されているかビジュアルだけでわかりますか？
少し意地悪な問題ですが、本題ではないので早速答えを述べます。実は、「このテキスト」という部分にリンクが指定されています（リンクには「#」が設定されているので、クリックするとこのページのトップに移動します）。
皆さんはどの段階で「このテキスト」という部分が少し青色であることに気づけましたか？もしかしたら、普段色を使うお仕事をされている方（デザイナーなど）はすぐに違和感に気づけたかもしれませんが、全てのテキストを読んでから青色になっている部分を探して見つけた方もいらっしゃるのではないでしょうか。
このように、本文が黒文字でリンク色に暗めの青を使った場合はリンクだと気づけないことがあリます。
では、どのようなスタイルにすれば良かったのか考えると以下のようなパターンが挙げられます。
色だけではなく、ビジュアルに形を追加して表現する方法です。
このように、色だけではなく下線や囲みなどのスタイルを使ってリンクだと気づかせることができます。
この記事では、記事を書くきっかけになった「WCAN2018/06 Webアクセシビリティの学校 in 名古屋」の内容を振り返りつつ、勉強会内で行われたワークショップを掘り下げて、色覚に頼らないUIについて考えてみました。
目次
- きっかけになった「WCAN2018/06 Webアクセシビリティの学校 in 名古屋」
- 色覚に頼らないUIを探す
- 最終的にできた12案のグラフ
- 最後に
きっかけになった「WCAN2018/06 Webアクセシビリティの学校 in 名古屋」
なぜ今このタイミングでこんなことを記事にまとめているのかというと、先日行われた「WCAN2018/06 Webアクセシビリティの学校 in 名古屋」で、以下のようなグラフを使ったグループワークがきっかけです。
グループワークでは、上記のような色に頼ったグラフをモノクロにしたとき、解決策としてどのような方法が考えられるかグループで話し合うというものでした。
さて、Webアクセシビリティというと「障害者対応」のように解釈されたり、対応が難しいように捕らえられてしまうことがあります。実際に、WCAGは障害者のある方を対象にしたガイドラインでもありますが、場合によっては障害者の方のために行った対策が健常者にとっても使いやすいUIになることがあります。
例えば、WCANで植木さんが挙げられていた「コンテンツが理解できない例」としては、どんな人の日常でもあり得ます。
コンテンツが理解できない例
- 慌てていてボタンを見過ごしてしまう
- 疲れているとき
- 体調が悪いとき
上記のように、考えられる問題はさまざまです。さまざまな障害、年齢による衰退、一時的に普段と同じ操作ができなくなることが考えられます。
健常者でもモノクロで表示する機会がある例としてはモノクロ印刷が挙げられます。例えば、今のところ目に特に異常はみつかっていない私でも、インク代節約のために社内資料やコンビニでモノクロ印刷をよく利用します。モノクロで正常に表示されることは機能1つと言えるのではないでしょうか。
障害者や高齢者の方だけではなく、多くのユーザーを対象にしたこのような考え方を左近では「インクルーシブデザイン」という言葉で見かけるようになりました。
インクルーシブデザインについて知りたい方は以下のリンクを。
- 英語圏のウェブアクセシビリティ コミュニティで語られる「インクルーシブデザイン (inclusive design)」について — Website Usability Info
- アクセシビリティとは一部のユーザーのためだけではない | UX MILK
ご紹介したWebアクセシビリティの学校は7月には大阪で開催されるようです。私が参加したものはキホンの「キ」の部分でしたが、土曜日に開催されるようです道場のほうはキホンの「ホ」の内容になっています。個人ワークやグループワークを中心としたものらしく、リピーターの方でも楽しめそうな印象です。
- 7/13（金） Webアクセシビリティの学校 in 大阪（2018/7/13） – connpass
- 7/14（土） Webアクセシビリティ道場 in 大阪（2018/7/14） – connpass
色覚に頼らないUIを探す
セミナー後には他の他のWebサービスやアプリではどのような対策が取られているか気になったため、個人的に調査してみました。
Playdots社のスマホゲーム
中でも一番感動したのはTwo Dotsというスマホのパズルゲームの色覚サポートのUIです。
Two Dotsのゲーム画面。通常モードと色覚サポートモードの2つ。
色合いが少し調整されていますが、マークが追加されています。このゲームでは同じ色のドットをつなげていくゲームなのですが、色の違いがわからない人のために代替としてドットの中にマークが挿入されるように対応しています。
このゲームの驚くところは色覚サポートをオンにしても、見た目がかわいいとところ。Webアクセシビリティ対応というと見た目を損なってしまう印象を受ける方もいらっしゃるかもしれませんが、Two Dotsの世界観を壊すことなく色覚サポートを実現しています。
Two Dotsと同じ会社が出しているDots & Coというゲームでも同じように色覚サポートがされていました。こちらも、同じ色をつなげていくゲームで、色覚サポートをオンにした画面ではドット内にマークが追加されています。世界観を壊すことなく対応されています。
キャプチャ：Dots&Coのゲーム画面。通常モードと色覚サポートモードの2つ。
Appleのアプリ
AppleではMacのストレージやメッセージアプリでUIを見つけました。
Macのストレージでは現在使用中のストレージを分類別にグラフで色で分けているのですが、そのバー内には分類のテキストが書かれています。もしテキストがかけないところはツールチップが表示されるようになっています。
メッセージでは、[環境設定]→[アクセシビリティ]で「カラー以外で区別」を設定した状態でアプリを開くと、「不在」のマークが丸から四角へ変わるようになっています。
キャプチャ：Macのストレージの画面
キャプチャ：メッセージアプリのメニューの一部
そのほかにも、iOSでは「ボタンの形」設定をオンにすると「一般」というボタンに下線がつけたされたり、「オン/オフラベル」という設定をオンにすればスイッチのマークの上にオフの時には○マークが、オンのときには|マークが入るようになっています。
キャプチャ：iOSのボタンの形の設定の比較
キャプチャ：iOSのオン/ オフラベルの設定を比較した画面
Trello
Trelloというタスク管理ツールでも色覚サポートに対応していることに気づきました。色で判別せず、パターン化してラベル分けに対応しています。
キャプチャ：色覚バリアフリーモードを有効化した後のTrelloのラベルを指定するモード
Slack
使っている方も多いかもしれませんが、Slackというコミュニケーションツールでも対応されています。他にも挙げたUIでは色覚サポートをオンにすると有効になるものでしたが、この機能は色覚サポートを設定しなくても以下のような状態です。
キャプチャ：Slackのダイレクトメッセージの一覧画面
これはSlack内の、ダイレクトメッセージの一覧です。「yourname」と書かれたところが本来はユーザーの名前が入ります。このユーザーの名前の左にあるアイコンたちは色覚に頼っていない情報と言えます。
slackbotにはハート、アクティブ状態になっている人は緑で塗りつぶされた丸、離席中の人は白いラインのみの丸、ゲストは三角、グループチャットには参加しているメンバーの人数が表示されます。
キャプチャ：Slackのダイレクトメッセージの一覧画面をモノクロにした図
実際にモノクロにしたものです。色がなくなっても、きちんと情報が理解できると思います。色覚モードのようなものを用意してもいいかもしれませんが、このようにデフォルトでUIに溶け込んでいると多くの人にとっても使いやすくなるのではないでしょうか。
最終的にできた12案のグラフ
Webアクセシビリティの学校の別の地域では、グループワークでは最高11案出たようですが、私は11案には及ばず、少し悔しかったのでセミナー後にどのような案が考えられるか実際にグラフを作りながら考えてみました。
グループワーク後に、グループワークで出たものに付け足して12案です。
キャプチャ：12案のモノクロのグラフ
大きく分けると3グループあります。
グラフにテキストを追加する
キャプチャ：グラフにテキストを追加したグラフ3つ
- 社名をテキストで追加する
- 社名の頭文字を取ってグラフ内に追加する（頭文字がかぶる場合は2文字めまで含む）
- 番号を割り当てる
グラフに図を追加する
キャプチャ：グラフに図を追加したグラフ6つ
- ロゴの大きさで表す
- グラフないにロゴを追加する
- マークを割り当てる
- パターンを割り当てる
- 長方形の形を変える
- ボーダーにスタイルを加える
グラフの見た目を変える
キャプチャ：グラフの見た目自体を変えたグラフ3つ
- 表組みにする
- ランキング形式にする
- 棒グラフにする
今回は「案をたくさん出す」と言うワークだったのでたくさん出しましたが、正直に言うと個人的にはテキストを追加する、ロゴを追加する、表組みにする、ランキング形式にするの4つあたりが情報が伝わりやすい気がしています（現在のグラフにも言えることですが、グラフ部分だけではなく「右のロゴと参照してグラフを理解する」という不必要な1ステップがどうしても産まれてしまうので）。
ほかにも、フォントを企業分割り当てるなども考えましたが、あまりにも実用的ではなさすぎるものは排除しました。これがもし表現がウェブでなくて実際の紙なら、質感が違う紙で表現しても面白いかな、とも思います。
最後に
「Webアクセシビリティ」というと中には大変な作業だと思われて敬遠されることも少なくはありません。私も少し敏感になりすぎていた時期がなかったといえば嘘になります。場合によっては必要以上の過剰な対応は結果的に他の人の敬遠を招いてしまう恐れも考えられます。
そのため、「全てのページで絶対に対応するべき」と強くは言わないけれど（できていたらより良いとは思うし、理想的だと思います）、例えばモノクロ対応の場合は印刷される可能性のある地図や商品スペックでは対応したほうがいいかもしれません。そのページの意味が場合によっては損なわれてしまうような、重要度が高い可能性がある場合は一度検討するのもいいんじゃないかなと思います。
超個人的な発見「私が思うカッコイイUIについて」
とっても個人的な発見ですが、私は見た目だけで何かをカッコイイと判断することは少ないのですが、今回色々なUIを調査して、機能がデザインされて溶け込んでいたときに初めて私はそのデザインを「カッコイイと思う」という気づきがありました。
Two Dotsや、（意図しているかはわかりませんが）Slackのように景観を保ちつつ色覚に頼らないようにデザインされていることは、Webアクセシビリティが1つの機能として溶け込んでいて純粋にカッコいいなあとちょっと感動しました。Two Dotsでは色覚モードを用意して対応していますが、それは結果を考えるとどちらでもよくて、最終的に色覚モードが必要な人と必要ではない人にとって煩わしくない、壁を感じないUIはカッコイイと言えるんじゃないかな…と思います…！
以上です。色覚に頼らないUI、表現方法を探すのは楽しかったです。よかったら、グラフの13案目がある方はまた教えていただけたら喜びます。
Poll Test!
テスト
aa
レスポンシブウェブデザイン
前から憧れていたレスポンシブサイト、作れました！
今回はサーバーやドメインを取得したので見れるようになっています。
今回作ったサイト：http://mkasumi.com/
■始めにやろうと思ったこと
端末によって対応させるCSSの指定
画像サイズの可変
bootstrap
最近、学校の卒業制作をメインにしているせいで勉強ができず、ブログの更新ができていませんでした…。ちょっと反省して、少し前から勉強しているbootstrapについて書いてしまおうかと思います。
bootstrapとは、twitter bootstrapのことです。
ほかの学生さんにbootstrapのお話をしたところ、意外と知られていないことに気づきました。
twitter bootstrap
CSSのフレームワークで、twitterや、ドットインストールに使われています。
CSSのフレームワークっていうのは、自分でCSSを書かなくても、HTMLとクラスだけ書いていけばなんとなくかっこいいデザインになってくれる便利なもののことです。
私はbootstrapと、a-blogcmsを一緒に使って勉強しているので、結構早くに大体の形ができてきました。そのため、ほんとに、ほぼクラスしか書いていない状態です。bootstrapというか、a-blogcmsの勉強みたいな感じになってるときもあるくらいです。
それでもきっと、bootstrapをやっていって、自分の中でbootstrapやa-blogcms以外のの基本的なことの引き出しが増えていってると思うんです。
bootstrapを勉強しながら、CSSでできることを学んだり、ドロップダウンとかの名称を覚えたり、html5の勉強にもなりました。
私が実際にbootstrapを使って感じたこと
- グリッドシステムが使われていて、便利
- あんまりCSS書けなくても大丈夫
- 簡単にレスポンシブ対応にできる
- すばやくカッコイイデザインが作れる
■グリッドシステム
新しくグリッドシステムのことも学びました。普段のサイト作りでは使わないので、「そんなものがあるのか」から始まりました。
あんまり詳しくは理解していませんが、とりあえず、幅を指定するときに便利です。
■あんまりCSS書けなくても大丈夫。
はじめからCSSがあるので、あんまり書けなくても大丈夫です。
「あんまり」っていうのは、自分で書き足さないといけないためです。
どうしてもmarginとかpaddingとかを書き足さないと、詰め詰めになってしまって、見づらくなってしまいます。
■簡単にレスポンシブ対応にできる
私、レスポンシブサイトの作り方、わかりません。（一度勉強しようとしてみたけど、まだ理解できなかったため）
ですが、レスポンシブにできました。
フレームワーク、ほんとすごいと思いました。
少し憧れだったレスポンシブサイトが簡単にできてしまいました。
■すばやくカッコイイデザインが作れる
クラスを書いていくだけなので、ぱぱっとナビやボタンができていきます。あんまり自分でCSS書かなくて良いんで早いです。
でも、ちょっと気になるところがあるんです。
・ナビバーや、ボタンのデザインが他の人と一緒。
同じCSS使っているので、当然ナビバーとかボタンとか一緒になってしまいますよね。
まあ、ナビバーやボタンくらい人と一緒でも良いサイトさんもあるだろうし、人それぞれなんですが。
個性的な自分だけのサイトとか作ろうとしている人には向いてないと思います。そんな人はフレームワークなんか頼らずに自分でCSS書いてしまいそうですが…。
確かにbootstrapは便利だけれど、自分でCSSを書いた方が愛着はわくと思いました。
この記事を書いて、まだまだbootstrapについてわかっていないことが多いことに気づきました。特にグリッドシステムとか。
そして、やっぱりレスポンシブサイトをフレームワークなしで自分の力で作ってみたいとかも思いました。
果たしていつになるやら…といった感じですが。
そのためには、とりあえず学校の卒業制作を早く終わらせることにします！
それでは。
答え合わせが終わりました！
やっと、以前からablogcmsさんのテーマを使って、やっている答え合わせが終わりました。
clearhidden、clearfix、とか、
ベンダープレフィックスとか、
cssでのhoverの仕方とか、
heightを指定しないで作っていく方法とか、
borderの使い方とか、
tableとか、
たくさん学びました！
他の方が作ったサイトを作ってみて、とても勉強になりました。
◆ table
この中で一番苦戦したのはtableでした。
（結局、サイト内ではtableを使っていなくて、borderが使われていたのですが…）
前期にあったウェブデザインの授業では、ドリームウィーバーの機能をつかってテーブルを作ったことがあり、実際にhtmlでは作ったことがなかったからです。（それにtableを作ったのも一度でした）
tableの枠線を消したりできるのを知らなかったので勘違いといえど、とても勉強になりました。
tableに関しては、サイトを探しても、欲しい情報が書かれていないことが多く、
いろんなサイトを探しました。
◆ clearfix
clearfixの存在は知らなかったのですが、
自分で勝手にclearのためのクラスを作っていたので、既にあると知ってびっくりしました。
楽な方法で卑怯だなあとか我ながら思っていたのですが、他の人も同じことしててちょっと安心しました。
◆ height
私はなぜか、今まではdivにheightをいちいち指定してサイトを作っていました。
指定しない方が、楽でいいですね。
思えば授業では、先生は引っ張りだこで、（ほかのクラスメイトもサイト作りは初めての人が多かったため）ほぼ独学状態でした。
勘でhtml書いてました…。
でも、それって正確なマークアップではないので、危険な行為だったな、と反省しています…。
まあ、とりあえず、一つすることが終わったので、bootstrapの勉強をします！
実ははbootstrapでサイトを１つ作ることになりました。
一月は学校の卒業制作の締め切りもあり、ポートフォリオサイトをもう一つ作りたいと思っているので（実は就活中）、今月は大変です…！
が、がんばろう…！
WCAN2012 winter
WCAN2012 winterに参加してきました！
初めての大きな勉強会だったため、当日は少し緊張していました。
以前いったことのある場所だったのですが、
事前に乗り換え案内やGooglemapなどのアプリをまだ買ったばかりのiPhoneに入れて用意していました。
まあ、結果、とても駅から近いところで、看板もあり、地図いらずでしたが。
では、本題です。
ベンダープレフィックス
少し前に、１１月にあった色彩検定の結果がきました。
なんとか、無事に合格できました〜！
いきなり２級を受けるという荒技を実行したのですが、
無事に合格できて安心です。
さて、実は前からa-blog cmsさんのテーマを使わせてもらって、HTMLとCSSを書いていました。
ある程度できてきたので、今日、実際の物と答え合わせをしました！
・・・まあ、間違っていますよね。
そんな中、合っているところがあると嬉しくなるもんですね。
答え合わせをしていて疑問に思った物がありました。
text-align:-webkit-match-parent
なんだこれ、と思って調べても出てこない・・・。
CSSリファレンスのサイトをみてもtext-alignのところにない・・・。
ちょうど話しかけてくれたウェブデザイン学科の先生に聞くことで解決できました。（ほんとにタイミングよく話しかけてくれて助かりました）
-webkit-
と
match-parent
は別々のようで、
-webkit-は、ベンダープレフィックスというもので、
safariやgooglechromeに使われる物です。
webkit以外にも種類があり、
- moz : firefox
- o : opera
- ms : IE
これらはCSS3を使うときに適用します。
それぞれのブラウザ向けのベンダープレフィックスをつける必要があるのです。
ですが、すでにgooglechromeやfirefoxなどのブラウザでは、ベンダープレフィックス無しでも
動作できるようになっています。
そのため、ベンダープレフィックス無しのものも一緒に書いておくと良いみたいです！
ちなみに、もうひとつのmatch-parentというものは、CSS3の一つでした。
CSS3だったため、いつも使っているCSSのリファレンスサイトにはなく、ドリームウィバーにもなかったみたいです。
ベンダープレフィックスは、ドットインストールなどでよく単語を聞いていたんですが、
実際になるときちんと理解できていなかったことが分かりました。
CSS3も、どんどん覚えていかないといけないですね。
既にあるサイトを作ることで、自分がもっと勉強するべきところが発見できて、ためになりました。
では、これから土曜日に参加予定のWCANのために名刺を作ります！
それでは〜
monokyuri 