デザインワークをどうやってコードに起こしていくか…
qa_muu何を遂げたいのか？
UI/UX デザインを担う者にとって、フロントエンドの技術は無視できない。
特に、Webアプリにおいては
- React Or Vue
- Tailwindcss
- storybook
という名前をよく目にする。
こういったものを前提として構築するWebアプリのUIデザインを担当する以上、 作り上げたデザインを実際にコードに落としていく場合にどういったワークフローを想定するべきか に、大きな興味がある（一応、ディレクターでも有るので）。
一方、デザインワークで使用するツールに対しても、様々なアドオンが出てはいる。
ただ、こういったアドオンをどう使いこなしていくのかのナレッジが中々出てこない。
もちろん、検索不足は否めない。
せっかくなので、ナレッジをためていくために、まずはスクラップから始めようと思う。
qa_muuこれまでの経緯で引っかかったこと
Tailwind css
一つのタグのclass属性に、複数のclassを設定する。
Tailwindではおなじみというか、現状の僕の第一印象としてはむしろこれが特徴と言っても良いくらいだ。
<div class="flex space-x-4 mb-6 text-sm font-medium">
<div class="flex-auto flex space-x-4">
<button class="h-10 px-6 font-semibold rounded-md bg-black text-white" type="submit">
Buy now
</button>
<button class="h-10 px-6 font-semibold rounded-md border border-slate-200 text-slate-900" type="button">
Add to bag
</button>
</div>
</div>
けど、React Or Vueを使うとなると、class属性に複数のclassを設定するというやり方ではなくなってくる。
この辺りは色々と流派がありそうだが、Atomic DesignでWebアプリを構築していくとなると、複数の設定項目をまとめていくことになる。
tailwind.config.jsに基本的な色、marginやpaddingのspacing、fontFamilyやブレイクポイントといった共通内容を設定する。
そしてボタンを作ろうじゃないかとなれば、tailwind.config.jsに設定した共通内容をいくつかピックアップして、src/components/atomsフォルダーにbutton.vueやbutton.tsxを作っていくことになる。
この時に重要なのはstateだ。
ここも流派は色々有るのだろうけど、例えばCancel Or OKといったNegativeボタンとPositiveボタンの設置は、stateで切り替えて言ったほうが良いと思われる。
だって、実際にstorybookの威力を目の当たりにすると…ね？
storybook
まだまだstorybookの良さを語れる領域ではない。
むしろ今から学んでいくのだ！！
とはいえ、現状でも「こりゃ良いわ」と思えるポイントはいくつか有る。
- 親要素や状況ごとといった、stateの切り替えによるブラウザ上で表示されるデザインが確認しやすくなる
- ドキュメントとして十分機能する
だからこそ、storybookやTailwindのことをちゃんと知りたいのですよ。
qa_muuTailwind CSSで気付かされたこと
フォントウェイト
フォントウェイトを細かく指定できることは、個人的に結構大きい。 と言うか、ちゃんと細かく設定しておいたほうが良い、ということに気づいた。
実際、Adobe FontにてWebフォントを使う場合、使用するフォントウェイトを選択するのだから。
もちろん、フォントウェイトだけじゃない。
色についても、もう一歩踏み込んだ配慮が必要だと気づきがあった
その色の、更にもう一歩先
要は、ボタンで言えばhoverのカラーをどうするのか？ということになると思う。
primary colorをこれや！と言って決めたからと言って、気を抜いて良いわけじゃないってことだと思う。