craft-design-engineering

Craft

Gustavo Fior によるデザインエンジニアリングのコンセプト集です。各コンセプトは、すぐに適用できるルールと、それを実現する CSS、Tailwind、または React を含む短い解説です。ライブサイトでは、各コンセプトにインタラクティブなデモが用意されています。

このスキルの使い方

1. 以下の索引から、作業に合ったコンセプトを探します。ボタンにはホバー、押下、ヒット領域のコンセプトが必要です。テーブルやタイマーには等幅数字が必要です。画像を使うものには画像の輪郭線が必要です。
2. コードを書く前に、references/ 内の該当ファイルを読みます。各コンセプトには、詳しい説明、ルール、コードスニペットが記載されています。1 行の概要だけをもとにコンセプトを適用しないでください。
3. ルールを適用し、独自の値を考えるよりも、サイトに記載された正確な値（継続時間、イージング、角丸、透明度）を優先します。
4. 既存の UI をレビューするときは、各変更を Before、After、Concept の列を含むテーブルの行として報告し、ユーザーが読んでデモを試せるようにコンセプトの URL をリンクします。
5. 索引に含まれているコンセプトだけを引用します。質問が索引の範囲外の場合は、その旨を伝え、一般的な判断に基づいて回答します。

原則

• 誰にも気づかれない細部も積み重なります。角丸、間隔、イージング、コントラストに適切なデフォルト値を使うことで、インターフェイスが完成された印象になります。
• 目新しさより一貫性を優先します。同じ 2、3 種類のイージング、同じ角丸の比率、同じシャドウのレシピをプロダクト全体で再利用します。
• モーションには意味が必要です。頻繁に起こる意図的なインタラクションは即座に反応させ、まれなものや空間的なものはアニメーションさせます。
• 物理的な直感に沿います。何もないところから突然現れるものはなく、入れ子の角丸は中心を共有し、光は上から差します。

コンセプト索引

タイポグラフィ

• 等幅数字: 変化する数値に安定した数字を使います。(リファレンス、デモ)
• 視覚的な配置: 数学的な中心ではなく、目で見た中心に合わせます。(リファレンス、デモ)
• フォントスムージング: 暗い背景上の明るいテキストは、より太く見えます。(リファレンス、デモ)

色

• ノイズ: 粒状感でバンディングを隠し、テクスチャを加えます。(リファレンス、デモ)
• 画像の輪郭線: 画像を縁取る、かすかな内側の境界線です。(リファレンス、デモ)

レイアウト

• 入れ子の角丸: 内側の角丸は、外側の角丸からパディングを引いた値です。(リファレンス、デモ)
• HTML の背景: ページの背後にキャンバスを描画します。(リファレンス、デモ)
• スクロールフェード: さらにスクロールできる側の端をフェードさせます。(リファレンス、デモ)

モーション

• ボタンの押下: 押したときに縮小させ、実際に押したように感じさせます。(リファレンス、デモ)
• 中断可能性: モーションの途中で気持ちを変えられるようにします。(リファレンス、デモ)
• ホバーの抑制: 頻繁に行われるインタラクションは即座に反応させます。(リファレンス、デモ)

このスキルを最新の状態に保つ

このファイルと references/ は、Craft リポジトリで bun run build:skill を実行し、サイトのコンテンツから生成されます。編集するのはリファレンスではなく、記事です。