写真からカラーパレットを抽出して SNS 投稿に使う

ブランドを表す写真を選ぶ

実際に投稿する予定の写真で、覚えてもらいたい商品、光、場所が写っているものを使います。今回は、カフェの窓辺に置かれたハニーラベンダーラテの縦長のストーリー用写真を使いました。

役割付きで色を求める

16進コードのリストは、各色に役割が決まるまではパレットとは言えません。Astra に5色を求め、それぞれが写真のどこにあるかと、背景、文字、アクセント、ボタンのうち1つの役割を示すよう頼みました。また、スマートフォンで最も読みやすい組み合わせも尋ねました。

Juniper Lane Café の SNS 投稿用に、選択した写真から5色のパレットを抽出してください。各色について、16進コード、写真の中のどこにあるか、そして役割を1つ（背景、文字、アクセント、ボタンのいずれか）示してください。そのうえで、スマートフォンで最も読みやすい文字と背景の組み合わせを示し、コントラストが低すぎる組み合わせがあれば指摘してください。何も生成しないでください。

パレットとその限界を読む

Astra は、背景用に温かみのあるクリーム #F2E3CD、文字用にエスプレッソブラウン #3F3329、アクセント用にくすんだラベンダー #A995AA とハニーゴールド #C99C52、ボタン用に落ち着いたオリーブ #686342 を返しました。そして、これらの16進コードはプレビューから目で見て近似した値であり、ピクセルから採取した値ではないと述べていました。

この注記は重要です。正確な値が必要なら、画像編集ソフトのスポイトで採取して比べてください。

デザインする前にコントラストを確認する

Astra は、クリームの上のエスプレッソを約 9.7:1 で最も安全な組み合わせとし、オリーブのボタンの上のクリームを約 4.8:1 として挙げました。どちらも通常の文字の一般的な目標である 4.5:1 を上回っています。一方、ラベンダーやゴールドとクリームの組み合わせ、オリーブとエスプレッソの組み合わせは低すぎると指摘していました。

WCAG のコントラストの計算式で各組み合わせを再計算したところ、丸め誤差の範囲で同じ結果になりました。ラベンダーとゴールドはアクセントであり、文字の色ではありません。

パレットを投稿のテンプレートにする

役割を固定したテンプレートを1つ作ります。クリームの背景、エスプレッソの見出し、オリーブのボタン、そしてラベンダーやゴールドは小さな装飾の形だけに使います。文字は写真の上に直接置くのではなく、無地の色の領域に置きます。写真の上では光と影でコントラストが変わるからです。

5つの16進コードをブランドのメモに保存しておけば、次の投稿でも同じ値を使えます。

• GPT-6 Astra でブランドの一貫性を保つ
• AI 画像に編集できる文字を加える

手作業の方法と比べる

デザインツールでも、写真からパレットを採取できます。2026年9月19日、@MONABLIZUIUX さんが、Adobe Illustrator で写真からカラーパレットを作る短いチュートリアルを投稿しました。手作業の採取では正確なピクセル値が得られ、Astra は役割とコントラストの助言を加えてくれます。両方を使えば良い確認になります。