> ## 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 AiPrompt = ({children}) => {
return
{children}
;
};
サイトは機能しているものの見た目が古く、リデザインを言葉で説明しても誰も納得してくれません。公開中のサイトをReplit Designでデザインフレームとして再現し、元のサイトの隣でさまざまな方向性を検討して、採用した案をビルドしましょう。インポートで再現されるのは見た目の雰囲気であり、マークアップをそのままピクセル単位でコピーするものではありません。どの方向性も新しいフレームとして追加されるので、元のサイトはキャンバス上に残り、比較できます。
## 最適な用途
* 現在のサイトの隣にリデザインを並べて見せたい（言葉で説明したくない）デザイナー。
* 内容は適切なのに見た目が古くなったサイトを刷新したい創業者。
## 始める前に
作り直したいページの公開URLを用意してください。リデザインで残すべきもの（オファー、ナビゲーション、実績や根拠となる要素）と、自由に変えてよいものを決めておきましょう。ログインが必要なページはインポートできません。
## エージェントへの指示
[replit.com/design](https://replit.com/design) にアクセスし、プロンプトボックスの下にある **Import URL** を選択します。プロンプトはあらかじめ入力されているので、その後ろにURLを貼り付けてください。
Recreate the look and feel of this website: \[URL]. Stop at the design frame.
Do not start building an app.
フレームが追加されたら、リデザイン自体の指示を出します。
Keep the offer, nav, and proof points from the original. Generate three
directions for the hero and the type.
## 期待できること
インポートしたフレームの隣に、3つの方向性が別々のフレームとして追加されます。オファー、ナビゲーション、実績や根拠となる要素はそれぞれに引き継がれます。比較するのは、現在のサイトと、そのサイトの新しい3つの見せ方の計4つです。細部を見る前に、まず画面全体として評価してください。採用案は、チャットで指示するか、[ビジュアルエディタ](/ja/design/visual-editor)で要素をクリックして調整できます。
方向性が定まったら、フレームを選択して **Build** を選びます。これで[実際のソフトウェアに変換](/ja/design/build-your-design)できます。同じプロジェクト内に新しいアプリを作るか、既存のサイトアプリをフレームに合わせてスタイルし直すかを選べます。Agentが先にチェックポイントを作成するので、どちらの方法でも元に戻せます。
## 自分に合わせてカスタマイズする
Keep the layout as it is and change only the visual language: the type scale,
the spacing rhythm, and the color. Put it next to the original.
Recreate the pricing and contact pages in the winning direction so the whole
site matches.
## トラブルシューティング
Import URLが再現するのは見た目の雰囲気であり、マークアップではありません。完全に一致させたい部分を指定し、チャットまたはビジュアルエディタで修正してください。
インポートには公開URLが必要です。代わりに、スクリーンショットからそのページを再現してください。
失われてはいません。生成するたびに新しいフレームとして追加され、インポートしたものはキャンバス上に残っています。選択して比較してください。
コピー、ナビゲーション、実績や根拠となる要素は元のサイトのものを使い、自由に変えてよいのはビジュアルの方向性だけであることを伝えてください。
## 関連情報
採用した見た目を抽出し、次のページを最初からブランドに沿って作れるようにします。
リデザインの公開後に、リンク、レイアウト、アクセシビリティを確認します。