画像・ブランド素材の渡し方
この章でわかること: ロゴ・写真などのビジュアル素材を、Claude Code に渡して プロトタイプに反映させる実務的なやり方。言葉だけより、ぐっと「らしく」なります。
画像(ロゴ・写真)を使ってもらう
Section titled “画像(ロゴ・写真)を使ってもらう”一番簡単なのは、画像ファイルをプロジェクトのフォルダに置くことです。
- ロゴや写真を、プロジェクト内の分かりやすい場所(例
public/フォルダ)に入れる - Claude Code に頼む:
public/logo.pngをヘッダーのロゴに使って。public/hero.jpgを トップの背景に。スマホでも崩れないように。
色・フォント・トーンを伝える
Section titled “色・フォント・トーンを伝える”ブランドの世界観は、具体的に伝えると再現されやすくなります。
メインカラーは
#1E88E5(青)、アクセントは#FFC107(黄)。フォントは やさしい印象のゴシック体。全体は余白広めで、上品で落ち着いた雰囲気にして。
- 色はカラーコード(
#RRGGBB)で伝えると正確 - 「高級感」「親しみやすい」など形容詞+具体例を添える
Figmaのデザインを渡す
Section titled “Figmaのデザインを渡す”手軽な方法:スクリーンショットで渡す
Section titled “手軽な方法:スクリーンショットで渡す”一番簡単なのは、Figmaの画面をスクショに撮ってそのまま渡すことです。 「このスクショのデザインに寄せて作って」と頼むだけ。あわせて、
- 画面の構成を箇条書きで説明する(上から何を、どんな順で)
- 主要な色・サイズ・余白の指定を言葉で添える
と、再現度が上がります。
進んだ方法:Figma連携(MCP)で構造データを渡す
Section titled “進んだ方法:Figma連携(MCP)で構造データを渡す”スクショは「見た目」を渡しますが、MCP連携を使うと、Figmaの構造データ (コンポーネントや色・レイアウトの情報)をClaude Codeが直接読み取れます。より正確に デザインを起こせる一方、設定や認証が必要な発展的な方法です。詳しくは MCPで道具を増やすを参照してください。
重い画像はデモを遅くする
Section titled “重い画像はデモを遅くする”見落としがちなのが、**画像の「重さ(ファイルサイズ)」**です。スマホで撮った写真は 1枚で数MB〜十数MBあり、そのまま貼ると、弱い回線やスマホで表示がもたつきます。 商談の場で画像がなかなか出てこないと、それだけで印象を損ねます。
- 目安として、写真は数百KB程度に抑えると軽快です(巨大な元データのまま渡さない)
- ロゴやアイコンは、用途に対して大きすぎるサイズを使わない
- 枚数が多いページは、画面に入ってから読み込む(遅延読み込み)と体感が軽くなります
提案の「らしさ」は、ビジュアルで決まります。素材と世界観をうまく渡せると、 たたき台でもブランドの空気をまとったプロトタイプになり、顧客の反応が変わります。 指示の出し方の基本は良い指示の出し方も参照。