デザインのスキル

テーマから制作方針を文章化し、p5.jsで数式や粒子の動きによるアートを作るスキル。再現用のシードや各種設定を操作できるHTMLにまとめます。

• テーマから生成アートを作りたいとき
• 粒子や流れを使った構図の探索
• シードで再現可能な変化を比べたいとき

AIが作ったWeb画面の配色、余白、情報の優先順位を見直すスキル。既存の処理を保ちながら、操作時の反応やアクセシビリティ、モバイル表示まで整えます。

• AIが作った試作画面を整えたいとき
• ダッシュボードの操作や指標の重複整理
• 参考画像に沿って画面を改修したいとき

既存のデザインや部品を生かし、製品の目的に合うWeb・iOS画面を設計・実装します。読み込み中やエラー時の状態、画面幅への対応も整理し、表示結果まで確認します。

• 既存製品のデザインに沿った画面設計
• 読み込み中・空・エラー状態の整理
• 公開前のレスポンシブ表示の点検

浮遊するカードやガラス風の透過表現、奥行きのあるWeb画面を実装するスキル。GSAPや3D CSSでスクロール連動の動きを加え、動きを抑える設定にも対応します。

• 浮遊するカードのLPを作りたいとき
• ダッシュボードに奥行きを加えたいとき
• スクロール連動アニメーションの実装

ブランド名や業種、参考画像をもとに、Beatraの有料サービスでロゴ案を作るためのスキル。公式パッケージの検証・導入から生成結果の確認までを案内します。

• 新ブランドのロゴ案を検討したいとき
• 業種からロゴの方向性を探したいとき
• 承認済みの参考画像でロゴ案を作りたいとき

新しいUIの制作や既存画面の改修で、題材や利用者に合った配色・書体・レイアウトを設計します。画一的な見た目を見直し、操作文言や動きまで整えるスキルです。

• 新しいサイトのデザイン方針づくり
• 画一的なUIを見直したいとき
• 実装前に配色・書体・配置を決めたいとき

ボタンを押した反応や読み込み表示、画面の切り替え、スワイプなどを設計・実装します。動きの速さやアクセシビリティに配慮し、操作の状態が伝わるUIを整えるスキル。

• ボタンのホバー・クリック反応の追加
• 読み込み中の仮表示と進捗表示
• 画面や部品の切り替え演出

Androidアプリの画面をMaterial Design 3とJetpack Composeで設計・実装するスキル。画面サイズへの対応や配色、操作のしやすさも扱います。

• Jetpack Composeで画面を作りたいとき
• スマホ・タブレット・折りたたみ端末への対応
• 動的な配色とダークモードの設定

文字・配色・余白・アイコンのルールを整理し、読みやすく統一感のある画面を設計するスキル。共通の設定値やスタイルガイド、ダークモードの検討に使えます。

• 新規プロジェクトの共通設定値の設計
• 文字と余白のガイドライン作成
• 配色のコントラストと統一感の確認

色・文字・余白などの共通ルールを整理し、ライト・ダーク切り替えや複数ブランドへの対応、再利用するUI部品の設計と運用を支援するスキル。

• 色・文字・余白の共通ルールの整理
• ライト・ダーク切り替えの実装
• 複数ブランドでUI部品を共用したいとき

Appleの設計指針に沿って、iPhone・iPad向けの画面をSwiftUIで設計・実装。画面遷移や可変レイアウト、文字サイズ変更、ダークモード対応を支援します。

• Appleの指針に沿った画面設計
• iPhone・iPad対応のレイアウト作成
• タブや画面遷移を実装したいとき

製品の目的やブランドの印象を聞き取り、色・書体・形の方針を決めてStitchでLPを生成。意見を反映して調整し、公開用のHTML一式にまとめます。

• 見た目の方針が未定の製品LP制作
• ブランドの印象を配色や書体に反映
• ページ案の比較と意見に沿った調整

利用者と制約を整理し、情報の優先順位や余白、画面の状態を設計するスキルです。画面幅への対応とアクセシビリティを考慮して実装し、見た目を確認します。

• 利用者と制約に合わせた画面設計
• 画面幅に応じたレイアウトの実装
• アクセシビリティを考慮したUI実装

既存の授業ページを複製し、配置や装飾を保ちながら内容を差し替えるスキル。元の題材の文言が残っていないか確認し、新しいページのナレーションと音声も整えます。

• 既存レイアウトで新しいページを作りたいとき
• 取り込んだスライドのページ再利用
• 長い内容を同じ見た目の複数ページに分割

既存のスライドから内容に合うページを複製し、配色や書体、配置を引き継いだ新しい講座を作ります。文章や図表を差し替え、旧内容の残りや音声も確認します。

• 既存資料の見た目で新講座を作りたいとき
• 別のテーマにレイアウトを再利用したいとき
• 配色や書体を保って内容を替えたいとき

スライドの文字量、配置、配色、余白を既存ページの基準に合わせて整えるスキル。文章や図形を部分修正するときに、読みやすさとデザインの一貫性を保つ判断を支えます。

• 文章の差し替え時にはみ出しを防ぎたいとき
• 文字と背景のコントラスト改善
• カードの整列と余白調整

PenpotでWebやアプリの画面を作成・改善します。既存の色や部品を確認し、レイアウト、フォーム、操作しやすさ、アクセシビリティを整えるスキルです。

• ダッシュボードやアプリ画面の設計
• フォームやナビゲーションの改善
• 統一した部品ライブラリの作成

ブレッドボード上の電子部品の配置と配線を、HTML5 Canvasで図にします。LEDや555タイマー、6502系の回路を組む際の視覚的な参考資料を作成します。

• LED回路の部品配置を考えたいとき
• 555タイマーの配置図を描きたいとき
• 6502コンピューターの配線の可視化

Macアプリの画面を、macOS 27 Golden Gate向けの標準部品で設計・実装・見直しします。不要なカードや枠を整理し、控えめな透過表現と読みやすい画面構成に整えます。

• Macアプリの画面設計
• カードや枠が多い画面の見直し
• FigmaからSwiftUIへの実装

自然言語で伝えた立体形状や操作を、FreeCAD用のPythonスクリプトにまとめます。寸法変更に対応するモデルやマクロ、操作画面の作成も扱います。

• 文章から立体モデルを作りたいとき
• 寸法を変更できるモデルの作成
• CADの繰り返し操作を自動化

文章で伝えた業務手順やシステム構成、アイデアの関係を図に整理し、Excalidrawで開いて編集できるフローチャートやマインドマップなどを生成するスキル。

• 業務手順をフローチャートにしたいとき
• システムの構成や接続を説明したいとき
• アイデアをマインドマップにしたいとき

依頼した図を編集可能な.drawioファイルとして作成し、資料に使えるPNG・SVG・PDFへ書き出します。図のXMLを埋め込んで再編集にも備えます。

• サービスと外部システムの構成図作成
• Word文書に貼るPNG図の準備
• draw.ioで再編集できる図の共有

Adobe Illustratorの繰り返し作業を自動化するスクリプトの作成・修正を支援します。図形や文字、レイヤーの操作から一括処理、各種形式への書き出しまで扱います。

• 図形や文字の繰り返し編集を自動化したいとき
• Illustratorファイルを一括出力したいとき
• データから図版のバリエーションを作りたいとき

既存の部品や配色、製品の目的に沿ってWeb・iOSの画面を設計・改善し、必要に応じて実例を参照しながら表示崩れや操作の不具合まで確認するスキル。

• 既存製品に合う画面を追加したいとき
• 管理画面の見た目や情報量の整理
• 公開前の表示・操作レビュー