デザインから見た目の部分だけを作るお仕事を可能な限り楽にしたいので考えてみる

純粋なUI部分のコードは凝ったクリエイティブさのない単純作業であることが多く、いろんなサイト作ってると虚無感が大きくなってくるので一回真面目に考えてみたい。

ちなみに本当に考えているだけで、特に何かを作ったとかではないので、そういうのを期待してきてしまった人はブラウザバックどうぞ。

ゴール

Fimga のデザインデータかデザインの画像をインプットに React + styled-components のコードをアウトプットする。

とりあえず自分が幸せになれればいいので、input と output の形はなるべく限定する。

どうやって実現するか

思いつく感じこんなところ

- 誰かが作ってくれているものを使う
    - 作業自体を効率化する
        - UI ライブラリを使う
        - Atomic CSS系のライブラリを使う
        - 過去作からコピペしてくる
     - NoCode系のサービスを使う
- 自分で何か作る
     - デザインツールのデータをインプットにコードをアウトプットするものを作る
     - 見た目をインプットにコードをアウトプットするものを作る

案1. UIライブラリを使う
Reactだとこの辺かな。

https://semantic-ui.com/
https://chakra-ui.com/

DOM構造とかを考える手間はなくなるかな。Drawerとか挙動少しめんどい系はありがたいかも。

案2. Atomic CSS系のライブラリを使う
最近は Atomic CSS なる概念がトレンドになってきているらしい。自分で作ってもいいし、フレームとしてはTailwindとかがそれにあたる。

Atomic CSS-in-JS

食わず嫌いの状態ではあるが懸念を言うと、上記の記事の中にも書いてあるが、そのフレームワーク固有のクラス名規則を覚えるのは少々解いている課題に対してめんどくさい気がしている。自分一人ならまだしもチームで開発するものに対して導入するとなると尚更うーむ、という感じだ。

ただ Atomic CSSの本質は書き味もあるけどCSSのファイルサイズを減らすことにある気もするので、そこまでスコープに入れるとアリかもしれない。

個人的にはCSSとHTMLの組み合わせを作るのにそもそも頭と手を使わない状態が理想なので、その点に関して言うとちょっと微妙な印象。WebのCSS自体がめっちゃ発展するか、Tailwindか何かしらのAtomic CSS構文が「これで開発するの当たり前だよなぁ？」ってくらいに普及する未来に期待。

案3. 過去作からコピペしてくる
結構自分が開発している時に、過去自分が作ったサイトから似たUIのものをコピペして作ったりするのだが、そういったユースケースだけに特化したテンプレート集とかはあると便利な気がしている。

作るのめんどくさいが即効性はある打ち手。

案4.NoCode系のサービスを使う
STUDIO, Webflow, bubble とかその辺。ドメイン特化だと Shopify みたいなものを含む。

この辺のツールのチュートリアルの動画を見てると思ってたよりできることが多くてびびる。

例えば Webflow でブログのCMSだけでなく、JSONの配列みたいなものも管理できると知って、ちょっとしたお知らせとかコンテンツが増えるくらいのサイトならこれでいいじゃんと思った。

もし次に自分が静的サイト作る機会あったら試してみたい。

ただ、今回の主題は自分がコンポーネント書いていくときの手間を減らしていくことで、これらのツールは作ったデザインはそのツール上でしか動かないっぽいので対象外。

案5. デザインツールのデータをインプットにコードをアウトプットするものを作る

要するに Figma plugin として作るわけだが、Figma では node のツリーがえられるので、そこから組み立てることをゴールとする。

ただあまり簡単でもなく、基本的に Figma のノードは全部 position: absolute な配置になっているので、Group 内の配置の関係性を見て適切なレイアウトのCSSを出力するようにしないといけない。

あと Figma では border-bottom などの一辺につける border がないため、この辺も Line や drop shadow の小テク使っているところを判別したりみたいな感じで細かい課題が山のようにあると思う。

あとデザインの作り方も統一しないといけなそうで、ちゃんと constraint を指定しているかとかで出力も影響を受けるはずなので、Design Lint みたいなものと組み合わせるのは運用する際に前提となりそう。

めちゃくちゃめんどそうではあるけど、楽しそうではあるのでこれはちびちび作って行こうかなと思う。

案6. 見た目をインプットにコードをアウトプットするものを作る
Howとしては機械学習を使うしかないと思うのだが、大体のUIパーツは似通っているので、見た目を画像としてインプットして、アウトプットとしてのHTMLとCSSを教師データとして用意してあげれば行けそうな予感はする。

似たようなコンセプトとしてこういうのもあった。

FRONT-END.AI | フロントエンド開発業務を1/2に

わざわざ「初期開発工程を削減」と限定的なスコープで話していることから、純粋な見た目の部分だけ〜というイメージとそんなに離れていないんじゃないかと思う。Coming Soon に React も入ってたりするので期待。

まとめ

とりあえず自分の業務で出会う範囲内のUIでちびちびFigma plugin書いて行こうかな。機械学習もこのテーマだったら勉強頑張れそうなので手を出してみたい。