【簡単でキレイ!】BulletとNotionを使ったHP webサイトの作り方-⓪作成先決定①テンプレート複製②管理ページ登録

NotionでHPを作成したい。Bulletというサービスを使用して、手軽にwebサイトとして作成します。 今回はHPにするための<サービスの決定>から<管理ページに登録する>するところまで対応したいと思います!

Jul 31, 2024

はじめに

これまで、ソルシエの公式HPホームページをAmebaOwndで作成していました。
しかし、20240415からAmebaOwndの仕様変更で更新できなくなりました。
 └なぜ更新出来ない?:データ容量とページ数の制限のため、新規ページが追加できなくなった
新しいサイトを作って運用できるようにします。
 
 
📝
先にまとめを書いておく
  • HPを作成したいが気軽に更新できるようにしたい。NotionでそのままHP化できたら最高!
  • Bulletというサービスを使うと、NotionをそのままHPwebサイト化できる
  • Bulletでテンプレートを選んでNotion上に複製した
  • Notion上に複製したページをBulletに登録した
 
それでは、NotionをHPwebサイト化していきたいと思います!

作成先を検討する

WordPressでのHP作成もしてみているが、ページの作成がやや億劫でした。
 
  1. Notionでページを作成して
  1. WordPressに転記する
    1. この転記もそのままではできず、項目毎や画像毎に処理していた
 
簡単に作成できるNotionをそのまま公開したいと思い、作成先を検討しました。
 

候補

NotionをベースにしたHPで無料なサービスは、いくつかありそうだった。
実際に使ってみてもいいかもと思ったのは下記の二つ。
 
Simple.ink
Notion Website Maker: Create A Free Website Built In Notion
https://www.simple.ink/
 
Bullet.so
Notion website builder to create stunning websites in minutes
https://bullet.so/
 
なんとなく、テンプレートの感じとかサイトの感じが「Bullet」の方が好きそう。
試しに登録してみる。

事前準備

テンプレートを見てワクワクする

事前にテンプレートを眺めていると、この後の作業もワクワク進められそうです!

Googleアカウントを準備しておく

またGoogleアカウントかあると、アカウント登録スムーズにできそうです。
どんなWebサービスを使うにしてもGoogleアカウントはあったほうが便利です。
もし未作成の場合は作成しておくと良いと思います。

Notionアカウントを準備しておく

もしNotionアカウントを持っていない場合は、作成しておく必要があります。

サイト名を検討しておく

アカウント登録の流れでサイト名も登録します。
サイト名は後から変更できますが、決めておいた方が勢いあるまま登録が進められてよいと思います。
(サブドメインの関係で決めておいた方がスムーズ!)

サブドメインを検討しておく

サブドメインも登録します。
こちらは後から変更できないようです(独自ドメインに変更する場合は変えられるみたいです)
サイト名と併せて決めておくと良いかなと思います!
 
私が登録したときは[.bullet.site]が固定末尾でした。
もしかしたら開設時によって違ったり選べたりするかもしれません。
 

Bulletに登録してみる

それでは実際に登録していきたいと思います。

アカウントを作成する

Bulletのサイトにアクセスします。
[Get started for free]を押します。
[Get started for free]を押します
[Get started for free]を押します
アカウントを作成します。
Googleアカウントでログインできます。
Googleアカウントでログインできます
Googleアカウントでログインできます
質問に回答します。
後ほど出てくる設定項目や表示される最初のテンプレートなどに影響するのかも?
(Chromeの日本語翻訳を使っています)
質問あなたに最も当てはまるのはどれですか?
質問あなたに最も当てはまるのはどれですか?
引き続き質問に回答します。
こっちがテンプレートに反映されるのかな?
最初に提案されるテンプレートが変わるだけで、問題なく全部から好きなテンプレートが選べます。
Bulletで何を作成する予定ですか?
Bulletで何を作成する予定ですか?

テンプレートを選択する

テンプレートを選択します。
テンプレートを使用しない方法もあるようですが、使った方が楽に構築できそうです。
テンプレートを選択する
テンプレートを選択する
サイト名とサブドメインを作成します。
サイト名はいつでも変更できそうですが、サブドメインは変えるの大変かも?(基本は変更できないのかも?)
独自ドメインにする場合もいったんここで仮のサブドメインを付けることになります。
サイト名とサブドメインを決める
サイト名とサブドメインを決める

テンプレートをNotionに複製する

テンプレートを複製する
テンプレートを複製する
[テンプレートの複製]をクリックしました。
自分のどのワークスペースのどの項目に追加するかを指定するダイアログが表示されます。
通常は[Add to Private]で良いと思います。
どこに複製するかを選択する
どこに複製するかを選択する
複製中
複製中
テンプレートページが複製されました。
見た目はこんな感じです。
複製されたページ
複製されたページ
<Prose template>というページタイトルは好きな管理しやすいタイトルに変更してOK。
 

複製したNotionページをBulletの管理ページに紐付ける

複製したページを公開してそのURLをコピーする
公開してリンクを取得する
公開してリンクを取得する
複製をすると下記のぼやけていた部分が入力できるようになります。
先ほど取得したURLを設定します。
複製→公開したURLを記載する
複製→公開したURLを記載する

管理ページに登録できた

管理ページに登録できました。
管理ページに登録できた
管理ページに登録できた
 

まとめ

📝
このページでやったこと
  • HPを作成したいが気軽に更新できるようにしたい。NotionでそのままHP化できたら最高!
  • Bulletというサービスを使うと、NotionをそのままHPwebサイト化できる
  • Bulletでテンプレートを選んでNotion上に複製した
  • Notion上に複製したページをBulletに登録した
 
次回は複製したページをカスタマイズしていきたいと思います!