デザインのスキル

入力項目の順序やグループ分け、エラー表示、送信完了までのフォームを設計します。入力形式や途中保存、アクセシビリティも整理し、迷わず記入できる画面を考えます。

• 新規フォームの項目と順序の設計
• エラー文と表示タイミングの改善
• 複数ステップのフォームの途中保存設計

色・余白・文字・影などの共通値をデザイントークンとして整理するスキル。値そのもの、用途別の参照、部品別の指定を分け、命名規則と使い方を定めます。

• 共通の色や余白を定義したいとき
• 値と用途を分けた命名の整理
• トークンの命名規則と使い方の文書化

ボタンやフォーム、エラー表示など、画面上の言葉を分かりやすく整えるスキル。製品らしい語り口を保ちながら、状況と次の操作が伝わる文面を作ります。

• ボタンやフォームの文言を整えたいとき
• エラーと対処方法を伝えたいとき
• データがない画面の案内作成

デザインの選択理由を、利用者のニーズや事業目標、根拠と結び付けて文書化します。代替案、受け入れた妥協点、検証方法まで整理し、レビューや引き継ぎで説明できる形にまとめます。

• 大きなデザイン方針の説明
• 既存パターンから外れる変更の記録
• 意見が割れた選択の理由を残すとき

共通で使う画面部品の見た目、設定項目、状態ごとの動作、操作方法を仕様書にまとめます。アクセシビリティや利用ルールまで、デザインと実装の認識をそろえます。

• 新しい共通画面部品の仕様作成
• 部品の種類と状態を整理したいとき
• キーボード操作と読み上げの要件整理

モバイルアプリの画面や画面遷移を、実例調査から実装、シミュレーターでの動作確認まで進めるスキル。端末標準の操作感や配色、文字、アニメーションを整えます。

• モバイル画面や初回案内を作りたいとき
• 画面遷移や戻る操作の改善
• ダークモードや文字拡大時の表示確認

売上上位のモバイルアプリの実画面や操作の流れを調べ、画面設計や改善に生かすスキル。Appllamaの検索、参考画面の収集、比較メモの整理を扱います。

• 新しいモバイルアプリの参考調査
• 初回案内や課金画面の流れを比較したいとき
• 既存画面を改善する参考例の収集

Expoアプリの色・余白・文字などの共通ルールと再利用部品を整えるスキル。既存のテーマを尊重しながら、画面ごとの見た目のばらつきや値の直書きを見直します。

• 画面間の色・余白・文字を揃えたいとき
• ボタンなどの共通部品を作りたいとき
• スタイルの直書きや不統一の点検

検証を通過したUIを制作時の会話から独立した視点で表示・操作し、差し戻すべき問題を具体的な根拠つきで指摘して、重大な問題の修正と再評価につなげるスキル。

• 自動検証後に見た目をレビューしたいとき
• 大小画面と明暗テーマの表示確認
• 操作しても反応しない部品の発見

既存の画面やUIを、視覚的な優先順位・一貫性・使いやすさなど6項目で採点します。操作性の原則にも照らし、問題の重大度と具体的な改善案を表にまとめます。

• 実装前の画面をレビューしたいとき
• 既存製品のUI品質の点検
• 操作性やアクセシビリティの改善順整理

画面や部品の制作・レビューに共通ルールを適用し、配色の統一、操作状態、スマホ表示、アクセシビリティを点検するスキル。検証結果に基づく報告も定めます。

• 画面制作前に共通ルールを決めたいとき
• ページ間のテーマと操作色を統一したいとき
• 操作状態とスマホ表示を点検したいとき

スクリーンショットやデザイン画像から配色・文字・余白のルールを読み取り、共通の設定値で管理するUIコードに再構成します。見た目の比較とアクセシビリティの検証も行います。

• スクリーンショットからUIを実装したいとき
• 画像から配色や文字・余白の規則を抽出
• 明暗テーマのコントラストを確認したいとき

