スキルを探す

デスクトップ向けのランディングページを、注目から行動へ導く構成、大きな文字と余白、隙間のないグリッド、スクロールに連動する動きを組み合わせて設計するスキル。

• スクロール演出のあるLPを試作したいとき
• 冒頭の配置や文字組みを変えたいとき
• 空きのないカードグリッドの設計

GSAPのプラグインを使い、文字やSVGの動き、ドラッグ操作、レイアウト切り替えを実装するスキルです。用途に合う機能の選択から登録、設定、後始末まで扱います。

• 見出しを一文字・一行ずつ動かしたいとき
• SVGの描画や図形変形を加えたいとき
• 慣性のあるドラッグ操作を作りたいとき

Figma Plugin APIのスクリプトを実行し、キャンバスへの書き込みや内容の確認、変数の操作、デザインシステムに関わる作業を進めるスキル。

• スクリプトでキャンバスに書き込みたいとき
• Figmaのキャンバス内容を確認したいとき
• 変数やデザインシステムを扱いたいとき

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

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

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

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

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

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

fal.ai上の試着モデルを使い、人物が服を着たときの見え方を画像で確認するスキルです。EC向けの着用イメージやルックブック、着こなしの検討に使えます。

• EC向けの着用イメージを検討したいとき
• ルックブック用の着こなしを試したいとき
• 人物が服を着た見え方を確認したいとき

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

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

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

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

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

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

文章や画像をもとに、fal.aiで3Dモデルを生成するためのスキル。ゲーム素材、ARでのプレビュー、商品の試作イメージ、立体のコンセプト作りに使えます。

• ゲーム向け3D素材を生成したいとき
• ARプレビュー用モデルの作成
• 商品の試作イメージ作り

公開サイトの配色・フォント・ロゴ・画像・文体を実測して整理し、ブランドガイドやプレビュー付きの再利用可能なデザインシステムにまとめるスキル。

• サイトの配色・フォント・ロゴの整理
• 参考サイトからブランドガイドを作りたいとき
• ブランドを表す画像の収集

fal.aiで人物が話す動画を作り、音声に合わせて映像の口の動きを同期させるスキル。解説用アバターや多言語吹き替えの試作、SNS向け動画に使えます。

• 解説用の話すアバターを作りたいとき
• 多言語吹き替えのプレビュー作成
• 音声と口の動きを同期させたいとき

見た目の要望を伝えるプロンプトに、デザイン仕様やUI/UXの用語を補い、画面づくりやデザインからコードへの実装で使う依頼文を具体化するスキル。

• 見た目に関する依頼を具体化したいとき
• デザインから実装への依頼文の整理
• UI/UXの用語を依頼文に補いたいとき

新しいサービスや製品に合うドメイン名の案を出し、.com・.io・.dev・.aiなど複数の末尾で取得できるかを確認するスキル。

• 新サービスのドメイン名を考えたいとき
• 複数の末尾で空き状況を確認したいとき
• 製品名に合うドメインを比較したいとき

ロゴ、配色、書体、画面や印刷物への展開例を一枚の画像にまとめるスキル。ブランドの目的や対象者を踏まえ、統一感のあるデザイン案を視覚化します。

• 新製品のブランドイメージを共有
• 意味のあるロゴ案を検討したいとき
• 配色・書体・使用例をまとめて確認

文章や知識を、小红书風の複数枚のカードにまとめるスキル。表紙から要点、まとめまでを大きな文字と柔らかな配色で構成し、投稿用にスクリーンショットを撮れます。

• ノウハウを知識カードに整理
• 小红书向けのカルーセル投稿作成
• WeChatの朋友圈向け画像作成

fal.aiを使ったリアルタイム・ストリーミング画像生成で、ムードボードの方向性探しや下書きの別案づくりを支援し、制作初期の案を繰り返し試すスキルです。

• ムードボードの方向性を探したいとき
• 下書き画像の別案を作りたいとき
• 制作初期の案を繰り返し試したいとき

React、Tailwind CSS、shadcn/uiを使い、複数の部品を組み合わせたclaude.ai向けのHTMLアーティファクトを制作するスキル。

• claude.ai用のHTMLを作りたいとき
• 複数部品からなる画面の試作
• Reactとshadcn/uiでの制作

ポスターやイラストなどの静止画作品を、デザインの考え方や美的な原則に沿って制作するスキル。成果物をPNG画像やPDF文書として作成できます。

• ポスターを制作したいとき
• イラストを作りたいとき
• 静止画作品をPNGやPDFにしたいとき

Apple製品向けの画面設計で、人が操作しやすいUIの指針を参照するためのスキル。iOSやmacOSなどの基礎・部品・操作方法を扱う14スキルを案内します。

• iOSアプリの設計指針を確認したいとき
• macOSの画面部品を参照したいとき
• visionOSの操作設計を調べたいとき

工業マニュアルや古い端末を思わせるWeb画面を、厳密なグリッド、大きな文字と細かなデータ表示、赤い差し色、紙や走査線の質感で設計するスキル。

• データ量の多いダッシュボードを試作したいとき
• 印刷物風のポートフォリオ制作
• 暗い端末風の画面を作りたいとき

Markdownやメモを、雑誌のように読みやすく整えた長文HTML記事に仕上げます。大きなタイトルと一列の本文に、引用やコードの専用スタイルを組み合わせます。

• Markdownを雑誌風の記事にしたいとき
• メモからエッセイを整えたいとき
• 長文ニュースレターのデザイン

曖昧なデザインの要望を、配色・書体・レイアウトなど８つの観点で具体化します。実装の基準となる仕様書とHTMLプレビューを作り、補った初期値も明示します。

• 曖昧なデザイン要望を具体化したいとき
• LPの配色・書体・余白の設計
• HTMLで見た目を確認したいとき