Subscribed unsubscribe Subscribe Subscribe

CHROMA

世の中の "当たり前" を確認する

マークアップ / アクセシビリティのイベントに参加

Frontrend Vol.9 - 春の新人歓迎 マークアップ/アクセシビリティのキホン に参加。

継続的にアクセシビリティを高めるために

CA のアクセシビリティおじさん!
最近 FRESH! の開発に携わるようになったらしい。

この講演では、FRESH! での取り組みをもとに、アクセシビリティに対する取り組みを紹介してくれた。

masup.net

はじめに

アクセシブルなサービスをつくるには、WCAG 2.0 に対応することが大事。

でも、大変。
じゃあ、どうしようか。

まずはできるところから

最初やったのは 2つだけ。

  1. alt 入ってるかチェック
    • 発見:画像を img 要素で表示する代わりに、background-image で指定してるところを見つけた
    • 問題:alt が表示されないので、画像にかわる代替手段が提供されない
    • 解決:img 要素に置きかえ
  2. キーボードで操作できるかチェック
    • 発見:hover でしか情報を表示しない要素を見つけた
    • 問題:キーボードやタップでの操作ができない
    • 解決:button 要素を使う

はじめは自分が手を出せるところから始める。 どんなに当たり前だと思ってることでも、調べてみると必ず発見がある。

みんなでできることをやる

ガイドラインはいま作成中。
関係者に自分事だと捉えてもらうために、みんなでつくってる。

アクセシビリティを理解してもらうために、講演者はチームメンバーに WCAG 2.0 の全項目を説明した。そのときに、WCAG 2.0 の文章そのままで伝えるとわかりづらいポイントがあったので、以下のような工夫をこらした。

  • 平易な言葉に置き換えて話す
  • 具体的な例を出しながら話す

また、アクセシビリティは一部の人だけに必要な対応ではないということを、チームの共通認識とする努力をしている。

まとめ

  • まずはできるところから
  • みんなでつくる
  • アクセシビリティーーーーー」(ハートが強い)

マークアップの最適解を見つけ出す方法

ハツラツとした、元気な人。
この講演を聞いたことで、「HTMLでなぜその要素を使うのか?」というのをより深く理解することができた。

speakerdeck.com

なんのためのマークアップ

マークアップの最適解とは

マークアップに正解はない

答えがないというわけではなく、答えがたくさんあるということ。

より良いマークアップ(自分にとって最高のマークアップ)を書きたいのであれば、一般的な基準を探す、つまり仕様をみることが大事になる。

もうひとつは、実装された機能を実際に触り、体験を通して挙動を把握すること。
挙動を把握することで、「Web サイトの機能を最大限に活かす」マークアップを書くことができる。

その他

Bootstrap には sr-only っていうスクリーンリーダー用のクラスがあるみたい。

アウトラインチョットデキル

まぼろしの TKG。
個人的には、P.22 「見出し要素だけで暗黙のセクションが作れるならセクショニング要素は不要?」の内容を聞けたのが一番嬉しかった。

www.slideshare.net

HTML のアウトラインについて

  • HTML のアウトラインは 2種類ある
    • 暗黙的なアウトラインと、明示的なアウトライン
  • セクショニング要素でのマークアップは「"この見出し" について説明しているのはここからここまでだよ」をUAに意図通り指示できる
  • セクションをつかってアウトラインをつくれば、コンポーネントベースで考えることができる

アウトラインをチェックする

HTML 5 Outliner をつかう。

Chrome の拡張も、Firefox の拡張もあるよ。

セクショニング要素を使う理由

  • セクショニング要素を使うと、見出しレベルを下げた後に記述したコンテンツでも親階層に引き上げうことができる
  • section > h1 なら無限に階層が作れる
  • セクションをコンポーネントとして考えられる(Web Components との親和性)

まとめ

  • セクショニング要素は使える
  • 「ありがとうアウトラインアルゴリズム」(ハートが強い)

その他

HTML のアウトライン、Web のドキュメントではこのあたりが詳しい。

また、近年ではこういう話題のがあったのを思い出した。

