フロントエンドの地獄
cover image
page icon

Notionで書いた内容がそのままWebサイトになるサービス #Anotion を作りました!

みなさんこんにちは@nabettuです

先日ツイートしましたが、ここんとこずっと作っていたAnotionというWebサービスをローンチしました🎉

何ができるサービス?

Notionで書いた内容がそのままWebサイトになるサービスです。ユーザーがログインして公開されている自分のNotionの記事を指定するだけで、リアルタイムに編集した内容がそのままWebサイトになります!

Notionを書いたらそのままWebサイトが作れるAnotion

Notionで書いてそのままシェア、とっても楽ですよね。 とはいえNotionの記事をそのまま公開す

Notionを書いたらそのままWebサイトが作れるAnotion site iconhttps://anotion.so
Notionを書いたらそのままWebサイトが作れるAnotion site cover image

なななんと!このブログ(nabettu.com)もそのAnotionで動いており、Notionのシェアページと違う点としては

  1. デザインもオリジナルのCSSで自由にカスタマイズ可能
  1. 記事ごとのパーマリンク(URL)の設定
  1. 独自ドメインの設定が可能
  1. GAが設置できて
  1. ヘッダーフッターを置く

などなどがあります!

でも、お高いんでしょう?

そうなんです。あまり安くはなくてすいません🙏

一ヶ月はトライアルとして無料で利用出来ますが、その後ははてなブログやペライチ等と同じ価格帯の月980円になります!

逆にブログやWebサイトのホスティングサービスとしては普通の値段です!

Anotionのめざすところ

私の人生のスローガンは 「ものづくりの楽しさをすべての人に」 です。ものづくり、楽しくないですか?私は大好きで、今後も一生なにかを作りながら生きていくと思っています。

そんな私が今まで作ってきたものはブログを書く際にアプリ紹介を楽にできるようにしたアプリーチというツールや、

アプリーチ

iPhoneアプリとAndroidアプリを同時に検索し、統合されたブログパーツを作成出来ます。

アプリーチ site iconhttps://mama-hack.com/app-reach/
アプリーチ site cover image

色々なジャンルで創作をする人がフォント選びで手間をなくすためのためしがき

ためしがき - 日本語のフリーフォントを検索できるサイト

日本語のフリーフォントを好きな言葉・文章で試せるサイト

ためしがき - 日本語のフリーフォントを検索できるサイト site iconhttps://tameshigaki.jp/
ためしがき - 日本語のフリーフォントを検索できるサイト site cover image

などなど、、、「発信をする人が楽になる」とか「ものづくりで困るポイントを減らす」ためのサービスを作ってきました。

(もちろん自分が面白いから作ったものもたくさんありますがw)

Notionというツールは文書を書きつつ、リンクを貼ったり画像を入れたり、リッチなテキストを書く上で非常に書きやすいツールです。

このツールと自分のサービス(Anotion)を組み合わせることで「発信までのハードルがとにかく低いブログサービス」「ドキュメントの編集から公開までのステップがとにかく楽」なサービスを提供していきたいと思っています。

私自身も今まで色々なブログサービスや自作ブログサービスを使って来ましたが、今の所公開までのステップが最も短く、カスタマイズ性もそこそこあり、スマホからも編集しやすい組み合わせになっていると思います。

ブログ以外にも、Webサービスなどのドキュメントなどに使えるサービスとなっています。こちらはプロフカードというサービスのよくある質問ページにAnotionを利用頂いています。

よくある質問

プロフカード に関するよくある質問やトラブルをまとめました! 質問 トラブル

よくある質問 site iconhttps://profcard.anotion.so/89d120e6dd2d4f2795ccdb961f9689bd

Anotionを使えば、こういったドキュメントページを自分でHTMLを書いてGitにPushしてデプロイして、、、というステップを飛ばして公開できます。そして自分のサービスのトーンに合わせて色味を調整する、サービスのサブドメインに配置する、などが可能になります。

このサービスを通じて「ものを作る人達が文章を公開することを楽にして、自分のものづくりに集中」していってもらえたら嬉しいと思って作っています。

サービスの今後の展望

  • 表示できるNotionのコンテンツを増やす(今はテーブルなどが表示できない)
  • サイト表示を早くする(SEO!)
  • デザインカスタマイズについて、GUIでスタイルを当てられるようにする(これが出来たら胸を張ってNoCodeだ!と言える気がするw)
  • メディアとして展開できる機能(WordPressを倒すぞ!)
  • デザインからテーマを選択したら適用される

などなど、既存のNotionページのシェア機能をより良く拡張しつつ、メディアとして展開していけるサービスにしていければと思っています。

技術的な話

技術書典で出した #個人Webサービスシステム構成事典に書いた内容ですが、システム構成はこのような形になっております。

notion image

ざっくりと説明すると

  • フレームワークはNext.js
  • 管理画面にMusubii
  • ホスティングはVercel
  • ユーザー・データ管理はFirebase
  • 記事管理はNotionから
  • 課金機能はStripe

を利用していて、詳しくはこのページに書いています。

Notionで書いた文章をそのままWebサイトにできるサービス Anotion

Notionで書いた内容がそのままWebサイトになるNoCodeサービスです。ユーザーがログインして

Notionで書いた文章をそのままWebサイトにできるサービス Anotion site iconhttps://nabettu.com/b396d9ce55524b599118adf6e5c5228e?a
Notionで書いた文章をそのままWebサイトにできるサービス Anotion site cover image

まとめ

以上、新しいサービスの紹介でした!

最後まで読んで頂きありがとうございます!

今後ももっといいサービスにしていきたいと思っていますので、もしよければお付き合いいただければと思います!

Notionを書いたらそのままWebサイトが作れるAnotion

Notionで書いてそのままシェア、とっても楽ですよね。 とはいえNotionの記事をそのまま公開す

Notionを書いたらそのままWebサイトが作れるAnotion site iconhttps://anotion.so
Notionを書いたらそのままWebサイトが作れるAnotion site cover image