Softonic

Markdown画像ジェネレーター

ステップ 1 / 3
次へ

Markdownの画像構文（![alt](src "title")）は間違えやすく、括弧を抜かしたり、代替テキストを忘れたり、リンク構文と混同したりすると、ドキュメントに壊れたプレースホルダーが表示されてしまいます。このジェネレーターは画像のURL、代替テキスト、任意のタイトル、任意のリンク先を受け取り、インライン形式と参照形式の両方のMarkdownを出力するので、ドキュメントに合うほうを貼り付けられます。

Markdown画像構文の生成方法

  1. 1

    画像URLを貼り付ける

    絶対URL（https://...）または相対パス（/images/hero.png）。

  2. 2

    代替テキストを書く

    画像が何を示しているかを一文で。アクセシビリティのため必須です。

  3. 3

    タイトルを追加（任意）

    ほとんどのレンダラーでホバー時に表示されます。

  4. 4

    リンクで囲む（任意）

    URLを指定すると画像をクリック可能にできます。

  5. 5

    スニペットをコピー

    インライン形式の`![alt](src)`または参照形式の`![alt][ref]`の出力が得られます。

4つの構文パターン

インライン、タイトルなし：

![製品のメイン画像](/images/hero.png)

インライン、タイトルあり：

![メイン画像](/images/hero.png "2026年10月に撮影したメイン画像")

クリック可能な画像（リンクで囲まれた画像）：

[![メイン画像](/images/hero.png)](https://example.com/buy)

参照形式（長いURLを段落の外に置く）：

![メイン画像][hero]

[hero]: /images/hero.png "2026年10月に撮影したメイン画像"

代替テキストは重要

  • アクセシビリティ。 スクリーンリーダーは代替テキストを読み上げます。代替テキストが空だと、視覚に障害のあるユーザーにとって画像は事実上見えないものになります。
  • SEO。 検索エンジンは代替テキストで画像の内容を理解します。代替テキストの欠落は画像検索からの流入を損ないます。
  • グレースフルデグラデーション。 画像が読み込めなかった場合、ユーザーが目にするのは代替テキストです。

良い代替テキストと悪い代替テキスト

意図 良い代替テキスト 悪い代替テキスト
製品写真 「木製デスクの上の赤い陶器のマグカップ、取っ手は左」 「マグカップの画像」
スクリーンショット 「メール、パスワード、SSOボタンのあるログインページ」 「screenshot.png」
装飾用 ""（純粋な装飾には空の代替テキスト） 「装飾画像」
インフォグラフィック 「棒グラフ：売上が2026年に3億円へ、2023年の1億円から増加」 「棒グラフ」

落とし穴

  • 代替テキストを「〜の画像」で始めないでください、スクリーンリーダーはすでに画像であると読み上げます。
  • 絶対パスと相対パス。 相対パスは、ドキュメントがそのフォルダーの外でレンダリングされると壊れます（例：GitHubのプレビュー）。迷ったら絶対パスを使いましょう。
  • URL内のスペースはURLエンコードが必要です。スペースの代わりに%20を使わないと画像が読み込まれません。

よくある質問

素のMarkdownではできません。ほとんどのレンダラー（GFM、Docusaurus、MkDocs）はサイズ指定に生のHTMLを使います、<img src="..." width="400" alt="...">。一部の方言は![alt](url =400x)をサポートしますが、共通ではありません。

altはスクリーンリーダーに読み上げられ、画像の読み込みに失敗したときに表示されるテキストです。titleはホバー時に表示されるツールチップで、通常は任意であり、タッチデバイスでは無視されます。

画像が複数回現れるとき、またはURLが長くて段落が読みづらくなるときです。参照形式は本文を読みやすく保ち、URLの変更を一箇所の編集だけで済ませられます。

はい、画像をリンクの中に入れ子にすること（[![alt](img)](url)）は標準のCommonMarkです。レンダリング結果は<img>を包むハイパーリンクになります。

関連ツール

ASCII表リファレンス

0から127までの完全なASCII表です。NUL、LF、DELなどの制御コードを含め、各文字の10進数、16進数、8進数、2進数、HTML数値文字参照を表示します。

HTML文字参照

HTMLエンティティの検索可能なリスト、その名称コードおよび数値コード、および特殊文字や記号のワンクリックコピー機能を提供します。

キーボードショートカット一覧

macOS、Windows、Linux向けに、VS Code、Chrome、GNU Readlineを使うBashの公式資料に基づく既定ショートカットを検索できます。

JavaScript圧縮ツール

変数名のリネーム、空白の削除、デッドコードの除去、定数畳み込みでJavaScriptを圧縮し、より小さなバンドルを作成します。

メールアドレス検証ツール

メールアドレスを検証します。RFC 5322構文チェック、MXレコードのライブ確認に加え、ローカル部、ドメイン、長さの詳細を表示します。メールは送信されません。

EditorConfig ジェネレーター

インデントのスタイルとサイズ、改行コード、文字コード、空白ルールを指定して .editorconfig ファイルを生成し、IDE やエディタをまたいで書式を統一できます。

このツールは他の言語でも利用できます