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>を包むハイパーリンクになります。

関連ツール

Webpack設定ジェネレーター

短いフォームからwebpack 5のwebpack.config.jsを生成します。entry・出力フォルダー・モードを設定し、TypeScript、Babel、CSSローダー、HtmlWebpackPlugin、開発サーバーを切り替えるだけです。

CMYK から RGB への変換

標準的な計算式で CMYK の割合をおおよその RGB 値と Hex 値に変換し、画面用にすばやく確認できます。

.gitignore ジェネレーター

Laravel、Node.js、Python、Rails のプロジェクト用除外ルールを組み合わせます。結果をコピーするか、.gitignore 入りの ZIP をダウンロードできます。個人用ルールは別に表示します。

16進数から10進数への変換ツール

16進数を10進数（10進法）に変換します。メモリアドレス、エラーコード、RGBチャンネル、任意精度の整数に対応します。

Dockerfileジェネレーター

5つのアプリ構成に合うDockerfileと.dockerignoreを作成。実際の起動対象、作業ディレクトリ、内部ポートを入力し、両方のファイルを確認できます。

tsconfig.json ジェネレーター

target、module、moduleResolution、JSXと定番のstrict系フラグを選んで、きれいなtsconfig.jsonを生成。そのままプロジェクトにコピーできます。

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