スキルを探す

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

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

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

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

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

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

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

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

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

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

コード編集で積み重なった変更を差分とファイル別の説明にまとめ、確認画面で承認・却下・一部承認を選べます。判断を記録し、却下した変更の取り消しまで扱います。

• コード移行後の変更を確認したいとき
• ファイルごとに変更を承認したいとき
• 引き渡し時にレビュー判断を記録したいとき

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

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

画面構成を検討するための手描き風ワイヤーフレームをHTMLで作ります。方眼紙、付箋、ラフなグラフ、案を示すタブを使い、設計初期の考えを可視化します。

• ポータルやダッシュボードの初期構成を検討
• 複数案をタブラベルで示したいとき
• 画面の下書きにレビュー用の注釈を付ける

シルバーやクリーム色を基調に、柔らかな質感のウェブ試作品を作るスキル。二重枠のカード、大きな角丸、浮遊するナビゲーション、滑らかな動きを統一して設計します。

• 落ち着いたSaaSサイトを試作したいとき
• 消費者向けサイトの質感を検討したいとき
• カードとボタンで機能を紹介したいとき

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

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

Figmaファイルから要素の階層、色や文字などのデザイン設定、書き出し対象の画像素材を抽出するスキル。後続の変換や実装で使えるファイルとして保存します。

• Figmaの要素構造を抽出したいとき
• 色・文字・余白の設定を集めたいとき
• 実装用の素材を準備したいとき

ピクセルアートのキャラクター、大きな年号、動く文字や年表を組み合わせ、歴史や豆知識を紹介する画面録画向けのアニメーション付きHTMLを作るスキル。

• 歴史解説の一場面を作りたいとき
• 豆知識をピクセルアートで伝えたいとき
• 画面録画用のレトロな動きを作りたいとき

デスクトップ向けダッシュボードの画面構成を、灰色のブロックで示すHTMLワイヤーフレームにします。配色や写真を決める前に、情報の優先順位や配置を確認できます。

• ダッシュボードの配置を確認したいとき
• ナビゲーションと情報の優先順位の検討
• KPI・グラフ・表の配置検討

新機能の課題・目標・対象範囲・成功指標を、一ページの製品要件書に整理します。利用者の要望や段階的な実施計画、未解決の質問もまとめ、HTMLで出力します。

• 新機能の要件書を作成したいとき
• 目標と対象外の範囲を共有したいとき
• 成功指標と測定方法の整理

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

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

シェーダーや3Dシーン、粒子の動きを全画面で描き、見出しを重ねたWebGL表現を制作。外部通信のない単一のHTMLファイルにまとめます。

• Webサイトのヒーロー動画表現
• 見出し付き生成アートの制作
• 3Dシーンや粒子表現の試作

既存リポジトリのファイル構成や依存関係、コンポーネント、ルーティングを記録し、移行や改修の際にエージェントが繰り返し参照できる構造データを作るスキル。

• コード移行の下準備をしたいとき
• 改修前に部品や画面構成を記録したいとき
• 構造データを会話間で再利用したいとき

複製・再実装したWebサイトの公開前に、見た目の差異や追跡スクリプト、元ブランドの残存、仮置き文言、外部依存を点検し、根拠付きの監査報告をまとめるスキル。

• 複製サイトの公開前点検
• 元ブランドや別言語の残存確認
• 追跡スクリプトと外部依存の確認

制作の方向性や内容構成、納品形式を左右する未確認事項を、必要最小限の質問フォームにまとめるスキル。選択肢や入力欄を使い、作業再開に必要な回答を集めます。

• 制作を止めている要件を確認したいとき
• 未確定の対象読者の確認
• 納品形式を決めたいとき

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

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

レビューで受け入れた成果物を、CLIやコードエージェント、Figmaなど指定した作業先へ引き渡し、成果物の管理情報に出力先と配布履歴を追記するスキル。

• 確認済み成果物をコードエージェントへ渡す
• 編集結果を元のFigmaファイルへ戻す
• 成果物をGitHubへPRで渡したいとき

複数SNSのフォロワー数や投稿への反応、人気投稿、話題、コメントを見渡せる分析画面を、整合性のあるサンプルデータ入りの単一HTMLで作るスキル。

• クリエイター向け分析画面の試作
• 複数SNSの指標表示を設計したいとき
• フォロワー推移と人気投稿の表示

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

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

制作したデザインを、レイアウト・目的への適合・ブランド・使いやすさ・文章の5つの観点で点検し、見つかった具体的な不備の修正まで進めるスキル。

• 納品前のデザイン点検
• ブランドの指定との整合確認
• キーボード操作やコントラストの確認