デザインのスキル

言葉だけでは決めにくい設計を、操作できる試作品で比較・確認します。ロジックの状態変化や構成の異なるUIを試し、利用者の反応を設計判断として記録します。

• 構造が異なるUIを3案比較したいとき
• 操作しながら状態変化を確認したいとき
• 実物がないと決まらない設計の検討

キャラクター・背景・道具の設定を画像生成用の指示文にまとめ、複数視点の参考図や衣装・時間帯などの差分で、外見と空間の一貫性を保つスキルです。

• キャラクターの多視点設定図の設計
• 隣接する背景の見た目をそろえたいとき
• 主図から衣装や時間帯の差分を作るとき

Steve Jobsの公開情報から整理した思考法で、製品の体験や戦略を見直すスキル。ユーザーの反応や競合を調べ、削るべき機能や、品質を高める細部を検討します。

• 製品の機能を絞り込みたいとき
• ユーザーの反応と競合から操作を点検
• 製品価値を一文で定義したいとき

画像生成の目的に合うテンプレートや画風を選び、構図・文字・縦横比・避けたい表現まで整理したGPT-Image2向けのプロンプトを作成・改善するスキル。

• 商品画像やポスターの指示文を作りたいとき
• 図解の配置やラベルを指定したいとき
• 画像の画風を比較したいとき

既存の画面・資料・部品を調べ、製品の目的から見た目、操作性、実装制約までをDESIGN.mdに整理し、継続して使うUI設計の判断基準をまとめるスキル。

• UI設計の共通ルールを文書化したいとき
• 実装前に設計方針を固めたいとき
• 既存画面や素材の制約を整理したいとき

ポスターや静的なアートを、色・形・余白の方針づくりから制作するスキル。デザイン思想をまとめたMarkdownと、文字を抑えたPNG・PDFの作品を作ります。

• オリジナルのポスター制作
• テーマを抽象アートで表現したいとき
• デザイン方針と作品をそろえたいとき

スライドや文書、レポート、HTMLのランディングページに、配色とフォントを統一して適用します。10種類の既定テーマから選ぶほか、用途に合わせた新規テーマも作れます。

• スライドの配色とフォントを統一したいとき
• 文書やレポートの見た目を選びたいとき
• HTMLのLPにテーマを適用したいとき

draw.ioの図を作成・編集し、日本語ラベルや矢印、余白を整えるスキル。AWSアイコンを使った構成図や、スライド向けの透過PNG出力にも対応します。

• AWSの構成図を作りたいとき
• 日本語ラベルや矢印の重なりの修正
• スライド用の透過PNG出力

Excalidrawの構成図やフローチャートの作成・修正・比較を、別のエージェントに任せるスキル。図の読み取りも分担し、主要な会話には要点だけを返します。

• 既存図の構成要素と接続関係を把握
• 図に要素と接続を追加したいとき
• 構成図やフローチャートの新規作成

講義や提案の内容を、7種類のテーマから選んだMarpスライドにまとめるスキル。見出しや箇条書き、余白、画像配置を整え、Markdownファイルに仕上げます。

• 講義やセミナーの資料作成
• 提案や業務報告のスライド作成
• 技術発表の資料を作りたいとき

文章で伝えた構成や処理の流れをJSONに整理し、システム構成図や状態遷移図などを、READMEやスライドに使える青写真風のSVGとして描くスキル。

• READMEにシステム構成図を載せたいとき
• 通信やデータ処理の流れを図示したいとき
• 状態遷移図を作りたいとき

新しいUIの制作や既存画面の改修で、題材や利用者に合った配色・書体・レイアウトを設計します。画一的な見た目を見直し、操作文言や動きまで整えるスキルです。

• 新しいサイトのデザイン方針づくり
• 画一的なUIを見直したいとき
• 実装前に配色・書体・配置を決めたいとき

Web画面のコードを最新のWeb Interface Guidelinesに照らして確認し、アクセシビリティや使いやすさに関する指摘をファイル名と行番号付きで示すスキル。

• UIコードのアクセシビリティ確認
• サイトのデザインと使いやすさの点検
• 指定ファイルを最新の指針で確認

ブランドカラーから配色・文字サイズ・余白などの共通設定を生成し、画面の見た目を統一します。部品の設計や説明資料、画面幅への対応、開発者への引き継ぎも支援します。

• ブランドカラーから共通設定を作りたいとき
• 画面全体の文字と余白を統一したいとき
• 画面幅ごとのレイアウトを設計したいとき

iOS・Androidアプリの画面や操作を、指の届きやすさ、動作性能、通信断への対応から設計します。各OSの慣習を踏まえ、実装前の判断と確認を支えるスキルです。

• 片手で使いやすい画面を設計したいとき
• 一覧やアニメーションの性能見直し
• 読み込み・エラー・通信断の表示設計

ブランドや業界に合うWebサイトを、文字・配色・余白・動き・3D表現から設計し、参考サイトの調査に基づいてReactのコンポーネントとして制作するスキル。

• 個性のあるブランドサイト制作
• 商品を中心にしたLP制作
• 独自の構成で作品集を作りたいとき

採用や仕事の相談につながるポートフォリオを目指し、サイト構成と作品の見せ方を設計するスキル。制作過程や成果の説明、問い合わせへの導線、モバイル表示も検討します。

• 開発者やデザイナーの作品集を設計
• 制作実績を詳しい事例紹介にまとめる
• 作品紹介から問い合わせへの導線を改善

ユーザーデータやインタビューをもとに、代表的な利用者像と利用の流れを整理し、使いやすさのテストや調査結果の統合を通じて、デザインの検証を支援するスキル。

• 調査データからペルソナを作りたいとき
• 顧客の利用体験を整理したいとき
• 使いやすさのテストを計画したいとき

Webやモバイルアプリの画面設計で、用途に合う配色・フォント・レイアウトを選び、実装から操作性やアクセシビリティの点検まで支援するスキル。

• 新しいアプリの配色と文字選び
• 管理画面の設計とグラフ選定
• フォームの操作性を点検したいとき

文章や参考画像から特許向けの線画を生成し、既存図面のベクター化や画像の高解像度化、出願用のTIFF・PDFなどへの変換まで行うスキル。

• 発明の説明から特許図を作りたいとき
• スケッチや写真をもとに図を作りたいとき
• 既存図面をSVGやDXFに変換したいとき

p5.jsで粒子や流れを描く生成アートを制作します。同じ模様を再現しながら、数値や色を操作して表現の違いを試せるHTMLと制作方針をまとめます。

• コードで独自のアートを作りたいとき
• 粒子や流れの表現を探りたいとき
• 操作しながら模様を比較したいとき

資料やスライドの配色と書体を、Anthropicのブランドに合わせて整えます。見出しと本文の階層を保ち、背景に応じた文字色や図形のアクセント色を適用します。

• Anthropicの配色でスライドを整えたいとき
• 見出しと本文の書体統一
• 図形とアクセント色の調整

GLB形式の3Dモデルを主役に、回転や拡大とMorphによる画面切り替えを組み合わせたPowerPoint資料を作ります。配色や文字配置も整えます。

• 製品を複数の角度から紹介したいとき
• 3Dモデルで構造を説明したいとき
• テーマに合うモデルを探したいとき

スライドを切り替えると図形が滑らかに移動・拡大・回転するPowerPoint資料を作ります。共通の図形を引き継ぎ、複数枚にわたる動きの流れを設計します。

• 表紙タイトルを次の見出しへ移したいとき
• 共通の背景で連続するスライドの作成
• 伸縮する棒の図形による数値変化の説明