デザインのスキル

落書きや手書き風フォント、不揃いな線を使う親しみやすいUIの設計指針を作ります。配色・余白から部品の操作状態、アクセシビリティの確認基準まで整理します。

• 手描き風UIの設計指針を作りたいとき
• 配色・フォント・余白の統一
• 部品の操作とアクセシビリティの確認

本や雑誌、レポートの紙面を思わせるUIの設計指針をまとめます。誌面のような区切り方や文字の強弱を軸に、配色・余白・操作状態のルールを整理します。

• 雑誌の紙面を思わせるUI設計
• 見出し・本文・配色・余白の統一
• 空・読み込み中・エラー表示の整理

鮮やかな配色やグラデーションを使う画面に向けて、文字・余白・部品の操作状態を整理し、読みやすさや操作のしやすさも確認できるデザイン指針を作るスキル。

• 鮮やかな配色とグラデーションの設計
• カラフルな画面の部品と余白の統一
• 読みやすさ・動き・タッチ操作の確認

半透明の層、ぼかし、光を感じる輪郭で、すりガラス風UIの設計指針を作ります。配色や部品の操作状態、画面幅への対応、見やすさの確認基準を整理します。

• すりガラス風UIを設計したいとき
• カード配置と共通配色の統一
• 画面幅に応じた部品の表示設計

映画ポスターや本・アルバムの表紙を、限られた色と象徴的な構図でデザインします。生成用プロンプトの作成から画像生成、作風比較、既存画像の変換まで扱います。

• 象徴的な映画ポスターを作りたいとき
• 本やアルバムの表紙をデザインしたいとき
• 3種類の作風を比較したいとき

短編ドラマの人物設定図、三面図、場所や小道具の参考図に使う画像プロンプトを、外見の一貫性や参考画像の適用範囲を明記した、コピー可能なMarkdownにまとめるスキル。

• 人物設定図や三面図の指示作成
• 場所や小道具の参考図の指示作成
• 衣装変更や状態違いを指定したいとき

アプリやサービスの使いやすさ、情報の見つけやすさ、信頼性などを複数の観点で評価し、利用者と事業への影響を整理して、改善の優先順位と再設計案をまとめるスキル。

• 製品全体の利用体験を点検したいとき
• リニューアル前の再設計案づくり
• 導線・初回案内・モバイル操作の課題整理

動作している画面のデザインを生かしながら、情報の優先順位、部品、文言、スマートフォン表示を整え、実画面の比較と動作確認まで行う仕上げ用スキル。

• デモ前に画面を仕上げたいとき
• 部品や文言を統一したいとき
• スマートフォンの操作性改善

インタビューやアンケート、利用データを基に、目標や悩み、行動を整理したユーザー像を作り、機能の優先順位や訴求内容を考えるためのスキル。

• 顧客調査からユーザー像を作りたいとき
• 利用者別に機能の優先順位を決めたいとき
• 顧客に合う訴求を考えたいとき

既存の画面や部品を操作の分かりやすさ、見た目、アクセシビリティから点検し、改善点を整理します。デザインシステムに沿った確認や、新しい画面の制作にも使えます。

• UIを含むPRをレビューしたいとき
• デザインシステムへの準拠確認
• アクセシビリティと画面幅の点検

画面で最初に目が向く場所、視線の流れ、要素の目立ち方を点検し、重要な情報や操作が埋もれる原因と具体的な修正案を整理するスキル。

• 主要な操作が見落とされる原因の確認
• 画面の読み順を見直したいとき
• 強調箇所の競合を解消したいとき

取り組みたいデザイン改善案が多いときに、効果と工数を比較して優先順位を決めるスキル。複数の評価手法を使い、判断理由や依存関係を添えた実施候補の一覧に整理します。

• 対応しきれない改善案を絞りたいとき
• 効果と工数で施策を比較したいとき
• 調査結果から実施順を決めたいとき

表示された画面の配色を点検するスキル。文字やボタンのコントラスト、色の統一感、状態の伝え方、色覚への配慮を評価し、問題ごとに具体的な修正案を示します。

• 文字やボタンのコントラスト確認
• エラーや成功の表示を見直したいとき
• 配色の不統一を探したいとき

表示された画面の配置を、バランス、余白、繰り返し、人が要素をまとまりとして捉える仕組みから点検します。違和感の原因と具体的な修正案を整理するスキルです。

• 画面配置の違和感を特定したいとき
• 余白や内側の間隔のばらつき確認
• カードや一覧の統一感の点検

既存画面のボタンやリンクが操作できると分かるか、状態や主要な操作が伝わるかを点検するスキル。問題の観察、理由、具体的な修正案を評価付きで示します。

• ボタンやリンクの分かりやすさを点検したいとき
• フォーカス・無効・読み込み表示の確認
• 画面の主要な操作を明確にしたいとき

画面の情報量や優先順位、読み取りやすさを点検し、利用者が迷う原因を整理します。認知負荷や詳細の見せ方を含む４つの観点で評価し、具体的な修正案を示します。

• 情報過多のダッシュボードの点検
• 列数の多い表を整理したいとき
• 入力項目の多いフォームの見直し

表示された画面の文字サイズ、行間、読みやすさ、スタイルの統一を点検するスキル。文字設定に使う共通の値への準拠も確認し、問題の理由と具体的な修正案を示します。

• 画面の文字の読みやすさを点検したいとき
• 見出しと本文の階層を確認したいとき
• ラベルやカード見出しの不統一を探すとき

表示された画面をブランドの雰囲気・文章・デザイン値の基準ファイルと照合し、基準とのずれや適切な修正内容を、観点ごとの評価とともに整理するスキル。

• 画面とブランド基準の照合
• ボタンやエラー文言の口調の確認
• デザイントークンからのずれの確認

複数のデザイン案を事前に決めた基準で比較し、採用する方向を選びます。採用案の弱点と不採用案の検証内容・再検討条件まで残し、選定理由を後から確認できる記録にまとめます。

• 複数のデザイン案から方向を選びたいとき
• 必須条件と比較条件の整理
• 不採用案と再検討条件の記録

見出しや本文、注釈の文字サイズ・太さ・行間を体系的に設計します。書体の使い分けやスマートフォンでの調整も整理し、画面全体で統一して使える文字のルールを作ります。

• 新しい製品の文字スタイル設計
• 見出し・本文・注釈の表現統一
• スマートフォン向けの文字調整

製品で使うイラストの形、線、色、細かさをそろえ、用途ごとのサイズや配置ルールをまとめます。制作を依頼するときや、複数人で絵柄を統一したいときに役立ちます。

• イラスト制作の依頼資料作り
• 複数の制作者で絵柄をそろえたいとき
• 空の画面や初回案内の挿絵設計

製品に必要なコンテンツを洗い出し、種類や構成、書き方、管理担当を整理します。既存情報の棚卸しから更新・承認のルール作りまで支えるスキルです。

• 既存情報の不足や重複を整理したいとき
• 再利用するコンテンツの項目設計
• 製品全体の書き方をそろえたいとき

競合製品の機能や使い勝手を比較し、強みや不足点、改善の機会を整理します。画面単体だけでなく、利用者が目的を達成するまでの流れも評価します。

• 競合の機能と使い勝手を比較したいとき
• 利用者の一連の体験を評価したいとき
• 未対応のニーズや改善機会の発見

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

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