Tailwind CSS、Next.js の教材としてHTMLでワイヤーフレームを作る

ささっとワイヤーフレームを作りたいというときは XD とか Figma でつくったりする。
ワイヤーフレームを作りつつ、CMSのプロトタイプも作って管理データの検討や操作イメージのすりあわせも同時にすることが多い。

そうなると CMS プロトタイプの表側も簡単に作れるようにしておきたいなと。

XD とかから HTML を生成して Twig を用意するかなー、、、と考えつつ。
だったら HTMLでワイヤーフレームを書いておけばいいか、と何周目の話かというところはあるけど。

勉強もかねて Twilwind CSS を使ってみようと思ったので試してみる。
せっかくなので Next.js を使ってみるかなー、というかんじで

rainiera/ts-nextjs-tailwindcss-storybook-starter: Starter including Next.js, TypeScript, Tailwind CSS, Storybook, eslint, prettier
https://github.com/rainiera/ts...

を参考にさせてもらってやってみる。

Storybook とか PurgeCSS の細かいところの確認は後ほど見てみる。
これを題材に Next.js（React.js）、TypeScript とかも覚えていければ・・・

ざっと作成

リポジトリの内容を clone してトップページのワイヤーを作成する。
ヘッダ、フッタあたりをコンポーネントにして複数ページで使えるようにしておく。

HTMLで書くといってもいい感じのデザインとかをベースにして作れた方がいいので、 Tailwind UI あたりにあるものをベースにしつつ、ちょこちょこと調整しながらやっていく。

Tailwind UI
https://tailwindui.com/compone...

CSS は普段は書いてもらうことがほとんどだったので、いろいろ忘れてる気がするし、新しいところも覚えられていないなぁという気がするので、このタイミングで TailwindCSS のドキュメントを読み直して勉強しないと。

あとは半田さんの本を読んで CSS 設計も読んでみる。方向性は違うけど。

Tailwind UI からコピペするときに class を className に変換するとか VSCode にそんな拡張あるのかな、探してみよう。

静的HTMLを生成する

ワイヤーフレームを見るだけなら別にいらないのだけど、静的HTMLを出してみてどんな感じになるのかを確認してみる。

Advanced Features: Static HTML Export | Next.js
https://nextjs.org/docs/advanc...

なるほどなるほど。
このHTMLからTwigに移すのは大変そうだから、元のファイルから持って行った方がCMSプロトタイプに組み込むのは楽そうだ。

そもそもとして、 GraphQL とかつかって Headless な感じにしておいた方が楽なのかもしれない。。。
この辺も引き続きの課題。

---

どこまで汎用的に作っておくか？と考えるが、、、、
なんだかんだで毎回違うけど、コンポーネントのパターンをためておければこれから別の案件とかでも使っていける気がするなー。