Communitygithub.com

モックアップ生成 (Mockup)

ビジネス向けの複数のビジュアルオプション(ロゴ案、カラーパレット、ランディングページ、アプリ画面、ストアページ、メニュー、サイネージ、投稿テンプレートなど)を横並びで作成し、ユーザーが比較・選択できるようにします。

モックアップ生成 (Mockup) とは?

このスキルは、ユーザーが複数のビジュアルデザインオプションを一目で比較し、意思決定できるようにするためのモックアップ生成ツールです。主にロゴの方向性、カラーパレット、ランディングページ、アプリ画面、メニュー、サイネージ、SNS投稿テンプレートなど、ビジネスに関わる様々なデザイン案を対象とします。既存の「ハブドキュメント(hub doc)」の「ブリーフ(Brief)」を読み込み、プロジェクト名、ターゲット層、雰囲気、パレット、ロゴ、避けるべき点などの情報を取得します。ユーザーから参照画像やパレットが提供された場合は、画像から正確な色(HEX値など)をサンプリングして使用します。3~4つの明確に異なる方向性を計画し、各方向性に必要なバリエーション(モバイル/デスクトップ、アラビア語/英語、正方形/ストーリーサイズなど)をすべて含めて、1つのキャンバスに横並びでレイアウトします。コントラスト比のチェック(本文4.5:1、大文字3:1)も自動で行い、問題があれば代替案を提示します。生成後は、ユーザーが選択した方向性を記録し、後続タスク(最終ファイル作成、フラット版アイコン、ファビコンなど)を生成します。このスキルはClaude Code、Cursor、CodexなどのAIエージェントで利用できます。

対応~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/AbdlrahmanSaberAbdo/business-skills/tree/main/skills/mockup

お気に入りのAIに質問する

このエージェントスキルを事前に読み込んだ状態で新しいチャットを開きます。

ドキュメント

モックアップ生成

ユーザーが目で見て選択すべき場合に使用します:ロゴの方向性、カラーパレット、ランディングページ、アプリ画面、ストアページ、メニューやフライヤー、投稿テンプレートなど。ハブドキュメントがあってもなくても動作します。

手順

  1. ハブドキュメントの「ブリーフ」を読み、名前、対象ユーザー、雰囲気、パレット、ロゴ、避けるべき点を把握します。ユーザーが参照画像やパレットを提供した場合は、正確な色を使用します(可能であれば画像からHEX値をサンプリングしてください)。
  2. 単なる小さなバリエーションではなく、真に異なる3~4の方向性を計画し、各バージョンに必要なすべてのバリエーション(例:モバイルとデスクトップ、アラビア語と英語、正方形とストーリーサイズ)を用意します。
  3. これらを1つのキャンバスまたはページに行単位で横並びにレイアウトし、一目で比較できるようにします。ブリーフからの実際のコピーと、不足している事実には[PRICE]などのプレースホルダーを使用します。
  4. コントラストを確認します:本文テキストは4.5:1、大きなテキストは3:1。パレットの組み合わせが基準を満たさない場合は、その名前を指摘し、代わりにどのように使用すべきか(例:装飾のみ)を説明します。
  5. 各方向性について1行:そのアイデアと、主な強みまたは弱み。ユーザーに選択を促します。
  6. to-brief を使って選択を記録し、to-tasks を使ってフォローアップタスク(最終ファイル、フラットバージョン、ファビコン)を追加します。

ルール

  • 他ブランドのロゴ、キャラクター、専有デザインを決してコピーしてはいけません。
  • これらは方向性を示すものです。最終成果物にベクターファイルやデザイナーが必要な場合はその旨を伝えます。
  • 生成画像や3Dエフェクトは小さなサイズでは失敗します。アイコンには必ずフラットバージョンを計画してください。

Individual skills in this repo

This repo contains 1 individual skill — each has its own dedicated page.

関連スキル