デザインのスキル

ユーザー調査の背景・参加者構成・行動パターンを、紙の温かみを感じるスイス様式の3枚のHTMLスライドに整理し、図表と控えめな動きで伝えるスキル。

• ユーザー調査を3枚で報告したいとき
• 参加者構成をドーナツグラフで表示
• 行動パターンと根拠を並べた説明

商品発表やSNS共有向けの縦長ポスターを作成。大きな見出し、鮮やかなグラデーション、要点カードを組み合わせ、伝えたい情報を一枚にまとめます。

• 新商品の縦長ポスターを作りたいとき
• SNSで共有する告知画像の作成
• 特徴3〜5点を一枚にまとめたいとき

Google Stitchで画面を生成する際のデザイン方針をDESIGN.mdにまとめます。配色、書体、配置、動き、避ける表現を具体化し、画面間の統一に使います。

• Google Stitchの画面に共通ルールを作る
• 配色や書体、部品の振る舞いを文書化
• モバイル表示と動きのルールを定義

既存のOD Next計画に必要な画像などの素材を準備します。利用可能な機能や素材を再利用し、取得・寸法確認・非同期処理の結果回収まで、要件を保って進めます。

• 既存計画に必要な素材をそろえたいとき
• 複数ページで既存素材を再利用したいとき
• 配置に使う素材の寸法確認

UIのデザインを観点ごとに10点満点で評価し、満点に必要な状態とAI生成にありがちな表現を示すスキルです。変更を統合する前の品質確認に使えます。

• UI変更の統合前に品質を確認したいとき
• デザインを観点別の点数で把握したいとき
• AI生成らしい定型表現を見直したいとき

参考画像や曖昧な好みを、配色・書体・レイアウトなどの具体的なデザイン方針に整理し、再利用できるDESIGN.mdと制作担当への引き継ぎ資料にまとめるスキル。

• 参考画像からアプリの見た目を決めたいとき
• リデザイン前に判断基準を整理したいとき
• スライドのデザイン方針を引き継ぎたいとき

デザインの要件と実装したUIの見た目のずれを詰めるため、講評・調整・仕上げを繰り返す作業を案内し、別途導入する元のワークフローにつなぐスキル。

• 実装画面とデザイン要件を見比べたいとき
• 見た目のずれを繰り返し調整したいとき
• デザインから実装への見直し工程を計画

提供したHTMLやテキストをiPhoneとMacBookの画面内に配置し、ガラス風のハイライトや床面の反射を添えた立体的な製品紹介ページを作るスキル。

• 製品発表でアプリ画面を見せたいとき
• モバイルとデスクトップのデザイン展示
• テキストやデータをアプリ風に見せたいとき

AIエージェントが画面を作る際に、複数の小さなUI部品へ共通の制作ルールを適用するためのスキル。インターフェース全体の一貫性を保つ指針として使います。

• 複数のUI部品の一貫性を保ちたいとき
• 画面制作の共通ルールをエージェントに渡す
• 制作計画にUIの制約を取り入れたいとき

太い見出しと幾何学的なカードを使い、スイス風のプレゼン型ページを単一HTMLで作るスキル。スライド移動やテーマ切り替え、注釈表示も組み込みます。

• プレゼン型の紹介ページ制作
• スイス風のHTMLスライド制作
• 操作できる製品発表ページ制作

入力した文章やデータを、いいね・リポスト・閲覧数付きのX風投稿カードに整え、動画への重ね表示や画像共有に使う単一HTMLを作るスキル。

• 動画に投稿カードを重ねたいとき
• 印象的な言葉を共有用カードにしたいとき
• 入力データを短い投稿文にまとめたいとき

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

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

質問と回答を折りたたみ表示し、検索やカテゴリで絞り込めるFAQページを作成。サービスに合う質問内容から問い合わせ先への案内まで、単一のHTMLにまとめます。

• SaaSのヘルプページを作りたいとき
• 料金やアカウントの質問整理
• ネットショップのFAQ検索ページ作成

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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