モバイルアプリ（に限らずWebもでだが）のデザインは静的ではないけど、デザインツールはどうしても静的なので困っちゃうね

雑記

昔に社内のグループウェアに書いていた話の輸出。

  • 例えばiOSでは、スクロール領域の端っこにいると、ナビゲーションバーやタブバーが（デフォルトでは）透過されるとか。
  • デバイスによる表示の違い（セーフエリアの有無とか、ナビゲーションバーの高さがデバイスによって変わり得るとか）
  • UIの状態とか
    • UI Stackに基づいた状態変化に強いUIを作ろう！ 的なやつね
    • Ideal State
      • これはこれで各コンポーネントについて
      • 文字列が1行表示か複数行表示か、折り返しか省略か（省略なら中間か末尾か）
      • 要素のトルツメ
      • リストやグリッドの表示でデータが多い時と少ない時でどうなるのか
      • などなど
    • Empty State
    • Error State
    • Partial State
    • Loading State
  • ダークモード・ダークテーマ
  • OSの文字サイズの設定（iOSだとDynamic Type）

あらゆる状態をFigmaのようなデザインツールで表現し切れる・作り分けるのは難しい・楽ではないので、どうしても漏れる部分があって、そのギャップをまだまだエンジニアとデザイナーの間で埋められていなくて、どうしたらいいものか。

せめてこういう動的な要素があること（静的な数字やパターンの決め打ちだと困る場合があること）、ここにギャップがあることには自覚的でありたいし、そのギャップを埋めるための手段を継続的に考えていきたいですね。