Android スタイル ロゴ リビール

Android スタイル ロゴ リビール は何をしますか？

複数のスキルが対応可能な場合: リクエストでこのスキル名が指定されておらず、エージェントが同じ種類のもの（他のローンチフィルム、ショット、デッキ、モックアップなど）を作成する他のオムニガミスキルも持っている場合は、それらを名前でリストアップし、開始する前にどれを使用するかユーザーに尋ねてください。名前が指定されている場合、またはインストールされている唯一のスキルである場合は、そのまま進めてください。

日本語、韓国語、中国語の製品ページの場合、コピーはその言語のままにし、フィルムの lang をページの <html lang> に設定します。バンドルされたNotoフォントとフレーズ区切りがテキストを処理します。

15.5秒のオープナーで、製品のマークをその独自のジオメトリから構築し、ロックアップで終わります。細い構築線がマークの実際のエッジに沿って伸び、実際の円弧からコンパス円が0.75秒ごとに描画されます。同時に、製品があなたのために何をするかを示す4つの短いラインが配置されます。マークが塗りつぶされ、中央にスライドして停止します。カメラがマークに押し込まれ、その色がフレーム全体になります。製品ラインの最初の単語が単独で大きく表示されます。マーク自身の形状の1つによるワイプが、その単語をラインの残りの部分に運びます。ディスクが製品の独自の入力（またはメインボタン）に伸び、そこで最後の単語がタイプされます。送信ボタンが押され、マークの色のディスクがフレーム内に咲き、カメラがマークから引き戻されてロックアップになります。フラットフィールド、ぼかしなし、グラデーションなし、影なし。120 BPMのグリッド上で30 fps、ワイド（1920 × 1080）。

あなたは 完成したフィルムを適応 することで作業します。reference/ には、Ostlery（オムニガミの例として作成された架空の宿泊予約アシスタント。そのストーリーとソースは reference/STORY.md にあります）の完全なフィルムが含まれています。その仕組み（イージング、タイムライン、カメラのプッシュとプル、ワイプ、ディスク、ブルーム、ロックアップのプロポーション、フィルムの独自のチェック）はそのまま保持します。名詞はユーザーのものに変わります：マーク、そのマークから描画される構築物、4つのライン、ライン、入力、色、フォント、ワードマーク。変更するすべての設定は reference/index.html 内で ADAPT とラベル付けされています。KEEP とラベル付けされたものはすべてそのまま維持されます。

計画を立てる前に style.md を、何かを判断する前に critique.md を読んでください。

必要なもの

• ベクターパスとしてのマーク（SVG）。構築はマークの実際のジオメトリを使用するため、PNGでは不十分です。SVGを要求するか（製品のソースやサイトから見つけてください）。マークをトレース、再描画、または「改良」しないでください。
• 製品のライン: 製品独自の1文で、3〜7語。2つの部分として読めるもの（Ostlery: "Plan a stay" + "in a sentence."）。最初の単語は短く強力である必要があり、フレームが許す限り大きく単独で表示されます。
• 製品があなたのために行う4つのこと、製品自身の言葉で（サイトやブランドガイドから）。
• 製品の実際の入力またはボタン、製品のスタイル通りに。理想的には、独自の送信ボタンが内部にあるフィールド（コンポーザー、実行ボタン付き検索ボックス、プロンプト）、またはメインアクションボタン。製品が持っていないコンポーネントは決して使用しないでください（「入力」を参照）。
• そのフォント（ライセンス付きファイル）: ライン用の表示フェース、インターフェースフェース、ワードマークのフェース、またはアウトライン化されたSVGとしてのワードマーク。フェースを出荷できない場合は、ライセンスファイルを要求するか、最も近いオープンフェースを使用してその旨を伝えてください。

質問する前にサイトを読み、一度のメッセージで答えられないことだけを尋ねてください。ユーザーが質問を希望しない場合や無人実行を希望する場合は、アクセス可能な情報から判断し、決定した内容を伝えてください。

セットアップ

