> ## Documentation Index
> Fetch the complete documentation index at: https://docs.replit.com/llms.txt
> Use this file to discover all available pages before exploring further.

# ソーシャル用アイコンとバナーを作成する

> サイトとドライブの素材から、各ネットワーク向けに適切なサイズのプロフィールアイコンとカバーバナーを生成します。

export const Connectors = ({items}) => <div style={{
  margin: "8px 0 20px"
}}>
    <style>{`
      .connectors-list, .connectors-list * { margin-top: 0 !important; margin-bottom: 0 !important; }
      .connectors-row {
        display: flex !important;
        align-items: flex-start !important;
        gap: 10px !important;
        padding: 4px 0 !important;
        min-height: 0 !important;
        height: auto !important;
      }
      .connectors-row img {
        width: 20px !important;
        height: 20px !important;
        max-width: 20px !important;
        max-height: 20px !important;
        margin: 2px 0 0 !important;
        display: block !important;
      }
    `}</style>
    <div className="connectors-list">
      {items.map((item, i) => <div key={item.id} className="connectors-row" style={{
  borderTop: i === 0 ? "none" : "1px solid rgba(130,130,130,0.22)"
}}>
          <img src={`/images/connectors/${item.id}.svg`} alt="" width={20} height={20} />
          <div style={{
  minWidth: 0
}}>
            <div>
              <strong>{item.name}</strong>
              {item.why ? <span style={{
  opacity: 0.72
}}> · {item.why}</span> : null}
            </div>
            {item.auth === "api-key" ? <div style={{
  fontSize: "11.5px",
  lineHeight: 1.35,
  color: "#F26207",
  marginTop: "2px"
}}>
                Not a native connector. Agent will ask for your API key.
              </div> : null}
          </div>
        </div>)}
    </div>
  </div>;

export const AiPrompt = ({children}) => {
  return <CodeBlock className="relative block max-w-full overflow-x-hidden font-sans !whitespace-pre-wrap !break-words" style={{
    overflowWrap: "anywhere",
    wordBreak: "break-word"
  }}>
      <div className="pr-7" style={{
    whiteSpace: "pre-wrap",
    overflowWrap: "anywhere",
    wordBreak: "break-word"
  }}>
        {children}
      </div>
    </CodeBlock>;
};

Webサイトと Google ドライブ内のブランド素材から、X、LinkedIn、Instagram、Facebook、
TikTok、そのほか指定したネットワーク向けのプロフィールアイコンとカバーバナーを生成します。
Agentは各プラットフォームの現行サイズとセーフエリアを使用するため、実際のプロフィールで
顔やロゴ、テキストが切り取られることはありません。ひとつのビジュアルシステムを維持し、
PNGでエクスポートします。ネットワークによって異なるトリミングが必要な場合は、専用の
アートボードを作成し、画像を引き伸ばさないようにします。

## 最適な用途

* 複数のネットワーク向けにプロフィール素材とカバー素材を一度に用意したいブランドデザイナー。
* 既存のロゴとサイトからエクスポート可能なアイコンとバナーが欲しいマーケター。

## コネクタ

<Connectors
  items={[
{
  id: "google-drive",
  name: "Google Drive",
  why: "ロゴ、カラー、既存のブランド素材",
},
]}
/>

## 始める前に

サイトのURLと、ドライブ内のロゴ(またはブランドフォルダ)を用意してください。必要な
ネットワークを伝えてください。ロゴがワードマークの場合、アイコンをシンボルにするか、
頭文字にするか、両方にするかを指定してください。

## エージェントへの指示

<AiPrompt>
  このWebサイト\[URL]とGoogleドライブ内のブランド素材から、Replit Designでソーシャル
  キットを作成して。X、LinkedIn、Instagram、Facebook、TikTok向けのプロフィールアイコンと
  カバーバナーを作って。各ネットワークの現行の公式サイズとセーフエリアを使い、顔やロゴ、
  テキストが切り取られないようにして。ひとつのビジュアルシステムを維持して。PNGで
  エクスポートして。ネットワークによって異なるトリミングが必要な場合は、専用の
  アートボードを作成し、引き伸ばさないで。
</AiPrompt>

## 期待できること

Agentはサイトとドライブの素材を読み込み、素材ごとに正しいピクセルサイズのアートボードを
構築します。典型的な構成:

* **X:** プロフィール400×400、ヘッダー1500×500
* **LinkedIn:** プロフィール400×400、バナー1584×396
* **Instagram:** プロフィール320×320(投稿用カバーとストーリー用カバーが必要な場合は1080×1080と1080×1920も追加)
* **Facebook:** プロフィール320×320、カバー820×312(または2倍の1640×624)
* **TikTok:** プロフィール200×200、カバー1080×1920

アップロード前に、丸いプロフィール画像と横長のバナーでトリミングを確認してください。
アイコンとバナーをそれぞれ1つエクスポートし、丸いアバターと横長のヘッダーに配置して、
小さいサイズでの余白を確認してください。

## 自分に合わせてカスタマイズする

<AiPrompt>
  YouTube(プロフィール800×800、セーフエリア1546×423のバナー2560×1440)とPinterest
  (プロフィール165×165、ピン1000×1500)を追加して。
</AiPrompt>

<AiPrompt>
  各アイコンのライト版とダーク版を作成して。バナーはサイトのプライマリカラーのままにして。
</AiPrompt>

## トラブルシューティング

* **ロゴや顔が切り取られる:** 丸いプロフィール画像と横長のバナーでそれぞれの素材を確認してください。セーフエリアを尊重し、異なるトリミングが必要な場合は専用のアートボードを作成するようAgentに依頼してください。引き伸ばさないようにしてください。
* **サイズがネットワークと合わない:** 必要なネットワークを指定し、それぞれの現行の公式サイズを使うようAgentに依頼してください。ネットワーク側の仕様は変更されるため、アップロード前に再確認してください。

## 関連情報

<CardGroup cols={2}>
  <Card title="ランディングページをデザインする" href="/ja/use-cases/design-landing-page">
    待機リストページやローンチページにも、同じGoogleドライブのブランド素材を使用できます。
  </Card>

  <Card title="投資家向けピッチデックを作成する" href="/ja/use-cases/pitch-deck-from-website">
    スライドにも、同じGoogleドライブのブランド素材を使用できます。
  </Card>
</CardGroup>