デザインのスキル

Web画面やスライド、PDFの内容・レイアウト・読みやすさを点検し、参考例との比較基準と実際の表示確認をもとに、公開前の品質判断を支えるスキル。

• 公開前のLPを点検したいとき
• スライドの品質基準づくり
• PDFの配置や日本語の改行確認

テーマや写真から、単色・二色刷りの質感を生かしたポスターや誌面画像を作るスキル。余白と文字の配置を設計し、画像生成用プロンプトと完成画像、配色などの制作メモを出力します。

• 単色のポスターを作りたいとき
• 参考写真を二色の画像にしたいとき
• 網点の質感でZINEの表紙を作りたいとき

グラフや図解、比較表、操作できる説明画面をHTML・SVGで作り、ClaudeやCodexの表示機能、または単独のHTMLファイルで届けるスキル。

• データをグラフやダッシュボードにしたいとき
• 手順やシステム構成の図解
• 選択肢を比較表で見比べたいとき

ゲームの画風や色板、キャラクター・地形素材の仕様を整理し、画像生成用プロンプトを作成。提供されたPNGの色・サイズ・グリッドの整合性と切り分け案も確認します。

• ゲームの画風と色板を決めたいとき
• キャラクターや地形素材の仕様整理
• 画像生成用プロンプトの準備

アイデアの試作や既存画面の改善を始める際に、対象コードやデザイン方針、変更範囲を確認し、画面構成の整理と最初に改善すべき箇所の提案につなげます。

• レビュー用の試作品の要件整理
• 既存ページの改善を始めたいとき
• デザイン素材と納品条件の整理

ゲームの種類や目指す画面の雰囲気を確認し、6〜8色の配色を含むスタイルガイド案を作ります。画像生成の指示文や素材の統一感、精霊図の分割方針も相談できる初期設定です。

• ゲーム美術の指針を作りたいとき
• 画像生成用の指示文づくり
• ゲーム素材の統一感の確認

製品や機能の優先順位を、使う人の体験から判断するための指針です。機能を絞り、試作や細部の調整を通して、中心となる作業の流れを磨く判断を支えます。

• 公開する機能を絞りたいとき
• 試作で設計案を比較したいとき
• 余白や操作への反応を見直したいとき

既存コードに前例のないUI操作やアーキテクチャの判断で、競合する試作を2〜3案作って並べて比較し、使い心地も確かめながら採用案を検討するスキル。

• 前例のないUI操作を検討したいとき
• 採用前に構造の候補を比較したいとき
• 操作の使い心地を確かめたいとき

セリフ書体を使ったミニマルなUIの設計指針を作ります。文字サイズや配色、余白から部品の操作状態まで具体化し、実装時の判断とレビューに使える形に整理します。

• セリフ書体でミニマルなUIを設計
• 文字サイズと余白を統一したいとき
• 部品の状態と画面幅への対応の整理

モノクロを基調とした簡潔なUIに向け、書体や余白、部品の状態、キーボード操作を統一し、実装とレビューに使える設計ガイドをまとめるスキル。

• 簡潔なモノクロUIを設計したいとき
• 部品の余白や操作時の表示を統一したいとき
• UIの移行手順とレビュー項目の作成

現実の素材感や立体感を取り入れた画面に向けて、配色・文字・余白、部品の操作状態とアクセシビリティを具体化し、実装に使えるデザイン指針を作るスキル。

• 素材や道具を手がかりにしたUI設計
• 質感のある部品のルール統一
• 既存UIの移行手順と確認表の作成

紫を基調に、上部ナビゲーションとカードで構成するアプリ管理画面を設計し、配色や余白、部品の操作状態、確認項目を具体的なルールにまとめるスキル。

• アプリ管理ダッシュボードを設計したいとき
• サイドバーなしでナビとカードを整理したいとき
• 紫系UIの部品とレビュー基準の統一