Sketch でテキストをどう管理するか

f:id:thleap:20170425000712p:plain

結論としては、font-family だけ Shared Style で管理することにした。上のはやろうとしてダメだった例。

  1. タイプフェイスはシンボルで管理するのが大変。色やウエイト、行の方向まで管理するのが大変。Shared Style で管理してみる(同期は使わない形)
    • font-family だけシンボル化、とかしたい〜(これをシンボル化と呼ぶかはしらん)
    • Shared Style で管理してみた結果、あと戻りが非常に面倒な管理方法であることがわかった(一度 Shared Style で作成、各オブジェクトにスタイルを反映している途中で、Shared Style のもとのスタイルを変更したくなったとき、これがやりづらい管理方法であるということに気づいた)
  2. やっぱシンボルで管理してみる
    • やっぱいろんなバリエーションつくるのクソつらい
    • 「段落の途中でリンクテキストがきたらどうするん?」という問に対して解を持ち合わせてないことに気づいた
      • テキストのシンボル管理をやめた
  3. font-family を Shared Style で管理する
    • それ以外はしない

色と行方向の管理がもう、だめ。

やる記事スイッチどこにあるの

書きかけの記事、みたいなのが何本かある。
やらないといけないんだけど、怠惰にやられてしまう。

頭の中のアイデア、みたいなのもいくつかある。月曜日を楽しくする活動を始めようとしていることや、デザイナーにも得意・不得意分野がありそうって話(かっこいいとかわいいの 2タイプのテイストを作れる人はいるけど、かっこいいとシブいを作れる人はいないんじゃないか論)。

今日はこれ書いてるだけちょっとはやる気がある。このやる気は数分後に消滅するか、再燃して上記なんらかの記事になる。

実例から学ぶ CSSアニメーション

DIST.15 「アニメーションで差を付ける演出とデザイン」 に参加して、LT をする。

なぜ LT をするか

CSS Transition や CSS Animation の使い方がわかっても、実際に活用するイメージが限定的な場面でしか思いつかなかった。

たとえば、CSS アニメーションを使うシーンとしてはリンクやボタンのマウスオーバー、ローディングとかまではイメージつくけど、その先が思いつかない。また、Codepen とかにあるデモは見た目は派手で格好いいけど、活用シーンが限られていたり、まったく現実的じゃないものが多い。

この状態では日々の製作に活かしづらいと思ったので、今回の LT を通して、CSS アニメーションに対する自分の視野を広げてみようと思った。

資料

speakerdeck.com

デモ

  • 認知補助
    • Backlog ぽいやつ
      • アニメーションの効果で、ログインボタンからダイアログがでてくるのがわかりやすくなります。矢印の装飾をつけるだけよりも、ダイアログがどこからでてきたか記憶しやすいです。
      • DEMO
  • つなぎ
    • Medium ぽいやつ
      • ページを読み込んでから画像表示するまでの退屈な時間を、ぼかしのアニメーションを使ってつないでいます。「見えそうで見えない」状態を作ることで、画像への注目度もあげています。
      • DEMO
  • ただの演出
    • おそ松さん ぽいやつ
      • ブルブル演出です。サイトの印象に関わります。
      • DEMO

デザイナーとして、何者になりたいか #3

前回の続き。

前回は、社会に対して自分が「個々の進化を助ける」ことに貢献したい、という話をした。

今回は、ここからより身近なフィールドに舞台を移し、考えてみる。

同じ職場で働く人、同じ仕事をしてる人にどんな価値を提供したいか

進化というのを、職場でよく聞くキーワードに置き換えたらスキルアップという言葉になると思う。で、このスキルというのは職種によって違うものと、そうでないものがある。例えば以下のように。

職種によるもの:

  • デザイン
  • プロジェクト進行
  • プログラミング
  • マーケティング
  • ライティング
  • サービス設計

一般的なもの:

  • コミュニケーション
  • タスク管理(時間管理)
  • 目標管理

では、どのようにしてこれらのスキルアップを助けることができるか?

