デザイナが体感してわかった「コンポーネント設計×tailwindcss」が神という話

Ateam Brides Inc. Advent Calendar 2021の20日目は
株式会社エイチームブライズ デザイナーの「みなみ」が担当します！

＊＊＊

エンジニアとデザイナーの熱量のすれ違い

ちょうど1年前、フロントエンドエンジニアからsvelte・tailwindcssへの移行の説明がありました。

▼Svelteとは？
公式サイト（https://svelte.jp/）
君はVue,Reactの次に来るSvelteを知っているか？

▼TailwindCSSとは
公式サイト（https://tailwindcss.com/）
TailwindCSSとはWebサイト及びWebアプリケーションを作成するためのCSSフレームワークです。TailwindCSSはユーティリティーファーストを掲げており便利で汎用的なクラスがたくさん用意されています。それらを組み合わせて自由に使用することができます。特徴として「ユーティリティファースト」「CSSファイルサイズを小さくする」「スタイルの変更をHTMLローカルで安全に行える」などが挙げられます。

エンジニア①「コードの管理運用的にすごく良いんです！」
エンジニア②「コンポーネントがほにゃほにゃで・・・こんな感じでコード書くんですけど〜レスポンシブ対応が〜〜・・・」

デザイナーたち「ほう・・・・・🤔？」

初めて説明を受けての所感

・あんまりデザイン性高い実装はできなさそう。。
・レスポンシブデザインか。。。苦手意識。。
・インラインCSSを書く感覚があり、若干の拒否反応・・・

エンジニアが細かく説明してくれたにも関わらずこんな所感で、なぜこんなにも推奨されてるのか、さっぱりわかりませんでした💁‍♀️（ごめん）

＊＊＊

そんなタイミングで、デザインリニューアルするサービスが決定し、
デザイナー1名（私）とエンジニア1名+サポートで実装スタートすることに！
不安抱えつつも、まずは試してみようと決行。

〜デザインリニューアル＆Svelte/TailwindCSS移行が始まる〜

リニューアルの流れ

①デザイナーがXDでデザイン実装
②エンジニアがsvelteで機能実装・ tailwindcssでスタイル当て
③デザイナーがスタイル調整

といった流れで、まとめて一気にではなく
徐々に移行を進めていきました。（①について現在figma移行中です）

実際どんなコードになるの？

▼今までのコード

<button class="btn">ボタン</button>

<style type="text/css">
.btn {
  background-color: rgb(37 99 235);
  font-weight: 600;
  font-color: #ffffff;
  padding: 1rem 10rem;
  border-radius: 0.25rem;
}
</style>

私「ウンウン、見覚えのあるコードやな〜」

▼これからのコード

<button class="bg-blue-600 font-semibold text-white py-2 px-4 rounded">ボタン</button>

私「何これ！？💥インラインCSS書く感覚で拒否反応出るんやけど🤯」
→わかるその気持ち！でもそこで離れずに頑張って書き続けました。

実装スタートしてすぐ起こったこと

① レスポンシブデザインに慣れておらず、デザイン作成の時間がかかる
　→以前は別々でデザインしており、レスポンシブ前提でのデザインの実務作成経験がほぼなかった

② tailwindcssに慣れておらず、検索してから当てるので時間がかかる
　→ただ学習コストはかなり低い。

③ svelteもコンポーネントも詳しく知らなかったので、コードが読み解けない、ファイルが辿れない。
　→エンジニアにベタ付けで教えてもらう

============

最初はコンポーネントも何もない状態＆慣れもあり、1ページ作るのに時間がかかっていましたが、ほぼ全てのページが移行完了したタイミングでは、かなり慣れて、スピードUPして実装できるようになりました！

スピードUPするまで

①とにかく書いてコードに慣れる
コンポーネント設計はなんたるか？がさっぱり状態でしたが、コードの構成をよくみていく内に体感することができました。（＝習うより慣れろ！）

②エンジニアに積極的に聞きまくった
「各コンポーネントにどうやって値を渡しているか？」
「このデザインだとどうコンポーネントにすれば綺麗か？」など聞きまくりました。
聞きまくると、同じ様な処理をしている場所がなんとなくわかる様になり、真似して書けるようになりました。

実装に慣れてみて

①クラス名を考えなくていいことがこんなに楽なんて（体感工数：-20%）

過去：わかりやすいクラス名をネスト数に配慮して考える
現在：そんな時間は必要ない！！

