コントラストについて少し勉強してみた

何か調べたり勉強したりしていると、「こうだよ！」という情報に対してどこまでも（興味本位で）ソースを深堀りしていくのが良くも悪くも癖で、今回も色んな情報に出会ったのでまとめておく！

結論

テキスト及び文字画像の視覚的提示に、少なくとも 4.5：1 のコントラスト比があること

これがとりあえず大前提！ （引用元：WCAG 2.0 解説書）

例外

• 大きな文字である場合
  サイズの大きなテキスト及びサイズの大きな文字画像に、少なくとも 3:1 のコントラスト比がある
• 付随的（テキスト又は文字画像において、次の場合はコントラストの要件はない）
  • アクティブではないユーザインタフェースコンポーネントの一部である
  • 純粋な装飾である
  • 誰も視覚的に確認できない、又は重要な他の視覚的なコンテンツを含む写真の一部分である
• ロゴタイプ
  ロゴ又はブランド名の一部である文字には、最低限のコントラストの要件はない

余談

• WCAG（Web Content Accessibility Guidelines）とはW3Cの中のWAIによって策定されているもの
• W3C（World Wide Web Consortium = W3C）とはWorld Wide Web（インターネット上）で使用される各種技術の標準化を推進する為に設立された国際標準化団体、非営利団体
• WAI（Web Accessibility Initiative）はW3Cの一部で、標準のブラウザだけでなく様々なユーザーエージェントを用いてWorld Wide Webにアクセスする人々のためにウェブアクセシビリティを向上することを目的としている団体。この組織は、補助デバイスを用いてウェブにアクセスしている、身体障害者にとって特に重要といえる。

（引用元：ウィキペディア）

あれ、こないだ勉強会で出会ったWAI-ARIAのWAIってもしかしてここから…？とふと思ったので次の機会に調べてみよう…（もうほんとキリがなくてたのしい）

達成基準（コントラスト比）の意図

（引用元：WCAG 2.0 解説書）

〜色々省略〜
色覚異常の人でもテキストと背景との間の適切なコントラストを持つように、色が主要因とならないような方法でコントラストを算出している。

除外されるもの↓

装飾的及び情報を伝えないテキストは除外される。例えば、背景を作成するためにランダムな単語が使用され、かつその単語を意味を変えずに並べ替え又は置換できる場合、これは装飾的であり、この達成基準を満たす必要はない。

文字サイズによる例外↓

より大きい及びより広い文字ストロークを持つテキストは、より低いコントラストでも読みやすい。したがって、より大きいテキストに対するコントラスト要件は、より低い。

詳しくは、
18 pt（約24px）以上のテキスト又は 14 pt（約18.5px）の太字以上のテキストであれば、最低基準のコントラスト比を下回ることも容認される

補足

• 文字画像 (ピクセルでレンダリングされ、画像フォーマットで保存された文字) にも適用される
  →　文字画像がテキストとして理解されることを意図されている場合に適用される

色相は、色覚異常 (先天性及び後天性の両方) をもつ利用者によって、通常の目の見える利用者とは異なる色及び相対的な輝度コントラストを結果としてもたらすように、異なって知覚される。このため、有効なコントラスト及び読みやすさは、人々によって異なる。しかし、色覚異常は非常に多様であるため、定量的なデータに基づく (コントラストのための) 有効で一般的な色の組み合わせを規定することは、実現不可能である。十分な輝度コントラストを要求することは、色の知覚から独立したコントラストを要求することによって、これに対応している。幸いにも、輝度の寄与のほとんどは、分光応答で大部分が重なる中波長及び長波長の受容体からのものである。その結果、有効な輝度コントラストが一般的に、特定の色覚異常に関係なく計算できる。ただし、赤色を知覚しにくい 1 型 2 色覚の人の場合、暗い色 (一般に黒に見える) に対して主に長波長の色を用いることは除く (この理由のために、WCAG ワーキンググループは、黒の背景色に赤の前景色を使うことを避ける参考達成方法を提供している)。

噛み砕けるほど詳細には理解がまだ追いついていないけど、ざっとまとめると、色覚異常の人は通常の目の見える利用者と異なる色やコントラストの見え方なんだけど、その見え方が本当に様々だからおおよそ網羅できるように十分なコントラスト比の基準を設けてますよ、ってことかな？

• 3：1 のコントラスト比
  標準的なテキスト及び視力を想定した場合の推奨最低限レベル
• 4.5：1 のコントラスト比
  中度の弱い視力、先天的又は後天的な色覚異常、もしくは典型的な加齢に伴うコントラスト感度の衰えに起因する、コントラスト感度の低下を考慮するための推奨最低限レベル

この数値の根拠（計算式）とかも掲載されていたけど、今回は一旦ここまで！（頭疲れた！）他にも、視覚障害のある人が使う画面拡大ソフトのような支援技術を使う場合、といった話も次のページにあったので、アクセシビリティについてもっと深ぼるぞおおおおのときに、また読んでみようと思う。

補色について

先日、コントラスト比を考えた配色についての参考記事とともにアドバイスも頂いたので（ありがとうございます！）、ここで一緒に触れておこうと思います。

allabout.co.jp

補色とは色相環で正反対に位置する関係の色の組合せ（コントラストの強い配色）のこと

補色の3つの効果

1. 物理補色
   補色同士を混色すると無彩色になる（理論上は黒になるが、実際には濁った灰色になる）

2. 心理補色
   補色の一方の色をしばらく見つめた後、白い紙などに目を移すと、残像として補色のもう一方の色が現れること（下記の例はたしかに…！！！理由あったんだ！！！となりすぎて感動）

   たとえば、外科手術を行う医師は、血液の赤を長時間見つめるため、緑色の残像に悩まされてきました。視線を動かすと残像も一緒に動くため、手術中の医師にとって大きなストレスとなるからです。 1925年、米国の化学系企業デュポンは、補色残像を和らげる効果がある色として、薄い緑色の塗料を提案しました。現在では、外科手術室の内装だけでなく、手術着にも薄い緑色が採用されています。

3. 補色対比
   補色の関係にある色どうしを並べて置くと、より彩度が高くなったように色のあざやかさが強調される

参考にした記事内で紹介されていた補色の代表的な組み合わせも、よく見る組み合わせで「ああなるほどちゃんとこういう理由があるのか…見やすいなとはぼんやり思っていたけど、理に適った配色だったんだ…」と目からウロコ。

アクセシビリティを保持しつつ、感覚的に訴求したいイメージがセンス良く伝わる配色もどんどんできるようになって行きたいなあ…とひしひし感じながら今回はこのあたりで終わり！

ヒューリスティック評価というものが気になった

note.com

先日のデザイン勉強会でちらっと紹介されたヒューリスティック評価というものが気になっていたものの、なかなか時間をとって読み込めていなかったので、今回ようやく自分なりに備忘録としてまとめておこうと思います。

ヒューリスティック評価とは？

