AI Lab

あなたはLINE Creators Market申請用画像の専門処理担当です。
添付された2枚の画像から、LINEスタンプ申請用の完全なZIPファイルを作成してください。

【目的】
2枚の入力画像に含まれるキャラクターを切り出し、背景を透過し、LINE Creators Marketの通常スタンプ申請に必要なPNGファイル一式を作成し、ZIP化してください。

【入力画像】
- 画像1：4列×3行、合計12個
- 画像2：4列×3行、合計12個
- 合計24個のLINEスタンプとして処理する
- 並び順は、画像1の左上から右方向、次に下段へ進む
- 画像1の12個を 01.png〜12.png
- 画像2の12個を 13.png〜24.png

【重要】
メイン画像とトークルームタブ画像は、画像1の左上、つまり 01.png と同じキャラクターから作成する。
「タグ画像」ではなく、正式には「トークルームタブ画像」として tab.png を作成する。

【出力ファイル構成】
ZIP直下に以下のみを入れること。
フォルダを入れないこと。
不要ファイル、確認画像、README、隠しファイルは入れないこと。

- main.png
- tab.png
- 01.png 〜 24.png（24ファイル）

合計26ファイルにすること。
26ファイル以外ならZIPを作成せず、エラーとして報告すること。

【画像サイズ】
- スタンプ画像：最大 横370px × 縦320px
- main.png：横240px × 縦240px
- tab.png：横96px × 縦74px
- すべて偶数ピクセルにする
- すべてPNG形式・RGBまたはRGBA形式
- 解像度72dpi以上
- 各画像1MB以下
- ZIP全体60MB以下

【切り出しルール】
1. 画像1・画像2をそれぞれ4列×3行で分割する
2. 各マスからキャラクター部分だけを検出する
3. 隣のマスの線・手・髪・装飾が混入しないようにする
4. キャラクターの一部が切れている場合は、そのまま無理に補完しない
5. 切り出し後、キャラクターを中央配置する
6. 上下左右に安全余白を残す
7. スタンプ画像は370×320の透明キャンバスに中央配置する
8. キャラクターが大きすぎる場合は縮小する
9. キャラクターが小さすぎる場合は、余白を保ったまま拡大する
10. 絵柄の線・白い服・白目・歯・ハイライトは消さない

【透過処理ルール】
- 白背景を透明化する
- ただし、白い服・白目・歯・肌のハイライトは透明化しない
- 外周からつながっている白背景を優先して透過する
- キャラクター内部の白部分を一括削除しない
- 透過後、黒背景・グレー背景・ピンク背景の仮背景で確認し、
  白抜け・穴あき・ゴミ・隣接マス混入がないか確認する
- 確認用背景画像はZIPに入れない

【main.png 作成ルール】
- 01.png のキャラクターを使用する
- 横240px × 縦240px・透明背景・中央配置
- 顔と上半身が見やすいように調整・1MB以下

【tab.png 作成ルール】
- 01.png のキャラクターを使用する
- 横96px × 縦74px・透明背景・中央配置
- 顔が小さくなりすぎないように配置・1MB以下

【品質チェック】ZIP作成前に必ず以下を検査する
1. ファイル数が26個である
2. ファイル名が main.png、tab.png、01.png〜24.png のみである
3. すべてPNGである
4. すべて背景透過済みである
5. 01.png〜24.png は370×320以内である
6. main.png は240×240である
7. tab.png は96×74である
8. すべて偶数ピクセルである
9. すべて1MB以下である
10. ZIP全体が60MB以下である
11. 余計なフォルダや不要ファイルがZIP内にない
12. 画像1の左上キャラクターが main.png と tab.png に使われている

【失敗時のルール】
- 条件を満たせない場合はZIPを作成しない
- どの条件に失敗したかを具体的に報告する
- 勝手にファイル数を変更しない

【最終出力】
LINE Creators Market申請用ZIPファイルを1つだけ作成してください。
ZIPファイル名は aya_line_stamps_24.zip としてください。

添付画像をもとに、Illustratorでプロレベルに編集しやすいベクター線画を作成してください。

目的は、単なる外周アウトライン化ではありません。
人間が筆やペンで1本ずつ描いたような自然な線を、中心線ベースのベジェ曲線として作成してください。

【最重要目的】
- 黒線の外周を囲んだ塗りパスではなく、中心線ベースのストロークパスとして作成する
- 添付画像の線の太さを参考にし、線の強弱・抑揚・入り抜きを反映する
- Illustrator上でアンカーポイント、ハンドル、線幅、幅プロファイル、ブラシ設定を後から編集できる状態にする
- プロレベルの仕上げ作業がしやすい構造にする

【線の仕様】
- 線は黒
- 塗りはなし
- ストロークで作成する
- 線幅は均一ではなく、添付画像の線幅傾向を反映した可変幅ストロークにする
- 人間が筆で描いたような自然な強弱をつける
- 線の始点と終点には自然な入り抜きをつける
- 線端は丸型
- 角は丸型
- 幅プロファイルやWidth Pointで調整可能な構造にする
- 必要に応じてブラシ変更しやすいように、ストローク属性を保持する

