📧 Notionからワンクリックでメール送信！
Notionデータベースの情報をメールにコピー&ペーストする手間、面倒だと感じていませんか？
例: お問合せデータベースに登録されたお問合せの返信メール作成のたびに氏名やメールアドレスをコピー&ペーストしている
Notion差し込みメール送信テンプレートなら、そんな悩みを解決します！
サブスクリプション不要!
もっと詳しく
1. はじめに
1.1 Notionとは何か
Notionは、ドキュメント管理、タスク管理、データベース、プロジェクト管理などの機能を統合した多機能なプロダクティビティツールです。
シンプルでありながら強力な機能を備えており、個人からチームまで幅広く活用されています。
Notionの特徴は、直感的でユーザーフレンドリーなインターフェースです。
ドラッグアンドドロップ操作で簡単にページを作成し、構成要素をカスタマイズできます。
また、テキスト、画像、ビデオ、埋め込みコンテンツなど、様々な種類のコンテンツを1つのページ内で扱うことができます。
さらに、Notionはデータベース機能を備えており、表形式でデータを管理し、フィルタリングやソートを行うことができます。
この機能により、動的なコンテンツを持つウェブサイトの作成が可能です。
1.2 Notionでホームページを作成するメリット
普段使い慣れているNotionでページを作成し、それをそのままウェブサイトにできます。
そのため、Notionに慣れている人にとってはとても簡単です。
1.3 Notionでホームページを作成するデメリット
外部ツールなども組み合わせるとかなり柔軟にウェブサイトを作ることができます。
ただし、本来Notionはホームページを作るためのツールではないため、運用面やデザイン面、機能面で不便を感じるところは出てくる可能性があります。
たとえばNotionで作成したホームページに決済機能を入れるなどは難しいです。
またデザインもある程度柔軟に作ることはできますが、動きの多いおしゃれなウェブサイトを作ることは難しいです。
また、PC用のホームページは簡単に作れるのですが、スマホでもきれいに表示できるページを作るには少し工夫が必要です。
簡単に始められるのでまずはNotionで始めて、物足りなくなってきたら他のツールに移行しても良いかもしれません。
2. Notionでホームページを作成する主な方法
Notionでホームページを作成する主な方法は、Notionの機能のみを使用する方法と、外部サービスを利用する方法の2つがあります。
それぞれの方法について詳しく見ていきましょう。
2.1 Notionの機能のみを使用する方法
Notionには、ページを公開する機能があります。
ページを作成して、公開するだけでホームページとして使うことができます。
この方法は、Notionの機能のみで完結するため、特別なスキルや外部ツールを必要とせず、比較的簡単にホームページを作成できます。
ただし、デザインのカスタマイズ性や機能面での制限があることに注意が必要です。
2024年6月に、Notionサイトという機能がリリースされました。
これによりNotionの機能のみで、今まではできなかった以下のことができるようになりました。
- カスタムドメインの設定
- ヘッダーのカスタマイズ
- Googleアナリティクスの設定
2.2 外部サービスを利用する方法
これらのツールを使うとホームページ作成に便利な様々な機能がついてきます。
以下は一例です。
-
デザインのカスタマイズ
よりおしゃれなデザインにすることができます。
CSSを追加し独自のデザインにすることもできます。 -
SEO強化 SEO=Googleなどの検索結果の順位を上位に上げるための対策
-
表示速度改善
Notionのページは表示速度が重いときがあります。
superやwraptasはホームページに特化しているため、ページを素早く表示することができます。
ページ速度はSEOのためにも重要です。 -
HTML追加
HTMLをページに追加できます。
そのためGoogleアナリティクスやヒートマップツールなどの外部ツールを追加することができます。
3. NotionでホームページやWebサイトを作成するべきかどうかの判断基準
Notionは、シンプルで直感的な操作性と、データベース機能による動的コンテンツ管理が特徴のツールです。
低コストでホームページを作成できますが、一方で制限もあります。
ここでは、Notionでのホームページ作成に向いているケースと向かないケースを見ていきましょう。
3.1 Notionでのホームページ作成に向いているケース
以下のようなケースでは、Notionを使用してホームページを作成するのに適しています。
-
個人ブログや小規模ビジネスのウェブサイト
- シンプルな構成のウェブサイトで、更新頻度が高くない場合に適しています。
- ブログ記事などの動的コンテンツを簡単に管理/編集できます。
-
ポートフォリオサイトやプロフィールページ
- 個人の実績や経歴を紹介するためのウェブサイトに適しています。
- Notionのデザインテンプレートを活用し、視覚的に魅力的なポートフォリオを作成できます。
-
イベントやキャンペーンの告知ページ
- 期間限定のイベントや、キャンペーンの告知ページを作成するのに適しています。
- Notionのテンプレートを使用し、短時間で魅力的なランディングページを作成できます。
3.2 Notionでのホームページ作成が向かないケース
一方で、以下のようなケースでは、Notionでのホームページ作成は適していない可能性があります。
-
大規模で複雑な構造のウェブサイト
- 多数のページやセクションを持つ大規模なウェブサイトには、Notionは適していません。
- 複雑なナビゲーション構造やカスタム機能の実装が必要な場合、他のツールを検討する必要があります。
-
Eコマースサイトやオンラインストア
- 商品の販売や決済機能を必要とするウェブサイトには、Notionは適していません。
- 専用のEコマースプラットフォームやショッピングカートシステムの使用を検討する必要があります。
-
高度なデザインのカスタマイズが必要なサイト
- ユニークなレイアウトやインタラクティブな要素を必要とするウェブサイトには、Notionは適していません。
-
特定の機能（会員登録、決済システムなど）が必要なサイト
- 会員登録や決済システムなど、特定の機能を必要とするウェブサイトには、Notionは適していません。
- 専用のプラグインやAPIの統合が可能な他のプラットフォームを検討する必要があります。
3.3 Notionでホームページを作成する際の代替選択肢
Notionでのホームページ作成が向かないケースでは、以下のような代替選択肢を検討することができます。
-
WordPressなどの従来のCMSを使用する
- 大規模なウェブサイトや、カスタム機能が必要な場合に適しています。
- 豊富なプラグインやテーマを活用し、柔軟にウェブサイトを構築できます。
-
Wixなどのウェブサイトビルダーを使用する
- デザインのカスタマイズ性が高く、ドラッグアンドドロップ操作で簡単にウェブサイトを作成できます。
- Eコマース機能やブログ機能など、様々な機能を統合できます。
-
Webデベロッパーにカスタムウェブサイトの開発を依頼する
- 完全なカスタマイズが必要な場合や、特殊な機能を実装する必要がある場合に適しています。
- 専門的な知識を持つデベロッパーが、要件に合わせてウェブサイトを開発します。
Notionでホームページを作成するかどうかは、ウェブサイトの目的や必要な機能、デザインの要件などを考慮して判断する必要があります。
Notionに適したケースであれば、シンプルで直感的な操作性を活かし、低コストで魅力的なホームページを作成できます。
一方、Notionの制限がプロジェクトの要件に合わない場合は、他のツールやプラットフォームを検討することが重要です。
自分のニーズに合ったホームページ作成方法を選択することで、費用対効果高く目的を達成することができます。
4. Notionでホームページを作成した事例紹介
みんなのマーケット
| 利用ツール | Notion |
| 種類 | コーポレートサイト |
サイバーエージェントの採用サイト
| 利用ツール | Notion |
| 種類 | 採用サイト |
Wraptas
Notion用ホームページ作成ツールのWraptasのランディングページです。
このページ自体がWraptasを使って作成されています。
| 利用ツール | Notion, Wraptas |
| 種類 | ランディングページ |
株式会社HOKUTO
株式会社HOKUTOのコーポレートサイトです。
Notionでもここまでできるのかと驚くようなきれいなサイトです。
ただし、このレベルにするには、ウェブデザイナーさんに協力してもらい、JS/CSSをいれる必要があると思います。
| 利用ツール | Notion, Wraptas |
| 種類 | コーポレートサイト |
Super
Notion用ホームページ作成ツールのSuperのランディングページです。
このページ自体がSuperで作成されています。
| 利用ツール | Notion, Super |
| 種類 | コーポレートサイト |
Ult
Superで作成されたSuper用のテンプレートサイトです。
| 利用ツール | Notion, Super |
| 種類 | テンプレートサイト |
5. Notionサイト、Super、Wraptasの比較
5.1 概要
公式のNotionサイトというNotionページをWebサイトとして公開するための機能があります。
ただし、SuperやWraptasなどの外部ツールを使わなければできないこともあります。
それぞれを比較し、用途ごとにどれを使うのが良いかを説明します。
SuperもWraptasもNotionのページを本格的なウェブサイトに変えるためのツールです。
デザインを自由に変更したり、検索エンジン最適化（SEO）を改善したりできるので、ウェブサイトとしての機能が充実します。
それでいて、Notionのシンプルで柔軟な特徴はそのまま活かせます。
Notionをコンテンツ管理システム（CMS）として使いながら、SuperやWraptasを使えば、プロ並みのウェブサイトを作ることができます。
5.2 機能面での比較
デザインのカスタマイズ性
SuperもWraptasもCSSを使って自由にデザインを変更することができます。
SuperはCSSを書かなくても管理画面からある程度デザインを変更することができます。
Notionサイトは、CSSなどは利用できません。
ヘッダーなどを一部変更することは可能です。
CSSやJavascriptを多用するとCSS、Javascriptの知識がない人が、ページを更新するのが難しくなってしまいます。
例えばページに何か要素を追加して、表示が崩れてしまっても、CSSの知識がないため直し方がわからないなどです。
CSSやJavascriptの知識がない人でも更新できるようにしたい場合は、あえてNotionサイトでできる範囲でデザインするというのも一つの手だと思います。
SEO対策
Super、Wraptasはどちらも特に変わらないと思います。 Notionサイトについては、URLがランダムな文字列になってしまいます。 ページの内容に合わせたURLにすることができないので若干SEO的には不利かもしれません。
フォーム機能
ウェブサイトには、必須になるお問い合わせフォームですが、Notionの標準機能では提供されていません。
また、SuperやWraptasにもフォーム機能はありません。
ただし、Googleフォームやその他のフォーム作成サービスを利用して、ウェブサイトにフォームを設置することができます。
Notionで作成したウェブサイトにフォームを設置するのであれば、Notion専用のフォーム作成サービスがおすすめです。
5.3 使いやすさと学習コスト
Notionサイトは、Notionの公式機能で外部ツールを使う必要がないため、とても簡単です。
SuperとWraptasを比較するとSuperのほうが高機能です。UIも洗練されていて使いやすいと思います。
デザインもCSSなしで管理画面から変更できる部分がSuperのほうが多いです。
他にも使ってみるとわかる様々な使いやすさがあります。
Wraptasは日本製なので、システムも日本語対応しており、使い方ガイドなども日本語です。
また問い合わせも日本語でできます。
Superよりも機能が少なくシンプルな分、IT知識が少ない方にとっては使いやすいと思います。
5.4 価格とプラン比較
日本製のWraptasは円安の影響もあり、とても安いです。
細かいところで言えば、Superのほうが高機能ですが、基本的な機能はどちらもあまり変わりません。
| Notionサイト(無料) | Notionサイト(有料) | Wraptas | Super (Free) | Super(Personal) | Super(Pro) | |
|---|---|---|---|---|---|---|
| 金額 | 0円 | $10 | ￥1078/月 | 0円 | $12/月 | $22/月 |
| カスタムドメイン | ❌ | ✅ | ✅ | ❌ | ✅ | ✅ |
| CSS追加 | ❌ | ❌ | ✅ | ❌ | ✅ | ✅ |
| HTML挿入 | ❌ | ❌ | ✅ | ❌ | ✅ | ✅ |
| ブランディング削除 | - | - | ✅ | ❌ | ✅ | ✅ |
| SEO対策 | ❌ | ❌ | ✅ | ❌ | ✅ | ✅ |
| Notion自動更新OFF | - | - | ✅ | ❌ | ❌ | ✅ |
$10=1600円くらい(2024/07時点)
Notionサイトにカスタムドメインを使う場合、Notionの有料プランに加入し、追加のカスタムドメイン機能をプランに追加する必要があります。
つまり、有料プラン + カスタムドメイン機能料金となります。
用語説明
ブランディング削除
無料プランの場合、Made With Superなどのブランド名が表示されます。
これが削除されます。
Notion自動更新OFF
Notionのページは自動で保存されるため、Notionページの編集中にウェブサイトに変更内容が反映されてしまう場合があります。
自動更新をOFFにすることでこれを防ぐことができます。
料金補足
料金は1サイトあたりの金額です。
ホームページを２つ運用する場合は、2倍の料金がかかります。
Superの料金は年間契約した場合の、月額料金です。月額契約の場合+30%くらいの料金になります。
Wraptasは年間契約プランはありません。
5.7 Notionサイト、Super、Wraptasの比較まとめ
以下の方はNotionサイトが良いと思います。
- 簡単さ重視
- 値段はそこまで気にしない
以下の方はWrapasをおすすめします。
- CSSやJavascriptを使って、デザイン性を高めたい
- SEOは大事
- 価格はできるだけ抑えたい
Superのほうが高機能ですが、Wraptasも必要十分な機能が揃っていて価格も安いので、あまりSuperを使った方が良いケースは少ないかと思います。
カスタムドメインの設定が不要な場合は、Notionの無料プランでもページの公開は可能です。
6. Wraptasでホームページを作る方法
では、実際にWraptasでホームページを作る方法を紹介します。
-
Notionでホームページを作成
まずはNotionでページを作成してください。
あとからでも変更できるのでざっくりで大丈夫です。
今回は以下のページを使って説明します。
NotionEasyFormヘルプセンター -
Wraptasに会員登録
-
新規サイト登録をクリック
-
サイトID, サイト名, NotionページのURLを入力し、登録するをクリック
この時点でページがホームページとして公開されます。
とても簡単ですね。
あとはカスタムドメインの設定やデザインの変更をすれば完了です。 -
デザインの変更
デザインの変更するには、サイトデザインの編集ボタンをクリックしてください。
デザインの変更機能についてよく使うものを紹介します。
-
ヘッダーへ検索ボタンを追加する
有効にするとページの右上に検索ボタンが追加され、ページ内検索ができるようになります。
-
追加CSS
ここにCSSを追加することによって、デザインを自在に変更することができます。
コピペで使えるCSS集も準備されていて簡単にデザインの変更ができます。
-
HTML直接追記
Googleアナリティクスなどを追加したい場合はここにタグを入れることができます。
-
-
パスの変更
デフォルトだとトップページ以外のページのパスは、意味のないランダムな文字列になってしまいます。
例えば、トップページのURLは、https://helptest.wraptas.siteですが、クイックスタートガイドなどのページ内のリンクをクリックするとURLは以下のようになっています。
https://helptest.wraptas.site/d8690171cc0842f19f0a2d6867840497
問題はないのですが、見にくいのとSEO的にも以下のようなURLになっている方が望ましいです。
https://helptest.wraptas.site/quick-start-guide
Wraptasではこれを変更することができます。
手順- ページ設定をクリック
- 変更したいパスのパーマリンクボタンをクリック
- 任意のパスを設定し、保存するをクリック
これで、クイックスタートガイドが理想のURLで表示できるようになります。
ここに表示されるリンクは、アクセスがあったページのみです。
表示されていないリンクは、パーマリンクを追加するから追加できますが、先にすべてのページにアクセスしておくほうが簡単なのでおすすめです。また、編集ボタンを押すと、ページのタイトルや説明文も変更できるためこちらも設定しておくと良いと思います。
説明文はSEOにはそこまで効果ないと思うので個人的にはいれなくても良いかなと思います。 - ページ設定をクリック
-
カスタムドメインの設定
デフォルトのURLは、xxx.wraptas.siteになります。
xxxの部分は、先に登録したサイトIDが入ります。
ホームページのURLを会社のドメインなどにする場合はこのカスタムドメインの設定が必要です。
手順-
ドメイン登録サービス
ドメインをお持ちでない場合は、お名前.comやムームードメインなどでドメインを購入しましょう。
ドメインの登録方法はここでは説明しません。各サービスサイトの手順に従ってください。
ドメインの準備ができたらDNS設定でAレコードを追加します。-
ドメインのDNS設定を行う(お名前.comなどのドメインを購入したサイトで実施)
お名前.comの場合は、以下の手順で設定できます。- 管理画面にログイン
- DNS設定/転送設定
- 対象のドメインをチェックし、次へをクリック
- DNSレコード設定を利用するをクリック
- 以下のようにAレコードを設定し追加をクリック。
- 確認画面へ進むをクリックし、案内に従い登録を完了する
これでドメインがwraptasのサイトを向くようになります。
-
-
Wraptas
- 独自ドメイン設定ボタンをクリック(Wraptas)
- ドメイン名を入力して、ドメイン登録を申請するをクリック
Aレコードは反映されるまで時間がかかる場合があります。
もし設定後にカスタムドメインでページが表示されない場合は、1~2日まつと表示されるようになる可能性があります。
しばらく待っても表示されるようにならない場合は設定が間違っている可能性があるのでAレコードの設定が正しいか確認しましょう。
-
これで設定は以上です。とても簡単にカスタムドメインでホームページを作成することができました!
補足
Notion側でページを編集するとWraptasのサイトにも自動で反映されます。
ただしキャッシュがあるので、すぐには変わりません。
以下を実行すると、すぐに変更を反映することができます。
- サイトデータ編集をクリック
- 高度な設定をクリック
- サイトのキャッシュを削除をクリック
7. まとめ
Notionを使うと簡単にページの作成、公開ができます。
さらにSuperやWraptasを使うと、カスタムドメインの設定などさまざまなホームページに必要な機能が使えます。
とても便利なので一度試してみることをおすすめします。