UIデザイン業務でデザイナーが改めて重要性を感じたことの振り返りメモ

note初投稿のアラサーWEB系デザイナーです。

BtoB向けサービス画面のUI制作/UX設計をチームで進めていく中でデザイナーが『これ無意識にやってたけどすごい大事なことなんじゃないか』と改めて感じたことをアウトプットして振り返る記事です。
実際のデザインテクニックなどではないUIデザインをスムーズに行うための考え方やテクニック、工夫などの重要性を改めて感じたことをまとめます。

■デザインに詰まったら前の段階から疑う

デザインカンプ制作の段階で、『ワイヤーフレーム通り作ったけどここの項目の並び順なんか不自然だな…』とか『このページ遷移の流れ、なんかしっくり来ない…』みたいな瞬間、配色で悩む以前とかによくあると思います。
僕はたまにグラフィックデザインやランディングページのデザインも行うのですが、UIデザインに限らずこういう問題に直面するときがあります。

この悩みをどう解消しようかと考えるわけですが、こういうときは情報設計やプロトタイプの時点で間違っているという可能性をわずかに疑ってみるのが有効です。*1

デザインカンプ制作まで進んでしまうとデザイナーはどうしても全体のレイアウトや色味などをビジュアルを調整する作業に全神経を注ぐためビジュアルの組み合わせのみで違和感を解消しようと試みがちです。

制作物にある程度目が慣れてきてしまうと文字や画像など要素を「なんとなく」で見るようになってくるものですが、見た目だけで解決しようとせずに、デザイン作業中でも中身の要素をしっかりとみつめ違和感に気づけるように頑張りましょう（自戒の念を込めて）

最適ではないワイヤーフレームを元にデザインだけでなんとか解決しようと悩んでいる時間はかなりもったいないな〜としょっちゅう思います。*2
前の段階に戻って作業を見直すというのは正直怖いですが、内容が整理されてユーザービリティがあがるほうが遥かに正義です。

あとは「どこに問題があってどういう経緯でなぜこれを作ることになったのか」のコンテクストを自分で再確認することも非常に大事なことだと思います。

コンテクスト
https://ja.wikipedia.org/wiki/%E3%82%B3%E3%83%B3%E3%83%86%E3%82%AF%E3%82%B9%E3%83%88

コンテクストを再確認した状態で一歩下がって俯瞰して眺めることで解決策のヒントがみつかる、ということはよくあります。

*1：とはいえクライアントワークではまた事情が違うのでワイヤーフレームレベルの変更は慎重に。
*2：何らかの理由によりワイヤーの段階まで戻ってしまってもそれはプロダクトが正しい方向へと進んでいる証です。チーム内で不毛な犯人探しなどはやめましょう。

■UIデザインでオリジナリティは出さない

ナビゲーション、ボタン、タブなど操作が発生するUIパーツがページ上にあると自然に目がいくので、デザインに個性をだして表情付けたい気持ちが少し芽生えてきますよね。恥ずかしながら僕は昔そうでした…
ですが、その気持ちをぐっと堪えましょう。

UIパーツの造形にこだわってオリジナリティを出すのは結構危険なときが多いです（ゲーム系は除く）
なぜならUIデザインに関しては、デザイナーのこだわりを詰め込みまくった独自性のあるものほどわかりづらさを生むからです。

ユーザーは自分自身の経験からひと目見てある程度機能やアクションを予測できる能力を持っています。
例えば「この形はアクションがあるボタンだな」とか「この形はプルダウンだから候補のメニューがでてくるな」といった具合にどんなサイトでも自身の経験を適応させて閲覧しています。

UIデザインに携わっている方ならご存知『アフォーダンス』と『シグニファイア』という概念が深く関係してきますね。（それぞれの説明は省きます）
アフォーダンスとシグニファイヤについては下記の記事がわかりやすかったです。

「アフォーダンス」と「シグニファイア」をおさらいしてみる
https://www.cresco.co.jp/blog/entry/7780/

大勢のユーザーが認知できるわかりやすいUIが最強ということですね。

ですが一時期、『元からあるデザインの真似みたいなことはパクリなのでは』と考えていた時がありました。
そんな僕に昔一緒に仕事をしていた上司がひとこと

『UIパーツ、パターンのデザインで他のデザインを参考に見るのをパクりと考えるのは今すぐ考えを改めたほうがいい。アフォーダンス、シグニファイヤを学びなおして。』

とビシリと言われ深く刺さったのを今でも覚えています。

なのでUIデザインはとにかく既存のいろんなパーツを参考に見て、わかりやすいパーツを作ることが大事です。
がっつりいろんなデザイン物を見て参考にして自分の制作に活かしましょう。

■UIはパターン化でデザイン

「型」や「規則性」といった意味のパターンのことですが、ここではUIを組み合わせたレイアウト中心のお話です。

UIのパターン化とは、個々のUIパーツをまとめたグループを1つのベースパターンとして定義し、横展開した別デザインのパターンも用意することでページの要件や機能の要望を満たせる最適なもの当てはめ簡潔にデザインができるものとここでは定義しておきます。

例えばAのページのヘッダーの一番右端にはCTAのボタンがあるとして、お知らせページなど下層の別ページにはボタンがないデザインのヘッダーを使う…
といったようにヘッダーなどUIを組み合わたグループパーツを複数パターン用意しておいて、どんな要件のページでもパターンをあてはめて『ブレないデザイン』できるように選択肢を増やしておきましょうっていうことですね。

パターン化を意識するメリットとしては、イレギュラーなデザインのUIパーツのグループが増えすぎなくなるので用意するグループ（シンボル）が最小限の数で済むことと、パターン数を把握できるのでコンポーネントベースで開発を行うエンジニアの実装が助かるというところではないでしょうか。

