デザインのスキル

プロジェクト開始時に、解決する課題、対象ユーザー、制約、成功基準を整理するスキル。成果物や日程も含め、関係者が作業の方向性を共有できる企画書にまとめます。

• プロジェクト開始時の企画書作成
• 関係者と課題や対象ユーザーを共有したいとき
• 測定できる成功基準を決めたいとき

ユーザビリティテストで参加者に取り組んでもらう課題を、現実的な背景とともに作成し、達成基準、観察ポイント、進行時の補足質問まで整理するスキル。

• ユーザビリティテストの課題作成
• 課題の達成基準を決めたいとき
• 観察項目と補足質問の整理

利用者が他の製品で覚えた操作や配置への期待を整理し、慣例から外れる際の学習負担と利点を比べて、独自のUIを採用する判断を支援するスキル。

• 独自の操作方法を採用するか迷うとき
• 類似製品の操作慣例の比較
• 慣れないUIの学習負担の検討

サイトやアプリの情報を棚卸しし、利用者が目的の内容を見つけられるよう、分類・階層・名称・つながりを整理して、サイトマップやコンテンツモデルにまとめるスキル。

• サイト改修前に情報を棚卸ししたいとき
• 情報の増加に合わせて分類を見直したいとき
• 利用者の言葉でメニュー名を整えたいとき

余白、整列、文字、ボタンなどの見た目を揃え、画面の信頼感や使いやすそうな印象を点検します。機能は揃っているのに評価が低いデザインの見直しに使うスキルです。

• 機能は揃うのに評価が低い原因の検討
• 公開前の見た目のばらつき確認
• エラー・空・読み込み状態の見直し

要素同士の距離と余白を調整し、フォームやカード、見出しと本文のまとまりを伝えるスキル。枠線やラベルに頼らず、画面の構造や関連性を整理します。

• フォームのラベルと入力欄を整理したいとき
• 見出しと本文の余白を見直したいとき
• カード内の情報をまとめたいとき

検索欄、入力候補、検索結果、絞り込み、該当なしの表示までを設計し、利用者が目的の情報を探しやすい検索体験と、その改善に使う分析指標を整理するスキル。

• 商品カタログの検索を設計したいとき
• 検索結果がない画面を改善したいとき
• 絞り込みと結果表示の整理

フォームや認証などの複雑な画面の動きを、状態と切り替え条件で整理するスキル。操作や応答に応じた変化を図にまとめ、矛盾する状態や例外の扱いを明確にします。

• フォームの入力検証と送信動作の定義
• 読み込み失敗と再試行の流れの整理
• ログインとログアウトの遷移の仕様化

周囲と異なる要素が記憶に残りやすい心理効果を使い、主要ボタンや推奨プランなど、画面で特に注目してほしい一つの要素を、色・形・大きさの差で際立たせるスキル。

• 画面の主要アクションを目立たせたいとき
• 料金表の推奨プランを示したいとき
• 表の重要な行を強調したいとき

スマートフォンからデスクトップまで、画面幅と入力方法に応じたレイアウトや操作を設計するスキル。文字や画像の見せ方、タッチやキーボード操作も考えます。

• パソコン向け画面を小画面に対応
• タッチやキーボード操作の設計
• 文字サイズや画像の表示調整

文字の大きさや太さ、色、余白、配置を使って、画面内の情報に優先順位をつけます。重要な内容や操作が先に目に入り、必要な情報を拾い読みしやすい構成を作るスキル。

• ページの主な操作を目立たせたいとき
• カード内の情報を整理したいとき
• フォームの表示優先順位を決めたいとき

前景と背景を見分ける知覚の原則を使い、モーダルやカード、写真上の文字などの重なりを整理し、影・明暗差・境界線で操作対象が分かる画面を設計するスキル。

• ダイアログと背景を区別したいとき
• 写真上の文字を読みやすくしたいとき
• ダークモードの奥行き表現の調整

ウェブ、アプリ、店舗、サポートなどをまたぐ利用体験を一枚のマップに整理します。各接点での行動や感情、情報の流れを可視化し、体験の途切れや改善機会を探るスキルです。

• デジタルと対面をまたぐ体験の点検
• 製品とサポート間の体験の抜けの発見
• 部署間でのサービスの現状共有

既存のライトモードの配色をもとに、ダークモードの画面を設計するスキル。背景やカードの明るさ、文字のコントラスト、色の鮮やかさを調整し、画像や切り替え方法も検討します。

• ライト画面をダークモード対応したいとき
• カードやダイアログの階層を表したいとき
• 暗い背景の文字色や警告色を確認したいとき

基準となる単位から余白の段階と使い分けを定め、画面内の間隔を統一するスキル。部品の内側、縦横の間隔、表示密度ごとの調整ルールを整理します。

• 画面全体の余白を統一したいとき
• 部品内部の間隔ルールの整備
• 情報量や用途に応じた余白の調整

画面幅に応じたページの骨組みを、列数・列間の余白・外側の余白から設計します。カード一覧やサイドバー付き画面などの配置を整理し、開発者に渡す仕様をまとめます。

• 端末ごとのページグリッドを決めたいとき
• 画面幅に応じたカード一覧の配置設計
• サイドバーと本文の配置整理

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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