• 自分の作ったデザインが、ユーザーにとって使いやすいかどうかを客観的に評価するもの
• ヒューリスティック評価はユーザビリティインスペクション法の1つ
• ユーザビリティの専門家が対象となる機器やシステムを見て、その洞察に基づいてUI上の問題を明らかにする発見する手法
  →　つまり、経験則（ヒューリスティックス）に基づいてユーザビリティを評価し、UI上の問題を発見する手法ということ
  →　ユーザビリティの専門家がUIに関する問題点を抽出し、それに対する改善案を提案する
• 経験則に基づいて評価するので、実際にプロトタイプを操作しながら評価を行う
• ヒューリスティックとして有名なものの1つにヤコブ・ニールセンのユーザビリティ10原則がある
  今回はこれに沿って、問題点を抽出→改善していく（見つけた改善点を記録して、デザインに反映していく！）

★一部、U-Siteさんから引用

ヤコブ・ニールセンのユーザビリティ10原則

1. システムステータスの認知
   システムが今どんな状態かユーザーに知らせる
   ex) プログレスインジケータなどを設置して視覚的にユーザーに知らせるなど
   インジケータってなんだ、から調べてまた読みたい記事が増えた(^q^)
   goodpatch.com
2. システムと実世界の調和
   開発現場で使っているいわゆる専門用語を使ってしまうと、ユーザーには分からない
   ex) バリデーション→エラー表示、マージン→間隔
3. ユーザー制御と自由
   ユーザーの逃げ道（やり直しの道）を作る
   ex) Undo、Redo、Cancel
4. 一貫性と標準化
   一貫性のあるデザインにする
   ex) 様々なボタンや色使いが混在していると、ユーザーは混乱してしまい学習コストが上がる
5. エラー防止
   エラー表示が起こるとユーザーは注意されているような気持ちになるので、なるべくエラー表示をしないデザインにする
   ex) 英数字のみ入力可能なフォームならそもそも日本語キーボードを表示しない、など
6. 想起ではなく認識
   ユーザーがその表現を見た時に認識（簡単に思い出せる）できるようなデザインにする
   ex) この言葉どこかで見たことあるけどなんだっけ…→この言葉はどこでもよく見る！分かる！
7. 柔軟性と効率性
   頻繁なアクションにはショートカットキーを設定する
8. 美的でシンプルなデザイン
   過度な情報や装飾を削ぎ落として、必要最低限の表現に留める（必要な情報を際立たせるため）
9. ユーザーがエラーを認識、診断、回復することをサポート
   単純に「エラーだよ！」と知らせるだけではなく、問題を正確に認識してもらって改善してもらうために、明確にエラーの内容と解決策を提示するように意識する
10. ヘルプとドキュメント
    ヘルプとドキュメントを、ユーザーがわかりやすい（アクセスしやすい）位置に提示する＋内容もユーザーにわかりやすいか気をつける

感想

普段からUIでもWebデザインでもユーザビリティ大事！って自分でも思っているけど、じゃあ具体的にどうしたら良いのか？何に気を付けたら良いのか？というより具体的な視点が増えて良かった。これあとで読も！のブクマがすごい溜まってて消化したくて少しずつ読むけど、読む度に新しいこと調べてまた記事が増えていくという無限ループ(^q^)

情報の整理術とか組織の仕組み的・マインド的育て方とか、ありがたい話を聞いてきた

今回もとっても濃厚で、え、これ無料ですか…？という盛り沢山な内容でした。今回の内容としてはデザインの技術についてというよりは、どちらかというと考え方やマインドが主軸の会だった気がしていて、自分がデザイナーとして、かつ私を受け入れてくれた組織の一員として、成長するために間違いなく必要な内容だったなと思います。（ありがとうございました！）

今回参加したイベントはこちら↓ wcan.jp

そしてすごいボリュームになりそうなので今回は目次↓

Session1: WEBデザインにも戦略を！自社の魅力を伝える思考法を学ぶ

発表された方：デザインコンサルタント/株式会社ワイルドシンク 松本 恵さん

学んだこと

• AB3Cフレームワークという思考法
• 競合他社・ユーザー（の求めている価値）・自社の資源や強み、という3視点の関係を整理し、その中で自社（サービス）が選ばれる理由（差別的優位点）を探すために使う

「コーヒーを買いたいユーザー」をターゲットにすると一言に言っても求める価値は多種多様
↓
求める価値でユーザーを分類する
- 苦いコーヒーが買いたい
- 香りが特徴的なコーヒーが買いたい
- 個人で楽しみたいので、酸化しないように個包装がいい
- 大人数で一気に消費するのでまとめ売りでお得に買い求めたい
などなど
★実は多種多様な価値（希望）をミックスして商品を求めているケースが多い
↓
自社の強みが生きる、相性の良いユーザーを絞り込んで本当の見込み客（ターゲット）に絞り込む
- 自社は苦味が特徴のコーヒーを取り扱っていて、上品な個包装で提供している商品が主力、など

• 競合とは「ターゲットユーザーが購入するときに検討している範囲に入ってくるもの」
• その競合と比べて、自社を選んでもらえる「好ましい違い」が他社に対する差別的優位点となる
• AB3Cフレームワークで見つけ出した【ユーザーの求めるベネフィット ✕ 自社の差別的優位点】をデザインに落とし込む
• ↑これがいわゆる戦略メッセージ
• 自社の戦略メッセージを初見でユーザーに伝える必要があるので、キービジュアルに落とし込む（ユーザーはいくつもサイトを巡るので、第一印象で「自分の求めている商品とは違う」と感じればすぐに次のサイトへ移ってしまう）
• ユーザーはキービジュアルを見て目的のものを絞り込んでいく
• 戦略がないままWEBサイトをデザインしても、成果がでない
• まずはユーザーを掘り下げて、自社が選ばれる理由を導き出し、そこにどう訴求するかという戦略を立てていけばデザインで何を伝えれば良いのか迷わない
• サブベネフィット（ユーザーが主に求めている価値に付随する別の希望）を定めるとき
  他方角から定められる、統計的にみる、「業界で求められている価値」に対して「自社の特徴から考えて活かせるポイント」に定めている
• 企業や経営者の価値観をAB3Cに反映することを意識してやっている（それが本来の戦略になり得る）
• ターゲットが求めている価値をどうやって抽出するのか
  • リピーターやユーザーにアンケート
  • 調査分析も大事 → 市場調査も反映する
  • 同じ業界の人に話を聞く（競合他社）
• AB3Cは今すでに抱えているユーザーの新たな（別の）要望を持っているか探っていけるし、新しい顧客層も探っていける

感想

顧客のゴールを達成する手助けをしたい！といつも思っているけど、具体的にどうするか、どうやって手助けしていくのかがとても明確なイメージになった。ただオシャレなデザインができるだけではなくて、こういう思考整理や戦略からブランディングに携わって、それを形にするフェーズとしてのWebデザインも自分できる、みたいなデザイナーにずっとなりたいと思っているけど、この話を聞いて「早く現場でやりたい！！！！」のうずうずがすごかった。

