スキルを探す

ランディングページなどのWebデザイン案を、セクションごとに独立した横長画像で生成。配色をそろえながら構図や余白、ボタンの見せ方を変え、実装の参考に使えます。

• LPをセクション別に検討したいとき
• 冒頭の構図を検討したいとき
• 開発者に参考画像を共有したいとき

映画的なアニメーション、MiniMax APIによるAI生成メディア、生成アートを使ったWeb制作を案内。冒頭の主役となるページや作品紹介サイト向けの項目です。

• 映画的な動きのヒーローページ制作
• 作品紹介サイトの制作
• AI生成メディアをWebで使いたいとき

ReactやNext.jsでGSAPのアニメーションを実装し、対象要素の指定から更新時・コンポーネント削除時の後片付けまで整えるスキル。

• Reactの画面に動きを加えたいとき
• コンポーネント削除時の後片付け
• アニメーションの対象範囲の見直し

Figma DesignやFigJamに空の新規ファイルを作成します。デザインシステムの整備やワークショップを、エージェントで進める際の最初の準備に使えます。

• 空のFigma Designを作りたいとき
• ワークショップ用のFigJam準備
• デザインシステム作業の初期準備

スマートフォン向けのログイン画面を、単体のHTML試作として作成します。SMS認証やパスワード、外部アカウントでのログインに合わせ、入力エラーや処理中の表示も整えます。

• 電話番号とSMS認証を試作したいとき
• パスワードログイン画面の設計
• 外部アカウントログインの検討

Webページの要素やSVGに、移動・回転・フェードなどの動きを実装します。GSAPの基本APIを使い、速度変化や時間差、画面幅と動きを減らす設定への対応も扱います。

• Webページに移動やフェードを付けたいとき
• 複数要素を時間差で動かしたいとき
• 画面幅に応じて動きを変えたいとき

告知やメッセージを、アプリアイコンと見出しを備えたmacOS風の通知バナーに整えます。動画への重ね表示や製品予告、SNS画像に使えるHTMLを作成します。

• 動画に通知バナーを重ねたいとき
• 製品公開の予告を作りたいとき
• SNS用の告知画像作成

GSAPのアニメーションで使う数値変換や範囲制限、ランダム化を実装・レビューします。スクロール量に応じた変化や、一定間隔への吸着、複数要素の扱いを支援します。

• スクロール量を移動や回転に変換
• アニメーションの値を範囲内に制限
• 位置や色にランダムな変化を追加

VueやSvelteなどでGSAPのアニメーションを実装・レビューするスキルです。画面要素の表示後に動きを作り、対象範囲の限定から削除時の後始末まで扱います。

• VueやSvelteに動きを追加したいとき
• 部品削除時の後始末を確認したいとき
• アニメーションの対象範囲を限定したいとき

OD Libraryに保存済みの画像やロゴ、スクリーンショットを検索し、選んだ素材を現在のプロジェクトへコピーして、制作中のページに組み込むスキル。

• 以前保存した画面画像の再利用
• 保存済みロゴをページに入れたいとき
• 手持ちのメイン画像を探したいとき

要素を抑えた画面構成で、見た目の整ったランディングページやWebサイト、アプリのUIを作成します。OpenAIのフロントエンド制作指針を利用するスキルです。

• 控えめな構成のLPを作りたいとき
• 見た目の整ったWebサイト制作
• アプリのUIを作りたいとき

心理学と行動科学の考え方を文章やデザインに取り入れ、関心を引く導入、情報の伝え方、価格の見せ方を見直すスキルです。販促表現を検討する際に使えます。

• 関心を引く導入文を整えたいとき
• 情報の伝え方を見直したいとき
• 価格の見せ方を改善したいとき

コードベースをもとにFigmaのデザインシステムライブラリを作成・更新します。実装済みの部品と、デザイン側で参照するライブラリを揃える作業に使えます。

• コードからFigmaライブラリを作りたいとき
• 実装に合わせたデザインライブラリの更新
• デザインの参照資料と実装を揃えたいとき

紙のような背景とパステルカラーのカードを使い、主要指標や分析結果、継続率のグラフを雑誌風の一枚のHTMLレポートに整えるスキル。

• 雑誌風の事業レポート作成
• 経営会議向けの一枚資料作成
• 主要指標と考察をまとめたいとき

作成済みのWebページやHTMLを点検し、既存の内容やブランドを保ちながら、見た目・文章・動き・操作性の問題を修正して共有前の仕上げを行います。

• 生成したページを共有前に整えたいとき
• 画一的な見た目や不統一を見直したいとき
• モバイル表示や操作性を修正したいとき

暖色の光漏れ、35mmフィルム風の粒子、大きなセリフ体を組み合わせ、映画風の冒頭画面や章タイトルを作るスキル。単一のHTMLにまとめます。

• ドキュメンタリーの冒頭画面制作
• 個人短編のタイトル画面作成
• 映画風の章タイトル制作

業務手順やシステムの流れを、付箋と曲線の矢印で白板風に図解するスキル。分岐や合流も表し、導入案内や運用説明に使える単一HTMLにまとめます。

• 利用開始までの流れを図解したいとき
• 運用手順を説明したいとき
• システム構成の説明

アニメーションを使ったHTMLプレゼンテーションを作るスキル。見た目のプレビューを確認しながら、オンライン講演や埋め込み用の発表資料を制作できます。

• オンライン講演のスライド作成
• Webページへの発表資料の埋め込み
• 操作できる説明資料を作りたいとき

CSVやJSONのデータを、新聞記事風の見出しと段階的なアニメーション付きの図表にします。折れ線・棒・範囲帯で、動画やSNS向けに結論を伝えます。

• 動画でデータの推移を伝えたいとき
• SNS用の図表カードを作りたいとき
• CSVやJSONを図表にしたいとき

Webサイトや業務画面を、用途に合う見た目と動くコードまで仕上げるスキル。文字組み、配色、レイアウトに加え、スマートフォン表示や操作時の状態も整えます。

• 方向性のあるランディングページ制作
• 日常業務向けダッシュボードの設計
• 既存UIの見た目と操作を整えたいとき

Google Geminiの画像生成APIを使い、UIの完成イメージやアイコン、イラストなど、画面や制作物に使うビジュアル素材を作るスキル。

• UIの完成イメージを作りたいとき
• デザイン用のアイコン生成
• 制作物に使うイラスト生成

プレゼンや文書に使う画像・スクリーンショットの解像度、シャープさ、明瞭さを改善するスキルです。実行には配布元の関連ファイル一式を導入します。

• プレゼン用画像を整えたいとき
• 文書用スクリーンショットの明瞭化
• 画像の解像度を上げたいとき

写真をもとに、Funko PopやPop Mart風の動くGIFステッカーを作るスキル。MiniMax APIを使い、チャット用スタンプやアバター集の制作に使えます。

• 写真から自分用のチャットスタンプ制作
• 玩具風の動くステッカーを作りたいとき
• 写真をもとにしたアバター集の制作

幾何学パーツが組み上がるロゴに光の演出を加え、ブランド名や短いメッセージ、行動を促す案内を順に表示します。動画の片尾向け演出を単一のHTMLで作るスキルです。

• ブランドを伝える動画の片尾制作
• 締めにロゴとメッセージを表示したいとき
• 片尾にサイトやSNSの案内を載せたいとき