Markdown で 2 枚の画像を横並びにする方法

技術文書やビジネス文書では、画像を横並びに表示することで多くの重要な利点が得られます：

• 比較分析：製品の前後比較、バージョン違い、A/Bテスト結果を明確に提示
• スペース効率：垂直スペースを節約しながら、コンパクトな文書構造を維持
• 視覚的インパクト：関連する画像をグループ化して、読者の注目を集める
• プロフェッショナルな向上：整理されたレイアウトで文書の質と信頼性を向上

1. UI/UXデザイン：モックアップの比較とユーザーフローの違いを表示
2. データビジュアライゼーション：グラフの比較とトレンド分析結果を提示
3. プロダクトデモ：機能の前後比較とバージョン違いを明確に表示
4. 技術文書：セットアップ画面の手順とコード実行結果を並行して表示

<div style="display:flex; gap:20px; align-items:center; justify-content:center; background:#f8f9fa; padding:16px; border-radius:8px;">
  
  <figure style="margin:0; text-align:center;">
    <img src="before-screenshot.png" style="width:50%; max-width:400px; height:auto; border:1px solid #e0e0e0; border-radius:4px; box-shadow:0 2px 4px rgba(0,0,0,0.1);" alt="最適化前のインターフェース">
    
    <figcaption style="margin-top:8px; font-size:14px; color:#666;">図1：最適化前のインターフェース</figcaption>
  </figure>
  
  <figure style="margin:0; text-align:center;">
    <img src="after-screenshot.png" style="width:50%; max-width:400px; height:auto; border:1px solid #e0e0e0; border-radius:4px; box-shadow:0 2px 4px rgba(0,0,0,0.1);" alt="最適化後のインターフェース">
    
    <figcaption style="margin-top:8px; font-size:14px; color:#666;">図2：最適化後のインターフェース</figcaption>
  </figure>
</div>

コアアドバンテージ：

• レスポンシブデザイン：画面サイズに自動的に適応
• 精密なコントロール：間隔、アライメント、背景、ボーダーの詳細設定が可能
• アクセシビリティ：figure/figcaptionタグでセマンティック構造を提供
• クロスプラットフォーム互換性：ほぼすべてのMarkdownレンダラーで動作

![最適化前のインターフェース](before-ui.png){width=45%} ![最適化後のインターフェース](after-ui.png){width=45%}

*図1と図2：ユーザーインターフェース最適化の比較*

機能：

• 簡潔なライティング：最小限の記法で最大の効果を達成
• プラットフォームサポート：Obsidian、Hugo、Jekyllなどのエンジンで動作
• 簡単なメンテナンス：HTMLタグ不要、Markdownの簡潔さを維持

```{r layout-comparison, fig.show='hold', fig.width=8, fig.height=5, out.width='45%', fig.cap=c('最適化前のプロット', '最適化後のプロット')}
library(ggplot2)

# データ準備
before_data <- data.frame(x = 1:10, y = rnorm(10, mean = 5, sd = 2))
after_data <- data.frame(x = 1:10, y = rnorm(10, mean = 7, sd = 1))

# プロット作成
p1 <- ggplot(before_data, aes(x, y)) + geom_line(color = "red") + theme_minimal() + ggtitle("最適化前")
p2 <- ggplot(after_data, aes(x, y)) + geom_line(color = "green") + theme_minimal() + ggtitle("最適化後")

# 横並び表示
gridExtra::grid.arrange(p1, p2, ncol = 2)
```

プロフェッショナル機能：

• 自動レイアウト：fig.show='hold'で自動的に横並び配置
• 一貫したサイズ：out.widthパラメータで正確な幅コントロール
• キャプション管理：fig.capで個別のキャプション設定

<div style="display:flex; flex-wrap:wrap; gap:clamp(12px, 2vw, 24px); justify-content:center;">
  
  <div style="flex:1 1 300px; min-width:0;">
    <img src="mobile-view.png" style="width:100%; height:auto; object-fit:contain;">
    
    <p style="text-align:center; margin-top:8px; font-size:clamp(12px, 1.5vw, 14px);">モバイルビュー</p>
  </div>
  
  <div style="flex:1 1 300px; min-width:0;">
    <img src="desktop-view.png" style="width:100%; height:auto; object-fit:contain;">
    
    <p style="text-align:center; margin-top:8px; font-size:clamp(12px, 1.5vw, 14px);">デスクトップビュー</p>
  </div>
