Web・UIデザイン

スライド、文書、レポート、ランディングページに、用意された 10 種類の配色・フォントテーマを適用。新しいテーマをその場で生成することもできます。

shadcn/ui と Tailwind CSS で、アクセシブルでレスポンシブな UI を作るためのガイド。ダークモード、テーマ設定、キャンバスを使ったビジュアルデザインの考え方も含みます。

テーマからジェネレーティブアートの宣言文を書き、シード切替・パラメータスライダー・PNG出力を備えた p5.js 作品に仕上げます。

動いている Web サイトのレイアウト、レスポンシブ、アクセシビリティ、一貫性の問題を点検し、最小限の変更でソースコードを修正して再確認します。

テンプレ感のないランディングページ、ポートフォリオ、リデザインをエージェントに作らせます。要件を読んで「デザインの読み」を示し、3つのダイヤルを設定し、合う場合は実在のデザインシステムを選び、厳格な公開前チェックを通します。

Penpot の MCP サーバー経由で、Web・モバイル・デスクトップの UI を Penpot 内で設計します。デザインシステムの確認、コンポーネントとアクセシビリティの規則、各プラットフォームのサイズを備えています。

特定の画面幅で崩れるレイアウトの本当の原因を見つけます。横スクロール、はみ出し、縮まない flex の子要素、効かない sticky、スマホでの 100vh、ブラウザの UI の下に隠れる固定バーを扱います。

画面やコンポーネントに必要なすべての状態を洗い出します。読み込み、空、エラー、一部のみ成功、無効、オフライン、権限なし、極端な内容まで、それぞれでユーザーに何が見え、何ができるかを決めます。

3 層のデザイントークン（プリミティブ、セマンティック、コンポーネント）の設計、コンポーネント仕様の作成、トークンに準拠した Chart.js 付き HTML スライドの生成を支援します。

TypeScript、Tailwind CSS、shadcn/ui で複雑な自己完結型 React Web アーティファクトを構築します。

ページやコンポーネントを WCAG 2.2 レベル AA に照らして監査します。キーボード、フォーカス、コントラスト、名前とラベル、構造、フォーム、ダイアログ、動的な更新、ズーム、ターゲットサイズを扱い、指摘ごとに達成基準を示します。

UI のスタイル、配色、フォントの組み合わせ、UX ガイドライン、チャート、技術スタック別のヒントを検索できるデザイン知識ベース。実装前に見た目の方向性を決められます。

再設計なしにどんな言語でも載せられる UI にします。メッセージカタログ、ロケールに応じた書式、文字の長さが変わっても崩れないレイアウト、CJK と右から左への対応、適切な URL での言語切替を扱います。

どちらのテーマでも正しく表示されるライトモードとダークモードを作ります。意味ベースの色トークン、システム設定＋手動切替、読み込み時に誤ったテーマが一瞬出ないこと、両テーマでのコントラスト確認までを扱います。

正しい順序でゼロからアニメーションを作ります。そもそも動かすべきか、目的は何か、どのツールか、どのプロパティか、どのカーブと時間か、中断と退出をどうするか。コードを書き、動かすべきでないものには動きを付けません。

作り直さずに、既存のサイトやアプリを上質に引き上げます。技術スタックを調べ、書体、色、レイアウト、状態、コンテンツを「AI らしい定番」の観点で監査し、優先度順にピンポイントで直します。

現実的に最悪のデータでコンポーネントを負荷試験します。長い名前、折り返せないメールアドレス、1文字の名前、欠けた項目、1,284人のメンバー、空のリスト。何が壊れたか、なぜか、それぞれの直し方を報告し、変更する前に止まります。

高級なデザイン事務所のようにデザインさせます。サイトを「高そう」に見せる書体、余白、影、入れ子のカード構造、モーションの曲線を具体的に定め、安っぽい AI の既定パターンの禁止リストも付きます。

動きの効果を自分の言葉で説明すると、正確な名前が返ります。「ポップオーバーが開くときのぽよんとした動き」は Pop in、「iOS の引っ張って戻るスクロール」は Rubber-banding。デザイナーへの依頼や AI へのプロンプトに便利です。

Emil Kowalski のデザインエンジニアリングの流儀で UI をレビュー・構築します。アニメーションさせない判断、イージングと時間、スプリング、clip-path、ジェスチャー、パフォーマンス、アクセシビリティを扱い、レビューは「Before / After / Why」の表で返します。