> ## 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 OpeningSiteDesignCover = () => <div className="chat-mkt" role="img" aria-label="A frosted design canvas with a website layout and image asset" style={{
  margin: "28px 0 42px",
  borderTop: 0,
  paddingTop: 0
}}>
    <div className="chat-use-case-visual" style={{
  aspectRatio: "auto",
  minHeight: "clamp(220px, 34vw, 320px)",
  overflow: "hidden",
  background: "radial-gradient(circle at 50% -18%, rgba(255,255,255,.82), transparent 42%), radial-gradient(circle at 4% 96%, rgba(255,184,146,.48), transparent 38%), linear-gradient(140deg, #ff764d, #ff3c00 60%, #c92d00)"
}}>
      <div aria-hidden="true" style={{
  position: "absolute",
  inset: 0,
  background: "linear-gradient(180deg, rgba(255,255,255,.14), rgba(255,255,255,0) 48%, rgba(111,24,0,.2))"
}} />
      <div aria-hidden="true" style={{
  position: "relative",
  zIndex: 1,
  display: "grid",
  gridTemplateColumns: "minmax(0, 1.15fr) minmax(0, .85fr)",
  gap: "clamp(12px, 2.4vw, 22px)",
  width: "min(720px, 84%)",
  minHeight: "inherit",
  alignItems: "center",
  margin: "auto"
}}>
        <div style={{
  display: "grid",
  gap: 12,
  minHeight: "clamp(148px, 23vw, 198px)",
  padding: "clamp(12px, 2vw, 18px)",
  border: "1px solid rgba(255,255,255,.6)",
  borderRadius: 20,
  background: "linear-gradient(180deg, rgba(255,255,255,.36), rgba(255,255,255,.12))",
  boxShadow: "0 18px 36px rgba(55,27,18,.2)",
  backdropFilter: "blur(6px)"
}}>
          <div style={{
  display: "flex",
  gap: 6
}}>
            {[".92", ".52", ".32"].map(opacity => <span key={opacity} style={{
  width: 7,
  height: 7,
  borderRadius: 999,
  background: `rgba(255,255,255,${opacity})`
}} />)}
          </div>
          <div style={{
  display: "grid",
  gridTemplateColumns: "minmax(0, 1fr) minmax(0, .8fr)",
  gap: 10
}}>
            <div style={{
  display: "grid",
  alignContent: "center",
  gap: 9
}}>
              <span style={{
  width: "76%",
  height: 12,
  borderRadius: 99,
  background: "rgba(255,255,255,.86)"
}} />
              <span style={{
  width: "94%",
  height: 7,
  borderRadius: 99,
  background: "rgba(255,255,255,.46)"
}} />
              <span style={{
  width: "72%",
  height: 7,
  borderRadius: 99,
  background: "rgba(255,255,255,.34)"
}} />
              <span style={{
  width: 48,
  height: 18,
  marginTop: 4,
  borderRadius: 99,
  background: "rgba(255,255,255,.74)"
}} />
            </div>
            <div style={{
  minHeight: 92,
  border: "1px solid rgba(255,255,255,.42)",
  borderRadius: 12,
  background: "linear-gradient(135deg, rgba(255,255,255,.72), rgba(255,255,255,.18))"
}} />
          </div>
        </div>
        <div style={{
  display: "grid",
  gap: 10
}}>
          {["68%", "86%", "54%"].map((width, index) => <div key={width} style={{
  display: "grid",
  gridTemplateColumns: "18px minmax(0, 1fr)",
  alignItems: "center",
  gap: 9,
  padding: "clamp(9px, 1.5vw, 13px)",
  border: "1px solid rgba(255,255,255,.46)",
  borderRadius: 14,
  background: index === 0 ? "rgba(255,255,255,.29)" : "rgba(255,255,255,.12)",
  backdropFilter: "blur(5px)"
}}>
              <span style={{
  width: 18,
  height: 18,
  borderRadius: index === 1 ? 4 : 999,
  background: index === 0 ? "rgba(255,255,255,.9)" : "rgba(255,255,255,.42)"
}} />
              <span style={{
  width,
  height: 7,
  borderRadius: 99,
  background: "rgba(255,255,255,.7)"
}} />
            </div>)}
        </div>
      </div>
    </div>
  </div>;

export const CoffeeShopScreenshotFrame = ({src, alt}) => <div style={{
  margin: "28px 0",
  overflow: "hidden",
  borderRadius: "24px",
  background: "radial-gradient(circle at 50% -18%, rgba(255,255,255,.82), transparent 42%), radial-gradient(circle at 4% 96%, rgba(255,184,146,.48), transparent 38%), linear-gradient(140deg, #ff764d, #ff3c00 60%, #c92d00)",
  boxShadow: "0 16px 32px rgba(112,36,13,.18)"
}}>
    <div style={{
  padding: "clamp(10px, 2vw, 18px)",
  background: "linear-gradient(180deg, rgba(255,255,255,.14), rgba(255,255,255,0) 48%, rgba(111,24,0,.2))"
}}>
      <a href={src} target="_blank" rel="noreferrer" aria-label={`Open ${alt} at full size`} style={{
  display: "block",
  overflow: "hidden",
  border: "1px solid rgba(255,255,255,.62)",
  borderRadius: "16px",
  background: "rgba(255,255,255,.96)",
  boxShadow: "0 12px 28px rgba(55,27,18,.2)",
  cursor: "zoom-in"
}}>
        <img src={src} alt={alt} style={{
  display: "block",
  width: "100%",
  height: "auto"
}} />
      </a>
    </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>;
};

