iamjeffia/estudio-ia

動画用UI（およびシンプルなページ）

日付: 2026-10-22 · タイプ: ガイド · ステータス: 有効

概要: 画面の「見た目」こそがモーションを信頼できるものにします。このスキルは、インターフェースの普遍的なルール（階層、スペース、タイポグラフィ、色彩、状態）と、画面が動画になるときに変わること（スマートフォンで読める、レイヤーで再現され、各パーツがアニメーション可能）をまとめています。シンプルなページ（ランディングページ、プロフィールリンク）にも使用できます。数値と例は references/regras-detalhadas.md を参照してください。

2つの使用方法:

• 作成: 新しい画面をデザインするか、動画用に実際のプロダクトの画面を再現します。
• レビュー: 完成した画面を監査し、各ルールに違反している箇所を指摘し、依頼に含まれている場合は修正します。

1. デザイン前のコンテキスト

1. プロジェクトやテーマのブランドのビジュアルシステム（トークン：色、フォント、スペーシング、角丸、コンポーネント）を見つけます。サードパーティのブランドの場合は、公式サイトから取得します（方法は video-referencias のセクション3を参照）。以下のルールは実行を調整するものであり、ブランドを変更するものではありません。
2. 画面の種類を定義します: ランディングページ/サイト（タイポグラフィの振幅が大きい）か アプリ/ダッシュボード（密度が高く、テキストは最大24px）か。
3. 各ブロックが何を伝える必要があるか、それぞれの最も重要な要素は何かをリストアップします。動画の場合: その瞬間にナレーションが何を言っているか。

2. デザイン前のリファレンス

必要なもの	ソース
アプリやサイトの画面、ランディングページのセクション（ヒーロー、価格、FAQ、お客様の声）、ダッシュボード、フロー（オンボーディング、チェックアウト）	Mobbin（ユーザーがアクセス権を持っている場合。MCP: search_sections、search_screens、search_flows）
Mobbinがない、またはMobbinに該当するものがない場合	Dribbble と Pinterest（英語の短いキーワード）、および実際のプロダクトのスクリーンショット
モーション、アニメーション効果、美的感覚、写真、環境	Pinterest
動画内で言及されている実際のプロダクト	そのプロダクト自体: 画面を録画するか、公式のスクリーンショットをキャプチャ
既製のトランジション、形が変わるアイコン、マイクロインタラクション、AIエージェントの画面	コンポーネントライブラリ: references/motion-e-componentes.md

検索と保存の方法: references/referencias.md。画面ごとに3～6個のリファレンスを集め、それぞれから活用するパターンをメモします。リファレンスは構造、階層、スペーシング、振る舞いに使用し、第三者のブランド、テキスト、画像をコピーしないでください。

3. ルール（概要）

1. シグニファイア: 画面はそれ自体で説明がつく。コンテナでグループ化し、選択項目を強調表示し、非アクティブ項目はグレーアウトする。クリック可能な要素はホバー、押下、アクティブ状態を表示する。テキストのないアイコンにはツールチップを付ける。
2. 階層: サイズ、位置、色。最も重要なものを上部に、大きく太字で表示。二次的なものは小さくグレーで表示。ブロックごとにハイライト色は1つ。ラベル（「差出人:」「レストラン:」）の代わりに画像、ロゴ、アイコンを使用。「ラベル: 値」がすべて同じリストはスプレッドシートであり、デザインではない。
3. スペース: グリッドの前に余白を確保。4の倍数（4～40px）を使用。ブロック間の基本スペーシング（例: 32px）と、一緒に動作するアイテム間の半分のスペーシング（16px）。
4. タイポグラフィ: 1つのサンセリフファミリー。大きなテキストは文字間隔 -2% ～ -3%、行間 110% ～ 120%。ランディングページ: 最大6サイズ。ダッシュボード: 最大24px。
5. 色: 1つのプライマリカラー。背景用の明るいバージョンとテキスト用の暗いバージョン（50～950のランプ）を用意。他の色は機能的なもののみ: 青フォーカス、赤エラー、黄警告、緑成功。
6. ダークモード: 境界線はほとんど見えないくらい明るく。奥行きは背景より明るいサーフェスで表現。チップは彩度を落とした暗い背景と、同じ色の明るいテキスト。
7. シャドウ: 低い不透明度、高いぼかし。シャドウが最初に目につくなら、それは間違い。
8. アイコンとボタン: アイコンのサイズはテキストの行間と同じにし、近くに配置。水平パディングは垂直パディングの2倍。CTAのペア: プライマリは塗りつぶし + セカンダリはゴースト。
9. フィードバック: ボタンにはデフォルト、ホバー、押下、無効、ローディングの状態を用意。フィールドにはフォーカス、エラーメッセージ、警告を用意。すべてのアクションに応答がある。
10. 画像とテキスト: テキストの背後に局所的なグラデーションを配置。写真全体を暗くするレイヤーは使用しない。
11. 全インターフェースに控えめなアニメーションを: カードはホバー時に約2px浮き上がり、幅広で弱いシャドウを表示。クリック時に軽いリップル効果。ブロックはフェードしながら上昇して出現。ローディング時にはスケルトンに輝きを表示。短く控えめに: ローディング以外で自動で動くものはなし。
12. 高級なデザインとは、単にすっきり見せることではなく、意思決定を容易にすること: セールスに繋がる画像はカードの最大要素。3段階のテキストで、意思決定データを太字や色で強調。結果を示すボタン（「41件の物件を見る」「R$ 239.90を支払う」）。画面ごとに1つのバッジ。ナビゲーションはコンテンツより控えめに。1つの角丸スケール。テーブルは references/design-caro.md を参照。
13. スキャン可能な画面: 誰も画面を読まず、答えを探す。各要素は2つ以上のエッジに接する（テキストは左、値と時刻は右。中央揃えは読む必要がないもののみ）。密度はスペーシングではなく差別化（アバター、ヘッダー付きグループ、アイコン付きチップ）で解決。強調とは隣接要素との差。強調するには、周囲をニュートラルに。箱の中の箱は不可。

