ブログに戻る
2025年11月17日月曜日

Markdown完全チートシート：Markdown2Imageで映える最速ワークフロー

Markdown完全チートシート：Markdown2Imageで映える最速ワークフロー

Markdown は軽量で視認性の高いテキスト記法です。このチートシートでは Markdown2Image との連携を前提に、表現力を最大化するテクニックを日本語で整理しました。必要なブロックをコピペし、配布資料・SNS用ビジュアル・社内ナレッジをそのまま出力できます。

🎯 ハイライト

  • 1ファイルで完結：見出し・本文・図解・脚注を一括で確認
  • 実践例を追記：各セクションに「こう使う」例文を追加
  • 配色ガイド：Markdown2Image で崩れない 16:9 / 4:5 レイアウトのヒント
  • チェックリスト同梱：公開前に抜け漏れを防ぐ QA シート

📝 テキスト装飾の基本

_イタリック_ / **ボールド** / ~~取り消し線~~
***ボールド＋イタリック***
`インラインコード` と ```多行コード```
> 引用は「引用 > 引用 > 引用」で段階的に表現

フィールドノート：技術単語や CLI コマンドは必ずバッククォートで囲むと、Markdown2Image でもハイライトが崩れません。

拡張フォーマット

==ハイライト== で注目箇所を塗りつぶし
<u>下線</u> は HTML タグで補完
H~2~O / 10^3^ で下付き・上付き

🔗 リンク & 参照

[通常リンク](https://example.com)
[タイトル付きリンク](https://example.com "Hover ヒント")
[メール](mailto:[email protected])
[電話](tel:+81300000000)

[GitHub]: https://github.com "コード共有"
ドキュメントは [GitHub] を参照

TIP：長文記事では参考式リンクで末尾に URL を集めると、翻訳時に差分管理しやすくなります。

🖼️ 画像 & メディア

![紹介画像](hero.png "ノート PC とコード")
![幅指定](flow.png =480x)
![左右2カラム](img-left.png){width="48%"}
![クリック拡大](diagram.png){data-zoomable}
  • キャプションは「画像の次の行に 説明」で記述
  • Markdown2Image では 1200px 以上の画像をアップロードすると Retina 出力が安定

📊 レイアウトと構造

リスト

- メインタスク
  - サブタスク
1. 準備
2. 実装
   1. API 設計
   2. UI モック
- [x] 完了 / [ ] 未完のタスクリスト

定義リスト

Markdown
: テキストを構造化する軽量マークアップ

Markdown2Image
: Markdown を画像スライドへ変換するツール

テーブル

| コマンド | 目的 | 備考 |
| --- | --- | --- |
| `npm install` | 依存関係の導入 | 先に Node バージョン確認 |
| `pnpm build` | 本番ビルド | --filter で部分ビルド可 |

⚙️ 生成ワークフロー（推奨）

  1. 草稿：Obsidian / VS Code で Markdown 作成
  2. ローカライズ：post_translations で言語別フィールドを管理
  3. 検証：markdownlint と pnpm test:md で崩れを検出
  4. ビジュアル化：Markdown2Image に貼り付け、背景をテンプレート化
  5. 公開：Directus のレビュー機能で承認を取得し、Webhook でブログを再生成

🧪 QA チェックリスト

  • すべてのコードブロックに言語シンタックスを付与した
  • 画像 URL は https で始まり 404 にならない
  • テーブル列幅が 3 カラム以内に収まっている
  • slug・タイトルが英語のままでも SEO タグで日本語を補完した
  • Markdown2Image で 16:9 / 4:5 それぞれのレイアウトを確認した

🔚 まとめ

Markdown の「読みやすさ」と Markdown2Image の「視覚的インパクト」を両立させるには、記法の厳格さと構造設計が鍵です。本チートシートをプロジェクトのテンプレートに組み込むことで、翻訳フローや画像生成も一貫性を保ったまま高速化できます。

Markdown完全チートシート（日本語版）| Markdown2Image | MarkdownToImage