<OpeningSiteDesignCover />

会話とプロジェクトの違いを理解しました。次は、コーヒーショップのローンチプランを、
人々の目に見える形に変えましょう。

Replitに、会話、リサーチ、ローンチプランを使って、近隣型カフェのためのオープン告知
サイトを作成するよう依頼します。

<AiPrompt>
  この会話でのコンセプト、ビジュアルの方向性、ローンチプランを使って、私の近隣
  コーヒーショップのためのオープン間近のウェブサイトをデザインしてください。温かく、
  落ち着いた、居心地の良い雰囲気にしてください。短い紹介文、近隣エリアの情報、
  オープンに関する最新情報、そして人々が情報を受け取り続けられる手段を含めてください。
</AiPrompt>

## オープン告知サイトを作成し、磨き上げる

<Steps>
  <Step title="最初のサイトを確認する">
    数分後、Replitは会話での方向性をオープン告知サイトに変えます。何を変更するか
    決める前に、最初のバージョンを確認しましょう。

    <CoffeeShopScreenshotFrame src="/images/coffee-shop-launch/opening-site-preview.jpg" alt="Replit内の公開コントロール付きのコーヒーショップのオープン告知サイトのプレビュー" />
  </Step>

  <Step title="Designを開く">
    公開する前に、サイトを自分らしく仕上げましょう。**Design**を選択して
    デザインキャンバスを開きます。

    <CoffeeShopScreenshotFrame src="/images/coffee-shop-launch/open-design.jpg" alt="オープン間近のコーヒーショップサイトの上に開いたReplitのDesignメニュー" />
  </Step>

  <Step title="デザインを確認する">
    デザインキャンバスは、次に何を調整するかを決めている間もオープン告知サイトを
    表示し続けます。

    <CoffeeShopScreenshotFrame src="/images/coffee-shop-launch/review-updated-site-design.jpg" alt="ヒーローセクションに生成されたカプチーノ画像が入った、更新後のコーヒーショップのオープン告知サイトのデザイン" />
  </Step>

  <Step title="さまざまなレイアウトを試す">
    提案された次のステップを使って、別のレイアウトを試したり、うまくいっている
    部分をさらに磨き上げたりしましょう。探索している間も、Replitは最初のバージョンを
    利用できる状態のまま保持します。

    <CoffeeShopScreenshotFrame src="/images/coffee-shop-launch/explore-design-directions.jpg" alt="コーヒーショップサイトの再構想、レイアウトの試行、磨き上げのためのReplit Designの提案された次のステップ" />
  </Step>

  <Step title="画像アセットを追加する">
    **Generate**を選択し、次に**Image**を選択します。必要なアセットと、それが
    どこに表示されるかを説明します。ここでは、コーヒーショップサイト用の
    カプチーノ画像をリクエストしています。

    <CoffeeShopScreenshotFrame src="/images/coffee-shop-launch/open-generate-menu.png" alt="Design、Image、Video、Vector Graphicのオプションが並ぶ、Replit DesignキャンバスのGenerateメニュー" />

    <CoffeeShopScreenshotFrame src="/images/coffee-shop-launch/write-image-request.png" alt="Replit Designキャンバスでのカプチーノ画像用の画像生成プロンプト" />
  </Step>

  <Step title="新しいアセットをサイトで使う">
    画像の準備ができたら、それを選択し、ヒーローセクションで使うようReplitに
    依頼します。サイトがカフェを表すものになるまで、磨き上げを続けましょう。

    <CoffeeShopScreenshotFrame src="/images/coffee-shop-launch/replace-hero-image.jpg" alt="Replit Designキャンバスで選択された、生成されたカプチーノ画像と、ウェブサイトのヒーロー画像を置き換えるリクエスト" />
  </Step>

  <Step title="公開前にサイトをプレビューする">
    プレビューを開いて、完成したサイトを確認します。満足したら、公開する準備は
    整っています。

    <CoffeeShopScreenshotFrame src="/images/coffee-shop-launch/opening-site-preview.jpg" alt="Replit内の公開コントロール付きのコーヒーショップのオープン告知サイトのプレビュー" />
  </Step>
</Steps>

[デザインの作成](/create-a-design)について詳しく見る。

## 次のステップ

<section className="chat-mkt chat-workflow-grid has-visuals">
  <a className="chat-example has-visual" href="/ja/home/publish-the-site">
    <div className="chat-use-case-visual">
      <div className="chat-use-case-window">
        <b />

        <b />

        <b />
      </div>
    </div>

    <div className="chat-example-tag">公開</div>
    <div className="chat-card-title">サイトを公開する</div>
    <p>人々が訪問し、共有できるように、オープン告知サイトを公開しましょう。</p>
    <div className="chat-card-link">続ける →</div>
  </a>
</section>
