NotionとWraptasでWEB業務マニュアルを作成してみた

概要

お客様からの要望で（弊社が納品したシステムの）WEB業務マニュアルを作成することになったのですが、私自身は非エンジニアなのでコーディングには少し抵抗がありました。

Wordpressも検討したので軽く調べてみたところ学習コスト高そう...

という私でも簡単にマニュアル作成できたので紹介してみようと思います。

使ったサービス

Notion

https://www.notion.so/ja-jp

Notion（ノーション）とは、メモやタスク管理、Wiki、データベースなどさまざまな機能を一元的に使うことができるクラウド型のサービスです。
マニュアルに載せるコンテンツはNotion上に書いていきます。

Wraptas

https://wraptas.com/

Wraptas（ラプタス）とは、Notionを読み込ませてWEBサイトっぽい見た目にカスタマイズして公開できるサービスです。
CSSを適用することもできるのでかなり柔軟にカスタマイズできます。ちなみに私はChatGPTにCSSを書いてもらいました。

手順

以下の通りです。

1. Notionでコンテンツを作成する
2. Notionの共有URLをWraptasに登録する

これだけで完成です。
あとは必要に応じて、コピペで使えるサンプルCSS集を見ながらChatGPTに頼めばいい感じの見た目にできます。

テンプレとしてデザインテーマも用意されているので、CSSを全く書かなくてもなんとかなります。

詳しいはじめ方は公式ドキュメントを参照いただくとして、以降ではマニュアル作成に必要な機能に絞って紹介していきます。

Notionのページ構成を決める

Notionではページを階層化して作成でき、ドラッグ&ドロップで別の階層に移動させることもできます。

私はTOPページに複数のサブページをぶら下げる形で作成しました。TOPページをWraptasに読み込ませればぶら下がっている全ページにカスタマイズ設定が適用されます。

https://www.notion.so/ja-jp/help/create-a-subpage

Notionでコンテンツを書く

Notionでは基本的にMarkdown記法が採用されていますが、ページ内に/を入力するとショートカットの補助が出てくるのでMarkdown記法が使えなくても問題ないです。
最低限以下のことができていれば見やすいマニュアルになると思います。

• /#, /##, /### で見出し1〜3を表示して章立てする
• /calloutでコールアウトを表示して注意事項や補足を目立たせる
• /pagelinkで他の関連するページへの動線を作る
• 画像や動画など直接アップロード・コピペして表示する

また、「見出し」や「コールアウト」に対してCSSを適用できるので、後から見た目を整えたい場合はこの時点で綺麗に作っておくことをオススメします。

https://www.notion.so/ja-jp/help

Wraptasでサイトデザインを設定する

機能はたくさんありますが、マニュアルとして必要そうな機能・設定項目だけピックアップすると以下の通りです。

• 独自ドメイン設定
• パスワード設定
• パンくずリスト表示
• アイコン・ファビコン設定
• 検索フォーム追加
• パーマリンク設定
• オリジナルヘッダー・フッター追加
• HTML追加、CSS適用

設定画面にも説明がびっしり書いてあるので（見にくかったけど）あまり迷わなかったですし、もし迷っても公式ドキュメントがきちんと整備されていた点が良かったです。

良かった点

• すぐ公開できる
  • Notionさえ更新すれば（少しラグがありますが）すぐに反映されます
  • Notionデータ自動更新をOFFにしていれば公開中のマニュアルに影響がないよう編集することもできます
• レスポンシブ対応している
  • 設定画面のプレビュー機能でスマホ、タブレット、PCの３パターンで確認することができます
• 作成・更新が簡単
  • 普段からMarkdownでドキュメント作成している私にとっては書くこと自体にハードルがなかったので楽でした
  • 更新も容易なのでメンテしやすい点も良いと思います
• 埋め込みが優秀
  • WEBマニュアルとは別に動画マニュアルをyoutubeにアップしていたのですが、URLを貼るだけでページ上で再生できました
  • Google Drive や Google Map なども埋め込みできるようです

微妙だった点

• 埋め込んだファイルをダウンロードすると変な名前になる
  • PDFやExcelなどページに直接アップロードしたファイルを、マニュアルの閲覧者がダウンロードすると謎の文字列に変換されてしまいます
  • サポートに問い合わせましたが、2023/6時点では未対応だそうです
  • zipファイルをアップすると、zipファイル自体は謎の文字列ですが解凍すると正しいファイル名になったので一応回避できました
• CSSのセレクタが独特
  • 例えば「見出し1」の場合h1ではなくnotion-h1など
  • 公式ドキュメントに載ってないものもあった（気がする）ので途中で詰まりました
• テンプレのテーマがあまりイケてない
  • CSSなしでもテンプレのテーマを使えば手間なくデザインを適用することができますが、こだわろうと思ったらCSSは必須かもしれないです

まとめ

正直思ったほど簡単ではなかったですが、比較的コスト低めで作成できたのではないかなと思います。
何よりメンテの手間が少ないというのが個人的には一番良かった点かもしれないです。マニュアルは一度作ったら終わりではなくシステムの拡張と一緒にメンテしないといけないので、あんまり面倒じゃないなと思えるだけでハードル下がりますし。

これからWEB業務マニュアル作成しなきゃいけない人の参考になれば幸いです。