こんにちは、技術広報のyayawowoです。
突然ですが、デザイナーの皆さんはデザインの知識をどのように学ばれていますでしょうか？
- スクール（大学、専門など）
- 会社、仕事
- WEB、オンライン（Udemyなど）
など、様々あるかと思います。
とはいえ、日々変わりゆくデザインのトレンドをキャッチアップしていくのは時間と労力が必要ですよね。
そんな方に必見！
弊社にて定期的に開催している、デザイナーによるデザイナーの為のデザインLT大会・・・
「UI/UXデザイナーLT会」にて発表されたデザインTipsをまとめましたので、ご紹介させていただきます！
記念すべき第一回目のまとめ記事は以下をご確認ください！
・【UI/UXデザイナーLT会】を開催しました【登壇者15名御礼】 - RAKUS Developers Blog | ラクス エンジニアブログ
目次
- 目次
- デザイナーとなっておもったこと
- UI/UXデザイナーになるには
- UI/UXデザイナーになるには (学習編)
- 〇〇デザイナーの違い
- ラジオボタンと初期値と必須マークの考察
- 設計業務チャレンジ
- 共創によるサービス創出プロセスについて（デザイン思考をベースに）
- サービス開発のUXデザインでひと手間加えた話
- 「デザインは反復である」ということをメンバーに理解してもらっておこう
- ノンデザイナーズデザイントーク
- 営業資料におけるデザインの重要性
- デザインシステムとは 引き出しを設計することである
- ぼくのかんがえたさいきょうの地図検索 UI （特許出願中）
- プログラマが最低限抑えておきたいUI知識３選
- 取扱説明書制作のプロがkintoneの導入ガイドブックをガチで作ってみた
- Scalebaseのデザインシステムの取り組み
- 実践的OOUIデータモデリング
- ウェブアクセシビリティについて
- 最近のCSSで作るテーブルレイアウト
- Homeってなんですの？
- UI/UXデザイナー、Webデザイナー募集中
- 終わりに
デザイナーとなっておもったこと
発表者：kimukeiさん
speakerdeck.com
デザイナーという職業柄から細かいことを気にしすぎ、その中でも良いデザインと思った主観な視点を紹介いただきました！
例えば、バレンタインや受験時に発売されるお菓子、アイスのパッケージは既存のデザインを活かしつつ、受け取る側のことを考えた新たなデザインの価値をユーザに提供できているといった点です。
◆発表内容のポイント
「よいデザイン」とは何か？
・サービス、製品に関わらずそれを見たり、使ったりするユーザが心地よく感じるデザインを提供していくこと
・考えさせないUI
→利用者が当たり前のように使える設計
・おもてなしのUX
→利用された際に未来のアクションを提示
・サービスデザイン
→顧客が使いやすいようにデザインする取り組み
最後におすすめの書籍を6冊ご紹介いただいているので、発表資料を是非ご確認ください！
UI/UXデザイナーになるには
発表者：kimukeiさん
speakerdeck.com
元々Webデザイナーだった経験から、UI/UXデザイナーになるためのノウハウをご紹介していただきました。
今回は「ユーザファースト」に特化してお話しいただいております！
◆発表内容のポイント
UI/UXデザイナーになるには
・ユーザーが求めていること、現状を正しく把握する必要
・ユーザーの声を拾い上げていくことが重要
→UI/UXデザイナーはユーザーの代弁者
・未来を見据えたUI/UX設計
→ユーザーファーストを意識する
UI/UXデザイナーになるには (学習編)
発表者：kimukeiさん
speakerdeck.com
UI/UXデザイナーになるにはの第二弾となる発表です。
1つ前の「ユーザファースト」に続き、今回は「学習」に特化し、おすすめの書籍を15冊ご紹介いただきました！
◆発表内容のポイント
UI/UXデザイナーの学習 おすすめ書籍 15選
１． ノンデザイナーでもわかるUX+理論で作るWebデザイン
２． UI/UXデザインの原則
３． SF映画で学ぶインターフェースデザイン
４． UI GRAPHICS
５． デザイナーのためのプロトタイピング入門
６． ほんとに使える「ユーザビリティ」
７． UIデザイン みんなで考え、カイゼンする。
８． インタフェースデザインの心理学
９． UXライティングの教科書 ザ・マイクロコピー
１０．UXデザインの教科書
１１．UXデザインの法則
１２．はじめてのUXリサーチ
１３．行動を変えるデザイン
１４．「ついやってしまう」体験の作り方
１５．「ユーザーフレンドリー」全史
〇〇デザイナーの違い
発表者：junyaonodaさん
speakerdeck.com
いつの間にか増えた○○デザインの種類が多すぎる…という思いから、ざっくりと種類と仕事の違いについて紹介いただきました！
発表者から伝えたかったことは、以下の通り。
◆発表内容のポイント
事業会社のBtoB SaaSのUIデザイナーになって感じた5つのこと
１．エンジニアさんが沢山いる
２．担当領域の業務知識の理解が必要
３．顧客の声が直に聞ける
４．様々な部署の人と協力しながら仕事ができる
５．プロダクトの成長にやりがいを感じる
ラジオボタンと初期値と必須マークの考察
発表者：junyaonodaさん
speakerdeck.com
入力フォームのラジオボタンには、「必須マーク」は必要なのか？
という疑問から発表者が考察を行いました。
発表者としての結論に行きつくため、ユーザビリティの専門家であるヤコブ・ニールセン氏の意見や、優しいチームメンバー相談した経緯もとても参考になります。
◆発表内容のポイント
結論
・初期値の設定有無よりも、まずは大前提不可逆なシステムにしないこと
・初期値あり
→システム上で、現在の状態から何かを変化させる機能を持ったラジオボタンは初期値を指定しておく
・初期値なし
→アンケートのようなユーザーが選択肢を単純に選択するだけのものは初期値が入ってなくて良い
noteにも内容がまとめられていますので、是非ご確認ください！
note.com
設計業務チャレンジ
発表者：junyaonodaさん
speakerdeck.com
課題 ・・・デザイナーがサービス開発の上流工程から参画は"これから"
ありたい姿・・・プロダクトの成長やUX向上に貢献
上記のような背景から、設計業務へチャレンジした取り組みを発表いただきました！
取組結果としては、目標件数を達成し、効率的&効果的に進めることはできましたが、反省すべき点も多々あったとのことです。
それを踏まえて…
◆発表内容のポイント
設計をやってみての気づき
・担当プロダクトの理解が深まった
・他のプロダクトでも役に立たせることができる
・自分は「こうしたい」と決める意思（勇気）持つこと
今後の活動にも期待しております！
共創によるサービス創出プロセスについて（デザイン思考をベースに）
発表者：growupさん
プロジェクトを進める以下3要素について、ご紹介いただきました！
- プロセスデザイン
- ファシリテーション
- チームワークデザイン
今回メインとなるのは、プロセスデザイン…課題解決をするために必要な手順になります。
◆発表内容のポイント
・デザイン思考のメソッドをもとに、プロセスデザインを回す
→メソッド
・あらゆる人と共創する
・あらゆる考えを仮想化する
・創造性を発揮することの必要性を訴える
・アイデアに対して批判的な目を持ち、検証（テスト）によって検証する
・完璧を目指さない、何度も何度でも戻る
・アイデアではなく重要なのはインサイト
ファシリテーションとチームワークデザインの詳細は、発表資料をご確認ください！
サービス開発のUXデザインでひと手間加えた話
発表者：Emy29さん speakerdeck.com
発表者は、以下の問題点を感じていました。
・全体設計を考えながらユーザーが良いと感じるものを作らないといけない
・【課題発見→フロー改善→画面設計】のデザインの流れを可視化したい
そこで、既存の手法であるカスタマージャーニーマップとサービスブループリントを組み合わせながら課題から解決策まで書き出せるよう、改善Tipsをご紹介いただきました！
ひと手間加えたマップは、発表資料をご確認ください。
◆発表内容のポイント
改善ポイント
・システム側、画面、フローなど多方面の課題を見つけられる
・課題から解決策までを現状の行動に合わせて俯瞰できる
・解決策の検討がしやすく、優先順位がつけやすい
得た知見
・案件や状況に合わせて、既存のツールに工夫を加えることでUXデザインのフロー、アウトプットをより良くできる！
「デザインは反復である」ということをメンバーに理解してもらっておこう
発表者：711fumiさん
speakerdeck.com
デザイナー以外がイメージする開発の流れは一直線ですが、実際のデザイン工程は「抽象と具体」の反復作業によって完成に近づけています。
その反復作業が、不要な作業や手戻りとして受け止められてしまう場合もあると発表者は語りました。
本発表では、デザイナーである発表者から「認識のずれを無くすためにできること」をまとめとして紹介いただきました！
◆発表内容のポイント
・デザイナーの考え方を共有しておく
→作用工程やUI設計に向けて整理した情報など
・反復を促す「問い」を意識する
→抽象度の高い話を進める場合、具体的な話から進める場合など
・UIデザインは「要件確定後の開発」ではなく「設計」と捉えてもらう
→設計の一工程であり、変更が発生することを理解してもらう
ノンデザイナーズデザイントーク
発表者：くぼたさやさん
speakerdeck.com
学習を通した成功体験をサポートするための企画（Learning Xperience）を行っている発表者は、教育システムのオペレーション改善をしています。
この仕事において一番大事なのは、「ユーザー目線第一」とのこと。
その仕事において一番大事と思えることを発表いただきました！
◆発表内容のポイント
・課題の本質を捉えて解決できる仕組みを考えること大事
課題の本質：メモ書き、ブレスト、ヒアリングなど
解決 ：アイデアを出してメリット/デメリットを考える
仕組み ：再現性が高い運用まで考える
営業資料におけるデザインの重要性
発表者：meia-haraさん
speakerdeck.com
デザインで受け取るイメージがいかに変わるかについて、以下2パターンで検証した結果をご紹介いただきました！
・UI/UXを意識したデザイン
・意識していないデザイン
各デザイン要素の違いは、発表資料をご確認ください。
色、フォント、図、構成に違いがあることが一目でわかります！
◆発表内容のポイント
お客様に印象の残る営業資料を作成するには
・UI/UXを意識したデザインをすることが重要である
・検証を通して再確認できた
デザインシステムとは 引き出しを設計することである
発表者：ShotaKugawaさん
デザインシステムが必要な理由を引き出しを例に、別途noteにてまとめている内容をLT向けに発表いただきました！
◆発表内容のポイント
デザインシステム＝「引き出し」のデザイン
・component化
→そんな情報が入るのか？を想定する
→「引き出し」に入れるものを想定
「引き出し」のイメージは、発表資料が分かりやすいので是非ご確認ください！
ぼくのかんがえたさいきょうの地図検索 UI （特許出願中）
発表者：chooさん
docs.google.com
件数を表示する地図検索UIを作りたい！ということで、実際に作成された経緯やサービスのデモを発表いただきました。
◆発表内容のポイント
・件数を表示する地図検索UIの事例紹介
→件数表示、ヒートマップ、行政区域ごとの色塗り
・個人開発した賃貸検索アプリの発表
発表時にデモいただいた賃貸物件検索サービス Comfyは、物件データの利用特許を得られたなかったため、2021/07に閉鎖したとのことです。
残念です…。
プログラマが最低限抑えておきたいUI知識３選
発表者：白栁隆司さん
speakerdeck.com
エンジニアである発表者目線で、プログラマが抑えておくべきUI知識を発表いただきました！
「"質の良い"仕事のためには、デザインは出来た方良い」という言葉が印象的でした。
◆発表内容のポイント
１．絶対座標・相対座標
・絶対座標：画面上の1っ点を原点[0,0]とし、位置変化を扱う
・相対座標：アイテム間の位置関係で決まる
２．間（空間）
・情報に適度な間（空間）を作る＆省略（間引く）
・協調なども活用して伝えやすくできる
・コーディングにも活用できる！
３．視線誘導 Zの法則
・人間の視線はZ型に動く
・チラシの多くはこのルール
取扱説明書制作のプロがkintoneの導入ガイドブックをガチで作ってみた
取扱説明書制作を仕事とされている発表者から、「kintone導入ガイドブック」を作った事例を紹介いただきました！
「kintone導入ガイドブック」作成前は、「はじめてのkintoneガイドブック」という名で様々な課題（コンセプト変更、構成見直しなど）がありました。
課題を解決すべく、目次をカスタマージャーニーマップにした内容がとても参考になりました。
◆発表内容のポイント
目次をカスタマージャーニーマップに！
・目次構成は「骨組み」
・全体がわかる、どこを見ればいいかわかる
・ユーザーを最短距離で目的地を誘導
目次を活かたことで、お客様からも評価が高い取扱説明書になったとのことです。
是非皆様も目次を活かした構成にしてみてはいかがでしょうか？
Scalebaseのデザインシステムの取り組み
発表者：Tadakingさん speakerdeck.com
発表者が扱っているScalebaseの3つデザインシステムについて発表頂きました！
・zeroheigth
・Figma
・Storybook
◆発表内容のポイント
・UIコンポーネントをFigmaだけでなく、その考えを伝えるためにドキュメント化することが大事
・作成/保守の作業時間は必要だが、注力すべき所に時間を使うことができるようになり、取り組んで良かった
・発表者の取り組みは以下noteをご参考ください！
Tadaki｜note
各デザインシステムの取り組み事例は発表資料をご確認ください。
実践的OOUIデータモデリング
発表者：codyNogさん speakerdeck.com
・データモデリングに困っている人
・OOUI採用して本当にいいのか迷っている人
向けの内容となります！
UIから逆算的にデータモデリングができる事例と合わせて紹介いただきました。
◆発表内容のポイント
デザイナーがデータモデルをすると
・データ構造がコード上の実装と同期する
・コンポーネントとしても同期する
→共通の世界観で開発サイクルが回る
発表資料の細かい事例（一覧表示UI、詳細表示UIなど）がまとめられておりますので、お時間ある際にご確認ください！
ウェブアクセシビリティについて
発表者：nanaさん speakerdeck.com
アクセシビリティとウェブアクセシビリティについてご説明頂いた後、具体的な対応策も合わせてご紹介いただきました！
空港と公的機関で実際にあった訴訟例もまとめており、大変興味深い発表となりました。
◆発表内容のポイント
比較的簡単にできそう&影響が大きいところ
・コントラスト
→コントラストチェッカーで検索！
・キーボードだけで操作できるようにする
・スクリーンリーダーを考慮する
発表者は、老若男女問わず誰でも使いやすいサイトやアプリが増えてほしく、この題材としたそうです。
この発表を基に、そのようなサービスが増えてくれることを私も願っております！
最近のCSSで作るテーブルレイアウト
発表者：腹筋ローラーの力を信じろさん walnut-insect-387.notion.site
CSS Gridを使って、テーブルレイアウトをコンテンツ本来の幅とバランスを取りながらコントロールする方法を発表いただきました！
テーブルはユーザーにとっては慣れ親しんだレイアウトになりますが、レイアウトに癖があり、結構難しいものである…確かにそうだなぁと共感しておりました。
◆発表内容のポイント
・長いコンテンツにレイアウトが振り回されないようになった
・折り返しをいい感じに制御できた
・CSS Gridは柔軟ですが、落とし穴も
→CSS Gridはすごい！
→Chromeで数万〜数十万セル表示させたらスクロールが壊れた
CSS Gridでテーブルを再構築した内容は、添付の資料をご確認ください！
とても詳細にまとめてくださっております。
また、発表者から宣伝にはなりますがWebのレイアウトとCSSの可能性を広げる最高の一冊を監訳したそうです！
是非宜しければご確認ください！
Homeってなんですの？
発表者：DameNianchさん
note.com
遺伝子操作を使ったアプリ開発をされている発表者が、以下の遺伝子操作アプリの機能とTwitterの項目を比較し、Homeとは？という疑問を持ったことでこの発表テーマとなったそうです。
・対象（編集）遺伝子の設定
・画像の編集
・編集画像の確認
・動画の編集
・編集動画のダウンロード
◆発表内容のポイント
視点の違い
・ユーザー vs 開発者 ：HOMEとは？という視点
・開発者 vs エセデザイナー ：長いテキスト嫌だなぁ、という視点
・エセデザイナー vs デザイナー：文字は読まず、アイコンを見ているという視点
・デザイナー vs ユーザー ：文字読まなくても操作できてしまうという視点
開発者とデザイナーとの視点の違いについて、丁寧に考察してくださりました！
この結果を踏まえ、発表者はご自身で開発されている遺伝子操作アプリに、今後はアイコンを追加したいとのことです。
UI/UXデザイナー、Webデザイナー募集中
株式会社ラクスでは、デザイナーを積極的に募集しております！
現在募集中の職種は以下の通りです。
| 職種 |
|---|
| UIUXデザイナー／マネージャー（東京） | 株式会社ラクス |
| UIデザイナー（東京） | 株式会社ラクス |
| Webデザイナー（東京） | 株式会社ラクス |
また、弊社デザイナーが発信しているnoteも是非ご確認ください！
note.com
2021/12/10(金)に開催する、【ラクス】キャリア座談会 #13 UIデザイナーの仕事紹介も是非！
終わりに
UI/UXデザイナーが語る、デザインTipsはいかがでしたか？
今回、資料を共有いただいた方のみをご紹介させていただきましたが実際はもっと多くの方がデザインTipsをアウトプットする場として、弊社イベントを活用されております。
- 過去イベント
250名以上の参加申込をいただくほど、大好評のイベントです！
本記事を読んでいただき、本イベントにご興味を持ったデザイナーの皆様は是非、参加/登壇いただけますと幸いです。
最後までお読みいただきありがとうございました！
エンジニア中途採用サイト
ラクスでは、エンジニア・デザイナーの中途採用を積極的に行っております！
ご興味ありましたら是非ご確認をお願いします。
https://career-recruit.rakus.co.jp/career_engineer/カジュアル面談お申込みフォーム
どの職種に応募すれば良いかわからないという方は、カジュアル面談も随時行っております。
以下フォームよりお申込みください。
rakus.hubspotpagebuilder.comイベント情報
会社の雰囲気を知りたい方は、毎週開催しているイベントにご参加ください！
rakus.connpass.com
