Skill.md検索

キーボード操作対応の確認：マウスがなくてもキーボードだけですべての機能が使えるかチェックし、視覚障害者やモーター機能に課題のあるユーザーに対応します。 スクリーンリーダー（音声読み上げ）対応：ARIA（アクセシビリティ属性）の追加や、ページ構造の改善で、スクリーンリーダー利用者が情報を正しく認識できるようにします。 色のみに頼らない情報表示：色覚障害のあるユーザーでも状態が分かるよう、テキストやアイコンで情報を補足します。 モバイル端末のアクセシビリティ確認：タッチ操作の対象エリア（ボタンサイズ）、テキストの拡大縮小対応など、スマートフォンでの利用を検証します。 全ユーザーに対応したWebサイト・アプリを作りたいUI/UXデザイナー アクセシビリティ対応が求められる企業やサービスの開発チーム 法的要件（WCAG 2.2対応）を満たす必要があるプロダクト責任者

デザイントークン（色・サイズ・フォントなどの定義）の層的管理：基本値→意味のある値→コンポーネント値と段階的に定義し、複数ページ・複数プラットフォーム間で統一できます。 ダークモード・複数テーマの仕組み化：テーマ切り替え時の変数上書きルール、優先度、回退ルール（エラー時の代替値）を設計し、手作業のテーマ対応を自動化します。 再利用可能なコンポーネントAPIの標準化：状態・サイズ・バリエーション（種類）をきちんと定義し、デザイナーとエンジニアが同じ言語で議論できる基盤を作ります。 組織全体で使える共通コンポーネント集の構築：命名規範、弃用戦略（古い機能の廃止方法）、変更履歴を記録し、長期的に管理できます。 複数チーム・複数プロダクトの見た目・操作感を統一したいデザイン責任者 新しいテーマやバリエーション追加時の作業コストを減らしたいエンジニア スケーラブルな設計システムを構築したいスタートアップ・成長中の企業

ユーザーの目標に合わせたレイアウト設計：単なる見た目の美しさではなく、ユーザーが何をしたいのかを明確にし、その行動を自然に導く構造を作ります。 視覚的な階層・一貫性の確立：色・フォント・間隔などの視覚規則を定義し、複雑な情報でも分かりやすく、ブランドイメージも統一できます。 ホバー・フォーカス・ローディング・エラー状態など細かなフィードバック設計：ユーザーの操作に対して、次に何が起こるのかを明確に伝え、気持ちよい操作感を実現します。 レスポンシブ（スマートフォン対応）・アクセシビリティ・パフォーマンスを検証：デスクトップとモバイルの両方で快適に、すべてのユーザーが使え、ページ読み込みも早い完成度の高いUIを納品できます。 要件から完成までのUI実装を一貫して担当したいフロントエンドエンジニア 既存ページを見た目と使いやすさの両面から改善したいUI/UXデザイナー ビジネス目標につながる高品質なページ・機能を短期間で実装したいプロダクト開発チーム

ボタンのクリック、フォーム送信、データ読み込みなど各状態で、ユーザーに「今、何が起きているのか」を明確に伝わるアニメーション・効果を設計できます。 動作の時間（スピード）と滑らかさ（イージング）を統一し、アプリ全体で一貫性のある体験を作ることができます。 エラーやエラーからの回復など、重要な瞬間の視覚フィードバックを設計し、ユーザーの不安を減らせます。 スマートフォンで「動きが少ないほうが良い」という利用者向けに、動作を簡略化する対応ができます。 動作が長すぎて遅く感じたり、戻る時の効果がないなど、よくある落とし穴を避けられます。 UIデザイナー・UXデザイナーで、デザインをコード化する際に「どう動かすか」の詳細を決めたい人 フロントエンド開発者で、単なる見た目だけでなく、ユーザーの操作に対する反応を自然に見せたい人 スタートアップやアプリ企業で、ユーザー体験の質感（プロダクトの高級感）を上げたい人

