ブログ：UI・UX・AI デザイン
UI デザイン、UX、デザインにおける AI、モーション、デザインシステムに関する実践的な記事と、よくある質問への簡潔な回答。
最新の記事
すべてのガイド
Playwright を使用した UI 状態とアニメーションのテスト
Playwright を使用してアニメーション UI の安定したテストを作成する方法: page. Clock で時間を制御し、モーションを減らしてダーク モードをエミュレートし、アニメーションを無効にしたスクリーンショットを作成します。
ビュー遷移 API: ブラウザーでのページと状態のスムーズな変化
View Transitions API の機能、同一ドキュメントおよびクロスドキュメントのトランジションがどのように機能するか、CSS を使用してトランジションをスタイル設定する方法、およびそれらを責任を持って使用する方法。
邪魔にならないように説明するツールチップ
役に立つツールチップをデザインする方法: 簡単な補足情報、ホバーとキーボードのアクセス、タッチの代替手段、および重要な指示がツールチップに属さない理由。
チェックアウトとフォーム放棄の削減: 研究結果によると
Baymard の調査から、人々がカートやフォームを放棄する理由と、フィールドの減少、ゲスト チェックアウト、コストの明確化、エラー処理とフィードバックなどに役立つデザインの修正について説明します。
フローティング アクション ボタン: FAB を使用する場合とアニメーション化する方法
フローティング アクション ボタンが役立つ場合、問題がある場合は、画面ごとに 1 つの FAB、拡張 FAB と FAB メニュー、スクロール動作とモーション。
タブ バーとボトム ナビゲーション: 維持されるデザイン ルール
iOS および Android でタブ バーとボトム ナビゲーションをデザインする方法: 3 ～ 5 つの目的地、アクションではなくナビゲーション、ラベル、バッジ、可視性、およびアニメーション化されたアクティブな状態。
モバイル UI の触覚フィードバック: いつ、どのように使用するか
ハプティクスが役立つときと迷惑なとき: システム パターン、一貫性、視覚的フィードバックとの組み合わせ、明瞭なハプティクスとブジーなハプティクス、ユーザーがハプティクスをオフにできるかどうか。
スムーズなライトモードとダークモードの移行: トークン、CSS、モーション
システム設定を尊重し、ロード時のフラッシュを回避し、ネイティブ コントロールのスタイルを設定し、アクセシビリティを損なうことなくアニメーション化する、明暗テーマのスイッチを構築する方法。
折りたたみ式のデザイン: 姿勢、ウィンドウのサイズ、ジェスチャー
折りたたみ式携帯電話用のアプリをデザインする方法: 折りたたんだ状態と開いた状態のレイアウト、テーブルトップと本の姿勢、ウィンドウ サイズのクラス、折りたたみ部分付近の連続性とジェスチャー。
Figma 自動レイアウトと CSS フレックスボックスおよびグリッド: デザインとコードのギャップを埋める
Figma 自動レイアウトが CSS フレックスボックスおよびグリッド (方向、ギャップ、パディング、ハグ、フィル、ラップ) にどのようにマップされるか、およびそれらが異なる場所は、デザインが引き継ぎ後も存続するようにするためです。
UX とデザインの負債整理をエンジニアリング リーダーやプロダクト リーダーに提案する方法
UX 負債とは何か、それを棚卸しして優先順位を付ける方法、リーダーの資金 (リスク、コスト、収益) の観点からクリーンアップとシステム リファクタリングの設計を提案する方法。
UX ROI の測定: デザイン作業をビジネス成果に結びつける
UX 作業の収益を見積もる実用的な方法: UX 指標をベンチマークし、ビジネス KPI を選択し、変更を変換し、仮定を使用して責任を持って報告します。
際立ったUXポートフォリオ事例（ブートキャンプテンプレートを超えて）
最終画面のテンプレートではなく、採用担当者が求める UX ケーススタディの書き方: 問題、役割と制約、厄介な中間、トレードオフと結果。
マイクロフロントエンドとデザインシステムのドリフト: チーム間で UI の一貫性を保つ
マイクロフロントエンドを使用するチームが 1 つの一貫した UI を維持する方法: バージョン管理されたパッケージとしてのトークンとコンポーネントの共有、CSS の分離、アップグレード ポリシー、視覚的な回帰チェック。
通知過多: 人々がオフにしないアラートの設計
人々が大切にする通知をデザインする方法: 適切なタイミングでの許可の要求、中断レベル、バッチ処理、アプリ内通知センター、簡単なコントロール。
スワイプトゥアクション UX: 隠れたジェスチャを発見可能かつ安全にする
リスト内のスワイプ アクションを設計する方法: シグニファイア、しきい値、フルスワイプ コミット、元に戻す、アクセシビリティ、およびスワイプが唯一の方法ではない理由。
2026 年の React Native および Flutter チーム向けのベスト アニメーション ツール
Reanimated、Flutter のアニメーション API、Lottie、Rive、ExodeUI を React Native と Flutter と比較しました。それぞれが何をするのか、誰がモーションを作成するのか、いつ使用するのかを示します。
高 DPI および Retina スクリーンでのシャープなキャンバス レンダリング
Retina や高 DPI 画面でキャンバスのグラフィックがぼやけて見える理由と、devicePixelRatio を使用してそれを修正する方法 (サイズ変更の処理やパフォーマンスの制限など)。
アニメーションがコア ウェブ バイタル (LCP、INP、CLS) に与える影響
アニメーションとアニメーション ランタイムが LCP、INP、CLS に与える影響と、Core Web Vitals を損なうことなくモーションを豊かに保つための実践的な方法。
実際に役立つパスワード強度メーター: UX と NIST のガイダンス
現在の NIST ガイダンスに従ってパスワード フィールドと強度メーターを設計する方法: 記号の長さ、ブロックリスト、貼り付けおよびパスワード マネージャー、明確なフィードバック。
アクセシブルなフォーカス状態: 表示されるキーボード フォーカスの設計
WCAG 2.2 を満たす可視キーボード フォーカスを設計する方法: 2.4.7 および 2.4.13 に必要なもの、:focus-visible の仕組み、およびフォーカス リングの設計ヒント。
ドラッグ アンド ドロップ UX: シグニファイア、フィードバック、アクセス可能な代替案
ユーザーが見つけて使用できるドラッグ アンド ドロップの設計方法: シグニファイアの取得、フィードバックのリフトとプレビュー、ドロップ ゾーン、物理学、および WCAG 2.2 に必要な非ドラッグ代替機能。
スケルトン スクリーン: スピナーの代わりにスケルトン スクリーンを使用する場合
スケルトン スクリーンとは何か、スケルトン スクリーンがスピナーを倒すとき、実際のコンテンツと一致するようにスケルトン スクリーンをデザインする方法、パフォーマンスやアクセシビリティを損なうことなくスクリーンをアニメーション化する方法。
イライラを軽減するエラー メッセージを設計する方法
ユーザビリティ調査に基づいて、配置、タイミング、文言、入力の保持、アクセシビリティ、モーションなど、人々が回復できるエラー状態を設計する方法。
Cursor で ExodeUI MCP サーバーをセットアップする方法
Cursor (および Claude Code) での ExodeUI MCP サーバーの段階的なセットアップ: mcp.json エントリ、ツールの確認、最初のプロンプト、および安全なレビュー。
React ステートからの ExodeUI ステート マシン入力の制御
exodeui パッケージを使用して React で ExodeUI ファイルを再生するための実践的なガイド: React 状態からのブール値、数値、トリガー入力の設定、およびイベントの処理。
Cavalry 対 ExodeUI: モーション グラフィックス 対 プロダクション UI ランタイム
Cavalry はプロシージャル 2D モーション グラフィック ソフトウェアです。 ExodeUI は、アプリに同梱されるインタラクティブ UI 用です。それぞれが何をするのか、何を出力するのか、そして両方をいつ使用するのか。
Flash から Lottie、ステート マシンまで: Web ベクター アニメーションの進化
Web ベクター アニメーションが Flash と ActionScript から Lottie の After Effects エクスポートに、さらにステート マシン ランタイムにどのように移行したか、そして各ステップで何が変わったか。
GIF ローダーとベクター アニメーション: チームが UI でアニメーション化された GIF を置き換える理由
アニメーション化された GIF が UI ローダーやアイコンに適していない理由、代わりに何を使用するか (CSS、SVG、Lottie、ビデオ、状態ベースのランタイム)、およびその選択方法。
Flinto、Haiku、Origami: インタラクティブなプロトタイピングのギャップとそれを埋めるもの
Flinto と Origami は Mac 専用で、Haiku Animator のコードは GitHub にあり、InVision は消えています。インタラクティブ プロトタイピング ツールに何が起こったのか、そして今何がそれに取って代わるのか。
InVision は消滅: プロトタイプ、DSM、ワークフローに代わるもの
InVision は、2024 年 12 月 31 日にデザイン コラボレーション サービスを終了しました。プロトタイプ、デザイン システム マネージャー、ホワイトボードに代わるものと、次に進む方法について説明します。
2026 年の Windows および Linux ユーザー向けの Principle 代替案
Principle は Mac 上でのみ動作します。これらは、ブラウザーのプロトタイピングからインタラクティブなランタイムに至るまで、Windows および Linux 上のデザイナーにとって現実的な代替手段です。
製品チームを分断せずに設計システムコンポーネントを非推奨にする
大規模なアプリで重大なデザイン システムの変更を展開する方法: セマンティック バージョニングと使用状況追跡を使用して、アナウンス、非推奨、codemod による移行、削除を行います。
触覚の復活: モダンな UI における奥行き、ガラス、物理的フィードバック
なぜフラットデザインの後、奥行き、半透明、物理的な動きが UI デザインに戻ってきたのか、Apple の Liquid Glass とマテリアル 3 Expressive で何が変わったのか、そしてそれを使い続けられるようにする方法。
マルチステップウィザードを超えて: チェックリストとコンテキストヘルプを使用したオンボーディング
ステップバイステップのウィザードが適切な場合、なぜ長いオンボーディング ツアーがスキップされるのか、チェックリストとコンテキストが人々の価値をより迅速に理解するのにどのように役立つのか。
B2B SaaS の情報密度: パワー ユーザーと初心者向けのダッシュボードの設計
専門家が新規ユーザーを圧倒することなく素早くスキャンできる高密度の B2B ダッシュボードとテーブルを設計する方法: 密度モード、階層、段階的な開示。
コマンド パレットとネストされたナビゲーション: Cmd+K がサイドバーを押す場合
コマンド パレットが得意な点、失敗する点、およびナビゲーションと並行してコマンド パレットを設計する方法 (検索、あいまい一致、ショートカット、見つけやすさ)。
確認ダイアログの代わりに元に戻す: 中断の少ない UI の設計
なぜ「よろしいですか？」をルーチンにするのですか？ダイアログが失敗する場合、確認がまだ正しい場合、および明確でアクセス可能で安全な取り消しトーストを設計する方法について説明します。
セマンティック デザイン トークン アーキテクチャ: グローバル、セマンティック、およびコンポーネント トークン
デザイン トークンを 3 層で構造化し、テーマと複数のブランドをサポートし、W3C DTCG 形式を使用して Web、iOS および Android に送信する方法。
AI の同一性: AI が UI を生成する際にブランド パーソナリティを維持する
AI UI ジェネレーターが類似したインターフェイスを生成する理由と、タイポグラフィー、色、レイアウト、モーション、イラスト、音声など、明確なアイデンティティを維持するための実用的な方法。
アクセシブルなモーション: 意味を失わずに、優先的に削減されたモーションを設計する
動作軽減設定と前庭障害を考慮した動作を設計する方法: WCAG で必要なもの、削除するもの、保持するもの、およびテスト方法。
デザイナー向け MCP: Figma、トークン、コードを Claude および Cursor に接続する
モデル コンテキスト プロトコルが設計者にとって何を意味するか、どの設計ツールに MCP サーバーがあるか、それらを Claude Code および Cursor に接続する方法、および何に注意する必要があるか。
ジェネレーティブ UI ガードレール: デザイン システムを中断することなく、意図に沿ったデザインを実現
AI がオンザフライでインターフェイスを構築するときに UX がどのように変化するか、生成された UI がアクセス可能でブランドに準拠した状態を維持できるようにコンポーネント、トークン、チェックを構造化する方法。
エージェントの UI 状態: AI の思考、ツールの呼び出し、進行状況を表示する方法
AI エージェントの実行状態 (受信、思考、ツール呼び出し、ストリーミング、完了、停止、失敗) を設計する方法。パターン、タイミング、例。
よくある質問
すべての質問- AIはUXリサーチでどのように活用されているのでしょうか？
- AI チャットボット UI はどのように設計しますか?
- AI 製品の UX はどのように設計しますか?
- UIデザインの原則とは何ですか?
- UXデザインプロセスとは何ですか?
- ワイヤーフレーム、モックアップ、プロトタイプの違いは何ですか?
- インタラクションデザインとは何ですか?
- UX における空の状態とは何ですか?
- ローディング状態はどのように機能するべきでしょうか?
- UI 状態とは何ですか?
- MCP サーバーを備えている設計ツールはどれですか?
- デザインシステムとは何ですか？
- AIを使ってUIをどうデザインするのか？
- AI は UI デザイナーに取って代わることができるでしょうか?
- なぜUXデザインが重要なのでしょうか?
- UIデザインとは何ですか？
- UIとUXの違いは何ですか?
- UIデザイナーはアニメーションにどのようなソフトウェアを使用しますか?
- 無料のオンライン UI アニメーション ツールはありますか?
- Flutter の最良の Lottie 代替品は何ですか?
- Adobe Animateは廃止になったのでしょうか？
- AI エージェントは実稼働グレードの UI アニメーションを作成できますか?
- モバイルでの Lottie のパフォーマンスの問題とバッテリーの消耗を解決するにはどうすればよいですか?
- Rive は商用利用は無料ですか?
- スプリング アニメーションが三次ベジェ トランジションよりも優れているのはなぜですか?
- Tencent PAG アニメーションとは何ですか? Lottie との比較は何ですか?
- Model Context Protocol (MCP) を使用して AI エージェントを UI モーションに接続するにはどうすればよいですか?
- Adobe Animate および Flash の最新の代替品は何ですか?
- Figma プロトタイプ アニメーションを製品版 React コードに変換するにはどうすればよいですか?
- Rive、Lottie、ExodeUIの違いは何ですか?
- 2026 年における Rive の最良の代替品は何ですか?
- SwiftUI では春のアニメーションはどのように動作しますか?
- モーション トークンとは何ですか?デザイン システムでどのように機能しますか?
- ExodeUIはReact Nativeで使用できますか？
- Figma Smart Animate とスプリング物理学の違いは何ですか?
- ExodeUI は Rive より優れていますか?
- モーション開発環境とは何ですか?