デザインのスキル

数値の比較や階層、手順、時系列などを小さな静的HTML/CSSの図にし、Markdownの説明に添えて、文章だけでは伝わりにくい情報を見やすく示すスキル。

• 主要指標を視覚的に比較したいとき
• 作業の流れや手順の図解
• 出来事を時間軸で整理したいとき

テーマや文章、写真から、紙の質感と広い余白を生かした縦長ポスターを制作します。参考画像の分析や、統一感のある別レイアウト、画像生成用プロンプトの作成にも対応します。

• 記事の内容をポスターにしたいとき
• 写真の被写体を生かしたポスター制作
• 参考画像からスタイルを抽出したいとき

ページやコンポーネントを新規作成し、既存画面の余白・配色・文字組みを整えます。製品のデザインや参考画像を根拠に方向性を決め、実際の表示と画面サイズ別の仕上がりを確認します。

• 新しいページや部品を作りたいとき
• 既存画面の余白や文字組みの調整
• スクリーンショットを使った画面改善

iPolloWorkのプラグイン画面を、既存の共通部品と色・文字・操作の規則に沿って設計・実装します。Reactとiframeの接続方法や状態別の検証も扱います。

• 共通部品でプラグインのフォームを作りたいとき
• iframeに共有UIを組み込みたいとき
• 読み込み・エラー・再試行の表示設計

iPolloWorkのデザイン・編集可能なPPT・動画を、内容の差し替えやテーマ変更に使える再利用テンプレートへ整え、検証して保存するスキル。

• 既存プロジェクトをテンプレート化したいとき
• 編集可能なPPTのひな形を作りたいとき
• 内容を差し替えるデザインや動画の作成

コードに合わせてFigmaのデザインシステムを作成・更新するスキル。色や余白の変数、テーマ、部品の状態別パターン、説明ページまで順に整え、構造と見た目を確認します。

• 既存コードからFigmaの部品集を作りたいとき
• 共通変数とライト・ダークテーマの整備
• 状態別パターンと変数を持つ部品の作成

iPolloWork Designの作業中セッションで、テンプレートの見た目や編集可能な構造を保ちながら、スライド資料の新規作成・部分修正・表示確認を行うスキルです。

• 現在のDesignセッションで資料作成
• 文章や選択したスライド要素の修正
• 配置を保ったテーマカラーの変更

Figma内でJavaScriptを実行し、図形やテキストの編集、コンポーネントや変数の設定、レイアウト調整、ファイル構造の調査を段階的に進めるスキル。

• Figmaの図形やテキストを編集したいとき
• コンポーネントやバリアント、変数の設定
• 自動レイアウトや塗り、変数の関連付け調整

業務の流れやシステム構成、データの関係を、FigJamで編集できる図にまとめます。図の種類を選び、Mermaidの記法や描画上の制約を確認するスキルです。

• 業務フローや意思決定の図解
• サービスとデータストアの構成整理
• APIのやり取りを図解したいとき

Figmaの要素にキーフレームや既存のアニメーションスタイルを設定し、色・位置などの動き、速度の変化、タイムラインの長さを編集・確認するスキル。

• Figmaの要素に位置や色の動きを付けたいとき
• 動きの加減速やタイミングの調整
• 既存アニメーションスタイルの適用・解除

デザインの種類に応じて専門スキルへ引き継ぎ、その他のデザインは既存の素材や編集範囲を保ちながら、作成・修正・テーマ調整を進めるスキル。

• 種類に合う専門スキルへ振り分けたいとき
• 既存デザインを部分修正したいとき
• 内容や配置を保ってテーマを変えたいとき

FigJamの付箋・図形・接続線・表をAIエージェントから作成・編集するスキル。既存ボードの構造を確認し、会議や発想整理に使う内容と配置を整えます。

• 付箋でアイデア出しの場を準備
• 振り返りや会議用ボードの作成
• 図形と接続線で関係を図示したいとき

