はじめに
前回の記事ではGitHub Pagesを使ってポートフォリオサイトを無料で公開する方法を解説しました。サイトを公開したら次はデザインの質を高めましょう。今回はポートフォリオサイトをより魅力的に見せるためのデザインの基本原則を解説します。コーディングのスキルがあっても、デザインの基礎を知っているかどうかでサイトの印象は大きく変わります。余白・フォント・配色・レイアウトの4つのテーマに絞って、すぐに実践できる知識をお届けします。
1. 余白（ホワイトスペース）
1.1 余白はデザインの主役
余白とは要素と要素の間の空きスペースのことです。初心者がよくやりがちな失敗は余白が少なすぎることです。情報を詰め込みすぎたデザインはごちゃごちゃして見づらく、読者が疲れてしまいます。
余白には以下の2つの役割があります。
| 役割 | 内容 |
|---|---|
| グループ化 | 近い要素を近くに・遠い要素を遠くに配置することで関係性を伝える |
| 強調 | 余白で囲まれた要素は際立って見える |
1.2 余白の基本ルール：8の倍数
余白の値に統一感を持たせるには8pxの倍数を基準にするのがおすすめです。
/* 8の倍数で余白を統一する */
:root {
--space-xs: 4px; /* 極小 */
--space-sm: 8px; /* 小 */
--space-md: 16px; /* 中 */
--space-lg: 24px; /* 大 */
--space-xl: 40px; /* 特大 */
--space-2xl: 64px; /* セクション間 */
--space-3xl: 96px; /* ヒーロー余白 */
}
/* 使い方 */
.section {
padding: var(--space-2xl) 0;
}
.card {
padding: var(--space-lg);
margin-bottom: var(--space-md);
}
.btn {
padding: var(--space-md) var(--space-xl);
}
1.3 セクション間の余白を大きく取る
ポートフォリオサイトでよく見られるセクション（About・Works・Contact）の間の余白は思い切って大きく取ることで、各セクションの独立性が上がり読みやすくなります。
/* セクション間の余白 */
.section {
padding: 96px 0; /* 上下に96px */
}
/* スマートフォンでは縮小 */
@media (max-width: 768px) {
.section {
padding: 56px 0;
}
}
💡 余白が多すぎるかなと感じるくらいがちょうどいい： 初心者のうちは余白を大きく取ることへの抵抗感があります。しかし実際には「余白が多すぎる」より「余白が少なすぎる」サイトの方が圧倒的に多いです。迷ったら余白を増やす方向で調整しましょう。
2. フォント
2.1 フォントの選び方
ポートフォリオサイトで使うフォントは最大2種類までに絞りましょう。多くのフォントを使うと統一感がなくなります。
| 用途 | 推奨フォントの種類 | 例 |
|---|---|---|
| 見出し（h1〜h3） | サンセリフ体（ゴシック系） | Noto Sans JP・Inter |
| 本文（p） | 読みやすいサンセリフ体 | Noto Sans JP・Roboto |
| アクセント・ロゴ | セリフ体や個性的なフォント | Playfair Display |
2.2 Google Fontsの導入方法
<!-- HTMLのheadに追加 -->
<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;500;700&family=Inter:wght@400;600;700&display=swap" rel="stylesheet">
/* CSSで適用 */
body {
font-family: 'Noto Sans JP', 'Inter', sans-serif;
}
h1, h2, h3 {
font-family: 'Inter', 'Noto Sans JP', sans-serif;
font-weight: 700;
}
2.3 フォントサイズの階層を作る
フォントサイズに明確な階層を作ることで情報の重要度が伝わりやすくなります。
:root {
--text-xs: 12px;
--text-sm: 14px;
--text-base: 16px; /* 本文の基準サイズ */
--text-lg: 18px;
--text-xl: 20px;
--text-2xl: 24px;
--text-3xl: 32px;
--text-4xl: 48px; /* ヒーロータイトル */
--text-5xl: 64px; /* 大きなキャッチコピー */
}
body {
font-size: var(--text-base);
line-height: 1.8; /* 行間は1.7〜1.9が読みやすい */
}
h1 { font-size: var(--text-4xl); line-height: 1.2; }
h2 { font-size: var(--text-3xl); line-height: 1.3; }
h3 { font-size: var(--text-2xl); line-height: 1.4; }
p { font-size: var(--text-base); line-height: 1.8; }
2.4 行の長さを制限する
1行の文字数が多すぎると読みにくくなります。本文の最大幅を制限しましょう。
/* 本文の最大幅を制限する（65〜75文字が読みやすい） */
.text-content {
max-width: 680px;
margin: 0 auto;
}
p {
max-width: 65ch; /* ch単位は「0」の文字幅を基準にした相対単位 */
}
💡 ch 単位を使うと文字数で幅を指定できます： 65ch は「65文字分の幅」という意味です。フォントが変わっても自動的に調整されるため便利な単位です。
3. 配色
3.1 配色の基本：3色ルール
ポートフォリオサイトの配色は3色を基本にすると迷わなくなります。
| 役割 | 割合 | 内容 |
|---|---|---|
| ベースカラー | 約70% | 背景色（白・オフホワイト・ダークなど） |
| メインカラー | 約25% | テキスト・UI要素の主要な色 |
| アクセントカラー | 約5% | ボタン・リンク・強調要素 |
:root {
/* ベースカラー */
--color-bg: #ffffff;
--color-bg-sub: #f8f9fa;
/* メインカラー（テキスト系） */
--color-text: #1a1a1a;
--color-text-sub: #666666;
--color-text-muted: #999999;
/* アクセントカラー */
--color-accent: #1A5FC0;
--color-accent-hover: #0D3A7A;
/* ボーダー */
--color-border: #e0e0e0;
}
3.2 配色ツールを活用する
自分でゼロから配色を考えるのは難しいです。以下のツールを使いましょう。
| ツール | URL | 特徴 |
|---|---|---|
| Coolors | coolors.co | ランダムでおしゃれな配色を生成 |
| Adobe Color | color.adobe.com | 色相環から配色を作成 |
| Paletta | paletta.io | 有名サイトの配色を参考にできる |
| Tailwind CSS Colors | tailwindcss.com/docs/customizing-colors | 実績のある配色パレット |
3.3 コントラスト比を確認する
文字と背景のコントラスト比が低いと読みにくくなります。アクセシビリティの観点からもコントラスト比は4.5:1以上を目標にしましょう。
| コントラスト比 | 評価 |
|---|---|
| 7:1以上 | AAA（最高水準） |
| 4.5:1以上 | AA（一般的なテキストの最低基準） |
| 3:1以上 | AA Large（大きなテキストの最低基準） |
| 3:1未満 | ❌ 不十分 |
確認ツール：WebAIM Contrast Checker（webaim.org/resources/contrastchecker/）
3.4 ダークモードを意識した配色
最近のサイトではダークモードに対応するものが増えています。CSSのメディアクエリで対応できます。
/* ライトモード（デフォルト） */
:root {
--color-bg: #ffffff;
--color-text: #1a1a1a;
}
/* OS設定がダークモードの場合 */
@media (prefers-color-scheme: dark) {
:root {
--color-bg: #0d1117;
--color-text: #e6edf3;
}
}
4. レイアウト
4.1 視線の流れを意識する
ユーザーの視線はZ字型またはF字型に動くと言われています。重要な情報は左上・中央に配置し、視線の流れに沿ってコンテンツを並べることが基本です。
| パターン | 向いているレイアウト |
|---|---|
| Z字型 | ランディングページ・ポートフォリオのヒーロー |
| F字型 | ブログ記事・一覧ページ |
4.2 コンテナ幅を統一する
サイト全体で一貫したコンテナ幅を設定しましょう。
/* コンテナの設定 */
.container {
width: 100%;
max-width: 1200px; /* サイト全体の最大幅 */
margin: 0 auto;
padding: 0 40px; /* 左右の余白 */
}
/* 文章コンテンツ用（読みやすい幅） */
.container--narrow {
max-width: 720px;
}
/* スマートフォン */
@media (max-width: 768px) {
.container {
padding: 0 20px;
}
}
4.3 グリッドレイアウトで整列させる
作品一覧などのカード型レイアウトにはCSS Gridが便利です。
/* 作品一覧のグリッドレイアウト */
.works-grid {
display: grid;
grid-template-columns: repeat(3, 1fr); /* 3列 */
gap: 32px;
}
/* タブレット：2列 */
@media (max-width: 1024px) {
.works-grid {
grid-template-columns: repeat(2, 1fr);
}
}
/* スマートフォン：1列 */
@media (max-width: 640px) {
.works-grid {
grid-template-columns: 1fr;
gap: 20px;
}
}
4.4 視覚的な重みを揃える
要素の大きさ・色の濃さ・配置のバランスが揃っているとデザインが安定して見えます。
/* カードの高さを揃える */
.works-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 32px;
align-items: start; /* カードの高さが違っても上揃えに */
}
.card {
display: flex;
flex-direction: column;
height: 100%; /* カードの高さをグリッドセルいっぱいに */
}
.card-body {
flex: 1; /* カード内のコンテンツエリアを伸縮させる */
}
.card-footer {
margin-top: auto; /* フッターを常に下端に配置 */
}
5. ポートフォリオサイトでよく使うデザインパターン
5.1 ヒーローセクション
.hero {
display: flex;
align-items: center;
min-height: 100vh; /* 画面の高さいっぱい */
padding: 80px 0;
background-color: var(--color-bg);
}
.hero-inner {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 60px;
align-items: center;
}
.hero-title {
font-size: clamp(32px, 5vw, 64px); /* 画面幅に応じてフォントサイズが変化 */
font-weight: 700;
line-height: 1.2;
margin-bottom: 24px;
}
@media (max-width: 768px) {
.hero-inner {
grid-template-columns: 1fr;
text-align: center;
}
}
💡 clamp() でレスポンシブなフォントサイズを実現できます： clamp(最小値, 推奨値, 最大値) の形式で書くと、画面幅に応じて滑らかにフォントサイズが変化します。メディアクエリなしでレスポンシブなタイポグラフィが実現できます。
5.2 プロフィールカード
.profile-card {
display: flex;
align-items: center;
gap: 40px;
padding: 48px;
background: var(--color-bg-sub);
border-radius: 16px;
}
.profile-avatar {
width: 120px;
height: 120px;
border-radius: 50%;
object-fit: cover;
flex-shrink: 0;
border: 3px solid var(--color-border);
}
.profile-name {
font-size: 28px;
font-weight: 700;
margin-bottom: 8px;
}
.profile-bio {
color: var(--color-text-sub);
line-height: 1.8;
max-width: 500px;
}
@media (max-width: 640px) {
.profile-card {
flex-direction: column;
text-align: center;
padding: 32px 24px;
}
}
5.3 スキルバッジ
.skill-list {
display: flex;
flex-wrap: wrap;
gap: 10px;
}
.skill-badge {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 6px 16px;
background: var(--color-bg-sub);
border: 1px solid var(--color-border);
border-radius: 100px; /* 丸いピル型バッジ */
font-size: 14px;
font-weight: 500;
color: var(--color-text);
transition: all 0.2s ease;
}
.skill-badge:hover {
background: var(--color-accent);
color: white;
border-color: var(--color-accent);
}
6. デザインセルフチェックリスト
✓ 余白は8pxの倍数で統一されているか
✓ セクション間の余白は十分に取れているか（最低56px以上）
✓ フォントは2種類以内に絞られているか
✓ 本文のfont-sizeは16px以上か
✓ 行間（line-height）は1.7〜1.9に設定されているか
✓ 配色は3色ルール（ベース・メイン・アクセント）に沿っているか
✓ テキストと背景のコントラスト比は4.5:1以上か
✓ コンテナ幅が全セクションで統一されているか
✓ カードやリストの要素が整列されているか
✓ スマートフォンで見たときに崩れていないか
まとめ
今回はポートフォリオサイトをより魅力的に見せるためのデザインの基本原則を解説しました。ポイントをまとめると：
- 余白は8pxの倍数で統一して迷ったら増やす方向で調整する
- フォントは最大2種類まで・本文は16px以上・行間は1.7〜1.9に設定する
- 配色は「ベースカラー70%・メインカラー25%・アクセントカラー5%」の3色ルールで考える
- コントラスト比は4.5:1以上を目標にアクセシビリティを意識する
- コンテナ幅をサイト全体で統一してグリッドレイアウトで要素を整列させる
clamp()を使うとメディアクエリなしでレスポンシブなフォントサイズが実現できる
次の記事では、ポートフォリオサイトにGoogleアナリティクスを導入してアクセス解析を始める方法を解説します。どのページが読まれているか・どこからユーザーが来ているかを把握して、サイトの改善に役立てましょう。お楽しみに！
コメント