</div>

<div role="group" aria-label="インターフェース比較画像">
  
  <figure role="img" aria-labelledby="fig1-caption">
    <img src="before.png" alt="最適化前の混雑したインターフェース" style="width:48%;">
    
    <figcaption id="fig1-caption">図1：最適化前 - 情報が密集している</figcaption>
  </figure>
  
  <figure role="img" aria-labelledby="fig2-caption">
    <img src="after.png" alt="最適化後の整理されたインターフェース" style="width:48%;">
    
    <figcaption id="fig2-caption">図2：最適化後 - 情報が整理され、可読性が向上</figcaption>
  </figure>
</div>

1. レイアウトプリセット比較：

   • デッキモード：プレゼンテーション用、寛大な余白
   • モバイルモード：縦向きレイアウト、ソーシャルメディア向き
   • フォーカスモード：コンテンツ重視、比較に適した

2. カラーテーマ最適化：

   • ライト背景：ビジネス文書、レポート
   • ダーク背景：デモ、プレゼンテーション
   • ブランドカラー：マーケティング資料

/* カスタムスタイル例 */
.image-comparison-container {
  background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
  padding: 24px;
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.1);
}

.comparison-image {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  border: 2px solid #ffffff;
  box-shadow: 0 4px 16px rgba(0,0,0,0.15);
}

.comparison-image:hover {
  transform: scale(1.02);
  box-shadow: 0 8px 32px rgba(0,0,0,0.2);
}

• PNG：高品質で汎用的、すべてのプラットフォームに適した
• SVG：ベクターグラフィックで無限のスケーラビリティ、技術文書に最適
• WebP：モダンなフォーマットでファイルサイズが小さい、ウェブ向き

### 新機能ダッシュボード
<div style="display:flex; gap:20px; margin:20px 0;">
  
  <div style="flex:1;">
    <h4>古いダッシュボード</h4>
    <img src="old-dashboard.png" style="width:100%; border:1px solid #e0e0e0; border-radius:4px;" alt="古いダッシュボードインターフェース">
    
    <ul style="font-size:14px; color:#666; margin-top:8px;">
      <li>情報が分散</li>
      <li>ナビゲーションが不明確</li>
      <li>応答が遅い</li>
    </ul>
  </div>
  
  <div style="flex:1;">
    <h4>新しいダッシュボード</h4>
    <img src="new-dashboard.png" style="width:100%; border:1px solid #e0e0e0; border-radius:4px;" alt="新しいダッシュボードインターフェース">
    
    <ul style="font-size:14px; color:#666; margin-top:8px;">
      <li>重要情報が一目で</li>
      <li>直感的なナビゲーション</li>
      <li>リアルタイム更新</li>
    </ul>
  </div>
</div>

### Q4 2024 パフォーマンス分析
<div style="display:flex; gap:24px; align-items:flex-start;">
  
  <div style="flex:1;">
    <h4>収益トレンド</h4>
    <img src="revenue-trend.png" style="width:100%; border:1px solid #e0e0e0; border-radius:4px;" alt="収益トレンドグラフ">
    
    <p style="font-size:14px; color:#666; margin-top:8px;">
      前年比120％増を達成
    </p>
  </div>
  
  <div style="flex:1;">
    <h4>市場シェア</h4>
    <img src="market-share.png" style="width:100%; border:1px solid #e0e0e0; border-radius:4px;" alt="市場シェア円グラフ">
    
    <p style="font-size:14px; color:#666; margin-top:8px;">
      35％の市場シェアを確保
    </p>
  </div>
</div>

1. 画像歪み問題：

   • 原因：アスペクト比の異なる画像を同じサイズに強制的に合わせる
   • 解決策：比率を維持するために object-fit: contain; を使用

2. モバイル表示の問題：

   • 原因：固定幅を使用
   • 解決策：flex-wrap: wrap; を min-width と組み合わせる

3. 読み込み速度の問題：

   • 原因：大きな画像ファイルを直接使用
   • 解決策：画像を最適化し、適切なフォーマットを選択

## アクセシビリティチェックリスト
✅ 各画像に適切なalt属性を設定
✅ 色のコントラスト比がWCAG標準を満たす（4.5:1以上）
✅ スクリーンリーダー用の説明を提供
✅ キーボードナビゲーションが可能
✅ ハイコントラストモードでコンテンツが読める
✅ 200％の画面拡大で表示が適切に機能