Node 20+、ffmpeg、およびChrome系ブラウザを確認してください（scripts/chrome.mjs がそれを見つけます; CHROME_PATH で上書き可能）。不足しているものがあれば説明して停止します。カレントディレクトリの logo-reveal/ で作業します。最初に SKILL_DIR をこのファイルのフォルダに設定します:

SKILL_DIR=/path/to/android-style-logo-reveal   # この SKILL.md があるフォルダ
mkdir logo-reveal && cd logo-reveal
cp -R "$SKILL_DIR/reference" reference && cp -R "$SKILL_DIR/reference" film && cp -R "$SKILL_DIR/scripts" scripts && cp -R "$SKILL_DIR/music" music
rm -rf reference/out film/out film/STORY.md
npm init -y >/dev/null && npm i -D puppeteer-core
node scripts/render.mjs reference --times key --sheet --out out/reference

reference/ は比較用に変更しないでください。film/ を編集します: その index.html と assets/（mark.svg とフォントを製品のものに置き換え、各フォントのライセンスも一緒に配置し、あなたのものが読み込まれたら参照用のものを削除します）。あなたの STORY.md と PRODUCT.md は logo-reveal/ のトップに配置します。今すぐ out/reference/16x9-sheet.png を見てください: それが目標です。

1. ブランドを読む

1. node scripts/capture.mjs <url> capture を実行し、すべてのスクリーンショットと capture/brand.json を読みます。製品自体（アプリ、デモ、またはソース）を開きます。ローカルアプリの場合は、サーブして（python3 -m http.server）そのアドレスを使用します。
2. PRODUCT.md を書きます: 1文での製品の説明、そのトーン、フォントとライセンス、マークのアイデア（その形状が何を表すか: Ostleryのアーチは「ドアの中のドア」、玄関は「見つけた一つの滞在先」）、その入力またはメインボタンとそのスタイリング、製品ラインと4つのベネフィット（それぞれ発見場所とともに）、そして日付。さらに、役割別の色（フィルムのトークン、C）:
   • paper 背景、ink そのテキスト、card その入力の塗りつぶし;
   • ember マークの色（名前は参照のもの。役割名は維持）;
   • lake 構築線: ブランドがリンク、線、または地図に使用するクールな色。ない場合、または他の目的で使用している場合は、inkを使用します（薄いグレーは使用しないでください: かすんで読めません）;
   • ok ライン横のチェック: 成功色、またはその色が限られている場合は ink（Tovraは到着したお金のために緑を保持します）。

2. 言葉

• 4つのライン は製品があなたのために何をするかを、ブランドの声で、2〜5語で述べます。64 px、650 pxのカラムにセットされ、すべてが最も幅の広いものに合わせて縮小されます。最長のものを約22文字に保ちます（Ostleryの最長「Finds the one that fits」、Figtreeの23文字、64 pxでちょうど収まります。より幅広のフェースは収まる文字数が減り、約56 px未満でセットされるラインは小さく読めます）。サンプルデータの具体的内容は避けてください: フィルター、価格、顧客、結果の名前（「Under $220 a night」や「Best fit · Heron Point Cabin」はOstleryでは却下されました。それらは誰かがそれを望む理由を何も語っていません）。製品が機能する順序で並べます。最後のものがペイオフであり、マークが塗りつぶされるときに表示されます。4つ、決して5つではありません。それぞれが読むのに約1秒を占める必要があります。
• ライン は2つに分割されます: line1、ステートメント（2〜4語）、および line2、残りの部分。入力にタイプされる（20文字以下が最適。フィルムのチェックは、タイピングがプレスに間に合わない場合に失敗します）、またはボタンのラベルそのもの。製品に独自のラインがある場合はそれを使用します。1つのキーワードに *like this* とマークを付けてマークの色で設定できます。どちらの部分でも可能ですが、最初の単語は絶対にマークしません（マークのフィールド上で背景色で着地します）。単語の周りだけにマークを記述します。フィルムは *paid*. を *paid.* として読み取ります。色を1つの意味のために保持するブランドは、何もマークしない場合があります。
• ワードマーク: 製品名をロックアップで設定された通りに（大文字小文字、フェースとウェイト、またはアウトライン化されたSVG）。