画像・文章・操作をつなぎ、物語をたどるような画面体験の設計指針を作ります。遊び心のある文字や配色を土台に、部品の振る舞いと使いやすさの基準までまとめるスキル。

• 物語をたどる画面体験を設計したいとき
• 画像・文章・操作の方針をそろえたいとき
• 遊び心と使いやすさを両立したいとき

温かみのある紙色とピンク・青の二色刷り風UIに向けて、配色や文字、操作状態、アクセシビリティまで実装に使えるデザイン指針をまとめるスキル。

• 二色刷り風のUIを設計したいとき
• 配色・文字・余白のルール整備
• 部品の操作状態と使いやすさの確認

1950〜1990年代を思わせる配色や粒状の質感、ピクセル風の文字をもとに、懐かしさと操作の分かりやすさを両立する画面の設計指針をまとめるスキル。

• 懐かしさのある画面を設計したいとき
• ピクセル風の文字とレトロ配色の設計
• 部品の余白と操作状態の統一

色数を絞った配色や整った余白、控えめな動きを使い、シンプルな画面の部品・操作状態・アクセシビリティを具体化する実装用のデザイン指針を作るスキル。

• 色数を絞ったシンプルなUI設計
• 余白と控えめな操作表現の統一
• ばらつきのある既存部品の改修計画

鮮やかな配色と遊び心のある文字を使うUIに向け、部品の見た目や操作、余白のルールを整理し、アクセシビリティの確認基準まで含むデザイン指針を作るスキル。

• 鮮やかな色と文字でUIを設計したいとき
• 部品の見た目と操作を統一したいとき
• 動きやタッチ操作の確認基準づくり

ブロックゲーム風の遊び心ある配色と大胆な見出し文字を使い、コンパクトなUIの設計指針を作成。色や余白、部品の操作状態、品質確認の基準まで整理します。

• ブロックゲーム風のUIを設計したいとき
• 大胆な見出しとコンパクトな配置の設計
• 部品の見た目と操作を統一したいとき

ピクセル風の書体や押し込むようなボタン、虹色の影を使い、アーケードゲームを思わせるUIの配色・余白・操作状態を具体的な設計ルールにまとめるスキル。

• アーケード風のゲームUIを設計したいとき
• 押し込むボタンや虹色の影の仕様づくり
• キーボード操作とフォーカスの仕様づくり

繊細な文字使いと色数を抑えた端正なUIに向けて、配色・余白・部品の状態を具体化し、実装やレビューで共有できるデザイン指針を作るスキル。

• ミニマルなUIを設計したいとき
• 書体・配色・余白のルール整備
• 不統一な部品の移行指針作成

クリーム色の紙と手描き風の文字を生かしたUIの設計指針を作ります。配色や余白、部品の状態、アクセシビリティまで、実装に使える具体的なルールにまとめます。

• 手描き風UIの指針を作りたいとき
• ボタンやカードの見た目の統一
• UIレビュー項目の作成

データやアプリをつなぐ業務画面に向け、高コントラストで整理されたUIの設計指針を作ります。ドラッグ＆ドロップを含む操作や部品の状態、確認基準まで整理します。

• データ業務画面のUI設計指針づくり
• ドラッグ＆ドロップの操作設計
• 業務UIの配色と文字を統一したいとき

懐かしさを感じる書体とコントラストの強い配色を軸に、レトロな画面のデザイン指針を作るスキル。余白や部品の操作状態、アクセシビリティの確認基準まで整理します。

• レトロな画面の共通ルール作り
• 懐かしい書体・配色・余白の統一
• レトロな画面のアクセシビリティ基準作り

広い余白と整ったグリッドを使い、読みやすいUIの設計指針を作ります。文字や部品の間隔、画面幅への対応、操作状態を、実装とレビューに使える基準にまとめます。

• 画面全体の余白を統一したいとき
• 画面幅に応じた配置の設計
• 空・読み込み中・エラー表示の整理