どうも、まさとらん（@0310lan）です！
今回は、ごく普通のNotionドキュメントで構築された完全無料のWebサイトビルダーをご紹介します。
必要なものはNotionアカウントのみ！
多彩なコンポーネントをドラッグ＆ドロップするだけで、誰でも簡単に美しいWebサイトを構築できるのが特徴で、フルカスタマイズ可能なノーコードサービスのように使うことができます。
Webサイトを手軽に構築したい方も含めて、ぜひ参考にしてみてください！
■「The Super Builder」の使い方
それでは、「The Super Builder」をどのように使えばいいのか詳しく見ていきましょう！
利用するにあたり、ユーザー登録などは不要で誰でもすぐに使い始めることができます。ただし、Notionを利用したサービスなので、まずは自分のNotionアカウントにログインしているかを再確認しておきましょう。
次に、「The Super Builder」のサイトにアクセスして、トップ画面にあるボタンをクリックします。
公開済みのNotionドキュメントが開くので、画面右上の「複製」をクリックします。
すると自分のNotionアカウントに自動で切り替わるので、複製先のワークスペースを選択します。
複製処理に少し時間が掛かりますが、1〜2分ほど待っていると自動的に処理が完了します。
自分のNotionアカウントを開くと「Super Builder」という名称のドキュメントが追加されていることが分かります。
このドキュメントに、「The Super Builder」の詳しい使い方やFAQなどのリソースも含まれています。
ドキュメント内にある「Builder」の項目をクリックしてください。
これが「The Super Builder」のメインエディタになります。
ただしエディタと言っても、中身はごく普通のNotionドキュメントなのです。しかしながら、Webサイトをドラッグ＆ドロップで構築できるように工夫されており、類似のWebサイトビルダーのような感覚で操作できるのが大きな特徴です。
ちなみに、Notionの左側メニューを折りたたむことで、画面を広く使えて作業がしやすくなるのでオススメです。
■簡単なWebサイトを作ってみよう！
ここからは、「The Super Builder」を実際に使いながらどのようにWebサイトを構築していくのかを詳しく解説していきます。
さきほど表示していた「Builder」の画面をもう一度よく見てみましょう。基本的に2つの画面で構成されているのが分かります。
おおまかなルールは非常にシンプルで、「コンポーネント」から好きなWebコンテンツを選んで「プレビュー」にドラッグ＆ドロップしていくだけです。
そこで、まず最初にプレビューですでに表示されているWebサイトのサンプルを削除して空っぽの状態にします。
プレビュー部分のコンテンツにあるオプションメニューから「削除」をクリックします。
プレビューが消えたら、その上にある「Create a new page」をクリックしてください。
すると新しいブロックが自動生成されます。これが空っぽのプレビュー画面になり、この中に「コンポーネント」をドラッグ＆ドロップしていきます。
画面左側の「コンポーネント」には、Webサイトの構築に便利なおよそ50種類のコンテンツが用意されています。
機能別に提供されており、例えば「Hero」のトグルリストをクリックしてみましょう。
用意されているコンテンツが一覧で表示されるので好きなものを選びます。
あとはプレビュー画面にドラッグ＆ドロップするだけです。
ただし、注意点が1つだけあります。
Macの場合は「optionキー」Windowsなら「ctrlキー」を押しながらドラッグ＆ドロップしましょう。
これは複製しながらコンテンツを移動するという意味で、コンポーネントのリスト内にあるコンテンツを消してしまわないためです。
もし正常にドラッグ＆ドロップができない場合は、コンポーネントのコンテンツを複製してから移動させることも可能です。
コンテンツをプレビュー画面に移動しても、実際には文字が表示されるだけなので、オプションメニューをクリックします。
「プロックタイプの変更」から「テキスト」を選択します。
すると選択したコンテンツがプレビューに反映されます！
あとは、コンテンツのタイトルテキストが残っているので削除しておきましょう。
テキストだけでなくブロックごと削除するとコンテンツが正しい位置に調整されます。
プレビュー画面はこんな感じになります。
あとは、同じ手順でコンポーネントから好きなコンテンツをどんどんドラッグ＆ドロップしていくだけです。
少し独特な操作なので最初は戸惑うかもしれませんが、慣れてしまうと簡単にWebサイトを組み立てられるようになります。
さらに、さまざまなコンテンツを先にドラッグ＆ドロップしておいて、複数のブロックを選択してみてください。
この状態でブロックタイプを「テキスト」に変えると、まとめて一気に変換できるのでオススメです。
ちなみにプレビューに表示されているコンテンツはあくまでNotionドキュメントです。
そのため、好きなように編集したりNotionで提供されている標準ブロックを追加したりなどが可能です。
つまり、コンポーネントから好きなコンテンツをドラッグ＆ドロップしてWebサイトの骨組みを構築したら、あとは自由自在に編集して好きなようにWebサイトを作っていけるというわけです。
公式のチュートリアル動画も公開されているので、ご興味ある方は合わせて参考にしてみてください！
■Webサイトを公開してみよう！
「The Super Builder」で作成したWebサイトは、Notionドキュメントなのでそのままネット上に公開するのも簡単です。
少しだけ手順があるので、合わせて補足しておきます。
まずはプレビュー画面の最下段にあるテキストブロックを削除しておきましょう。
次に、プレビューのオプションをクリックします。
「ブロックタイプの変換」から「ページ」を選択します。
プレビュー部分がページブロックに変換されるので、そのまま左メニューへドラッグ＆ドロップしましょう。
ドキュメントの全画面でWebサイトが表示できるようになります。
最後に「共有」メニューから公開用のスイッチをONにしてみましょう。
URLが自動生成されるのでコピーしてブラウザで確認します。
これでWebサイトが公開されました！
URLをメールやSNSなどでシェアすれば、誰でもWebサイトを閲覧できるようになります。
このように「The Super Builder」を使えば、Notionを活用してWebサイトを誰でも手軽に作って公開できるようになります。しかも完全無料であり、いくつでも作成できるのは嬉しいポイントでしょう。
■おまけ
実はNotionドキュメントには便利な機能を埋め込んだり、業務サービスに活用したりできるWebサービスがいくつかありまして、以下の記事で詳しい解説をしています。
作成したWebサイトに、メールフォームやコメント機能などを追加したり、データの可視化やスライド資料の作成など多用途に活用できる内容です。
Notionをさらに活用したい方も含めて、ぜひ参考にしてみてください！
■動画＆ゲームでプログラミングが学べるpaizaラーニング
動画でプログラミングが学べるpaizaラーニングでは、Python、Java、C言語、C#、Go、Kotlin、JavaScript、HTML/CSS、SQLなど、プログラミング初心者でも動画で学べる体験・入門レッスンを公開しています。
「Python体験編」「C#体験編」「ITエンジニアの就活準備編」といった人気講座は完全無料となっておりますので、プログラミングを学びたい方・ITエンジニアを目指したい方はぜひごらんください。
また、「STEINS;GATE（シュタインズ・ゲート）」とpaizaがコラボしたプログラミングゲーム「電脳言語のオルダーソンループ」をはじめゲームで楽しくプログラミングを学べるコンテンツもご用意しています。ぜひプレイしてみてください！
■まとめ
今回は、NotionドキュメントをWebサイトビルダーに変えるサービスをご紹介しました。
実を言うとこのサービスはNotionに独自ドメインの追加やカスタムテーマの適用など、多彩な機能を提供する「super」というサービスの一部でもあります。
Notion単体でも多彩なことができますが、さまざまな便利サービスを連携することで実現できることがもっと広がるのが大きな魅力と言えます。
ぜひみなさんもオリジナルのWebサイトを作って公開してみてはいかがでしょうか。
＜参考リンク＞
・「The Super Builder」公式サイト
「paizaラーニング」では、未経験者でもブラウザさえあれば、今すぐプログラミングの基礎が動画で学べるレッスンを多数公開しております。
詳しくはこちら
そしてpaizaでは、Webサービス開発企業などで求められるコーディング力や、テストケースを想定する力などが問われるプログラミングスキルチェック問題も提供しています。
スキルチェックに挑戦した人は、その結果によってS・A・B・C・D・Eの6段階のランクを取得できます。必要なスキルランクを取得すれば、書類選考なしで企業の求人に応募することも可能です。「自分のプログラミングスキルを客観的に知りたい」「スキルを使って転職したい」という方は、ぜひチャレンジしてみてください。
詳しくはこちら