reference/STORY.md の形式で STORY.md を書きます: TL;DR、各ビートの意味、マークの構築、塗りつぶし、ワイプ、コーナー形状、入力を含むビートシート、およびすべての単語とそのソース。4つのライン、ライン、構築計画を数行でユーザーに表示し、1回のレビューを求めます。ただし、無人実行が要求された場合は除きます。沈黙を承認と見なさないでください。

3. マークを独自のジオメトリから構築する

これがフィルムの核心です。視聴者はマークが注意深くデザインされたと感じるはずです。なぜなら、描かれるすべての線が実際にマークの中にあるからです。以下のすべての数値は、フィルムの100単位のボックス内にあります（マークは (50, 50) を中心に、長辺が 8 → 92 に収まります）。最初にSVGの数値から紙の上で計算し、それからコードに入力します。

1. マークを配置する (MARK_D, MARK_FIT, BOX)。SVGのパスデータを MARK_D に正確にコピーします。パーツごとに1エントリ（パーツは単独で塗りつぶすピース。fill-rule="evenodd" のパスはそのままにします）。SVGが100単位のボックスで描かれていない場合、MARK_FIT = [s, 0, 0, s, tx, ty] を設定します。ここで s = 84 / (その長辺)、tx = 50 - s × (その中心 x)、ty = 50 - s × (その中心 y) です。すると、すべてのSVG数値 v は s × v + tx（x）または s × v + ty（y）にマッピングされます。BOX をボックス内のマークの境界に設定します（正方形のマーク: 8, 8, 92, 92。幅広のマークは x を 8 → 92 に保ち、y の境界は内側に移動します）。複数色のマーク: drawMark と塗りつぶしに各パーツの色を指定します。
2. グリッド (GRID_X, GRID_Y): すべての実際のエッジに対応する線。すべての垂直な直線エッジの x、すべての水平なエッジの y、各円弧の接線（中心 ± 半径、両方向）、各パーツの対称軸、および中心軸の 50（少し濃く描画されます）。2単位未満の線はマージします。垂直線は約6〜12本、水平線は約4〜8本に保ちます。マークのエッジ、接線、または軸ではないものはグリッドに含めません。
3. プリミティブ (PRIMS, T.circles): マークのデザイナーが描いたもの、大きいものから順に、最大5つ。それぞれが STROKE 上で0.65秒かけて移動点によって描画され、開始点と途中のアンカーがあり、古いものは薄くなり、寸法線が最新のものにスライドします:
   • 円: マークの円弧の1つから: { x, y, r }、その中心と半径（右のスプリングポイントから始まり、頂点を通って上に上がります）。中心を共有する円弧は最も強力な構築を作ります（Ostleryの5つは同心円です）;
   • その他の輪郭: { path, half }、ボックス単位のSVGパスデータ。ポイントが開始する位置から、2番目のアンカーが着地する長さの割合。丸みを帯びたバーが1つの輪郭、正方形の対角線、三角形の中線、文字のステムとボウルなど。円弧のないマークにはこれらが必要です。 各プリミティブに dim: [x, 50] を指定します。寸法線が中心軸上で開始する位置（右端の交差点）。線はラインのカラムまで水平に走ります。構築のすべての段階を確認してください: 大きな円の中の小さな円は顔として読まれる可能性があります（Tovraのコインと3つの小さな円弧は、2つの目としかめ面として読まれます）。代わりにそれらが丸める形状を描画します（Tとして2つの丸みを帯びたバー）。バウンディングボックス、ペンツール、カーソル、またはデザインツールの小道具は絶対に使用しないでください。
