デザインカスタマイズ集 ―
こうしたい時はこう書く
完成したcafé SOELのサイトを、自分の手で「自分らしく」育てていくための一冊。配色を変える、フォントを差し替える、ダークモードに対応する、レイアウトを組み替える、2ページ目を追加する。よくある「こうしたい」をひとつずつ形にしていきましょう。
前回のおさらい
- 番外編第1回でCSSアニメーションを学び、フェードインの動きを準備しました
- 番外編第2回でJavaScriptを書き、ハンバーガーメニューやスクロール連動が動くようになりました
- 本編10回＋番外編2回で、café SOELは「動いて、伝わる」サイトに仕上がりました
ここまでで、café SOELは公開できる完成度に達しました。さて、ここからはあなたの番です。色を変えてみたい、フォントをもう少し柔らかくしたい、夜に見たときに目が疲れないダークモードがほしい――そんな「ちょっとこうしたい」を叶えるためのカスタマイズ集をお届けします。
今回のゴール
- CSS変数を書き換えるだけで、サイト全体の配色をガラッと変えられるようになる
- Google Fontsから別のフォントを選び、サイトの印象をコントロールできるようになる
- OSの設定に追従するダークモードを、追加のJavaScriptなしで実装できる
- メニューを3列に変える、ギャラリーの組み方を変えるなどレイアウトのバリエーションを使い分ける
- 2ページ目（メニュー詳細ページ）を追加し、複数ページサイトの基礎を理解する
カスタマイズの作法 ― いきなり全部書き換えない
本題に入る前に、ひとつだけお伝えしたいことがあります。せっかく完成したサイトをカスタマイズするとき、初心者の方がよくやってしまうのが「あちこちのCSSを直接書き換えてしまう」こと。これをやると、後で「あれ、元の状態どうだったっけ？」となって戻れなくなります。
café SOELのCSSは、第7回までで :root に変数を集めてあります。配色やフォントを変えたいときは、基本的に :root の中身だけを書き換えればOK。これは私がいつも実務でも意識していることで、「カスタマイズはまず変数から」が鉄則です。
カスタマイズは、いじる場所を絞るほどうまくいく。変数から触る人は、サイトを壊さない。
カスタマイズ① ― 配色をガラッと変える
まず最初は、いちばん見た目の印象が変わるカスタマイズ。配色です。café SOELの現在の配色は、ベージュとブラウンを基調にした「ナチュラルでやわらかい」雰囲気。これを別のテイストに変えるには、 :root の中の色変数をまとめて差し替えるだけです。
例1：深い緑＋ゴールドの「上質な大人カフェ」
夜のバーや、深煎りコーヒー専門店のような落ち着いた雰囲気。木の温かみは残しつつ、グレード感を一段上げたいときに。
:root {
/* ↓ 配色だけを書き換える。他のプロパティは触らない */
--color-bg: #fafaf7;
--color-bg-soft: #f1efe9;
--color-bg-accent: #e8e4dc;
--color-text: #1f2a26;
--color-text-light: #5a665f;
--color-text-muted: #8a9690;
--color-accent: #2d4a3e; /* 深い緑 */
--color-accent-light: #c9a96e; /* ゴールド */
--color-border: #dcd8d0;
--color-white: #ffffff;
--color-black: #0f1816;
}例2：ピンクベージュ＋ボルドーの「フェミニンな焼菓子店」
パティスリーや女性向けのカフェに合う、やわらかくて少し甘い配色。
:root {
--color-bg: #fffaf7;
--color-bg-soft: #faeee6;
--color-bg-accent: #f3dccd;
--color-text: #3a2a2a;
--color-text-light: #7a5d5d;
--color-text-muted: #b09494;
--color-accent: #8b2d3a; /* ボルドー */
--color-accent-light: #d8a5a5; /* くすみピンク */
--color-border: #ecd9d0;
--color-white: #ffffff;
--color-black: #2a1a1a;
}例3：モノクロ＋差し色オレンジの「都会的なロースタリー」
白・黒・グレーを基調に、アクセントだけビビッドに。スペシャルティコーヒー店やデザイン事務所に合う配色です。
:root {
--color-bg: #ffffff;
--color-bg-soft: #f5f5f5;
--color-bg-accent: #e8e8e8;
--color-text: #1a1a1a;
--color-text-light: #555555;
--color-text-muted: #999999;
--color-accent: #ff5722; /* ビビッドオレンジ */
--color-accent-light: #ffab8a;
--color-border: #dddddd;
--color-white: #ffffff;
--color-black: #000000;
}カスタマイズ② ― フォントを差し替える
配色の次に印象を決めるのが、フォントです。café SOELでは見出しに Cormorant Garamond、本文に Noto Sans JP を使っていました。ここを差し替えるだけで、サイトの「声」が変わります。
ステップ1：Google Fontsで新しいフォントを選ぶ
Google Fontsにアクセスして、好きなフォントを探します。フォント選びに迷ったら、まずは「これと組み合わせるならこれ」という定番ペアを覚えておくと早いです。
クラシックで上品 — Playfair Display × Noto Sans JP
セリフ体の中でもエレガントなPlayfair Displayは、ファッションや美容、高級志向のお店に合います。本文は引き続きNoto Sans JPで安定感を。
モダンでシャープ — Inter × Noto Sans JP
サンセリフ体のInterは、テック系・ミニマル系のサイトにぴったり。café SOELの内装に合うすっきりした印象になります。
手書き風で温かい — Caveat × Zen Maru Gothic
カフェのチョークサインのような雰囲気を出したいときに。ただし読みやすさを保つため、見出しなど一部だけに使うのがコツ。
ステップ2：HTMLのlinkタグを差し替える
例として「Playfair Display × Noto Sans JP」に変更してみましょう。Google Fontsで両方のフォントを選び、生成された <link> タグをコピーして、 index.html の既存のフォント読み込みと差し替えます。
<!-- ↓ 既存のCormorant Garamondの読み込みを、Playfair Displayに差し替える -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;600;700&family=Playfair+Display:wght@400;600;700&display=swap" rel="stylesheet">ステップ3：CSS変数のフォント名を書き換える
あとは :root のフォント変数を新しいフォント名に変えるだけ。サイト中で var(--font-display) を参照していたすべての要素が、自動的に新しいフォントに切り替わります。
:root {
/* ↓ 既存のフォント変数を書き換える */
--font-display: 'Playfair Display', Georgia, serif;
--font-body: 'Noto Sans JP', -apple-system, sans-serif;
}カスタマイズ③ ― ダークモードに対応する
夜にカフェのサイトを眺めるとき、白い背景がまぶしく感じることがあります。OSの設定がダークモードのときに、サイトも自動でダークモードに切り替わるようにしてみましょう。
ここで使うのが prefers-color-scheme というメディアクエリ。「ユーザーがダークモードを希望しているかどうか」を判定できます。CSSだけで完結し、JavaScriptは不要です。
/* ===== 第EX3で追加：ダークモード ===== */
@media (prefers-color-scheme: dark) {
:root {
--color-bg: #1a1a1a;
--color-bg-soft: #222222;
--color-bg-accent: #2a2a2a;
--color-text: #e8e4df;
--color-text-light: #b0aca7;
--color-text-muted: #7a7670;
--color-accent: #c4a882; /* やや明るく */
--color-accent-light: #e8d2a8;
--color-border: #333333;
--color-white: #1a1a1a; /* 反転 */
--color-black: #e8e4df; /* 反転 */
}
}これだけで、OSがダークモードのときは自動的に色が切り替わります。café SOELのCSSは「色を直書きせず、変数を経由して使う」設計だからこそ、メディアクエリ1つで一発切り替えができるんです。
Concept
そよぐ光と、ひと息つくひととき。café SOELは、自然光と木のぬくもりに包まれた穏やかな空間です。
Concept
そよぐ光と、ひと息つくひととき。café SOELは、自然光と木のぬくもりに包まれた穏やかな空間です。
画像にもひと工夫
ダークモードで背景に乗る画像が眩しく感じることがあります。そんなときは、画像にうっすらフィルターをかけて落ち着かせましょう。
@media (prefers-color-scheme: dark) {
.hero-image img,
.gallery-item img,
.menu-card-image img {
filter: brightness(0.85);
}
/* ロゴが黒い場合は、白く反転させる */
.logo img {
filter: brightness(0) invert(1);
}
}カスタマイズ④ ― レイアウトのバリエーション
「メニューが4品もないから3列にしたい」「ギャラリーをもっと写真集っぽく見せたい」。こうしたレイアウト変更は、Gridのプロパティを少し書き換えるだけで実現できます。
メニューを3列レイアウトにする
café SOELは2列のメニューですが、3列にすると「メニュー数が多いお店」のような見せ方になります。書き換えるのは .menu-grid の grid-template-columns だけ。
.menu-grid {
display: grid;
/* ↓ 2列から3列に変更 */
grid-template-columns: repeat(3, 1fr);
gap: 24px;
max-width: var(--container-width);
margin: 0 auto;
}
@media (max-width: 900px) {
.menu-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 600px) {
.menu-grid {
grid-template-columns: 1fr;
}
}PCで3列、タブレットで2列、モバイルで1列、と段階的に減らしていく形ですね。「ブレイクポイントごとに何列にするか」を決められれば、どんなレイアウトでも作れます。
メニューの自動レスポンシブ化
もう一段階、便利なテクニックを紹介します。 repeat(auto-fit, minmax(...)) を使うと、メディアクエリを書かなくても画面幅に応じて列数が自動で変わります。
.menu-grid {
display: grid;
/* 1列の最小幅を260pxにし、入る分だけ自動で並べる */
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
gap: 24px;
}これは私自身、実務でとてもよく使う書き方です。「とりあえず入る分だけ並べてくれればいい」というカードレイアウトに最適。
ギャラリーをシンプルな3列均等に変える
本編のギャラリーは「左に大きな1枚＋右に小さな2枚」というアシンメトリーな配置でした。これを「3枚均等」に変えると、写真集のような落ち着いた見せ方になります。
.gallery-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 16px;
}
/* ↓ 大きく表示する設定を解除する */
.gallery-item--large {
grid-row: auto;
grid-column: auto;
}
@media (max-width: 900px) {
.gallery-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 600px) {
.gallery-grid {
grid-template-columns: 1fr;
}
}カスタマイズ⑤ ― 2ページ目を追加する
ここまではすべてシングルページの中での変更でした。お店が育ってきて「メニューをもっと詳しく紹介したい」「お知らせページを作りたい」となったら、いよいよページを増やすタイミングです。
例として、メニューの詳細ページ menu.html を追加してみましょう。
ステップ1：ファイル構成を整える
my-website/
├── index.html ← トップページ
├── menu.html ← 新しく追加するメニュー詳細ページ
├── css/
│ └── style.css ← 共通のCSS
├── img/
│ └── ...
└── js/
└── main.js
大事なのは、CSSは共通の style.css を両方のページで読み込むこと。サイト全体のデザインを揃えるには、共通CSSを使い回すのがいちばんラクで安全です。
ステップ2：menu.htmlを作る
index.html を複製して名前を menu.html に変更し、中身をメニュー詳細用に書き換えます。 <head> の構造はそのまま使えます。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Menu — café SOEL</title>
<meta name="description" content="café SOELのメニュー詳細ページ。">
<!-- 共通のCSS・フォント・JSを読み込む -->
<link rel="icon" href="img/favicon.svg" type="image/svg+xml">
<link rel="stylesheet" href="css/style.css">
<script src="js/main.js" defer></script>
</head>
<body>
<header class="header">
<!-- ヘッダーは index.html と同じものをコピー -->
</header>
<main>
<section class="section">
<div class="section-header">
<span class="section-label">Menu Detail</span>
<h1 class="section-heading">すべてのメニュー</h1>
<p class="section-desc">季節ごとに変わるラインナップを、ぜひお楽しみください。</p>
</div>
<!-- ここにメニューカードを並べる -->
</section>
</main>
<footer class="footer">
<!-- フッターも index.html と同じ -->
</footer>
</body>
</html>ステップ3：ナビゲーションのリンクを書き換える
ここが2ページ目を作るときの重要ポイント。ヘッダーやフッターのナビゲーションのリンク先を、ページ間で正しく動くように修正します。
<ul class="nav-list">
<li><a href="#concept" class="nav-link">Concept</a></li>
<!-- ↓ ページ内リンク（#menu）から、別ページ（menu.html）へ -->
<li><a href="menu.html" class="nav-link">Menu</a></li>
<li><a href="#gallery" class="nav-link">Gallery</a></li>
<li><a href="#access" class="nav-link">Access</a></li>
</ul>menu.html 側からトップページの各セクションに戻りたいときは、ファイル名＋アンカーで指定します。
<ul class="nav-list">
<!-- 別ページのアンカーへは「ファイル名#アンカー」と書く -->
<li><a href="index.html#concept" class="nav-link">Concept</a></li>
<li><a href="menu.html" class="nav-link">Menu</a></li>
<li><a href="index.html#gallery" class="nav-link">Gallery</a></li>
<li><a href="index.html#access" class="nav-link">Access</a></li>
</ul>ステップ4：パンくずリストで現在地を伝える
ページが増えてきたら、ユーザーが「自分が今どこにいるか」をわかるようにする工夫が大切です。シンプルなパンくずリストを入れてみましょう。
<nav class="breadcrumb" aria-label="パンくずリスト">
<ol>
<li><a href="index.html">Home</a></li>
<li aria-current="page">Menu</li>
</ol>
</nav>.breadcrumb {
max-width: var(--container-width);
margin: 0 auto;
padding: 100px var(--container-padding) 20px;
font-size: 13px;
color: var(--color-text-muted);
}
.breadcrumb ol {
display: flex;
gap: 8px;
}
.breadcrumb li:not(:last-child)::after {
content: '/';
margin-left: 8px;
color: var(--color-text-muted);
}
.breadcrumb a:hover {
color: var(--color-accent);
}自分のサイトに育てていく
ここで紹介したのは、よくある「こうしたい」のうちのほんの一部。配色、フォント、ダークモード、レイアウト、ページ追加――この5つの軸を自由に組み合わせていけば、café SOELのサイトはあなただけのオリジナルに変わっていきます。
大切なのは、いきなり完璧を目指さないこと。まず色だけ変えてみる、次にフォントを試してみる、と一つずつ手を入れて、ブラウザで確認しながら進めるのがコツです。私もデザイン提案のときは、まずカラーパレットだけを5パターン作って比べる、というところから始めます。
サイトは作って終わりじゃなく、育てていくもの。手を入れた時間の分だけ、サイトはあなたに似てくる。
そしてもうひとつ。実際に手を動かしてみて「うまくいかない」「思ったように見えない」と感じることが、これからきっと出てきます。それは失敗ではなく、いちばんの学びの瞬間です。本編10回と番外編3回でお伝えしたことは、そうした瞬間に「どこを見ればいいか」のあたりをつけるための地図。迷ったら、いつでも戻ってきてくださいね。
講座のおわりに
「ゼロからWebサイトを作ろう！」シリーズ、本編10回と番外編3回、お付き合いいただき本当にありがとうございました。
第1回で「Hello World!」と表示するところから始まり、HTML、CSS、レスポンシブ、SEO、アクセシビリティ、サーバー公開、CSSアニメーション、JavaScript、そして今回のカスタマイズまで。あなたはもう、Webサイトを「ゼロから作って・公開して・育てていける人」です。
café SOELを土台に、自分のお店、自分の作品集、好きなテーマのファンサイト――どんな方向にも広げていけます。ここから先は、あなたのサイトをあなたが作る番です。素敵なサイトが世界に増えていくのを、楽しみにしています。
今回のまとめ
- カスタマイズはまず :root の変数から触る。直接プロパティを書き換えると後で戻せなくなる
- 配色は「ベース・サブ・アクセント」の3層で考えると、まとまりのあるパレットになる
- フォントはGoogle Fontsの <link> を差し替え、CSS変数のフォント名を更新するだけで一括変更できる
- @media (prefers-color-scheme: dark) を使えば、JavaScriptなしでOSのダークモードに自動追従できる
- レイアウトは grid-template-columns の値だけで列数を変えられる。 repeat(auto-fit, minmax(...)) なら自動レスポンシブにできる
- 2ページ目を追加するときは、共通のCSSを使い回し、ナビのリンクとtitle・descriptionをページごとに調整する
- サイトは作って終わりじゃなく、育てていくもの。本編＋番外編で身につけた地図を片手に、自分のサイトを自分の手で育てていきましょう