Skip to main content
⏰ 所要時間の目安: 10分 始めたいデザインが、すでにウェブ上にライブで存在していることがあります。自分の現在のサイトや、見た目を再現したいページなどです。Import from URLは、ウェブサイトを探索・仕上げ・インタラクティブなアプリへとBuildできるデザインフレームとして再現します。 例として、Replitが構築したクリエイティブスタジオ向けランディングページcreative-studio-landing.replit.appを使用します。

​
始める前に

以下が必要です:
  • Replitアカウント。
  • 公開されているウェブサイトのURL、または上記の例のURL。

​
ウェブサイトをインポートする

1

サイトのURLをコピーする

自分のサイトを使うか、次の例をコピーします: https://creative-studio-landing.replit.app。
「We craft bold ideas and visuals that truly work」という見出しと、扇状に並んだアートワークカードを持つKosmo Studioのランディングページ

例として使うサイト: クリエイティブスタジオのランディングページ、Kosmo Studio。

2

Replit Designを開く

replit.com/designにアクセスし、プロンプトボックスの下にあるImport URLを選択します。Agentがサイトの見た目と雰囲気を出発点として再現します。
Import URLオプションが選択されたReplit Designのホーム画面。「Paste a link to any website and Agent will recreate its look and feel as a starting point」というツールチップが表示されている

Replit DesignホームのImport URL: 任意のウェブサイトへのリンクを貼り付けます。

3

URLを貼り付けて構築を開始する

Import URLを選択すると、プロンプトに*「Recreate the look and feel of this website:」*があらかじめ入力されます。その後にURLを貼り付けてStartを選択します。
「Recreate the look and feel of this website」に続けて例のURLが入力されたReplit Designのプロンプトボックスと、Startボタン

例のURLがすでに入力された再現プロンプト。開始の準備ができている。

Agentがサイトをプロジェクト内のデザインフレームとして再現します。
Replit Design内でデザインフレームとして再現されたKosmo Studioのランディングページ。チャットパネルでは実行が完了とマークされている

Replit Design内でデザインフレームとして再現されたKosmo Studioのランディングページ。

​
自分のものにする

インポートしたフレームを選択して、形作り直していきましょう:
  • 提案に従う: インポートしたフレームには、ダークなエディトリアル調のバリエーション、モバイルビューポート、問い合わせページなど、次のステップの提案があらかじめ用意されています。それぞれが新しいフレームとして生成されるので、元のフレームは比較用にそのまま残ります。
  • チャットで話しかける: フレームの下にある入力欄を使い、自分の言葉でブリーフィングしましょう。「ポートフォリオの写真を入れ替えて」、*「ヒーローの文字をもっと太くして」*のように。
Replit Design内で選択された再現済みのCreative Studioフレーム。横にはSuggested next stepsパネルがあり、ダークなエディトリアル調のバリエーション、モバイルビューポート、問い合わせページ、異なるアプローチを提案している

選択したインポート済みフレームと、ダークなエディトリアル調のバリエーション、モバイルビューポート、問い合わせページを提案する次のステップ。

​
次のステップ

提案を探索する

次に何をデザインすべきかを、ワンクリックずつ探索しましょう。

Visual Editor

テキスト、色、間隔、画像を直接磨き上げましょう。

デザインをBuildする

完成したフレームを動作するアプリに変えましょう。