企業サイトを作りたいけど、Webサイトの専門知識やコストがネックになっていませんか？
そこでおすすめなのが、Notionを使ったWebサイト制作です。
この記事を読めば、実例を参考にしながら、おしゃれなサイトを作る具体的な手順から注意すべきポイント、運用方法まで全てが分かります。
専門知識は不要です！
Notionと便利ツールを使いこなし、低コストかつスピーディーに魅力的な公式サイトを完成させましょう！
- Notion歴4年
- テンプレート作成数：22個
- テンプレート総DL数：10,000～
- Notionブログ：月間10,000PV～
- Notion構築代行：⭐5.0継続中！
Notionの語りつくせない魅力をブログで全て伝えるのが私の目標です！
＼ 最短1か月のスピーディー納品！／
Notionで企業サイトを作るのがおすすめな理由
「制作会社に頼むと費用がかさむし、自分で作ろうにも専門知識が必要で、なかなか一歩を踏み出せない…。」
そんな風に感じていませんか？
実は、Notionを使えば、驚くほど手軽に、そしておしゃれな企業サイトが作れてしまうんです。
ここでは、なぜ今、多くの企業や個人がWebサイト制作にNotionを選んでいるのか、その具体的な理由4つのポイントに絞ってご紹介します。
ノーコードで直感的にサイトを作成できる
Webサイト制作と聞くと、HTMLやCSSといった専門的なコードを思い浮かべるかもしれません。しかし、Notionならプログラミングの知識は一切不要です。
Notionはブロック単位でレゴのようにページを作成することができます。
テキストや画像、データベースを組み合わせていくことだけで綺麗なページが作成できます。
直感的にページを作成できるので、コーディングの知識なしで完結します。
低コストかつスピーディーに作成可能
従来のWebサイト制作では、サーバー契約やドメイン取得、そして何より制作会社への依頼費用など、多くのコストと時間が必要でした。
Notionを使えば、これらの課題をスマートに解決できます。
Notionのページ公開機能自体は、無料プランから利用可能です。
さらに、Notionと連携する外部ツール（WraptasやSuper）を使えば、独自ドメインの設定やおしゃれなデザインに仕上げることが可能です。
何より、アイデアが浮かんだその日にページを作成し、すぐに公開できるスピード感は変化の速いビジネスシーンにおいて大きな武器となるでしょう。
| 制作方法 | 初期費用目安 | 公開までの期間目安 | 専門知識 |
|---|---|---|---|
| Notionサイト | 0円～数千円/月 | 最短1日～ | 不要 |
| WordPress等で自作 | 数万円～ | 数週間～数ヶ月 | 多少必要 |
| 制作会社へ依頼 | 数十万円～数百万円 | 数ヶ月～ | 不要 |
専門知識はいらずNotionから簡単に運用・管理が可能
Webサイトは作って終わりではありません。
むしろ、公開してからが本当のスタートです。新しいお知らせの掲載や、サービス内容の更新、ブログ記事の追加など、継続的な情報発信が欠かせません。
この「運用・管理」のしやすさこそ、Notionが優れている点です。
Webサイトの情報を更新したいとき、特別な管理画面を開いたり、FTPソフトを使ったりする必要はありません。
ただ、いつものNotionページを編集するだけ。
変更内容は公開Webサイトにリアルタイム反映されるので、誰でも気軽にそして迅速にサイトを最新の状態に保つことができます！
①低コスト ②運用が楽 ③即日～数日で完成
素晴らし過ぎます…！
外部ツールを使うことでNotionサイトがおしゃれに変身
Notionで作成したページは「Notion感」が残ってしまいます。
しかし外部ツールのWraptasやSuperなどを使用すれば、WixやWordpressで作ったようなおしゃれなページに一変します！
Notionサイトをおしゃれなページにするツールの種類はこんな感じです⇩
| ツール名 | 特徴 | どんな人におすすめ？ |
|---|---|---|
| Wraptas（ラプタス） | 日本の企業が開発したツールで、管理画面やサポートが日本語なので初心者でも安心です。 | 初めてNotionでサイトを作る方や、日本語のサポートを重視する方、企業の公式サイトを作りたい方。 |
| Super（スーパー） | 世界的に利用者が多い人気のツールです。カスタマイズの自由度も高いです。 | 表示速度を重視する方や、海外のトレンドを取り入れたい方、ポートフォリオサイトやブログを作りたい方。 |
| Potion（ポーション） | 比較的リーズナブルな価格で利用できるのが魅力です。 シンプルな機能で手軽に始められます。 | コストを抑えたい方や、まずは気軽に試してみたい個人ブログやポートフォリオサイトを作りたい方。 |
私のおすすめはWraptasです！
日本語のサポートが手厚くCSSコード例も豊富なのでとても良いです！
実例！Notionで作成されたおしゃれなサイト事例3選
NotionでWebサイトが作れると言われても、具体的にどんなサイトが出来上がるのか、いまいちイメージが湧かない方も多いのではないでしょうか。
そこで、実際にNotionで作成された素敵なWebサイトの事例を3つご紹介します。
きっと「こんなサイトも作れるんだ！」と、あなたのサイト作りのヒントが見つかるはずですよ。
1. 株式会社マテリサグループ様 コーポレートサイト
実はこちらは私がNotion構築代行サービスで作成したページです。
完全0からNotionでサイトのベースを作成し、後で紹介するWraptasというツールでWixやWordpressのようなおしゃれなデザインに仕上げました。
約1か月ほどでこれほど整ったコーポレートページが完成します。
更に情報の更新もNotionから行えるので運用が非常に楽です。
私が提供するNotion構築代行サービスの詳細はこちら⇩
2. 株式会社HOKUTO様 コーポレートサイト
こちらも先ほどと同じくWraptasというツールで作成されたコーポレートサイトです。
Notionから作成されたとは思えない非常にスマートなデザインとなっています。
3. 株式会社JADE様 コーポレートサイト
会社概要や採用情報、ブログなど全て綺麗にまとめたコーポレートサイトです。
Notionのデータベースを活用してナレッジをWebサイトに公開されています！
白を基調としたクリーンな印象でとても見やすくまとまっています。
全てNotionサイトをCSSでおしゃれにするWraptasというサービスで制作されたものです。
Notion＋Wraptasだけでここまで綺麗なWebサイトができるのは驚きですよね。
しかもWraptasの月額料金は980円です！安い！！
NotionでWebサイトを作る前に知っておくべきこと
「よし、Notionでサイトを作ってみよう！」
その前に、いくつか知っておきたい大切なポイントがあります。
基本的におしゃれなサイトを作る方法は
①Notionでサイトのベースを作成
②WraptasやSuper等の外部サイトを使ってデザイン構築 です。
しかし、Notion標準機能でどこまでできるのか、注意するべき点はあるかを抑えておくだけで移行がスムーズになります。
注意事項をおさらいしたら、具体的にNotionでWebサイトを制作する方法をお伝えします！
Notion標準搭載の「Notionサイト」でできること一覧
まずは、Notionにもともと備わっている「サイト公開機能」で何ができるのかを見ていきましょう。
アップデートで「Notionサイト」という機能が強化され、以前よりも本格的なサイトが作れるようになりました。
その基本的な機能はこちらです⇩
| 機能 | できること・できないこと | 補足 |
|---|---|---|
| ページのWeb公開 | 可能 | 作成したNotionページをそのままWebサイトとして公開できます。 |
| 独自ドメインの設定 | 有料プランで可能 | フリープランでは「〇〇.notion.site」というURLになりますが、有料プランならオリジナルのドメインを設定できます。 |
| デザインのカスタマイズ | 一部可能 | ヘッダーやナビゲーションバーの追加、ライトモード・ダークモードの切り替えなどが可能です。 しかし、CSSを使った自由なデザイン変更はできません。 |
| SEO（検索エンジン最適化） | 基本的な設定のみ | サイトのタイトルや説明文の設定、検索エンジンへのインデックス許可（有料プラン）は可能です。 細かいメタタグ設定などはできません。 |
| アクセス解析 | Google Analyticsの連携が可能 | サイトにどれくらいの人が訪れているかなどを分析できます。 |
| パスワード保護 | 不可 | 標準機能ではページにパスワードをかけることはできません。 |
Webサイト公開はNotion標準機能かつ無料プランでもできますが、それ以上を求めると有料プラン以上が必要になります。
NotionをおしゃれなWebサイトにできるツール一覧
「もっとデザインにこだわりたい！」
「本格的なブログや企業サイトを作りたい！」
そんな方には、Notionと連携できる外部ツールの利用がおすすめです。
これらのツールを使えば、Notionの使いやすさはそのままに、まるでプロが作ったようなおしゃれで高機能なサイトが作れますよ。⇩
| ツール名 | 特徴 | どんな人におすすめ？ |
|---|---|---|
| Wraptas（ラプタス） | 日本の企業が開発したツールで、管理画面やサポートが日本語なので初心者でも安心です。 | 初めてNotionでサイトを作る方や、日本語のサポートを重視する方、企業の公式サイトを作りたい方。 |
| Super（スーパー） | 世界的に利用者が多い人気のツールです。カスタマイズの自由度も高いです。 | 表示速度を重視する方や、海外のトレンドを取り入れたい方、ポートフォリオサイトやブログを作りたい方。 |
| Potion（ポーション） | 比較的リーズナブルな価格で利用できるのが魅力です。 シンプルな機能で手軽に始められます。 | コストを抑えたい方や、まずは気軽に試してみたい個人ブログやポートフォリオサイトを作りたい方。 |
何度でも言いますが私のおすすめは国産のWraptasです！
Notionのプランによってカスタマイズ範囲が異なる
上で紹介した内容と少し被りますが、利用している料金プランによって使える機能が変わってくる点に注意が必要です。
特に、無料で使えるフリープランと有料プランとでは、サイトの「顔」とも言えるドメイン設定などに違いがあります。
「せっかく作ったのに、やりたいことができなかった…」とならないように、プランごとの違いをしっかり確認しておきましょう。
| プラン | サイト公開に関してできること |
|---|---|
| フリープラン | ・ページの公開 |
| プラスプラン以上（有料） | ・ページの公開 ・独自ドメイン、パーマリンクの設定 ・Google Analyticsの設定 ・サイトの簡易的なカスタマイズ ・SEOプレビューの設定 |
SEOプレビューとは
このようにWeb検索したときにどのように表示されるかを設定できます。
カスタムドメインの設定について
有料プランだと、「.notion.site」以前のドメイン名を自由に変更できます。
更に、「.notion.site」より後のパーマリンクも設定が可能です。
子ページにリンクを入れたい場合はそれぞれ手作業で入力する必要があります。
個人用のポートフォリオなど、URLにこだわらない場合はフリープランでも十分ですが、企業サイトとして信頼性を高めたい、あるいはブログのアクセスを増やしたいといった目的があるなら、プラスプラン以上へのアップグレードを検討しましょう。
Wraptasを使う場合はドメインを自由に設定できるので、ここはあまり気にしなくてOKです！
おしゃれなWebサイトにするにはCSSの知識が必要
Notionの標準機能や外部ツールのテンプレートを使うだけでも、ある程度整ったサイトは作れます。
ただ、「他のサイトと差をつけたい」「ブランドイメージに合わせて細部までこだわりたい」と思うなら、CSSという言語の知識が少しだけ必要になってきます。
CSSは、Webページの文字の色や大きさ、背景、レイアウトなどを指定するための言語です。
私もWraptasを初めて触った時はCSSの学習には苦労しました…。
CSSの知識がない方や、時間をかけたくない方は「プロに依頼」がおすすめです！⇩
Notion構築～Webサイト制作までお任せしたい場合はプロに依頼
この後で自分でWebサイトを構築する方法を解説しますが、こんなお悩みもでてくるはずです。
「毎日忙しくて、サイト制作に時間をかけられない」
「Notion自体も初心者だから、プロにまとめてお願いしたい」
そんな方の為にNotion構築代行サービスを始めました！
Notion初心者の方でも私が丁寧にヒアリングをして、納得のいくWebサイトを構築します。
コストを抑えながら運用しやすいNotionでサイト制作を行い方は必見です！⇩
＼ 最短1か月のスピーディー納品！／
簡単！Notionでおしゃれな企業サイトを作成する方法
「NotionでWebサイトを作ってみたいけど、何から手をつければ良いかわからない…」そんな風に感じていませんか？
Notionを使えば、驚くほど簡単なステップでおしゃれな企業サイトが完成します。
この章では、具体的な手順を3つのステップに分けて、初心者の方にも分かりやすく解説していきます。
ステップ1. NotionでWebサイトページのベースを作成
まずは、サイトの土台となるページをNotionで作成していきましょう。
普段Notionでメモを取ったり、タスク管理をしたりするのと同じ感覚で大丈夫です。
企業サイトに必要な「会社概要」「事業内容」「お知らせ」「お問い合わせ」といった項目を、見出しブロックを使って組み立てていきます。
以下のようにカラムなどを使って横2列にして画像とテキストを並べるとおしゃれに見えますよ！
ステップ2. NotionページをWeb公開
ページのベースが完成したら、次はいよいよWeb上に公開します。
まず、作成したページの右上にある「共有」ボタンをクリックし、次に「Webに公開」タブを選択します。
最後に「Webで公開」のスイッチをオンにすれば、あなただけのWebページのURLが自動で生成されます。
このURLにアクセスすれば、誰でもページを閲覧できるようになります。
公開設定には、検索エンジンへの表示を許可するオプションや、ページの複製や編集を許可するオプションなどがあります。
企業サイトとして公開する場合は、「ネット検索を許可」をオンにして、「テンプレートとして複製」をオフにしておきましょう。
この時点では、URLは「xxxx.notion.site」というNotionのドメインになり、デザインもまだNotionのシンプルな表示のままです。
しかし、これでWebサイトの土台は完成しました。
次のステップで、このページをさらにおしゃれなオリジナルサイトへと変身させていきましょう。
ステップ3. Wraptasでページをおしゃれに構築
このままだと「Notionで作りました感」が強いので外部ツールを使っておしゃれにします。
今回はWraptasを使った方法をご紹介します。
まずはWraptasでアカウントを作成しましょう。
その後、Web公開したページと紐づけます。
その後、「サイトデザイン編集」の項目からCSSを書いていきます。
基本的にHTMLを書く必要はないので、CSSだけでOKです！
CSSコピペ集も揃っているのでCSS初心者の方でも少しずつ学びながら覚えていけます。
Wraptas社のサポートは手厚く、問い合わせメールを送ればすぐに回答してくれます！ありがたい！
Notionで作ったWebサイトのおすすめカスタマイズ方法
Notionで作成したWebサイトは、少し手を加えるだけで、さらに便利で機能的なサイトへと進化させることができます。
「せっかく作ったサイトだから、もっと便利に、もっと効果的に活用したい！」そんな風に感じている方も多いのではないでしょうか。
ここでは、サイト訪問者との接点を生み出す「フォームの埋め込み」や、日々のサイト運用をぐっと楽にする「オートメーション機能」について、具体的な方法をご紹介します。
Notionフォームをサイト内に入れて活用
企業サイトにとって、お客様からの問い合わせや資料請求を受け付ける「お問い合わせフォーム」は欠かせない機能の一つですよね。
Notionフォームをサイトに入れることで、問い合わせ管理をNotionで一元管理できます。
やり方はシンプルで、Notionフォームで公開URLを取得し、リンクを「埋め込み」で貼り付けます。
これでNotionフォームの埋め込みはできました。
ただ、注意点が1つありWraptasで公開した場合「フォームの埋め込み」の形式に対応していないので「問い合わせる」というフォーム用のリンクに飛ぶボタンがでてしまいます。
どうしてもWebページ内だけで問い合わせフォームを完結したい場合はGoogle Formなどを活用しましょう。
Notion標準のオートメーションで自動化
Notionには「オートメーション」という自動化を作成できる機能があります。
これを使うことでよりWebサイト運用が簡単になります。
例えば、Webサイト運用では以下のような自動化が考えられます。
- 更新したら通知：特定の情報が更新されたらチームに通知が送られ確認漏れを0にする。
- ニュースの公開日を通知：ニュースやブログなど、下書きでためておいた記事の公開日になれば通知を送る。
これらの設定は、データベースの右上にある「⚡」アイコンから簡単に行うことができます。
ちょっとした工夫で運用の手間を大幅に省けます！
NotionでWebサイト制作をする際のよくある質問
NotionでWebサイト制作をする際のよくある質問をまとめました。
- サイト公開後にNotionページを更新すると、自動で反映されますか？
-
はい、Notion上で修正した内容はWraptas経由のサイトにも自動反映されます。
更新作業がシームレスで、運用コストが非常に低いのが特徴です。
- Wraptasで公開したサイトのURL構造はSEO的に問題ありませんか？
-
Wraptasを利用すると、独自ドメインや適切なURL設計が可能です！
サブディレクトリやページごとのスラッグもSEOに配慮した形で設定できます。
- カスタムドメインを設定したほうが検索順位に有利ですか？
-
はい。独自ドメインはブランド力や信頼性を高めるためSEOに有利です！
Wraptasでは簡単にカスタムドメインを設定できるのでおすすめです。
- Notionサイトをビジネス用途で使っても大丈夫ですか？
-
シンプルな企業サイトや採用ページ、ブログであれば問題なく利用できます！
ただしEC機能や複雑なカスタマイズが必要な場合は、Notion単体では限界があるため、用途を見極める必要があります。
まとめ
NotionでWebサイトの土台を作成して、Wraptasでおしゃれにデザインを整える方法について解説しました。
自分で1から作ることも可能ですが、全てやろうとすると時間と労力がかなりかかります。
Notionテンプレートクリエイターである私が、Notion構築からWebサイト構築まで一貫して行うことができるので、ご興味あればご連絡ください！
無料で相談、すり合わせ可能です！
＼ 最短1か月のスピーディー納品！／
コメント