デザインのスキル

曖昧なUIの依頼から、配色・書体・レイアウト・操作のルールを具体化。製品の用途に沿ったデザイン方針をまとめ、アクセシビリティの確認や実装方法の検討を支援します。

• ランディングページのデザイン方針作成
• ダッシュボードの配色・書体選び
• UIのアクセシビリティと操作の見直し

稼働中のWebサイトを複数の画面幅で確認し、レイアウト崩れや配色・余白の不統一、アクセシビリティの問題を見つけ、ソースコードの修正と再確認まで進めます。

• スマホ表示の崩れを直したいとき
• 余白・フォント・配色の統一性の点検
• コントラストやフォーカス表示の確認

Webページやアプリの画面を、目的と利用者に合うデザイン方針から設計し、文字・配色・余白・動きまで統一した実際に動くコードに仕上げるスキル。

• デザイン方針のあるLPを作りたいとき
• ダッシュボードの設計と実装
• Reactの画面部品を作りたいとき

参考画像の画風やレイアウトを読み取り、配置や視覚的な特徴を保ちながら、指定した内容の新しい画像を生成します。生成後の配置確認と、上限回数内での再生成にも対応します。

• 参考画像の画風で別の内容を描きたいとき
• 図解の配置を保って内容を差し替えたいとき
• 縦横比と画像サイズを指定して生成したいとき

文章や構造化データの内容を分析し、レイアウトと表現スタイルを選んで情報図を生成します。複数回の生成と画像評価を使い、候補から結果を選べます。

• 説明文を図解にまとめたいとき
• 構造化データから情報図を作りたいとき
• 複数の生成画像を評価して選びたいとき

準備済みの構成案から、統一したデザインのHTMLスライド、PNG画像、ページ別講稿、発表用ページを制作し、指定に応じてPPTXも出力するスキル。

• 確定した構成案からスライドを作りたいとき
• HTMLの発表資料と講稿の制作
• HTML版とPPTX版の同時出力

Markdownの長いレポートや研究ノートを、事実と結論の強さを保って再構成し、テーマに合う見出しや図表、レイアウトを備えた単一のHTMLページに仕上げるスキル。

• 業界分析を共有用Webページにしたいとき
• 研究ノートの結論と根拠を整理したいとき
• 週報や振り返りのWebページ化

テーマや添付資料からプレゼン作成の準備を進め、調査・大綱作成・出力担当のスキルへつなぎます。調査の深さや表現の豊かさを選び、中断した作業の再開にも対応します。

• テーマと資料からプレゼンを作りたいとき
• 調査の深さや表現を選びたいとき
• 制作前に大綱を確認したいとき

確定した構成案をもとに、動く背景やページ切り替え、キーボード操作を備えたブラウザ用スライドをHTMLで制作し、各ページを画像で検証するスキルです。

• 製品発表用の動くスライド制作
• 正式な報告に合う控えめな演出
• アニメーション付きデータ表示

会話に貼り付けた経歴やスキルを、ポートフォリオ形式の履歴書画像にまとめます。希望の色や雰囲気を取り込み、決まったレイアウトで縦長の画像を生成するスキル。

• 会話に貼った経歴から履歴書画像を作成
• 職歴・スキル・制作実績を一枚に整理
• 好みの色や雰囲気で履歴書をデザイン

準備済みの構成に沿って、各スライドを16:9の一枚画像としてデザイン。全体の配色や構図をそろえ、ページ別PNGの生成とPPTXへの組み立てを行うスキル。

• 確定済み構成のスライドを画像化
• 配色や構図をそろえた資料の制作
• スライド画像のPPTX化

ボタンやメニューの反応、アニメーションの速さ、ドラッグ操作など、画面の細部を見直し、使用頻度や目的、アクセシビリティに応じたUIの実装・改善を支援します。

• UIコードの改善案を比較したいとき
• アニメーションの速度や緩急の調整
• ドラッグ操作やボタンの反応の改善

Web画面のアニメーションを、操作の目的や頻度に合わせて設計・実装するスキル。速度や加減速、描画負荷、動きを抑える設定を見直し、自然な動作に整えます。

• モーダルやメニューの開閉を整えたいとき
• ボタンの押下やホバーの反応を調整したいとき
• アニメーションのカクつきを調べたいとき

Webページやアプリの画面を、用途と利用者に合うデザインで実装するスキル。書体、配色、余白、動きに一貫性を持たせ、動作するコードに仕上げます。

• デザイン方針のあるLPを作りたいとき
• ダッシュボードの見た目を整えたいとき
• Reactの画面部品を作りたいとき

参考画像の構図、光、色、質感などを読み取り、見た目の特徴を再現するための画像生成プロンプトと、避けたい表現を指定するネガティブプロンプトを作るスキル。

• 参考写真の構図や光を再現したいとき
• イラストの画風を言葉にしたいとき
• 商品画像の素材感や背景の言語化

文章で伝えたデザインやHTML、公開URLから、静止画・アニメーションのPAGXファイルを作成します。既存ファイルの編集、表示確認、他形式への書き出しも扱います。

• 文章からポスターや商品カードを作成
• HTMLや公開URLをPAGXへ変換
• 動くバナーやローディングの作成

画面の実際の構造を点線で描き、完成したUIを走査線とともに表示します。生成ログを添える演出にも対応し、AIが画面を組み立てるような動きを加えるスキルです。

• AIの結果カードを表示したいとき
• 製品デモで生成過程を演出したいとき
• LPに生成ログ付きの演出を加える

Webページやアプリの画面を、用途や読者に合うデザイン方針から組み立て、文字・配色・余白・動きまで整えた実際に動くコードとして仕上げるスキル。

• 見た目の方針が明確なLPの制作
• ダッシュボードのデザインと実装
• 既存画面の文字・配色・余白の改善

ドキュメントサイトとランディングページの見た目を、既存の設計方針に沿って調整します。本文幅や余白、配色、ヘッダーナビゲーションの基準と理由を確認できます。

• ドキュメントの本文幅や余白の調整
• 新しいナビゲーションリンクの配置検討
• ランディングページの配色や文字組みの変更

文章の内容や関係を整理し、フローチャートやマインドマップなどの図を生成します。Obsidian用、標準形式、アニメーション順序付きの形式で保存できます。

• 業務手順をフローチャートにしたいとき
• アイデアをマインドマップに整理
• Obsidianのノート用の図作成

論文や報告書に載せる科学図表を、データの正確さ、軸やラベル、配色、グラフの選び方から整え、書き出し後の重なりや読みやすさまで確認するスキル。

• 論文・報告書用の図表を仕上げたいとき
• 除外データと集計の整合性を確認したいとき
• ラベル・軸・配色を整えたいとき

新しい画面の制作や既存UIの見直しで、題材と利用者に合う配色・書体・レイアウトを設計し、文言や動きも含めて意図のある見た目に整えるスキル。

• 題材と利用者に合うWeb画面の制作
• 画一的に見える既存UIの見直し
• 配色・書体・レイアウトの設計

概念や業務の流れ、システム構成を図に整理し、ブラウザで開ける単体のHTMLや、後から編集できるExcalidrawファイルとして出力するスキル。

• 教材の概念や仕組みを図解したいとき
• ソフトウェアやクラウドの構成整理
• 編集できる会議用の図を作りたいとき

色・形・余白などのデザイン方針を文章にまとめ、それを基に文字を控えたポスターや静止画作品を制作し、PNGやPDFと方針のMarkdownで出力するスキル。

• 文字を控えたポスターを作りたいとき
• テーマを抽象的な作品で表したいとき
• 共通の方針で複数ページを作りたいとき