デザインのスキル

画面の情報配置やナビゲーション、操作の流れを検討する、簡素なHTMLワイヤーフレームを作ります。複数の構成案をパソコンとスマホの幅で比較できます。

• 画面配置やナビゲーションの案を比較
• クリックで短い操作の流れを確認
• パソコンとスマホで情報の順序を確認

HTMLの資料やページを作る際に、題材や読者に合う配色・書体・レイアウトを設計します。既存のデザイン方針を尊重し、内容に即した見た目へ整えます。

• HTML資料の配色や書体を決めたいとき
• 題材に合うランディングページへの改装
• ライト・ダーク両テーマの設計

レポートや解説、プレゼン、簡単なツールを、単体で開けるHTMLファイルにまとめます。用途や読者に合わせて見た目と操作を設計するスキルです。

• レポートを読みやすいHTMLにしたいとき
• プレゼンやランディングページの作成
• 計算ツールなどの小さな道具の作成

RTX Remixの既存プロジェクトを開き、ゲーム内のモデルやテクスチャを差し替えます。編集先レイヤーの指定から保存、変更内容の確認まで扱います。

• 旧作ゲームのテクスチャ差し替え
• 取り込み済みモデルの差し替え
• シーンのレイヤー別編集

CADなどの素材をシミュレーション向けのUSDへ変換し、材質・物理特性の付与からSimReady要件の確認、プレビューや配布パッケージ作成までをつなぐスキル。

• CADをシミュレーション用に変換したいとき
• 材質や物理特性を付与したいとき
• 既存USDのSimReady適合を確認したいとき

チーム紹介ページの人物写真を比較し、縦横比・明るさ・背景などの違いを洗い出します。共通の撮影仕様をまとめ、承認後に切り抜きとサイズをそろえて書き出します。

• チームページの写真のばらつき確認
• 社員写真のサイズを統一したいとき
• 新入社員の写真を追加したいとき

スライドや文書、レポート、HTMLのランディングページに、10種類の既存テーマや独自テーマの配色とフォントを適用し、見た目を統一するスキル。

• スライド全体の配色と書体の統一
• 10種類の見本から資料の見た目を選択
• HTMLのLPへのテーマ適用

Webやアプリの画面を、利用者の目的や情報の配置、操作への反応から見直し、余白と文字を生かしたシンプルなUIへの改善案を優先順位付きで整理します。

• 新機能の画面を設計したいとき
• 既存画面の改善点の優先順位付け
• 配置・余白・文字の見直し

Macらしいデスクトップアプリの画面設計と実装を支援します。レイアウト、キーボード操作、ドラッグ＆ドロップ、ライト・ダーク表示まで整えます。

• Mac風のデスクトップツールを作りたいとき
• サイドバーやタイトルバーの配置設計
• ショートカットとドラッグ操作の設計

Miroのボード検索・作成、付箋やフレームの追加、要素と接続線の確認、メンバーへの共有をエージェントに頼み、共同作業の準備を進めるスキル。

• 会議やワークショップの準備をしたいとき
• 付箋やフレームをまとめて追加したいとき
• ボードの要素や接続線を確認したいとき

Figmaのデザインファイルを調べ、部品や色・文字・余白の設定を抽出し、画像の書き出しやコメント管理までエージェントに任せられるスキルです。

• Figmaの部品構成を調べたいとき
• 画面や部品を画像で書き出したいとき
• デザイン設定をTailwindへ変換

Apple公式のデザイン指針を根拠に、iOSの機能別デザイン仕様をまとめます。画面構成や操作、状態の変化、アクセシビリティ、多言語対応を具体的な要件に整理します。

• iOSの機能別デザイン仕様作成
• 画面部品の動作や状態の定義
• アクセシビリティと多言語対応の確認

ポスターや静止画の作品に向けて、色・形・余白などのデザイン方針を文章にまとめ、その方針をもとに文字を抑えたオリジナルのPDF・PNGを制作するスキル。

• 文字を抑えたポスター制作
• テーマを抽象的な作品にしたいとき
• 統一感のある複数ページの制作

WebやiOSの画面を製品の目的と既存デザインに沿って設計・実装し、読み込み中やエラーなどの状態、操作や表示の不具合まで確認するスキル。

• ありきたりな画面案を改善したいとき
• 空表示やエラー、閲覧専用状態の整備
• パソコンとモバイルの表示確認

資料などの成果物に Anthropic のブランドカラーと書体を適用し、見出し・本文・図形の配色や文字の階層をそろえて、見た目を整えるスキル。

• プレゼン資料にブランドカラーを適用
• 見出しと本文の書体統一
• 図形とアクセントカラーの調整

Canvaのデザイン検索・作成、素材のアップロード、PDFや画像への書き出し、フォルダ整理、ブランドテンプレートへのデータ差し込みを自動化するスキル。

• Canva内の既存デザインを探したいとき
• 素材のアップロードとデザイン作成
• デザインをPDFや画像で書き出したいとき

文章から概念や関係を整理し、フロー図やマインドマップなどを作成します。Obsidian用、標準形式、アニメーション用のExcalidrawファイルを出力するスキルです。

• 業務手順をフロー図にしたいとき
• アイデアをマインドマップで整理
• プロジェクトの節目を時間線で可視化

Obsidianのタブやサイドバー、ノートの見た目をCSSで調整するスキル。有効な設定を確認し、変更前の状態を保存して、スクリーンショットで仕上がりを確かめます。

• タブやサイドバーの配色調整
• アイコンや文字の読みやすさ改善
• ノートの影や角丸の調整

会議録や報告書、PRなどを、画像生成用の指示と掲載文に整理します。資料の種類や分野に合う構成、背景、配色まで指定し、要約カードの制作準備を支えるスキル。

• 会議録を縦長の要約カードにしたいとき
• PRの要約カードを準備したいとき
• リリース告知画像の指示を作りたいとき

Webやターミナルの画面設計を整理し、配色・文字・余白のルール、画面幅や操作状態への対応、品質確認の条件まで、実装担当へ渡す資料をまとめるスキル。

• ダッシュボードを再設計したいとき
• 配色・文字・余白の基準をそろえたいとき
• 画面幅と操作状態への対応を整理したいとき

プロダクトのデザイン全体を任せたいときに、目的や対象を整理し、配色・文字・レイアウトの方向性を準備します。実装やアクセシビリティ確認、見た目の検証への引き継ぎをまとめます。

• プロダクト全体のデザイン方針づくり
• 複数のデザイン案を比較したいとき
• 実装と検証の引き継ぎ準備

iOS・macOSのアプリやApple風のWeb画面、製品ビジュアルについて、対象環境に合うデザイン方針と、根拠に基づく改善案を整理します。

• iPadの購入画面をHIGで確認したいとき
• Apple風のWebデザインを検討したいとき
• 製品ビジュアルの方向性を決めたいとき

Web画面やスライド、PDFの内容・レイアウト・読みやすさを点検し、参考例との比較基準と実際の表示確認をもとに、公開前の品質判断を支えるスキル。

• 公開前のLPを点検したいとき
• スライドの品質基準づくり
• PDFの配置や日本語の改行確認

Webページをデザイン賞の公開審査基準で採点し、UI・UX・独創性の評価と基準点との差から、改善すべき課題やアクセシビリティへの影響を整理します。

• LPをデザイン賞の基準で評価したいとき
• UIや利用体験の弱点を整理したいとき
• 演出と使いやすさの両立を検討したいとき