Session2: 地方制作会社が実践してきた組織としての成長方法

発表された方：GrowGroup株式会社 小野 隆士さん

学んだこと

• 社員19名で年間366本のプロジェクトがあり、受注から納品までワンストップで提供していくためのWEB制作の仕組み
• Backlogを使用したプロジェクト管理
  受注タイミングでタスク構成、修正についてもタスク化されて連動しているTypetalkで通知がくる
  特定のメールアドレス宛に顧客から修正依頼が来ると、自動的にタスク追加される（すご！）
• ある程度定型化された作業はテンプレートに落とし込むことで、本当に必要な作業（品質向上など）に割ける時間を多くする
  • 仕様書・提案書のベーステンプレート（PP+Excel）
  • 構成ラフのベーステンプレート（XD）
  • デザインのベーステンプレート（XD)
  • HTMLのベーステンプレート（npm+pug+scss）
  • WordPressのベーステンプレート（生成コマンド+ベーステーマ）
• 品質を高める仕組み
  • 企画キックオフの時点で、各職種（エンジニア、デザイナー、ディレクターなど）で仕様の抜け漏れチェック
  • デザイン方針定義書などでデザインの方向性をすり合わせ
  • コーディング完了時点でデザイナーチェック
  • WP全行程完了時点で全ページに渡るテストデバッグ
  • 納品チェックシートで納品時の抜け漏れチェック
• 会社に知識を蓄積していく仕組み
  • 社内ポータルサイトを構築し、様々なマニュアル類を格納
  • ZohoCRMで案件情報を一元管理
  • RainDropを活用してデザイン参考サイトを共有（ブルー系などタグも付けられる）
  • notionを用いてエンジニアスキルを共有
• 工程間のコミュニケーションの仕組み
  • 社内キックオフミーティング
  • 進捗管理シート
  • クロージングミーティング
• 委員会制度により、各業務工程の改善を図る
  • 営業・ディレクター・広告運用委員会：営業工程の改善
  • デザイン委員会：デザイン工程の改善
  • コーディング委員会：コーディング工程の改善
  • 業務改善委員会：工程を横断した改善
• 制度化・タスク中心に業務を行うことにより顕在化した課題
  • 自分の担当タスク以外に目が向きづらくなる
  • 会社全体の方向性が見えづらくなる
  • 忙しくなると、タスク以外をこなすゆとりがなくなる
• その課題への対策
  • 自工程以外のメンバーや社外の人とのコミュニケーションを促進することで、様々な視座を養う
  • キックオフミーティング
  • 週末のランチ会
  • デザイナー向け勉強会
  • 社外勉強会
  • もくもく会　などなど

感想

前職のときも、いつも遅くまで残業している同僚を見ていつも早く帰してあげたいなと思っていて、こういう必要に応じたテンプレートを浸透させて繰り返し作業をもっと効率的にできるビジョンは浮かんで色々やってみてたけど、なかなかやっぱり1人では難しいなと感じていたので、組織としてうまく機能しているのは純粋にすごい！良いな！ってなった。あの人も遅くまで残業しているから私も…みたいな身を削って差し出し合うよりも、削れる所は削って、早く家に帰って疲れを取って、マインドも整えてパフォーマンスをあげて顧客に還元していくのが理想だと思うし、単純に私はそういう社会で働きたい。笑　だからたった一人の声だとしても、改善点を探し続けて考え続けることは続けていこうと思う。

Session3: ピンチをチャンスにする！withコロナ時代に生み出される“デザイン”

発表された方：株式会社エイチームライフスタイル 章 瑠希さん

学んだこと

• 雑談の中から生み出される社員間の関係性であったりクリエイティブのきっかけが、コロナによるリモートワークで希薄化するかもしれないという懸念
  ↓
  課題をまとめると：空間を共有することで無意識的に行えていた受動的かつ自然発生的な「企業文化の醸成・継承」が、リモートワークによる空間の断絶によって個々人の能動的な行動や意識に依存してしまっている
  ↓
  オンラインで様々イベントを実施
• 大規模なLT大会や社内ハッカソンなど
• 制約の中でこそ、クリエイティビティは発揮される
• 今を深刻に捉えすぎず、未来に真剣になる
• オンラインだからこそ従来よりも実現できること

感想

今の状況を嘆くのではなくて、従来から丸っきり変わってしまった今の状況だからこそできること、活かせることを前向きに見つけて、そこを土台に発展を止めない姿勢が会社の文化としても一人一人の社員の方としても素敵だなと思った。チームを横断したオンラインハッカソンや、有志がたくさん登壇する社内LT大会はオンラインだからこそやりやすいというか、利点もあっただろうし、コロナで世界が変わったから、その変化についていくだけでなく自分たちでも新しいものを作り出そう！というクリエイティブな心を持ち続けたいなと思った。★Discordのボイスチャットルームでみんなと繋がっているのは、雑談もしやすくて良いなと思ったのと、生活音が聞こえないように基本的にはマイクミュートっていうのも小さな工夫だけど気持ちよく働けるなと思った。

MainSession: 情報過多時代だから身に付けたい知識を養う整理術

発表された方：長谷川 恭久さん

学んだこと

1時間のメインセッションということもあったけど、知らない知識や考え方がお話の間ずっと芋づる式にどんどん溢れてきて、これもまた文字起こしみたいになってしまったんだけど、追いつけなくて拾いこぼしがたくさんあって悔しい…でも少しでも自分のものにするためにとにかく掴めたものを箇条書き↓

• miroの画面、みんなの名前つきのカーソルが動いててリアルタイム感すごい！
• ノーマンニールセンがUXデザイナーなにしてるの？みたいな調査を発表したりしてる（ノーマンニールセンほんとどこの勉強会でも話に出てくるな…読もう）
• 時代に併せてデザインも変わっていく（フラットデザインからスキューモフィック、そして3Dなど）
  それに併せて開発環境が変わっていく
  →　今いかにソフトが使いこなせるかではなく、いかにその変化にキャッチアップしていくか（ソフトも機能もデザインも感性も）が大切と思った
• 変化が早いからこそ、学校・セミナー・書籍での情報収集では追いつけない
  ↓
  職域を超えたコミュニケーションはますます重要
  課題の複雑姓がますこそで知るべきことも増えていく
  時が経てば変化することもある（トレンドや市場など）
• マインドセット（捉え方・考え方）＋ワークフロー（ツール・手段）が大切
• 知識とは？
  自分に必要な情報を引き出す力
  組み合わせて繋げて新しいアイデアを生む力
  次に学ぶことを探し出す力（状況も知識も人それぞれなので、結局自分で見つけなければならない）
