プロフェッショナルなPDFのためのMarkdown書式設定のヒント

適切にフォーマットされたMarkdownは、適切にフォーマットされたPDFを生成します。このガイドでは、見出し構造から表のデザイン、コードブロックのスタイリングまで、最終的な出力に最も大きな違いをもたらすテクニックを紹介します。

見出し階層の重要性

見出し構造によってドキュメントのアウトラインが決まります。論理的な階層を使用しましょう：

# ドキュメントタイトル（h1）
## 主要セクション（h2）
### サブセクション（h3）
#### 詳細レベル（h4）

ヒント：

ドキュメントに1つのh1 — それがPDFのタイトルになります。
主要セクション（はじめに、方法、結果、結論）にはh2を使用します。
各セクション内のサブセクションにはh3を使用します。
レベルをスキップしないでください（h2の次にh3なしでh4にしない）。

Legalテンプレートは最上位のセクションに自動で番号を付けるため、見出しの階層を明確にするとその番号付けが意味を持ちます。どのテンプレートでも、論理的な階層にすると文書のアウトラインが見やすくなります。

見栄えの良い表

表は最も強力な機能の1つです。PDFで効果的に使う方法は次のとおりです：

| プロジェクト | ステータス | 予算 | リーダー |
| --- | --- | --- | --- |
| ウェブサイトリニューアル | 進行中 | ¥450,000 | 佐藤 |
| モバイルアプリ | 計画中 | ¥300,000 | 鈴木 |
| API移行 | 完了 | ¥150,000 | 田中 |

列の配置

区切り行にコロンを使用して配置を制御します：

| アイテム | 数量 | 価格 |
| :--- | ---: | :---: |
| 左揃え | 右揃え | 中央揃え |
| ウィジェット | 5 | ¥24,000 |
| サービス | 12 | ¥120,000 |

:--- — 左揃え（デフォルト）
---: — 右揃え（数値に適しています）
:---: — 中央揃え

パイプ文字のエスケープ

セルの内容に | が含まれる場合は、バックスラッシュでエスケープします：

| コマンド | 説明 |
| --- | --- |
| `cat file \| grep error` | ログ内のエラーを検索 |

ヒント：

列ラベルは短く：長いヘッダーは幅の広い列を作り、オーバーフローの原因になります。
4～5列に制限：それ以上列が増えると、A4/レター用紙で読みにくくなります。
エクスポート前にプレビュー：幅の広い表はより短いラベルが必要になる場合があります。

シンタックスハイライト付きコードブロック

コードを3つのバッククォートと言語タグで囲みます。PDFが自動的にシンタックスハイライトを適用します。

基本構文

```python
def calculate_growth(revenue: list[float]) -> float:
    if len(revenue) < 2:
        return 0.0
    return (revenue[-1] - revenue[-2]) / revenue[-2] * 100
```

一般的な言語

言語	タグ
Python	`python`
JavaScript	`javascript`
TypeScript	`typescript`
Bash / Shell	`bash`
SQL	`sql`
JSON	`json`
YAML	`yaml`
HTML	`html`
CSS	`css`
Rust	`rust`
Go	`go`
Java	`java`
C++	`cpp`

例：JSON設定

```json
{
  "name": "quarterly-report",
  "templateId": "executive",
  "options": {
    "pageNumbers": true
  }
}
```

例：シェルコマンド

```bash
curl -X POST https://api.example.com/v1/reports \
  -H "Authorization: Bearer $TOKEN" \
  -d '{"period": "Q3", "format": "pdf"}'
```

ヒント：

必ず言語タグを含めてください — タグがないとハイライト表示されません。
短い参照にはインラインの `コード` バッククォートを使用します（例：ファイル名 や true）。
きれいなページ分割のために、ブロックは50行未満に抑えましょう。

PDF内の画像

