CSSぐらいてめぇが書けよ海溝
#CSS
@MochinecoNonato: デザイナーとエンジニアの間に存在する世界一深い溝
https://pbs.twimg.com/media/FtzRtX6aYAABD5b.jpg
@coffeeyaaaa: 暇な方がやれば良いと思うけど、デザイナーが書いた方が指示書を作成するコストが削減されるよね。
@uhyo_: 自明にエンジニアでしょと思ったら引用RTにデザイナー派が結構いて海溝の実在を感じた。
CSSはHTMLと不可分だから当然デザイナーがHTMLも書くことになり、その環境だとエンジニア要らないのでは(?)
@sekikazu01: こうしたい
https://pbs.twimg.com/media/Ft0VoluagAEewOj.jpg
#AI
@grem_ito: ちなみにさらにこの右にフロントエンドエンジニアとサーバーサイドエンジニアの間にいろんな溝があったりするw
koushisa.icon
WEBデザイン(HTML/CSS)とWEBアプリ(JS, コンポーネント)の問題領域と関心は別
文字通り、みているところが違う
だからこのような議論が発生するのだと思われる
UXの5段階モデルを例として、過程を考えてみる
WEBデザインの問題領域→表層と骨格
WEBアプリの問題領域→構造と要件
「構造」には状態が含まれる(インタラクションデザイン)
状態のスナップショットごとに表層が存在する
「要件」にはコンテンツ要件や機能要件が含まれる
データフェッチや永続化
アコーディオンの開閉状態の例を考える
表層と骨格
HTMLベタ書きでCSSのセレクタやdata-attributeで頑張る
構造と要件
要件から元データの取得方法, 状態の永続化やNavigation State関連を考える
再利用や変数のスコープなど、技術的な知識の側面から関数設計を考える
メンタルモデルはデザインとアプリでは全く別物
コンポーネント = HTML x a11y x CSS x JSの相互作用をカプセル化したもの
全て相互作用の関係にあるので空間的にも近いほうが分割統治しやすいよね、ということ
#スコープは小さいに越したことはない
#困難は分割せよ(サブドメイン分割)
表層と構造の捉え方によってコンポーネントツリーは大きく変わる
このデザインとアプリの視点の違いによって、大きなギャップが生じる
表層の問題空間と構造の問題空間は別物
デザイナーにHTML/CSSの分業したら組み込みが難しいみたいなのはこういうところから発生する
koushisa.icon(エンジニア目線)でどう考えているか
プロダクトの特性, 開発組織と能力次第ではある
デザイナがコードを書けたほうが良いか問題
LPとかのペライチ書き捨てプロジェクトであれば
デザイナーが一気に作ってしまっても別にいい
組み込みも書き捨てる
規模も大きく関わる人も多い状態の運用を考慮するのであれば
Design Team
情報設計
ユーザーストーリーやカスタマージャーニーを元にしたワイヤーフレームと画面遷移
ナビゲーションの基本設計は手戻り不可逆点
表層と骨格
Figma上のコンポーネント設計
FigmaでUI仕様設計
a11yやデザイントークンなど、デザイン上の再利用の概念設計
DEV Team
機能要件を元にFigmaのコンポーネントを再利用して構造を作る
HTMLやCSSはFigmaのインスペクタを可能な限り利用する仕組みにしたい
→モデリングとOOUIとFigmaとCSSとコンポーネント設計