OpenDesign

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

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

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

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

モバイルアプリの画面案や操作の流れを画像で作成。iOS・Androidなどの特徴を踏まえ、文字の読みやすさや配色、複数画面の統一感を整えます。

• アプリ企画を複数画面で可視化したいとき
• 初回利用の案内画面を考えたいとき
• ログインと復旧画面を検討したいとき

スクロールに合わせて動くWebページをGSAPで実装するスキル。要素の固定や進行度の連動、横方向の演出から、位置の再計算と後片付けまで扱います。

• 画面に入った要素を動かしたいとき
• セクションを固定して見せたいとき
• 縦スクロールで横移動させたいとき

Figmaのデザイン部品とコードの部品をCode Connectで関連付け、共通のデザインルールや部品の更新をコード側へ自動反映するためのスキル。

• Figmaとコードの部品を関連付けたいとき
• デザインシステムの更新を反映したいとき
• Code Connectを導入したいとき

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

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

GSAPで作ったアニメーションのカクつきを減らすため、位置や透明度の変え方、画面更新のまとめ方、不要な処理の停止を見直し、描画負荷の軽減を支援します。

• GSAPのカクつきを減らしたいとき
• 多数のリスト要素の動きを改善したいとき
• マウス追従の演出を軽くしたいとき

流体のように揺れる背景に大きな見出しや短いメッセージを重ね、動画の冒頭、ランディングページのメインビジュアル、ポスターに使える単一HTMLを作ります。

• 短いメッセージ付きの動画冒頭を作りたいとき
• ランディングページのメインビジュアル制作
• 流体背景のポスターを作りたいとき

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

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

Figmaのデザインを、元の見た目に忠実な本番向けコードへ変換するスキル。フレームをフロントエンド担当のAIエージェントへ渡し、画面の実装に使えます。

• Figmaの画面を実装したいとき
• デザインをAIエージェントへ引き継ぐ
• デザインの見た目をコードで再現

画像内の物体の検出や領域分け、文字の読み取り、内容説明をfal.aiの画像認識モデルで行うスキル。画像についての質問にも答え、写っている情報を確認できます。

• 画像内の文字を読み取りたいとき
• 物体を検出して領域を分けたいとき
• 画像の内容説明や質問をしたいとき

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

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

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

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

Webサイトのデザイン画像を先に生成し、文字・余白・配色・配置を分析して画面に実装します。セクションごとの見本を使い、小型ノートPCでも読みやすい構成を目指します。

• 画像を見本にしたLP制作
• 小型画面でも読みやすいヒーロー制作
• 統一感のあるポートフォリオ制作

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

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

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

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

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

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

画像や動画の解像度を上げたいときに、fal.ai上のAI超解像モデルを利用するためのスキル。実行には、元の配布一式を別途導入して使います。

• 画像の解像度を上げたいとき
• 動画を高解像度化したいとき
• AI超解像処理を依頼したいとき

コードや文章の説明をもとに、Figmaの画面を作成・更新するスキル。デザインシステムの部品と、色や余白などの共通設定を使ってアプリ画面を再現します。

• アプリのコードをFigmaに移したいとき
• 文章の説明から画面を作りたいとき
• 共通部品を使った画面の更新

文章で伝えた内容を手描き風のExcalidraw図にするスキル。アニメーション付きSVG、オンラインの編集リンク、PNG書き出しを用途に応じて利用できます。

• 文章から手描き風の図を作りたいとき
• 図をオンラインで編集したいとき
• 図をPNG画像で書き出したいとき

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

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

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

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

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

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

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

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