【線幅の考え方】
- 顔の外輪郭はやや強め
- 髪の外側は中〜やや強め、内側の毛流れは細め
- 目、まつげ、眉、口元は繊細な強弱をつける
- 鼻や細部は細め
- 手や指は細め〜中程度
- フルートの外形は中程度、キーなど細部は細め
- 全体として、機械的な均一線ではなく、自然な抑揚を持つ手描き風ラインにする

【パスの品質】
- パス数は多すぎず、少なめのアンカーポイントで滑らかに構成する
- ガタつきや不要な細かい点を減らす
- 自動トレース特有のギザギザや細切れ線を避ける
- 髪、顔、目、口、手、フルートの線を、編集しやすい単位で分ける
- 線同士が不自然につながらないようにする
- Illustratorで選択しやすいように整理したレイヤーまたはグループ構造にする

【避けること】
- 黒線の周囲を囲んだ塗りアウトラインにしない
- すべての線を最初からアウトライン化しない
- 線幅情報を失う構造にしない
- 背景、影、グレー、塗り、質感は入れない
- 不要に複雑なパスにしない

【納品形式】
- まずは Illustratorで編集しやすい「ライブストローク保持」の .ai を作成する
- 可能なら .svg も作成する
- 必要なら別ファイルとして「アウトライン化版」も作成する
- ただし主ファイルは、後から線幅・ブラシ・形状を編集しやすい編集用データを優先する

【仕上がり】
白背景に、黒の可変幅ストロークだけで構成されたクリーンな線画。
人間が筆で描いたような自然な線の強弱を持ち、Illustrator上で1本1本をプロレベルで編集できるAIファイルにしてください。

添付画像をもとに、Illustratorで後から配色しやすい、クリーンな線画を作成してください。
顔は1枚目の女性の表情をベースにし、目を閉じた笑顔で、口を開けて明るく笑っている表情にしてください。親しみやすく、やわらかく、楽しそうな雰囲気を出してください。
顔以外は2枚目の線画をベースにし、首から下の構図・服・腕・手・フルートの位置や持ち方をそのまま活かしてください。

全体は以下の条件で仕上げてください。

白背景
モノクロの線画のみ
線の太さは中くらい
ベクター化しやすい、すっきりした輪郭線
塗り・影・グラデーション・質感表現なし
髪の流れ、前髪、目元、口元、手、フルートの細部は丁寧に描く
フルートのキーや指の形は簡略化しすぎず、自然に見える範囲で整理する
Illustratorで配色しやすいように、線は閉じ気味で整理された線画にする
全体はやさしい漫画風・親しみやすいイラスト調

仕上がりイメージ：
「明るく笑う女性の顔」＋「2枚目の線画の首から下とフルート」を組み合わせた、清潔感のある線画。

あなたは世界最高水準のUI/UXデザイナーです。
以下の静的HTMLページを2026年最新トレンドに合わせてブラッシュアップしてください。

【現状】
- glassmorphism + Bebas Neue + Noto Sans JP
- CSS変数でカラートークン管理
- カード式レイアウト（dock-grid）
- ダーク/ライトモード切り替えあり

【ブラッシュアップ方針】
1. Bento Grid レイアウト
   カードをサイズ混在のBentoグリッドに変更。
   注目カード（LIVE）は2×2で大きく表示。

2. Noise Texture + Grain
   背景にSVGフィルターでgrain質感を追加。
   ざらっとしたアナログ感を演出。

3. Border Gradient
   カードのボーダーをグラデーション枠に変更。
   conic-gradient または @property animation を使用。

4. Variable Font アニメーション
   h1タイトルにCSS font-variation-settingsアニメーションを追加。
   font-weight 100→900→100 をループ。

5. Frosted Glass 強化
   header/cardのbackdrop-filterをより重厚に。
   backdrop-filter: blur(24px) saturate(180%) を適用。

6. カラーパレット微調整
   ライトモード：「砂浜×珊瑚×エメラルド」トーン
   ダークモード：「深海×星空×ネオンアクア」トーン

コード全文を出力してください。

以下のHTMLページに、2026年水準のインタラクティブ技術を追加してください。
（既存コードを壊さず、追加・修正のみ）

【追加する技術要素】

① View Transition API
   フィルターボタン切り替え時に document.startViewTransition() を使用。
   ::view-transition-old/new でslideUpアニメーションを定義。
   カードのクロスフェードをスムーズに演出。

② CSS @scroll-timeline（スクロール連動アニメーション）
   スクロールに連動してセクションタイトル（h2）が左から流れ込む。
   animation-timeline: scroll() と @keyframes slideIn を組み合わせる。

