> ## 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.

# Replitへようこそ

> Replitがアイデア、日々の作業、インテリジェンスを有用な成果に変える方法を学びます。

export const injectWelcomeHomeStyles = () => {
  if (typeof document === "undefined") return;
  const existingStyle = document.getElementById("welcome-home-styles");
  const style = existingStyle || document.createElement("style");
  style.id = "welcome-home-styles";
  style.textContent = `
    #content-area:has(.welcome-home) > #header { display: none; }
    #content-area:has(.welcome-home) { background: var(--replit-docs-bg, #faf9f8); }
    .welcome-home {
      --welcome-surface: var(--replit-docs-bg-muted, #fff);
      --welcome-border: var(--replit-docs-border, #e2dfdc);
      --welcome-text: var(--replit-docs-text, #191817);
      --welcome-body: var(--replit-docs-text-muted, #5e5a57);
      --welcome-accent: #e94b1b;
      color: var(--welcome-text);
      padding: 8px 0 64px;
    }
    .welcome-home a { text-decoration: none; }
    .welcome-hero-card {
      display: grid;
      grid-template-columns: minmax(0, 1.25fr) minmax(260px, .75fr);
      gap: clamp(28px, 5vw, 72px);
      align-items: center;
      min-height: 290px;
      overflow: hidden;
      border: 1px solid var(--welcome-border);
      border-radius: 16px;
      background: radial-gradient(circle at 88% 12%, rgba(255,197,174,.2), transparent 36%), var(--welcome-surface);
      padding: clamp(28px, 5vw, 52px);
    }
    .welcome-eyebrow { margin: 0 0 14px; color: var(--welcome-accent); font-size: 13px; font-weight: 600; }
    .welcome-hero-card h1 { margin: 0; color: var(--welcome-text); font-size: clamp(38px, 5vw, 56px); font-weight: 700; letter-spacing: -.055em; line-height: .98; }
    .welcome-hero-card p { max-width: 620px; margin: 18px 0 0; color: var(--welcome-body); font-size: 17px; line-height: 1.55; }
    .welcome-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
    .welcome-action { display: inline-flex; min-height: 42px; align-items: center; justify-content: center; border: 1px solid var(--welcome-border) !important; border-radius: 9px; background: var(--welcome-surface); padding: 9px 16px; color: var(--welcome-text); font-weight: 650; }
    .welcome-action.primary { border-color: var(--welcome-accent) !important; background: var(--welcome-accent); color: #fff; }
    .welcome-action span, .welcome-journey-link span, .welcome-use-cases-button span, .welcome-product-link span { margin-left: 6px; }
    .welcome-hero-art { position: relative; min-height: 210px; }
    .welcome-hero-art > span { position: absolute; display: block; border: 1px solid rgba(109,72,58,.12); border-radius: 17px; box-shadow: 0 20px 40px rgba(89,50,34,.08); }
    .welcome-hero-art .back { top: 10px; right: 32px; width: 132px; height: 122px; background: linear-gradient(145deg, #fff2eb, #f5e5df); }
    .welcome-hero-art .spark { top: 48px; right: 110px; width: 150px; height: 108px; background: linear-gradient(145deg, #ff8a63, #ff4b1f); }
    .welcome-hero-art .spark b { position: absolute; top: 18px; left: 20px; color: #fff; font-size: 30px; font-weight: 400; }
    .welcome-hero-art .note { right: 0; bottom: 2px; width: 162px; height: 130px; box-sizing: border-box; background: rgba(255,251,249,.9); padding: 28px 22px; backdrop-filter: blur(10px); }
    .welcome-hero-art .note i { display: block; width: 82%; height: 6px; margin-bottom: 12px; border-radius: 999px; background: #bca39a; }
    .welcome-hero-art .note i:nth-child(2) { width: 62%; }
    .welcome-hero-art .note i:nth-child(3) { width: 74%; }
    .welcome-hero-art .note b { position: absolute; right: 14px; bottom: 14px; display: grid; width: 28px; height: 28px; place-items: center; border-radius: 999px; background: #fff; color: var(--welcome-accent); font-size: 11px; }
    .welcome-journey-strip { display: grid; min-height: 190px; grid-template-columns: minmax(250px, .78fr) minmax(0, 1fr); gap: 24px; align-items: center; margin: 24px 0 36px; border: 1px solid var(--welcome-border); border-radius: 14px; background: var(--welcome-surface); padding: 16px; }
    .welcome-journey-preview { height: 158px; overflow: hidden; border-radius: 11px; background: #f6f2ef; }
    .welcome-journey-preview > [data-rmiz], .welcome-journey-preview > [data-rmiz] > [data-rmiz-content] { display: block; width: 100%; height: 100%; }
    .welcome-journey-preview img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; }
    .welcome-journey-title { display: block; font-size: 16px; font-weight: 700; }
    .welcome-journey-copy p { margin: 5px 0 0; color: var(--welcome-body); font-size: 13px; line-height: 1.45; }
    .welcome-journey-link { display: inline-flex; min-height: 38px; align-items: center; justify-content: center; margin-top: 16px; border: 1px solid var(--welcome-accent) !important; border-radius: 9px; background: var(--welcome-accent); padding: 8px 14px; color: #fff; font-size: 13px; font-weight: 700; }
    .welcome-section { margin-top: 0; border-top: 1px solid var(--welcome-border); padding-top: 34px; }
    .welcome-section-heading { margin: 0 0 26px; color: var(--welcome-text); font-size: clamp(30px, 4vw, 40px); letter-spacing: -.045em; line-height: 1.05; }
    .welcome-use-case-grid { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 14px !important; margin: 0 0 22px !important; border: 0 !important; padding: 0 !important; }
    .welcome-use-case-card { display: flex; min-width: 0; min-height: 285px; flex-direction: column; align-items: stretch; border: 1px solid var(--welcome-border) !important; border-radius: 13px; background: var(--welcome-surface); padding: 10px 10px 12px; color: var(--welcome-text); transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease; }
    .welcome-use-case-card:hover { transform: translateY(-2px); border-color: rgba(233,75,27,.35) !important; box-shadow: 0 10px 22px rgba(75,43,30,.07); }
    .welcome-use-case-thumb { width: 100% !important; height: auto !important; aspect-ratio: 1.9 !important; border-radius: 10px !important; }
    .welcome-use-case-copy { min-width: 0; padding: 12px 4px 0; }
    .welcome-card-title { color: var(--welcome-text); font-size: 15px; font-weight: 700; letter-spacing: -.02em; line-height: 1.25; }
    .welcome-use-case-copy p { margin: 6px 0 0 !important; color: var(--welcome-body) !important; font-size: 12px !important; line-height: 1.45 !important; }
    .welcome-card-arrow { align-self: end; margin-top: auto; padding: 8px 4px 0; color: var(--welcome-text); font-size: 16px; }
    .welcome-use-cases-cta { display: flex; justify-content: center; margin: 0 0 36px; }
    .welcome-use-cases-button { display: inline-flex; min-height: 40px; align-items: center; justify-content: center; border: 1px solid rgba(94,90,87,.24) !important; border-radius: 999px; background: transparent !important; box-shadow: none !important; padding: 8px 18px; color: var(--welcome-body); font-size: 14px; font-weight: 600; transition: border-color .18s ease, color .18s ease, background-color .18s ease; }
    .welcome-use-cases-button:hover { border-color: rgba(233,75,27,.45) !important; background: rgba(233,75,27,.035) !important; color: var(--welcome-accent); }
    .welcome-products-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin: 0 0 36px; }
    .welcome-product-card { display: flex; min-width: 0; min-height: 390px; flex-direction: column; overflow: hidden; border: 1px solid var(--welcome-border) !important; border-radius: 14px; background: var(--welcome-surface); padding: 12px 12px 18px; color: var(--welcome-text); transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease; }
    .welcome-product-card:hover { transform: translateY(-3px); border-color: rgba(233,75,27,.32) !important; box-shadow: 0 16px 34px rgba(75,43,30,.09); }
    .welcome-product-title { margin: 18px 6px 0; color: var(--welcome-accent); font-size: 25px; font-weight: 700; letter-spacing: -.035em; line-height: 1.1; }
    .welcome-product-card > p { margin: 10px 6px 0; color: var(--welcome-body); font-size: 14px; line-height: 1.5; }
    .welcome-product-link { margin-top: auto; padding: 18px 6px 0; color: var(--welcome-accent); font-size: 13px; font-weight: 700; }
    .welcome-access-panel { display: grid; grid-template-columns: minmax(220px, .85fr) minmax(0, 1.55fr); gap: 28px; align-items: center; border: 1px solid var(--welcome-border); border-radius: 14px; background: var(--welcome-surface); padding: 24px; }
    .welcome-access-copy h2 { margin: 0; color: var(--welcome-text); font-size: 27px; letter-spacing: -.035em; }
    .welcome-access-copy p { margin: 10px 0 0; color: var(--welcome-body); font-size: 13px; line-height: 1.55; }
    .welcome-access-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
    .welcome-access-card { display: grid; min-height: 112px; grid-template-columns: auto 1fr auto; gap: 10px; align-items: start; border: 1px solid var(--welcome-border) !important; border-radius: 12px; background: var(--welcome-surface); padding: 16px 14px; color: var(--welcome-text); }
    .welcome-access-icon { font-size: 19px; line-height: 1; }
    .welcome-access-card strong { font-size: 14px; }
    .welcome-access-card small { grid-column: 1 / -1; color: var(--welcome-body); font-size: 11px; }
    .welcome-access-card b { align-self: end; font-size: 15px; }
    .dark .welcome-home,
    html.dark .welcome-home,
    [data-theme="dark"] .welcome-home {
      --welcome-accent: #ff764d;
    }
    .dark .welcome-hero-card,
    html.dark .welcome-hero-card,
    [data-theme="dark"] .welcome-hero-card {
      background: radial-gradient(circle at 88% 12%, rgba(255,118,77,.16), transparent 38%), var(--welcome-surface);
    }
    .dark .welcome-hero-art .back,
    html.dark .welcome-hero-art .back,
    [data-theme="dark"] .welcome-hero-art .back { background: linear-gradient(145deg, #342a27, #272223); }
    .dark .welcome-hero-art .note,
    html.dark .welcome-hero-art .note,
    [data-theme="dark"] .welcome-hero-art .note { background: rgba(39,35,36,.9); }
    .dark .welcome-hero-art .note i,
    html.dark .welcome-hero-art .note i,
    [data-theme="dark"] .welcome-hero-art .note i { background: #8f7770; }
    .dark .welcome-hero-art .note b,
    html.dark .welcome-hero-art .note b,
    [data-theme="dark"] .welcome-hero-art .note b { background: #302b2c; }
    .dark .welcome-journey-preview,
    html.dark .welcome-journey-preview,
    [data-theme="dark"] .welcome-journey-preview { background: #2a2727; }
    @media (max-width: 1050px) {
      .welcome-use-case-grid, .welcome-products-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
      .welcome-access-panel { grid-template-columns: 1fr; }
    }
    @media (max-width: 760px) {
      .welcome-hero-card { grid-template-columns: 1fr; }
      .welcome-hero-art { min-height: 190px; }
      .welcome-journey-strip { grid-template-columns: 1fr; }
      .welcome-journey-preview { height: auto; aspect-ratio: 1.82; }
      .welcome-journey-link { grid-column: auto; }
      .welcome-use-case-grid, .welcome-products-grid, .welcome-access-grid { grid-template-columns: 1fr !important; }
    }
    @media (max-width: 480px) {
      .welcome-hero-card { padding: 24px 20px; }
      .welcome-use-case-card { min-height: 0; }
    }
  `;
  if (!existingStyle) document.head.appendChild(style);
};

