ドラッグ&ドロップでWebサイトを作成できるRewebの使い方!料金プランも併せて紹介

ドラッグ&ドロップでWebサイトを作成できるRewebの使い方!料金プランも併せて紹介

公開: 更新:
だーだい
フリーランスWebライター兼Web製作者。Webライターとしてガジェットメディアやプログラミングに関する記事を執筆する傍ら、LP制作とWordPressの改修案件もこなしつつ、活動しています。 profile

Rewebとは

直感的なドラッグ&ドロップ操作でWebサイトを構築できるAIツール「Reweb」。ユーザーがコードを書くことなく短時間でWebサイトを作成できるのが特徴です。

 

Next.js・Tailwind CSS・shadcn/uiといった技術をベースにしており、作成したWebサイトのコードをエクスポートできます。そのためエンジニアであればRewebで制作したWebサイトにさらなるカスタマイズを加えることも容易です。

多数のコンポーネントやテンプレートが豊富に用意されており、デザイン知識がなくても統一感のあるスタイルのWebサイトを作成できます。また、有料プランであればAIを活用してテーマを自動生成する機能も利用可能です。

Rewebの料金プラン

Rewebの料金プランは下記の通りです。

プラン名 特徴 月額料金 詳細
Hobby Rewebを試したり探索したい方向け 無料
  • 1ユーザーのみ利用可能
  • 2つのプロジェクトを作成可能
  • コードエクスポート5回まで
  • Reweb AIの限定的なアクセス
  • 共有リンクにRewebのブランド表示
Pro 個人開発者やデザイナー向け $16/月
  • Hobbyプランの全機能に加えてプロジェクト数無制限
  • AIの利用上限が10倍
  • コードエクスポート無制限
  • CLIエクスポート対応
  • 共有リンクにRewebのブランド非表示
Team チームでの共同作業向け 準備中
  • Proプランの全機能に加えてチームメンバーを招待可能
  • さらに高いAI利用上限
  • 優先サポート
  • 請求を一元管理

Rewebには無料プランと有料プランがあり、コストをかけることなくRewebの使い心地をチェックできます。有料プランに加入するとプロジェクトを無制限に生成できるため、多数のWebページを生成する機会のある方に最適です。

Rewebの使い方

はじめにRewebの公式ページへアクセスします。

Reweb:https://www.reweb.so/

Rewebの使い方

Rewebより

画面右上の「Get Started」ボタンをクリックします。

Rewebの使い方

Rewebより

GitHubかGoogleアカウント、メールアドレスのいずれかでアカウントを作成します。

Rewebの使い方

Rewebより

Rewebのプロジェクトページが表示されます。画面の中心にある「New Project」をクリックしてください。

Rewebの使い方

Rewebより

Webサイト作成で使用できるテンプレート一覧が表示されます。任意のテンプレートを選択することで統一性のあるデザインのWebサイトを作成可能。ここでは「Blank」をクリックしてゼロから作成します。

Rewebでセクションを追加する方法

Rewebの使い方

Rewebより

表示画面左上の「Add Section」をクリックすることで、各セクションのテンプレートが表示されます。

Rewebの使い方

Rewebより

表示されているデザインの右上にあるチェックボックスをクリックし「Add Section」をクリックすることでテンプレートを適用できます。

画面左にテンプレートの種類が表示されているので、活用したい部分をクリックしてテンプレートを探してみてください。

Rewebの使い方

Rewebより

上記のように指定されたテンプレートが反映されていればOKです。テンプレートの内容をクリックすると画面左にサイトの構造が表示されます。

Rewebのテンプレート内容を変更する方法

Rewebのテンプレート内容を変更する方法

Rewebより

各セクションのテンプレート内容は、クリックすることでその内容を変更可能です。たとえばテキスト欄をクリックすると、画面右に表示される編集画面から内容を変更できます。

Rewebの使い方

Rewebより

選択したテンプレートに指定されているクラス名も表示されており、カーソルを合わせて「×」をクリックしてクラスを削除できます。

また、Rewebで作ったWebサイトはレスポンシブ対応も魅力のひとつ。画面下部あるスマホやタブレットアイコンをクリックして各デバイスの表示画面をチェックできます。

Rewebのテンプレート内容を変更する方法

Rewebより

ボタン部分にリンクを指定する場合は下記の手順を実行することで、aタグのhrefクラスに任意のリンク先を指定できます。

  1. 編集したい場所をクリック
  2. 右側に表示される「Button」の下三角アイコンをクリック
  3. 「Link -tr 」をクリック
  4. 右側の「href」欄へリンク先のURLを入力

Webサイトのコードを表示する方法

Rewebの使い方

Rewebより

編集画面でコードを表示したい部分をクリックし、画面右にあるコードのアイコンをクリックすると生成コードが表示されます。

コードの表示は有料プランのみ利用でき、無料プランだと途中まで表示されます。

Rewebの使い方

Rewebより

作成したWebサイトは右上にある再生アイコン「▶」をクリックすることでプレビュー表示できます。

Rewebで作ったWebサイトを一般公開する方法

Rewebより

編集画面の右上にある「Share」ボタンをクリックし「Public preview」のスイッチボタンをオンにすると、一般公開用のURLが表示されます。URLの右側にある「コピー」アイコンをクリックして確認してみてください。

ブログに戻る

コメントを残す

コメントは公開前に承認される必要があることにご注意ください。

コードキャンプDX人材育成研修 - IT・プログラミングを知って学べるコネクトメディア フューチャーアーキテクト株式会社が実現した新入社員向けIT研修プログラムでタスクフォース制度が主体的な学びと成長を生み出す - IT・プログラミングを知って学べるコネクトメディア コードキャンプDX人材育成研修 - IT・プログラミングを知って学べるコネクトメディア コードキャンプIT・プログラミング研修事例/【IT新入社員研修】オンラインとオフラインの最適バランスを実現したFutureOneの導入事例 - IT・プログラミングを知って学べるコネクトメディア コードキャンプIT・プログラミング研修事例/【新入社員研修】柔軟なハイブリッド型Java研修で実現した新卒20名の成長と成果|サークレイス株式会社 - ITやプログラミングを知って学べるコネクトメディア コードキャンプIT・プログラミング研修事例/現場により近いところにデジタルを根付かせるDX基礎講座研修|株式会社ブリヂストン - ITやプログラミングを知って学べるコネクトメディア コードキャンプIT・プログラミング研修事例/業務の効率化・DX推進に向けたIT人材育成への第一歩|株式会社カナエ - ITやプログラミングを知って学べるコネクトメディア 企業・法人向けのIT・プログラミング研修 - ITやプログラミングを知って学べるコネクトメディア

新着記事

対象者別で探す

子供(小学生・中学生・高校生)向け
プログラミング教室検索する

子供(小学生・中学生・高校生)がロボットやプログラミング言語を学ぶことができるオフラインからオンラインスクールを検索、比較することが可能です。

子供(小学生・中学生・高校生)
プログラミング教室検索する

ITやプログラムなどの
最新情報を検索する

日々、新しいITやプログラミング言語の情報が流れていきますが、特定の情報を時系列でニュースやコラムを確認することができます。

ITやプログラムなどの
最新情報を検索する