paiza開発日誌

IT/Webエンジニア向け総合求人・学習サービス「paiza」の開発者が、プログラミングやITエンジニアの転職などについて書いています。

logo

ITエンジニア向け総合求人・学習サービス「paiza」の開発者が、プログラミングやITエンジニアの転職などについて書いています。

Notionの標準機能だけでWebサイトビルダーを作ってしまった「The Super Builder」がスゴイ!

f:id:paiza:20211117113628j:plain

どうも、まさとらん(@0310lan)です!

今回は、ごく普通のNotionドキュメントで構築された完全無料のWebサイトビルダーをご紹介します。

必要なものはNotionアカウントのみ!

多彩なコンポーネントをドラッグ&ドロップするだけで、誰でも簡単に美しいWebサイトを構築できるのが特徴で、フルカスタマイズ可能なノーコードサービスのように使うことができます。

Webサイトを手軽に構築したい方も含めて、ぜひ参考にしてみてください!

The Super Builder

f:id:paiza:20211117113742j:plain

Notionをまだ使ったことがない人は、以下の記事を参考にしながら新規アカウントを作成しておきましょう。

paiza.hatenablog.com

■「The Super Builder」の使い方

それでは、「The Super Builder」をどのように使えばいいのか詳しく見ていきましょう!

利用するにあたり、ユーザー登録などは不要で誰でもすぐに使い始めることができます。ただし、Notionを利用したサービスなので、まずは自分のNotionアカウントにログインしているかを再確認しておきましょう。


次に、「The Super Builder」のサイトにアクセスして、トップ画面にあるボタンをクリックします。

f:id:paiza:20211117113821j:plain


公開済みのNotionドキュメントが開くので、画面右上の「複製」をクリックします。

f:id:paiza:20211117113835j:plain


すると自分のNotionアカウントに自動で切り替わるので、複製先のワークスペースを選択します。

f:id:paiza:20211117113848j:plain

複製処理に少し時間が掛かりますが、1〜2分ほど待っていると自動的に処理が完了します。


自分のNotionアカウントを開くと「Super Builder」という名称のドキュメントが追加されていることが分かります。

f:id:paiza:20211117113911j:plain

このドキュメントに、「The Super Builder」の詳しい使い方やFAQなどのリソースも含まれています。


ドキュメント内にある「Builder」の項目をクリックしてください。

f:id:paiza:20211117114016j:plain


これが「The Super Builder」のメインエディタになります。

f:id:paiza:20211117114029j:plain

ただしエディタと言っても、中身はごく普通のNotionドキュメントなのです。しかしながら、Webサイトをドラッグ&ドロップで構築できるように工夫されており、類似のWebサイトビルダーのような感覚で操作できるのが大きな特徴です。


ちなみに、Notionの左側メニューを折りたたむことで、画面を広く使えて作業がしやすくなるのでオススメです。

f:id:paiza:20211117114046j:plain

■簡単なWebサイトを作ってみよう!

ここからは、「The Super Builder」を実際に使いながらどのようにWebサイトを構築していくのかを詳しく解説していきます。

さきほど表示していた「Builder」の画面をもう一度よく見てみましょう。基本的に2つの画面で構成されているのが分かります。

f:id:paiza:20211117114106j:plain

おおまかなルールは非常にシンプルで、「コンポーネント」から好きなWebコンテンツを選んで「プレビュー」にドラッグ&ドロップしていくだけです。


そこで、まず最初にプレビューですでに表示されているWebサイトのサンプルを削除して空っぽの状態にします。

プレビュー部分のコンテンツにあるオプションメニューから「削除」をクリックします。

f:id:paiza:20211117114122j:plain


プレビューが消えたら、その上にある「Create a new page」をクリックしてください。

f:id:paiza:20211117114133j:plain


すると新しいブロックが自動生成されます。これが空っぽのプレビュー画面になり、この中に「コンポーネント」をドラッグ&ドロップしていきます。

f:id:paiza:20211117114144j:plain


画面左側の「コンポーネント」には、Webサイトの構築に便利なおよそ50種類のコンテンツが用意されています。

機能別に提供されており、例えば「Hero」のトグルリストをクリックしてみましょう。

f:id:paiza:20211117114155j:plain


用意されているコンテンツが一覧で表示されるので好きなものを選びます。

f:id:paiza:20211117114206j:plain


あとはプレビュー画面にドラッグ&ドロップするだけです。

f:id:paiza:20211117114221j:plain

ただし、注意点が1つだけあります。

Macの場合は「optionキー」Windowsなら「ctrlキー」を押しながらドラッグ&ドロップしましょう。

これは複製しながらコンテンツを移動するという意味で、コンポーネントのリスト内にあるコンテンツを消してしまわないためです。


