デザイナーに捧げるDefensive CSS

ファンタラクティブのエンジニアの 太田 です。
デザイナーさんに向けてDefensive CSSについて書きます。

Defensive CSSについて

簡単にいうと予期せぬレイアウト崩れを防ぐ (減らす) CSSを書くという概念です。
詳しくは本家のサイトに書かれています。

https://defensivecss.dev/

本家のサイトにも書かれていますが、これはCSSだけでなくUIデザインにも適用される概念です。

自分自信エンジニアとして様々なプロダクトに関わってきて、大小あれどほぼすべてのプロダクトで課題となり、考慮が不十分なデザインをエンジニアがよしなに実装しているのをみています。
「全て指示されないと実装できないなんて」「エンジニアのためにデザインしているわけじゃない」という意見も見かけますが、あらゆることを考慮した上であえてルールから外れたデザインを作ることと、ただデザインの考慮が足りないだけでは全然違うと思っています。

この記事ではDefensive CSSを参考にしつつ動的なデータを扱うためにはデザイナーはどのようなことを考えないといけないのか書きます。
書きたいことをすべて書くととても長くなるので、今回は簡単な例をあげて少しだけ書きます。

動的なデータとは

中身が変わるデータです。
たとえばユーザーがFormなどで入力して登録したデータを表示する場合、動的なデータを扱うことになります。
動的なデータとは言わないかもしれませんが、フォントによるサイズの差、多言語対応による言語間での文字数の差なども同じくデザインの考慮が必要です。
以下、動的なデータのことをコンテンツと呼びます。

なぜコンテンツを考慮したデザインが必要なのか

コンテンツがレイアウトを壊す可能性があるからです。

コンテンツがレイアウトを壊す例

架空のレシピ投稿サイトを例にします。

以下のデザインを作ったとします。

レイアウト崩れはなく問題なさそうに見えますが、様々な点で考慮が足りないデザインです。

タイトルが長い場合

タイトルが長い場合、どのようにふるまうか指示されていません。

よしなに対応する

タイトルを折り返す。

タグとタイトルがかぶっていますので、タグの分の横幅を調整してタイトルを表示してみます。

ずいぶんとタイトルの横幅が小さくなってしまいましたが、レイアウト崩れはなくなりました。
しかし実際にはこれでは不十分どころか、デザイン変更前と変わらない破綻したデザインといえます。
以下で説明します。

タグが長い場合

先程はタイトルに焦点を当てましたが、タグもコンテンツです。
タグが長くなった場合どうなるでしょう？

タイトルのエリアがさらに小さくなってしまいました。
コンテンツを読むことはできますが、かなりかっこ悪いレイアウトになっています。

タグがさらに長くなって、タイトルを表示するエリアがなくなったらどうふるまうべきでしょうか？
どうすることもできずレイアウト崩れが発生しますのでこのデザインは破綻していると言えます。

補足

他のコンテンツを考慮した文字列の改行はできません。
この例の場合、タグもコンテンツであり長さが変わるため計算することは非常に複雑な処理が必要になります。
静的な表示であったとしても歪な構造となるためよほどのこだわりのあるデザインでなければ避けた方が良いと思います。

デザインを見直す

ドメイン制約を変更する

タイトルは10文字まで、1つのタグ内は2文字まで、タグは最大2つまでなど制約を設ければ最初のデザインのままでいいかもしれません。
ただこれは現実的ではないでしょう。
デザインを実現したいために、本来表示したかったコンテンツを表示できなくなります。
ドメイン制約を変えた方が良いこともあるかもしれませんが、デザインだけで決められることではないのでよく検討する必要があります。

コンテンツによるレイアウト崩れが発生しないデザインにする

複数のコンテンツを横並びにすることは非常に難しいです。
特にスマートフォンなどの小さなデバイスのデザインでは注意が必要です。
この例の場合、横並びをやめた方が無難そうです。

コンテンツが小さい場合でも不自然ではなくなっていることも確認する必要があります。

あまりにも長いコンテンツを省略する

記事の詳細画面であればタイトルやタグをすべて表示したほうが良いかもしれませんが、一覧画面で簡易的に表示する場合はあまりにも長いコンテンツは省略して表示したほうがよいことがあります。

クリックやホバー時に全て表示をするなど工夫しても良いかもしれません。

任意項目のふるまい

ここまで横並びのデザインについて書きましたが、次は任意項目について書きます。
この例の場合、タグと画像が任意項目であるとします。

タグが0件の場合

タグがない場合、タグのエリアごと詰めても問題なさそうです。
しかしこの指示がない場合、実装者はエリアは空白で残すのか、消すのか悩むことになります。
複数の実装者がいる場合、ちぐはぐになるかもしれません。

画像がない場合

画像がない場合もタグ0件の場合と同様に、詰めてもよさそうですが注意が必要です。

複数のカードを横並びにする

複数のカードを横並びにする場合、画像があるカードとないカードのスタイルが異なり、かっこ悪くなるかもしれません。
ダミーの画像などを設定してレイアウトを揃えた方がよいかもしれません。

ちなみに画像もコンテンツですのでアスペクト比など考慮しないといけないことがありますが、今回は割愛します。

あとがき

多くのエンジニアはデザイナーと仲良くしたいと思っていると思うので怖がらないでください。
怒っているようにみえるかもしれませんが、ただ思ったことを言っているだけなことが多いと思います。