Rewebとは
直感的なドラッグ&ドロップ操作でWebサイトを構築できるAIツール「Reweb」。ユーザーがコードを書くことなく短時間でWebサイトを作成できるのが特徴です。
✨ New landing page template released.
— Reweb (@_reweb) December 3, 2024
- Fully customizable with our visual editor
- Export to @nextjs and @tailwindcss code in 1 click
Link below to try it. pic.twitter.com/IydBN5130W
Next.js・Tailwind CSS・shadcn/uiといった技術をベースにしており、作成したWebサイトのコードをエクスポートできます。そのためエンジニアであればRewebで制作したWebサイトにさらなるカスタマイズを加えることも容易です。
多数のコンポーネントやテンプレートが豊富に用意されており、デザイン知識がなくても統一感のあるスタイルのWebサイトを作成できます。また、有料プランであればAIを活用してテーマを自動生成する機能も利用可能です。
Rewebの料金プラン
Rewebの料金プランは下記の通りです。
プラン名 | 特徴 | 月額料金 | 詳細 |
---|---|---|---|
Hobby | Rewebを試したり探索したい方向け | 無料 |
|
Pro | 個人開発者やデザイナー向け | $16/月 |
|
Team | チームでの共同作業向け | 準備中 |
|
Rewebには無料プランと有料プランがあり、コストをかけることなくRewebの使い心地をチェックできます。有料プランに加入するとプロジェクトを無制限に生成できるため、多数のWebページを生成する機会のある方に最適です。
Rewebの使い方
はじめにRewebの公式ページへアクセスします。
Reweb:https://www.reweb.so/
Rewebより
画面右上の「Get Started」ボタンをクリックします。
Rewebより
GitHubかGoogleアカウント、メールアドレスのいずれかでアカウントを作成します。
Rewebより
Rewebのプロジェクトページが表示されます。画面の中心にある「New Project」をクリックしてください。
Rewebより
Webサイト作成で使用できるテンプレート一覧が表示されます。任意のテンプレートを選択することで統一性のあるデザインのWebサイトを作成可能。ここでは「Blank」をクリックしてゼロから作成します。
Rewebでセクションを追加する方法
Rewebより
表示画面左上の「Add Section」をクリックすることで、各セクションのテンプレートが表示されます。
Rewebより
表示されているデザインの右上にあるチェックボックスをクリックし「Add Section」をクリックすることでテンプレートを適用できます。
画面左にテンプレートの種類が表示されているので、活用したい部分をクリックしてテンプレートを探してみてください。
Rewebより
上記のように指定されたテンプレートが反映されていればOKです。テンプレートの内容をクリックすると画面左にサイトの構造が表示されます。
Rewebのテンプレート内容を変更する方法
Rewebより
各セクションのテンプレート内容は、クリックすることでその内容を変更可能です。たとえばテキスト欄をクリックすると、画面右に表示される編集画面から内容を変更できます。
Rewebより
選択したテンプレートに指定されているクラス名も表示されており、カーソルを合わせて「×」をクリックしてクラスを削除できます。
また、Rewebで作ったWebサイトはレスポンシブ対応も魅力のひとつ。画面下部あるスマホやタブレットアイコンをクリックして各デバイスの表示画面をチェックできます。
Rewebより
ボタン部分にリンクを指定する場合は下記の手順を実行することで、aタグのhrefクラスに任意のリンク先を指定できます。
- 編集したい場所をクリック
- 右側に表示される「Button」の下三角アイコンをクリック
- 「Link -tr 」をクリック
- 右側の「href」欄へリンク先のURLを入力
Webサイトのコードを表示する方法
Rewebより
編集画面でコードを表示したい部分をクリックし、画面右にあるコードのアイコンをクリックすると生成コードが表示されます。
コードの表示は有料プランのみ利用でき、無料プランだと途中まで表示されます。
Rewebより
作成したWebサイトは右上にある再生アイコン「▶」をクリックすることでプレビュー表示できます。
Rewebで作ったWebサイトを一般公開する方法
Rewebより
編集画面の右上にある「Share」ボタンをクリックし「Public preview」のスイッチボタンをオンにすると、一般公開用のURLが表示されます。URLの右側にある「コピー」アイコンをクリックして確認してみてください。