デザインのスキル

プロジェクト報告や障害レビュー向けに、暗いCRT端末風の16:9 HTMLスライドを制作。等幅文字、赤い警告表示、時系列や監査ログで情報を整理します。

• プロジェクトの振り返り報告
• インフラ障害の経過報告
• セキュリティレビューの整理

管理・分析画面の試作を、単一のHTMLファイルで作るスキル。既存のデザインに沿って、主要指標のカードやグラフ、表を備えた画面を組み立てます。

• 売上ダッシュボードの試作
• アクセス・利用状況の分析画面の検討
• 運用状況を確認する管理画面の設計

HTMLのページやスライドを五つの観点で根拠付き採点し、レーダーチャートと、残す点・修正点・短時間で直せる点を一つのHTMLレポートにまとめます。

• 納品前のLPのデザイン確認
• HTMLスライドの視認性と操作確認
• 二つのデザイン案の比較

現代美術の国際展や展覧会の企画を、黄色と温かな紙色のHTMLスライドに整理します。企画の主題、展示室、作品、来場者の動線を伝える資料作りに使えます。

• 理事会向けに国際展の企画を提案したいとき
• 展示室の構成と来場者の動線の説明
• 文化施設のプログラム発表

恋愛・マッチングサービスやコミュニティの数値を、主要指標とグラフで見せるデスクトップ向け画面を、落ち着いた誌面風の単一HTMLに仕上げるスキル。

• 恋愛サービスの管理画面を試作したいとき
• コミュニティ活動の一覧画面
• 相互マッチ数とマッチ率の推移表示

まとまりのないスタートアップの説明資料を、意思決定に向けて構成し直し、パステルとネオンの色面や太い黒枠を使う統一デザインのHTMLスライドに仕上げるスキル。

• 取締役会向け資料を整えたいとき
• 制作会社の実績紹介資料づくり
• ブランド刷新案のレビュー

デジタルガイドの表紙と本文ページを横並びのHTMLで試作します。目次、引用、手順リスト、演習欄を備え、余白と書体を生かした誌面に整えます。

• クリエイター向けガイドの試作
• ルックブックの誌面検討
• 配布用マーケティング資料の試作

Web画面のコードをVercelのガイドラインに照らして点検し、レイアウト・文字・色・動き・アクセシビリティの指摘を、ファイル名と行番号で示します。

• プロダクトのUIコードを点検したいとき
• ガイドラインで利用しやすさを確認したいとき
• 配置・文字・色・動きを点検したいとき

WordPressの公式デザインに沿ってテーマやサイトの見た目を整えるスキル。色や文字組みなどの共通設定と、画面部品のパターンを適用します。

• テーマにWordPress公式のスタイルを適用
• サイトの文字組みを整えたいとき
• 公式の画面部品パターンを使いたいとき

ガイドやAPIリファレンスの画面を、ナビゲーション・本文・目次の3列で設計し、コード例や表も含む単一のHTMLページとして試作するスキル。

• APIリファレンスを試作したいとき
• コード例付きのチュートリアル作成
• 目次付きガイドの画面設計

趣味の収集体験やゲームの話題を、濃紺とネオンのピクセルアート調で伝えるHTMLスライドにまとめ、友人や趣味仲間に見せる物語として整えるスキル。

• レトロなアーケード機の収集記録紹介
• 友人に趣味の歩みを伝えたいとき
• ゲーム仲間向けの発表資料作成

習慣や日々のタスクをクエストとして見せるモバイルアプリの試作を作るスキル。表紙・今日の一覧・詳細の3画面に、経験値やレベルの表現を組み込みます。

• ゲーム要素のある習慣アプリを試作したいとき
• 経験値付きの日次タスク一覧を検討したいとき
• 手順と報酬のあるクエスト詳細を設計したいとき

メンバー一覧や活動履歴、役割別グラフを備えたチーム管理画面を作るスキル。タブ切替や明暗表示、CSV出力が動く単一HTMLの試作を作成します。

• チーム管理画面を試作したいとき
• 役割の構成やオンライン状況の説明
• メンバー情報や活動をタブで確認

温かみのある白系の背景とセリフ体、細い罫線、広い余白を使い、投資家向け報告や講義資料を、誌面のように落ち着いた16:9のHTMLスライドにまとめます。

• 投資家向け報告資料の作成
• デザインレビューの発表
• 社内の方針共有

指定したテーマの長文記事を執筆し、見出しや図版用の枠、引用、著者紹介、関連記事を備えた、雑誌のように読みやすい単一のHTMLページに仕上げます。

• 長文ブログの記事ページ試作
• 図版や引用を含む事例紹介
• 既存デザインに沿った記事画面設計

デザインの要件と実装したUIの見た目のずれを詰めるため、講評・調整・仕上げを繰り返す作業を案内し、別途導入する元のワークフローにつなぐスキル。

• 実装画面とデザイン要件を見比べたいとき
• 見た目のずれを繰り返し調整したいとき
• デザインから実装への見直し工程を計画

商品発表やSNS共有向けの縦長ポスターを作成。大きな見出し、鮮やかなグラデーション、要点カードを組み合わせ、伝えたい情報を一枚にまとめます。

• 新商品の縦長ポスターを作りたいとき
• SNSで共有する告知画像の作成
• 特徴3〜5点を一枚にまとめたいとき

Google Stitchで画面を生成する際のデザイン方針をDESIGN.mdにまとめます。配色、書体、配置、動き、避ける表現を具体化し、画面間の統一に使います。

• Google Stitchの画面に共通ルールを作る
• 配色や書体、部品の振る舞いを文書化
• モバイル表示と動きのルールを定義

太い見出しと幾何学的なカードを使い、スイス風のプレゼン型ページを単一HTMLで作るスキル。スライド移動やテーマ切り替え、注釈表示も組み込みます。

• プレゼン型の紹介ページ制作
• スイス風のHTMLスライド制作
• 操作できる製品発表ページ制作

GLSLで流体や粒子、手続き的に生成する映像表現を制作するスキル。レイマーチングなどの技法を使い、ページ冒頭のメインビジュアルや動きの一場面の制作に役立ちます。

• ページのメインビジュアル制作
• 流体シミュレーションの表現
• 粒子エフェクトを作りたいとき

AIエージェントが画面を作る際に、複数の小さなUI部品へ共通の制作ルールを適用するためのスキル。インターフェース全体の一貫性を保つ指針として使います。

• 複数のUI部品の一貫性を保ちたいとき
• 画面制作の共通ルールをエージェントに渡す
• 制作計画にUIの制約を取り入れたいとき

UI/UXの設計パターンを探す際に、導入候補をエージェントへ知らせるカタログ項目です。検索データやテンプレートは含まず、実際の利用には配布元の一式が必要です。

• UI/UX設計の参考候補を探したいとき
• 必要なファイルの導入状況確認
• 配布元の導入方法を知りたいとき

既存のOD Next計画に必要な画像などの素材を準備します。利用可能な機能や素材を再利用し、取得・寸法確認・非同期処理の結果回収まで、要件を保って進めます。

• 既存計画に必要な素材をそろえたいとき
• 複数ページで既存素材を再利用したいとき
• 配置に使う素材の寸法確認

既存のWebサイトやアプリの画面を点検し、文字・配色・配置・操作時の表示を改善します。現在の技術構成と機能を保ちながら、段階的に整えるスキル。

• 既存サイトのデザインを点検したいとき
• 定型的な画面パターンを見直したいとき
• 読み込み中・空データ・エラー表示の改善