デザインのスキル

会話でAIに作業を任せる画面の設計指針を作ります。少ない操作と分かりやすい結果表示を軸に、配色・文字・部品の状態やアクセシビリティのルールを整理します。

• 会話型AIの画面を設計したいとき
• AIに作業を任せる流れの設計
• 処理中・エラー・空の状態の設計

テクノロジーを感じさせる書体と青・紫の配色を基に、未来的なUIの文字組みや余白、部品の操作状態、アクセシビリティを実装向けの設計指針にまとめるスキル。

• 未来的なUIのデザイン方針づくり
• 書体と青・紫の配色の統一
• 部品の状態と画面幅対応の文書化

Material Designに沿って、重なりや動き、テーマの変化を扱うUI設計指針を作ります。配色・文字・部品の状態と、端末をまたぐ表示や操作のルールを整理します。

• Material Designの設計指針作成
• 配色・文字・余白の統一
• 端末サイズに応じた部品の挙動定義

影やグラデーションを使わない平面的なUIの設計指針をまとめます。鮮やかな配色や文字、余白をそろえ、操作状態とアクセシビリティの確認基準まで整理します。

• 平面的なUIの設計指針を作りたいとき
• 配色・文字・余白の統一
• 部品の状態とキーボード操作の定義

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

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

限られた色とドット模様でレトロな画面を設計するために、配色・文字・余白から部品の操作状態、アクセシビリティ、品質確認までの指針をまとめるスキル。

• ドット模様のレトロな画面設計
• 配色・文字・余白を統一したいとき
• 部品の操作状態とキー操作の整理

温かいアイボリーと黒に近い色、文字と下線を軸に、研究誌のようなUIの設計指針を作ります。配色や部品の形、操作状態、確認基準を実装向けに整理します。

• 研究誌風のUIを設計したいとき
• カードとボタンの見た目の統一
• 装飾を抑えた強調ルールの作成

丸みのある部品と余白、柔らかなパステルカラーを使い、親しみやすいUIの設計指針を作ります。文字や配色、操作状態をそろえ、実装時の確認基準も整理します。

• パステルカラーのUIを設計したいとき
• 丸みのある部品と余白の統一
• 読み込み中やエラー時の表示設計

余白、読みやすい文字、絞った配色を軸に、シンプルな画面の設計指針をまとめるスキル。部品の状態や操作性、アクセシビリティの確認基準まで具体化します。

• シンプルな画面を設計したいとき
• 画面間の余白と文字を統一したいとき
• UIのアクセシビリティ確認基準作り

太い枠線と幾何学図形、鮮やかな配色で動きのあるUIの設計指針を作ります。文字や余白、反応の速いアニメーション、操作状態を具体的な実装ルールにまとめます。

• 力強い幾何学的なUIの設計
• 太い枠線とオレンジ系配色の統一
• 部品の状態と動きの仕様を決めたいとき

情報量の多い業務用Webアプリに向けて、配色・文字・余白や部品の状態をそろえ、アクセシビリティの確認基準まで含む実装用のデザイン指針を作るスキル。

• 情報量の多い業務画面の設計
• 部品の見た目と操作状態の統一
• アクセシビリティ確認表の作成

強い色の対比と個性的な文字表現を使う画面の設計指針をまとめます。配色・余白・部品の状態からアクセシビリティまで、実装とレビューに使えるルールを整理します。

• 表現力のある画面を設計したいとき
• 配色・文字・余白を統一したいとき
• 部品の状態や操作を文書化したいとき

大小の区画を組み合わせるグリッドやダークモードを取り入れた、簡潔なUIの設計指針をまとめます。配色や部品のルールと、使いやすさの検証基準を整理します。

• 区画を組み合わせた簡潔なUI設計
• ダークモードの設計指針づくり
• 操作・読み上げ・タッチ要件の整理

深緑の背景に白いカードや太い黒枠を組み合わせ、物語・アニメーション・ゲーム的要素を取り入れた展示風UIの見た目と操作を、実装向けの設計指針にまとめるスキル。

• 物語に沿って探索するデジタル展示の設計
• 連続した深緑背景での画面統一
• 太枠カードや反応するボタンの仕様化

暗い背景と緑のアクセント、等幅文字を使う画面の設計指針を作るスキル。情報密度の高い配置から部品の操作状態、アクセシビリティの確認基準まで整理します。

• 端末風の暗い画面を設計したいとき
• 数値や情報を密に配置したいとき
• 部品の状態とキーボード操作の統一

雑誌のような読み心地を目指し、セリフ体と整ったグリッドを使うUIの設計指針をまとめます。文字や余白、画面幅への対応、操作のしやすさまで具体化するスキル。

• 雑誌風の読み物画面を設計したいとき
• 読む画面の文字組みと余白を統一したいとき
• 画面幅と操作支援への対応を整理したいとき

申し込みなどの行動へ迷わず進める画面のデザイン指針を作るスキル。明確な情報の優先順位やラベル、配色、部品の操作状態を定め、実装時の確認基準まで整理します。

• 申し込みなどへの導線を整理したいとき
• ボタンやラベルの共通ルール作り
• 既存画面のレビュー基準作り

太い文字とコントラストの強い配色を軸に、存在感のあるUIの設計指針を作ります。文字や余白、操作状態のルールと、使いやすさを確かめる基準を整理します。

• 太い文字を軸にUIを設計したいとき
• 部品の操作ルールの文書化
• アクセシビリティの確認基準作り

遊び心のある文字表現と大胆なグラフィックを軸に、LPなどの設計指針を作るスキル。配色や余白、部品の操作状態、アクセシビリティの基準を具体化します。

• 遊び心のあるLPを設計したいとき
• 個性的な文字とグラフィックの指針作り
• 部品の動作とアクセシビリティ基準の統一

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

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

紙の質感と印刷物を思わせるシンプルなUIに向けて、色数を抑えた配色や書体、余白、部品の操作状態を整理し、実装に使える設計ガイドラインを作るスキル。

• 紙の質感を生かしたUIの設計
• 色数を抑えた配色と書体の統一
• 部品の状態と画面幅対応の文書化

コンクリート建築に着想を得た、装飾を抑えた大胆な画面の設計指針を作ります。文字・配色・余白や操作のルールを定め、実装とレビューで共有できる形にまとめます。

• 装飾を抑えた大胆な画面の設計
• 文字・配色・余白を統一したいとき
• 部品の操作や使いやすさの確認

斜めから見た立体表現や遠近法、要素の重なりで奥行きを出すUIの設計指針をまとめます。視線を導く構成と、配色・文字・操作状態の共通ルールを整理します。

• 奥行きや重なりのあるUI設計
• 遠近法で視線を誘導したいとき
• 見た目と部品の操作状態の統一

単色の面と内外の影で、柔らかな凹凸を感じるUIの設計指針をまとめます。配色や文字、部品の操作状態、アクセシビリティまで一貫したルールに整理します。

• 柔らかな立体感のUIを設計したいとき
• ボタンや入力欄の操作状態の統一
• 影の表現と使いやすさの点検