> ## 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>;
};

サイトは公開されていますが、ローンチ以降、誰もきちんと見直していません。4つの観点でレビューを実施しましょう。リンク切れ、スマートフォンで崩れるレイアウト、アクセシビリティの問題、そしてページの役に立たなくなったデザイン上の判断です。レビューは公開URLをもとに行うため、サイトを何で構築したか、どこでホスティングしているかは関係ありません。サイトがReplitプロジェクトであれば、Agentは問題を見つけるだけでなく、修正も適用できます。

## 最適な用途

* 公開中のサイトを管理していて、スコアではなく、対応に使えるレビューが必要なデザイナー。
* ローンチ以降に何が悪化したかを、ページごとに把握したいプロダクトマネージャー。

## コネクタ

<Connectors
  items={[
{
  id: "slack",
  name: "Slack",
  why: "定期レビューの結果が届く場所",
},
{ id: "notion", name: "Notion", why: "指摘事項と対応内容のログ" },
]}
/>

<Note>
  レビュー自体には、どちらのコネクタも必要ありません。[自分に合わせてカスタマイズする](#自分に合わせてカスタマイズする)にある定期実行版を使う場合に接続してください。
</Note>

## 始める前に

公開URLを用意し、特に重要なページを指定してください。今回のレビューで何を得たいかも決めておきましょう。コードの担当者に渡す指摘事項の一覧か、直接適用される修正かのどちらかです。後者の場合のみ、サイトをReplitプロジェクトとして開いている必要があります。

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

<AiPrompt>
  Review my live site \[URL], one angle at a time. Start with links that no longer
  resolve, then the layout on a phone, then accessibility, then the design
  decisions. For each finding, tell me the page, what's wrong, and what you'd
  change.
</AiPrompt>

## 期待できること

Agentは指定した順に観点を進め、確認した範囲（巡回したページと、解決を確認したリンク）を報告します。観点ごとに独立したセクションとして結果が返ってきます。どの指摘にも、ページ、問題点、変更すべき内容が示されます。レビューの最後には、Agentが最初に対応する修正が提示されます。

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

<AiPrompt>
  Create a routine that runs every Monday at 9:00. Open each page of \[URL],
  check that every link still resolves, and report anything that changed since
  last week. Post the findings to Slack and log them in Notion.
</AiPrompt>

<AiPrompt>
  Give every finding an importance level: blocks a visitor, slows them down, or
  cosmetic. List the blockers first.
</AiPrompt>

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

<AccordionGroup>
  <Accordion title="チェックアウトやモーダルの先にあるリンクが確認されていない">
    クロールで確認できるのは、レンダリングされたページに存在するリンクです。フォーム、モーダル、決済ステップを経て初めて表示されるものは、別途確認が必要です。
  </Accordion>

  <Accordion title="レイアウトとアクセシビリティの指摘が少ない">
    サンプルをAgentに任せず、確認してほしいページとビューポート幅を指定してください。主要なタスクを担うページから始めましょう。
  </Accordion>

  <Accordion title="デザインへのフィードバックが一般的すぎる">
    そのページの目的と、誰のためのページかを伝えてください。目的がないと、批評はどのサイトにも当てはまるレイアウトのアドバイスになりがちです。
  </Accordion>
</AccordionGroup>

## 関連情報

<CardGroup cols={2}>
  <Card href="/ja/use-cases/redesign-your-website">
    レビューの結果、問題がデザインそのものにあるとわかったとき。
  </Card>

  <Card href="/ja/use-cases/create-design-system">
    レビューでばらつきが見つかったら、すべてを1つのシステムにまとめます。
  </Card>

  <Card href="/ja/features/publishing/seo-agent">
    公開済みのReplitアプリでは、クロールのしやすさ、メタデータ、マークアップを監査し、ワンクリックで修正できます。
  </Card>
</CardGroup>