4. ラインとプリミティブのタイミング (LINES, T.lines, T.circles): ラインは0.75、2.0、3.25、4.5秒（最後のものは塗りつぶしと同時）。5つのプリミティブは0.75秒から0.75秒ごとに開始します。少ない場合は、各ラインのタイミングで1つずつ開始します（3つ: 0.75、2.0、3.25）。次に keyTimes（ファイルの終わり近く）をフィルムのモーメントに合わせて移動します: 各プリミティブの描画内と各ラインのホールド内に1つずつ。
5. 塗りつぶし (FILLS): 順序はマークのアイデアに由来し、アイデアのペイオフであるパーツが最初に光ります。各ステップは rise（パーツがその基部から上に向かって塗りつぶされる）、along（バンドがその中心線に沿って塗りつぶされる。ボックス単位のパスとその長さで指定、一端から他端へ）、または grow（パーツが点から外側に向かって塗りつぶされる）のいずれかです。それぞれ STROKE 上で0.6〜0.75秒。最後のステップが停止しないように、前のステップが終了する前に次のステップが開始します。Ostlery: 玄関が敷居から上昇し、次に外側と内側のアーチがそれぞれのパスに沿って塗りつぶされます（左端から頂点を越えて）。単一パーツのマークは1回塗りつぶされます（Tovraのコインはその基部から緑色に上昇します。アプリの支払いバーのように）。
6. カメラが入るところ (DOOR): マークのソリッドパーツの中央の点。そのパーツの周囲に少なくとも19.2 × 10.8単位（プルの開始時のフレーム、100 px = 1単位）が必要なので、プッシュは1色で着地します。その大きさのパーツがない場合は、UP と UP2 を一緒に上げます（フィルムのチェックが着地時に通知します）。プッシュはマークのアイデアが「中」と言うところに入ります（Ostlery: ドアを通って）。

4. ワイプ、コーナー形状、ラインのフィールド、入力

• ワイプ (archWipe, WIPE, T.wipe): マークのフィールドからラインのフィールドへの変更は、ハードカットではありません。これはマーク自身の形状の1つであり、フレームよりもはるかに広く拡大縮小され、次のシーンを内側に含んだ状態でフィールド上に浮上またはスライドします。0.55秒で、そのエッジがフレームの遠い角をクリアした瞬間に終了し、そのセトルが画面上で発生します。Ostleryの場合はその玄関、Tovraの場合はコインのディスク。archWipe にパスとして描画します（その keep 引数は維持します。フィルムは外側もクリップします）。最初の単語は両方のフィールドにまたがって表示されます。
• コーナー形状 (corners): マークの2つのピースがラインのフィールド上のフレームの端からのぞきます（Ostlery: 右上の外側アーチ（塗りつぶし）、左下の玄関の輪郭）。イーズアウトでスライドインします。形状として読める大きさで、ラインや入力を横切らず、フレームによって切り取られて迷子のノッチにならないようにします。
• ラインのフィールド (LINE): ink、その言葉は背景色で表示されます（参照）。製品の入力またはボタンが暗い場合、ink上で見えなくなります。LINE = { field: C.paper, text: C.ink } と設定します（その場合、最初の単語はワイプ内でラインの色を取ります）。
• 入力 (INPUT, SEND, BUTTON, COMP, ICON_UP): 製品の実際のコンポーネントであり、そのCSSからフィルムスケールで再描画されたもの。製品が持っていない2つのピースを1つに結合しないでください。 優先順位:
  1. 内部に独自の送信ボタンがあるフィールド（INPUT.kind = 'field'、参照）: その塗りつぶし、丸み（INPUT.round、高さに対する角の半径の割合。0.5で完全な丸み）、送信ボタンの色、形状（SEND.round）とアイコン、テキストフェースとウェイト。白いディスクが飛び出し、フィールドに伸び、送信ボタンがその端に乗って入り、line2 が 1文字0.045秒で安定したキャレットとともにタイプされます。
  2. メインアクションボタン（INPUT.kind = 'button'）、そのようなフィールドがない場合: ボタンの色のディスクが飛び出し、ボタン（独自の半径、INPUT.round）に伸び、アイコンとラベル（line2、ボタンの実際のラベル）が1つの動きとして設定されます。タイピングはありません。BUTTON はそのサイズを保持します。アプリの独自のプロポーションを維持します。

...