nexu-io

画面のアニメーションを設計・実装・レビューし、操作への反応や動きの滑らかさを整えます。録画から速度変化やばねのような動きを分析し、再現用コードにもまとめます。

• ボタンやメニューに動きを付けたいとき
• 録画の画面アニメーションを再現したいとき
• 遅さやカクつきの原因を調べたいとき

160件の動きのサンプルからWebページや部品に合う表現を探し、HTML・CSS・JSを既存の構成に合わせて調整するスキルです。文字やスクロール演出にも対応します。

• ボタンにクリック時の波紋を加えたいとき
• 見出しをタイプライター風にしたいとき
• スクロールに応じて要素を表示したいとき

モーショングラフィックスの企画や改善で、伝える内容、文字の動き、場面のつながり、読む時間を整理し、一つの意図が伝わる映像やアニメーションの設計を支援します。

• 短い製品紹介映像を企画したいとき
• 動く文字の読みやすさを改善したいとき
• 共通のモチーフで場面をつなぎたいとき

動画や連番画像を処理し、スクロール、ポインター、ドラッグなどに応じて動くWeb演出を作ります。素材の制作計画から時間軸の整理、再生制御、動作確認まで扱います。

• スクロールと動画再生を連動させたいとき
• ドラッグで動きの状態を切り替えたいとき
• 既存動画や連番画像のWeb向け処理

アート調のアニメーションや解説映像の構図・絵コンテ・画面内の動きを設計し、35種のスタイルと9種の解説パターン、Canvas用コードで実装を支えるスキル。

• 解説映像の絵コンテを作りたいとき
• アニメーションの画風を選びたいとき
• Canvasで再現可能な動きを作る

既存のUIや合意済みの画面案に、目的と操作頻度に合うアニメーションを実装し、連続操作による中断や動きを減らす設定にも対応させるスキル。

• モーダルやドロワーの開閉演出
• ボタンやトグルの操作への反応
• 連続操作で中断される動きの調整

古典的なイラストとコバルトブルーを基調に、映画のようなスクロール演出を備えた制作スタジオの紹介サイトを、ブランドや事業内容に合わせて作るスキル。

• 建築スタジオのサイトを作りたいとき
• 古典美術風の作品紹介サイト制作
• サービスやFAQをまとめたいとき

新聞紙風の背景と極太の文字、細い罫線で、スイス印刷物風のWeb試作を作ります。赤を差し色に使い、編集記事やポートフォリオを硬質な見た目にまとめます。

• 新聞風の編集ページを試作したいとき
• 制作会社のポートフォリオ制作
• マニフェストサイトの制作

商品のお披露目や予告、背景ループに使う3〜10秒の短い動画を生成します。被写体や動き、照明を整理し、指定の長さと縦横比でMP4を保存します。

• 商品のお披露目動画を作りたいとき
• 動きのある短い予告の制作
• 雰囲気を伝える背景ループ作り

市場データを密に並べた取引分析ダッシュボードを、単一のHTMLで作成。明暗テーマの切り替えやチャートの詳細表示、コマンドパレットを備えた画面を用意します。

• 金融分析端末の画面を試作したいとき
• 市場情報を密に並べた画面の提示
• チャートの詳細表示や操作感の実演

メモや文書から聴衆の理解を進める発表構成を作り、各ページの画像・図・動画と制作指示を整理するスキル。描画後は構成との一致を最大3回点検します。

• メモや文字起こしから発表を構成したいとき
• 各スライドの画像・図・動画を計画したいとき
• HTMLスライドやPPTXの制作指示書作成

粒子やフラクタル、データの動きを描く可視化画面を、重い計算をWeb Workerに分け、毎秒60フレームを目指す単一HTMLとして作るスキルです。

• 粒子や物理シミュレーションの試作
• フラクタルを可視化したいとき
• 音声やデータの可視化画面づくり

公開前の製品の先行登録ページを、ブランドの配色や書体に合わせて作成します。ロゴと製品紹介、メール登録フォームを一つのHTMLにまとめるスキル。

• 製品公開前のメール登録ページ作成
• ベータ版の参加者を募集したいとき
• 先行アクセスへの関心を集めたいとき

新しいWebページの制作や既存UIの見直しで、構成・配色・書体を整えるスキルです。URLや画像のデザイン分析、改善点の優先順位付けにも対応します。

• 新しいランディングページを作りたいとき
• 既存UIの改善点に優先順位を付けたいとき
• 参考ページや画像を分析したいとき

機能提案やロードマップ、設計レビューの資料を、意思決定に使う横送りのHTMLスライドに整理します。8種類から一つのテーマを選び、全ページの見た目を統一します。

• 新機能の採用理由を説明したいとき
• ロードマップのレビュー資料作成
• 技術設計の選択肢を判断したいとき

今週の成果、進行中の作業、障害、重要指標を週次報告用のHTMLスライドに整理。注目すべき数値や異常と、翌週に必要な判断・依頼をチームで共有する資料を作ります。

• チームの週次報告資料作成
• KPIの変化や異常を共有したいとき
• 作業の障害と支援依頼の整理

SNS向けの正方形カード3枚を、見出しがつながるシリーズとして作成します。ブランド表記や連番をそろえ、映画のような色調を持つHTMLにまとめます。

• Instagramの3枚投稿を作りたいとき
• LinkedInの連続投稿用デザイン
• Xのスレッド用カード制作

プロジェクトで設定されたビルド・型検査・テストのコマンドを実行し、成否や失敗内容をレポートとログに残して、自動修正ループの終了判定につなげます。

• フレームワーク移行後の動作検証
• 編集完了後のビルド・テスト確認
• 自動修正ループの終了判定

製品紹介、機能、利用者の声、料金、申し込みへの案内を備えたSaaSの紹介ページを作ります。DESIGN.mdの色や書体、配置に沿って単一のHTMLにまとめます。

• SaaS製品の紹介ページを作りたいとき
• 既存のデザイン方針に合わせたいとき
• 機能・利用者の声・料金をまとめたいとき

複数のSNSの指標をまとめて見る分析ダッシュボードを、単体のHTMLで作成。グラフの詳細表示や期間比較、明暗テーマの切り替えを備えた画面に整えます。

• 複数SNSの指標をまとめて確認したいとき
• グラフで選んだ期間を比較したいとき
• グラフの各点と分析内容を確認したいとき

サービスの料金プラン、機能比較表、よくある質問をまとめたHTMLページを作成。プラン数や推奨表示を整え、契約前に内容を比べられる料金ページを試作するスキル。

• サブスクリプション料金ページの試作
• プラン別の機能を比較したいとき
• 個人向けと法人向けのプラン提示

Notionの過去24時間の文書編集、コメント、メンション、データベースの行変更を集め、日々の更新を確認しやすいNotion形式のページにまとめます。

• 前日のNotion文書編集を確認したいとき
• コメントやメンションを日次で確認したいとき
• データベースの行変更をまとめて確認したいとき

デスクトップ向けランディングページの構成を灰色のボックスで描き、番号付きの注釈と仕様パネルで、配置や実装時の要点を共有するワイヤーフレームを作ります。

• デスクトップ向けLPの構成検討
• 開発担当への仕様メモ共有
• ナビや訴求エリアの配置確認

ソースコードやFigmaの抽出データ、スクリーンショットから色・書体・余白などのデザイン設定を集め、出典や使用箇所を添えたJSONに整理します。

• コードに散らばるデザイン設定の整理
• Figmaのデザイン移行準備
• スクリーンショットからの設定抽出