アイデアを情報整理から画面の骨組み、詳細な試作、コードへと段階的に具体化し、利用者の行動経路や操作テストの課題・成功基準まで組み立てるスキル。

• 疑問に合う試作の細かさを選びたいとき
• 画面構成をワイヤーフレームで検討
• 分岐やエラーを含む利用者の行動整理

色・文字サイズ・余白などのデザイン設定を、値・用途・部品の3層に分けたDTCG形式で作成・拡張・点検し、配色のコントラストや設定間の参照も検証するスキル。

• 配色と文字サイズの体系を作りたいとき
• 余白・影・角丸の設定整理
• 複数ブランドや表示密度の管理

多数の数値を見渡せる分析画面や取引端末を、グラフと表で設計・実装するスキル。主要指標の配置から、グラフの数値整合性、ダークモードやスマホ表示の確認まで扱います。

• 主要指標を中心に分析画面を作りたいとき
• ローソク足や注文板のある取引画面の制作
• 監視画面にグラフと並べ替え可能な表を配置

ボタン、エラー、空状態、通知などの画面内の文言を作成・レビュー。利用者の状況に合う口調で、操作の結果や問題の原因、次に取る行動が伝わる文章に整えるスキル。

• 操作結果が伝わるボタン文言の作成
• 原因と対処法が分かるエラー文に改善
• 空状態に最初の行動を案内したいとき

既存のデザイン設定と外部デザインシステムを、色や文字、余白などの役割で対応付け。見た目の採用やライブラリへの適用、画面単位の移行に向けた対応表と設定を作るスキル。

• 外部デザインシステムの見た目を採用
• 外部部品ライブラリに既存設定を適用
• 画面単位の移行計画を作りたいとき

ブランドの要件から、配色・書体・余白などの共通ルールを設計します。ライト・ダーク両対応のデザイントークンとCSSを生成し、コントラストも検証します。

• ブランドのデザイン基盤を作りたいとき
• 配色と書体を新しく決めたいとき
• ライト・ダークの共通設定作り

画面や部品の制作前に既存資料を読み、成果を左右する質問だけで要件を整理。確認しない判断の前提や誤った場合の影響も記録し、後から検証できる制作仕様書にまとめるスキル。

• 画面制作前に要件を整理したいとき
• 制作範囲と完成条件を決めたいとき
• 判断の前提をレビュー用に残したいとき

Figmaとコードの色・サイズなどの共通設定を対応付け、同期と差分確認を進めるスキル。テーマの切り替えや、部品の種類・サイズ・操作状態の不足も確認します。

• コードの共通設定をFigmaへ反映
• Figmaの設定をコードへ取り込み
• ダーク表示やブランドの対応付け

既存サイトやアプリの機能を保ちながら、画面の課題を診断し、配色・文字・余白・操作状態を改善するスキル。複数ページのテーマ統一と変更後の動作確認も扱います。

• 既存サイトの機能を保って見た目を磨きたいとき
• 複数ページの配色とテーマを統一したいとき
• 画面の改善点に優先順位を付けたいとき

デザインシステムの部品やトークンを追加・変更・廃止するときに、バージョンの上げ方、共通部品への昇格条件、移行期間と変更履歴を整理するスキル。

• 変更に合うバージョンを決めたいとき
• 部品やトークンの共通化を判断したいとき
• 廃止と代替への移行を計画したいとき

Webページやアプリ画面の依頼を、対象読者や見た目の方針から整理し、デザインと実装につなげるスキル。スマートフォン向けの設計や表示・操作の検証まで進めます。

• 新しいLPを設計・実装したいとき
• アプリの設定画面を作りたいとき
• 初回利用の案内を設計したいとき

希望する見た目やブランドの雰囲気を、色・文字・余白・動きの共通設定に落とし込みます。用意された方向性や138のデザインシステムを参照して整えるスキル。

• 対象読者に合う見た目を適用したいとき
• 指定のデザインシステムを共通設定に反映
• 文字・余白・角丸・影・動きの統一