デザインのスキル

既存のWebサイトやアプリを点検し、文字・配色・レイアウト・操作時の表示を改善します。現在の技術構成と機能を保ちながら、画一的な見た目や不足している状態表示を整えます。

• AI生成の画一的な見た目を直したいとき
• 文字・配色・余白を整えたいとき
• 読み込み・空データ・エラー表示の追加

図表やレポート、画面のモックアップをHTMLページとして作り、Orcaのチャット内に表示するスキルです。数値の比較や関係図など、視覚的な説明を回答に添えられます。

• 数値をグラフで比較したいとき
• 情報の関係を図で説明したいとき
• 表やレポートをチャット内に表示

Figmaファイルを解析し、ページや画面、コンポーネント、デザイン上の共通値の関係を図にまとめるスキル。対話型ダッシュボードでデザイン構造を確認できます。

• Figmaファイルの全体構成を把握したいとき
• コンポーネントや配置先の関係の確認
• デザインの共通値の使われ方の確認

自然文やMermaid、コードの根拠から構成図・業務フロー・時系列などを作り、検証を経て、単体で閲覧できる対話型HTMLとして出力するスキル。

• コードに基づくシステム構成図の作成
• 承認手順や旅行計画の整理
• データベースのテーブル関係の可視化

利用可能なスキルを探し、1〜3個を組み合わせて意外性のある作品を作ります。関心や季節に合わせた題材で、資料や遊べるWeb体験などを形にします。

• 意外な作品から着想を得たいとき
• 手持ちのスキルの組み合わせを試す
• 遊べるWeb体験を頼みたいとき

Webページや画面部品を、目的と読者に合うデザイン方針から考え、動作するコードに仕上げます。書体・配色・余白・アニメーションを整え、画面全体の見た目に一貫性を持たせます。

• デザイン方針のあるLPを作りたいとき
• ダッシュボードの配置と文字組みの改善
• 配色と動きを揃えたReact部品の作成

人物・風景・商品のイメージを、画風や構図、照明などを整理した指示から画像にするスキル。複数の参考画像による誘導や、縦横比の指定にも対応します。

• 服装や時代、外見を指定した人物画像の作成
• 雰囲気や天候、照明を指定した風景の作成
• 素材や撮影角度を指定した商品画像の作成

Webサイトやアプリの画面を設計・改善し、文字や余白、配色から操作の流れまで整えます。使いやすさのレビュー、画面サイズへの対応、表示性能の確認も扱います。

• 新しい画面の構成と見た目の設計
• 既存画面の文字・余白・配色の改善
• アクセシビリティと画面サイズの点検

スライドや文書、レポート、HTMLのランディングページの配色とフォントを統一するスキル。10種類の既定テーマから選べるほか、独自テーマも作成します。

• スライドの配色とフォントを揃えたいとき
• 文書やレポートのテーマ選び
• HTMLのランディングページの装飾

資料や制作物の配色と文字をAnthropicのブランド基準に合わせるスキルです。見出し・本文のフォントや背景に応じた文字色、図形のアクセント色を整えます。

• 資料をAnthropicの配色に合わせたいとき
• 見出しと本文のフォントを統一したいとき
• 明暗の背景に合う文字色を選びたいとき

ポスターや静的なアートを、色・形・余白の方針づくりから制作するスキル。デザイン思想をまとめたMarkdownと、文字を抑えたPNG・PDFの作品を作ります。

• オリジナルのポスター制作
• テーマを抽象アートで表現したいとき
• デザイン方針と作品をそろえたいとき

コンソールの配色や星・地球儀などの動きを希望に合わせて調整し、Ruflo Console Theme Studioに取り込めるJSON形式のテーマを作成します。

• 好みの雰囲気の配色を作りたいとき
• 装飾の動きを抑えた表示にしたいとき
• 星や地球儀で近未来風に仕上げたいとき

購入や会員登録などの複数画面にまたがる手続きで、同じ情報を再入力させる箇所を探すスキル。入力済みデータの自動反映や選択による再利用へ改善します。

• 購入手続きの重複入力を点検したいとき
• 会員登録や初回案内フォームの見直し
• 問い合わせで入力済み情報を再利用

海外向けサイトの画像やアイコンを点検し、文化によって意味が変わる表現を見直すスキル。地域に偏りにくい素材への置換や、地域別の画像切り替えを扱います。

• 海外展開前の画像レビュー
• ジェスチャーや文化的記号の確認
• 言語・地域別に画像を変えたいとき

CSSの配色定義を点検し、色の明るさを人の見え方に合わせて調整できるoklch()を使って、統一感のある濃淡やダークモードの配色を整えるスキル。

• CSSの共通配色を整理したいとき
• 見た目の明るさがそろう濃淡の作成
• ダークモードやホバー色の設計

購入や登録など複数ページにまたがる操作で、チャットや連絡先、FAQへの入口の位置と並び順を比較し、ヘルプを一貫して探せる配置への修正を支援します。

• 購入手続きのヘルプ配置の点検
• 登録手順のサポートリンクの統一
• アカウント復旧時のヘルプ導線確認

Webページの文字や入力欄の枠、アイコンなどの色のコントラストを点検し、操作中の状態も含めてWCAGの基準を満たす配色への修正を支援するスキル。

• 文字と背景の配色を点検したいとき
• 入力欄の枠やアイコンの視認性確認
• ホバーやフォーカス時の色の確認

処理の流れを斜め上から見た立体的な機械に置き換え、操作できる解説ページを作ります。動き・数値・説明を同じモデルで連動させ、故障時の挙動も示します。

• キャッシュやキューの仕組みの解説
• 処理の一部が壊れた影響を示したいとき
• 図が主役の解説ページ制作

教材のページや図、マニュアルの見た目と英文表現を共通ルールで整えます。配色や書体、図番号、カード配置に加え、ダークモードと操作しやすさ、動きを減らす設定も確認します。

• 教材ページの配色と書体の統一
• ダークモードの配色と可読性の確認
• 図番号とカード配置の統一

教材やREADME、マニュアル向けに、実際のシステム名やログを根拠とした静的SVG図を作るスキル。9種類の図と統一した色・矢印で仕組みを説明します。

• READMEにシステム間の通信図を載せたいとき
• マニュアルで状態遷移を説明したいとき
• ログや仕様からデータの流れを図示

教材の図を動かしたり、スライダーで数値を変えて結果を示したりするスキル。仕組みを操作して確かめる図や、ページの見出しを飾る動くドット模様も作れます。

• 教材の処理の流れを動かしたいとき
• 数式の変化をスライダーで示したいとき
• システムの仕組みを操作して学ぶ図

Web画面の新規作成や改修で、見た目、配置、動き、使いやすさを整えるスキル。デザイン方針を文書化し、実装と実ブラウザでの表示・性能確認まで進めます。

• 参考画像やサイトからLPを作りたいとき
• 既存の管理画面の配置や見た目の改善
• アニメーションや操作時の反応の追加

HyperFramesの動画制作で、配色・書体・画面構成・ナレーション・場面のリズムを整理し、既存のデザイン仕様に沿って見た目と演出方針を整えるスキル。

• 既存のデザイン仕様に動画を合わせたいとき
• 雰囲気に合う配色と書体を選びたいとき
• 場面とナレーションのテンポを整えたいとき

After Effectsから書き出したLottieの動きに、ディズニーのアニメーション12原則を取り入れます。伸縮や予備動作の設計から再生速度・区間の制御まで扱います。

• 予備動作や伸縮を加えたいとき
• 再生速度や区間を調整したいとき
• 主動作と補助アニメーションの連動