Markdown HTML 組み合わせで作る！デザイン性に優れた記事の書き方と実践テクニック - マークダウン入門ナビ

記事を読みやすく、しかもビジュアルに余裕を持たせたいとき、Markdownだけでは限界を感じることが多いです。そこで Markdown と HTML を組み合わせて書く アプローチを紹介します。
この手法を使えば、デザイン性の高い記事を効率的に構築でき、読者の注目を集めやすくなります。
以下では、実際に手に取りやすいテクニックを中心に、設計から実装までを段階的に解説します。

1. Markdown に HTML を混ぜるメリット

(1) 記事の構造をそのまま保つ
Markdown は見出しやリスト、リンクなど、記事の骨格を簡潔に書けます。その構造を保ちながら、必要に応じて HTML を挿入すれば、余計な編集作業をせずにデザインを補強できます。

(2) 既存ツールとの互換性
GitHub Pages、Jekyll、Hugo、Notion、WordPress など、多くのマークダウン対応サービスは基本的に HTML をサポートしています。だから、Markdown の利便性を保ちつつ、HTML カスタマイズを行うことで、ほとんどの環境で再現性があります。

(3) コーディングの自由度
CSS を組み込むなど、細かいレイアウトを制御したいときに、標準的な Markdown だけでは難しい制御を HTML と CSS で実現できます。特定のセクションだけ横並びや色分けしたい場合に便利です。

2. 基本的な混合書き方

2-1. インライン HTML を使う

# タイトル

この記事では、Markdown と **HTML** を組み合わせてデザイン性に優れた記事を構築する方法を解説します。

<p style="color:#e91e63;">※この段落はインライン HTML で、文字色を変えています。</p>

- リストアイテム1
- リストアイテム2

ポイント
- インライン HTML は単にタグだけ挿入すれば OK。
- ただし、<p> から始まる段落タグは自動で閉じられるので、スタイルだけを追加する形で書くのがベストです。

2-2. カスタム CSS を埋め込む

GitHub Pages のように Jekyll を使う場合は、_layouts ディレクトリにあるテンプレートに CSS を追加できます。
記事ページの上部に <style> タグを書いても大丈夫です。

<style>
.article-banner {
  background: url('banner.jpg') no-repeat center;
  height: 300px;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2em;
}
</style>

<div class="article-banner">
  デザイン性に優れた記事を作ろう！
</div>

ポイント
- <style> タグを使う場合、ページ全体に影響しないようにクラス名を限定的にします。
- 画像 URL は相対パスまたは CDN から参照すると読み込みが速くなります。

2-3. 画像とリンクの高度な配置

<div style="display:flex; gap:1rem;">
  <img src="photo1.jpg" alt="写真1" style="width:48%;">
  <img src="photo2.jpg" alt="写真2" style="width:48%;">
</div>

