デザインのスキル

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

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

黒い背景と白い文字、大きな見出しを軸に、高級感のある画面のデザイン指針を作るスキル。配色・書体・余白から部品の操作状態、実装時の確認基準まで整理します。

• 高級感のある暗色画面の方針作り
• 大きな見出しや余白を統一したいとき
• 暗色画面のキーボード・タッチ操作確認

ネオンの発光表現と強い色の対比を取り入れたUIの設計指針を作成。黄緑と水色を軸に、文字・余白・部品の状態やアクセシビリティの基準を整理します。

• ネオン調の画面を設計したいとき
• 黄緑と水色のアクセント配色を統一
• 部品の状態と操作ルールの定義

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

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

複雑なデータを扱うダークテーマの業務画面に向けて、グリッドやガラス風パネル、情報の優先順位、操作性をそろえる実装向けデザイン指針を作るスキル。

• 複雑なデータを扱うダーク画面の設計
• 空・読み込み中・エラー表示の整理
• 動きを抑える設定と高コントラスト対応

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

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

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

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

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

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

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

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

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

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

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

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

絵本を思わせるクリーム色や太い黒枠、丸い形を使い、親しみのあるUIの設計指針をまとめます。文字・配色・余白から部品の状態や操作の基準まで具体化するスキル。

• 親しみのある絵本風UIを設計したいとき
• 太い枠線と丸い部品を統一したいとき
• 遊び心のあるUIの操作基準を作りたいとき

大胆な色と遊び心のある図形、動きのあるレイアウトを生かし、個性的なUIの文字・余白・部品の操作を、明確な構造と両立する設計指針にまとめるスキル。

• 大胆な色や図形で個性的なUIを作りたいとき
• 文字組みと部品の操作状態を統一したいとき
• 不揃いな既存UIの移行指針づくり

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

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

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

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

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

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

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

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

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

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

セリフ書体と紫を基調に、誌面のように情報を整理したデジタル製品のUI設計指針を作ります。配色や余白、部品の操作状態を定め、実装時の確認項目までまとめます。

• 誌面風のデジタル製品UIの設計
• 紫の配色とセリフ書体の統一
• 部品の状態と操作ルールの整理

なめらかなグラデーションで奥行きを出すUIに向けて、配色・書体・余白や部品の操作状態をそろえ、使いやすさを確認できるデザイン指針を作るスキル。

• グラデーションを使うUIの設計
• 部品間の文字と余白のルール整備
• キーボード・タッチ操作の基準作成

企業向け画面の配色・書体・余白をそろえ、ブランドに沿ったデザイン指針を作るスキル。部品の操作状態からアクセシビリティ、実装時の確認項目まで整理します。

• 企業向け画面の共通ルール作り
• 既存画面の部品を統一したいとき
• アクセシビリティのレビュー基準作り

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

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

ゲームに着想を得たファンタジー風UIの設計指針を作ります。大胆で重厚な見た目に合わせ、配色・書体・余白、部品の操作状態やアクセシビリティの基準を整理します。

• ファンタジー風UIの設計指針作り
• 配色・書体・8ポイント余白の統一
• 部品の状態と操作方法の仕様作成

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

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