4. 動画内の画面

• スマートフォンで読める: 1080幅のフレームで、インターフェース本文は少なくとも約22px。インパクトのある見出しはさらに大きく。テスト: スマートフォンサイズでフレームを1秒停止。最初に見えるのは、ナレーションが言っていることですか？
• レイヤーで再現、スクリーンショットの貼り付けは不可: 各ボタン、テキスト、アイコン、吹き出しはそれぞれ独立したレイヤーとして、個別にアニメーション可能（バネで出現、点灯、クリック）。スクリーンショットは証拠としてのみ使用（ニュース、実際の投稿など）。
• 実際のプロダクトに忠実: 視聴者が知っているアプリ（WhatsApp、Gmail、銀行アプリなど）と同じ色、フォント、角丸、アイコン、コンポーネントを使用。アイコンは公式のもの（SF Symbols、Material Symbols、ブランドのSVG）。
• 動きのある現実的な状態: 実際のシステムキーボードが上昇しキーが光るタイピング、マスクでテキストが「伸びる」ことはしない。クリック時に押し込まれるボタン。ローディングは実際にローディングする。通知はプラットフォームの実際のフォーマットで。
• もっともらしいサンプルデータ: ニッチに合った名前、金額、時間。Lorem ipsumは使用しない。画面上に実際の個人データ、メールアドレス、認証情報は表示しない。
• フレーム内の画面は1つのアイデア: 画面に10個の情報があり、ナレーションが1つに言及している場合、他の情報はニュートラルにし、カメラは重要なものにフォーカスする。

5. レビューモード

1. 画面をレンダリング（ブラウザ、エンジンプレビュー、または動画フレーム）し、デスクトップとスマートフォンでのキャプチャ、またはスマートフォンサイズのフレームを取得します。
2. チェックリストを確認し、各問題を記録します: 場所、違反したルール、現在の値、提案する修正。
3. 影響順に並べ替える: 階層と可読性、次にスペースとタイポグラフィ、最後にポリッシュ（シャドウ、状態、マイクロインタラクション）。
4. ブランドとテキストを維持しながら、小さく検証可能な変更で修正します。

チェックリスト（各項目は「AI臭さ」の指標でもあります）

• カードやリストがスプレッドシートのように見えるか（ラベルの繰り返し、すべて同じサイズ）？
• 各ブロックに1つの支配的な要素があるか？競合するハイライト色が複数ないか？
• スペーシングが4の倍数でないか、グループ化されるべきアイテム間で同じになっていないか？
• 複数のフォントファミリーがあるか？6サイズ以上（ランディングページ）または24px以上のテキスト（ダッシュボード）があるか？
• 大きな見出しがデフォルトの文字間隔と行間になっていないか？
• 色が装飾目的でのみ使用されているか、またはセマンティックカラーが入れ替わっているか？
• シャドウが重すぎるか、コンテンツより先に目に入るか？ダークモードで強い明るい境界線があるか？ネオンチップがあるか？
• アイコンがテキストの行間より大きいか、ラベルから離れているか、または色付きの正方形の中に小さく歪んで入っているか（デザインはボックスの約55%を占めるべき）？
• ボタンのパディングが不均衡か、または2つのCTAが同じ重みを持っているか？
• 状態（ホバー、押下、フォーカス、無効、ローディング、エラー）が欠けているか？
• 写真の上に直接白いテキストがあるか、または写真全体が暗くなっているか？
• すべてのセクションの見出しの上に大文字のラベルがあるか、または実際のものを表示する代わりに中央揃えのアイコン付き「3つの番号付きステップ」があるか？
• 安っぽいデザイン: 小さな画像、グレーで詰め込まれたメタデータ、無表情なボタン（「適用」）、複数のバッジ、混在した角丸？
• 浮いた要素、2つのエッジに接していない要素？カードの中のカード？
• 紫と青の汎用的なグラデーション、絵文字をアイコンとして使用、すべてに同じ角丸とシャドウ、プレースホルダーテキスト？
• 動画内: スマートフォンで読めるか？レイヤーで再現されているか？実際のプロダクトに忠実か？最初の視線がナレーションの内容に落ちるか？

6. 検証

• レンダリングして確認: デスクトップ（1440px）とスマートフォン（390px）、存在する場合はライトモードとダークモード。動画の場合はスマートフォンサイズのフレーム。
• コードでルールの数値（サイズ、行間、スペーシング、シャドウ）を確認。
• インタラクション: ホバー、クリック、フォーカス、送信が応答を示すか確認。
• 変更前と変更後を比較し、何が変わったか、その理由をリストアップ。