日報 / 20180211 #カンファレンスメモ もあるよ version 10

2018/02/11 14:45 by 38mot
  :追加された部分   :削除された部分
(差分が大きい場合、文字単位では表示しません)
日報 / 20180211 #カンファレンスメモ もあるよ
## したこと
* CXO Night関連の自分なりのまとめをクロッキーに書いた
* Inside Frontend へ参加

## Inside Frontend のメモ
***
### freeeのアクセシビリティ、いまとこれから(セミナー: B1)
* 「できたらやること」感がつよい → 分かりみがつよい
* UX成熟度モデル → これをA11yに置き換える。

#### 最初に行ったこと
* 一人から始めるユーザーエクスペリエンス(入社前)
* 全体会議で「いかに重要で関係あるか」を伝えて知ってもらった
* JACに登壇した際、同僚の方に取材に来てもらう→社内?ブログに書いてもらう
* Workplaceにアクセシビリティグループを作って、情報を流していく
* A11y本の輪読会を会社で行う
---
* 国内約320万人、 色覚障害の方がいる
* 聴覚障害の方 → テキストコミュニケーションだと助かる人がいる
* Google HOME → 画面を見ずに操作?できることはアクセシビリティなのでは
* Google Driveで画像が文字起こしした件 → これもアクセシビリティ

#### Web サイトのチェック
W3C を使ってEasy Checksテスト(みんなで集まって)
* マークアップの問題は軽微
* 画像や動画の代替テキスト(コピペで違う画像のaltが入ってたり)
  * 空だと画像があることに気づかない
* 水色テキストのコントラスト
* フォーム系のエラー表示(伝わらない可能性がある、エラーを読み上げない)
* 空のi要素でアイコン表示

#### 中根さんにインタビュー
かなり試行錯誤しないといけない現状
* アイコンにラベルがない
* アコーディオンのボタンがdiv…
* for属性のないlabel、inputが入っていない

#### iOS版に切り替えつつ利用
* 結構読み上げてくれる
* ?ボタンとか、アイコン読み上げないから何か分からない
* 画像の代替テキストに、操作の詳細が書かれていない

#### インタビュー所感:20:80の法則ありそう
* 発生する問題のパターンが限られている
* 人はマークアップを間違えるときにパターンがある

#### Webサイトのこれから
* Easy Checksの有志和訳
* 優先課題から解決していく(アプリのヘルプなど)

#### 既存のUIを修正
* 課題をあげる
  * PRをあげてもらう
* なおすのがむずかしい

#### 向き合う
* カスタマーサポートで補えるとこがある…
* 定量化していく必要がある

#### A11yの必要性に向き合う
* 目標と成果の明示が必要そう

#### 必要とする当事者に向き合う
* 当事者の声は、数多の理由より強く響く → ユーザーテストしたい…

### freeeのアクセシビリティ、いまとこれから(AMA: C1-2)

### 「規約に同意」のUX -ストレスフリーな同意UIとその実現方法-(セミナー: B1)
#### コンプライアンスとは?(FOLIO)
* 金融機関は重りがすごい
* 懸念点→ SNSシェアボタン系をつけられない

#### 利用規約
* 全体の7%しか読んでいない → ROOM Bでは1人だけだった
* >>金融商品取引法<<
クリエイターとコンプライアンス間で想いにギャップがある
→どちらも正しい。いかにスムーズに慎重な同意ができるか が大事
* モーダルは「負荷的に情報を提示する」認知のあるUI
  * PDFだと文字サイズが小さくなる→ユーザーが逆に警戒心を持ってしまう
  * FOLIO では PDF → HTML化
 
#### ☁
Word → Markdown → HTML
* web以外の成果物に使うことを念頭において拡張性を考えると、中間言語のMarkdownを挟む
  * PandocでざっくりとMarkdown化
  * リッチな表とかは手動で(コンプライアンスの方々と)
  * markdown-styles を使ってHTML化

### freeeのアクセシビリティ、いまとこれから(AMA: C1-2)
### コンポーネントTDDの実践から見えたもの(セミナー: A3)
### コンポーネント座談会(AMA: C3-2)
### 動的デザインガイドのつくり方(セミナー: B4)
### デザインとエンジニアリングのワークフローについて語りましょう(AMA: C4-2)
### デザインシステムとコードを密結合するワークフロー(セミナー: B5)

