デザインのスキル

文章で指定した情景やイラストを画像にするスキル。9Router経由で複数の画像生成モデルを選び、対応するサイズや品質を確認してファイルに保存できます。

• 文章から風景画像を作りたいとき
• 対応する画像サイズや品質の確認
• 生成画像をファイルに保存したいとき

発表内容やPowerPointから、アニメーション付きのHTMLスライドを作るスキルです。3案の見た目を比べてデザインを選び、ブラウザで表示・編集できます。

• 登壇や提案用のスライド作成
• PowerPointをHTMLに変換したいとき
• 見た目を比較してデザインを選びたいとき

Webサイトのリンクや言葉で伝えたイメージからブランドの配色やロゴを設定し、今後プラグインが作るページや文書の見た目と受け取り形式をそろえるスキルです。

• Webサイトからブランド設定
• ブランド刷新後の配色やロゴの変更
• 保存前にレポートの見た目を確認

完成したデザインを開発者に渡すための仕様書にまとめます。寸法や色・余白の共通設定、操作時の状態、画面幅ごとの挙動、例外処理まで整理するスキルです。

• デザインを開発者へ引き継ぎたいとき
• 画面幅ごとの表示仕様の文書化
• 読み込み・空・エラー状態の整理

画面部品の命名や色・余白のばらつきを点検し、状態や操作方法を文書化します。既存のデザインルールに沿った新しい部品や画面パターンの設計にも使えます。

• 部品の命名や見た目の統一性点検
• 部品の種類や状態を文書化したいとき
• キーボード操作や読み上げ動作の整理

ボタン名やエラー表示、初回案内など、画面内の短い文言を作成・レビューします。利用者の状況や文字数に合わせ、推奨案と代替案、選定理由を整理します。

• 分かりやすいボタン名を決めたいとき
• 対処方法が伝わるエラー文の作成
• データがない画面の案内作成

Figmaの画面やスクリーンショットを、使いやすさ、視線の流れ、統一感などの観点でレビューするスキル。良い点と課題を整理し、理由付きの改善案を優先順に示します。

• 画面の初期案をレビューしたいとき
• ナビゲーションや導入手順を点検したいとき
• 色・余白・文字の不統一を探したいとき

新規ページや既存UIの構成・配色・書体を用途に合わせて設計し、画一的な見た目を避けるスキル。デザイン監査や参考サイトの特徴分析にも対応します。

• 新しいランディングページの設計
• 既存UIの問題点を調べたいとき
• 既存構成を生かしたページ改修

Webページやアプリの画面を、用途や読者に合うデザイン方針から組み立て、文字・配色・余白・動きまで整えた実際に動くコードとして仕上げるスキル。

• 見た目の方針が明確なLPの制作
• ダッシュボードのデザインと実装
• 既存画面の文字・配色・余白の改善

比較や推移などの目的に合うグラフ形式を選び、見出し・ラベル・配色を整えて、読み手が結果を理解しやすいチャートや地図、ダッシュボードの設計を支援するスキル。

• 比較や推移に合うグラフを選びたいとき
• ダッシュボードの配置と数値表記を改善
• 独自のグラフ配色を検証したいとき

ブランドカラーから色・文字・余白などの共通値を生成し、UI部品の仕様や画面幅ごとの表示ルール、開発者への引き継ぎ資料を整えるスキル。

• ブランドカラーから共通値を作りたいとき
• UI部品の種類や状態を文書化したいとき
• 画面幅ごとの文字と余白の設計

インタビューや利用データを基に、代表的な利用者像と体験の流れを整理します。使いやすさを確かめるテストの計画や調査結果の分析を通じて、根拠のあるデザイン改善案につなげます。

• 調査データからペルソナを作りたいとき
• 利用者の行動・感情・課題の可視化
• デザインの使いやすさを検証する計画

