デザインのスキル

聞き手に何を理解・判断してほしいかを軸に、プレゼンの構成や見出し、根拠、図表の使い方を整理します。発表用と単独で読む資料の違いも考慮します。

• 5分の進捗報告を構成したいとき
• 取締役会資料の判断事項を明確にしたいとき
• 導入説明を中心とした顧客デモの構成

Webページやアプリの見た目を作る前に、配色・文字・カード配置・動きなどの定型表現を点検するスキル。避けたいデザインの重なりを確認し、明示された指定を優先します。

• Webページ制作前のデザイン確認
• ダッシュボードのカード配置の点検
• 部品の文字組みと配色の見直し

画面の配置図やストーリーボードを使い、構成や操作の流れが異なる案を3〜5種類ずつ比較します。過去の案を残しながらデザインの方向性を探るスキルです。

• 画面レイアウトを複数案で比較したいとき
• ストーリーボードで操作の流れを検討
• 気に入った案の別案を見たいとき

クリックや入力に反応するアプリの試作品を作ります。Reactで状態の変化、フォーム検証、アニメーション、複数ステップの画面遷移まで実装するスキルです。

• 入力検証付きフォームの試作
• 複数ステップの画面遷移の確認
• ホバーやアニメーションの確認

Canvaで編集可能な資料やSNS画像を作成・修正し、ブランド素材の適用、画像生成、背景除去、画像のレイヤー分離、用途に合わせたサイズ変更を進めるスキル。

• Canvaでチラシやプレゼン資料を作りたいとき
• ブランドテンプレートで広告素材を作りたいとき
• SNS投稿やストーリー用のサイズ変更

発表時間やブランドの方向性に合わせ、話の構成から文字・図表の配置まで整えた、編集しやすくPDF印刷にも対応するHTML形式のスライドを作るスキル。

• 社内向けの発表資料を作りたいとき
• ブランドに沿ったスライド制作
• 数値を表・画像・引用で伝えたいとき

デザイン内で色やレイアウト、見出しなどを調整できる操作パネルを追加するスキル。指定がなければ影響の大きい少数の項目を選び、無効時はパネルを完全に隠します。

• 主要な色の調整操作を追加したいとき
• レイアウトの種類を切り替えたいとき
• 見出しの文面を変更可能にしたいとき

複数のデザイン案を検討回ごとに並べ、固定IDとリンクで参照できるようにするスキル。過去案を残しながら新しい案を上に追加し、比較と修正指示を支えます。

• 複数のデザイン案を比較したいとき
• IDで指定した案を修正したいとき
• 過去案と追加案を見比べたいとき

Figmaの画面から部品のバリエーション、余白、色などの共通設定や画像素材を読み取り、デザインをコードで実装するための情報を整理するスキル。

• Figma画面の実装情報を集めたいとき
• 部品のバリエーションや余白の確認
• 実装用の画像素材の取り出し

実際の地理データを使い、資料向けの世界・地域地図や、街路を拡大・移動できる地図を作ります。静止画への書き出しとウェブでの操作に合わせて描画方法を選びます。

• プレゼンテーションに世界地図を載せたいとき
• 報告書用に地域の地図を作りたいとき
• 拡大・移動できる街路地図の作成

既存のUI部品やブランド資料を基に、完成形に近い画面デザインを作ります。前提や判断理由を共有し、複数案の比較と検証を重ねて仕上げるスキルです。

• 既存サービスに合う画面を作りたいとき
• 配置・色・文字の案を比較したいとき
• 早期のフィードバックで案を磨きたいとき

Reactの既存コンポーネントやスタイルをClaude Designへ取り込み、使い方の資料とプレビューを整えて、実際の部品を使う画面設計につなげるスキル。

• 既存のReactデザインシステムを取り込みたいとき
• 既存部品の見た目で画面を試作したいとき
• 初回取り込み後の部品変更を同期したいとき

既存のブランド規定がないWeb画面で、用途に合う見た目の方向性を定め、書体・配色・余白・動きをそろえた個性あるHTMLのデザインと実装を支援します。

• ブランド規定のないWeb制作
• 書体・配色・余白をそろえたいとき
• 独自のレイアウトや動きを作りたいとき

データの流れや構成の違い、状態の変化を伝える図をArtifactsで作るために、図解の設計と明暗両テーマで読みやすいSVGの描画方法を整えるスキルです。

• データの流れや構成要素の関係の図解
• システム構成案を並べて比較
• 移行前後の変化を説明したいとき

Artifactsで公開する資料やツールのHTMLページを、用途に合う配色・文字組み・レイアウトで設計し、スマートフォン表示やテーマ対応まで整えるスキル。

• Markdown資料のHTMLページ化
• 題材に合うランディングページの設計
• スマートフォンで読みやすくしたいとき

立体物をthree.jsで作成し、あらゆる角度から確認できるビューアーに表示します。OBJ + MTLやGLBで保存し、他の3D制作ソフトへ持ち込めます。

• 立体物を作って全方向から確認したいとき
• Blenderで編集するモデルの作成
• シルエットや素材の見え方の確認

印刷用の一枚チラシを、単独で使えるHTMLファイルとしてデザインします。大きな見出しと日時・場所・費用・連絡先を整理し、印刷時の収まりも確認するスキルです。

• イベント告知の一枚チラシ作成
• 日時・場所・費用を見やすく整理
• 切り取り式の電話番号票を付けたいとき

既存の製品やブランド資料から、色・書体・画像・文章のルールを整理します。再利用できるReact部品と画面見本を備えたデザインシステムを作るスキルです。

• ブランド素材とデザイン規則の整理
• 既存デザインからReact部品を作りたいとき
• 製品画面を操作できる見本にしたいとき

HTMLで作った画面デザインを開発者へ渡すため、画面構成・操作・配色・状態管理をREADME.mdに整理し、参照ファイルと一緒にまとめるスキル。

• HTMLの試作画面を開発者へ渡したいとき
• 実装用に見た目の詳細を整理したいとき
• 画面操作と状態管理の要件共有

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

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

文章やMermaidコードから、処理の流れやデータの関係を図にします。配色テーマを選び、拡大しても鮮明なSVGと高解像度PNGの両方で保存します。

• 業務手順や判断の分岐を図にしたいとき
• APIのやり取りを説明したいとき
• データベースの関係を可視化したいとき

色・書体・レイアウト・動きのルールを一つのファイルに整理。Webサイトや動画、PDFからの抽出と、動画・スライド・デザインツールへの適用を支援します。

• 希望する雰囲気からデザイン指針の作成
• WebやブランドPDFから見た目の抽出
• 動画・スライド・デザインの見た目の統一

FLUXで画像を生成・編集するためのプロンプト作りを支援します。モデル選びから構図、照明、文字、色、複数の参照画像の指定まで、用途に応じた書き方を整理します。

• 画像生成プロンプトを作りたいとき
• ブランドカラーや文字を指定したいとき
• 複数の参照画像で編集したいとき

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

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