ページごとにデザインが異なるウェブサイトの裏側：技術調査レポート

by

はじめに

雑誌のような多彩なデザインが特徴的な、あるブログサイトを見ていて、「どうやってこんなに異なるページデザインを実現しているんだろう？」と疑問に思いました。一般的なブログサイトでは、テンプレートを使って統一感のあるデザインを適用するのが普通です。しかしこのサイトでは、記事によって全く異なるレイアウトやデザインが使われています。まるで一冊の雑誌の中でページをめくるたびに違った世界が広がるような感覚です。

この記事では、そんな個性的なウェブサイトがどのような技術で作られているかを調査した体験を共有します。

調査方法：ソースコードから読み解く

ウェブサイトがどのように作られているかを知るには、ブラウザの開発者ツールを使うのが一番です。

Chromeブラウザで該当サイトを開き、右クリックして「ページのソースを表示」を選択すると、そのページのHTMLコードが表示されます。この「設計図」から、サイトの構造や使われている技術についての手がかりが得られます。

以下は、実際に見つかったHTMLコードの一部です（疑似コード）:

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>特集：四季を楽しむ暮らし</title>
  <link rel="stylesheet" href="/assets/css/base.css">
  <link rel="stylesheet" href="/special/seasons/style.css"> <!-- ページ固有のCSS -->
</head>
<body class="special-feature seasons">
  <header class="site-header">
    <!-- ヘッダーコンテンツ -->
  </header>
  
  <main class="content-area">
    <article class="feature-article">
      <h1 class="feature-title">四季を楽しむ暮らし</h1>
      <!-- 記事コンテンツ -->
    </article>
  </main>
  
  <footer class="site-footer">
    <!-- フッターコンテンツ -->
  </footer>
  
  <script src="/assets/js/common.js"></script>
  <script src="/special/seasons/script.js"></script> <!-- ページ固有のJavaScript -->
</body>
</html>
Code language: HTML, XML (xml)

別のページのHTMLを見ると、構造は似ていても使用するCSSやJavaScriptが全く異なることがわかります:

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>インタビュー：クリエイターの仕事場</title>
  <link rel="stylesheet" href="/assets/css/base.css">
  <link rel="stylesheet" href="/interview/workspace/style.css"> <!-- 全く異なるページ固有CSS -->
</head>
<body class="interview creator-workspace">
  <!-- 内容は省略 -->
</body>
</html>
Code language: HTML, XML (xml)

サイト基本構造の特徴

このサイトの基本構造を見ると、いくつかの特徴が見えてきました。

まず、HTMLとCSSのコードがとてもシンプルです。複雑な入れ子構造や装飾よりも、必要最小限の要素でページが構成されています。これは雑誌のレイアウトのように、内容を見やすく伝えることに焦点を当てた設計と言えるでしょう。

もう一つ気づくのは、ページごとに異なるHTMLとCSSファイルが使われていることです。通常のブログサイトでは、すべてのページに同じテンプレートを適用するのが一般的ですが、このサイトでは記事によって全く異なるコードが使われていました。

CMSの使用状況

多くのブログサイトはCMS（コンテンツ管理システム）と呼ばれるソフトウェアで運営されています。CMSとは、ウェブサイトのコンテンツを簡単に管理・更新するためのシステムです。例えるなら、CMSは本棚のようなもので、記事という本を整理して、必要なときに取り出せるようにする仕組みです。

一般的なCMSを使っていれば、HTMLソースコードにその痕跡が残ります。例えば、WordPressを使っていれば「wp-content」や「wp-includes」といった特有の単語がコード内に見つかります。これは本棚にメーカーのロゴが刻印されているようなものです。

WorldPressのような一般的なCMSのHTMLコードは次のような感じです:

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>ブログタイトル | 記事タイトル</title>
  <link rel='stylesheet' id='wp-block-library-css' href='https://example.com/wp-includes/css/dist/block-library/style.min.css' type='text/css' media='all' />
  <!-- 多数のWordPress関連ファイルが読み込まれる -->
</head>
<body class="post-template-default single single-post">
  <div id="page" class="site">
    <!-- WordPressの特徴的な構造 -->
  </div>
  <script type='text/javascript' src='https://example.com/wp-includes/js/wp-embed.min.js'></script>
  <!-- 多数のWordPress関連スクリプト -->