もし正常にドラッグ&ドロップができない場合は、コンポーネントのコンテンツを複製してから移動させることも可能です。

f:id:paiza:20211117114237j:plain


コンテンツをプレビュー画面に移動しても、実際には文字が表示されるだけなので、オプションメニューをクリックします。

f:id:paiza:20211117114250j:plain


「プロックタイプの変更」から「テキスト」を選択します。

f:id:paiza:20211117114259j:plain


すると選択したコンテンツがプレビューに反映されます!

f:id:paiza:20211117114310j:plain


あとは、コンテンツのタイトルテキストが残っているので削除しておきましょう。

f:id:paiza:20211117114323j:plain


テキストだけでなくブロックごと削除するとコンテンツが正しい位置に調整されます。

f:id:paiza:20211117114334j:plain


プレビュー画面はこんな感じになります。

f:id:paiza:20211117114344j:plain

あとは、同じ手順でコンポーネントから好きなコンテンツをどんどんドラッグ&ドロップしていくだけです。

少し独特な操作なので最初は戸惑うかもしれませんが、慣れてしまうと簡単にWebサイトを組み立てられるようになります。


さらに、さまざまなコンテンツを先にドラッグ&ドロップしておいて、複数のブロックを選択してみてください。

f:id:paiza:20211117114400j:plain


この状態でブロックタイプを「テキスト」に変えると、まとめて一気に変換できるのでオススメです。

f:id:paiza:20211117114411j:plain


ちなみにプレビューに表示されているコンテンツはあくまでNotionドキュメントです。

そのため、好きなように編集したりNotionで提供されている標準ブロックを追加したりなどが可能です。

f:id:paiza:20211117114426j:plain

つまり、コンポーネントから好きなコンテンツをドラッグ&ドロップしてWebサイトの骨組みを構築したら、あとは自由自在に編集して好きなようにWebサイトを作っていけるというわけです。

公式のチュートリアル動画も公開されているので、ご興味ある方は合わせて参考にしてみてください!

■Webサイトを公開してみよう!

「The Super Builder」で作成したWebサイトは、Notionドキュメントなのでそのままネット上に公開するのも簡単です。

少しだけ手順があるので、合わせて補足しておきます。


まずはプレビュー画面の最下段にあるテキストブロックを削除しておきましょう。

f:id:paiza:20211117114454j:plain


次に、プレビューのオプションをクリックします。

f:id:paiza:20211117114504j:plain


「ブロックタイプの変換」から「ページ」を選択します。

f:id:paiza:20211117114522j:plain


プレビュー部分がページブロックに変換されるので、そのまま左メニューへドラッグ&ドロップしましょう。

f:id:paiza:20211117114535j:plain


ドキュメントの全画面でWebサイトが表示できるようになります。

f:id:paiza:20211117114547j:plain


最後に「共有」メニューから公開用のスイッチをONにしてみましょう。

f:id:paiza:20211117114558j:plain


URLが自動生成されるのでコピーしてブラウザで確認します。

f:id:paiza:20211117114609j:plain


これでWebサイトが公開されました!

f:id:paiza:20211117114624j:plain

URLをメールやSNSなどでシェアすれば、誰でもWebサイトを閲覧できるようになります。

このように「The Super Builder」を使えば、Notionを活用してWebサイトを誰でも手軽に作って公開できるようになります。しかも完全無料であり、いくつでも作成できるのは嬉しいポイントでしょう。

■おまけ

実はNotionドキュメントには便利な機能を埋め込んだり、業務サービスに活用したりできるWebサービスがいくつかありまして、以下の記事で詳しい解説をしています。

paiza.hatenablog.com

作成した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ラーニング

そしてpaizaでは、Webサービス開発企業などで求められるコーディング力や、テストケースを想定する力などが問われるプログラミングスキルチェック問題も提供しています。

スキルチェックに挑戦した人は、その結果によってS・A・B・C・D・Eの6段階のランクを取得できます。必要なスキルランクを取得すれば、書類選考なしで企業の求人に応募することも可能です。「自分のプログラミングスキルを客観的に知りたい」「スキルを使って転職したい」という方は、ぜひチャレンジしてみてください。

詳しくはこちら
paizaのスキルチェック

paizaのおすすめコンテンツ

Webセキュリティ入門 ハッカー入門 Webセキュリティ講座がスタート!CVは内田真礼さん! Python✕AI 機械学習入門講座 CVに上坂すみれさんを起用!人気の機械学習講座を公開中!
paiza転職 paiza新卒 EN:TRY paizaラーニング 記事内に記載している情報は、記事公開時点でのものとなります。 Copyright Paiza, Inc, All rights reserved.