cover image

Anotionの使い方 / はじめての方へ

1. アカウント登録

Google アカウントかメールアドレスでの登録が選べます。
メールアドレスログインの場合にはメールアドレスの確認が必要です。登録後にメールアドレスへ確認メールが届くので、それを開封後&確認URLへアクセス後に再度サイトへアクセスし登録メールアドレスでログインしてください。
 

2. 決済情報の登録

Stripeを使って決済情報を登録することでサービスを利用できます。Stripeでの決済登録画面に遷移するので、クレジットカードかGooglePay等の決済情報の登録をお願いします。
登録後トライアル期間の30日が終了したタイミングから月額利用料が開始します。(その際のメール等でのお知らせ機能はまだできていないので、ご自身でリマインドをお願いします。)
 

3. サイト作成

決済情報を登録したらサイト作成が行えます。現在は1アカウント1サイトのみ作成可能です(将来的にはアカウントあたりの保有可能サイトを増やしていく予定です)。
 

3.1 サイトID登録

登録時にはサイトのIDを決めて下さい。これは後から変更できません。入力後利用可能かどうかチェクして問題なければ登録可能です。
IDが blog の場合 blog.anotion.so というドメインが割り当てられます。
 

3.2 トップページへ表示するNotionページの登録

TOPページに表示するNotionのURLを入力してください。
URLはNotionで作成した記事右上のShare(スマホアプリの場合は右上メニュー)を押して「Share to the web」をONにして発行できるURLになります。
上記のようなURLをそのまま入力してください。
notion image
記事は公開状態でなければAnotion上でも表示出来ないのでご注意ください。
登録が完了すると、設定したID.anotion.so というURLでアクセスができるようになります。
404ページの場合上記URLが間違っているか、公開設定になっていない可能性があります。確認してどちらも問題ないのに404ページになってしまっている場合にはお問い合わせください。
 

以上でサイトを作成しての最低限の設定はここまでです、続けて見た目をカスタマイズするなどの追加の機能の説明に入ります。
 

4. サイトデータ編集

サイトが作成できるとダッシュボードにサイト一覧が表示されるようになると思います。
そこから「データ編集」ボタンを押すとサイトの設定が追加出来ます。
 

4.1 Google Analytics設定

自サイトにGoogle Analyticsを埋め込む事ができます。Google Analyticsで発行したトラッキングIDを入力してください。
notion image
 

4.2 ヘッダー上のサイト名の遷移先URL

サイト名はデザイン編集画面で設定できますが、ここではサイトヘッダー部分をクリックした際に遷移するサイトのURLを設定出来ます。
設定がなければサイトトップへ遷移します。
 

4.3 フッター設定

全ページの下部にフッターとして表示する記事を設定できます。TOPページへ設定したものと同じ用に公開設定にしたNotionページのURLを入力してください。
 

4.4 パーマリンク設定

設定したパーマリンクにアクセスされた際に表示する記事を指定できます。
設定したIDのページにアクセスがあった場合には設定したパーマリンクへリダイレクトします。
 

5. デザイン編集

ダッシュボードで「データ編集」ボタンを押すとサイトのデザインに関する設定が追加出来ます。
 

5.1 サイト名設定

ヘッダーへ表示する名称が変更できます。また、ここで設定するとサイト名として利用されます。
notion image
 

5.2 サイトアイコンURL設定

サイトのFaviconや、ホーム画面に追加する際に利用されるアイコンを設定出来ます。
画像を直接アップロードする機能はまだありませんので、ご自身のNotionに画像をアップロードしたURLを利用をお願いします。
 
こちらに画像アップロード方法を記載しています。
 

5.3 サイトロゴ画像URL設定

ヘッダーでサイト名の代わりに表示される画像です。 こちらを設定すると5.1で設定した名称は表示されませんがサイト名としてSNSシェア時などに利用されます。
 

5.4 SNSシェアボタンの表示

Twitterボタンを記事下に配置するかどうかを設定出来ます。
notion image
 

5.5 CSS編集

直接追加するCSSを編集出来ます。ライブプレビューや、クラス名一覧機能は準備中です。
こちらはサンプルとしてCSSファイルですが、内容をコピーして入力していただければ同じように適用されます。ご自由にお使いください。
また、そのまま使いたい場合には次の追加CSS欄に直接入力して頂いても大丈夫です。
 

5.5 追加CSS URL指定

ここで追加したURLを直接サイトで参照させられます。こちらでGoogle Fontsなどを指定し、5.5 CSS編集でフォントを指定して利用することが出来ます。
 

6 独自ドメイン設定

ダッシュボード下部の「独自ドメインを申請する」から設定画面を開けます。
 
ご自身のドメインのDNS設定へそちらのデータを設定後、Discordやメールなどで運営へ連絡してください。(フォームは設ける予定です。)
 
管理画面の使い方は以上です。次にページ追加などの機能について説明します。
 

7 ページ追加

Anotionではトップページに設定した記事と同じワークスペースで、なおかつ公開状態になっている記事であればサイト作成をした時点で表示することが出来ます。
トップページに設定したページの配下にページを作成すれば、そのページリンクが自動で挿入され、Anotionのページ上でもNotionと同じように遷移することが出来ます。
notion image
 
下層ページ以外でも、
NotionでのシェアURLが上記のようなURLの場合
のような形URLを修正していただければ、自動で
にリダイレクトし、作成されたサイトが閲覧できます。
 
4.4 のパーマリンク設定で設定してある場合には、さらにそのURLにリダイレクトします。
 

困ったときには

困ったときのサポートはDiscordで質問するか、メールでお気軽にお問い合わせください!
疑問・質問・ご要望、何でも大歓迎です!一緒により良いサービスにしてければと思っております!