Notionでサービス紹介のページを作ってみて、よかったこと、困ったこと。

J-Supe! 運営スタッフのIzumiです。少し前にはなりますが、「Notionがホームページ作成に使えるよ！」と知り合いの方に教えていただいたので、開発を進めているWebサービスの事前登録者募集用のページ（「J-Supe! のご紹介」）を作成してみました。（今はサービス紹介用としてTwitterなどにリンクを置いています。）

使い勝手が良く素晴らしいWebサービスだなと感じた一方で、困ったことも起きましたので自分の備忘録代わりに筆を執ろうかなと思い至りました。

Notionで、良かったこと。

私はシステム開発にあたり、主にデザイン（U I）を担当しています。本業は全く違うお仕事（心理職）なので大したことは言えませんが、開発に際してちょっと覚えたコードであったり、勉強したレイアウトの”いろは”のような知識がNotionでは簡単に活用できることに驚きました。普段なら長々コードを打ち込んで作っていくデザインですが、Notionでは「/」と打つだけでデザインの選択肢が出てくるんですよね。これが本当便利だなと。

簡単な例として、ウェブサイトのページタイトルをオレンジ色で作りたい場合、htmlとCSSを組み合わせて次みたいに書くことができます。（styleの直書きは本当はあまりしませんが…）

<h1 style="color:orange">こんにちは！</h2>>ページタイトル</h1>

覚えてしまえば何てことない文字列ですが、一つのページのデザインを作る上では、もちろんタイトル以外のコードもたくさん打ち込む作業が必要になります。例えば、文字や画像の大きさや間隔を変えたり、リンク先につながるボタンを作ったり…これが素人の自分は中々苦労しました。（今も、しています。笑）

一方でNotionでは、「/」と打つだけで下の画像みたいに候補が出てきます。

そして、テキストの色もこんな感じでリストアップされるので、簡単に選ぶことができます。

最終的には下の画像のような感じになりました。

いやほんと便利です。選択していくだけで済むので、いつもはPCをカタカタして進めている作業量がずいぶん減りました。Notionには他にも色々機能がありますが、個人的にはこのノーコード（というんでしょうか？）が何よりありがたかったです。

Notionで、困ったこと。

ページを作成する上でいくつか不便に感じたことはあります。例えば、画像の位置やテキストのレイアウト（細かい位置取りや特殊な見せ方をしたい時など）の自由度が下がってしまう部分でしょうか。ただ、一からホームページを作ったりするよりよっぽど楽ですし、Anotionのようにサイト作成の際に便利なサービスも出ているので、これからNotionでページを作りたい方は検討価値ありに思います。

ただ、それ以外に、というか何よりも困ったことは、見る人によっては文字化けするんですよね、Notion。Twitterで事前登録者募集を始めてすぐに「日本語が不思議」「読みにくいんですが…」「怪しいサイトかと思うくらいバグってます」というリプやDMを何通もいただきました。

スタッフの端末で表示テストはしていたのですが、しばらくは原因が分からず困りました。（苦肉の策で「Izumiは先日帰化したばかりの帰国子女なのでどうか大目に」とお願いする案も出ましたが却下されました。笑）

文字化けの原因は。

原因としては、Chromeブラウザによる自動翻訳機能だったようです。
Notionは英語のサイトとして判断されており、自動翻訳を有効化している場合は日本語で書いたページであっても自動で翻訳されてしまうため、変わった日本語で表示されるそうです。これは私の事前のリサーチ不足が原因でもありましたが、サービス開始の第一歩でしたので、かなり焦りました…。

これの対応としては画像のようにページ上に注意書きを入れたり、Twitterで拡散を行いました。しかし、わざわざ見に来てくださった方にひと手間かけさせてしまうのは、正直、かなりマイナスポイントであるよう思いました。

まとめ。

このように少し渋いNotionデビューとなってしまいましたが、実際、私のような素人でも十分良い紹介ページができたように思います。今回起きた問題ような注意点もありますが、今後に生かして行ければと。また、Notionを使ってホームページなどを作ろうとお考えの方の役にも立てば幸いです。先日帰国したばかりの拙文ではありましたが、ここまでお読みいただきありがとうございました。良かったら今回作りました「J-Supe!のサービス紹介ページ」もご覧いただけますとありがたいです。