デザインのスキル

システム構成や業務手順、APIの呼び出し順序などを、操作できる単体HTMLの図にするスキル。自然言語やMermaidから作図し、配置の検証や画像への書き出しに対応します。

• システム構成と接続関係の説明
• 業務手順や承認フローの可視化
• API呼び出しやデータ経路の整理

人物写真と投稿内容をもとに、小紅書向けの縦長カバーを作る画像生成プロンプトをまとめます。8種類の構図から選び、見出しや配色、素材の配置を具体化します。

• AIツールの解説カバーを作りたいとき
• 製品比較のカバーを考えたいとき
• ポッドキャスト推薦のカバー制作

物体の説明、写真、CADモデルをもとに、形状や組み立てを伝える静的な技術図を作成します。拡大や色変更ができる閲覧ページと、SVG・PNG・PDF形式での出力に対応します。

• 組み立てを説明する分解図の作成
• 指定寸法に基づく正投影図の作成
• 写真から物体の形状を図解したいとき

画面の文字サイズや行間、フォントの読み込み、折り返し、省略表示を整えるスキルです。既存の文字組みルールに沿って、表示の乱れを点検・修正します。

• 見出しと本文の文字サイズを整理したいとき
• 折り返しや省略表示を直したいとき
• 更新される数値の位置をそろえたいとき

一つのUI部品に構成や密度などの違う案を作り、実際のページ上で切り替えて比較します。各案の利点と負担を整理し、選んだ案の本実装まで進めるスキルです。

• 一つの部品の構成案を比較したいとき
• 余白や情報密度を検討したいとき
• デザイン案をURLで共有したいとき

既存のデザインに合わせて、画面の角丸・影・アイコン・アニメーションを具体的な数値で整え、見た目の不統一やタッチ操作時の表示の問題を点検するスキル。

• カードの角丸と影を整えたいとき
• アイコンの状態表示を統一したいとき
• ボタンや登場時の動きを調整したいとき

画面のアクセシビリティ、配置、文章、文字組み、配色、見た目を横断して点検します。コードや実際の表示を根拠に、利用者への影響順で改善点を一つの報告にまとめます。

• 画面や一連の操作を点検したいとき
• 読み込み・エラー・狭い画面の表示確認
• 利用者への影響で修正順を決めたいとき

画面の余白・整列・読む順序を整え、幅の変更や拡大、翻訳による文字量の増加、右から左に読む表示でも、内容や操作が隠れないレイアウトを点検・修正するスキル。

• 狭い画面や拡大時の表示崩れを確認したいとき
• 翻訳で長くなる文字列に対応したいとき
• 右から左に読む画面を点検したいとき

画面の配色を用途別のパレットと色トークンに整理し、表記変換やコントラスト測定を行います。テーマ間の不整合や色の役割の誤用も点検するスキルです。

• 用途に合う配色パレットを作りたいとき
• 色トークンを用途別に整理したいとき
• 文字と背景のコントラストを測りたいとき

要件に沿った画面案を、文字によるワイヤーフレーム、単体HTML、操作確認用の試作品の3段階で作成するスキル。既存アプリの見た目や実データを反映します。

• 要件作成中に画面配置を検討したいとき
• 要件と一緒にHTMLの画面案を渡す
• 既存部品で画面操作を試したいとき

Webページや部品を、用途と読者に合うデザインで実装するスキル。書体・配色・余白・動きまで方針をそろえ、個性のある画面を動くコードに仕上げます。

• 個性のあるランディングページ制作
• 統一感のあるダッシュボード制作
• 既存Web画面の書体・余白・配色調整

書名と筆名を入れた小説の表紙を、題材や投稿先の雰囲気に合わせて生成します。構図案の比較から参考画像の利用、指定サイズへの書き出し、配色や字体の調整まで扱います。

• 書名・筆名入りの小説表紙の作成
• 題材に合う表紙の構図比較
• 参考画像を使った表紙作成

記事やスクリーンショット、写真、動画から、SNS向けの画像セットや動きのあるカードを作ります。雑誌風などの構成で、小红书の縦長画像やWeChatの表紙ペアを制作します。

• 記事を小红书の画像投稿にしたいとき
• スクリーンショット付き製品紹介
• 提供動画でLive Photoを作りたいとき

ユーザーが問題に直面してから解決後の暮らしに至るまでを、六コマの絵コンテにまとめます。感情の変化と得られる価値を描き、企画提案やチームの認識合わせに使えます。

• 新製品や新機能の企画提案
• 目指すユーザー体験の認識合わせ
• 開発前に企画への共感を確かめたいとき

特定の顧客が目的を達成するまでの行動・思考・感情を対話で整理し、体験のつまずきと改善機会を優先順位付きのカスタマージャーニーマップにまとめるスキル。

• 新規顧客の利用開始体験の整理
• 試用登録後のつまずきを探したいとき
• 解約リスクがある顧客のサポート改善

Product Designで使う製品URL、Figma、参考画像、ブランド資料や好みを保存・更新します。次回のデザイン作業で参照する前提をそろえ、保存内容の確認にも使えます。

• Product Designの初期設定
• Figmaや製品URLを保存したいとき
• 参考画像やブランド資料の整理

登録や購入などの操作フローを実際にたどって画面を撮影し、使いやすさ、デザイン、アクセシビリティの問題を点検します。各手順の画像を根拠に、優先して直す点をまとめます。

• 新規登録や初期設定の導線点検
• 購入フローの使いやすさを確認したいとき
• 設定画面や画面遷移のレビュー

製品のデザイン相談を内容に合う専門スキルへ振り分け、利用者調査や画面の評価、視覚案の検討、試作品の作成・共有へつなぐ案内役のスキル。

• デザイン相談の進め方を決めたいとき
• 製品の操作フローの評価
• 新しい試作品の画面案を検討したいとき

製品の目的や参考画面をもとに、情報の優先順位・レイアウト・操作の流れが異なるデザイン案を画像で作り、比較や修正を通じて実装の方向性を選ぶスキル。

• 既存画面のレイアウト案を比較したいとき
• 新製品の方向性を3案で探りたいとき
• 画面やFigmaを参考に案を修正したいとき

画面設計や試作の前に、何を作り、利用者が何を達成したいのかを確認するスキル。不足する情報を質問し、既存の参考資料も踏まえて要件を短く整理します。

• 新しい画面を設計する前の目的確認
• リデザインの目的と範囲の整理
• 画像から実装する前の要件確認

MagicPathのUI部品を検索・確認してアプリへ組み込み、テーマの適用や、既存コードを使ったキャンバス上の部品作成・編集を進めるスキル。

• UI部品を探してアプリへ導入
• MagicPathのテーマを適用
• キャンバス上の部品の作成・編集

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

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

広告、SNS投稿、商品画像、ロゴなどのビジュアル案を作成し、アプリ内の同じボードで複数の方向性を見比べながら、選択・修正・仕上げを進めるスキル。

• 広告キャンペーンの案を比較したいとき
• 利用場面が伝わる商品画像の制作
• ロゴやブランドの表現を探したいとき

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

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