cssで再現できるデザイン、できないデザイン
Creative Member WEBチーム
こんにちは。WebチームのSです。
Webデザインをcssで反映している時、こんなことはありませんか？
・デザインを人からもらう場合：無理矢理cssで再現しようとしてしまう
→楽しいけどついcssに固執して複雑な記述にしてしまうと、他の人が修正することになった場合に意図が伝わらない＝保守性が落ちる恐れがある
・自分でWebデザインする場合：自由な発想より実装方法につい意識がいってしまう
→デザインの意図より先にcssでの再現しやすさを優先してしまう（これは個人的にはない）
→実務ではしませんが、個人的な趣味としては「cssで再現できるギリギリのデザイン」を考えることが好きで、
学生時代は慣れて早いからと言ってデザインデータもそこそこにいきなりコーディングだけで作ってしまうことがありました。
↓
あくまで自戒にはなってしまいますが、
デザイナーはデザインとしての理由・意図を最優先に考えて、＋できたら最低限の知識・経験を持ってSEOを意識を、
コーダーは目先の作業量や再現性に囚われすぎず、デザインとしての意図を尊重し柔軟に反映を
できるとよいのかなと思います。
そのためにも、今回は「cssでいけそうか画像にしてしまった方が良いか悩むWebデザイン」について、いくつか実例とオススメの方法をご紹介していきたいと思います！
表やリスト等のhtmlで反映したい要素＋ちょっと変わった形
複雑な装飾を背景画像で再現したいときは、あえてsvgではなくjpg,png等画像にして、縦横比を崩れさせることによって外形に沿わせると良いです。サンプルデザイン画像
全体が矢印のような形になっている表・フローチャートなどに有効
↓
これもセルが複雑に組まれた表だと無理矢理cssに拘り過ぎない方が良いかも
↓
表はtable＋各セルの複雑な装飾は背景画像で表現可能！◎
サンプルコード
装飾もりもりの表は変更あったらどうせデザインデータから修正入るので、その微調整も直に反映できつつ
些細な文言程度ならhtmlだけでも修正可能
のいいとこどりが現状最適かと思います。
内側・外側に入り組んだ角丸
グリッドデザインでよく見る、角丸が入り組んだようなデザインを、短くシンプルに再現できます。サンプルデザイン画像
・角丸＋逆角丸の組み合わせ
親要素・子要素を全部角丸にしとく
角丸の背景色：うめたいとこをうめとく
box-shadow
逆角丸：「角丸の背景色」の上に位置する角をもつ要素を、レイヤー上にする
position: relative;＋z-index: 1;
.parent,.child { border-radius: 1rem; } .parent,.child { background: red; } .child { background: red; border-radius: 1rem; box-shadow: -2rem 2rem 0 red, 2rem -2rem 0 red; }
cssより画像にしておくべき例
サンプルデザイン画像
楕円形のセクション区切りを疑似要素＋clip-path: circle(50% at 50% 50%); で
↓
制御が大変で修正に戸惑いました。
角度は一定なので、横着（？）せずシンプルにブレイクポイント＋背景画像で良かったかな...と思いました。
サンプルコード
目先の手段に囚われすぎず、情報の優先度・デザインの忠実な再現・アクセシビリティなどの目的を見定め、都度最適な選択をできるようにしていければなと思います！
ありがとうございました！