Web・UIデザイン
Web・UIデザイン に掲載している Skills です。
テーマファクトリー Theme Factory
スライド、文書、レポート、ランディングページに、用意された 10 種類の配色・フォントテーマを適用。新しいテーマをその場で生成することもできます。
編集部おすすめフロントエンドデザイン Frontend Design
テンプレート任せではない、個性のある UI を作るためのガイド。先にデザイン案を立て、要件と照らして見直してから実装します。
UI の状態チェックリスト（UI States Checklist）
画面やコンポーネントに必要なすべての状態を洗い出します。読み込み、空、エラー、一部のみ成功、無効、オフライン、権限なし、極端な内容まで、それぞれでユーザーに何が見え、何ができるかを決めます。
ウェブのアクセシビリティ監査（WCAG 2.2 AA）
ページやコンポーネントを WCAG 2.2 レベル AA に照らして監査します。キーボード、フォーカス、コントラスト、名前とラベル、構造、フォーム、ダイアログ、動的な更新、ズーム、ターゲットサイズを扱い、指摘ごとに達成基準を示します。
UI の国際化対応（UI Internationalization）
再設計なしにどんな言語でも載せられる UI にします。メッセージカタログ、ロケールに応じた書式、文字の長さが変わっても崩れないレイアウト、CJK と右から左への対応、適切な URL での言語切替を扱います。
UI/UX Pro Max（UI/UX デザイン知識ベース）
UI のスタイル、配色、フォントの組み合わせ、UX ガイドライン、チャート、技術スタック別のヒントを検索できるデザイン知識ベース。実装前に見た目の方向性を決められます。
ライト／ダークテーマ（Light and Dark Theme）
どちらのテーマでも正しく表示されるライトモードとダークモードを作ります。意味ベースの色トークン、システム設定＋手動切替、読み込み時に誤ったテーマが一瞬出ないこと、両テーマでのコントラスト確認までを扱います。
レスポンシブレイアウトのデバッグ（Responsive Layout Debugging）
特定の画面幅で崩れるレイアウトの本当の原因を見つけます。横スクロール、はみ出し、縮まない flex の子要素、効かない sticky、スマホでの 100vh、ブラウザの UI の下に隠れる固定バーを扱います。
Design System（トークンとスライド）
3 層のデザイントークン（プリミティブ、セマンティック、コンポーネント）の設計、コンポーネント仕様の作成、トークンに準拠した Chart.js 付き HTML スライドの生成を支援します。