{injectWelcomeHomeStyles()}

<div className="welcome-home">
  <section className="welcome-hero-card" aria-labelledby="welcome-home-heading">
    <div>
      <div className="welcome-eyebrow">はじめる</div>
      <h1 id="welcome-home-heading">Replitへようこそ</h1>
      <p>アイデア、日々の作業、インテリジェンスを有用な成果に変えましょう。</p>

      <div className="welcome-actions">
        <a className="welcome-action primary" href="/ja/home/get-started">はじめる <span aria-hidden="true">→</span></a>
        <a className="welcome-action" href="/use-cases">使用例を見る</a>
      </div>
    </div>

    <div className="welcome-hero-art" aria-hidden="true">
      <span className="back" />

      <span className="spark"><b>✦</b></span>
      <span className="note"><i /><i /><i /><b>▶</b></span>
    </div>
  </section>

  <section className="welcome-journey-strip" aria-label="Replitのガイド付きジャーニー">
    <div className="welcome-journey-preview">
      <img src="https://mintcdn.com/replit/P72ooOi_MbBr9Mb8/images/coffee-shop-launch/coffee-shop-opening-site-hero.jpg?fit=max&auto=format&n=P72ooOi_MbBr9Mb8&q=85&s=9e2119e9b481f3334c2d036447c32c45" alt="「日々のための静かな場所」という見出しのコーヒーショップのオープニングサイト" width="1800" height="989" data-path="images/coffee-shop-launch/coffee-shop-opening-site-hero.jpg" />
    </div>

    <div className="welcome-journey-copy">
      <div className="welcome-journey-title">
        アイデアを公開サイトに変える方法を学ぶ
      </div>

      <p>
        最初の会話から調査、計画、デザイン、公開まで、ガイド付きジャーニーに
        沿って進みます。
      </p>

      <a className="welcome-journey-link" href="/ja/home/get-started">
        ジャーニーを始める <span aria-hidden="true">→</span>
      </a>
    </div>
  </section>

  <section className="welcome-section" aria-labelledby="welcome-use-cases-heading">
    <h2 className="welcome-section-heading" id="welcome-use-cases-heading">
      Replitは何を手伝えますか?
    </h2>

    <div className="chat-mkt welcome-use-case-grid">
      <a className="welcome-use-case-card" href="/use-cases/prepare-for-a-customer-call">
        <div className="welcome-use-case-thumb chat-use-case-visual use-case-visual visual-call-brief palette-blush">
          <div className="use-case-visual-panel">
            <b />

            <b />

            <b />

            <b />

            <b />

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

        <div className="welcome-use-case-copy">
          <div className="welcome-card-title" role="heading" aria-level="3">
            顧客との電話に備える
          </div>

          <p>クライアントとの打ち合わせ前に、毎回焦点を絞ったブリーフを手に入れましょう。</p>
        </div>

        <span className="welcome-card-arrow" aria-hidden="true">
          →
        </span>
      </a>

      <a className="welcome-use-case-card" href="/use-cases/analyze-customer-feedback">
        <div className="welcome-use-case-thumb chat-use-case-visual use-case-visual visual-feedback palette-blush">
          <div className="use-case-visual-panel">
            <b />

            <b />

            <b />

            <b />

            <b />

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

        <div className="welcome-use-case-copy">
          <div className="welcome-card-title" role="heading" aria-level="3">
            顧客フィードバックを分析する
          </div>

          <p>生のフィードバックをテーマと実行可能なインサイトに変えましょう。</p>
        </div>

        <span className="welcome-card-arrow" aria-hidden="true">
          →
        </span>
      </a>

      <a className="welcome-use-case-card" href="/use-cases/source-candidates">
        <div className="welcome-use-case-thumb chat-use-case-visual use-case-visual visual-candidates palette-stone">
          <div className="use-case-visual-panel">
            <b />

            <b />

            <b />

            <b />

            <b />

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

        <div className="welcome-use-case-copy">
          <div className="welcome-card-title" role="heading" aria-level="3">
            候補者を発掘する
          </div>

          <p>連携したコンテキストで候補者を見つけて絞り込みましょう。</p>
        </div>

        <span className="welcome-card-arrow" aria-hidden="true">
          →
        </span>
      </a>

      <a className="welcome-use-case-card" href="/use-cases/monitor-brand-mentions">
        <div className="welcome-use-case-thumb chat-use-case-visual use-case-visual visual-mentions palette-ink">
          <div className="use-case-visual-panel">
            <b />

            <b />

            <b />

            <b />

            <b />

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

        <div className="welcome-use-case-copy">
          <div className="welcome-card-title" role="heading" aria-level="3">
            ブランドの言及を監視する
          </div>

          <p>重要な会話を捉えて、素早く適切な担当者へつなぎましょう。</p>
        </div>

        <span className="welcome-card-arrow" aria-hidden="true">
          →
        </span>
      </a>

      <a className="welcome-use-case-card" href="/use-cases/weekly-pipeline-report">
        <div className="welcome-use-case-thumb chat-use-case-visual use-case-visual visual-pipeline palette-stone">
          <div className="use-case-visual-panel">
            <b />

            <b />

            <b />

            <b />

            <b />

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

        <div className="welcome-use-case-copy">
          <div className="welcome-card-title" role="heading" aria-level="3">
            週次の売上レポートを生成する
          </div>

          <p>現在のパイプラインデータを明確な売上アップデートに変えましょう。</p>
        </div>

        <span className="welcome-card-arrow" aria-hidden="true">
          →
        </span>
      </a>

      <a className="welcome-use-case-card" href="/use-cases/track-subscriptions">
        <div className="welcome-use-case-thumb chat-use-case-visual use-case-visual visual-subscriptions palette-blush">
          <div className="use-case-visual-panel">
            <b />

            <b />

            <b />

            <b />

            <b />

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

        <div className="welcome-use-case-copy">
          <div className="welcome-card-title" role="heading" aria-level="3">
            サブスクリプションを追跡する
          </div>

          <p>定期的な支払いを見つけて、月々のコストを計算しましょう。</p>
        </div>

        <span className="welcome-card-arrow" aria-hidden="true">
          →
        </span>
      </a>
    </div>

    <div className="welcome-use-cases-cta">
      <a className="welcome-use-cases-button" href="/use-cases">
        使用例を見る <span aria-hidden="true">→</span>
      </a>
    </div>
  </section>

  <section className="welcome-section" aria-labelledby="welcome-products-heading">
    <h2 className="welcome-section-heading" id="welcome-products-heading">
      どこから始めるかを選ぶ
    </h2>

    <div className="welcome-products-grid">
      <a className="welcome-product-card" href="/ja/chat/overview">
        <div className="product-path-visual chat" role="img" aria-label="Replit Chatを表すコンパクトな会話ウィンドウ">
          <span className="product-path-layer product-path-back" />

          <span className="product-path-layer product-path-front" />

          <span className="product-path-badge" aria-hidden="true">
            ✦
          </span>
        </div>

        <div className="welcome-product-title" role="heading" aria-level="3">
          Chat
        </div>

        <p>
          会話から始めましょう。質問し、アイデアを調査し、
          計画をまとめます。
        </p>

        <div className="welcome-product-link">
          会話を始める <span aria-hidden="true">→</span>
        </div>
      </a>

      <a className="welcome-product-card" href="/ja/build/your-first-app">
        <div className="product-path-visual build" role="img" aria-label="Replit Buildを表すコードエディターとライブプレビュー">
          <span className="product-path-layer product-path-back" />

          <span className="product-path-layer product-path-front" />

          <span className="product-path-badge" aria-hidden="true">
            \</>
          </span>
        </div>

        <div className="welcome-product-title" role="heading" aria-level="3">
          Build
        </div>

        <p>
          アイデアを本物のアプリやサイトに変えましょう。構築し、反復し、
          自信を持って公開できます。
        </p>

        <div className="welcome-product-link">
          構築を始める <span aria-hidden="true">→</span>
        </div>
      </a>

      <a className="welcome-product-card" href="/ja/design/what-is-replit-design">
        <div className="product-path-visual design" role="img" aria-label="Replit Designを表す選択されたキャンバス構成">
          <span className="product-path-layer product-path-back" />

          <span className="product-path-layer product-path-front" />

          <span className="product-path-badge" aria-hidden="true">
            ✎
          </span>
        </div>

        <div className="welcome-product-title" role="heading" aria-level="3">
          Design
        </div>

        <p>
          美しいインターフェースとコンテンツを作りましょう。レイアウト、
          コンポーネント、体験を反復して仕上げます。
        </p>

        <div className="welcome-product-link">
          デザインを始める <span aria-hidden="true">→</span>
        </div>
      </a>
    </div>
  </section>

  <section className="welcome-access-panel" aria-labelledby="welcome-access-heading">
    <div className="welcome-access-copy">
      <h2 id="welcome-access-heading">Replitを入手する</h2>
      <p>Replitを使いたい場所を選び、サインインするかアカウントを作成してください。Web、Desktop App、Mobile Appのいずれからでも始められます。</p>
    </div>

    <div className="welcome-access-grid">
      <a className="welcome-access-card" href="https://replit.com" target="_blank" rel="noreferrer"><span className="welcome-access-icon" aria-hidden="true">◎</span><strong>Web</strong><b aria-hidden="true">→</b><small>ブラウザで開く</small></a>
      <a className="welcome-access-card" href="https://replit.com/desktop" target="_blank" rel="noreferrer"><span className="welcome-access-icon" aria-hidden="true">▣</span><strong>Desktop</strong><b aria-hidden="true">→</b><small>macOSおよびWindows</small></a>
      <a className="welcome-access-card" href="https://replit.com/mobile" target="_blank" rel="noreferrer"><span className="welcome-access-icon" aria-hidden="true">▯</span><strong>Mobile</strong><b aria-hidden="true">→</b><small>iOSおよびAndroid</small></a>
    </div>
  </section>
</div>