Material Design 3の規則に沿ったUI設計: Androidアプリの画面レイアウト・コンポーネント・配色・タイポグラフィをMaterial Design 3の最新規格に基づいて統一できます。 Jetpack Composeのコンポーネント設計: SwiftUIのようなモダンなAndroidUI構築フレームワーク「Jetpack Compose」で、コンポーネントの状態（有効・無効・エラー・ローディング）を正しく定義できます。 ダークモード・動的カラーに自動対応: テーマトークンとカラーマッピングを統一設計することで、ライトモード・ダークモード・OSの動的カラーへの対応を一貫して行えます。 ナビゲーション構造の明確化: 画面遷移・戻る動作・モーダルの使い分けをAndroid標準の考え方に沿って定義し、ユーザーが迷わないUIになります。 アクセシビリティを組み込み設計: タッチエリアのサイズ、可読性、スクリーンリーダー対応を設計段階から考慮し、すべてのユーザーが使いやすいアプリになります。 Androidアプリデザイナー・UIエンジニア: Material Designの最新版に沿ったAndroidアプリの画面設計をしたい方 Jetpack Compose導入を検討するエンジニア: 新しいAndroid UI構築フレームワークの設計パターンを学びたい方 Android開発チーム: 複数の開発者が関わるプロジェクトで、UIデザインの統一基準を決めたい方

iOS HIG（Human Interface Guidelines）準拠の設計: Appleが定めたiOSの標準操作感・画面レイアウト・ナビゲーション習慣に沿ったUIを設計でき、Appストアの審査も通りやすくなります。 SwiftUIで状態管理を含めた正確な実装: SwiftUIでの画面構成・ビューの状態遷移・アクセシビリティラベルの実装方法を規範に従って進められます。 動的フォント・ダークモード・ジェスチャーへの対応: iOSユーザーの期待する「システムフォント自動拡大」「ダークモード対応」「スワイプで戻る」などの操作が最初から機能するUIになります。 モーダル・層階的ナビゲーションの設計: 「このスクリーンは全画面モーダルで開く」「この画面から戻るにはこのボタン」といった判断が設計段階で明確になります。 「Androidからの流用」を防止: よくある誤り（Android習慣をiOSに無理やり適用する）を回避でき、プラットフォームとしての統一感のあるアプリになります。 iOSアプリデザイナー・Swiftエンジニア: Appleの公式ガイドに沿ったiOSアプリの正しい画面設計をしたい方 SwiftUI初心者: UIKitからSwiftUIに移行する際に、標準的な実装パターンを学びたい方 クロスプラットフォーム開発チーム: AndroidとiOSを両方開発している場合、iOSらしさを失わないようにしたい方

スタイルシステムの統一設計: フォントサイズ・余白・色・角丸などのトークン（デザイン要素）を一元管理し、iOSとAndroidの両方で統一感のあるUIを実現できます。 クロスプラットフォーム対応のナビゲーション設計: iOSは画面スタック、Androidはタブ・ドロワーなど、各プラットフォームの習慣を理解した上で、統一ある戻る動作と画面遷移を実装できます。 Reanimatedで パフォーマンスを損なわない動効設計: 複雑なアニメーション・トランジションを低性能端末でも滑らかに動作させる設計方法を習得でき、ユーザー体験が損なわれません。 低端機でも動く軽量アニメーション: アニメーションの「フォールバック（簡略版に降級する）」を考慮した設計で、すべてのデバイスで同じレベルの使い心地を提供できます。 アクセシビリティラベルとタッチ領域の最適化: スクリーンリーダー対応・タッチボタンの適切なサイズを設計に組み込み、身体が不自由なユーザーも使えるアプリになります。 React Nativeアプリ開発者: iOSとAndroidの両プラットフォームに対応する統一的なUIを設計・実装したい方 デザインシステム構築を任された方: 複数のプロダクト・チーム間で共通のコンポーネント基準を作りたい方 パフォーマンスを意識するエンジニア: 特に低性能なAndroidデバイスでも快適に動作するアニメーション実装をしたい方