• クリエイティブは今まで積み上げてきたものを繋げて新しいものを生み出していくこと
• 情報と知識は違う！（前述の通り）
• 参加者のいろんな考え方（思考整理）やデザインに落とし込むまでの進め方が見られて刺激になった
• 自分がどういうタイプの課題解決方法、情報収集なのか、ということが知ることもまず大切
• 新しいツールだから良いわけではなく手に馴染む、用途に合っている、自分のタイプに合うようなツールを使って向き合うことが大切
• 後で読むをやりまくるけど読まないから、情報は集めているけど知識になっていないという状況
• 自分の情報をきちんと知識に変換することを続けていくことで、新しいものをどんどん作れる
• 自分の手に馴染む、感覚に合うツールを選ばないと続かない

感想

メモを取るとかっていうよりもとにかくmiroで作られたスライドっていうのかな？資料が秀逸すぎて耳から入ってくる情報もあるんだけど視覚的に入ってくる情報にも頭が忙しくてメモを取る暇がなかったな…すごく濃厚な1時間でした。知らないツールや試みも次々画面を見せて頂いたり共有して頂いたり、とにかく本当に勉強になりすぎた！！自分の中にある情報を知識に変換していく作業が本当に大切で、それは一朝一夕にできるものではなく長い時間をかけて積み上げていくんだとひしひしと感じた。情報を拾ってきて、「あとで読もう」と貯めることはできても、貯めたものを読んで「情報を得る」ことはできても、それを自分の頭や手を介して使いこなせないと「知識」にはならない。本当にそうだと思った。（積ん読とツンデミー早く消化しなきゃ…）自分に馴染む方法や手に馴染むツールでしっかり知識として転々とした情報を紐付けていくことをもっとやっていきたい！上手く表現できないけど本当に大事だと思う！本当に！（知ってるのとそれができるのとでは全然フィールドが違うし、そこから新しいものを生み出せて一歩目な気がする！たしかに！！！）

パネルディスカッション：withコロナ禍で変わったWeb業界の仕事と働き方

コロナ禍でリモートワークを取り入れたり、ハイブリッド出社を試してみたり、新卒の育て方を試行錯誤したり、会社によって様々な対応をしていることが興味深かった。個人的にリゾート地でのワーケーションはパフォーマンスあがりそうだなと感じた（自分が行きたいだけかもしれない笑）

まとめ

ひたすら自分の所属している組織に向き合い続けることも大切だと思うけど、私はやっぱり外の世界も見に行って知ってどんどん自分の知見や世界やアイデアを広げて、そこで知ったことを自分のチームに還元していきたいなとふと思った。せっかく仕事をするならどんどん成長してやりがいも感じて行きたいし、その心地よさを仲間と共有して日々切磋琢磨できたら良いなととっても思う。そして自分のチームでのノウハウを外に発信して、それを知ったどこかが新しい何かを作り出して、それをまた自分たちも取り入れて…そういうサイクルは根本的には資本主義だと気持ちの障壁も少なからずあるだろうし難しいのかもしれないけど、その一方でそうしていこうとする風潮も十分にあると感じていて、まとまらないけど、そこに参加して世の中を盛り上げていきたい！

今回は考えるにフォーカスしたトピックだったからか分からないけど、自分の意見や考え方というフィールドの脳がすごく稼働した気がする。こういう思考整理や自分の意見とは？考え方とは？みたいなことを理解していくこともちょこちょこやっていきたい。

UI/UXについてあれこれ話すトークセッションを聞いてきた

今回もとっっってもためになった。今回はデザインの技術やトレンドがどうこうというよりも、デザイナーの本質とか求められる役割だとか、UIデザイナーUXデザイナーって本来こういうものだよね、これからはもっとこうなっていくよね、みたいなお話が聞けて本当に興味深かった。興味しかなかった。深い。（毎度感じる語彙力の限界）

参加したイベントはこちら↓

flexy.connpass.com

パネラーさんの自己紹介

ニッパーさん

ペアーズを作っているエウレカで働いている
会社は世界中のマッチングアプリを提供している会社と横串で繋がっている（そういうグループ？合同会社？みたいなところに参画している）

エウレカのミッションは
人生に「あってよかった」と思ってもらえるものを作ること

宇野さん

クックパッド　UIデザイナー／デザイン戦略部　本部長
今年はマネジメントに重きを置いている
いろんなベースを作ってた

Q. 組織はどんな感じ？

• 30名くらいがデザイナー（業務委託もいる）
  デザイナーは各事業部（各プロジェクト）に所属
  評価のときだけ横串にデザインマネージャーがいるのでそこで評価
  上長がデザイナーでない場合も、デザイナーとしての評価ができるように

• デザイン戦略部
  →　全社に関わる会社に関わる広報のデザインやら、デザインのツールを準備したりやら

• 買い物や洗い物も料理の体験の一部として捉えている
  料理につながる全ての体験をどう繋げていくか

• 社内のキッチンで料理をして実際に試しながら試行錯誤していた

菊池聡さん

Web Directions East合同会社
「UX DAYS TOKYO」など海外のカンファレンスを日本に持ってきて開催している
最近は教育にフォーカスを当て始めている
教育プログラム、スクラム、マネージャー育成などを運営するサービス
UXをもっと色んな人が勉強できるプラットフォームを作りたい

トークセッション１：ビジネスにおけるUI/UXの進め方について

クックパッドでデザイナーに関しての役割は？
どういうところに重きを置いて仕事をしているか？

↓

デザイナーに限らず、みんなに全てを作り上げる
明確なディレクターが少ない
誰が仕様を決める？も決まっていない
小学生のサッカー（ボールに全員が群がる）
そこから誰かがオーナーシップを持って導いていく
誰が何をやんなきゃいけないがあんまり決まっていない（意思決定者がきまっている）
それぞれがやりたいことをやりたいタイミングでやっている
最初の起案からリリース、グロースまで関わり続ける
いわゆるUIデザインに掛けられているデザインは全体の三割
ユーザーインタビューとかにもめっちゃ時間かける（デザイナーが行ったり）
毎週5人インタビューする人をアサインして各事業部が取り合っている
それを重ねて作り上げていくのが基本スタイル
まとめ：すべてのフェーズにデザイナーがいる

エウレカは各職能のスキルを深堀りする機関に振り切ろうになった
アプリも国内に留まらずアジア等にも進出し始めているので、
各職能がワールドクラスのすきるを深ぼらなきゃ！→なので役割が別れている
課題の発掘より課題の解決に注力している

色々あるね！

UI/UXに関する受託になると
会社の人間ではないので、リサーチが満足にできない（金融なら個人情報がどうのとか）
逆に小さい会社なら一緒にリサーチからスタートできるので、手取り足取りになるけど一緒にできるのでやりやすい
いまはコロナでユーザーに会えないのでインタビューでユーザーから表情や声を拾ってくることが大変

デザイナーのプロセスを深堀り（クックパッド）
はっきりしたプロセスは決まっていない
どこからデザインなのか？をみんな区分けしていない

