デザインのスキル

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

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

利用者が情報を分類するカードソート調査の結果を分析し、一緒に分類された頻度や命名の傾向から、メニューの分類案と名称、判断の分かれる項目を整理するスキル。

• 実施済みカードソートの分析
• メニューの分類と名称の検討
• 分類の判断が分かれる項目の確認

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

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

画面に同時に並ぶ選択肢の数や分かりやすさを見直し、メニューの分類や段階的な表示を通じて、利用者が迷わず判断できるよう設計を支援するスキル。

• 項目の多いメニューの整理
• 初回案内の判断を分けたいとき
• フォームの必須・任意項目の見直し

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

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

既存のデザインシステムがチームで使われない理由を整理し、導入計画や学習資料、移行支援、利用状況の測定方法をまとめるスキル。

• 使われていないデザインシステムの導入計画
• 入門ガイドや研修を用意したいとき
• 古いデザインからの移行支援

ボタンやリンクの押しやすさを、操作対象の大きさと指・ポインターからの距離で見直し、タッチ画面やデスクトップの操作ミスを減らす配置を考えるスキル。

• スマートフォンのボタン配置を見直したいとき
• 小さなアイコンのタップ範囲を広げたいとき
• フォームやダイアログを操作しやすくしたいとき

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

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

アイコンの見た目と管理方法を統一する仕様を作るスキル。グリッド、サイズ、線の太さ、命名規則、分類、配布形式、アクセシビリティの要件をまとめます。

• アイコンのサイズと線幅を統一したいとき
• アイコンの命名規則と分類の整理
• SVGと部品の配布方法を決めたいとき

製品内に蓄積した見た目や構造、仕様書と実装のずれを棚卸しするスキル。深刻度・発生頻度・修正工数を整理し、優先順位付きの改善計画にまとめます。

• リニューアル前の不整合の棚卸し
• 限られた工数で修正順位を決めたいとき
• 機能追加で複雑化した導線の点検

デザイン案件の課題、制作過程、成果を整理し、社外向けのポートフォリオ事例にまとめるスキル。自身の貢献や判断の根拠を、制作途中の資料とともに伝えます。

• ポートフォリオの事例を書きたいとき
• チーム案件での自身の貢献を伝えたいとき
• 制作過程から判断の根拠を示したいとき

複数の操作にまたがるエラーの予防、検知、説明、復旧方法を設計するスキル。メッセージの内容と表示位置、入力の保持や再試行など、利用者が作業を続ける道筋を整理します。

• 通信障害からの復旧方法を設計したいとき
• 次の行動が分かるエラー文に直したいとき
• エラー後も入力データを保持したいとき

ボタンやモーダルなど一つのUIの動きを対象に、速度の変化や表示時間、要素が動く順序を調整し、自然な動きで視線の誘導や状態変化を伝えるスキル。

• モーダルの登場・退場を調整したいとき
• ボタンやトグルの動きを見直したいとき
• 関連要素が動く順序を整えたいとき

操作が受け付けられたことや処理の状態を伝える、確認表示・通知を設計するスキル。表示位置や消えるタイミング、取り消し導線まで検討します。

• 保存完了の確認表示を設計したいとき
• ボタンや切り替え操作の反応の改善
• アップロードや同期の状態表示の整理

同じ部品で複数ブランドやダークモードに対応するテーマ構造を設計します。色や余白などの値を用途別に整理し、テーマごとの上書きと切り替え方針をまとめます。

• 複数ブランドで画面部品を共用したいとき
• 明暗と高コントラストのテーマ設計
• 共通値とテーマ別の値を整理したいとき

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

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

課題の整理から試作品のユーザーテストまでを、数日間で進める計画を作ります。日ごとの作業、担当、事前準備、検証後の次の行動を整理し、短期集中のデザイン検討を支えます。

• 課題整理から検証までの5日間計画
• 小さな課題向けの2〜3日間計画
• 分散チーム向けの進め方の調整

インタビューやアンケートなどの調査資料から行動・動機・ニーズの共通点を分析し、目標や不満、設計への示唆を備えた人物像を二〜四人にまとめるスキル。

• 調査資料からペルソナを作りたいとき
• チームで利用者像を共有したいとき
• 設計で優先する人物像を決めたいとき

音声アシスタントやチャットボットの会話を設計します。質問と返答の流れ、聞き間違いや無応答からの復帰、確認方法、話し方や終了経路を具体化します。

• 音声アシスタントの会話設計
• チャットボットの誤認識時の応答改善
• アシスタントの人格と口調の整理

複数チームで使うデザインシステムの運営ルールを設計します。担当範囲や提案・レビューの流れ、バージョン管理、廃止・移行の手順を整理します。

• デザインチーム間の担当整理
• 部品の提案・レビュー手順を決めたいとき
• 互換性を壊す変更と移行支援の計画

特定の利用者像に沿って体験の始まりから終わりまでを整理し、各段階の行動や接点、感情、困りごとを可視化して改善の優先順位を付けるスキル。

• 特定の利用者の現状体験を整理したいとき
• 利用者が不満を感じる段階の発見
• 影響と実現性に基づく改善の優先順位付け

操作後の待ち時間を400msという目安で点検し、画面の応答速度とフィードバックを設計します。検索や画面切り替えで感じる遅さを整理し、改善の優先順位を考えるスキルです。

• 検索や絞り込みの遅さを調べたいとき
• 画面切り替えの応答目標を決めたいとき
• 時間のかかる処理の反応を設計したいとき

コンポーネントやデザイントークン、レイヤー、ファイルの命名ルールを、具体例とともに整えます。名前の揺れを減らし、探しやすく管理しやすい状態を目指すスキルです。

• コンポーネントやレイヤー名の統一
• デザイントークンの命名設計
• ファイルや素材名の整理

スワイプやドラッグ、長押しなどの操作を、見つけやすさと反応の分かりやすさから設計します。操作同士の衝突や、ボタンでの代替操作も整理するスキルです。

• スワイプやドラッグを設計したいとき
• 操作の存在を伝えたいとき
• スクロールとの衝突を解消したいとき