こんにちは、えふてぃです！

このブログはAstroで作っているんですが、
「Markdownだけだと表現の幅が狭いな…もっと自由に表現してぇー」という願望を実現すべく、AIと壁打ちした結果MDXコンポーネントを3つ追加してみました。

結果、記事の読みやすさが段違いに良くなったので、今回はその紹介をしていきますー！

🎯 なぜMDXコンポーネントを追加したのか

技術ブログを書いていて(まだ全然書いてないけど)、こんな課題を感じていました：

• 会話形式の説明がしたい: 「Q: ○○ってなに？ A: △△です」みたいなやつ。あれをやりたくなった。
• 重要な情報を目立たせたい: 注意事項やヒントを視覚的に強調したい
• 画像にキャプションを付けたい: スクリーンショットに説明を添えたい

Markdownだけだと自由な表現が難しそうだ…。

そこで、3つのカスタムコンポーネントを作りました！

💬 1. ChatBubble（チャット吹き出し）

会話形式で説明できるコンポーネントです。実際に使ってみますね：

カスタムアイコンも使える

使い方

MDXファイルに以下のように書くだけなのでかなりシンプル：

<ChatBubble type="user">
  質問内容をここに書きます
</ChatBubble>

<ChatBubble type="assistant">
  回答内容をここに書きます
</ChatBubble>

<!-- アイコンをカスタマイズする場合 -->
<ChatBubble type="user" icon="😊">
  好きな絵文字を指定できます
</ChatBubble>

---

📦 2. InfoBox（情報ボックス）

重要な情報を目立たせたい時に使用するコンポーネントです。

ヒント（tip）- 黄色

注意（warning）- オレンジ

成功/メリット（success）- 緑

危険/デメリット（danger）- 赤

情報（info）- 青

もちろんタイトルもカスタマイズできる

使い方

<!-- 基本的な使い方 -->
<InfoBox type="tip">
  ヒントの内容をここに書きます
</InfoBox>

<!-- タイトルをカスタマイズ -->
<InfoBox type="warning" title="重要なお知らせ">
  カスタムタイトルを付けられます
</InfoBox>

個人的な使い分けのコツ:

• tip: 読者が「なるほど！」と思うような有益な情報
• warning: ミスしやすいポイントや注意事項
• success: メリット、成功事例、推奨事項
• danger: デメリット、避けるべき行動、セキュリティ警告
• info: 補足情報、参考資料、豆知識

---

🖼️ 3. ImageBox（キャプション付き画像）

画像に枠線とキャプションを付けて、見栄え良く表示できます。

中央配置（デフォルト）

何も指定しないと、画像は中央に配置されます。メインビジュアルや大きく見せたい画像に最適です。

左寄せ

使い方

<!-- まず画像をインポート -->
import myImage from '../../assets/blog/sample.jpg';

<!-- 中央配置（デフォルト） -->
<ImageBox
  src={myImage}
  alt="画像の説明"
  caption="画像のキャプション"
/>

<!-- 左寄せ -->
<ImageBox
  src={myImage}
  alt="画像の説明"
  caption="左寄せの画像"
  align="left"
/>

<!-- 右寄せ -->
<ImageBox
  src={myImage}
  alt="画像の説明"
  caption="右寄せの画像"
  align="right"
/>

---

🎨 実際の記事で組み合わせて使う

これからの記事ではこれらのコンポーネントを組み合わせて使っていきます。

例えば１つ前に投稿した、Astroの使い方を説明する記事なら：

こんな感じで、会話形式で説明しつつ、重要なポイントをInfoBoxで強調して使っていきます。
ただ多用すると逆効果なので適度に使う予定です👍

---

📝 実装した時に意識したこと

---

まとめ

MDXコンポーネントを追加したことで、記事の表現の幅が広がって、これからブログ書いていくのが楽しみになってきました〜！

ブログの感想や意見があれば、ぜひXで教えてください！