この記事は僕が個人的に関わっているwallhausというデザインを勉強するコミュニティに向けた資料としても使えるように書いています。初学者も多くいるので、易しめになるよう心がけて書いています。

何回かに分けて書こうと思っています。デザイナー、エンジニアの両面から見たデザインデータについて書くつもり。まずは準備編。デザインカンプとは何なのかについて書きます。

データへの認識をそろえる

作っているものがどんなもの（ウェブサイト、ウェブサービス、アプリ…）であれ、最終成果物がデザインデータそのもの（jpg,psd,sketch…）であることはほとんどない。当たり前だけど、デザインカンプそのものが必要なのではなく、それを実装したものがつくるべきもののはずだ。

これはデザイナーによっても考え方はさまざまだと思うけど、個人的にはデザインカンプを寸分の狂いなくマークアップで再現する、ということは求めない。マークアップを担当するエンジニアにはもっと考えるべきことが他に多くあるということと、実装ではデザインデータよりも完成度を上げる必要があって、いろんなデバイスがある昨今では、デザインカンプにこだわっても絵に描いた餅になる可能性も高い。

デザイナーが作るもの = デザインデータ、となりがちだけど、それはプロダクトを作る上での中間成果物であり、作るべきものはローンチされるプロダクトそのものである、という 共通認識 を持つことが大事。

デザインカンプは静止画である

デザインカンプは静止画です（当たり前）。スナップショット、という言い方もするけど、 ある一瞬を切り取った状態 がデータになっている。
そのため、エンジニアはここから多くのことを読み取らなければならない……遷移、表示順、トランジションやステータスなど実際のプロダクトではユーザの操作によって様々な状態が変化する可能性がある。

昨今ではさまざまなモックアップツールが登場し、ある程度動きを再現することができますが、あらかじめ様々な状態をデザイナー自身も想定しておく必要がある。

よくある状態変化、例えば

• 順序、表示順の変更
• データが空の時
• データが多くなってしまう時
  • 文字量や画像の枚数などがオーバーしてしまう時
• データが欠けている時
  • 画像がない時
  • 未入力の時
• 操作へのフィードバック
  • 追加した
  • 削除した
  • 保存した
  • ロード中
  • 入れ替えた
  • エラーが発生した

ユーザが行う操作は、細かいアクションとフィードバックの繰り返しで進む。
通常の状態だけではなく、操作の前後やエラー発生など、時間軸を意識してデザインデータを作る必要がある。

デザインカンプは（ある程度）ルールで作っている

そのある程度ってなんやねん、と怒られそうだけど、逆に言うとルールに則らないユニークなデザイン以外はルールで作っているとも言える。
そのルールが問題だけど、個人的に一番気にするのは余白やフォントサイズなどの 数字

自分は縦の余白は8の倍数で、横の余白は12グリッドにそって作ることが多い。
こういったよく使う数字はデータから読み取るのではなく、直接コミュニケーションして共有する方が良い。

余白の取り方も、どういったセクション分けをしているかで変わるので、そういったことはレイヤーをグループ分けしてきちんと命名しておくことで伝えることもできる。（セマンティクスにマークアップすることに役に立つ）

どういうことまで気にすればよいか、エンジニアとデザイナーの感覚がそろうとお互い気持ちよく作ることができる。

とりあえず準備編ということで心得的なものから。
読み解きづらいデザインカンプは結局のところ見づらいデザインにつながっている可能性もある。
ツールによって解決しようとしがちなリレーションを、細かい仕事をさぼらないことでも解決できるよ、ということを改めて確認したい。

猫の写真 : Photo by Raul Varzar on Unsplash
ロスコの写真 : Photo by Pauline Loroy on Unsplash