Hugoには記事を分類し構成するための強力な仕組みとして、主に セクション、カテゴリー、タグ という3つの概念が存在します。
しかし、初心者にとっては「結局サイトを作るときに、どれを使えばいいの？」と迷いがちな部分でもあります。

この記事では、これら3つの手法の役割の明確な違いと最適な使い分け方、さらに「ブログとニュースでデザインを変えたい」「カテゴリー一覧だけ特別なレイアウトにしたい」といった場合に必要となるテンプレートファイル(layouts)の仕組みについて詳しく解説します。

1. 3つの分類の役割と違い

分類タイプ決まり方役割・イメージURLの例
セクションフォルダ分けサイトの「大項目」。物理的な部屋分け。
（例: ブログ、ニュース、ポートフォリオ）		/posts/
/news/
カテゴリーFront Matter記事の「主題・ジャンル」。本棚の整理。
（例: 料理、旅行、プログラミング）		/categories/cooking/
タグFront Matter記事の「キーワード・付箋」。
（例: カレー、時短、Python）		/tags/curry/

使い分けのヒント

  • セクション: 記事の「種類」が違う時に分けます。種類が違えば、ページのレイアウトも変わることが多いからです（普通のブログ記事と、商品の紹介ページ、など）。
  • カテゴリー: 1つの記事につき1つ（または少数）設定し、階層構造を持たせることもあります。
  • タグ: 1つの記事に複数設定し、横断的な検索に使います。

2. デザインを変えるためのテンプレート

ここが重要です！
Hugoは、表示するページの種類によって、使うテンプレートファイル (layouts フォルダの中身) を自動的に選び分けます。

何も用意しなければ、すべて layouts/list.html が使われます。
（※Hugo v0.145以前の旧仕様では layouts/_default/list.html が基準でした）
「ブログとニュースでデザインを変えたい」「カテゴリー一覧だけデザインを変えたい」という時は、以下のように専用ファイルを用意します。

A. セクションごとにデザインを変える

content/posts/ と content/news/ でデザインを変えたい場合：

  • Posts用: layouts/posts/list.html
  • News用: layouts/news/list.html

フォルダ名 (posts や news) と同じ名前のフォルダを layouts の中に作り、その中に list.html を置くと、そちらが優先されます。

B. カテゴリー・タグだけデザインを変える

普通の記事一覧とは別に、カテゴリー一覧ページだけデザインを変えたい場合：

  • タクソノミー用: layouts/taxonomy.html
  • ターム用: layouts/term.html

ここで用語の整理です：

  • Taxonomy (タクソノミー): 分類そのもの（categories や tags）。
  • Term (ターム): 具体的な分類名（cooking や travel）。

一般的に「カテゴリー一覧ページ（記事が並んでいるページ）」のデザインを変えたい場合は、term.html を作ります。

まとめ：優先順位

Hugoは以下の順序でファイルを探し、見つかったものを適用します（詳細なルールはもっと複雑ですが、よく使うのはこれです）。

  1. 特定セクション専用: layouts/posts/list.html
  2. 特定タクソノミー専用: layouts/categories/term.html
  3. 全タクソノミー共通: layouts/term.html
  4. 全ての一覧共通: layouts/list.html

「まずは全部 list.html で表示させて、デザインを変えたくなったら専用ファイルを作る」という進め方がオススメです！

3. 設定ファイルでの定義

セクションはフォルダを作るだけでOKですが、カテゴリーとタグ（Taxonomies）は hugo.toml でカスタマイズも可能です。
（デフォルトで categories と tags は有効になっているので、設定しなくても使えます）

もし「シリーズ(series)」という新しい分類を作りたい場合は、以下のように設定します。

[taxonomies]
  category = "categories"
  tag      = "tags"
  series   = "series"  # 新しく追加！

こうすると、Front Matterで series = ["連載A"] と書けるようになり、/series/連載a/ という一覧ページが自動生成されるようになります。

セクションとタクソノミーを使いこなしてサイトを整理しよう

  • フォルダ構成による論理的な分割 ＝ セクション
  • Front Matterによる柔軟な意味付け（分類） ＝ カテゴリー・タグ (Taxonomy)

Hugoの強力な機能であるこれら3つの特性をしっかりと理解し、用途に応じて専用の layouts/.../list.html や term.html を作成してデザイン（レイアウト）を最適化していくことで、大規模なコンテンツを持つサイトになっても破綻しない強固な構成を維持できるようになります！