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

2018/02/11 15:50 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化
  * リッチな表とかは手動で(コンプライアンスの方々と… Confluence で)
  * markdown-styles を使ってHTML化
* ConfluenceとWord、Gitの三重管理 → 一元管理したい
  * 旧原本をなくして、最新のMarkdownを原本としてWordに変換(Wordはコンプライアンスの方が外部の弁護士さんと話すときにいるのだそう)
  * GitLabをコンプライアンスの方にもハンズオンして、使ってもらう
  * GitLabに一元管理!しゅごい

#### ☁
バックグラウンド・慣習が異なる、理解し合う

#### フロントエンド
* クリエイターのコンプライアンスや法律への理解・歩み寄り必須
  * 理解がないと高いUXは無理
  * FOLIOではwebの人も証券外務員を取得している
* フロントは、デザインとシステムをつなぐハブ。できることは広がる

### freeeのアクセシビリティ、いまとこれから(AMA: C1-2)
* ユーザーに会いに行く
* 国内と国外のA11y
  * 米国が進んでる
  * 日本は努力義務、上からの圧力がないので遅れている
  * 韓国はアクセシビリティコンサルタントが多い(完全に義務にしてしまうと、決まったことだけやれば良いんでしょ的なアンチテーゼが…)
* A11y専門ではない → それ以外もやっていくことで、関われる範囲が広がる
  * A11y以外でも、期待以上のことをして説得力を
* 社内勉強会
  * Easy Check、VoiceOverなど…やってみる会にする
  * 目が見えない状態での操作や、そういった動画を見て気付きを得る
  * カメラのたとえ → ☁ここ伝えたい
* 事例を参考にする、チャンスを逃さない(周りを巻き込んでおく)
  * 自分と近いレイヤーではない人(えらい人とか)にも話す → ☁相手に伝わる言葉で話す
* アプリケーションでは、Googleスプレッドシートがつよい
  * そのレベルになると、A11yやってるのは当たり前すぎて、やってるって言わない
* A11yで質問があれば、A11yのSlackへ

### 攻めつづける FRESH! の Web ver.新春(セミナー: B3)
#### Payment Request APIの導入
* カード情報をFRESH!で持たないように、GMOサービスを利用
  * 購入のたびに別ドメインへ行く、テンプレ更新面倒(デザイン変更とか)という点もある
  * 決済に必要なインターフェイスをブラウザネイティブで提供
  * APIに支払い処理は行わない
  * https://developers.google.com/web/updates/2016/07/payment-request?hl=ja

### コンポーネント座談会(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化
    • リッチな表とかは手動で(コンプライアンスの方々と… Confluence で)
    • markdown-styles を使ってHTML化
  • ConfluenceとWord、Gitの三重管理 → 一元管理したい
    • 旧原本をなくして、最新のMarkdownを原本としてWordに変換(Wordはコンプライアンスの方が外部の弁護士さんと話すときにいるのだそう)
    • GitLabをコンプライアンスの方にもハンズオンして、使ってもらう
    • GitLabに一元管理!しゅごい

バックグラウンド・慣習が異なる、理解し合う

フロントエンド

  • クリエイターのコンプライアンスや法律への理解・歩み寄り必須
    • 理解がないと高いUXは無理
    • FOLIOではwebの人も証券外務員を取得している
  • フロントは、デザインとシステムをつなぐハブ。できることは広がる

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

  • ユーザーに会いに行く
  • 国内と国外のA11y
    • 米国が進んでる
    • 日本は努力義務、上からの圧力がないので遅れている
    • 韓国はアクセシビリティコンサルタントが多い(完全に義務にしてしまうと、決まったことだけやれば良いんでしょ的なアンチテーゼが…)
  • A11y専門ではない → それ以外もやっていくことで、関われる範囲が広がる
    • A11y以外でも、期待以上のことをして説得力を
  • 社内勉強会
    • Easy Check、VoiceOverなど…やってみる会にする
    • 目が見えない状態での操作や、そういった動画を見て気付きを得る
    • カメラのたとえ → ☁ここ伝えたい
  • 事例を参考にする、チャンスを逃さない(周りを巻き込んでおく)
    • 自分と近いレイヤーではない人(えらい人とか)にも話す → ☁相手に伝わる言葉で話す
  • アプリケーションでは、Googleスプレッドシートがつよい
    • そのレベルになると、A11yやってるのは当たり前すぎて、やってるって言わない
  • A11yで質問があれば、A11yのSlackへ

攻めつづける FRESH! の Web ver.新春(セミナー: B3)

Payment Request APIの導入

  • カード情報をFRESH!で持たないように、GMOサービスを利用

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

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

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

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

よんだ

日報の書き方

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