あとは配置・レイアウトに迷う時間も地味に短縮されるため作業がとてもスピーディーになりますね。
しかもパターンが自分の中でどんどんストックされていくと、引き出しが広がっていく感覚を覚えるので成長につながっていき少しうれしいです。

パターン化についてはどこかにガイドラインとして定義しておくとデザイナーエンジニアともに幸せになれると思います。
頭の中にパターンをできるだけ考えておいてUIのStyleguideを作る際に一緒にパターンとして組み合わせたものを作っちゃうのがいいと思います。

bizon360 design system light
https://dribbble.com/shots/9834159-bizon360-design-system-light

ちなみにパターンで作るときに気をつけたいのは「今後拡張したときにおかしくなる箇所が発生しないか？」を考えるとひとつのものさしにできそうです。
要素が増えた時を想定してベストなデザインでパターンを組み上げていきましょう。

■デザインデータを最初に綺麗に作りすぎない

Sketchを使っているとパーツをSymbol化（figmaだとComponent化）といってUIパーツを効率よく制作できる機能があります。
これをうまく使うと1つのレイヤーをOverrideして別デザインのパーツをかんたんに量産したり、デザインデータが綺麗に作れたりとメリットが非常に多いです。

ですが、デザインカンプ制作の最初の方はSymbol化やレイヤー構造などで綺麗に作るよりかはパーツデザイン、間隔、色などとにかく「いろんな要素の組み合わせ」を変えて魅せ方の違いを試すことを絶対オススメします。

パーツを細かく作り込む作業を最初にするのがなぜダメなのかというと、塊としてある程度完成されたように見えてしまうパーツは「バラしづらい」からに尽きます。
自分の中で仕上げたと思ってしまったパーツには触れたくないの一心であまり手を付けづらくなり、最後の微調整までそのまま放置してしまうことはたまにあると思います。
全体の構成もパーツのデザインもいまいちだったら、まずは考える前にいまあるパーツをすべてバラしてトライアンドエラーでひたすら組み合わせを変えるなどして改善を試みるのも一つの手だと思います。

ちなみに僕はSketchを使い始めの頃に『せっかくSketch使ってるんだからシンボル化大事だしこまめにやらないと！』とはりきってパーツを綺麗に作っていました。
しかしSymbolの修正というのは地味に面倒で、どんどん修正がかかってくるとデザインが大きく変更になる時も間間あり、しまいにはシンボル化したパーツを一切使わなくなった…なんて失敗もしました。

上記の例は完全にアプリケーションの機能に踊らされて時間を無駄にしたやらかしエピソードでしたが、そうなるよりは最初はとにかくがーっと色んなパターンを試したほうが最終的には生産性がいいなとその時に実感しました。
これはUIデザインもとよりWebデザインやグラフィックデザインにも言えることだと思います。

ある程度綺麗に作るのなんてデザインFIX後やエンジニアに渡す手前で充分かもしれません。
（世間でだいぶ浸透してきているアトミックデザインの場合はエンジニアと協力してSymbol名を厳密にして作るので例外かもしれませんが…）

■アウトプットをとにかくこまめに

チームで開発を進めるとペルソナ、カスタマージャーニーマップ、ストーリーボードなどをもとにすり合わせを行う機会が多いですが、デザイナーが作ったワイヤーフレームなど制作物をベースにMTGや機能実装の検証など話を進める機会もかなり多いです。（ここでいうチームとはプロダクト毎にまとまった主にビジネス＋エンジニア＋デザイナーの集団です）

それらを実行する上で大事なのはチームメンバー同士が常日頃から、制作物を常に頭に思い浮かべ現在の暫定的な仕様やissue（課題）などを共通認識として持っておくことだと思います。
チーム内でコンテクストの理解が十分に足りていない状態など共通認識の齟齬が発生した分だけデザインの手戻りが確実に発生します。

そのためにもデザイナーは制作物のアウトプット（共有）はこまめに行いましょう。

デザイナーなら制作中のものを『きれいに仕上げるまで誰にも見せられない…』といった感情に襲われ少し尻込みする経験があるかと思いますが、危ないとこははやめに潰したほうが確実に安全なのでデザイン物ベースでメンバーと少しづつ確認をしていく習慣をつけるのが理想です。
ビジネスサイドから漏れていた大事な要件などがデザインFIX前に上がってきたら結構悲惨ですので…。

デザイン物の共有にはデザインツールの機能や別途ツールなど使用したほうが効率的です。
FigmaでのPrototypeのShareでもよし、inVision（インヴィジョン）、Zeplin（ゼプリン）などもいいと思います。
（プロダクトや目的に応じて適宜ベストなツールはあると思うので上記はあくまで参考です。）

基本的に僕自身は上記の通りこまめにアウトプットしたほうがいいという方針ですが、とはいえ「どの範囲をどれぐらい作り込んだ段階で見せるか」が見せる人やタイミングによっては難しいときもあるので（セールスの人間など）、ここのバランス感は意外とデザイナーの腕の見せどころだったりします。

■まとめ

・デザインに詰まったら構成など中身の情報やコンテクストの意味をちゃんと再確認してみよう。
・独自性のありすぎるUIはやめて、誰もが見てもわかりやすいUIを作ろう。
・「こうきたらこれ」というデザインパターンのストックを蓄え、ガイドラインに記載。

・デザインデータを丁寧に作るより、最初はデザインの組み合わせを試行錯誤することに時間を使う。
・チームメンバーへのこまめなアウトプットで不安をはやめに潰す。

当たり前のようなことがほとんどですが、デザイン制作に集中している時ほど頭から抜け落ちていたりすることが多い項目ばかりのような気がしました。
上記のことを意識して引き続き制作に臨んでいきたいと思います！