Skip to main content
サイトは機能しているものの見た目が古く、リデザインを言葉で説明しても誰も納得してくれません。公開中のサイトをReplit Designでデザインフレームとして再現し、元のサイトの隣でさまざまな方向性を検討して、採用した案をビルドしましょう。インポートで再現されるのは見た目の雰囲気であり、マークアップをそのままピクセル単位でコピーするものではありません。どの方向性も新しいフレームとして追加されるので、元のサイトはキャンバス上に残り、比較できます。

​
最適な用途

  • 現在のサイトの隣にリデザインを並べて見せたい（言葉で説明したくない）デザイナー。
  • 内容は適切なのに見た目が古くなったサイトを刷新したい創業者。

​
始める前に

作り直したいページの公開URLを用意してください。リデザインで残すべきもの（オファー、ナビゲーション、実績や根拠となる要素）と、自由に変えてよいものを決めておきましょう。ログインが必要なページはインポートできません。

​
エージェントへの指示

replit.com/design にアクセスし、プロンプトボックスの下にある Import URL を選択します。プロンプトはあらかじめ入力されているので、その後ろにURLを貼り付けてください。 フレームが追加されたら、リデザイン自体の指示を出します。

​
期待できること

インポートしたフレームの隣に、3つの方向性が別々のフレームとして追加されます。オファー、ナビゲーション、実績や根拠となる要素はそれぞれに引き継がれます。比較するのは、現在のサイトと、そのサイトの新しい3つの見せ方の計4つです。細部を見る前に、まず画面全体として評価してください。採用案は、チャットで指示するか、ビジュアルエディタで要素をクリックして調整できます。 方向性が定まったら、フレームを選択して Build を選びます。これで実際のソフトウェアに変換できます。同じプロジェクト内に新しいアプリを作るか、既存のサイトアプリをフレームに合わせてスタイルし直すかを選べます。Agentが先にチェックポイントを作成するので、どちらの方法でも元に戻せます。

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

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

Import URLが再現するのは見た目の雰囲気であり、マークアップではありません。完全に一致させたい部分を指定し、チャットまたはビジュアルエディタで修正してください。
インポートには公開URLが必要です。代わりに、スクリーンショットからそのページを再現してください。
失われてはいません。生成するたびに新しいフレームとして追加され、インポートしたものはキャンバス上に残っています。選択して比較してください。
コピー、ナビゲーション、実績や根拠となる要素は元のサイトのものを使い、自由に変えてよいのはビジュアルの方向性だけであることを伝えてください。

​
関連情報

デザインシステムを作成する

採用した見た目を抽出し、次のページを最初からブランドに沿って作れるようにします。

公開中のウェブサイトをレビューする

リデザインの公開後に、リンク、レイアウト、アクセシビリティを確認します。