![会社ロゴ](https://example.com/logo.png)

要件：

画像は一般にアクセス可能なURLである必要があります（ローカルファイルは不可）。
対応形式：PNG、JPEG、WebP。
画像はページ幅に合わせて自動的にスケーリングされます。

ヒント：

カスタムテンプレートのロゴには、Markdown画像ではなく画像アップロード機能を使用してください。
高速レンダリングのため、画像は2MB未満に抑えてください。
説明的なaltテキストを使用してください — 画像が読み込めない場合に表示されます。

コールアウトのためのブロック引用

> **主要な発見**：売上高は前年比15%増加し、第3四半期の予測を3パーセントポイント上回りました。

ブロック引用は左ボーダーとインデントで表示されます。以下の用途に使用します：

主要な発見や要点
顧客の声や testimonial
重要な注意事項や警告
外部ソースからの抜粋

リスト — 箇条書きと番号付き

### 主要成果物

- Q4マーケティング計画
  - ソーシャルメディアカレンダー
  - メールキャンペーンスケジュール
- 予算配分
  - 部門別内訳
  - 予備費

### アクション項目

1. 関係者とドラフトをレビュー
2. 金曜日までにフィードバックを反映
3. 承認用に最終版を提出
4. 以前のバージョンをアーカイブ

ヒント：

順序のない項目には箇条書きリストを使用します。
順序のある手順には番号付きリストを使用します。
リストは最大3レベルまでネストできます。
適切な間隔のため、リストの前後に空行を入れてください。

リンクと参照

詳細は[APIドキュメント](https://markdowntopdfconverter.com/api-docs)をご覧ください。

ご質問は [support@markdowntopdfconverter.com](mailto:support@markdowntopdfconverter.com) までお問い合わせください。

リンクはPDF内でクリック可能です。「ここをクリック」ではなく、説明的なリンクテキストを使用してください。

Mermaid図

Mermaid構文を使用して、Markdown内に直接図を追加できます。PDFでは鮮明なベクターグラフィックスとしてレンダリングされます。Mermaidのレンダリングにはプレミアムプランが必要です。

各図は ```mermaid で始まり、次の行にタイプキーワードを記述します。

フローチャート

プロセス、決定、ワークフローを表示します。

```mermaid
graph TD
    A[Start] --> B{Is approved?}
    B -->|Yes| C[Publish]
    B -->|No| D[Revise]
    D --> B
    C --> E[Done]
```

重要なポイント：graph TD = 上から下。左から右には LR を使用。[] = 四角形、() = 角丸、{} = ひし形、--> = 矢印、-->|ラベル| = ラベル付き矢印。

シーケンス図

時間経過に伴う参加者間のやり取りを表示します。

```mermaid
sequenceDiagram
    Client->>Server: POST /api/convert
    Server->>Gotenberg: Render PDF
    Gotenberg-->>Server: PDF binary
    Server-->>Client: 200 OK (PDF)
```

重要なポイント：->> = 実線矢印、-->> = 破線の応答。参加者は名前から自動的に作成されます。

ガントチャート

タイムラインバーでプロジェクトを計画します。

```mermaid
gantt
    title Q3 Launch
    dateFormat  YYYY-MM-DD
    section Design
    Wireframes    :2026-07-01, 7d
    Prototype     :2026-07-08, 5d
    section Build
    Frontend      :2026-07-13, 10d
    Backend       :2026-07-13, 12d
    section Launch
    QA            :2026-07-25, 4d
    Go Live       :milestone, 2026-07-30, 0d
```

重要なポイント：section はタスクをグループ化します。形式：タスク名 :開始, 期間。milestone は単一の日付をマークします。

円グラフ

シンプルな比例データ。

```mermaid
pie title Revenue by Region
    "North America" : 45
    "Europe" : 30
    "APAC" : 25
```

クラス図

技術ドキュメント用にオブジェクト間の関係を表示します。

```mermaid
classDiagram
    User <|-- Admin
    User : +String email
    User : +login()
    Admin : +manageUsers()
    Report *-- User
    Report : +String title
    Report : +generatePdf()
```

重要なポイント：<|-- = 継承、*-- = 構成。+ = パブリックメソッド/フィールド。

追加タイプ

状態図、Entity-Relationship図、ジャーニーマップ、gitグラフ、象限チャートもサポートされています。完全な構文リファレンスは mermaid.js.org をご覧ください。

ヒント：

MermaidはSVGとしてレンダリングされるため、どのズームレベルでも鮮明です。
Mermaidを多用するドキュメントにはCreativeテンプレートを使用してください（図のコンテナを事前にサイズ設定します）。
図は自動的にページ幅に合わせられます。オーバーフローを防ぐため、ノードラベルは簡潔にしてください。
エクスポート前に、複雑な図をライブプレビューでテストしてください。

ドキュメント構造チェックリスト

エクスポート前に以下を確認：

先頭に1つのh1タイトル
論理的な見出し階層（h1 → h2 → h3）
表の列数が一致している
コードブロックに言語ラベルが付いている
画像に説明的なaltテキストがある
リンクに説明的なテキストが使われている
リストの前後に空行がある
HTMLタグがない（純粋なMarkdownを使用）

次のステップ

ライブプレビュー付きのコンバーターでこれらのテクニックを試してみてください。
ブランドのタイポグラフィを使用するカスタムテンプレートのデザイン方法を学びましょう。
9つの組み込みテンプレートすべてを比較して、コンテンツに最適なものを見つけましょう。