どうも、まさとらん（@0310lan）です！
今回は、万能なドキュメントサービスとして知られる「Notion」で作成したドキュメントを、誰でも簡単に一般的なWebサイトに変換して公開できるサービスをご紹介します。
基本的な機能はすべて無料で使えるうえ、とにかく簡単な操作でWebサイトに変換できるのが特徴です。また、ボタンやヘッダーメニューなども手軽に追加できます。
手っ取り早くWebサイトを作って公開したい方も含めて、ご興味ある方はぜひ参考にしてください。
【 Popsy 】
■「Popsy」の使い方
「Popsy」はNotionで作成したドキュメントを手軽にWebサイトへ変換してくれるサービスです。そのため、まず最初にNotion側で何らかのページを1つ用意する必要があります。
自分で用意しても問題はありませんが、「Popsy」にはさまざまなWebサイト向けのNotionテンプレートが提供されているのでこれを使ってみましょう。
「Popsy」のトップページから【Templates】をクリックします。
テンプレートのリストが表示されるので、好きなものを選択しましょう。
テンプレートの詳細画面にある【Get this template】ボタンをクリックしてください。
「Popsy」が提供するNotionドキュメントが表示されました。
画面上部の【複製】をクリックして、このページを自分のNotionにコピーします。
コピーができたら、あとは好きなようにコンテンツを編集できます。
ロックがかかって編集できない場合は、画面上部の「Locked」という項目をクリックして解除すれば編集できるようになります。
テキストや画像などを変更しながら、自分好みのページに編集してみてください。
■NotionとPopsyを連携する
Notionドキュメントが作成できたら、今度は「Popsy」と連携させてみましょう。
ただし、連携する前にNotionのドキュメントを公開させておく必要があります。方法は簡単で、Notionの画面上部にある【Share】をクリックして公開用のスイッチをONにするだけです。
あとはブラウザのアドレスバーからURLをコピーしておいてください。
「Popsy」のトップページに戻り、先ほどコピーしたURLを貼り付けてボタンをクリックしましょう。
無料のユーザー登録をしておきます（Googleアカウントから1クリックで完了します）。
次に、Webサイトの名称を設定します。
Webサイトの種類が表示されるので、もっとも近いカテゴリを選択してください。
「Popsy」の機能紹介などが表示されたあとに設定が完了します。
最後にNotionドキュメントをWebサイトへ変換する際のテーマを選ぶ画面が表示されます。
いくつかテーマが用意されており、選択するだけでNotionドキュメントがWebサイトのような見た目に変化します。
好きなテーマが決まったら「Save」ボタンをクリックして保存しておきましょう。
以下のような「Popsy」の管理画面が表示されたら連携は完了です！
この画面から、サイトの設定、テーマの変更、Webサイトの公開作業などが行えるようになっています。
ちなみに、PC・スマホのプレビューやNotionドキュメントを変更した際の更新機能なども搭載されています。
■Webサイトを公開してみよう！
それでは、作成したWebサイトをネット上へ公開してみましょう。「Popsy」の管理画面から【Publish】ボタンをクリックしてください。
公開した際に、自動で生成されるドメインの一部を好きな英数字に変更できます。
ちなみに、独自ドメインの設定も可能です。その場合は画面下部の入力ボックスにお持ちのドメインを設定しましょう（詳細はこちら）。
以下のような画面が表示されたら公開設定は完了です。
表示されているボタンをクリックして「Popsy」の管理画面に戻りましょう。数分ほど待つとWebサイトが公開されます。
管理画面から緑色で「Live」と表示されているのを確認できたら、公開準備が完了していることを意味しています。
このような状態になっていたら表示されているドメインをクリックしてみましょう。
NotionドキュメントがWebサイトとして公開されたのが分かります！
ちなみに、Notion側のドキュメントを変更したあとに、「Popsy」の管理画面から更新をすれば公開されているWebサイトにも反映されるので便利です。
■ボタンとメニューを作ってみよう！
「Popsy」にはNotionドキュメントをWebサイトらしく見せるための特徴的な機能がいくつかあるのですが、なかでも特に便利な「ボタン」と「メニュー」の作り方を簡単にご紹介しておきます。
ボタンを作りたい場合は、まず最初にNotionドキュメントでボタンを設置したい箇所にリンクを作ります。
このリンクはボタンをクリックしたときの遷移先になります。
そして、このリンクを [ ] で囲みましょう。
これで準備は完了です。
「Popsy」の管理画面に戻り、更新をクリックします。
すると、先ほどのリンクがボタンに変換されたのが分かります。
冒頭で選択したWebサイトのテーマによって、ボタンのデザインもいろいろ変化するのが特徴的です。
また、リンクに絵文字を含めることで、アイコン付きのボタンに変換することも可能です。
面白い機能として、「Google Play」や「Twitter」などのSNSリンクであれば、適切なアイコンをボタンに自動挿入してくれます。
次に、ヘッダーメニューも作ってみましょう！
作り方は簡単で、Notionドキュメントの冒頭部分にメニューとして表示させたいリンクを追加するだけです。
今回の例では、「自己紹介」「ブログ」「コンタクト」という3つのメニューを作りました。
あとは「Popsy」の管理画面から更新するだけで、次のようなヘッダーメニューに変換されるのです。
もちろん、リンク部分を [ ] で囲めばメニューにボタンを含めることもできます。
他にも、カード形式のコンテンツを作成したり、複数の写真をギャラリーのように表示したりなども簡単にできる機能が提供されています。
サイトの詳細設定からは、ファビコンやロゴの追加、OGP設定などもできるので、自分好みのWebサイトを作りたい人には最適なサービスと言えるでしょう。
■動画でプログラミングが学べるpaizaラーニング
動画でプログラミングが学べるpaizaラーニングでは、Python、Java、C言語、C#、PHP、Ruby、SQL、JavaScript、HTML/CSSなど、プログラミング初心者でも動画で学べる入門レッスンを公開しています。
このたび人気の「Python入門編」が全編無料となりました。他にもいろいろな動画レッスンを無料公開しておりますので、エンジニア・非エンジニアにかかわらず、プログラミングを学びたい方はぜひごらんください。
paizaラーニングについて詳しくはこちら
■まとめ
今回は、Notionドキュメントを手軽な操作でWebサイトに変換＆公開できるサービスをご紹介しました。
本記事ではご紹介できなかった機能なども含めて作り込めば、Notionドキュメントだったことが分からないくらい魅力的なWebサイトを構築できるようになります。
独自のWebサイトを手軽に作りたいと思っている人には最適なサービスなので、ぜひみなさんもオリジナルのWebサイトを作って公開してみてください！
＜参考リンク＞
「paizaラーニング」では、未経験者でもブラウザさえあれば、今すぐプログラミングの基礎が動画で学べるレッスンを多数公開しております。
詳しくはこちら
そしてpaizaでは、Webサービス開発企業などで求められるコーディング力や、テストケースを想定する力などが問われるプログラミングスキルチェック問題も提供しています。
スキルチェックに挑戦した人は、その結果によってS・A・B・C・D・Eの6段階のランクを取得できます。必要なスキルランクを取得すれば、書類選考なしで企業の求人に応募することも可能です。「自分のプログラミングスキルを客観的に知りたい」「スキルを使って転職したい」という方は、ぜひチャレンジしてみてください。
詳しくはこちら
