<h2 id="%E3%81%AF%E3%81%98%E3%82%81%E3%81%AB">
<a class="header-anchor-link" href="#%E3%81%AF%E3%81%98%E3%82%81%E3%81%AB" aria-hidden="true"></a> はじめに</h2>
<p>優れたOSSのオンラインドキュメントは、大抵内容も素晴らしいのですがUXも素晴らしいと感じることが多いです。<br>
あの洗練されたUIをもつWebサイトはほとんどの場合、技術文書作成向けの静的サイトジェネレータが使用されています。</p>
<p>この記事では独断と偏見でおすすめの技術文書の作成に利用可能な静的サイトジェネレータを5つ紹介します。</p>
<h2 id="1.-docusaurus">
<a class="header-anchor-link" href="#1.-docusaurus" aria-hidden="true"></a> 1. Docusaurus</h2>
<p><span class="embed-block zenn-embedded zenn-embedded-card"><iframe id="zenn-embedded__0855259664fcc" src="https://embed.zenn.studio/card#zenn-embedded__0855259664fcc" data-content="https%3A%2F%2Fgithub.com%2Ffacebook%2Fdocusaurus" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://github.com/facebook/docusaurus" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://github.com/facebook/docusaurus</a></p>
<ul>
<li>公式ドキュメント: <a href="https://docusaurus.io/" target="_blank" rel="nofollow noopener noreferrer">https://docusaurus.io/</a>
</li>
</ul>
<p>DocusaurusはMeta社のチームが開発しているReactベースの静的サイトジェネレータです。</p>
<h3 id="docusaurus%E3%81%AE%E3%83%A1%E3%83%AA%E3%83%83%E3%83%88">
<a class="header-anchor-link" href="#docusaurus%E3%81%AE%E3%83%A1%E3%83%AA%E3%83%83%E3%83%88" aria-hidden="true"></a> Docusaurusのメリット</h3>
<ul>
<li>豊富な機能</li>
<li>高いカスタマイズ製
<ul>
<li>スタイルの変更などが比較的容易</li>
</ul>
</li>
</ul>
<h3 id="docusaurus%E3%81%AE%E3%83%87%E3%83%A1%E3%83%AA%E3%83%83%E3%83%88">
<a class="header-anchor-link" href="#docusaurus%E3%81%AE%E3%83%87%E3%83%A1%E3%83%AA%E3%83%83%E3%83%88" aria-hidden="true"></a> Docusaurusのデメリット</h3>
<ul>
<li>高機能すぎるゆえにVitePressやVuePressよりかは若干パフォーマンスが悪い
<ul>
<li>あくまでVitePressなどと比較しての話で気になる程ではない</li>
</ul>
</li>
</ul>
<h3 id="%E3%82%B3%E3%83%A1%E3%83%B3%E3%83%88">
<a class="header-anchor-link" href="#%E3%82%B3%E3%83%A1%E3%83%B3%E3%83%88" aria-hidden="true"></a> コメント</h3>
<p>一番に最初に選択肢にあがる人気・知名度ともに高い静的サイトジェネレータです。<br>
迷ったらこれを使っておけば良いと思います。</p>
<p>個人的にはデフォルトのスタイルだと見出し文字が大きすぎると感じるのでデザインはそこまで洗練されてはいない印象があります。</p>
<h2 id="2.-vitepress">
<a class="header-anchor-link" href="#2.-vitepress" aria-hidden="true"></a> 2. VitePress</h2>
<p><span class="embed-block zenn-embedded zenn-embedded-card"><iframe id="zenn-embedded__60f28d72532a2" src="https://embed.zenn.studio/card#zenn-embedded__60f28d72532a2" data-content="https%3A%2F%2Fgithub.com%2Fvuejs%2Fvitepress" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://github.com/vuejs/vitepress" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://github.com/vuejs/vitepress</a></p>
<ul>
<li>公式ドキュメント: <a href="https://vitepress.dev/" target="_blank" rel="nofollow noopener noreferrer">https://vitepress.dev/</a>
</li>
</ul>
<p>Vue製の静的サイトジェネレーターです。<br>
公式ドキュメントによるとVitePressは「VuePressの精神的後継」にあたるとされています。<br style="display:none">
<span class="embed-block zenn-embedded zenn-embedded-card"><iframe id="zenn-embedded__a871cd81aca25" src="https://embed.zenn.studio/card#zenn-embedded__a871cd81aca25" data-content="https%3A%2F%2Fvitepress.dev%2Fguide%2Fwhat-is-vitepress" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://vitepress.dev/guide/what-is-vitepress" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://vitepress.dev/guide/what-is-vitepress</a></p>
<p>その名の通り、バンドルツールは vite が採用されています。<br>
VuePressと以下の違いがあると謳っています。</p>
<ul>
<li>DXの大幅に改善</li>
<li>パフォーマンスの向上</li>
<li>デフォルトテーマがより洗練</li>
<li>APIがより柔軟にカスタマイズ可</li>
</ul>
<h3 id="vitepress%E3%81%AE%E3%83%A1%E3%83%AA%E3%83%83%E3%83%88">
<a class="header-anchor-link" href="#vitepress%E3%81%AE%E3%83%A1%E3%83%AA%E3%83%83%E3%83%88" aria-hidden="true"></a> VitePressのメリット</h3>
<ul>
<li>洗練されたデザイン</li>
<li>高いパフォーマンス</li>
</ul>
<h3 id="vitepress%E3%81%AE%E3%83%87%E3%83%A1%E3%83%AA%E3%83%83%E3%83%88">
<a class="header-anchor-link" href="#vitepress%E3%81%AE%E3%83%87%E3%83%A1%E3%83%AA%E3%83%83%E3%83%88" aria-hidden="true"></a> VitePressのデメリット</h3>
<ul>
<li>Docusaurusなどと比べると機能がやや少ない</li>
</ul>
<h3 id="%E3%82%B3%E3%83%A1%E3%83%B3%E3%83%88-1">
<a class="header-anchor-link" href="#%E3%82%B3%E3%83%A1%E3%83%B3%E3%83%88-1" aria-hidden="true"></a> コメント</h3>
<p>個人的には一番好きです。デフォルトのthemeが洗練されていてとてもいいです。<br>
機能も必要なものは揃っていて困ることはあまりないと思います。<br>
パフォーマンスもすごく良いです。爆速です。</p>
<h2 id="3.-starlight">
<a class="header-anchor-link" href="#3.-starlight" aria-hidden="true"></a> 3. Starlight</h2>
<p><span class="embed-block zenn-embedded zenn-embedded-card"><iframe id="zenn-embedded__4d567f0baab72" src="https://embed.zenn.studio/card#zenn-embedded__4d567f0baab72" data-content="https%3A%2F%2Fgithub.com%2Fwithastro%2Fstarlight" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://github.com/withastro/starlight" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://github.com/withastro/starlight</a></p>
<p>公式ドキュメント: <a href="https://starlight.astro.build/" target="_blank" rel="nofollow noopener noreferrer">https://starlight.astro.build/</a></p>
<p>StarlightはAstro製のドキュメントWebサイト生成ツール。<br>
誕生したのは2023年の3月頃と比較的新しいです。</p>
<h3 id="starlight%E3%81%AE%E3%83%A1%E3%83%AA%E3%83%83%E3%83%88">
<a class="header-anchor-link" href="#starlight%E3%81%AE%E3%83%A1%E3%83%AA%E3%83%83%E3%83%88" aria-hidden="true"></a> Starlightのメリット</h3>
<ul>
<li>高いパフォーマンス</li>
<li>AstroベースなのでReact、Vue、Svelteなど、様々なフレームワークのコンポーネントを混在させて使用することが可能</li>
</ul>
<h3 id="starlight%E3%81%AE%E3%83%87%E3%83%A1%E3%83%AA%E3%83%83%E3%83%88">
<a class="header-anchor-link" href="#starlight%E3%81%AE%E3%83%87%E3%83%A1%E3%83%AA%E3%83%83%E3%83%88" aria-hidden="true"></a> Starlightのデメリット</h3>
<ul>
<li>Docusaurusなどと比べると機能が少ない</li>
<li>MPAなのでページ遷移時のUXはSPAに劣る</li>
</ul>
<h3 id="%E3%82%B3%E3%83%A1%E3%83%B3%E3%83%88-2">
<a class="header-anchor-link" href="#%E3%82%B3%E3%83%A1%E3%83%B3%E3%83%88-2" aria-hidden="true"></a> コメント</h3>
<p>Astro製なので初期レンダー時間はおそらく他と比べて短いと思います。<br>
ただ、MPAなのでページ遷移はSPAと比べるとやや遅く感じます。</p>
<h2 id="4.-nextra">
<a class="header-anchor-link" href="#4.-nextra" aria-hidden="true"></a> 4. Nextra</h2>
<p><span class="embed-block zenn-embedded zenn-embedded-card"><iframe id="zenn-embedded__186c07fa978fe" src="https://embed.zenn.studio/card#zenn-embedded__186c07fa978fe" data-content="https%3A%2F%2Fgithub.com%2Fshuding%2Fnextra" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://github.com/shuding/nextra" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://github.com/shuding/nextra</a></p>
<p>公式ドキュメント: <a href="https://nextra.site/" target="_blank" rel="nofollow noopener noreferrer">https://nextra.site/</a></p>
<p>NextraはNext.js製のWebサイト生成ツールです。</p>
<h3 id="nextra%E3%81%AE%E3%83%A1%E3%83%AA%E3%83%83%E3%83%88">
<a class="header-anchor-link" href="#nextra%E3%81%AE%E3%83%A1%E3%83%AA%E3%83%83%E3%83%88" aria-hidden="true"></a> Nextraのメリット</h3>
<ul>
<li>Next.jsの機能が使える</li>
</ul>
<h3 id="nextra%E3%81%AE%E3%83%87%E3%83%A1%E3%83%AA%E3%83%83%E3%83%88">
<a class="header-anchor-link" href="#nextra%E3%81%AE%E3%83%87%E3%83%A1%E3%83%AA%E3%83%83%E3%83%88" aria-hidden="true"></a> Nextraのデメリット</h3>
<ul>
<li>ドキュメントに特化した機能は少なめ</li>
</ul>
<h3 id="%E3%82%B3%E3%83%A1%E3%83%B3%E3%83%88-3">
<a class="header-anchor-link" href="#%E3%82%B3%E3%83%A1%E3%83%B3%E3%83%88-3" aria-hidden="true"></a> コメント</h3>
<p>Nextraは汎用的なWebサイト生成ツールなのでドキュメント生成に特化した機能は少なめです。<br>
Next.jsの機能を使用したい場合は採用を検討できると思います。</p>
<h2 id="5.-mkdocs">
<a class="header-anchor-link" href="#5.-mkdocs" aria-hidden="true"></a> 5. MkDocs</h2>
<p><span class="embed-block zenn-embedded zenn-embedded-card"><iframe id="zenn-embedded__6f8a9475618c3" src="https://embed.zenn.studio/card#zenn-embedded__6f8a9475618c3" data-content="https%3A%2F%2Fgithub.com%2Fmkdocs%2Fmkdocs" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://github.com/mkdocs/mkdocs" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://github.com/mkdocs/mkdocs</a></p>
<p>公式ドキュメント: <a href="https://www.mkdocs.org/" target="_blank" rel="nofollow noopener noreferrer">https://www.mkdocs.org/</a></p>
<p>MkDocsはPython製の静的サイトジェネレータです。<br>
MkDocsをベースとしてマテリアルデザインを採用した Material for MkDocs というものもあります。</p>
<p><span class="embed-block zenn-embedded zenn-embedded-card"><iframe id="zenn-embedded__1ca722d683156" src="https://embed.zenn.studio/card#zenn-embedded__1ca722d683156" data-content="https%3A%2F%2Fgithub.com%2Fsquidfunk%2Fmkdocs-material" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://github.com/squidfunk/mkdocs-material" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://github.com/squidfunk/mkdocs-material</a></p>
<h3 id="mkdocs%E3%81%AE%E3%83%A1%E3%83%AA%E3%83%83%E3%83%88">
<a class="header-anchor-link" href="#mkdocs%E3%81%AE%E3%83%A1%E3%83%AA%E3%83%83%E3%83%88" aria-hidden="true"></a> MkDocsのメリット</h3>
<ul>
<li>手軽に導入できる</li>
</ul>
<h3 id="mkdocs%E3%81%AE%E3%83%87%E3%83%A1%E3%83%AA%E3%83%83%E3%83%88">
<a class="header-anchor-link" href="#mkdocs%E3%81%AE%E3%83%87%E3%83%A1%E3%83%AA%E3%83%83%E3%83%88" aria-hidden="true"></a> MkDocsのデメリット</h3>
<ul>
<li>JavaScript製のツールと比べると柔軟なカスタマイズには向いていない</li>
<li>機能はやや少ない</li>
</ul>
<h3 id="%E3%82%B3%E3%83%A1%E3%83%B3%E3%83%88-4">
<a class="header-anchor-link" href="#%E3%82%B3%E3%83%A1%E3%83%B3%E3%83%88-4" aria-hidden="true"></a> コメント</h3>
<p>今回紹介した中では唯一JavaScript製ではない静的サイトジェネレータです。<br>
素のMkDocsはデザインがあまり良くないですがMaterial for MkDocsは結構いいです。<br>
ただドキュメント向けの機能面ではDucusaurusやVitePressと比べて少ないように見えます。<br>
また、JavaScript製のツールのようにMarkdown内にReactコンポーネントやVueコンポーネントを埋め込んで柔軟にサイトを構築するといったことはできないです。</p>
<h2 id="%E7%95%AA%E5%A4%96%E7%B7%A8">
<a class="header-anchor-link" href="#%E7%95%AA%E5%A4%96%E7%B7%A8" aria-hidden="true"></a> 番外編</h2>
<p>5選の中に入れなかったツールです。</p>
<h3 id="vuepress">
<a class="header-anchor-link" href="#vuepress" aria-hidden="true"></a> VuePress</h3>
<p><span class="embed-block zenn-embedded zenn-embedded-card"><iframe id="zenn-embedded__d18c6b4543c8e" src="https://embed.zenn.studio/card#zenn-embedded__d18c6b4543c8e" data-content="https%3A%2F%2Fgithub.com%2Fvuejs%2Fvuepress" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://github.com/vuejs/vuepress" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://github.com/vuejs/vuepress</a></p>
<p>VitePressの前身となるVue製の静的サイトジェネレータです。<br>
v1はmaintenance modeなので、あえて採用する理由はあまりないと思います。</p>
<h3 id="sphinx">
<a class="header-anchor-link" href="#sphinx" aria-hidden="true"></a> Sphinx</h3>
<p><span class="embed-block zenn-embedded zenn-embedded-card"><iframe id="zenn-embedded__c5a88011075e4" src="https://embed.zenn.studio/card#zenn-embedded__c5a88011075e4" data-content="https%3A%2F%2Fgithub.com%2Fsphinx-doc%2Fsphinx" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://github.com/sphinx-doc/sphinx" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://github.com/sphinx-doc/sphinx</a></p>
<p>Python製のドキュメント生成ツールです。<br>
HTML以外にもPDF、EPUB、TeXと様々なフォーマットで出力可能です。<br>
Pythonの公式ドキュメントで採用されていることでも有名です。</p>
<p><span class="embed-block zenn-embedded zenn-embedded-card"><iframe id="zenn-embedded__ef6427f6818d" src="https://embed.zenn.studio/card#zenn-embedded__ef6427f6818d" data-content="https%3A%2F%2Fdocs.python.org%2Fja%2F3%2F" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://docs.python.org/ja/3/" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://docs.python.org/ja/3/</a></p>
<p>機能面は悪くはないですが個人的には洗練されたthemeが少ない印象です。</p>
<p><span class="embed-block zenn-embedded zenn-embedded-card"><iframe id="zenn-embedded__990171679b87b" src="https://embed.zenn.studio/card#zenn-embedded__990171679b87b" data-content="https%3A%2F%2Fsphinx-themes.org%2F%23themes" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://sphinx-themes.org/#themes" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://sphinx-themes.org/#themes</a></p>
<h3 id="docsy">
<a class="header-anchor-link" href="#docsy" aria-hidden="true"></a> docsy</h3>
<p><span class="embed-block zenn-embedded zenn-embedded-card"><iframe id="zenn-embedded__b159678e78141" src="https://embed.zenn.studio/card#zenn-embedded__b159678e78141" data-content="https%3A%2F%2Fgithub.com%2Fgoogle%2Fdocsy" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://github.com/google/docsy" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://github.com/google/docsy</a></p>
<p>Googleが開発するHugoの技術文書向けtheme。<br>
機能面もデザイン面もそれほど良いとは思えないです。<br>
とは言え普通に使えるので、Hugoに慣れている人には良いかもしれません。</p>
<h2 id="%E7%B5%82%E3%82%8F%E3%82%8A%E3%81%AB">
<a class="header-anchor-link" href="#%E7%B5%82%E3%82%8F%E3%82%8A%E3%81%AB" aria-hidden="true"></a> 終わりに</h2>
<p>今回は独断と偏見でおすすめのサイトジェネレータを5つ紹介しました。<br>
もし気になるツールがある場合は是非、採用してみてください。</p>


技術文書向け静的サイトジェネレータおすすめ5選

Discussion