コーディングもするデザイナーがUIついて考えてみた話 – UIの効率化編 –

こんにちは、シフカです。

シフカでは新製品・新サービス、実証実験を伴う研究目的のため、製品価値を伝える技術デモ用など様々なUI制作の依頼が舞い込みます。表示デバイスもPC、タブレット、スマートフォンから専用端末や車載機など多岐に渡ります。

デザイン支援の範囲も上流の検討からUIデザインの提供、実装に近い動作をするモック、開発の方がUIを再現しやすい様にフロントのコーディング支援などクライアントの要望に合わせて形態も様々です。

「デザインの品質は担保しながら実装しやすいUI」をどのように実現するのか。UIデザインの現場ではデザイン側とコーダー側から相反する要望が出されることも珍しくありません。両方の立場がわかる「コーディングもするデザイナー」がUIついて考えていることをまとめてみました。

・・・

デザイナーとコーダーの葛藤

コーディングもするデザイナーは両方の立場が分かるので、UIをデザインするにあたって「レイアウトや意匠をその画面に対して最適な色や配置にしたい、微調整してバランスを取りたい」という欲求と、「効率的でメンテナンス性の高いコードを出来る限りシンプルに短い工数で記述したい」という思いの間で様々な葛藤を経験します。

ボタンの種類を検討するとき

ボタンはUI上でも多く登場しますので、都度状況に合わせてカスタマイズしていくとコードが煩雑になりやすい部分です。一方でデザイナーとしては、ユーザーに与える印象や情報に応じてスタイルによるコミュニケーションを取りたい部分です。

ラジオボタンやチェックボックスを検討するとき

シンプルにラジオボタンと言っても通常置かれる物の他に、表組みの中に表示される物、ラベルがない物、リストの中に表示する物など表示形態も変わります。

レイアウトのルールを検討するとき

最小画面と最大画面だけでなく、ウインドウやエリアが無段階で拡大縮小する場合は、その途中はどう言った挙動になるのかも含め検討する想像力が必要です。

また、内容によって変化をさせたい場合は、その「内容によって」の定義を明確にするのも大切。数のインフレーションが起きないように自制心も大切ですね。

色のルールを検討するとき

色味を最適化したいというのはデザイナーとしては理解できる欲求ですが、限りなく増えた色設定を管理するために膨大な種類のスタイルを設定していくのも非常に工数がかかる作業です。

このように立場によって見ている世界が違うため、細かい部分で様々な葛藤が発生します。

問題解決のためのワークフロー

ではデザイン上の欲求と実装の効率化という葛藤を解決しながら、安定して利用できるUIセットのスタイリングを制作していくには、どの様なワークフローが考えられるのでしょう。

以下にフローの例を挙げて見ていきましょう。

代表的な数画面でLnFを初期検討

サービス全体の印象や使い心地の大きい方針を決めるため代表的な画面でルックアンドフィール（以下LnF）を検討していきます。そのサービスでよく使われるユーザの滞在時間が長い画面や特徴的な操作が存在する画面で検討を始めます。

フォントはどうする？アイコンはオリジナル、オープンソース？など全体のデザイン方針も決めていきます。

Google Fonts + Japanese • Google Fonts + 日本語

Material Symbols and Icons - Google Fonts

レイアウトシステムの見極め

決定したLnFに適していて、システム要件に適したレイアウトシステムを選択します。固定画角の端末で表示するUIなのか、ブラウザで動作するUIなのか、レスポンシブ対応は必要なのかなど色々な条件も考慮します。

代表画面+αでLnFの詳細検討

ザックリ作った初期検討のデザインを決定したレイアウトシステムを導入しながら検討画面の範囲を広げ、最終形に近い形に作り込んでいきます。

UIパーツや色情報などを抜き出して精緻化

UIを構成するパーツはテキスト、ボタン、ラジオボタン、チェックボックスなど多くありますが、それ以外にも使用している色情報やテキスト、ヘッダーやフッター、カード型の枠やリスト、アイコンなど制作しているLnF固有のデザインパーツが存在します。

それら使用しているパーツを検討した画面から抜き出して差異がある場合は揃え、アトミックデザインの考え方を適宜導入しながら安定したLnFが表現できる様に整えていきます。

アトミックデザインとは？メリットや気を付けるポイントを徹底解説！｜スパイスファクトリー株式会社

レイアウトの精緻化・画面展開

検討した画面レイアウトにルールのズレやブレがないか確認しながらUIパーツの精緻化と同じ様に差異の吸収と精緻化を進めていきます。精緻化済みのUIパーツを利用していく事で実装しやすいレイアウト検討にも繋がります。

UIパーツの精緻化とレイアウトの精緻化を行ったり来たりしながら精度を高めていく事で結果、画面デザインとレイアウトルール、利用するUIコンポーネントが出来上がっていきます。

・・・

いかがでしたでしょうか。

今回は両方の立場がわかるスタッフがデザイナーとコーダーの葛藤をもとにオリジナルUIを構築していくために考えられるワークフローについて考えてみました。

色やレイアウトの変化、動きを伴うUIとユーザーのコミュニケーションも重要になり、単純な固定された画面の使い勝手やスタイリングだけを検討していれば良い時代は終わったのかもしれません。

デザイナーも実装技術やワークフロー全体を見渡せる知識も必要になってきているように感じます。