デザイナーが入っていると、
言語化から始まって認識合わせのためにプロトタイプを作っていき
コミュニケーションの道具としてFigmaを使っている
デザイナー以外もみんなFigmaのアカウントを持っている（Miroと同じ感覚で使っている）デザインもその延長で進めていく
UIキットをデザイナーが作っているので、デザイナー以外の職がこんな感じ！でキットを並べながら話したりする

デザインスプリント（Googleベンチャーが生んだやつ）
3日間のやつを結構やってる（意思決定者が絶対いたりCTOが同席したり社長がでてきたりする）他のことをシャットアウトして缶詰でやっている
これが課題かもしれない、みたいな種をそこで作り出す
課題発見をそこでやって、そこからデザインとして広がっていく
叶えたい世界に達成するためにできるソリューションは何か！を考えていくとあ、そういえばこれ課題だったかもしんない、が生まれてそこから詰めていく

エウレカはマーケティングが強い会社
大きなプロジェクトはユーザーインタビューを毎週やっている感覚でマーケット・リサーチを定期的にしている
２０２０年　すべてのシングルがターゲット、いまどういう恋愛観をもっているか、マッチングアプリに何を求めているか、などのアンケートを集めている（ペアーズに限らず）
そこから戦略を考えて具体的な機能に落とし込んで話が進んでいく

リサーチチームがアンケート作ってくれたり、戦術を極めて行って
デザイナーはコンセプトモックを作っていく、だったりクライアントのヒアリングに混ざっていくという関わり方

受託側として、どう考えても当たんないぞ？のとき話が来たらどうしているか
これは受託あるある
コミュニケーションがとれないことが原因
要件定義に沿って作ってくれ、といわれてもUIUXの出番も見栄え良くするだけのチームだと思われている
↓
この場合、速攻で降りるか
ステークホルダー（社長とか）に、どうしてこうなったか、と話してもらう機会を設けて教えてもらう

社長がもうプレスリリースまで売っちゃったんで…「え、これ売っちゃったの？」ってなって速攻おりるみたいなのがあるある

相手方に能力がなかったら引っ込むという形態もそろそろ日本に出てきても良いかなと思っている

トークセッション２：これからのUIUXデザインについて

UIUXはどう進化していくか？
VRやARがちょっとずつ出てきている
ので、新しいインターフェースや操作体験が出てくるかな〜と考えている

クックパッドではスマホが主戦場
スマホ画面眺めてても料理って完成しない
キッチンに立ってて手を動かして料理が進むから、そこが楽しくないと…
画面の外のほうがずっと大事だと考えている一方でスマホが最強のデバイスだと感じている
↓
家電メーカーと新しい家電の形を模索している
調味料サーバーにスマホからレシピデータを飛ばして自動調理など
AR等に望みはあるけどあおゴーグルを付けて料理をするのは現実的ではない

VUI
あれくさのスキルは親和性がたかい（VRとかよりは）
アレクサで一番使われているのはキッチンタイマーらしい
だからそこから声で操作することで親和性がたかい

受託って色んな企業の色んな案件が舞い込んでくるのが醍醐味
未来を感じる案件 や「最近こんな案件くるなあ」は？

デジタルトランスフォーメーションという言葉が流行っていて、AIやチャットという案件が増えてきた
顧客との会話、お問い合わせとかそういうのが多い
バックオフィス（サポートチーム）にAIを入れたいなど

DXという言葉自体が先に行き過ぎてAIを入れたいけどどうしたら良いかわかんない、という案件が増えている
コンテキストが分かってて、こういう理由で音声じゃなきゃだめだよね、AIにたどり着いているわけではない

AI使いたい、チャット使いたい、から始まってきているので
問題解決が深堀りされているわけではないので、何がやりたいのかクライアントも分かっておらず「とりあえず入れたい」が多い
→　没案件が多い

事業会社はDXが終わっておりその先にいる
なのでDXやらなきゃいけないというマインドがそもそもない

Slack導入がDXだ！！みたいな
え？そうなの？？って事業会社ならなる

エウレカはデートアプリなのに会ってデートできないみたいなやばい上級になったので
急いでビデオデーティングアプリを１ヶ月くらいで急いで出した

宇野さん
デザインの価値が表装的でも、何かを底上げするでも、価値はどんどんあがっていくと思う
一方でバナーを作る仕事もなくなってはいない
大量に何案もつくる、サイトごとのレギュレーションにそってデザイン創らなきゃ駄目
その仕事はどうしても発生してしまう

上は上がり続けるけど、下（バナーを作るなど）はそのままで幅が広がっていく気がしている
エンジニアは平均があがったけど、デザイナーは上は上がったけど下が上がらないと平均は上がらない

その人の能力というよりも、業務の幅が単純に広い

事業会社は課題発見。解決。情報設計がとくいな人が多いけど
グラフィックに強いひといなくてそっちが欲しいみたいなことが多い

ごりごりのグラフィッカーを雇ってグラフィック力の底上げを今年からやってる（エウレカ）

受託の単価は上がってますか？
相場的にUIUXは上がっているけど、二極化している（宇野さんいったように）
ビジュアルのデザイナーが急にUIデザイナーになって、どっちつかずで苦しんでいる
↓
ビジュアルデザイナーはビジュアルでもっとスキルアップしたら良いと思う
なぜUIに行ってしまう？
↓
キャリアパスの教育システうとかは海外と違う
海外はUIデザイナーになるための大学の学部がある

なぜ途中で中途半端にキャリアを変えてしまう？
会社に入っても勉強をして自分の価値を伸ばしている人はいる

コツコツやれている人が何年か先にドカンとなる

質疑応答

UIUXのゴールはどのようにどの段階で決めているのか
UIUXのゴールはどんなことをイメージ？
→何かを変更するとき、作るときの成功の定義
（見た目の話じゃなくて一例の施策のゴール＝UIUXのゴール）

UIUXデザイナーとして入るなら、見た目を整えるだけじゃなくて、その前の課題を拾い上げる必要がある
経営者層ともコミュニケーションをとるようなビジネスとしてどのくらいのバリューを出すのか、みたいなところにいる

結局ゴールどこ？って話さなきゃだめなので、それなら最初から呼んで欲しい

宇野さん
★回答としては「施策を決めるときの最初に決めるゴールがUIUXのゴール」
PVがゴールならそれがUIのゴール
「使いやすい！」がUIのゴールとしても、それで結局使用率をあげるためのもの
UI独自のゴールというのは存在しない

KPIの決め方もプロダクトの色がでる

サービスがユーザーに沿っている、をどう測っているか？
レシピ決定率を定量的に測っている
キーワード検索→レシピ到達→その画面がどれだけ開かれているか、とか
その決定率を数字にしている

けど、楽しんでいるか、を測ることを難しい
多様性のある料理をしているか、料理のマンネリ化を防げているか、を大切にしているのでそこを測っている →それは楽しいかどうかを測る指標にしている

