UI/UXデザイナーに聞く！ エンジニアの「困った」を解決 ～画面デザインを見るポイント4選～ 2025年01月29日

■自己紹介

Sky株式会社

・當野さん
・大江さん

二人とも料理系YouTube鑑賞が趣味

■UI/UXとは？

・UIとは？
　→ユーザーインタフェース

・UXとは？
　→使いやすさだけでなく、ユーザーが得られる体験

■画面デザインを見るポイント

・エンジニアが書いた画面デザインが
　・なんだかスッキリみえない
　・見づらい気がする
　・何を気を付けたらいいか…

▼見るべきポイント４つ

①色
　・色の種類は多くないか
　　（メインカラー・サブカラー・彩度で調整する）

　・色が強くはないか
　　（原色NG、少し暗くする）

　・コントラストは適正か
　　（4.5.1以上）

②メリハリ
　・強弱はつけているか
　　（見出しと本文を調整・強調表現ばかりになっていないか）

　・優先度を決めているか
　　（色・ボタンの大きさ）

③グルーピング
　・要素や情報がまとまって見えるか
　　（間隔が均等・セットとして認識できるか）

　
④統一性
　・コンポーネント
　　（各コンポーネントのテイストを合わせ統一感を持たせる）

　・レイアウト
　　（同じ機能なのにレイアウトが統一されていない）

　・見た目と動き
　　（見た目が同じ要素だと同じ動きを期待してしまう）

　・文言
　　（同じ機能なのに違う表現を使っている・表記ゆれ）

▼協業事例

　①Webアプリケーション
　　コンテンツ配信管理システム

　②モバイルアプリケーション
　　ポイントアプリ

▼質疑応答
　
Q.FigmaのUIキットによっては色が明るすぎるものがあります
そういった場合はどうすればいいのでしょうか
UIキットのものを変えてしまうのは結構抵抗がありますが
デザイナーの方はどうしているのか知りたいです。

A.UIキットをそのまま使うことは少ない
ただあとは全く別の色に変えるというよりは
トーンの調整を行うとかが一つやれることかなと思います
結構ビビットだなって感じられているとのことなので
ちょっと暗めの色にするとか
ちょっと中間っぽい色に寄せるとか
というのが解決方法一つというか
試せる方法かなと思います

Q.たくさん情報量を扱うサービスになると
余白や情報整理が難しいです
ネットで見つかるUIの参考量があまりなく
情報量が少ないスマホアプリのようなものばかり
そういったものの時にどうやって
良い参考を見つけたらいいのか分からず
困っています

A.余白であればちょっと詰める
もちろん文字と線がくっついちゃうとか
っていうほど
詰めるとちょっとNGではあるんですけれど
フォントサイズと
並べた時の様子を見ながら調整かけているような形にはしていますね

Q.異なる画面でも
同一機能であれば
同一の文言が望ましいと思いますが
どの段階から考えた方が良いでしょうか

A.結構なんか
その都度
案件によって変わったりするんですけど
どうでしょうね
最初に別に固めたりとかはしてないですね

Q.UI UXのトレンド
デザイナーの方は
どのように調査したり
研究したりしてますか
というところと
あとはUI UXに関して
参考にしてたり
立ち返ったりするための
バイブル的な
おすすめの本は
あったりしますか

A.HCDとかがちょっと
関わるようになってから
立ち返ってみるようにはしていますね
人間中心設計の本なんですけど
ちょっとUIとは異なってくるんですけど

A.Pinterestとかはめちゃめちゃ見てます

一つ僕がよく見てるのは
Lean UXという
UXを効率的に進めていくっていう本があるんですけれども
実際こうUXをやりましょうってなったときに
それまでの工数をしっかり確保できるプロジェクトっていうのが
あったりなかったりっていうときに
そこをいかに効率化して進めているかっていう
そういうことが書かれている本が
Lean UXなんですけど
それを見てたりはしますね

Q.カラーパレット
良さそうな色を見つけているのでしょうか
もしくはツールなどをお使いで
カラーを決めていらっしゃるのかというところで
質問いただいておりますが
カラーの決め方いかがでしょうか

A.まずどういう
デザインどういう色にするときに
まずお客様に対して
こういうテーマで
印象で作りましたっていうのを出すんですけれど
そこでまずテーマカラーを
システムの役割であったりとか
どういう使われ方するとか
もしお客様がこういう色がいいって
ご指定された場合が
それをメインカラーだったり
ちょっと強い色だったら
調整させていただいたり
ご相談にはなりますけれど
それをメインカラーに置いて
それに対して
補色って言われる真逆の位置に
カラーパレットの色相関とかで見たときに
真逆とかそこに近い位置にあるような色を
サブカラーにして
あとはワーニングや
エラーのテキストであったりとかは
だいたいもう赤
ワーニングは赤色
間違えましたごめんなさい
ワーニングはオレンジとか黄色っぽい色で
エラーは赤色っていうのが
もうエラーは赤っていうのが
結構人の意識に
持ってたりするものなので
そういったところは
逆にエラーなのに青色だと
間違っちゃったり
してしまうので
そこは外さないように基本としては
大事にしつつ
パレットは決めている形になります

Q.miroを使って
エンジニアの方と要件のやり取りを
行っているというところ
お話しいただきましたが
miro内でどのようなツールを
使っているのか知りたいです

A.miroの新しいライブラリーとかを使うというよりは
miroのある基本的な機能を使うことの方が多いですね
またに付箋を使うとか
情報をまとめるためにテキストで整理していくとか
ということをよく使っているので
回答とずれていたら申し訳ないですけど
新たに便利ツールを使ってとかっていうのは
そこまで使ってはいないですね

Q.開発エンジニアの方とコミュニケーションを取るにあたったり
特に意見がずれてしまうときなどは
どういったことに意識をされていますか

A.コミュニケーションを取るにあたり
意見のずれがどういった原因かにも
ちょっと寄ってはくるんですけれども
まずコミュニケーションを取るときに
ご質問いただいている方
デザイナーの方だと思うんですけれど
デザイナーの持っている常識というものと
開発さんの持っている開発常識というものって
結構違いがあるなと感じることがありますね
例えば使う用語の
専門用語とかで結構お話をしたりされたり
することが多いんですけれど
そこがまず自分の使っている用語が
相手に伝わっているか
もしくは相手が使われている用語が
自分がわからないということもあると思うので
そこを専門用語
業界用語とかいうものではなくて
もうちょっと噛み砕いて伝わるような
言い方にしたりというのは意識しています
あとは開発工程
我々は結構開発メンバー近くにいて
どういう進め方をしているとか
直近で特にフロントの方と
やり取りすることが多いんですけれど
結構コードの
上辺だけでも上面だけでもじゃないですけれど
ちょこっとだけそこを見て
こういう書き方をするんだなとかは
個人的には見るように気にして
お話しされている内容を少しでも理解できるようには
気をつけながら進めてはいます

A.チャットを使わないということなんですけれど
会話をする
基本効率がいいのでチャットはするんですけど
ここなんかずれそうだなとかっていうのが
なんとなく会話の節目で見えてくるときがあると思うんです
そのときにはちゃんと会話をして
ずれを埋めるっていうところです
ほとんどがなんですけど
話してたらお互い思ってたことが
前提が違うで会話をしていることが
ほとんどかなと思っていて
そこがこれそうだなと思ったときは
すぐ会話するっていうところを心がけてやっています

所感

お三人の人柄が出ているようなホンワカとしたウェビナーでした、
言っていることはむずかしくはないんだけど。
あとおすすめのバイブルとかはちゃんと言ってほしかったなー