オンライン勉強会に参加してきた
こんにちは！ゆうりです。
最近何もかもをオンライン勉強会と一括に呼ぶことに違和感を覚え始めて、どのイベント（集まり）もめっちゃ勉強になるんだけどLT大会だったり、ワークショップだったり講演会的なものだったりするから、全部オンライン勉強会って表現するのも変だな〜でもどれにも当てはまらないような会ってなんて表現しよう？などと考えております。などとしょうもないことをぼやきながらこないだ参加したイベントの振り返りを残そうと思います。
登壇者
なるほど！ポイント
- お客さんからのヒアリング前、制作を始める前にリサーチをする → そうすると重要なキーワードやポイントが見えてくる
- お客さんとのすり合わせで使用するイメージボードを作る → 競合やトピック名でよくあるイメージ、ジャンル不問でピンときたものなど → お客さんと視覚的にイメージをすり合わせることができる（言葉だと難しい所もある）
- 最終的に複数案が必要な場合も、まずは1案完成させることが第一歩
- イラストをファーストビューなどに使用する場合はラフ段階で先方チェックを挟んだ方が良い → がっつり完成させた後に、イメージと違いましたのやり直しは辛い
- イラストを取り入れたビューを提案したいならラフで実際に雰囲気を見せた方がお客さんも頷きやすい（イラストを伝わることの良さが伝わりやすい）
- 写真の著作権について → 毎回サイトで確認することはクセづけた方が良い → その上で、自分の手元でトンマナとか加工するとデザイナーに帰属する場合が多いらしい → 再配布がだめ（Unsplashもだめらしい）とかあるので、その場合はそもそもお客さんに納品しちゃだめ
- ボタンホバーでボタンがちょっと回転する表現をプロトタイプでできる
- イラストを使用する場合はiPadで描いた手書きのものをイラレでトレースすることが多い
- ファーストビューに「ターゲットはこういう問題意識あるだろうな」のフレーズを入れておくと共感して読み進めてもらいやすい
- イラストだけ潔く外部に発注するのも普通にあり（その場合はラフやイメージまで先方とすり合わせておく）
- 色に引っ張られてしまうのでLPでもグラフィックでもやっぱり最初はモノクロで作るのが良い
- キャッチコピーの練習方法 → Twitterやポスターなどをたくさん見て綺麗に短く表現するレパートリーを増やす
- プロトタイプツールで配布されているKitのアイコンを納品物に使って良いか → 商用利用OK・クレジットなし、であるかを確認する必要があるので癖付ける（基本はOKなはず）
感想
まるみさんのイラレさばきが早すぎてすごかったしツモマーさんのぼやきTipsがめちゃくちゃためになりすぎるし、2人ともさっといけてるファーストビューしあげるし、ふみさんが所々で絶妙に解説や深堀りの発言を挟んでくださるおかげでものすごい分かりやすかったりと、いつも通り感動したりありがたみが溢れる会でした。（ありがとうございました！）
おまけ
- ツモマーさんがFigmaでこの図形作れるよ！と教えてくれたのと（図形の名前は不明）
- プロトタイプツールでホバーエフェクトの表現やってみようと思ったのと
- ボタンにホバーしたときにちょっと回転すると可愛いと聞いて
たしかに！となったのでやってみた
先週の勉強会で聞いたTipsで作ってみた😌かわいいんだが〜😌🧡Figmaだけでこれ全部表現できるのすごいな〜 pic.twitter.com/QO7R40Nm68
— ゆうり/yunico🍩デザイナー (@yuuri_webDesign) 2021年3月14日
（短い動画でもYoutubeとかじゃないとアップロードできないらしい。。）
Webデザインに関する読書：なるほどデザイン
2ヶ月ぶり！またブログに帰ってこれてよかった！早いものでデザイナーとして一歩を踏み出してから2ヶ月が過ぎました。入社後しばらくは退勤しても休日でも「これは今！！！今この瞬間にやっておきたい！！！」という快楽に身を任せっぱなしでオンオフはまるで皆無でしたが、最近ようやく退勤後や休日に自己学習に時間を割くメンタルになるタイミングが出て来たので帰ってきました。（ただいまー！）これでここからは違う角度からもデザイナーとしての腕を磨ける…これもこれで楽しみで震える…
忘れないうちに読書メモ！
例にもれず気にしいな性格が「上から目線じゃないかな…」と不安がっておりますが、もしそう受け取れたとしてもそのつもりはまったくないので仏の心で読んでくださいと先にスライディングしながら土下座しておきます。
ざっくり感想
Webデザイン関連にめちゃくちゃ活きるお話もあったし、アイキャッチとかバナーとかビジュアルの制作にもめちゃくちゃ活きるお話もあったし、そもそもデザイン全般としてめちゃくちゃ勉強になる…なんだこれ…という内容だった。既にどこかで知識として得ていてなんとなく実践していたようなことも、理由、仕組み、図説と懇切丁寧に解説されているおかげで、なぜそうすることが大切なのか、なぜそうすると効果的なのか、などがとても明確に自分の中で言語化されて落とし込むことができた。
内容のボリュームは、デザインのフローにおける各フェーズの要点解説、配色・タイポグラフィ（フォント）・写真・といったような、それぞれの要素で本が一冊二冊だせるようなトピックの集合体で、それぞれ分かりやすく要点を絞っていてしかも図説つきという神コンテンツだったので私の「保存版デザイン辞典（心構え付き）」に仲間入り決定！（８８８８）
デザインってどんなことを考えて進めるものなの？に対して全体像を見渡せるような構成で、評判通りデザイナー・デザインに興味がある非デザイナーなど、いい意味でターゲットを選ばない万能書だと思う。
内容の構成
- 誰に向けたデザインなのかを最初にしっかり考える大切さ （ターゲットによって同じ題材でも見せ方は全く違うということ）
- デザイナーがデザインをする上で気を付けること、心構え
- 常に優先度を意識して天秤にかけ、「伝えたい量」と「伝わる量」バランスを調整する
- 主役をきちんと目立たせるということ
- デザインに対するキャラ付けの大切さ（特徴を抑える？押し出す？）
- 題材からイメージを広げてデザインに還元する（連想したものをデザインと紐付ける）
- 言葉と絵では伝え方、伝わり方が違うのでどちらがふさわしいのかよく考える
- 神は細部に宿るけど、細部をいじるのは最後まで我慢
- デザインをする上で大切な２つの愛（プロダクトに対して・ユーザーに対して）
- デザインを構成する要素について解説
- 文字や言葉
- 色
- 写真
- グラフやチャート
これからやってみよう！と思ったこと
- デザインを始める前に、改めて「どんな人に」「何を」「いつ・どこで」「なぜ」伝えたいのか整理するように心がける → その結果によって表現の方法を考える（構成・書体・文字サイズなど）
- 自分の中でデザインを通して達成したいことが明確になっているか確かめる → 頭の中を図解したり、手書きでラフスケッチしてみる（→装飾などの余分な要素が削ぎ落とされるので、構成だけに集中して見極めることができる）
- 全体が概ね完成したあとに細部の足し算・引き算を調整する
- 何を伝えたいのか常に自問自答を繰り返して、優先順位を間違えないようにする
- どれが主役（メインコンテンツ）がきちんとメインとして分かるか、遠目からも俯瞰してみる
- 書体を声色に例えてみたり、色を年代（時代）に例えたりして、どんなイメージ（キャラ）になるのか想像してみる
- 題材から言葉やイメージをブレストしてたくさん連想し、そこから表現のヒントを得る練習をする
- 表現や説明について言語・非言語どちらが伝わりやすいのか検討して、見た目のバランスも整える
- 最初は荒く見る→最後は細部を見るという流れを習慣づける
- デザインを通して伝える題材（プロダクト・サービスなど）への愛を深める → 対象を深く理解し、いいところを見つけ出していちばんふさわしい姿（表現方法）にしたいという気持ち
- デザインを通して題材を届ける相手（ユーザー）への愛を深める → 届けたい相手になりきったつもりで興味や気分を想像して寄り添うアウトプットを心がける
まとめ
他にも実際にどういう表現にするのかなどのテクニックや知識も書ききれないほど紹介されていて本当に勉強になった。読んで知識として吸収できるのが理想だけど、私は一度で全部は無理なタイプなので、おそらく作りたいものと対面するたびにこの本の該当するところを開いて参考にしながら実践していくのが一番自分にあったインプット＆アウトプットだろうなあと感じた。
Kindleで購入したけど物理本ほしいな〜〜〜でもこういう辞書的存在の本が物理で増えると全部持ち歩くのは無理だもんな〜〜〜どうしよう。。という葛藤とともに今回は締めようと思います！
コントラストについて少し勉強してみた
何か調べたり勉強したりしていると、「こうだよ！」という情報に対してどこまでも（興味本位で）ソースを深堀りしていくのが良くも悪くも癖で、今回も色んな情報に出会ったのでまとめておく！
結論
テキスト及び文字画像の視覚的提示に、少なくとも 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 のコントラスト比
中度の弱い視力、先天的又は後天的な色覚異常、もしくは典型的な加齢に伴うコントラスト感度の衰えに起因する、コントラスト感度の低下を考慮するための推奨最低限レベル
この数値の根拠（計算式）とかも掲載されていたけど、今回は一旦ここまで！（頭疲れた！）他にも、視覚障害のある人が使う画面拡大ソフトのような支援技術を使う場合、といった話も次のページにあったので、アクセシビリティについてもっと深ぼるぞおおおおのときに、また読んでみようと思う。
補色について
先日、コントラスト比を考えた配色についての参考記事とともにアドバイスも頂いたので（ありがとうございます！）、ここで一緒に触れておこうと思います。
補色とは色相環で正反対に位置する関係の色の組合せ（コントラストの強い配色）のこと
補色の3つの効果
- 物理補色
補色同士を混色すると無彩色になる（理論上は黒になるが、実際には濁った灰色になる） 心理補色
補色の一方の色をしばらく見つめた後、白い紙などに目を移すと、残像として補色のもう一方の色が現れること（下記の例はたしかに…！！！理由あったんだ！！！となりすぎて感動）たとえば、外科手術を行う医師は、血液の赤を長時間見つめるため、緑色の残像に悩まされてきました。視線を動かすと残像も一緒に動くため、手術中の医師にとって大きなストレスとなるからです。 1925年、米国の化学系企業デュポンは、補色残像を和らげる効果がある色として、薄い緑色の塗料を提案しました。現在では、外科手術室の内装だけでなく、手術着にも薄い緑色が採用されています。
補色対比
補色の関係にある色どうしを並べて置くと、より彩度が高くなったように色のあざやかさが強調される
参考にした記事内で紹介されていた補色の代表的な組み合わせも、よく見る組み合わせで「ああなるほどちゃんとこういう理由があるのか…見やすいなとはぼんやり思っていたけど、理に適った配色だったんだ…」と目からウロコ。
アクセシビリティを保持しつつ、感覚的に訴求したいイメージがセンス良く伝わる配色もどんどんできるようになって行きたいなあ…とひしひし感じながら今回はこのあたりで終わり！
ヒューリスティック評価というものが気になった
先日のデザイン勉強会でちらっと紹介されたヒューリスティック評価というものが気になっていたものの、なかなか時間をとって読み込めていなかったので、今回ようやく自分なりに備忘録としてまとめておこうと思います。
ヒューリスティック評価とは？
- 自分の作ったデザインが、ユーザーにとって使いやすいかどうかを客観的に評価するもの
- ヒューリスティック評価はユーザビリティインスペクション法の1つ
- ユーザビリティの専門家が対象となる機器やシステムを見て、その洞察に基づいてUI上の問題を明らかにする発見する手法
→ つまり、経験則（ヒューリスティックス）に基づいてユーザビリティを評価し、UI上の問題を発見する手法ということ
→ ユーザビリティの専門家がUIに関する問題点を抽出し、それに対する改善案を提案する - 経験則に基づいて評価するので、実際にプロトタイプを操作しながら評価を行う
- ヒューリスティックとして有名なものの1つにヤコブ・ニールセンのユーザビリティ10原則がある
今回はこれに沿って、問題点を抽出→改善していく（見つけた改善点を記録して、デザインに反映していく！）
★一部、U-Siteさんから引用
ヤコブ・ニールセンのユーザビリティ10原則
- システムステータスの認知
システムが今どんな状態かユーザーに知らせる
ex) プログレスインジケータなどを設置して視覚的にユーザーに知らせるなど
インジケータってなんだ、から調べてまた読みたい記事が増えた(^q^)
goodpatch.com - システムと実世界の調和
開発現場で使っているいわゆる専門用語を使ってしまうと、ユーザーには分からない
ex) バリデーション→エラー表示、マージン→間隔 - ユーザー制御と自由
ユーザーの逃げ道（やり直しの道）を作る
ex) Undo、Redo、Cancel - 一貫性と標準化
一貫性のあるデザインにする
ex) 様々なボタンや色使いが混在していると、ユーザーは混乱してしまい学習コストが上がる - エラー防止
エラー表示が起こるとユーザーは注意されているような気持ちになるので、なるべくエラー表示をしないデザインにする
ex) 英数字のみ入力可能なフォームならそもそも日本語キーボードを表示しない、など - 想起ではなく認識
ユーザーがその表現を見た時に認識（簡単に思い出せる）できるようなデザインにする
ex) この言葉どこかで見たことあるけどなんだっけ…→この言葉はどこでもよく見る！分かる！ - 柔軟性と効率性
頻繁なアクションにはショートカットキーを設定する - 美的でシンプルなデザイン
過度な情報や装飾を削ぎ落として、必要最低限の表現に留める（必要な情報を際立たせるため） - ユーザーがエラーを認識、診断、回復することをサポート
単純に「エラーだよ！」と知らせるだけではなく、問題を正確に認識してもらって改善してもらうために、明確にエラーの内容と解決策を提示するように意識する - ヘルプとドキュメント
ヘルプとドキュメントを、ユーザーがわかりやすい（アクセスしやすい）位置に提示する＋内容もユーザーにわかりやすいか気をつける
感想
普段からUIでもWebデザインでもユーザビリティ大事！って自分でも思っているけど、じゃあ具体的にどうしたら良いのか？何に気を付けたら良いのか？というより具体的な視点が増えて良かった。これあとで読も！のブクマがすごい溜まってて消化したくて少しずつ読むけど、読む度に新しいこと調べてまた記事が増えていくという無限ループ(^q^)
情報の整理術とか組織の仕組み的・マインド的育て方とか、ありがたい話を聞いてきた
今回もとっても濃厚で、え、これ無料ですか…？という盛り沢山な内容でした。今回の内容としてはデザインの技術についてというよりは、どちらかというと考え方やマインドが主軸の会だった気がしていて、自分がデザイナーとして、かつ私を受け入れてくれた組織の一員として、成長するために間違いなく必要な内容だったなと思います。（ありがとうございました！）
今回参加したイベントはこちら↓ wcan.jp
そしてすごいボリュームになりそうなので今回は目次↓
- Session1: WEBデザインにも戦略を！自社の魅力を伝える思考法を学ぶ
- Session2: 地方制作会社が実践してきた組織としての成長方法
- Session3: ピンチをチャンスにする！withコロナ時代に生み出される“デザイン”
- MainSession: 情報過多時代だから身に付けたい知識を養う整理術
- パネルディスカッション：withコロナ禍で変わったWeb業界の仕事と働き方
- まとめ
Session1: WEBデザインにも戦略を！自社の魅力を伝える思考法を学ぶ
発表された方：デザインコンサルタント/株式会社ワイルドシンク 松本 恵さん
学んだこと
- AB3Cフレームワークという思考法
- 競合他社・ユーザー（の求めている価値）・自社の資源や強み、という3視点の関係を整理し、その中で自社（サービス）が選ばれる理由（差別的優位点）を探すために使う
「コーヒーを買いたいユーザー」をターゲットにすると一言に言っても求める価値は多種多様
↓
求める価値でユーザーを分類する
- 苦いコーヒーが買いたい
- 香りが特徴的なコーヒーが買いたい
- 個人で楽しみたいので、酸化しないように個包装がいい
- 大人数で一気に消費するのでまとめ売りでお得に買い求めたい
などなど
★実は多種多様な価値（希望）をミックスして商品を求めているケースが多い
↓
自社の強みが生きる、相性の良いユーザーを絞り込んで本当の見込み客（ターゲット）に絞り込む
- 自社は苦味が特徴のコーヒーを取り扱っていて、上品な個包装で提供している商品が主力、など
- 競合とは「ターゲットユーザーが購入するときに検討している範囲に入ってくるもの」
- その競合と比べて、自社を選んでもらえる「好ましい違い」が他社に対する差別的優位点となる
- AB3Cフレームワークで見つけ出した【ユーザーの求めるベネフィット ✕ 自社の差別的優位点】をデザインに落とし込む
- ↑これがいわゆる戦略メッセージ
- 自社の戦略メッセージを初見でユーザーに伝える必要があるので、キービジュアルに落とし込む（ユーザーはいくつもサイトを巡るので、第一印象で「自分の求めている商品とは違う」と感じればすぐに次のサイトへ移ってしまう）
- ユーザーはキービジュアルを見て目的のものを絞り込んでいく
- 戦略がないままWEBサイトをデザインしても、成果がでない
- まずはユーザーを掘り下げて、自社が選ばれる理由を導き出し、そこにどう訴求するかという戦略を立てていけばデザインで何を伝えれば良いのか迷わない
- サブベネフィット（ユーザーが主に求めている価値に付随する別の希望）を定めるとき
他方角から定められる、統計的にみる、「業界で求められている価値」に対して「自社の特徴から考えて活かせるポイント」に定めている - 企業や経営者の価値観をAB3Cに反映することを意識してやっている（それが本来の戦略になり得る）
- ターゲットが求めている価値をどうやって抽出するのか
- リピーターやユーザーにアンケート
- 調査分析も大事 → 市場調査も反映する
- 同じ業界の人に話を聞く（競合他社）
- AB3Cは今すでに抱えているユーザーの新たな（別の）要望を持っているか探っていけるし、新しい顧客層も探っていける
感想
顧客のゴールを達成する手助けをしたい！といつも思っているけど、具体的にどうするか、どうやって手助けしていくのかがとても明確なイメージになった。ただオシャレなデザインができるだけではなくて、こういう思考整理や戦略からブランディングに携わって、それを形にするフェーズとしてのWebデザインも自分できる、みたいなデザイナーにずっとなりたいと思っているけど、この話を聞いて「早く現場でやりたい！！！！」のうずうずがすごかった。
Session2: 地方制作会社が実践してきた組織としての成長方法
発表された方：GrowGroup株式会社 小野 隆士さん
学んだこと
- 社員19名で年間366本のプロジェクトがあり、受注から納品までワンストップで提供していくためのWEB制作の仕組み
- Backlogを使用したプロジェクト管理
受注タイミングでタスク構成、修正についてもタスク化されて連動しているTypetalkで通知がくる
特定のメールアドレス宛に顧客から修正依頼が来ると、自動的にタスク追加される（すご！） - ある程度定型化された作業はテンプレートに落とし込むことで、本当に必要な作業（品質向上など）に割ける時間を多くする
- 品質を高める仕組み
- 企画キックオフの時点で、各職種（エンジニア、デザイナー、ディレクターなど）で仕様の抜け漏れチェック
- デザイン方針定義書などでデザインの方向性をすり合わせ
- コーディング完了時点でデザイナーチェック
- WP全行程完了時点で全ページに渡るテストデバッグ
- 納品チェックシートで納品時の抜け漏れチェック
- 会社に知識を蓄積していく仕組み
- 工程間のコミュニケーションの仕組み
- 委員会制度により、各業務工程の改善を図る
- 営業・ディレクター・広告運用委員会：営業工程の改善
- デザイン委員会：デザイン工程の改善
- コーディング委員会：コーディング工程の改善
- 業務改善委員会：工程を横断した改善
- 制度化・タスク中心に業務を行うことにより顕在化した課題
- 自分の担当タスク以外に目が向きづらくなる
- 会社全体の方向性が見えづらくなる
- 忙しくなると、タスク以外をこなすゆとりがなくなる
- その課題への対策
感想
前職のときも、いつも遅くまで残業している同僚を見ていつも早く帰してあげたいなと思っていて、こういう必要に応じたテンプレートを浸透させて繰り返し作業をもっと効率的にできるビジョンは浮かんで色々やってみてたけど、なかなかやっぱり1人では難しいなと感じていたので、組織としてうまく機能しているのは純粋にすごい！良いな！ってなった。あの人も遅くまで残業しているから私も…みたいな身を削って差し出し合うよりも、削れる所は削って、早く家に帰って疲れを取って、マインドも整えてパフォーマンスをあげて顧客に還元していくのが理想だと思うし、単純に私はそういう社会で働きたい。笑 だからたった一人の声だとしても、改善点を探し続けて考え続けることは続けていこうと思う。
Session3: ピンチをチャンスにする！withコロナ時代に生み出される“デザイン”
発表された方：株式会社エイチームライフスタイル 章 瑠希さん
学んだこと
- 雑談の中から生み出される社員間の関係性であったりクリエイティブのきっかけが、コロナによるリモートワークで希薄化するかもしれないという懸念
↓
課題をまとめると：空間を共有することで無意識的に行えていた受動的かつ自然発生的な「企業文化の醸成・継承」が、リモートワークによる空間の断絶によって個々人の能動的な行動や意識に依存してしまっている
↓
オンラインで様々イベントを実施 - 大規模なLT大会や社内ハッカソンなど
- 制約の中でこそ、クリエイティビティは発揮される
- 今を深刻に捉えすぎず、未来に真剣になる
- オンラインだからこそ従来よりも実現できること
感想
今の状況を嘆くのではなくて、従来から丸っきり変わってしまった今の状況だからこそできること、活かせることを前向きに見つけて、そこを土台に発展を止めない姿勢が会社の文化としても一人一人の社員の方としても素敵だなと思った。チームを横断したオンラインハッカソンや、有志がたくさん登壇する社内LT大会はオンラインだからこそやりやすいというか、利点もあっただろうし、コロナで世界が変わったから、その変化についていくだけでなく自分たちでも新しいものを作り出そう！というクリエイティブな心を持ち続けたいなと思った。★Discordのボイスチャットルームでみんなと繋がっているのは、雑談もしやすくて良いなと思ったのと、生活音が聞こえないように基本的にはマイクミュートっていうのも小さな工夫だけど気持ちよく働けるなと思った。
MainSession: 情報過多時代だから身に付けたい知識を養う整理術
発表された方：長谷川 恭久さん
学んだこと
1時間のメインセッションということもあったけど、知らない知識や考え方がお話の間ずっと芋づる式にどんどん溢れてきて、これもまた文字起こしみたいになってしまったんだけど、追いつけなくて拾いこぼしがたくさんあって悔しい…でも少しでも自分のものにするためにとにかく掴めたものを箇条書き↓
- miroの画面、みんなの名前つきのカーソルが動いててリアルタイム感すごい！
- ノーマンニールセンがUXデザイナーなにしてるの？みたいな調査を発表したりしてる（ノーマンニールセンほんとどこの勉強会でも話に出てくるな…読もう）
- 時代に併せてデザインも変わっていく（フラットデザインからスキューモフィック、そして3Dなど）
それに併せて開発環境が変わっていく
→ 今いかにソフトが使いこなせるかではなく、いかにその変化にキャッチアップしていくか（ソフトも機能もデザインも感性も）が大切と思った - 変化が早いからこそ、学校・セミナー・書籍での情報収集では追いつけない
↓
職域を超えたコミュニケーションはますます重要
課題の複雑姓がますこそで知るべきことも増えていく
時が経てば変化することもある（トレンドや市場など） - マインドセット（捉え方・考え方）＋ワークフロー（ツール・手段）が大切
- 知識とは？
自分に必要な情報を引き出す力
組み合わせて繋げて新しいアイデアを生む力
次に学ぶことを探し出す力（状況も知識も人それぞれなので、結局自分で見つけなければならない） - クリエイティブは今まで積み上げてきたものを繋げて新しいものを生み出していくこと
- 情報と知識は違う！（前述の通り）
- 参加者のいろんな考え方（思考整理）やデザインに落とし込むまでの進め方が見られて刺激になった
- 自分がどういうタイプの課題解決方法、情報収集なのか、ということが知ることもまず大切
- 新しいツールだから良いわけではなく手に馴染む、用途に合っている、自分のタイプに合うようなツールを使って向き合うことが大切
- 後で読むをやりまくるけど読まないから、情報は集めているけど知識になっていないという状況
- 自分の情報をきちんと知識に変換することを続けていくことで、新しいものをどんどん作れる
- 自分の手に馴染む、感覚に合うツールを選ばないと続かない
感想
メモを取るとかっていうよりもとにかくmiroで作られたスライドっていうのかな？資料が秀逸すぎて耳から入ってくる情報もあるんだけど視覚的に入ってくる情報にも頭が忙しくてメモを取る暇がなかったな…すごく濃厚な1時間でした。知らないツールや試みも次々画面を見せて頂いたり共有して頂いたり、とにかく本当に勉強になりすぎた！！自分の中にある情報を知識に変換していく作業が本当に大切で、それは一朝一夕にできるものではなく長い時間をかけて積み上げていくんだとひしひしと感じた。情報を拾ってきて、「あとで読もう」と貯めることはできても、貯めたものを読んで「情報を得る」ことはできても、それを自分の頭や手を介して使いこなせないと「知識」にはならない。本当にそうだと思った。（積ん読とツンデミー早く消化しなきゃ…）自分に馴染む方法や手に馴染むツールでしっかり知識として転々とした情報を紐付けていくことをもっとやっていきたい！上手く表現できないけど本当に大事だと思う！本当に！（知ってるのとそれができるのとでは全然フィールドが違うし、そこから新しいものを生み出せて一歩目な気がする！たしかに！！！）
パネルディスカッション：withコロナ禍で変わったWeb業界の仕事と働き方
コロナ禍でリモートワークを取り入れたり、ハイブリッド出社を試してみたり、新卒の育て方を試行錯誤したり、会社によって様々な対応をしていることが興味深かった。個人的にリゾート地でのワーケーションはパフォーマンスあがりそうだなと感じた（自分が行きたいだけかもしれない笑）
まとめ
ひたすら自分の所属している組織に向き合い続けることも大切だと思うけど、私はやっぱり外の世界も見に行って知ってどんどん自分の知見や世界やアイデアを広げて、そこで知ったことを自分のチームに還元していきたいなとふと思った。せっかく仕事をするならどんどん成長してやりがいも感じて行きたいし、その心地よさを仲間と共有して日々切磋琢磨できたら良いなととっても思う。そして自分のチームでのノウハウを外に発信して、それを知ったどこかが新しい何かを作り出して、それをまた自分たちも取り入れて…そういうサイクルは根本的には資本主義だと気持ちの障壁も少なからずあるだろうし難しいのかもしれないけど、その一方でそうしていこうとする風潮も十分にあると感じていて、まとまらないけど、そこに参加して世の中を盛り上げていきたい！
今回は考えるにフォーカスしたトピックだったからか分からないけど、自分の意見や考え方というフィールドの脳がすごく稼働した気がする。こういう思考整理や自分の意見とは？考え方とは？みたいなことを理解していくこともちょこちょこやっていきたい。
UI/UXについてあれこれ話すトークセッションを聞いてきた
今回もとっっってもためになった。今回はデザインの技術やトレンドがどうこうというよりも、デザイナーの本質とか求められる役割だとか、UIデザイナーUXデザイナーって本来こういうものだよね、これからはもっとこうなっていくよね、みたいなお話が聞けて本当に興味深かった。興味しかなかった。深い。（毎度感じる語彙力の限界）
参加したイベントはこちら↓
パネラーさんの自己紹介
ニッパーさん
ペアーズを作っているエウレカで働いている
会社は世界中のマッチングアプリを提供している会社と横串で繋がっている（そういうグループ？合同会社？みたいなところに参画している）
エウレカのミッションは
人生に「あってよかった」と思ってもらえるものを作ること
宇野さん
クックパッド 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では文字数が足りないから、勉強会ではないけどここに残すことにした。
感想
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年で実を結んで今ではなくてはならないツールになっているし、なんかもうすごいことだよねほんとにってとても感じた（語彙力の限界）。
おまけ
初めて記事を抜粋しながら感想まとめるなんてしたけど、すごく難しい。笑
なんなら全文に文脈や流れがあるから、抜粋しても結局前後の文脈がないと伝わらないよね…あれ？抜粋とは？？みたいな全然違う観点で頭を悩ませる回になりました。笑
でもこうして色んな人の考えていることに触れることって自分の中にどんどん新しい考え方が流れ込んできて、それが自分の軸みたいなものを作って行っている気がして、大切な儀式だなと感じました。終わり！