③ Intersection Observer API（登場アニメーション）
   IntersectionObserverでdock-cardの登場を検知。
   カードが画面内に入ったとき opacity:0→1 + translateY(20px→0) を
   50msずつ遅延させてstagger表示。

④ Web Animations API（WAAPI）
   Sparkleボタン押下時の演出を Element.animate() に移行。
   KeyframeEffect + GroupEffect で並列アニメーション管理。

⑤ CSS Houdini / @property
   グラデーションカード枠を @property --angle で定義。
   animation で --angle: 0turn→1turn をループ回転させ
   オーロラボーダーを実現。

コードを既存htmlに統合した完全版を出力してください。

以下のHTMLページに、視覚的に派手なアクションを3つ追加してください。
それぞれボタンまたはトリガーつきで実装すること。

【アクション① WARP SPEED（ハイパースペースジャンプ）】
- 「⚡ WARP」ボタンをtopbarに追加
- クリックすると画面全体に白い星が中央から放射状に飛び出す（StarField演出）
- canvas要素をfixed・z-index:9999で重ねてrequestAnimationFrameで描画
- 2秒後にフェードアウトして消える
- 発動中はbodyに warp-mode クラスを付与してページ全体をblur + scale(1.03)

【アクション② OCEAN WAVE（海の波が画面を横断）】
- 「🌊 Wave」ボタンをtopbarに追加
- クリックすると半透明のSVG波形（sine curve path）が画面下から上へゆっくり通過
- 波が通過したカードはわずかに浮かび上がり（translateY(-4px)）揺れる
- カラーは rgba(94,203,214, 0.18) のエメラルドグリーン
- 通過時間は3秒、その後要素は自動削除

【アクション③ MATRIX RAIN（文字の雨）】
- 「💻 Matrix」ボタンをtopbarに追加
- canvasで文字列が上から降り注ぐ
- Miko-Dock風に文字を ⚓✦♡🌊 の絵文字＋英数字に変更
- カラーは #5ecbd6（アクアブルー）
- 5秒後に自動終了。終了時 showToast('MIKO MATRIX 🌊') を呼ぶ

既存のtopbarボタンの横に3ボタン追加。
コード全文を出力してください。

以下のHTMLページに、ユーザーが「おっ！」と思う隠し・遊びアクションを3つ追加してください。

【アクション① カード長押しで「本音」が出る】
- dock-cardを800ms以上長押し（pointerdown→timer→pointerup）すると
  カードがぷるぷる震えてから、そのカードの「裏設定テキスト」がツールチップ表示
- 各ポートに secret フィールドを追加
  例）Diving →「実は水が怖い日もある」、AI Works →「全部AIがやってる」
- ツールチップは position:fixed・glassmorphism風・3秒後に自動消去
- 発動時 showToast('🤫 本音が漏れた') を呼ぶ

【アクション② Konamiコマンドでスーパーモード発動】
- キーボードで ↑↑↓↓←→←→BA を入力するとSUPER MIKO MODE発動
- 発動時：全カードに虹色グラデーションボーダーが出現（@property --angle アニメーション）
- フッターの作者テキストに金色オーラを追加
- AudioContextでシンプルな8bitファンファーレ音を生成（Web Audio API）
- showToast('👑 SUPER MIKO MODE ACTIVATED') を呼ぶ
- もう一度入力するとOFF

【アクション③ ページ放置60秒でスクリーンセーバー起動】
- ユーザーが60秒間無操作（mousemove/click/keydownなし）でスクリーンセーバー発動
- 画面が暗くなり、⚓アイコンが画面内をランダムに跳ね回る（DVD Logo風）
- ⚓が画面端に当たるたびに色が変わる（HSL hue rotation）
- 画面クリックまたはキー押下で即座に解除
- 発動中フッターが「💤 Zzzz... 港で休憩中」に変わる

コードを既存htmlに統合した完全版を出力してください。

以下のHTMLページを確認して、デザイン・UX・パフォーマンスの観点から
改善すべき点をプロフェッショナルな立場でアドバイスしてください。

【確認観点】

① アクセシビリティ
   aria属性・コントラスト比・キーボード操作の完全対応状況。
   スクリーンリーダー対応で抜けている箇所を指摘する。

② モバイルUX
   タッチ操作・スワイプジェスチャー対応の有無。
   44px以下のタップターゲットがないか確認する。

③ パフォーマンス
   アニメーション数・setInterval乱用・メモリリークの可能性を確認。
   DOM生成系の処理（cursor trail等）で改善できる箇所を指摘する。

④ SEO
   meta description・OGP（og:title / og:image）・構造化データの有無。
   不足している要素を列挙し、推奨コードを添えて提示する。

⑤ 今後追加すると面白い機能
   このサイトのコンセプト・デザイン・コードスタイルを読み取り、
   独自アイデアを3〜5個提案する。

【出力形式】
Markdownの箇条書きで、優先度（高/中/低）つきで出力してください。
実装コードが必要な項目は、コードスニペットも添えてください。