Notion + Wraptasではじめるブログ・サイトの作り方を解説！
ページ内のリンクにはアフィリエイト広告（Amazonアソシエイト含む）が含まれており、クリックして購入すると著者の収益となります。もしそれがイヤな場合にはリンクを踏まずに購入されることをおすすめします。
この記事はこんな人におすすめ
- Wraptasって何か知りたい
- Wraptasを使ってNotionブログを始めたいけど、やり方がわからない
Notionは、ドキュメントやデータベース、ToDoリストなどが作れる超万能ツールです。Notionの力はそれだけではありません。実は、Notionでブログやサイトを作ることができるんです。
もちろん、NotionだけでもWebに公開できます。ですが、「Wraptas」というサービスを活用すればもっとラクに作れます。
この記事では、「Wraptas」を使ったNotionブログの始め方を紹介します。
本サイトでは、初心者のかたにも迷わずに進められるように、画像などを使って説明していきます。
設定には少し時間がかかるかもしれません。
Notionブログを始めたい方は、ぜひこの記事を見ながらチャレンジしてみてくださいね。
この記事は、2023年2月13日時点でのバージョンに対応してます。
Notionとは？Wraptasとは？Wraptasの機能Wraptasの利用料金は？Wraptasを使うメリットは？独自ドメインが設定できるSEO対策ができる日本語のサポートを受けられるNotionのブログ開設に必要な経費と準備物Notionブログの始め方！Wraptasでブログを作る3ステップ！1. Notionでアカウントを作成する2. Wraptasに登録する3. 独自ドメインを割り当てるNotionブログをカスタマイズするサイト名を編集するトップページへ表示するNotionページURLを編集するフッターの設定パーマリンク設定アイコン画像（favicon）の設定サイトロゴ画像の設定 ヘッダーメニューの設定「Twitterでシェア」ボタンの配置meta情報（metaタグ）の設定CSSでデザインを変更するWraptasを使ったNotionブログを楽しく運営していきましょう！
Notionとは？
Notion（ノーション）は、アメリカ・サンフランシスコを拠点にする「Notion Labs」が開発したツールです。
「タスク管理」「ノート作成」「スケジュール管理」「チーム関係管理」など、「All-in-one workspace（オールインワンワークスペース）」として幅広く役に立つ機能が搭載されています。
2021年10月には、Notionの日本語対応がリリースされ、より使いやすくなりました。
Notionは、カスタマイズも自由自在です。目的にあわせて活用できます。
Notionの始め方や基本的な使い方などを、以下の記事で紹介しています。
これからNotionを始める方は、ぜひ参考にしてください。
Wraptasとは？
Wraptasは、Notionに書くだけでかんたんにWebサイトが作れるサービスです。HTMLやCSSなどの知識がなくてもWebサイトを構築できます。
サイトのデザインをする場合は、CSSを使うことでカスタマイズ可能です。
Wraptasの機能
Wraptasの機能は、公式サイトで以下のように掲載されています。Notionをサイト化するために必要な機能は、一通りそろっています。
Wraptasの利用料金は？
Wraptasの利用料金は、1サイトあたり月額980円（税抜）です。
今なら、30日間の無料トライアルがあります。そのため、無料でWraptasを試すことができます。
お試しで使えるのは、とてもありがたいですよね。
Wraptasを使うメリットは？
ここでは、Wraptasを導入するメリットを紹介します。
Notionは、サイトやブログをWebへ公開することができます。しかし、Notion単体ではできないこともあります。できないことを補えるのが、Wraptasです。
独自ドメインが設定できる
ドメインとは、Web上で割り当てられている住所のことを指します。そして、独自ドメインとは、世界でひとつしかないドメインのことです。
Notion単体では、独自ドメインの設定はできません。Notion単体で設定できるのは、サブドメインです。サブドメインとは、独自ドメインをもとに設定できるドメインのことを指します。Notion単体の場合、独自ドメイン「notion.site」は固定で設定されています。そして、「notion.site」の前の部分をユーザーが、自由に設定できる仕組みです。
独自ドメインにすることで、「ユーザーに覚えてもらえる」「URLが変わらない」「SEOの効果が高まりやすくなる」などのメリットがあります。Webサイトを運営していきたいと思っているのであれば、独自ドメインを取得したほうがいいでしょう。
Wraptasでは、独自ドメインを設定することができます。
SEO対策ができる
Notion単体では、SEO対策に必要な「title」「discription」などの設定が細かくできません。Wraptasを使用することで、その設定ができます。サイト全体の構造を一目でわかるサイトマップの自動生成も可能です。
日本語のサポートを受けられる
Wraptasは、日本人の渡邊 達明さんが作ったサービスです。そのため、何かあったときのコミュニケーションが取りやすく、手厚いサポートが受けられます。
Wraptasのサポートセンターに問い合わせしたところ、素早い返信だったのでとても助かってます。
Notionのブログ開設に必要な経費と準備物
まずは、Notionのブログやサイトをつくるために、必要な準備物を確認していきましょう。
最低限、準備が必要なものは、以下の2点です。独自ドメインを取得したい方は、「ドメイン」も必要になります。
- Notion
- Wraptas
- ドメイン（※独自ドメインを取得したい方は必須）
Wraptasは、Notionで作ったサイトをインターネット上に公開するために必須です。
この記事で、紹介するNotionブログでは、上記3点の費用がかかります。
| 購入（初期）費用 | 更新費用 | |
|---|---|---|
| Notion | 無料 | 無料 |
| Wraptas | 無料 | 1,078円（税込）/月 |
| ※ドメイン | 0円~ | 0円~ |
| 合計 | 0円~ | 1,078円（税込）~/月 |
ドメインは、.comや.netなどのドメインの末尾によって、費用が異なります。なかには、初期費用無料のドメインもあります。ただし、ドメインの更新費用が発生することが多いので、注意しましょう。
Notionブログの始め方！Wraptasでブログを作る3ステップ！
ここでは、NotionブログをWraptasで作るための手順を紹介します。
手順は、以下の3ステップで進んでいきます。
- Notionでアカウントを作成する
- Wraptasに登録する
- 独自ドメインを割り当てる
1. Notionでアカウントを作成する
まずは、Notionのアカウントを作成するところまで進めていきます。
といっても、とても簡単です。
Notionのアカウント作成にかかる時間は、ほんの数分です。
Notionアカウントの作成は、以下の記事を参考にしてください。
2. Wraptasに登録する
続いて、Wraptasの登録方法を紹介していきます。
- Wraptasの公式サイトにアクセス
- 「30日間の無料トライアルを試す→」をクリック
- 新規登録画面で登録する
- Googleアカウントで登録する場合
- メールアドレスで登録する場合
新規登録は、「Googleアカウント」か「メールアドレス」のいずれかでできます。
好きな方で、登録しましょう。
Googleアカウントの場合は、「Googleアカウントで登録」をクリックします。
Googleアカウントの選択画面が表示されます。
連携したいアカウントをクリックすると、新規登録は完了です。
メールアドレスの場合は、緑色①にメールアドレスとパスワードを入力します。その後「メールアドレスで登録」をクリック。
次に、入力されたアドレス宛に届くメールに記載されたURLへアクセスします。
以下のような表示がされていれば、新規登録は完了です。
- Wraptasの管理画面へログイン
- 「決済情報」をクリック
- 「各種規約に同意し決算画面に遷移する」をクリック
- Stripeの決済画面で必要事項を入力する
- 「新規サイト登録」をクリック
- 必要事項を記入し、サイトの登録をする
サイトIDは、あとから変更できません。ご注意ください。
「ウェブ公開用リンク」は、以下の手順で取得できます。
①ページの右上にある「共有」をクリック
②Webで公開のスイッチをオンにする
③「ウェブ公開用リンクをコピー」または、「リンクをコピー」をクリック
お疲れさまです。これで、Wraptasの登録は完了です。
以下の手順は、独自ドメインを取得したい方向けの紹介です。
WraptasのサブドメインでもOKという方は、飛ばしてくださいね。
3. 独自ドメインを割り当てる
次に、Wraptasで作ったWebサイトに独自ドメインを割り当てる方法を紹介します。
ドメインは、「お名前.com」「Xserver Domain」「ムームードメイン」などさまざまなサイトで取得できます。
今回は、「お名前.com」をもとに解説していきます。
独自ドメインの割り当ては、以下のページを見て設定してみてください。
Notionブログをカスタマイズする
ここでは、Wraptas上でNotionブログをカスタマイズする方法を紹介します。
サイト名を編集する
サイト名は、以下から設定できます。
→ → →
※（サイト名）はご自身のサイトを選んでください。
トップページへ表示するNotionページURLを編集する
トップページへ表示するNotionページURLは、以下から設定できます。
公開設定が済んでいるNotionページのURLリンクを入力してください。
→ → →
※（サイト名）はご自身のサイトを選んでください。
TOPページに設定したNotionページと違うワークスペースのNotionページは、同サイト内で公開することはできません。ご注意ください。
NotionページURLは、以下の手順で取得できます。
リンクをコピーする方法
- ページの右上にある「共有」をクリック
- Webで公開のスイッチをオンにする
- 「ウェブ公開用リンクをコピー」または、「リンクをコピー」をクリック
フッターの設定
フッターの設定は、Notionで作成したページを埋め込む仕様です。
まずは、フッターに表示させたいページを作成します。
notionの新規ページ作成がわからない方は、以下記事の「ページの新規作成」をご覧ください。
フッターページの作成が完了したら、「共有」からURLをコピー。
フッターは、以下から設定できます。
→ → →
※（サイト名）はご自身のサイトを選んでください。
パーマリンク設定
パーマリンクとは、Webサイトのページごとに設定したURLの一部のことを指します。
パーマリンクを設定する理由は、2つあります。
それは、「人間がわかりやすいURLにする」「SEOに好影響を与えられる」ためです。
なので、Webサイトにページを追加した段階でパーマリンクの設定をしましょう。
パーマリンクの決め方は、以下を参考にしてみてください。
パーマリンクは、以下で設定できます。
→ → →
※（サイト名）はご自身のサイトを選んでください。
アイコン画像（favicon）の設定
アイコン画像（favicon）の設定では、以下矢印の部分を設定します。
アイコン画像は、以下から設定できます。
→ → →
※（サイト名）はご自身のサイトを選んでください。
画像サイズは150px × 150pxが推奨されています。
サイトロゴ画像の設定
サイトロゴ画像の設定では、以下矢印の部分を設定します。
サイロゴ画像は、以下から設定できます。
→ → →
※（サイト名）はご自身のサイトを選んでください。
画像サイズは400px × 50pxが推奨されています。
ヘッダーメニューの設定
ヘッダーメニューの設定では、以下矢印の部分を設定します。
ヘッダーメニューは、以下から設定できます。
→ → →
※（サイト名）はご自身のサイトを選んでください。
「Twitterでシェア」ボタンの配置
「Twitterシェア」ボタンは、各ページのコンテンツしたに配置可能です。
以下から設定できます。
→ → →
※（サイト名）はご自身のサイトを選んでください。
meta情報（metaタグ）の設定
meta情報（metaタグ）とは、ブラウザや検索エンジンなどにWebサイトの情報（ページのタイトルや説明文など）を伝えるHTMLのことを指します。
Wraptasでは、ページのタイトルと説明文を設定することができます。
→ → →
※（サイト名）はご自身のサイトを選んでください。
CSSでデザインを変更する
Webサイトをおしゃれなデザインにしたいときがあるでしょう。
その時には、CSSに書くことで反映されます。
→ → →
※（サイト名）はご自身のサイトを選んでください。
CSSがわからない方でも、Wraptasの公式サイトでサンプルCSS集が用意されています。
今後、チコログでもNotionブログのカスタマイズ方法を紹介していくので、よかったら見にきてくださいね！
Wraptasを使ったNotionブログを楽しく運営していきましょう！
今回は、「Wraptas」を使ったNotionブログの始め方を紹介してきました。
かなり長文になってしまいましたが、他にも紹介できていない機能がたくさんあります…！
Wraptasの機能をうまく活用しながら、Notionブログを楽しんで続けていけると嬉しいです。
また、Wraptasの使い方で困った場合には、Wraptasのヘルプを見てみてください。
それでも解消されない場合は、私アトリに問い合わせていただければサポートしますよ。
素敵なNotionブログを作っていきましょう。
最後まで読んでいただきありがとうございました！