ビジュアルでナレッジベースの記事を強化しましょう。スクリーンショットを追加すると、複雑な概念が明確になり、手順が簡素化され、ユーザーにインターフェース要素を分かりやすく見せることができます。このガイドでは、画像をクリーンかつ効果的に組み込み、コンテンツの明瞭性と読者のエンゲージメントを高める方法を説明します。

コンピューターやモバイル端末でスクリーンショットを作成する

ナレッジベース用のスクリーンショットを作成する方法や使用できる編集ツールについては、スクリーンショットを作成するには を参照してください。

ナレッジベースの記事に画像やスクリーンショットを追加する

メディアギャラリーに画像をアップロードする

1. メディアギャラリー に移動します。
2. 右下にある Upload ボタンをクリックします。
3. アップロードダイアログボックスが開きます。Browse… ボタンをクリックしてコンピューターのファイルを参照し、アップロードしたい画像を選択します。
4. 画像を選択すると、タイトルと説明を入力するよう促すダイアログボックスが表示されます。これらの詳細を入力し、Upload ボタンをクリックしてアップロード処理を完了します。

記事編集画面から直接画像をアップロードする

記事を編集中に画像を追加する必要がある場合は、ツールバーから直接アップロードすることもできます:

1. 新規記事を作成するか、既存の記事を編集することから始めます。
2. 記事編集画面で、ツールバーにあるメディアを挿入 ボタンをクリックします。

   

   • この操作でメディアを挿入ダイアログが表示されます。
3. 表示されたダイアログの下部で、Upload Media ボタンを選択して続行します。
4. アップロードダイアログボックスで、Browse… ボタンをクリックしてコンピューターのファイルを参照し、アップロードしたい画像を選択します。
5. 画像を選択すると、タイトルと説明を入力するよう促すダイアログボックスが表示されます。これらの詳細を入力し、Upload ボタンをクリックしてアップロード処理を完了します。

記事に画像を追加する

1. 新規記事を作成するか、既存の記事を編集することから始めます。
2. ツールバーにあるメディアを挿入 ボタンを探してクリックします。
3. ギャラリーから追加したい画像を選択し、Insert Media をクリックして記事に埋め込みます。

インライン画像の効果的な使用

インラインスクリーンショットをナレッジベースの記事に直接組み込むと、ボタンやメニューなどのインターフェース要素を視覚的に示すことで、明瞭性とナビゲーションが向上します。このアプローチは、画像とテキストの量を減らすことで記事を合理化し、簡潔で関連性の高いビジュアルでユーザーをインターフェースを通して直接ガイドするため、記事が追いやすくなります。 インライン画像の統合を最適化するためのガイドライン:

• 明瞭性を優先する: インライン画像を使用して、テキストによる手がかりを正確な視覚的表現に置き換えます。メニューやボタンなどの操作可能な要素の表示に焦点を当て、これらの画像が直接関連しており、ユーザーが素早く認識して操作できるようにします。
• 戦略的な配置: 関連するテキストの隣にスクリーンショットを統合して、手順と視覚的なガイドをシームレスに融合させ、ユーザーが長い説明に迷うことなく簡単に追えるようにします。
• サイズが重要: インライン画像を選択する際は、最大高さを 16 ピクセルにすることを目指してください。これにより、ビジュアルが有益でありながら邪魔にならず、コンテンツを閲覧するユーザーにとってよりクリーンでアクセスしやすいレイアウトに貢献します。

ステップバイステップの手順における画像の効果的な使用

ナレッジベースの記事の文の間にスクリーンショットを埋め込むと、アクションやタスクが視覚的に示され、テキストによる手順とその実際の適用の間のギャップを埋めることができます。このアプローチは、プロセスの重要なステップを説明することでユーザーの理解とエンゲージメントを高め、記事をよりインタラクティブで読者が追いやすいものにします。 ステップバイステップの手順での画像使用を最適化するためのガイドラインには、次のものが含まれます:

• 選択的な使用: 視覚的な補助が本当に役立つ概念にのみスクリーンショットを組み込みます。散らかりを防ぐために、使いすぎないようにしてください。
• 直接的な相関: 付随するテキストに直接関連するスクリーンショットを選択し、各画像が説明されているアクションやタスクを明確に示していることを確認します。
• 論理的な順序: ユーザーの実際の体験を反映するように、手順の自然な進行に従ってスクリーンショットを配置します。この時系列順は論理的な流れをサポートし、読者が簡単に追えるステップバイステップのガイドを促進します。
• 正確さが鍵: スクリーンショットがユーザーが画面で目にするものを正確に描写していることを確認してください。外観はオペレーティングシステムによって異なる可能性があるため、それに応じてスクリーンショットを調整してください。Windows、Mac、Linux ユーザー向けにスクリーンショットを調整する方法については、How to use "For" tags ガイドを参照してください。

例

シンプルにしよう！

• テキストの行内 (インライン画像) に画像を配置する場合、高さは 16 ピクセルを超えないようにしてください。
• 手順やリスト (番号付きまたは番号なし) の文の間に画像を配置する場合、セミコロンで区切る必要があります。画像の周りに改行を追加する必要はありません。

インライン画像のマークアップ

インライン画像の Wiki マークアップ は次のようになります:

これはテキストで、その後に [[Image:The Image]] が続き、これがテキストの続きです。

インライン画像の例

ここにテキストの一部があります。その真ん中に、Firefox のメニューボタンのインライン画像 を挿入しました。その後に、追加のテキストを加えています。

手順中の画像のマークアップ

「セミコロンで画像を区切る」ための Wiki マークアップ は次のようになります:

# これは手順です。
#;[[Image:The Image]]
# これは次の手順です。


手順中の画像の例

これは、長いテキストと長い画像の例です:

1. これは手順です。画像の上に表示される追加の長いテキストは、このようになります。

   

2. これは次の手順です。画像の下に再び表示される追加の長いテキストは、このようになります。

ナレッジベースのガイドライン

ナレッジベースの記事の執筆と編集についてさらに学びたい場合は、ガイドラインが こちら にあります。