</body>
</html>
Code language: HTML, XML (xml)

しかし、このサイトではそのような一般的なCMSの痕跡は見当たりませんでした。代わりに独自のクラス名やID名が使われており、カスタムで開発されたシステムを使っている可能性が高そうです。これは、既製品の本棚ではなく、自分で設計した特注の本棚を使っているようなものです。

ディレクトリ構造

サイトのURLを見ると、そのサイトの「住所」のようなものがわかります。調査したサイトでは、論理的なカテゴリーと日付ベースのURLが使われていました。

https://example.com/                         # トップページ
https://example.com/special/seasons/         # 特集記事
https://example.com/interview/workspace/     # インタビュー記事
https://example.com/2023/04/15/spring-event/ # 日付ベースの記事
Code language: JavaScript (javascript)

トップページは「index.html」という名前で、その他のページはコンテンツに関連する英語名が使われています。これは、本の目次のような役割を果たし、コンテンツを整理しやすくするための工夫です。

CSS/JavaScript

CSS構造の分析

ウェブサイトの見た目を決めるCSSも、このサイトでは特徴的な使われ方をしています。通常、多くのサイトでは共通のCSSフレームワークを使いますが、このサイトでは独自のCSSスタイルが使われています。

例えば、季節特集ページのCSSはこのようになっています:

/* 四季特集ページ専用スタイル */
.seasons .feature-title {
  font-family: "游明朝", YuMincho, serif;
  font-size: 2.8rem;
  color: #345f41;
  text-align: center;
  margin-bottom: 3rem;
  position: relative;
}

.seasons .feature-title::after {
  content: "";
  display: block;
  width: 80px;
  height: 3px;
  background-color: #8baf9c;
  position: absolute;
  bottom: -1rem;
  left: 50%;
  transform: translateX(-50%);
}

.seasons .season-section {
  margin: 5rem 0;
  padding: 2rem;
  border-radius: 8px;
}

