デザインのスキル

色・形・大きさなどの共通点で、離れた要素の関係や分類を伝えるスキル。ボタンやアイコン、グラフの見た目をそろえ、意図しない違いによる混乱を防ぎます。

• 離れた要素の関係を示したいとき
• ボタンやアイコンの見た目の統一
• グラフ間で分類の色をそろえたいとき

ボタンやスワイプなど、１つの小さな操作の挙動を実装向けの仕様にまとめます。開始条件、処理の順序、見た目や音の反応、繰り返し、アクセシビリティまで整理します。

• トグルの状態変化を仕様化したいとき
• 引っ張って更新する操作の反応設計
• フォームの入力チェックの仕様化

同じ課題に対して、利用者の操作手順や判断の分担が異なる複数案を作るスキル。最初の案を磨き込む前に、同程度の具体さで別の解決方法を探ります。

• 最初の案を磨く前に別案を探したいとき
• 操作手順の異なる案の検討
• 人とシステムの判断分担の検討

体験の記憶に影響する、感情が最も動く瞬間と終わり方を設計するスキル。購入完了や初回成果、エラーからの復旧を見直し、達成と次の行動が伝わる流れを考えます。

• 購入完了の確認と次の案内を改善したいとき
• 初回利用を役立つ成果で締めくくりたいとき
• エラー復旧後の安心感を設計したいとき

画面の内容の優先順位と部品の配置を整理し、操作時の動きや画面幅ごとの変化を注記したワイヤーフレーム仕様を、見た目のデザインに入る前にまとめるスキル。

• デザイン前に画面構成を固めたいとき
• 操作や画面状態の仕様を共有したいとき
• 画面幅ごとの配置を整理したいとき

機能を使うときの画面の移動や操作、条件による分岐を図に整理するスキル。正常に完了する経路に加え、エラーからの復帰や裏側の処理まで明確にします。

• 新機能の画面遷移を整理したいとき
• エラーからの復帰経路の設計
• 利用者の選択による分岐の仕様化

製品の構造と利用者の作業に合わせて、タブやサイドバーなどの画面移動を設計します。現在地の示し方や項目名も整理し、行き先と戻り方が分かる導線を考えます。

• モバイルアプリの移動方法を決めたいとき
• 複雑な業務アプリのメニュー整理
• 階層が深いページの現在地表示

共通の背景や枠線で関連する情報をひとまとまりに見せ、余白だけでは伝わりにくい画面の区切りを設計します。カードやフォームの整理と装飾の見直しに役立ちます。

• 狭い画面で情報のまとまりを示したいとき
• 長いフォームの項目整理
• カードの乱用や入れ子を見直したいとき

並びの最初と最後が記憶に残りやすい性質を使い、メニューや一覧、案内手順の順番を見直します。重要項目の配置と、中央に置く場合の視覚的な強調方法を整理します。

• 重要な行き先が伝わるメニューにしたいとき
• おすすめ一覧の順番を見直したいとき
• 初回案内の冒頭と結末を設計したいとき

コンテンツの読み込み中に見せる画面や動きを設計します。待ち時間に応じた表示の選択から段階的な表示、失敗時の取り消しまで、利用者に状況を伝える構成を整理します。

• 一覧画面の読み込み表示を設計したいとき
• 待ち時間に合う表示を選びたいとき
• 操作結果を応答前に表示したいとき

機能面では問題がなくても冷たく感じる画面を、利用者の不安や達成感から見直し、案内文の口調、動き、反応のタイミングに気持ちへの配慮を反映するスキル。

• 次の操作が分かるエラー文にしたいとき
• 読み込み中の文言と動きの調整
• 画面で小さな成功を伝えたいとき

iOSとAndroidで異なる画面移動や操作部品、文字サイズなどの慣習を整理します。OSごとに合わせる部分と共通化する部分を判断し、アプリの画面設計に反映するスキルです。

• iOSとAndroidの画面移動の比較
• OSに合う操作部品やジェスチャーの選定
• 両OSで共通化する範囲の検討

製品で使う色を明暗の段階と用途ごとに整理し、文字・背景・部品のコントラストを確認します。ブランド色から警告やエラー表示まで、一貫した配色のルールを作るスキル。

• 新製品の配色を一から決めたいとき
• 成功・警告・エラーの色を統一したいとき
• 文字と背景のコントラストを調べたいとき

視線が線や整列に沿って進む性質を使い、画面の読む順序や操作の流れを設計するスキル。フォーム、タイムライン、カルーセルの配置や区切り方を検討できます。

• フォームの入力欄を整列したいとき
• タイムラインや手順の順序を示したいとき
• カルーセルやスクロールの方向を伝える設計

画面や操作に潜む複雑さを整理し、利用者に任せる判断と製品側で引き受ける処理を見直すスキル。初期設定や入力、エラー対応の負担を検討できます。

• フォームの余計な負担を見直したいとき
• 初期値と利用者の裁量の調整
• 画面簡略化の隠れた負担の点検

本文の一行あたりの文字数と表示幅を、書体や文字サイズ、画面幅に合わせて調整します。記事や説明文を対象に、実際の文章で読みやすい行の長さを確かめるスキルです。

• 記事やドキュメントの本文幅調整
• スマホとパソコンでの本文表示確認
• 書体変更後の行の長さの見直し

利用者が製品で達成したいことを、実用面・感情面・他者からの見られ方に分けて整理し、期待する成果と現状の不足から設計の改善機会を見つけるスキル。

• 製品を使う動機を理解したいとき
• 利用目的から機能を見直したいとき
• 現状で満たせないニーズの発見

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

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

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

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

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

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

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

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

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

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

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

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

チームでデザインを検討する会を、目的の共有から意見交換、決定事項の記録まで組み立てるスキル。指摘を利用者の課題と結び付け、次の作業に整理します。

• チームのデザイン検討会の準備
• 建設的な意見交換ルールの整備
• 指摘を担当付きの作業にまとめたいとき