Docsie Teams のお気に入りのドキュメントの例と、これらの例をあなたのナレッジポータルで再現する方法をご覧ください。
製品開発プロセスにおいて、ドキュメンテーションは不可欠な要素です。製品が概念実証から現実のものとなるにつれ、製品の使い方を顧客に教育するために、説明用の文書が不可欠となります。
お客さまが商品を選ぶときに、最初に知りたいことは何でしょうか。何のためにあるのか、何をするのか、どうすればいいのか。Docsieを例にとって考えてみましょう！
Docsieは、製品ドキュメントのプラットフォームです。オンラインナレッジポータルで、ドキュメントの作成、編集、注釈、公開を行うことができます。ログインして、新しいDocsie Bookを作成し、最初のコンテンツを入力するだけで、簡単に利用できます！
確かに、私たちはそれをシンプルにしました。しかし、製品ドキュメントの場合、複雑な機能や特徴を説明するためには、より包括的な説明が必要です。
この記事では、Docsieチームのお気に入りの、素晴らしい製品ドキュメントの例を10個紹介します。もっといいのはさらに、私たちの素晴らしい事例からインスピレーションを得た、あなた自身の素晴らしい製品ドキュメントの作り方もご紹介します！(笑)
飛び込んでみよう！🤿
10驚くべき製品ドキュメントの例
以下では、Docsieチームによって選ばれた10個の素晴らしい製品ドキュメントの例をご覧いただけます。Docsieで特徴や機能を再現し、同じような素晴らしいドキュメントを作成する方法を探ります！
1 - Docker
Dockerはコンテナ仮想化プラットフォームで、極小でモジュール化され、個別に分離されたIT環境内でのソフトウェアホスティングを可能にします。このコンセプトにより、コンテナ間でオペレーティングシステムリソースを分割して共有することで、複数の異種サービスを単一のホストオペレーティングシステム上でホストすることができます。
Docker Documentation Portal Homepage](https://docsie-app-media.s3.amazonaws.com/image/7093/doc_GzKTESk1IUWjA77hg/oywtjgyzfpsynkqslptj "Docker Documentation Portal Homepage")です。
Dockerは、明確なフォーマットの製品ドキュメントポータルを持ち、Dockerコンテナのダウンロード、インストール、立ち上げに必要なすべての必須情報を提示しています。また、多言語の製品ドキュメント、APIリファレンスドキュメント、そして一番下のよくある質問（FAQ）セクションも共有しています。視覚学習者のために、右下にはビデオセクションも用意されています。
入門編を作成するために、Docsieを例にしてみましょう。Docsieを始めるには、アカウントの作成、メールアドレスの確認、Docsie Workspaceダッシュボードの読み込み、新しいShelfの作成、新しいBookの作成など、基本的なことは完了です！各セクションのヘッダータイトルの枠組みを作り、説明を書き、写真やハイパーリンクを追加すると、以下のような構造になっています！
一番いいのは？ドクシーはこれを自動魔法でやってくれるんです！
2 - ストライプ
Stripeは、国際的な決済処理プラットフォームで、Stripeコマンドラインインタフェース（CLI）を使用して、カスタム統合や決済パラメータを可能にする技術機能を備えています。電子商取引を効率化する仮想経済インフラを構築することで、インターネットのGDPを増大させることをミッションステートメントとしています。
このStripeのページは、技術的な製品ドキュメントとして知られています。このページでは、CLIを使用してDockerコンテナを作成し（再びこんにちは！）、ターミナルコマンドのみを使用してStripeと通信する方法について説明します。このページでは、目次、コピーペースト機能付きのコードブロック、テキスト内のハイパーリンクを見ることができます。
Docsieにはコードブロックがあるので、その使い方を探ってみましょう。
DocsieでこのCode Blocksの例をチェックする](https://help.docsie.io/?doc=/publish-documentation-portal/plugins-extensions/add-code-highlighting/)
コンソール.ログ('Hello World');`をコピーしてください。
Docsie EditorでDocsie Bookを開く。下のGIFは、ツールバーでコードブロックのオプションを見つける方法を示しており、"Hello World!"を表示するJavaScriptの例が含まれています。
Docsieブックスにコードブロックを追加する方法を示すアニメーションGIF](https://docsie-app-media.s3.amazonaws.com/image/7093/doc_GzKTESk1IUWjA77hg/dvofsbntefhpqxzetglx "Docsie Booksにコードブロックを追加する方法を示すアニメーションGIF")
Docsieポータルでは、技術的な読者のために、コードのハイライトが適用され、わかりやすくなっています。ユーザーは便利なクリップボードアイコンでコードをコピーすることもできます！
Live Docsie Portal rendering for code blocks example](https://docsie-app-media.s3.amazonaws.com/image/7093/doc_GzKTESk1IUWjA77hg/cgnoqwpldvdycrhyzqzr "Live Docsie Portal rendering for code blocks example")。
3位 - アップル
どこにでもあるアップル！いや、食用じゃないですよ！
Appleは、人気の高いiPhoneシリーズのスマートフォンのために、優れた製品ドキュメントを提供しています。Appleの製品ドキュメントの例では、バージョンピッカー、目次、テキストとヘッダー、そして最後にインラインイメージを用意しています。
Apple iPhone ドキュメントページ](https://docsie-app-media.s3.amazonaws.com/image/7093/doc_GzKTESk1IUWjA77hg/xvuspkjrqcaxcncgqzbq "Apple iPhone ドキュメントページ")
Docsieのバージョン管理について調べてみましょう！
Docsieナレッジポータルでドキュメントを読む場合、読者はバージョンピッカープラグインを使用してバージョンを選択することができます。
これにより、読者は過去の製品ドキュメントを閲覧することができます。つまり、まだアップデートしていない後ろ姿をゆっくり見ることができるのです！
Docsieで新しいバージョンを作成するには、Docsie Editorのバージョン管理タブを使用します。
Docsie Editorのバージョン選択メニュー](https://docsie-app-media.s3.amazonaws.com/image/7093/doc_GzKTESk1IUWjA77hg/cidsyyjlzvzipcoogjrn "Docsie Editorのバージョン選択メニュー")!
ここから、「バージョン追加＋」をクリックします。
次に、バージョン番号とバージョン名を選んでから、「バージョンを追加する」ボタンをクリックします。とても簡単です！新しいバージョンのドキュメントを機能変更と一緒に更新し、お客様に最新（または遅めの）情報を見つけてもらいましょう！
Docsie Editorにバージョンのコンテキストメニューを追加](https://docsie-app-media.s3.amazonaws.com/image/7093/doc_GzKTESk1IUWjA77hg/ozelvlpwguxzksamascl "Add Version context options menu in Docsie Editor")
4 - パース
Parseは、アプリケーションバックエンド用のオープンソースフレームワークを提供する、優れたフルスタックソフトウェアプラットフォームです。単純に、開発者があらゆる開発プロジェクトに統合する際に信頼できる既成のコードリソースを提供します。
Parseのドキュメントポータルでは、互換性テーブルという形で素晴らしいドキュメントの例があります。これは、Node.jsやMongoDBなどの異なるアーキテクチャとParseプラットフォームとの互換性を監視するものです。
!!!【Parseサイトでのバージョン対応表例】(https://docsie-app-media.s3.amazonaws.com/image/7093/doc_GzKTESk1IUWjA77hg/hkytunqwvoqlcsnwymgk「Parseサイトでのバージョン対応表例」)
Docsieで作ろう！
Docsieのテーブルブロックを使って、Parseの例と同じような4列のテーブルを作ることができます。
テーブルブロックのアイコンを選択し、4列のオプションを選択します。
入力中、Enterキーで列を移動します。キーボードのCtrl + Bで、テキストを太字にすることができます。最後に、記号オプションを使用して絵文字を追加します。
Docsie Editorの記号選択メニュー](https://docsie-app-media.s3.amazonaws.com/image/7093/doc_GzKTESk1IUWjA77hg/cunoxhrnzcfkcuncyqlq "Docsie Editorの記号選択メニュー")
Docsie EditorのSymbolコンテキストメニューの絵文字と記号選択表](https://docsie-app-media.s3.amazonaws.com/image/7093/doc_GzKTESk1IUWjA77hg/bbxeheaefvtzwkaeuavz "Docsie EditorのSymbolコンテキストメニューの絵文字と記号選択表")
これは、APIドキュメントや技術的なソフトウェアドキュメントを書くための簡単な方法です。Node.jsのウェブサイトへのハイパーリンクや、関連するユーザーガイドへの内部リンクを追加して、さらに進めることができます。次のAPI互換性表をDocsieで納品してください！
第5回 「フラッター
Flutterは、モバイル、ウェブ、デスクトップ、組み込み機器にまたがるユーザーインターフェースデザインの一貫性を促進するためにGoogleが作成したUIツールキットです。オンラインコードエディターにより高速なUIデザインと開発を促進し、レイヤー化されたコンテナベースのアーキテクチャによりフルカスタマイズが可能です。
Flutterは、ユーザーがプラットフォームについて見たり学んだりするためのさまざまなビデオをホストしています。このプラットフォームはGoogleによって作られているため、この例ではYouTubeが論理的な選択肢となります！
Docsieでは、動画埋め込みブロックを使ってこのデザインを模倣することができます！
Docsie Bookをクリックして、ビデオ埋め込みアイコンを選択し、テキストフィールドにYouTubeのURLをコピーするだけです。Dailymotion、Vimeo、その他さまざまなビデオホスティングサイトでも同じことができます。
Docsieに自分の動画を追加できるように、このプロセスを示すGIFを用意しましたので、試してみてください！
6 - イオニックフレームワーク
Ionic Frameworkは、HTML、CSS、JavaScript、その他のWeb技術を使用して、パフォーマンスの高いデスクトップおよびモバイルアプリケーションを構築するためのオープンソースのUIツールキットです。
Angular、React、Vueといった人気のフレームワークと統合し、様々なUIコンポーネント、ネイティブデバイス機能、テーマサポートなどを備えています。
Ionicのサイトには、素晴らしい携帯電話の例が埋め込まれています。iFrameエンベッドを使って、同様の例をDocsie Bookに追加してみましょう！
まず、以下のコードをコピーしてください：
<iframe loading="lazy" importance="low" src="https://ionic-docs-demo.herokuapp.com/?ionic:mode=ios"></iframe> です。
次に、Docsie Editorのコード埋め込みブロックをクリックします。ここにiFrameの埋め込みコードを貼り付け、「保存」をクリックして次に進みます。このプロセスを説明するGIFを以下に用意しました。
DocsieポータルでのiFrameライブ例](https://docsie-app-media.s3.amazonaws.com/image/7093/doc_GzKTESk1IUWjA77hg/gumyqdlpsdckgiosmlje "Live iFrame example in Docsie Portal")
DocsieでiFrameを使用する統合の公式リストをご覧ください！](https://help.docsie.io/?doc=/docsie-integrations/content-embeds/)
7位 - DigitalOcean
DigitalOceanは、サーバー、仮想マシン、データベースなどのホスティングを可能にするクラウドコンピューティングサービスプラットフォームです。スケーラブルなコンテナアプリケーションのための専用Kubernetesサービスや、ウェブホスティング、モバイルアプリ、ビッグデータレイク、VPNサービスなどのマネージドソリューションを提供しています。
DigitalOceanは、ユーザーのフィードバックを収集し、コンテンツを反復するために、docsにフィードバック機能を提供しています。Docsieでこれを実現する方法を探ってみましょう！
Vocallyは、Docsieでフィードバックを収集するための同等の機能です。星の評価やテキストによるフィードバック、さらにはビデオ録画も可能です（笑）！
DocsieワークスペースのメインメニューからDocsie Vocallyにアクセスする方法](https://docsie-app-media.s3.amazonaws.com/image/7093/doc_GzKTESk1IUWjA77hg/jobysqxbnhuglnpjbkoe "How to access Docsie Vocally in main Docsie Workspace menu")
ここでは、投稿されたDocsie Vocallyのフィードバックにアクセスすることができます。ユーザーは、1～5の星評価と短いテキストによる説明を選択することができます。ユーザーによっては、画面録画を残してくれる場合もあり、問題を正確に特定するのに役立ちます！
!!!【Docsie Vocallyダッシュボードでのユーザーフィードバックと動画再生のライブ例】(https://docsie-app-media.s3.amazonaws.com/image/7093/doc_GzKTESk1IUWjA77hg/ktpgmveuafsztjjvigjx "Live example of user feedback and video playback in Docsie Vocally dashboard")
Vocallyは、ドキュメントの長所と短所を明らかにするのに非常に有効なツールです。しかし、Docsie Vocallyを使用することで、次の反復作業で、より正しいドキュメントを作成することができます！
8位 - Slack
Slackは間違いなく、ビジネス界のWhatsappになっています。人気のビジネスインスタントメッセージング（IM）プラットフォームは、音声やビデオ通話、画像やGIFの共有、コメント返信ツリーなどを提供し、ビジネスコミュニケーションを整理して簡素化します。
Slackでは、重要な情報を強調したり、関連する機能を呼び出したりするために、ドキュメントポータル全体にツールチップを提供しています。これをDocsieでも再現してみましょう！
Docsieの引用ブロックを使って、上記のようなツールチップを作ることができます。
Docsie Editorのツールバーに移動して、引用ブロックのアイコンを選択するだけです。ここで、情報、警告、質問のブロックタイプを選択することができます。以下のアニメーションGIFで説明します。
![Docsieブックスに吹き出しや引用ブロックを追加する方法](https://docsie-app-media.s3.amazonaws.com/image/7093/doc_GzKTESk1IUWjA77hg/cientdcamlnfozadvsgw "Docsieブックスに吹き出しや引用ブロックを追加する方法" (Docsie Editor toolbar)
ここでは、ライブのDocsieポータルで、info、warning、questionの引用ブロックを使ったバリエーションを紹介します。さらに、questionブロックとwarningブロックを使って、質問と答えの文を作成することもできます！
9 - Rust
Rustは、スピードを意識して設計されたプログラミング言語です。セグメンテーションを防止し、プロセッサのスレッドセーフを保証することができます。Rustは、REST-APIフレームワークの作成、PostgreSQLのようなデータベースソリューションとの通信などに使用することができます。
Rust Standardライブラリには、APIドキュメントの閲覧を簡略化するために働くインラインコードスニペットが含まれています。Docsieで合わせてみましょう！
インラインコードスニペットには Vec<T> と Option<T> があります．Docsieでマークアップボタンを使って行うことができます。
Docsieエディタツールバーのマークアップトグルアイコン](https://docsie-app-media.s3.amazonaws.com/image/7093/doc_GzKTESk1IUWjA77hg/fgijgjarucvswdawsewg "Markup toggle icon in Docsie Editor toolbar")
テキストをコードとしてマークアップするには、クリック＆ドラッグでテキストをハイライトし、マークアップ・ボタンをクリックするだけです。このプロセスを説明するGIFを以下に掲載します。
DocsieブックスでDocsieエディタツールバーを使ってテキストにマークアップを適用する方法を示すアニメーションGIF](https://docsie-app-media.s3.amazonaws.com/image/7093/doc_GzKTESk1IUWjA77hg/diaerrmtfvogmuvqfylo "DocsieブックスでDocsieエディタツールバーを使ってテキストにマークアップを適用する方法を示すアニメーションGIF")
マークアップ・テキストには、ハイパーリンクも含まれています。このリンクは、コードスニペットが何をするのかを説明する用語集にリダイレクトする必要があります。
10 - Yoast
Yoastは、WordPressサイトの最適化とSEOのベストプラクティスに関する知識の向上を支援するために設計された検索エンジン最適化（SEO）プラットフォームです。Yoast SEOプラグインは、Google検索エンジンの結果ページ（SERPS）でより良いパフォーマンスを発揮するようにウェブサイトを最適化し、顧客エンゲージメントを促進します。
Yoastは、ドキュメントポータルでリストヘッダーを使ったステップバイステップのガイドを提供しています。これをDocsieのリストヘッダーで再現することができます！
Docsieでこれを行うには、まずBookを作成し、Docsie Editorを開く。
次に、テキストフィールドをクリックし、Docsie Editorツールバーでリストヘッダーオプションを選択します。このプロセスを説明するGIFを以下に用意しました。
Docsie Editorツールバーを使ってDocsie Booksにステップヘッダーを追加する方法を示すアニメーションGIF](https://docsie-app-media.s3.amazonaws.com/image/7093/doc_GzKTESk1IUWjA77hg/jyzdfkehfmaxtlegporx "Docsie Editorツールバーを使ってDocsie Booksにステップヘッダーを追加する方法を示すアニメーションGIF")
リストヘッダーは、HTMLの仕様の一部です。Docsieでは、リストヘッダーは、ドキュメントの中に直接リンクを作成することができるため、とても便利です。つまり、ユーザーがリンクをクリックすると、リストヘッダーへ直接移動します（スクロールやスワイプをする必要はありません！）。
Docsieの機能を使いこなそう！🏆
これら10のドキュメントの例は、ユーザーガイドがいかに有益であるかを示しています。次にユーザーガイドを作成するときは、これらのDocsieのヒントとトリックを活用してください！私たちが選んだ例も素晴らしいですが、あなたの例はもっと素晴らしいものになるはずです！📐👌
Docsieは、WebベースのFAQ、製品ドキュメント、ユーザーガイド、ヘルプドキュメント、ユーザーマニュアルを作成するために使用されるエンドツーエンドのドキュメント管理プラットフォームです。このプラットフォームは、顧客中心のコラボレーション、広範な埋め込み、カスタマイズされた翻訳、そして指先での強力なパブリッシングを特徴としています。
[Docsieで快適なデジタルドキュメントを提供しましょう！