ライブデザイン試聴会（勉強会）に参加してきた
この会もめちゃくちゃ勉強になる会でした…ありがたや。約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)
企業が求めるデザイナー
- 考えて作れる → ヒアリングやコミュニケーションから作るものを考える（お客さんに何を作ってあげたら良いんだろう？）
- デザイン＋αのスキル → マーケティング、ブランディング、マネジメント etc…
- 問題課題からアプローチできる → デザインの本質を理解している
- 何でもできるより「これが強い」
- ウォーターフォールではなくアジャイル
→ ウォーターフォール：工程分割タイプ：最初の企画の段階で、開発対象の機能を全て決めてしまう
→ アジャイル（素早い、機敏）：イテレーション（開発を小さな単位に分け、計画〜実装、テスト、リリースまでのサイクルを繰り返す）と呼ばれるサイクルを用いて開発を進める
自分で調べた参考↓
作れるより先のスキルが必要
今後、表装だけ作るデザイナーは求められない時代になっていく UI/UXとはシンプルに言えば画面を作る、ということだが一番重要なのは画面を作る前の「アイデア」や「仕様」
- さらに論理的に設計する必要が出てくる
- Noコードサービスの普及（表装だけならそのサービスで十分）
- 単価が安くなってきている
- コロナの影響で広告のカタチが変わる
- デザイナーのレベルの差が明白になる
ライブデザイン
- お問い合わせフォーム作成（個人向け）
- 必要な要素をメモ代わりに並べていく（お問い合わせ内容、名前、個人情報取り扱いなど）
- フォントサイズはブラウザで文字サイズは変更できるものの、小さすぎると見辛いし変えなきゃだめなのは優しくないので、「視認性」や「可読性」を考慮すると16pxくらいが妥当（Appleとかに推奨最小文字サイズある＝HIG要確認！）
自分で調べて持ってきたやつ↓（あとで読もう）
- 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がこれ↓
- ↑はいわゆるUIの画面を作るときのチェック項目
サービスとかアプリのデザインはステータスによって変わる（その時に何を気をつければ良いのか） - デザインに納得がいかないときツモマーさんはどうするか
→ UI/UXにおいて同じようなデザインになることはあまり気にしない
→ ブランディングまで入って来たときは同じになるのはよろしくない
→ 作る前に調査はするけど、もし作って似てしまった場合で、UIの場合はそんなに気にしないけど、ブランディングが関わる場合はテコ入れをする（このブランドの価値ってなんだろうを再度深堀り、なんで赤なんだ？青じゃだめなのか？）赤でしょうがなかったら赤でいくし、なんで同じに見えるかをチームメンバーで話して答えをだす（色んな人に相談する！） - オリジナリティってもうこの世にないと思っているのであまり気にしない
新しいデザインを作っても、ユーザーが使いにくければ意味がなく使いやすいものはもうある程度テンプレート化しているため - XDはUIデザインをするとなるとSketchやFigmaより少し劣る
コンポーネントを作る時など、Sketch＞Figma＞XD
XDは元々プロトタイプツールで登場したからデザインはそんなに作り込めないけど、厳密には役割が違うからまあ仕方ない
Sketchが良いけど使う人減って（たぶん思いから）
Figmaはコラボレーション機能が強い - UXミルクにはだいたい認知工学のネタが書いてある（人間の行動の話からそれをUIUXに落とし込む）
- もっと攻めたい人はMidiumで色々みたり、ノーマングループというサイトがあってよく本とかブログで引用されている（一応情報は一番はやいはず）めっちゃいい！
- 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といわれている
自分で調べて持ってきたやつ↓（あとで読む）
- 姓と名を分けて入力するか一緒に入力するかどっちが良い？
→ 集めたいデータによるけど、分けたものの方が多い気がする
→ サービスに応じて必要なものを集める（ヘタしたらあだ名でOKもある）
感想
デザイナー兼プランナーのツモマーさん（@tsumomah）がお問い合わせフォームをFigmaで作成していく作業を見ながらお話を伺うという内容でしたが、まずプロのデザイナーさんが作業している画面を見るという機会がありがたすぎて昇天。知らない機能や、機能の使いこなし方を見てまた昇天。その幸せな画面を見ながら耳から入ってくる情報もありがたすぎて昇天。みたいな感じでした。ありがとうございました！！
おまけ
ツモマーさんを真似して作ったお問い合わせフォームと新規登録フォーム↓