NPS？LPS？という活動が大事らしい
アンケートを集めている（アプリ使って生活変わったか、とか）
どういったマインドで使っているか、がそのサービスを使い続けてくれるか、がかかっている

数多ある情報の中からこのサービスをどうやって使ってもらうか、を考えることが大切
→感情がとても大切な要素

クックパッドが参考にしているデザイン組織
考える時にベンチマークしている企業とかある？
→あらゆる企業を見ていく
デザイナー同士のつながりがほっとくと薄れる（事業部単位なので）
お互いの顔も知らないのが課題だった
↓
いろんな企業をみて
それを真似してる
合宿ができないならみんなの手元に届けばいいじゃないか！
チームぎめも箱を開けるまでわからない、とか

ビデオデーティングという機能を１ヶ月でリリースというのは随分早い対応と感じました。課題発見などの調査に要した時間、デザイン、実装の期間はどのような時間配分で行われていたのでしょうか。

ビデオデートはもともとやりたいね〜っていってた
ビデオ通話は日本では全然浸透していない文化
実際に会う前に顔を見て話すことで安心していけるようなそういう定義
機能定義は他社がすでにサービスを出していた
機能とデザインが同時進行で進んで最後ガッチャンコしてゴーした

普段はめちゃくちゃホワイトなんだけど、
残業とかも全然ないけど、
コロナ来てやばい！ってなってがっとやってがっと出した

ところどころわちゃわちゃしてて楽しかった

デザイナー足りないらしい
まとめ記事が出るらしい

感想

アーカイブもどうやら配信されなさそうだし、ずっと喋りっぱなしだし、ということで今回もずーっとリアルタイム文字起こしみたいになってしまったから取りこぼしが多発していると思うけど、それでも得るものはたくさんあった会でした。こういう学んだことを現場に還元することで初めて価値は生まれると思っているので、早く現場！いきたい！となりました。終わり！

Figmaの5周年を題して掲載されたCEOのコメントを読んでみた

Figmaのメルマガ（？）に登録していて、今回5周年の節目でCEOのコメント掲載ページが送られてきた。ちょっと読んでみた。思うことがいくつかあってTwitterでは文字数が足りないから、勉強会ではないけどここに残すことにした。

www.figma.com

感想

Over the past five years, I’ve seen firsthand how working in a collaborative digital space moves teams from a mindset of “my ideas” to “our ideas.” This requires a radical shift — a level of trust and transparency that many of us are still catching up to. In many ways, design is deeply personal, and opening up that work to others to build on and remix can feel like opening up a part of yourself. But that’s why this change is so important.

最近参加するデザインに対する考え方やデザインの根本みたいな話のときにもよく聞くけど、やっぱりデザインは個人でるすものではなくてチームで作り上げていくっていう意識なんだな、それが大切なんだな、と改めて感じた。

Like physical spaces, digital spaces help us connect to one another. Unlike physical spaces, digital spaces have no walls: by default they are non-hierarchical. Everyone is invited to brainstorm, build, and play together.

オンラインなら物理的な壁もなくて全員が同じ画面を見ながら同じフィールドに立ってブレインストーミングできるよねってことだけど、それも間違いない。大事。人の話を聞いているだけだとどうしても視聴者になりがちだけど、全員が手を動かして画面を見て参加するなら当事者意識も少なくとも従来よりは強くなれるはずだと思う。

Figma’s vision is to make design accessible to all. 〜中略〜 We hope Figma can support every role, in every part of the design process — from ideation to production, imagination to reality.

本当に近い将来どんどんそうなっていくと思うし、デザイナーはデザインツールが使いこなせることが重要なのではなくて、どうやってデザインを形にして独り相撲ではないものを世に送り出していくかをいかに考えられるかが大切になっていく（今もそう）だろうし、自分もその道をどんどん先へ進んで行きたいなと思った。

何がすごいって、やっぱり「これは絶対にいい！」って直感で感じたことを、新しいものを怖がるという”人間の性”も受け止めた上で突き進んでいけるパワーもすごいし、結局その信念がたった5年で実を結んで今ではなくてはならないツールになっているし、なんかもうすごいことだよねほんとにってとても感じた（語彙力の限界）。

おまけ

初めて記事を抜粋しながら感想まとめるなんてしたけど、すごく難しい。笑
なんなら全文に文脈や流れがあるから、抜粋しても結局前後の文脈がないと伝わらないよね…あれ？抜粋とは？？みたいな全然違う観点で頭を悩ませる回になりました。笑

でもこうして色んな人の考えていることに触れることって自分の中にどんどん新しい考え方が流れ込んできて、それが自分の軸みたいなものを作って行っている気がして、大切な儀式だなと感じました。終わり！

Figma主催のWebinarに参加してみた

えっ、Figmaが誰か招いてデザインシステムどうやって作るのみたいな話の会を主催するの？？無料だし雰囲気だけ感じに行こう…とびびり倒しながらもポチッと登録して参加してきました。

やっぱりネイティブさんが肩の力を抜いて「ぺらぺら〜」と話すと聞き取るのは難しい…3割分かったかなどうかな？という所感でしたがスライドから視覚的に読み取れる情報も割とあったので新鮮で楽しかったです。（こういうのもっと聞けるようになりたいと思って英語勉強欲も無事に再燃）

参加したウェビナーはこちら↓

figma.zoom.us

学んだこと（感じ取ったこと）

• コンポーネントをすごい数作っていて（1つのプロジェクトでも1000以上とか）、あ、コンポーネントってそういう感じなんだ…と驚愕
• 常にインスピレーションや新しいアイデアが浮かびやすいようにするために、チームビルディングやコミュニケーションを大切にしている
  →　同じテーマに対して20人弱？の人がそれぞれデザインを出して、お互いに見合って「うまい人がいればそのアイデアをもらえば良い話！」といっていて、スキルも経験もどんどん伸びそうな環境だなと思った
• 何かプロジェクトで困った時や、伸び悩んでいるチームメンバーがいたときに、それぞれのケースで誰がスペシャリストなのか？誰に相談すれば良いのか？みたいな情報を常に共有しているか誰かの頭に入っているかという仕組みがあるみたいで、それもとっても良いなと思った（どっちか聞き取れなかったけど私は前者がより効果的かなと個人的感想）
• スライドのデザインが型にハマってなくて洗練されてた（無駄な情報が削ぎ落とされていて、訴求したいんだろうなと思われる情報がバン！と目に入ってくる）
  →　IT業界じゃないプレゼンとかでよく見るイメージの情報がたっぷり詰め込まれたスライドとは全然違って新鮮だった