今まではクラス名を考えるということが当たり前すぎて、
命名にどれだけ時間がかかっていたか？も知る由もなかったのですが、
この作業がなくなるだけで、かなりの工数が体感的にも減りました！

命名規則も明確にある様で人によって少し差があったので、マジリクの時間も削減することができました。

スイカ🍉を見て、
「これは果物です」「これはフルーツです」「これは野菜です」「これはすいかです」と言われて全部正解なんですよね...みたいなニュアンスです。

②エンジニア⇄デザでのやり取りや、スタイル調整時間が減る（体感工数：-15%）

過去：デザイナがHTML/CSSで実装したものに、phpを当てる
　　　スタイル調整あればデザイナが対応
現在：エンジニアがコンポーネントを流用して実装
　　　少しスタイル調整あればデザイナが対応

意外とこれも目から鱗で、今までのフローがぶち壊された瞬間でした🤯💥

コンポーネント設計にすることで、新規ページやコンテンツ作成の際、

①エンジニアがコンポーネントを元にページやコンテンツ作成
②そこからデザイナーがスタイル調整

という流れが確立されました。

エンジニアがCSSいじれない理由として（他にもあるかと思いますが）
　・記載場所がわからない
　・サイズなど感覚値で入力できない
などだったので、
　・（CSSが分かれていないので）記載場所がわかる
　・（tailwindcssである程度定義されてるので）サイズがわかる
ことにより、クリアすることができました。

レスポンシブがこんなに楽なんて（体感工数：-10%）

過去：SPもPCも両方別で対応。もしくはSPだけ対応し、差異がある状態
現在：1ファイルの編集でOK！二度手間や変更漏れがない。

今まではSPとPCでファイルが分かれていたので、変更漏れや修正などの対応が発生していました。（あれ？PC対応したっけ？などコードを見返す時間も無駄だった）

レスポンシブのデザインは最初難しかったですが、慣れるとサクッと両方作成できる様になりました。

CSSの記載場所を探さなくて良くなった（体感工数：-10%）

過去：CSSの記載場所を探してコードを当てる
現在：そんなものは必要ない！！！

共通化しているCSSとそのページだけで使うCSSがあったため、
該当のCSSを探すのに時間かかっていました。

また、別ページなど予期してなかった場所にも影響し、スタイル崩れが起き不具合発生なども多々ありました。

が、そもそもファイルが分かれていないのでそんなこと起こりません！
（ちなみに最初感じていた、インラインCSSの違和感はなくなりました。）

＊＊＊

どれくらい体感工数削減できたか

-55%ってマジ？って思ったけど意外とマジです。
ちなみに内容によってはもっと％増えることもあります！

結論：トータルでの開発スピードが爆上がりした！

もっとこうなったらいいなポイント

・md: とかhover: をまとめて指定したい
　→windi cssならできる！（バリアントグループ）
・デベロッパーツールで見えない
　→windi cssならできる！

というわけで：sveltekit とwindiに移行作業中〜
（windiと tailwindの違いや移行してからなど今度記事にしたい）

デザイナーから見たコンポーネント設計のメリット

●UIの一貫性が保てる
　　→ 誰でも同じデザインが作成できる
●開発スピードが上がる
　　→ 既存パーツを流用するのでデザイン作成が早くなる
　　→ エンジニアでも品質をある程度保って作れる

デザイナーから見たコンポーネント設計のデメリット

●デザイン性が高いページ作成には向かない
●最初のパーツ作成や設定に時間がかかる
　　→ 作ったコードが財産になると考える！
●一部ページのみ変更などできない
　　→ コンポーネント設計が崩壊するので、そもそもすべきではない？
　　　もしくはコンポーネントを切り分ける

結論：デメリットはあるがメリットの恩恵がでかすぎる！

最後に

最初はなんでエンジニアがこんなに推してるかわからなかったのですが、
実際開発してみるとその理由がわかりました。

デザイナー的にはデザインのこだわりが…と最初は思っていましたが、
こだわりの方向性を変えてみることでクリアできるんじゃないかな？と思います！

例えば
・バナー作成やLP作成でクリエイティブがっつり作る！
・新機能の体験設計！爆速開発からのユーザーテスト改善！

など、工数削減することでユーザーに向き合ったり、スキル向上したり、新しいことのチャレンジしたり…他のことに時間を割くことができます！

コンポーネント設計でコードを財産にし、
もっとユーザーに向き合う時間を増やしていきましょう！！！！

＊＊＊

Ateam Brides Inc. Advent Calendar 2021の21日目は@xrxoxcxoxさんです！どんなネタなのかお楽しみに！