スマートフォン、タブレット、デスクトップなど、どのサイズの画面でも見やすく操作しやすいレイアウトを設計・実装できます。 単に要素を縮小するだけでなく、狭い画面では情報の配置を組み替えて、ユーザーが読みやすく・探しやすくなるように工夫できます。 親コンテナ（親要素）のサイズが変わるのに応じて、その中身のコンポーネント（部品）が自動的に適応するようにできます。 ピクセル（px）での固定サイズを避け、相対的な単位を使うことで、意図しない崩れや はみ出しを防げます。 375px、768px、1440pxなど複数のサイズで動作を確認し、本当に全デバイスで快適か検証できます。 Webサイト・Webアプリの開発者で、「スマホでも、PCでもきれいに見える」を実現したい人 UIデザイナーで、1つのデザイン案がどのデバイスでも通用するか不安な人 ECサイト・メディアなど、様々なユーザーデバイスからアクセスされるサービスを運営している人

情報設計から交互作用まで一貫したデザイン方案を作成 — ユーザーが目的を達成しやすいページ構成、操作の流れ、ボタンの配置など、全体的な使いやすさを設計できます。 デザインの統一ルールを決める — 色・フォント・余白・ボタンのスタイルなど、アプリ全体で一貫性のあるデザイン規則を設定できます。 エラーや空の状態、読み込み中など、実際の場面に対応した画面を設計 — ユーザーが困らないよう、あらゆるシーン（エラー時、データがない時など）の画面も考慮します。 誰もが使いやすいUI設計を確認 — 文字の読みやすさ、ボタンのタップしやすさ、キーボード操作対応、暗いモード対応など、アクセシビリティ（誰もが使いやすい設計）をチェックできます。 実装チームに「具体的で実現可能な」設計書を渡す — デザイナーの感覚的な指示ではなく、フロントエンドエンジニアが迷わない詳細な指示書を作成できます。 プロダクトマネージャー・企画者 — ユーザー体験を含めた完全な提案書が作れるため、ステークホルダー説得力が上がります。 デザイナー — 視覚だけでなく情報構成や交互作用まで、説得力のある設計書を作成できます。 スタートアップ・小規模チーム — UI/UXの専任者がいなくても、プロレベルの設計基準を満たす成果物が得られます。 既存サービスの改善を担当している人 — 使いにくさの原因を体系的に分析し、改善案を具体的に提示できます。

フォント（文字の種類・大きさ）、色、余白のルールを統一して、バラバラだった見た目を整理できます。 ページ全体の「階層感」を明確にし、重要な情報と補足情報がひと目でわかるように設計できます。 色の使い方に意味を持たせ（成功は緑、エラーは赤など）、ユーザーが直感的に内容を理解しやすくできます。 アイコンの大きさや線の太さを合わせて、デザインの「ノイズ（乱雑さ）」を減らし、洗練された印象にできます。 一度作ったルールを「デザイン検査リスト」として残し、新しいページやデザイン案でも同じ基準を保つことができます。 デザイナーで、複数ページ・複数チームが作るサイトの見た目をまとめたい人 ブランド・デザイン責任者で、会社や製品のビジュアルアイデンティティを統一したい人 スタートアップ・成長期企業で、「まだ小さいから」と言わず、はじめからプロフェッショナルな見た目を整えたい人

ボタン、フォーム、カードなど、何度も使う部品を「正解」として定義し、プロジェクト全体で同じものを流用できます。 その部品がどんな情報を受け取り、どう動くか（API設計）をはっきり決めることで、開発者が迷わず使えるようにできます。 CSSやスタイルを統一して、部品のスタイルが後から簡単に変わらないようにコントロール（スコープ）できます。 視覚障害者向けのラベルや、キーボード操作など、すべてのユーザーが使える部品を作ることができます。 テスト（自動検査）を加えることで、部品が期待通りに動くか、何度も手動で確認する手間を減らせます。 デザインシステム・UIライブラリを担当するデザイナー・開発者 複数のプロダクト・ページを管理する企業で、開発効率と品質を両立したい人 React、Vue、Svelteなどのモダンフレームワークを使っている開発チーム