• 実は少し興味があったMicrosoftTeamsをごりごり活用してて「おおお…これがTeams…」ってなった
• 最後の締めで今後どうなっていくと思いますか（ふんわりしか聞き取れなかった）みたいな質問があったときに、パネラーの人が「まあコンポーネントに関しては近い将来、FigmaからReactの中にそのまま落とし込めるようになるでしょうね」って言ってて、Figmaの人かな？的な司会の人が「僕もそうなるように祈ってます」ははは、みたいな会話をしていて、すごい時代なったしすごい速さで時代進んでいくなって実感した
  →　からの、まだ駆け出してもない自分がそこに追いつくにはもっと頑張らないとな、とモチベーションも再燃した

感想

なんとなく言ってることは分かったけど、詳細とかの情報もきちんと聞き取れたら良かったなと少し歯がゆさを感じつつ、経験していた日常会話での英語ではなく、自分が関わっていこうとしている業界・フィールドでの会話を英語で聞けたのは良い経験になったなと感じた。（出現する単語とか多分毛色が全然違った）アメリカ英語にずっと慣れてきていたけど、司会の人がイギリス英語でぬるぬる話してて「おおお…」ってなった。笑

ライブデザイン試聴会（勉強会）に参加してきた

この会もめちゃくちゃ勉強になる会でした…ありがたや。約1時間半、ツモマーさんが有益な情報を喋り倒すかつ手も動かすみたいな内容で、振り返りや覚えておきたいことのまとめがほぼアーカイブ動画の文字起こしみたいになりました。。（全部頭に入ったら間違いなくレベル上がりそう）

参加したイベントはこちら↓ connpass.com

お話してくれた方↓
ツモマーさん（@tsumomah） twitter.com

学んだこと、ピックアップしておきたいこと

動画を見ながら押しポイントをひたすらメモ帳にピックアップする時点で2日かかってしまい、忘れる前にブログあげる！！を最優先事項としているので一旦整えず貼り付けることにしました。（言い訳）

アジェンダ

• 導入
  • UI/UXとは？
  • UI/UXデザイナーの仕事内容
  • 実際どんな需要があるのか
• ライブデザイン
  • フォームのデザイン
  • ステータスで変わるデザイン
• 質疑応答

UI/UXとは

UI - アクションを起こすと機械（インターフェース）が何かしらの反応を返してくれる機械のこと
UX - ユーザーの目的達成までの道のりなどの設計をすること

UI/UXをまとめて

アプリケーションの体験設計と画面設計をすることを指す
その中では「戦略」「要件」「構造」「骨格」「表装」というフェーズに分かれる

UI/UXデザイナーの仕事内容

UX5階層モデル（GoodPatchさんより）があるが、

• 表装　→　色、フォント、装飾など
• 骨格　→　ワイヤーフレーム
• 構造　→　ページにどんな要素が必要か（ここは何をするページなのか、など）
• 要件　→　機能の選定、カスタマージャーニーマップ（体験設定）、ペルソナ、制限事項
• 戦略　→　競合調査、要求整理（クライアント、ユーザーがどうしたいか）

戦略
リサーチ、いまどういう状態なのか？（参入したい市場がブルーオーシャンなのかレッドオーシャンなのか、など）レッドオーシャンなら相手に勝つためにどうしたら良いか、ブルーオーシャンなら圧倒的に勝ちにいくにはどうするか、などを考える

要件
どういうものを作れば良いんだっけ？が最終的にドキュメントとして言語化されている状態がベストなので、そのために色んな情報を集める

ex.) アプリを作る

• iOS？アンドロイド？両方？
• ユーザーってどういう人？（届ける先を想定してペルソナを作る）
• チームのメンバーって誰だ？（ステークホルダーこれで困った時はこの専門家に聞く、この責任は誰が持っている、など）デザイナー、ディレクター、エンジニアの他に作るサービスにおいて助けを求める専門家（医療系アプリならお医者さんなど）
  ※ステークホルダー：Webの制作現場において、クライアントや制作メンバーなどプロジェクトに関わる関係者全体のこと

UX領域について

戦略や要件というフェーズは経営者、マーケター、プランナーという人たちが元々はやっていてUXリサーチャーという人が調査に入っていた
今はデザイナーの領域がどんどん広がっているので、UXデザイナーという人でも調査したり経営層にヒアリングしたりしてビジネスモデルを作るようなプレイヤーも増えている

★5階層モデルの構造という段階でエンジニアとシステムについてどれくらい話を詰めたり蜜にコミュニケーションを取ったりできるか（関係性）が大事そう（感想）

具体的な仕事内容(UI/UX)

• リサーチ
• UXフレームワーク（カスタマージャーニーなどの設計）
• 改善（すでにある機能をより良くしていく）
• デザインシステム（コンポーネントの統一など）
• 仕様設計
• スタイリング

企業が求めるデザイナー

• 考えて作れる　→　ヒアリングやコミュニケーションから作るものを考える（お客さんに何を作ってあげたら良いんだろう？）
• デザイン＋αのスキル　→　マーケティング、ブランディング、マネジメント etc…
• 問題課題からアプローチできる　→　デザインの本質を理解している
• 何でもできるより「これが強い」
• ウォーターフォールではなくアジャイル
  →　ウォーターフォール：工程分割タイプ：最初の企画の段階で、開発対象の機能を全て決めてしまう
  →　アジャイル（素早い、機敏）：イテレーション（開発を小さな単位に分け、計画〜実装、テスト、リリースまでのサイクルを繰り返す）と呼ばれるサイクルを用いて開発を進める

自分で調べた参考↓

backlog.com

作れるより先のスキルが必要

今後、表装だけ作るデザイナーは求められない時代になっていく UI/UXとはシンプルに言えば画面を作る、ということだが一番重要なのは画面を作る前の「アイデア」や「仕様」

• さらに論理的に設計する必要が出てくる
• Noコードサービスの普及（表装だけならそのサービスで十分）
• 単価が安くなってきている
• コロナの影響で広告のカタチが変わる
• デザイナーのレベルの差が明白になる

ライブデザイン

• お問い合わせフォーム作成（個人向け）
• 必要な要素をメモ代わりに並べていく（お問い合わせ内容、名前、個人情報取り扱いなど）
• フォントサイズはブラウザで文字サイズは変更できるものの、小さすぎると見辛いし変えなきゃだめなのは優しくないので、「視認性」や「可読性」を考慮すると16pxくらいが妥当（Appleとかに推奨最小文字サイズある＝HIG要確認！）
  自分で調べて持ってきたやつ↓（あとで読もう）

note.com

• Nudgeが変更できる（8px）左上三本線からパフォーマンスでナッジ変更できる
  8の倍数は色んなデバイスは8の倍数で創られているものが多いので、割り切れる
• ヒューマンエラーが発生するのを避けるために、ツモマーさんは矢印キーで移動するか数字入力でサイズ指定するのが好き
• iconfyというプラグインを入れると、様々なアイコンが簡単に呼び出せる
• 作成したモジュールを一度複製、配置したあとにCmd+Dを押すと同じ間隔で複製できる（便利！！！！！）
• フォームのタイトルをプレースホルダーのみに頼るのは良くない
  →　入力してしまうと、なんの欄だったか確認する手段がない