「職種によるもの」に対しては、あまりできることはないと思う。専門的な能力になるため、僕が持っている能力を使ってもらうのが難しい。それでも一つ上げるなら、"デザインの考え方を理解してもらうことで、各分野のフィールドで役立ててもらう" というのはあるかもしれない。 たとえば、言葉だけじゃ伝わりにくい企画をペーパープロトタイピングなどのイメージを通して伝えること、など(これは具体的すぎて考え方というより手法だが)。

「一般的なもの」に対しては、そもそも曖昧なものが多い感じがするので、なんでも助けられる気になってる。しかし、大きすぎてどう助けたらいいのかわからない。コミュニケーションとか… これだけでサービスになったりするし(チャットとか)、タスクも同じ。


あかん。考え始めるところ間違ったみたい。

同じ職場で働く人、同じ仕事をしてる人にどんな価値を提供したいか

これ、次の機会にまた最初から考える。

CSS アニメーションを勉強する

まずは。

学ぶ

動きをイメージする

デモを見たり簡単な方法でアニメーションを動かしながら、作りたいものをイメージする。

  • Animate.css
    • サイトを見るだけでも、アニメーションの名前と動きを覚えるのに役立つ
  • CSS3 Keyframes Animation Generator
    • ジェネレーターを使って、アニメーションを作りながら動きを確認できる
  • Learn CSS Animation
    • CSS アニメーションが使われてるサイトを見る(これが良いかどうかは知らん)

リファレンス

デザイナーとして、何者になりたいか #2

前回の続き。

前回は何も考えず思いついたことを書いた。あれじぁ答えにたどり着きそうにないので、ちょっとやり方考えた。

こんな感じで上から考えていって、「4. そのとき自分は」のところで結論だそうと思う。

  1. 社会にどのように貢献したいか
  2. 同じ職場で働く人、同じ仕事をしてる人にどんな価値を提供したいか
  3. 家族、友達にはなにを提供したいか
  4. そのとき自分は
    • 持ってるスキル
    • お金

この 1234 もいくつかの記事に分かれる… 。

社会にどのように貢献したいか

「個々の進化を助ける」

個々の進化を助けた結果、健全な社会ができると思ってる。

ぼくは “進化” を「停滞せずに一歩進もうとすること」と捉えている。成功しようと行動することが大事で、結果的に失敗してもそれは失敗を学んだという意味で進化だ。

また、社会全体でみると、データから紙に戻ろうとすることは進化とはいえないかもしれない。紙は処分しなければいけないゴミをだすこと、これだけ考えても地球やそこに住む人々にとって良いことではないだろう。

しかし、ぼくはこういった人こそ助けたい。人類の未来は(言ってることがデカくなってきたぞ)、"人間" ってひとまとめに言えないくらいオリジナルが増えて、それぞれ個性を活かした生活をして、自分自身でその生活を幸せに感じられる未来になればいいなと思っている。

さっきのゴミの処分の話だけど、たとえ紙を使う人が増えたことでゴミの量が増えたとしても、人の個性を伸ばした未来ではいい感じにゴミをエネルギーに変換できる何かが生まれているかも。それかゴミを安全にきれいさっぱり跡形もなく処分する技術か、地球を捨てて別の星に行く技術か、人間の細胞を変える技術か。

かなり手前勝手な意見だけど、社会の目が自分が本当にやりたいことの邪魔をするなら、社会なんて気にせずにやりたいことをやればいい。  

この「なんとかなるさ論」は正しいかわからないけど、正しい可能性はある。であれば、社会全体に合わせてみんな同じ方向を向いた未来よりも、バラバラでもなんかうまくいってる未来のほうがぼくは楽しそうに感じるし、その未来に向けて自分の能力を活かしたい。

また、「助ける」というキーワードをいれたのは自分がデザイナーだからというわけではない。いま一番能力を発揮できるのはモノをデザインすることだろうが、言葉で人を助けてもいいし、(物理的に)手を貸すことで助けてもいい。

最後に、人の進化を助けることの最低条件は、自分自身の進化にもつながるものであること、としたい。