TeleportHQでノーコードウェブサイト開発してみた(NextJS・NuxtJS・Gatsbyにエクスポート)
こんにちは〜
Twitterを漂っていたら面白そうなツイートを見かけたので、今回はそこで取り上げられていたノーコードサイト開発ツール「TeleportHQ」を触ってみました。
その使い方や特徴、感想をこの記事では書いていこうと思います。
TeleportHQってなに？
TeleportHQはウェブサイトに特化したFigmaやSTUDIO、Wixの強化版のようなものです。
TeleportHQではFigmaからデザインをインポートして、ウェブサイト化してteleportで公開したりNextJSなどとして書き出したりすることができます。
その他にVercelと連携して簡単にVercelにデプロイすることも可能です。
プロジェクトの設定ではMetaタグのTitleやDescription、言語の設定に加え、GoogleAnalyticsタグの設定やカスタムコードの追加、GoogleFonts以外のカスタムフォントの追加やTailwindCSSの利用が可能です。
要約すると、今までノーコードツールでできなかったことが、無くなって何でも出来るようになりました。
ノーコードツールの「サービス自体が終わるかもしれない」などのSaaSでよくある課題もエクスポート出来ることで解決です。
料金プラン
料金プランはとんでもなくシンプルです。
free又はProfessionalです。
決済がユーロでわかりにくいのですが、Professionalプランは現在(2022/12/03)の為替だと2,540円くらいです。
| Free | Professional | |
|---|---|---|
| 価格 | €0 | €18/editor/month |
| プロジェクト数 | 3つまで | 無制限 |
| エクスポート | 可能 | 可能 |
| 共同編集 | 無制限 | 無制限 |
正直、無料プランで十分です。
使い方
ツールはどうこう言う前に一回触ってみるのが大切なので早速触っていきます。
どんなもんか見たいという人はここからウェブサイト見れます(ウェブサイトもノーコードで作られてるっぽい)
サインイン/サインアップ
下記のページからGoogleアカウント、GitHubアカウント、メールアドレスで登録することができます。
エクスポートとかがしたいのであればGitHubアカウントで登録しておくと後々楽です。
プロジェクト作成
サインアップが完了すると、このようなページに飛ばされます。
ここがダッシュボードでプロジェクトの管理や作成が可能です。
真ん中にある「Start Building」と書いてある黒いボタンを押してプロジェクトを作成します。
黒いボタンを押すと「1から作るか」「テンプレートを利用するか」を選ぶことが可能です。
今回は試しなのでなにか良さげなテンプレートを利用して試していきます。
使いたいテンプレートにカーソルを合わせて、「Start Building」を押すとそのテンプレートを使ったプロジェクトが作成されます。
デザインしていく
プロジェクトを作成するとデザインができるようになります。
ここでTeleportHQのデザイン画面の基本的な使い方を解説しておきます。
まず基本的に左側がパーツの追加や管理を行う場所です。
左側から新しいパーツを追加したりページを追加、CSSの管理を行います。
真ん中でデザイン自体を編集していきます。
ここをいじることでパーツの場所や見え方を直接変更可能です。
右側でパーツのプロパティ設定、テキストであれば文字サイズの変更や色の変更、利用するHTMLタグやID、サイズやポジションを変更できます。
この基本的な操作はFigmaやPhotoshopとも似ているところがあるので、デザイナーの方は簡単に慣れることができると思います。
TeleportHQではコンポーネントも作成可能で、ページの管理と同じ場所から作成、管理を行うことができます。
実際に操作している動画がこれです。
ゴリゴリ作ってこの短時間でGoogleFontsからNoto Sans JPを使うことまでできています。
これはめちゃすごい。
トップページの設定や404ページの設定も簡単に行うことができます。
ただ、操作に対して微妙に遅延があったりするので、後々改善されるの期待です。
ページのパス設定やページ毎のSEO設定などももちろん行えます！
今作ったページをTeleportHQの中でデプロイしてみました。
簡単にできてめちゃいい！
パフォーマンスもとてもよろしいです
実際にエクスポートして公開してみた
せっかくなので、今回はTeleportHQからGitHubにNextJS版をエクスポートして、Vercelで実際にデプロイしてみました。
GitHubにエクスポートする
右上にあるダウンロードみたいなボタンを押すとエクスポートを行うことができます。
ここで書き出すフレームワークと書き出し先をCodeSandboxかGitHubかローカルにZipで保存かを選べます。
今回は直接デプロイを行うのでNextJSを選択してGitHubを選択します。
GitHubへのエクスポートにはtokenが必要なのでGitHubでtokenを作成します
NoteにTeleportHQ
Expiration(有効期限)に90 days
Scopesは全部選択しておきます。（なんのscope欲しいか書いてくれ）
そして一番下の「generate token」という緑のボタンを押すとtokenが作成されます。(他の人にtokenがバレたら乗っ取られるよ！)
そして生成されたtokenをコピーしてTeleportHQのintegrationのGitHubのところに貼り付けます。
そしてSave Changesしたらもう一度エクスポートからNextJSとGitHubを選びましょう。
しばらく待つと、、、、GitHubのリポジトリがPublicで勝手に作成されてそのページに飛ばされます！
Vercelでデプロイする
GitHubに書き出されてしまえばこっちのもんです。
Vercelの新規プロジェクト作成で作成されたリポジトリをインポート
青色のDeployを押せば完成です。
お疲れ様でした。
Discussion