Tailwind本家Webサイト / Tailwind UIの分析
hashrockサイト作るに当たってマージンはTailwind参考にしてって言われることが増えたので、どういう傾向にあるかを観察する
hashrock公式サイトのデザイナーを特定する。
やはり基本的にはAdam Wathanっぽい。Adamの考えはRefactoring UIで確認することができる。
２番手のbradlcは技術的なことを中心にやっていそう。
hashrock
Hero. 文字ブロックには横幅を指定し読みやすい長さで折り返してセンタリングしている。
Title:
- text-slate-900 blackは使わない。
- font-extrabold Inter varを使っておりかなり太い。
- text-4xl sm:text-5xl lg:text-6xl 段階的に大きくする。
- tracking-tight text-center トラッキングを
0.025em詰めている。 - dark:text-white whiteは使うんかい。まあいいのか。
この辺ちょっと font-mono (Fira Code VF) 使ってるんだよな。多少可愛げが出ている気がする。フォントサイズそのものは変えていない(text-lg)けどフォントのせいで大きく見える。
ptとmtの使い分けはなんだろう。子要素のマージンはmt-6ずつ開けている。フォントサイズとの関連はどうだろうか？
次の要素にはmt-20が指定されてるから、等間隔にはなってるんだけどね。
ボタン・フォーム
直書きなんすか～。いや自分もそうしてるけど。
クラスはこんな感じ。
bg-slate-900 hover:bg-slate-700 focus:outline-none focus:ring-2 focus:ring-slate-400 focus:ring-offset-2 focus:ring-offset-slate-50 text-white font-semibold h-12 px-6 rounded-lg w-full flex items-center justify-center sm:w-auto dark:bg-sky-500 dark:highlight-white/20 dark:hover:bg-sky-400
気になるのは py を指定せず h-12 を指定しているところ。
フォームの方。
hidden sm:flex items-center w-72 text-left space-x-3 px-4 h-12 bg-white ring-1 ring-slate-900/10 hover:ring-slate-300 focus:outline-none focus:ring-2 focus:ring-sky-500 shadow-sm rounded-lg text-slate-400 dark:bg-slate-800 dark:ring-0 dark:text-slate-300 dark:highlight-white/5 dark:hover:bg-slate-700
これ、inputフォームに見せてただのボタンである。わかるよ自分も実装したことある。
hashrockちょっと脱線。なんでボタンに高さが指定されてるの？
py-3で作り直してみた。うーん差がないけど。
折り返されたときにはちょっと挙動が違う。うーんこれ意図してるのかなあ。
hashrockもしかしたらTailwind本家LPより、最近出たテンプレートを見たほうがいいかもしれないな。
まあとにかく読み切る。
Mediaっぽいコンポーネント。
多分テキストの周辺には 8 スペースを開けて、内部では視覚的に少し狭いマージンを設定する、という感じかな。
hashrockあとは典型的なやつとか。
内部の mt-0.5 は結構ある無しで違うのかな？
外してみたけどどう？狭い？
まあ空いてたほうがちょっとリラックスしてる感じはあるのかな。
hashrock複雑目のコンポーネント。
まあ値で見るとばらついてるけど、
視覚的にどれくらい開いてるかのほうが重要だろうね。
hashrockダークモードに対する考え。
- bg-whiteのまま残っているボタンがある
- 再生時間からアクセントカラーが外れている
- 1xボタンがアウトラインスタイルだったのが外れている
ダークモードだと悪目立ちするスタイルがあったんだろうかね。少しダークモードで装飾を外して地味にする感じだと思う。
bg-whiteボタンについては、周囲のUIに対してこのボタンがprimaryだよというのを強調する必要があったのかな。
hashrock後ろのぼやぼやを作ろう
あんまり好きじゃないけど、でもこういう上品っぽいサイトだと目を引かないというのも要件になるからこうならざるを得ないのかもね。
こういうやつね。グリッドが乗っかってるけどこれは上からレイヤしてるかな。
下が私がFigmaで作った偽物ですよ。どうだいこんな感じでしょう。まあちょっと元画像のほうがエッジが立ってるからクオリティは下がっちゃってるかな。でも文句を言う人はあまりいないでしょう。
やったことはこんな感じでグラデした要素を重ねてレイヤーブラーですね。
あとはこんな感じでグリッド重ねたら完成ですかね。figmaでグリッド作るのめんどいんだよなぁ。なんかいい方法ないのかな
hashrockCommit
一番新しいと思われる tailwindui/commitを見てみますか。コードアクセスもあるんだけどそれここに書いちゃうとまずそうなので、Demoサイトから得られる情報だけ書きます。
全体的にはこんな感じ。
まあどう解釈すべきかとかは一旦自分の中で基準ができればそれでいいかな。なんとなくUIコンポーネントの周りは広めにスペース取るんだなとかその程度の感想を持っておいて、あとは他の人の基準とかを勉強していくしかないね。
