こんにちは。あやおり子です。

今回はDocusaurusを利用してサイトを制作してみましたので、その感想を書いていきます。

実際に作ったToDOリストはこちらで確認ができますので、よかったらご覧ください。

この記事は感情ベースでの感想記事になります。実際に制作に利用したコマンドや仕様に関するまとめはDocusaurus制作サイトに記載に記載しています。

この記事におすすめな人
  • WEBサイト制作者の視点からDocusaurusの感想を知りたい
  • 手軽にWEBサイトを作るのにDocusaurusは向いているか知りたい人
  • Docusaurusのメリットとデメリットを知りたい人
あやおり子

私は、普段はWordPressでWEBサイト制作をしているWEBデザイナーです。転職活動のためにReact.jsを勉強中です。

Docusaurusのメリット

では、私が感じたDocusaurusのメリットを書いていきます。

1. めっちゃ構築が楽

とにかく構築がめっちゃ楽です!!!ターミナルでコマンド打つだけですぐにサイト制作ができます!

今回はGitHub Pagesで公開しましたが、ビルドしてFTPでサイトアップする仕様にも対応しているため、環境問わず使いやすいと思いました。

2. 同梱のチュートリアルや公式サイトがわかりやすい

サイトを構築すると、そのサイトの中には初期データとしてチュートリアルのページが登録されています。

このチュートリアルのページが、初めて触る人向けののシンプルな構成になってるのがありがたいと思いました。

Docusaurus同梱チュートリアル

一方で、公式の方に書いてあるドキュメントは、サイト制作者むけの内容となっており、オプションやカスタマイズ内容が記載されています。

Docusaurus公式Document

公式のドキュメントがチュートリアル扱いになっているサービスも多いので、書き分けてあるのは親切でいいですね。

3. 更新するとローカル環境で即時反映なのがいいね。

React.jsのフレームワークなので、更新するとローカル環境で即時反映なのが気持ちいいです。

WordPressなどのCMSでも出来ないことはないですが、一度保存してページが構築されるため、サーバーのスペックに大きく依存します。また、下書きと本番で混同しやすく、書き終わったと思ったら本番反映されてなかったなんてこともあったり。

4. シンプルなのがいいね。

markdownのファイルを追加するだけで、サイドメニューに項目が追加される、複数箇所更新する手間がかなり少なくて便利です。

目次も機能追加なしで自動生成してくれるので、WordPressのプラグインのように相性を心配する必要がありません。

5. 全ページReact対応!ページ単位のCSSも自由に指定可能

Docusaurusで表示されるMarkdownファイルは、MDXというMarkdownとReactのいいところどりしたファイルに変換されて表示されます。

そのため、ちょっと複雑なサイトを作りたいって思った時にも、対応することが可能。

もちろん、設定次第でページ単位の個別CSSも指定できるので、Reactが分からなくてもCSSで表示を変更することも可能。

API連携させるタイプのLPサイト集を作るのもいいですね。

デメリット

デザインの自由度がない

Docusaurusは自由にカスタマイズするというより、決まったフォーマットに乗っかることで楽に作れるというツールです。

なので、凝ったデザインにしたいとか独自の動きをつけたいとなると、途端に難易度が上がります。

WordPressのように、テンプレートを直接いじって内容をカスタマイズできるような仕様がないため、CSSでゴニョゴニョできる範囲はゴニョゴニョして、もしそれでも難しい場合は、React.jsでゴリゴリにカスタマイズする必要があります。

そのため、CSSに慣れていない人は、右上のお問合せボタンを目立たせるように設置するだけでも一苦労します。

ドキュメントサイトとして割り切って使うことをおすすめします。

ターミナル操作に慣れていない人は更新が難しい

DocusaurusはReactベースのフレームワークであるため、サイトの公開前にはビルドする必要があります。

そのため、ターミナル操作が必要になるため、CUI操作に慣れていない人は更新が難しいかと思われます。

なお、トップページもmarkdownに置き換えることもできるので、ターミナル操作に抵抗がなければ、デザイナーのようにReactがわからない人でもサイトを編集することもできます。

閲覧権限の調整が別途必要

Docusaurusそのものに閲覧権限を調整する機能がないので、限定公開などをしたい場合は、別途設定する必要があります。

もちろん、ログイン機能もないため、パスワード使って限定公開したい人とかは、別のサービスを使ったほうがいいかもしれません。

【まとめ】私が感じたDocusaurusの特徴

WEBデザイナーの私が感じた大きな特徴は

  • Reactベースでmarkdownを使って記事を作成できる
  • ターミナルでコマンド打って、必要十分な機能が揃っているサイトをサクッと構築できる。
  • Gitを使って記事の差分が取りやすい

というような点かと思いました。

向き不向きは激しい癖つよフレームワークかもしれませんが、向いている人にとっては、かなり使い勝手の良いフレームワークなのではないでしょうか。

ABOUT ME
あやおり子
特技はプログラミングのWEBデザイナーです。 WEB制作会社に勤めていた経験を生かして、 ちょっとマニアックな記事を作成しています。