iPolloWork DesignでポスターやSNS用カードシリーズを作成・編集します。既存の編集範囲やデザイン設定を保ち、完成サイズで全体や各カードの仕上がりを確認します。

• ポスターを作成したいとき
• SNS用カードシリーズの制作
• 選択した文章やテーマの修正

コードや説明をもとに、既存のコンポーネントや色・余白の定義を再利用して、ページやモーダルなどの複数セクションからなる画面をFigma上に作成・更新します。

• コードからアプリ画面を再現したいとき
• 既存のデザイン部品を使ったLP作成
• 説明からモーダルやサイドバーを作成

iPolloWorkの画像サービスで、指定した構図やスタイルに沿う画像を生成します。単体の画像づくりや、スライド・Webサイト・動画の素材作成に使えます。

• 構図やスタイルを指定して画像を作りたいとき
• スライドの説明用画像の作成
• Webサイト用の画像素材づくり

Figmaのデザイン、FigJam、Slidesの空ファイルを、種類と名前を指定して作成します。作成先のプランを確認し、後続の編集に使うURLとキーを取得するスキルです。

• Figmaの空デザインファイル作成
• 名前を付けたFigJamの新規作成
• 空のSlidesプレゼンテーション作成

Figma Slidesで資料を新規作成したり、既存スライドの文章や配置を修正したりするスキルです。ブランドに沿ったデザインや発表者用ノートの作成も扱います。

• ブランドに沿ったプレゼン資料作成
• 既存資料の文章や配置を修正したいとき
• スライドをセクションごとに整理

iPolloWork Designの作業中セッションで、編集対象や共通のデザイン設定を維持しながら、Webサイトやアプリ画面の新規作成・部分修正・動作確認を進めるスキルです。

• Designでサイトやアプリ画面を作成
• 文章や選択した部品の編集
• 内容と配置を保ったテーマ変更

iPolloWorkの参考文書から抽出済みの内容・デザイン情報・素材を読み、編集した要件に沿って動画やスライド、サイトなどの制作に反映し、素材の実使用を検証するスキル。

• 参考文書の数値を使ったスライド制作
• 参考資料のスタイルをサイトに反映
• 文書内の素材を動画で再利用

文章で伝えた手順や関係性を、Excalidrawで開いて編集できる図にまとめます。フローチャートや構成図、マインドマップなどを、用途に合う配置と見た目で作成します。

• 業務手順をフローチャートにしたいとき
• アイデアをマインドマップで整理
• サービスアイコン付きクラウド構成図

Webページやアプリの画面を、用途に合うデザイン方針から動くコードまで作成します。書体・配色・余白・動き・操作時の表示を整え、画面サイズに応じた見せ方も設計します。

• 特徴のあるLPを作りたいとき
• ダークテーマの分析画面の作成
• 画面サイズに対応する部品の実装

Figmaの指定した画面やレイヤーから、構造・画像・変数・素材を取得して実装に活用します。既存の部品やスタイルに合わせたコード化と、MCP接続の設定・不具合調査を支援します。

• Figmaの特定の画面やレイヤーの調査
• 実装用の画像やSVG素材の取得
• 既存の部品に合わせて実装したいとき

Webページやアプリの画面を作る前に、目的や参考デザイン、配色、書体を対話で整理するスキル。合意した方針に沿い、小さな単位で確認しながら実装を進めます。

• ページ制作前に見た目の方針を固めたいとき
• 参考資料やブランドに沿ったダッシュボード設計
• 既存画面の改善相談

記事や事例、ブランドの物語を、スクロールで展開する一枚のWebページに仕立てます。動画、Three.js、HTMLの3方式から内容に合う表現を選びます。

• 長文記事を視覚的に読ませたいとき
• 製品の物語を3D空間で伝えたいとき
• 調査結果をスクロール連動の図表で説明