デザイン基礎
Halcyon デザインシステムの設計トークン・レイアウト・タイポグラフィ・グローバルスタイルを解説するページです。
コンポーネント一覧は Gallery インデックス をご覧ください。
はじめかた
HTMLの </body> 直前に1行追加するだけで準備完了です。
<script src="components/components.js"></script>
使いたいコンポーネントのタグをHTMLに書きます。属性で外見や動作をカスタマイズできます。
<hl-button>ボタン</hl-button>
<hl-alert>お知らせ文</hl-alert>
<hl-card title="カードタイトル" href="#">説明文</hl-card>
ブラウザで開くとデザインが自動適用されます。各デモページで
すべてのコンポーネントの見た目と使い方を確認できます。
Color Palette
CSSでは色を変数（CSS Custom Property）として管理します。
--clr-sage: #9AB08F のように名前をつけておけば、
color: var(--clr-sage) と書くだけで使えます。
一箇所変えるだけで全体の色が変わるため、デザインの統一・変更が簡単になります。
一般的なWebサイトの配色は「3〜5色」が理想とされています。
それより多いと統一感がなくなり、少ないと単調になりがちです。
色にはそれぞれ役割があり、用途を決めて使うことがポイントです。
| 役割 | 一般的な呼び方 | このサイトでの色 | 用途 |
|---|
| 背景色 | Base / Background | Cream | ページ全体の地色 |
| メインカラー | Primary | Sage | ボタン・アクセント・区切り線 |
| サブカラー | Secondary / Accent | Peach | ホバー変化・強調 |
| 情報色 | Informational | Dusty Blue | リンク・情報アイコン |
| テキスト色 | Text / Neutral | Brown | 見出し・本文テキスト |
↓ 下段はキャラクター別カラー（チャットUIのバブル色などに使用）
Cream
--clr-cream
#FBF6EA
Peach
--clr-peach
#EEAFA1
Dusty Blue
--clr-dusty-blue
#92B5BC
Brown
--clr-brown
#6A564A
Rose (A)
--clr-char-a
#E36A8C
Sky Blue (B)
--clr-char-b
#9FC9D6
Lavender (C)
--clr-char-c
#B794DA
Coral (D)
--clr-char-d
#F4956A
Amber (E)
--clr-char-e
#F3C46F
Mint (F)
--clr-char-f
#A9C47D
/* CSS変数（components.jsで自動注入） */
:root {
--clr-cream: #FBF6EA; /* 背景・ベース */
--clr-sage: #9AB08F; /* メインアクセント */
--clr-peach: #EEAFA1; /* サブアクセント */
--clr-dusty-blue: #92B5BC; /* リンク・情報 */
--clr-brown: #6A564A; /* 本文テキスト */
/* キャラクターカラー */
--clr-char-a: #E36A8C; /* Rose */
--clr-char-b: #9FC9D6; /* Sky Blue */
--clr-char-c: #B794DA; /* Lavender */
--clr-char-d: #F4956A; /* Coral */
--clr-char-e: #F3C46F; /* Amber */
--clr-char-f: #A9C47D; /* Mint */
}
/* 使用例 */
color: var(--clr-brown);
background: var(--clr-sage);
background: color-mix(in srgb, var(--clr-char-a) 18%, white);
Layout & Typography
レイアウトはページ全体の骨格（何カラムにするか、余白など）を決める仕組みです。
タイポグラフィは見出し・本文テキストのサイズや太さのルールです。
どちらも毎ページ統一することで、読みやすく整ったデザインになります。
H1 — page-title コンポーネント
H2 — section-heading コンポーネント
セクション見出し
H3 — 汎用スタイル（.hl-step-title などで使用）
サブセクション見出し
H4 — .hl-sidebar-title / .hl-card などで使用
SIDEBAR TITLE
本文 — .hl-content-text
本文テキストのサンプルです。font-size: 0.9rem / line-height: 1.95 / opacity: 0.82 が適用されます。インラインリンクはdusty-blueカラーです。
<!-- H1: ページタイトル -->
<page-title>ページタイトル</page-title>
<!-- H2: セクション見出し（左バー付き） -->
<section-heading id="sec-example">セクション見出し</section-heading>
<!-- H3: 汎用（inline style またはカスタムCSS） -->
<h3 style="font-size:1.1rem;font-weight:700;color:var(--clr-brown);">
サブセクション見出し
</h3>
<!-- H4: サイドバータイトル相当 -->
<h4 style="font-size:0.85rem;font-weight:700;color:var(--clr-sage);
letter-spacing:0.1em;text-transform:uppercase;">
SIDEBAR TITLE
</h4>
<!-- 本文テキスト -->
<p class="hl-content-text">本文テキスト</p>
<a href="#" class="hl-link">インラインリンク</a>
cols="1" — 最大幅720px・中央寄せ（記事・ポリシーページ向け）
cols="2" — 最大幅1100px・メインコンテンツ＋サイドバー（このギャラリーが使用中）
<!-- 1カラム -->
<hl-layout cols="1">
<div class="hl-layout-main">...</div>
</hl-layout>
<!-- 2カラム -->
<hl-layout cols="2">
<div class="hl-layout-main">...</div>
<aside class="hl-layout-sidebar">...</aside>
</hl-layout>
Webページではコンテンツを横に並べる「カラム（列）」というレイアウトが多く使われます。
CSSの display: grid や display: flex で実現します。
このサイトでは hl-layout cols="2" が 本文＋サイドバーの2カラム、
cols="1" が1カラムの記事レイアウトです。
1カラム — 幅いっぱいに1つの要素
2カラム — 本文＋サイドバー（このページのレイアウト）
3カラム — カード3枚並び
/* CSSでカラムを作る基本 */
/* 1カラム（デフォルト・何もしなくてもこうなる） */
.container { display: block; }
/* 2カラム（本文 + サイドバー） */
.layout-2col {
display: grid;
grid-template-columns: 1fr 280px; /* 本文は伸縮、サイドバー固定幅 */
gap: 2rem;
}
/* 3カラム（カード並び） */
.card-grid {
display: grid;
grid-template-columns: repeat(3, 1fr); /* 3等分 */
gap: 1rem;
}
/* スマホでは1カラムに戻す */
@media (max-width: 768px) {
.layout-2col,
.card-grid { grid-template-columns: 1fr; }
}
クリックで各ボックスに入場アニメーションを再生します。
fluffy-entry
下から浮き上がる
fluffy-entry-down
上から降りてくる
+ delay-1
0.15s 遅延
+ delay-2
0.35s 遅延
+ delay-3
0.55s 遅延
<div class="fluffy-entry">下から浮き上がる</div>
<div class="fluffy-entry-down">上から降りてくる</div>
<!-- 遅延バリアント -->
<div class="fluffy-entry delay-1">0.15s 遅延</div>
<div class="fluffy-entry delay-2">0.35s 遅延</div>
<div class="fluffy-entry delay-3">0.55s 遅延</div>
ヘッダーはページ上部のナビゲーションバー、フッターはページ下部のリンク・クレジットエリアです。
どちらも全ページ共通の部品なので、components.js に一度定義するだけで全ページに自動適用されます。
このサイトのヘッダー・フッターは実際に上下に表示されています。
site-header — site-name 属性でページ名を指定。トップに固定されるナビゲーションバーです。
site-footer — copy 属性で著作権表示名を指定。ページ下部に固定されるリンクエリアです。
<!-- ページ一枚の基本構造 -->
<!DOCTYPE html>
<html lang="ja">
<head>...</head>
<body>
<site-header site-name="ページ名"></site-header>
<hl-layout cols="1">
<div class="hl-layout-main">
<page-title>ページタイトル</page-title>
<!-- 本文コンテンツ -->
</div>
</hl-layout>
<site-footer copy="Your Name"></site-footer>
<script src="components/components.js"></script>
</body>
</html>
画面幅860px以下（スマホ・タブレットサイズ）では、ヘッダーの機能が切り替わります。
ヒント：このページをスマホで開くと実際に動作を確認できます。
PCのテキストナビが消え、ヘッダー右に「ハンバーガーボタン」が表示されます。
ウェーブ形のデザインで、タップするとフルスクリーンのオーバーレイメニューが表示されます。
ESCキーのほか、オーバーレイ上の再タップでも閉じます。
2カラムレイアウト（cols="2"）のページでは、ヘッダー左側に目次アイコンが表示されます。
タップすると画面右から TOCドロワーがスライドインし、項目リンクをタップするとスムーズにスクロールして閉じます。
スマホではヘッダーのロゴテキスト（「Halcyon」の文字）が自動で非表示になります。アイコンだけ残り、スペースを節約します。
/* 861px以上：PCレイアウト */
@media (min-width: 861px) {
.site-header__menu-btn { display: none; } /* ハンバーガー非表示 */
.site-header__toc-btn { display: none; } /* 目次ボタン非表示 */
hl-toc { display: block; } /* サイドバーの目次を表示 */
}
/* 860px以下：スマホレイアウト */
@media (max-width: 860px) {
.site-header__logo-text { display: none; } /* ロゴテキストを非表示 */
.site-header__menu-btn { display: flex; } /* ハンバーガー表示 */
hl-toc { display: none !important; } /* サイドバー目次を非表示 */
/* ヘッダーの目次ボタンは .site-header.has-toc 時のみ表示 */
.site-header.has-toc .site-header__toc-btn { display: flex; }
}
Global Styles
components.js が自動注入するグローバルなスタイル設定です。
個々のコンポーネントではなく、ページ全体の見た目・操作感に関わる仕組みです。
ブラウザ標準のスクロールバーをデザインカスタマイズしています。
このページ右端のスクロールバーが実際の表示例です。
スクロールバーデモ領域です。
縦にスクロールしてみてください。
セージグリーンの半透明なスクロールバーが
表示されているはずです。
トラックはクリーム色の背景、
サムはセージグリーンで、
ホバーすると濃くなります。
余白が広めで上品な見た目です。
/* components.js が自動注入するスクロールバースタイル */
::-webkit-scrollbar { width: 14px; }
::-webkit-scrollbar-track {
background: var(--clr-cream);
border-left: 1px solid rgba(106, 86, 74, 0.05);
}
::-webkit-scrollbar-thumb {
background: rgba(154, 176, 143, 0.4);
border-radius: 10px;
border: 4px solid var(--clr-cream); /* 余白でサムを細く見せる */
}
::-webkit-scrollbar-thumb:hover {
background: rgba(154, 176, 143, 0.7);
}
/* Firefox 向け（幅のみ制御可能） */
html { scrollbar-gutter: stable; }
テキストをドラッグ選択したときのハイライト色を変更しています。
下の文字をドラッグして選択してみてください。
この文章をドラッグで選択するとセージグリーンのハイライトになります。
Where the world falls silent, we found our own halcyon days.
/* テキスト選択時のハイライト色 */
::selection {
background: rgba(154, 176, 143, 0.4); /* セージグリーン半透明 */
color: var(--clr-brown);
}
::-moz-selection { /* Firefox 向け */
background: rgba(154, 176, 143, 0.4);
color: var(--clr-brown);
}
キャラクター画像・アイコンなどをドラッグ（引きずり移動）できないよう制御しています。
意図しない画像のDnD（ドラッグアンドドロップ）を防ぐための設定です。
draggable="false"
ドラッグ不可
デフォルト
ドラッグ可能
<!-- 属性を付けるだけでドラッグ禁止になります -->
<img src="chara.png" alt="キャラクター" draggable="false">
/* components.js がこのスタイルを自動注入します */
img[draggable="false"] {
-webkit-user-drag: none; /* Safari/Chrome */
user-select: none; /* テキスト選択も禁止 */
}
body::before と body::after で背景に2層のグラデーションを重ねています。
ページ全体に柔らかい奥行き感を与えます。
/* 1層目: ぼかしたカラーライト（左上=Sage、右下=Peach、中央=Blue） */
body::before {
content: ''; position: fixed; inset: 0; pointer-events: none; z-index: -1;
background-image:
radial-gradient(circle at 10% 10%, rgba(154, 176, 143, 0.12) 0%, transparent 40%),
radial-gradient(circle at 90% 80%, rgba(238, 175, 161, 0.12) 0%, transparent 40%),
radial-gradient(circle at 50% 50%, rgba(146, 181, 188, 0.08) 0%, transparent 50%);
background-color: var(--clr-cream);
filter: blur(40px);
opacity: 0.8;
}
/* 2層目: 上部に白い光、下部にブラウンの影 */
body::after {
content: ''; position: fixed; inset: 0; pointer-events: none; z-index: -1;
background:
linear-gradient(135deg, rgba(255,255,255,0.4) 0%, transparent 100%),
linear-gradient(to top, rgba(106, 86, 74, 0.12) 0%, transparent 150px);
opacity: 0.5;
}
内部リンクをクリックすると、ページ全体がフェードアウトしてから遷移します。
body.hl-page-fade-out クラスが付くとopacityが0になり、
遷移完了後にフェードインします。
ナビゲーションリンク（ヘッダー・フッター）をクリックするとフェード遷移が確認できます。
/* body にクラスが付くとフェードアウト */
body { transition: opacity 500ms ease-in-out; }
body.hl-page-fade-out { opacity: 0; pointer-events: none; }
// components.js 内部でリンククリック時に自動適用
// （明示的に使う場合）
document.body.classList.add('hl-page-fade-out');
setTimeout(() => { location.href = '/target/'; }, 500);