企業や製品の色、書体、ロゴ、画像、文章のトーンを整理し、資料や発信の統一を支援します。既存ルールの適用・点検から、共有用ブランドガイドの作成まで扱うスキル。

• 外注先に渡すブランドガイド作成
• 資料やSNS画像の統一感を点検したいとき
• 場面別の文章トーンを決めたいとき

Markdownから作るHTML文書やスライドの色・書体・目次を初回設定し、本文とリンクのコントラストを検証して、共通のブランド設定として保存するスキル。

• HTML文書やスライドの見た目の統一
• 本文とリンクの色の見やすさの確認
• プロジェクト専用のブランド設定

静止画像とCSS・JavaScriptを使い、スクロールに連動する奥行きや文字の動きを備えたWebサイトを制作します。素材の点検から表示負荷の調整まで扱います。

• 動きのある商品紹介ページを作りたいとき
• 既存サイトに奥行きと文字演出を加えたいとき
• 画像の透明度と配置を点検したいとき

雑誌風またはSwiss Styleの横送りスライドをHTMLで作成し、発表者用メモ、時間管理、観客画面との同期まで備えたブラウザで使うプレゼン資料を仕上げるスキル。

• 雑誌風の講演スライドを作りたいとき
• Swiss Styleで製品発表したいとき
• データやスクリーンショットのスライド化

コードに合わせてFigmaのデザインシステムを作成・更新します。色や余白の共通設定、ライト・ダークモード、部品集と説明ページを、段階ごとに確認しながら整えるスキルです。

• コードから色や余白の共通変数を作る
• ライト・ダークテーマの設定
• 説明付きの再利用可能な部品集作り

Figmaファイル内でJavaScriptを実行し、図形やテキスト、部品、変数を作成・編集します。既存の構造を調べ、段階ごとに結果を確認して進めます。

• Figmaのページや既存部品の構造調査
• コンポーネントとバリエーションの作成
• 色や余白の変数を作って割り当てたいとき

FigmaのデザインファイルやFigJamの白紙ファイルを、名前と作成先のプランを指定して下書きに作成し、開くためのURLと後続作業用のキーを取得するスキル。

• Figmaの新規デザインを始めたいとき
• 名前付きのFigJamボード作成
• use_figma用の新規ファイル準備

コードや説明をもとに、既存のデザインシステムを再利用してFigmaの画面を作成・更新するスキル。共通部品や色・余白・文字スタイルを使い、セクションごとに組み立てます。

• アプリのページをFigmaに再現したいとき
• 共通部品でLPを作りたいとき
• 画面をコードに合わせて更新したいとき

VS Code拡張機能とWebviewのアイコン作成・レビューを支援します。表示場所に合う既存アイコンやSVGを選び、登録方法、テーマ対応、ボタンの読み上げ名を確認します。

• コマンド・メニュー・ビュー用アイコンの選定
• Webviewのアイコン登録
• 見た目の重さを保ったSVGのサイズ調整

IntelliJ New UI向けのSVGアイコンを作成・レビューします。用途別のサイズ、明暗テーマの配色、線幅や配置を確認し、プラグインへの組み込みまで案内します。

• 操作ボタンやツールウィンドウのアイコン作成
• 明暗テーマ用SVGの作成
• 既存アイコンの16×16への調整

製品を知ってから継続利用・他者への推奨に至る顧客体験を表にまとめ、各段階の接点・行動・感情・つまずきと、優先して改善すべき機会を整理します。

• 顧客体験の全体像を整理したいとき
• 登録や初期利用のつまずき探し
• 顧客が離脱する理由の整理

ゲームのエリア制作で、物語・世界設定・見た目の方針から地形、敵や報酬、遊びやすさ、テスト計画までを順に検討し、一つのレベル設計書にまとめるスキル。

• チュートリアルの村やダンジョンの設計
• 物語と見た目に合う地形を考えたいとき
• 敵との遭遇や報酬配置の計画