こんにちは！
業務委託で FABRIC TOKYO のお手伝いをしている石岡 将明 (@masaakikunsan)です。
先日、FABRIC TOKYO のコーポレートサイトをリニューアルしました。
https://corp.fabric-tokyo.com/
今回は、このコーポレートサイトをどのようにして爆速で作ったのかという話しをします。
技術構成
以前までは、WordPress を使っていたのですが、今回は Nuxt.js + Contentful + Netlify で JAMstack でやっていきたいと要望を受け上記画像の構成となっています。
エンジニアが github に push をするか、ビジネスメンバーが contentful で記事を作成すると自動デプロイされ静的ページが吐き出される仕組みになっています。
コーポレートサイトを作るとどうしてもサーバーサイドのコードを書く必要がでてきるのですが、今回は Netlify Form で contact ページも作成したため Nuxt + Contentful + Netlify で完結しています。
Tailwind CSS とは
これから注目されること間違いなしの CSS フレームワークです。
Tailwind CSS では、UI コンポーネントを提供するのではなく、CSS の class を提供するだけなので、用意された class を指定するだけなので簡単に複雑な UI を作成することができます。
公式ドキュメントを元に Flex の例を見てみましょう。
class を見るだけで大体なにをしているかわかると思います。
Tailwind CSS を採用した理由
僕は、割とフロントエンドには自信があります。デザインもかじってる系です。
UI フレームワークだとちょっといじろうと思うと逆にコストがかかるケースが多く、コンポーネント作成や見た目はこっちでやるから class だけ提供してくれとずっと考えており、そんな中 Tailwind CSS と出会ったので採用しました。
英語もできないので正直 class 名を考える時間がもったいないとまで考えています….
Tailwind CSS と出会う前は個人開発の時は毎度 Tailwind CSS のようなよく使うものを class にして開発をしていたためそれらを丸っと提供してくれる Tailwind CSS を使わない理由はなかったぐらいです。
あと、Fabric Tokyo ではフロントエンジニアがいないので class 名を見るだけで大体何をしているかわかる方がいいかなと思ったというのも理由の一つです。
実装
ここまで構成とTailwind CSS の魅力についてある程度語ったので実装周りの話しをしていきます。
初期セットアップ
Nuxt のインストール方法はどこでも語られているので今回は省略します。
今回は Tailwind CSS でやるので create-nuxt-app でやる場合
「Use a custom UI framework」と尋ねられたら「Tailwind」 を選択してください。
そうすると以下画像の構成のフォルダが生成されます。
Tailwind のカスタマイズ
今回のコーポレートサイトではデザイナーが styleguide を作ってくれたのでそれに沿って tailwind.js の設定を変えていきます。
tailwind.js では下記の様に color などを定義してくれているので必要に応じて変更してください。
// tailwind.jsconst colors = {
transparent: 'transparent',
black: '#22292f',
'grey-darkest': '#3d4852',
'grey-darker': '#606f7b',
'grey-dark': '#8795a1',
grey: '#b8c2cc',
'grey-light': '#dae1e7',
'grey-lighter': '#f1f5f8',
'grey-lightest': '#f8fafc',
white: '#ffffff',
'red-darkest': '#3b0d0c',
'red-darker': '#621b18',
'red-dark': '#cc1f1a',
red: '#e3342f',
'red-light': '#ef5753',
'red-lighter': '#f9acaa',
'red-lightest': '#fcebea',
'orange-darkest': '#462a16',
'orange-darker': '#613b1f',
'orange-dark': '#de751f',
orange: '#f6993f',
'orange-light': '#faad63',
'orange-lighter': '#fcd9b6',
'orange-lightest': '#fff5eb',
'yellow-darkest': '#453411',
'yellow-darker': '#684f1d',
'yellow-dark': '#f2d024',
yellow: '#ffed4a',
'yellow-light': '#fff382',
'yellow-lighter': '#fff9c2',
'yellow-lightest': '#fcfbeb',
'green-darkest': '#0f2f21',
'green-darker': '#1a4731',
'green-dark': '#1f9d55',
green: '#38c172',
'green-light': '#51d88a',
'green-lighter': '#a2f5bf',
'green-lightest': '#e3fcec',
'teal-darkest': '#0d3331',
'teal-darker': '#20504f',
'teal-dark': '#38a89d',
teal: '#4dc0b5',
'teal-light': '#64d5ca',
'teal-lighter': '#a0f0ed',
'teal-lightest': '#e8fffe',
'blue-darkest': '#12283a',
'blue-darker': '#1c3d5a',
'blue-dark': '#2779bd',
blue: '#3490dc',
'blue-light': '#6cb2eb',
'blue-lighter': '#bcdefa',
'blue-lightest': '#eff8ff',
'indigo-darkest': '#191e38',
'indigo-darker': '#2f365f',
'indigo-dark': '#5661b3',
indigo: '#6574cd',
'indigo-light': '#7886d7',
'indigo-lighter': '#b2b7ff',
'indigo-lightest': '#e6e8ff',
'purple-darkest': '#21183c',
'purple-darker': '#382b5f',
'purple-dark': '#794acf',
purple: '#9561e2',
'purple-light': '#a779e9',
'purple-lighter': '#d6bbfc',
'purple-lightest': '#f3ebff',
'pink-darkest': '#451225',
'pink-darker': '#6f213f',
'pink-dark': '#eb5286',
pink: '#f66d9b',
'pink-light': '#fa7ea8',
'pink-lighter': '#ffbbca',
'pink-lightest': '#ffebef'
}
以上でセットアップは以上です。
必要に応じて必要な設定をしてください。
指定した変数を使う
これは postcss の文脈なのですが、下記のようにすることで指定した変数を使用できます。
(上の tailwind.js の color を使いたい場合)
やった工夫
class について
Tailwind CSS で用意してくれてる class だけで実装が不可能な場合、オリジナルで class を作成してやったが基本的には Tailwind CSS の用意された class を使うようにしました。
class をネストしたい
これを使えばいけるはずなんですが、どうしてもうまくいかず lang="scss" を指定しネストしてあげることにしました。
tabのコンポーネントでの利用例を載せます。
Contentful 以外の動的コンテンツをどうするか
これは、偏見込で恐縮なのですが、この手の動的コンテンツをビズにまかせるとデザインガン無視の内容があがってきたりすることがあります。
なので、コスト的には少しかかりますが作りたいコンテンツの文章をエンジニアに渡し、それを JSON にしてファイルを置くことで yarn generate 時に静的に吐き出すようにしました。
今回は、member 詳細と interview 詳細と entry 詳細が動的に増える内容だったので、assets 配下に各々の JSON ファイルを作成し、nuxt.config.js で静的ページを吐き出すようにしました。
node.js で entry と interview と memeber の path を全て取得し、generate のときに routes 配列を return すれば簡単に作れます。
さいごに
Nuxt.js でただでさえ爆速開発ができるわけですが、Tailwind CSS を導入することにより脳死状態でも爆速で開発ができます。
今回実装にかかった時間は本当に短いので皆さんもぜひ Nuxt + Tailwind 開発で爆速を経験してみましょう。