• プレースホルダーは指示ではなく入力例を入れた方が、ユーザーにヒントを与えられる（名前は漢字なのか、スペースをあけるのか、電話番号にハイフンはつけるかどうか、など）
• コメント入力欄は4行くらいかな？と目処を付けたら実際に4行のテキストを置いて、ボックスの高さをあわせる
• 情報が多い場合は、セクションにタイトルをつけて情報のグループ化をするとわかりやすい
• お問い合わせフォームは名前などの基本情報が上なイメージだが、ユーザーは名前を入れたくてフォームを使用しているのではなくて、何かを問い合わせたくてフォームを利用しているので、問い合わせ入力欄が上にある方が優しい
• スマホのタッチエリアが44pxなので、Web用のDesignでも同じかそれ以上にする
  Apple推奨の最小文字ピクセルは14ピクセル、マージン上下15pxで44px
  →なのでボタンの高さは44px推奨（Apple自身も守ってないことがあるので、Appleが全て正しいわけではない）あくまでも目安で自由
• ボタンのラベルも「次へ」だと次何が起こるか分からないので、「入力内容を確認する」などアクションを教えてあげるとよい
• ツモまーさんはこまめにモジュールごとにグループ化してた
• 入力が完了するまでボタンを押せないようにする必要があって、そのデザインも合わせて作る
• 背景とテキストの色のコントラストの差が少ないと読み辛いので気を付ける（40代50代の男性に多い色弱の人などが特に見辛い）
• 入力エラーの場合の見た目もデザインが必要
  →　どこがエラーか教えてあげる装飾
  →　だめな例：入力内容にエラーがあります、を一番上に表示　→　パット見どこがエラーか分からない
  →　エラーの箇所の枠を赤くする＋コメントをする、など（特に、何が正解かを教えてあげるとなおよし「＠がないです」とか）
  まとめ：問い合わせフォームのデザインは、各フェーズ（入力前、入力完了、エラー時）のそれぞれデザインが必要
• Webデザイナーは役割によってはコーディングの知識が必要なところもあるし分かっていると嬉しい
• UIデザイナーの場合はコーディングというよりエンジニアリング面（仕様ってどうなってるんだっけ？）ということが考えられることが必要（システム的なところ）
• レスポンシブに対応するにあたってUIデザインで気を付けていること
  →　破綻しないかどうか（レイアウトがどちらでも崩れない、レイアウトがあまり変わらない/エンジニアの負担が少ない）
  →　フォームのタイトルをフォームの上に置くと、レスポンシブ対応にするために考えることが少ない、実装が楽
  →　なぜかというと、修正が入ったときに（フォームタイトル名が長くなるとか）レスポンシブ関係の悩みが減る、汎用性が高い耐久性が高い
  →　レスポンシブ対応時にPCデザインの見た目を活かせるように考える
• モバイルファーストではなくモバイルフレンドリー
• つもまーさんAvenir（フォント）使ってた（日本語はRoboto）
• 1万時間の法則
  1日8時間やって3年
  プロフェッショナルになるには3年かかると言われている
  その一方で飛び抜けて出来る人もいる→トライアンドエラーをどれだけしているか、必要な知識が早く身についてやりたい方向性が分かっていてそれだけをひたすら極めている人
• Cocoda、デイリーUIやって、UIデザインが身についてきたらその先には人間の行動心理学、認知工学とか必要になってくる→ヒューリスティックが足掛け
  紹介して頂いたNOTEがこれ↓

note.com

• ↑はいわゆるUIの画面を作るときのチェック項目
  サービスとかアプリのデザインはステータスによって変わる（その時に何を気をつければ良いのか）
• デザインに納得がいかないときツモマーさんはどうするか
  →　UI/UXにおいて同じようなデザインになることはあまり気にしない
  →　ブランディングまで入って来たときは同じになるのはよろしくない
  →　作る前に調査はするけど、もし作って似てしまった場合で、UIの場合はそんなに気にしないけど、ブランディングが関わる場合はテコ入れをする（このブランドの価値ってなんだろうを再度深堀り、なんで赤なんだ？青じゃだめなのか？）赤でしょうがなかったら赤でいくし、なんで同じに見えるかをチームメンバーで話して答えをだす（色んな人に相談する！）
• オリジナリティってもうこの世にないと思っているのであまり気にしない
  新しいデザインを作っても、ユーザーが使いにくければ意味がなく使いやすいものはもうある程度テンプレート化しているため
• XDはUIデザインをするとなるとSketchやFigmaより少し劣る
  コンポーネントを作る時など、Sketch＞Figma＞XD
  XDは元々プロトタイプツールで登場したからデザインはそんなに作り込めないけど、厳密には役割が違うからまあ仕方ない
  Sketchが良いけど使う人減って（たぶん思いから）
  Figmaはコラボレーション機能が強い
• UXミルクにはだいたい認知工学のネタが書いてある（人間の行動の話からそれをUIUXに落とし込む）

uxmilk.jp

• もっと攻めたい人はMidiumで色々みたり、ノーマングループというサイトがあってよく本とかブログで引用されている（一応情報は一番はやいはず）めっちゃいい！

www.nngroup.com

• Figmaでよく使う色をCreate color styleで右側から登録してた（Grayとか80とかみたいに名前の色とか透明度を名前につけてた）あとはPrimaryとかPreviewとかも名前つけてた
• 有料だとチームライブラリという機能が使えて、その登録情報を外に共有することもできる（コンポーネント一式）
• Primaryカラーって基本的には青、信号とかは緑、Googleでのリンクも青→その辺に合わせてアクションをするボタンは青に合わせている
  ・アクションボタン
  ・ファンクションボタン　→　設定を変えるだけとかはフランクに触れる枠だけのボタン
  という概念がある
• 色に関連してA11y　Color contrast checher　というプラグインがある
• 背景とのコントラスト比は4.5:1が標準→理想は７：１で結構パキッとして見える
  達成基準 1.4.3 を理解する | WCAG 2.0解説書
• 大きい見出し文字の場合は3.1：１でもOKといわれている
  自分で調べて持ってきたやつ↓（あとで読む）

note.com

• 姓と名を分けて入力するか一緒に入力するかどっちが良い？
  →　集めたいデータによるけど、分けたものの方が多い気がする
  →　サービスに応じて必要なものを集める（ヘタしたらあだ名でOKもある）

感想

デザイナー兼プランナーのツモマーさん（@tsumomah）がお問い合わせフォームをFigmaで作成していく作業を見ながらお話を伺うという内容でしたが、まずプロのデザイナーさんが作業している画面を見るという機会がありがたすぎて昇天。知らない機能や、機能の使いこなし方を見てまた昇天。その幸せな画面を見ながら耳から入ってくる情報もありがたすぎて昇天。みたいな感じでした。ありがとうございました！！

おまけ

ツモマーさんを真似して作ったお問い合わせフォームと新規登録フォーム↓