.seasons .spring { background-color: #f9f3f3; }
.seasons .summer { background-color: #f3f9f9; }
.seasons .autumn { background-color: #f9f6f3; }
.seasons .winter { background-color: #f3f3f9; }
Code language: CSS (css)

対照的に、インタビューページでは全く異なるデザインスタイルが適用されています:

/* インタビューページ専用スタイル */
.interview .creator-name {
  font-family: "Helvetica Neue", sans-serif;
  font-size: 3.2rem;
  font-weight: 700;
  color: #222;
  letter-spacing: -0.05em;
  margin-bottom: 1rem;
}

.interview .workspace-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  grid-gap: 1.5rem;
  margin: 3rem 0;
}

.interview .quote-block {
  font-size: 1.4rem;
  font-style: italic;
  line-height: 1.8;
  color: #444;
  border-left: 4px solid #ddd;
  padding-left: 2rem;
  margin: 2rem 0;
}
Code language: CSS (css)

ページごとに異なるスタイルシートが適用されていて、共通の基本スタイルと、ページ固有のスタイルを組み合わせています。これは、洋服で例えるなら、基本的なTシャツとジーンズのコーディネートに、その日の気分でアクセサリーや上着を変えるようなものです。

JavaScriptの使用

ウェブサイトの動きや対話性を実現するのはJavaScriptという言語です。調査したサイトでは、JavaScriptは控えめに使われていました。

ページごとに異なるJavaScriptファイルが読み込まれており、それぞれのページデザインに合わせた機能が実装されています。例えば:

// 特集ページ用のスクロールアニメーション
document.addEventListener('DOMContentLoaded', function() {
  const featureImages = document.querySelectorAll('.feature-image');
  
  // スクロールしたときに画像をフェードインさせる
  window.addEventListener('scroll', function() {
    featureImages.forEach(image => {
      const imageTop = image.getBoundingClientRect().top;
      const windowHeight = window.innerHeight;
      
      if (imageTop < windowHeight * 0.8) {
        image.classList.add('visible');
      }
    });
  });
});
Code language: JavaScript (javascript)

別のインタビューページでは全く異なる動きを実装しています:

// インタビューページ用のスライドショー
document.addEventListener('DOMContentLoaded', function() {
  const slideshow = document.querySelector('.workspace-slideshow');
  const slides = slideshow.querySelectorAll('img');
  let currentSlide = 0;
  
  function showNextSlide() {
    slides[currentSlide].classList.remove('active');
    currentSlide = (currentSlide + 1) % slides.length;
    slides[currentSlide].classList.add('active');
  }
  
  // 5秒ごとに次の画像を表示
  setInterval(showNextSlide, 5000);
});
Code language: JavaScript (javascript)

これは、必要最小限の機能だけを実装する効率的なアプローチと言えます。

実装方法の考察

これらの調査結果から、このサイトがどのように実装されているかについて、いくつかの可能性が考えられます。

  1. カスタム開発されたCMS：
    市販のCMSではなく、自社で開発したシステムを使っている可能性があります。これは、既製品の家具ではなく、家の間取りに合わせて特注で作った家具を使うようなものです。

以下はカスタムCMSの疑似的なコード例（推測）です:

<?php
// カスタムCMSのコンテンツ取得処理（バックエンド側）
$page_id = $_GET['id'];
$db = new Database();
$page_data = $db->query("SELECT * FROM pages WHERE id = :id", ['id' => $page_id]);

// ページに適用するテンプレートを決定
$template_id = $page_data['template_id'];
$template = $db->query("SELECT * FROM templates WHERE id = :id", ['id' => $template_id]);

// ページ固有のCSS・JSの読み込み
$custom_css = "/assets/pages/{$page_id}/style.css";
$custom_js = "/assets/pages/{$page_id}/script.js";

// テンプレートを読み込んでページを構築
include "templates/{$template['file_name']}";
?>
Code language: HTML, XML (xml)
  1. ハイブリッドアプローチ：
    一部のコンテンツはCMSで管理し、特殊なデザインが必要なページは手作業で制作しているかもしれません。
  2. ヘッドレスCMS：
    バックエンドでコンテンツを管理し、フロントエンドは完全にカスタム開発している可能性もあります。これは、本の内容（テキスト）と装丁（デザイン）を別々の専門家が担当するような感覚です。
// フロントエンドのヘッドレスCMS連携コード例
async function fetchPageContent(pageId) {
  try {
    // APIからコンテンツデータを取得
    const response = await fetch(`/api/content/${pageId}`);
    const data = await response.json();
    
    // データに基づいてページを動的に構築
    document.querySelector('.page-title').textContent = data.title;
    document.querySelector('.page-content').innerHTML = data.content;
    
    // ページ固有のスタイルを動的に適用
    const styleLink = document.createElement('link');
    styleLink.rel = 'stylesheet';
    styleLink.href = `/styles/${data.style_template}.css`;
    document.head.appendChild(styleLink);
    
  } catch (error) {
    console.error('コンテンツの取得に失敗しました', error);
  }
}
Code language: JavaScript (javascript)

WordPressでの同様の実装方法

WordPress自体は標準的なテンプレートシステムを使っていますが、記事ごとに異なるデザインを実現することも可能です。カスタムCSSとカスタムスクリプトを使うことで、この雑誌のようなサイトのデザインの多様性を実現できます。

記事ごとにカスタムCSSを適用する方法

WordPressで記事ごとに異なるスタイルを適用する主な方法は以下の通りです:

  1. カスタムフィールドを使う：
    WordPressの管理画面でカスタムフィールドを作成し、そこにCSS記述を入れます。
<?php
// functions.php に追加するコード
function add_custom_css_to_post() {
  // 投稿IDを取得
  $post_id = get_the_ID();

  // この投稿のカスタムCSSを取得
  $custom_css = get_post_meta($post_id, 'custom_css', true);

  if (!empty($custom_css)) {
    echo '<style type="text/css">' . $custom_css . '</style>';
  }
}
add_action('wp_head', 'add_custom_css_to_post');Code language: HTML, XML (xml)

管理画面では以下のようにCSSを追加します:

/* 記事IDに基づいたセレクタを使用 */
.post-123 .entry-title {
  font-family: "游明朝", YuMincho, serif;
  font-size: 2.5rem;
  color: #8a2be2;
}

.post-123 .entry-content p {
  font-size: 1.1rem;
  line-height: 1.9;
  color: #333;
}Code language: CSS (css)
  1. カテゴリーごとにスタイルを変える：
    記事のカテゴリーによってデザインを切り替える方法もあります。
<?php
// テーマのheader.phpなどに追加
$categories = get_the_category();
if (!empty($categories)) {
  $category_slug = $categories[0]->slug;
  echo '<link rel="stylesheet" href="' . get_template_directory_uri() . '/css/category-' . $category_slug . '.css">';
}
?>Code language: HTML, XML (xml)
  1. 投稿タイプごとのテンプレート：
    WordPress標準機能の「投稿タイプ」を使って、特集記事用、インタビュー記事用など、目的別のテンプレートを作成します。
<?php
// functions.php に追加
function register_custom_post_types() {
  register_post_type('feature', [
    'public' => true,
    'label' => '特集記事',
    'supports' => ['title', 'editor', 'thumbnail'],
    'has_archive' => true,
  ]);

  register_post_type('interview', [
    'public' => true,
    'label' => 'インタビュー',
    'supports' => ['title', 'editor', 'thumbnail'],
    'has_archive' => true,
  ]);
}
add_action('init', 'register_custom_post_types');Code language: HTML, XML (xml)

そして、それぞれの投稿タイプ用のテンプレートファイル（single-feature.php、single-interview.phpなど）を作成し、異なるCSSを読み込みます。

カスタムJavaScriptの実装

記事ごとに異なるJavaScriptを適用することも可能です:

<?php
// functions.php に追加
function add_custom_js_to_post() {
  $post_id = get_the_ID();
  $custom_js = get_post_meta($post_id, 'custom_js', true);

  if (!empty($custom_js)) {
    echo '<script type="text/javascript">' . $custom_js . '</script>';
  }
}
add_action('wp_footer', 'add_custom_js_to_post');Code language: HTML, XML (xml)

カスタムフィールドに以下のようなJavaScriptを記述します:

// この記事専用のスライドショー
document.addEventListener('DOMContentLoaded', function() {
  const images = document.querySelectorAll('.post-gallery img');
  let current = 0;

  setInterval(function() {
    images[current].style.opacity = 0;
    current = (current + 1) % images.length;
    images[current].style.opacity = 1;
  }, 3000);
});Code language: JavaScript (javascript)

プラグインを活用する方法

WordPress用のプラグインを使うとより簡単に実装できます:

  1. SiteOrigin CSS：
    記事ごとにカスタムCSSを追加できるプラグイン
  2. Advanced Custom Fields：
    投稿タイプごとに異なるフィールドを追加し、それに基づいてデザインを切り替え
  3. Custom CSS Pro：
    投稿ごとや投稿タイプごとにCSSをカスタマイズできる

これらのプラグインを使うことで、コードを書かなくても管理画面から直感的に記事ごとのデザインカスタマイズが可能になります。

実装上の注意点

WordPressで記事ごとに異なるデザインを実装する際の注意点は以下の通りです:

  1. パフォーマンスへの影響：記事ごとに異なるCSSやJavaScriptを読み込むと、ページの読み込み速度が遅くなる可能性があります。
  2. 管理の複雑さ：デザインのバリエーションが増えすぎると、管理が煩雑になります。
  3. レスポンシブデザインの考慮：各スタイルがスマートフォンやタブレットでも適切に表示されるように注意が必要です。
  4. 一貫性の維持：あまりにもデザインが異なると、サイト全体の一貫性が失われる恐れがあります。

まとめ

ページごとに大きく異なるデザインを持つこのウェブサイトは、カスタム開発された管理システムを使い、高度な自由度を実現していると考えられます。市販のCMSに頼らず、独自のアプローチでコンテンツとデザインを管理することで、雑誌のような多様性と統一感を両立させています。

この調査からわかるのは、技術的な制約に縛られず、クリエイティブなビジョンを実現するためには、時に既存のツールを超えた独自のシステム開発が必要だということです。このサイトは、ウェブデザインにおける創造性と技術力の見事な融合を示す好例といえるでしょう。