[Link to external resource](https://example.com){.btn}

ポイント
- display:flex を使うと、画像を横並びにできます。
- {.btn} のようにクラスを付けられる拡張機能（kramdown など）が使える環境なら、ボタン風にスタイリングできます。

3. デザインシステムの導入

3-1. 変数定義（CSS Custom Properties）

記事全体に共通する色やフォントサイズを変数で管理すれば、変更が簡単にできます。

<style>
:root {
  --primary-color: #2a9d8f;
  --accent-color: #e9c46a;
  --font-base: 16px;
}
.article-heading {
  color: var(--primary-color);
}
.article-highlight {
  background: var(--accent-color);
}
</style>

3-2. コンポーネント化

「ヒントボックス」「コールアウト」「FAQリスト」など、再利用可能なブロックを作ります。

:::note
**TIP**: この機能を使うと、記事全体の一貫性が保たれます。
:::

ポイント
- Jekyll + Kramdown では ::: を使ったブロックエディットが可能です。
- Hugo では短いシンタックスを使用できます。
- それぞれの CMS でサポートされている拡張機能を確認し、共通化してください。

4. レスポンシブ対応のテクニック

4-1. メディアクエリ

<style>
@media (max-width: 768px) {
  .article-banner {
    height: 180px;
    font-size: 1.5em;
  }
  .article-flex img {
    width: 100%;
  }
}
</style>

ポイント
- スマートフォンでは横幅が狭くなるため、画像は垂直に積むようにします。
- フォントサイズを小さくして読みやすく保ちます。

4-2. ビューポートに合わせた画像

![代替テキスト](image-small.jpg){.img-responsive}

ポイント
- class="img-responsive" は CSS で max-width:100%; height:auto; を定義しておくと、画面サイズに合わせて自動調整されます。
- Jekyll で jekyll-picture-tag パッチを利用すると、複数解像度の画像を自動生成できます。

5. SEO と読みやすさの両立

観点	対策
見出しタグ	Markdown では `#` を使うが、HTML の `<h1>` から `<h5>` まで併用して、構造を明確にする。
alt 属性	画像は必ず `alt` を設定し、SEO とアクセシビリティの両方を意識。
構造化データ	`schema.org` の JSON-LD を `<script>` タグで埋め込み、記事属性をマークアップ。
キーワード	見出しにキーワードを散りばめつつ、自然な文章を優先。

<script type="application/ld+json">
{
  "@context":"https://schema.org",
  "@type":"Article",
  "headline":"Markdown HTML 組み合わせで作る！デザイン性に優れた記事の書き方と実践テクニック",
  "author":{"@type":"Person","name":"ユーザー名"},
  "datePublished":"2025-12-04"
}
</script>

6. 実践ワークフロー：始めるから公開まで

Markdown ファイル作成
- article.md を作成し、基本構文だけ先に敷き詰めます。
- 画像は assets/images/ 配下に保管。
HTML インサート
- 上述のインラインタグや <style> タグを埋め込みます。
- 必要に応じて CSS クラス定義を style タグ内または外部ファイルに分割。
テンプレートに埋め込む
- Jekyll なら _layouts/post.html に共通 CSS もしくは JS を入れます。
- 変更が頻繁に発生しない場合は、記事単位で <style> を書くのもOK。
ローカルプレビュー
- bundle exec jekyll serve でローカルサーバーを立ち上げ、意図したレイアウトか確認。
- ブラウザの DevTools で emulate を使い、モバイル閲覧を確認します。
Git Push
- 変更をコミットし、GitHub へ push。
- GitHub Pages が自動でビルドし公開されます。
最終チェック
- URL から手動で確認し、リンク切れやレイアウト崩れがないか確認。
- SEO ツール（Google Search Console、PageSpeed Insights）で結果を確認し、必要なら微調整。

7. よくある質問 (FAQ)

Q1. Markdown だけでデザインはできない？
A1. 基本的なレイアウト（見出し、リスト、画像）は Markdown だけで十分です。しかし、色や配置、独自のデザイン要素を追加したい場合は HTML + CSS を混ぜる方が柔軟です。

Q2. HTML を入れすぎると可読性が落ちるのでは？
A2. 重要なのは「必要な分だけ」と「クラス名を意味のある名前で統一」すること。コメントアウトで記述意図を書いておくと、後から編集しやすいです。

Q3. 画像が遅くならないか不安。
A3. 画像は圧縮（pngquant、tinyPNG 等）し、WebP も併用すると高速です。また loading="lazy" 属性で遅延読み込みを有効にすると、ページロードが改善します。

Q4. CSS が他の記事にも影響しないようにしたい。
A4. 可能なら記事単位の Scoped CSS （<style scoped> 等）を使い、もしくはユニークなクラス名を付けてネームスペース化します。

8. まとめ

Markdown だけでなく HTML と CSS を組み合わせることで、以下のメリットが得られます。

柔軟性：レイアウトやデザインを細部まで調整できる。
再利用性：コンポーネント化によって記事間で共通化できる。
SEO 強化：構造化データや見出しタグの適切な使用で検索エンジンに明確な情報を提供。
高速化：画像最適化と Lazy Load で読み込み速度を保つ。

最後に、実践の際は「コード量と可読性のバランス」を意識し、必要最低限の HTML と CSS だけを埋め込むよう心がけましょう。
これで、読者にとって情報が届きやすく、デザインも際立った記事を作成できるはずです。