## よんだ
* https://twitter.com/38_mot/status/962490899493105664
* https://twitter.com/38_mot/status/962513742297669634

## 日報の書き方
* 色んな人の日報に書いてること・書き方をもっと知って、自分の日報に反映していきたい      

したこと

  • CXO Night関連の自分なりのまとめをクロッキーに書いた
  • Inside Frontend へ参加

Inside Frontend のメモ


freeeのアクセシビリティ、いまとこれから(セミナー: B1)

  • 「できたらやること」感がつよい → 分かりみがつよい
  • UX成熟度モデル → これをA11yに置き換える。

最初に行ったこと

  • 一人から始めるユーザーエクスペリエンス(入社前)
  • 全体会議で「いかに重要で関係あるか」を伝えて知ってもらった
  • JACに登壇した際、同僚の方に取材に来てもらう→社内?ブログに書いてもらう
  • Workplaceにアクセシビリティグループを作って、情報を流していく
  • A11y本の輪読会を会社で行う

  • 国内約320万人、 色覚障害の方がいる
  • 聴覚障害の方 → テキストコミュニケーションだと助かる人がいる
  • Google HOME → 画面を見ずに操作?できることはアクセシビリティなのでは
  • Google Driveで画像が文字起こしした件 → これもアクセシビリティ

Web サイトのチェック

W3C を使ってEasy Checksテスト(みんなで集まって)

  • マークアップの問題は軽微
  • 画像や動画の代替テキスト(コピペで違う画像のaltが入ってたり)
    • 空だと画像があることに気づかない
  • 水色テキストのコントラスト
  • フォーム系のエラー表示(伝わらない可能性がある、エラーを読み上げない)
  • 空のi要素でアイコン表示

中根さんにインタビュー

かなり試行錯誤しないといけない現状

  • アイコンにラベルがない
  • アコーディオンのボタンがdiv…
  • for属性のないlabel、inputが入っていない

iOS版に切り替えつつ利用

  • 結構読み上げてくれる
  • ?ボタンとか、アイコン読み上げないから何か分からない
  • 画像の代替テキストに、操作の詳細が書かれていない

インタビュー所感:20:80の法則ありそう

  • 発生する問題のパターンが限られている
  • 人はマークアップを間違えるときにパターンがある

Webサイトのこれから

  • Easy Checksの有志和訳
  • 優先課題から解決していく(アプリのヘルプなど)

既存のUIを修正

  • 課題をあげる
    • PRをあげてもらう
  • なおすのがむずかしい

向き合う

  • カスタマーサポートで補えるとこがある…
  • 定量化していく必要がある

A11yの必要性に向き合う

  • 目標と成果の明示が必要そう

必要とする当事者に向き合う

  • 当事者の声は、数多の理由より強く響く → ユーザーテストしたい…

freeeのアクセシビリティ、いまとこれから(AMA: C1-2)

「規約に同意」のUX -ストレスフリーな同意UIとその実現方法-(セミナー: B1)

コンプライアンスとは?(FOLIO)

  • 金融機関は重りがすごい
  • 懸念点→ SNSシェアボタン系をつけられない

利用規約

  • 全体の7%しか読んでいない → ROOM Bでは1人だけだった
  • >>金融商品取引法<<
    クリエイターとコンプライアンス間で想いにギャップがある
    →どちらも正しい。いかにスムーズに慎重な同意ができるか が大事
  • モーダルは「負荷的に情報を提示する」認知のあるUI
    • PDFだと文字サイズが小さくなる→ユーザーが逆に警戒心を持ってしまう
    • FOLIO では PDF → HTML化

Word → Markdown → HTML

  • web以外の成果物に使うことを念頭において拡張性を考えると、中間言語のMarkdownを挟む
    • PandocでざっくりとMarkdown化
    • リッチな表とかは手動で(コンプライアンスの方々と)
    • markdown-styles を使ってHTML化

freeeのアクセシビリティ、いまとこれから(AMA: C1-2)

コンポーネントTDDの実践から見えたもの(セミナー: A3)

コンポーネント座談会(AMA: C3-2)

動的デザインガイドのつくり方(セミナー: B4)

デザインとエンジニアリングのワークフローについて語りましょう(AMA: C4-2)

デザインシステムとコードを密結合するワークフロー(セミナー: B5)

よんだ

日報の書き方

  • 色んな人の日報に書いてること・書き方をもっと知って、自分の日報に反映していきたい