Slide 1
Slide 1 text
Layout Grid Browser
for
Slide 2
Slide 2 text
ブラウザに持ち込んでみた話
Layout Gridを
Figmaの
拡張機能で実装して
Slide 3
Slide 3 text
#フリーランスエンジニア
#WEBディレクター出身
Yuta Hanzawa
#ツール開発 #業務委託
Slide 4
Slide 4 text
とは
Layout Grid
Slide 5
Slide 5 text
No content
Slide 6
Slide 6 text
ON
Slide 7
Slide 7 text
要はデザインのための補助線
デザイン系アプリで見かける
一貫性の構築
Figma,Sketch,Illustrator...
ブレイクポイントの判断材料
24pxで区切った例
Layout Grid
Slide 8
Slide 8 text
ブラウザでも使ってみたいな...
を見ながら質の高いマークアップをしたい。
→ カンプを見比べることなくズレに素早く気づきたい。
→ カンプ作りこみたくない。マークアップで完成品を磨き込みたい。
→ TailwindCSS,ChakraUIなど4の倍数で組み立てられたツールを楽に使いたい。
Layout Grid
カンプ作成なしでマークアップだけで素早くデザインしたい。
Utility-First を快適に使いたい。
CSS Framework
な
Slide 9
Slide 9 text
実際に作ってみた
Slide 10
Slide 10 text
No content
Slide 11
Slide 11 text
No content
Slide 12
Slide 12 text
Layout grid for browser
Slide 13
Slide 13 text
実験の成果
Slide 14
Slide 14 text
よかったこと❶
ガイドを見ながらマークアップできる
Slide 15
Slide 15 text
No content
Slide 16
Slide 16 text
微妙にズレてるな... とか 気付きやすい
Slide 17
Slide 17 text
よかったこと❷
ブレイクポイントを直感的に把握できる
Slide 18
Slide 18 text
No content
Slide 19
Slide 19 text
よかったこと❸
ズレをメモ・共有しやすい
Slide 20
Slide 20 text
その場でガイドを敷いて
スクショするだけ
共有が楽
Slide 21
Slide 21 text
よかったこと❶
ガイドを見ながらマークアップできる
よかったこと❷
ブレイクポイントを直感的に把握できる
よかったこと❸
ズレをメモ・共有しやすい
Slide 22
Slide 22 text
他サービス解析にも使えるかな..？
Slide 23
Slide 23 text
note
Slide 24
Slide 24 text
Medium
Slide 25
Slide 25 text
AAVE
Slide 26
Slide 26 text
少しは解析できそうな事はわかった
（でもちゃんと解析に使うには機能・UIの磨き込み足りない)
(ドッグフーディングしたり意見もらったりしていきたい)
Slide 27
Slide 27 text
利用技術
Slide 28
Slide 28 text
Recoil
React
Chrome Extension v3
Canvas / React Konva
グリッドの描画に利用。
CanvasはReactで記述できる
ReactKonvaを利用。
GlobalStateの管理。
本アプリケーションの制御。
Reactで作成したアプリケー
ションをChromeExtensionに
てオーバーレイさせている。
利用技術
Slide 29
Slide 29 text
Extension 起動
ユーザー Extension
React HTML Canvas
React
React Recoil
が
を に
を
が
を
で
で
と
追加 描画・制御
状態管理
利用技術ざっくり説明
Slide 30
Slide 30 text
オブジェクトのDnD処理が楽
線や矩形の描画が簡単
＋
CSSの影響を受けない
Canvasを した
利用 理由
(Extensionで既存ページにDOMを注入する相性が良い)
Slide 31
Slide 31 text
オブジェクトのDnD処理が楽
線や矩形の描画が簡単
＋
CSSの影響を受けない
Canvasを した
利用 理由
(Extensionで既存ページにDOMを注入する相性が良い)
拡張機能でのCSSの上書きは鬼門
ポップアップ型チャットツール等の
CSSを がかなり大変
パクってみた参考にした
Slide 32
Slide 32 text
React Konva を うとさらに
使
ReactでCanvasを
記述し管理できる
楽
Slide 33
Slide 33 text
まとめ
Slide 34
Slide 34 text
マークアップに使えそう
ChromeExtension開発に
かなりつかえるぞ！
他社サービス解析に使えそう
Layout Grid
React Konva
Resetするの相当えぐい
の
Extension CSS
Slide 35
Slide 35 text
Layout grid for browser