デザインの無料Webツール

配色をコードに落とす手順 — 形式変換・階調生成・トークン化

決めた配色を実装に落とす手順を、形式の変換→階調の生成→トークンとしての整理→コントラスト確認の流れで解説します。色名の付け方や、ダークモードを見据えた設計も整理します。

CSSアニメーションを設計する手順 — イージング・transform・パフォーマンス

CSSアニメーションを設計する手順を、動きの種類の選択→イージングの調整→keyframesの組み立て→パフォーマンス確認の流れで解説します。transformとopacityを使うべき理由や、動きを控えるべき場面も整理します。

アクセシブルな配色を決める手順 — コントラスト比と色覚対応

Webやアプリの配色を、コントラスト比・色覚特性まで配慮してアクセシブルに決める手順を、パレット作成→コントラスト確認→色覚チェック→トークン出力の流れで解説します。