はじめに
前回の記事ではポートフォリオサイトのアクセシビリティ対応としてセマンティックHTML・キーボード操作・ARIA・コントラスト比の確保まで解説しました。今回はこの連載の集大成としてポートフォリオサイトを公開する前に確認すべきことを網羅したチェックリストをお届けします。コード品質・SEO・パフォーマンス・セキュリティ・アクセシビリティの5つの観点でサイトを総点検しましょう。「公開してから直す」より「公開前にきちんと確認する」方がユーザーにとっても自分にとっても価値があります。
1. コード品質チェック
1.1 HTMLの品質確認
W3C Markup Validation Service でHTMLの文法エラーを確認します。
- validator.w3.org にアクセスします。
- 「Validate by URI」タブでサイトのURLを入力するか「Validate by Direct Input」タブにHTMLを貼り付けます。
- エラー（Error）と警告（Warning）を確認して修正します。
よくあるHTMLエラーと修正方法：
| エラー内容 | 修正方法 |
|---|---|
| タグが閉じられていない | 開始タグと終了タグのペアを確認する |
| 必須属性が不足している | <img> の alt・<a> の href などを確認する |
| 入れ子の順序が間違っている | <ul> の直下には <li> のみ・<p> の中に <div> は不可など |
| 重複したid属性 | 同じページ内でidは一意（ユニーク）にする |
1.2 CSSの品質確認
/* 確認すべきポイント */
/* ❌ !importantの多用 */
.btn {
color: white !important; /* 使わざるを得ない場合以外は避ける */
}
/* ❌ 未使用のCSSが大量に残っている */
.old-header { ... } /* 削除したHTMLに対応するCSSが残っている */
/* ✅ CSS変数で色・余白を統一管理している */
:root {
--color-accent: #1A5FC0;
--space-md: 16px;
}
Chrome DevToolsで未使用のCSSを確認する手順：
- F12で開発者ツールを開きます。
- 「Coverage」タブ（Ctrl + Shift + P → 「Coverage」で検索）を開きます。
- 「録画開始」ボタンをクリックしてページを操作します。
- 赤くハイライトされた部分が未使用のCSSです。
1.3 JavaScriptの品質確認
// 確認すべきポイント
// ✅ エラーハンドリングが実装されているか
async function fetchData() {
try {
const response = await fetch( url );
// ...
} catch ( error ) {
console.error( 'データ取得エラー:', error );
// ユーザーへのフィードバックも実装する
}
}
// ✅ コンソールにエラーが出ていないか
// F12 → Consoleタブで確認する
// ✅ strictモードを使っているか
'use strict';
⚠️ console.log を本番環境に残さないようにしましょう： 開発中に使った console.log はデプロイ前にすべて削除またはコメントアウトしてください。
1.4 リンク切れの確認
内部リンク・外部リンクがすべて正しく機能しているか確認します。
| 確認方法 | ツール |
|---|---|
| ブラウザで手動確認 | すべてのリンクをクリックして404が出ないか確認 |
| 自動チェック | W3C Link Checker（validator.w3.org/checklink）を使う |
2. SEOチェック
2.1 メタ情報の確認
<!-- すべてのページに以下が設定されているか確認する -->
<head>
<!-- ✅ 固有のtitleタグ（32文字以内） -->
<title>山田太郎 | WebエンジニアのポートフォリオサイトName</title>
<!-- ✅ meta description（120文字前後） -->
<meta name="description" content="...">
<!-- ✅ OGPタグ -->
<meta property="og:title" content="...">
<meta property="og:description" content="...">
<meta property="og:image" content="https://yourname.com/images/ogp.png">
<!-- ✅ canonicalタグ -->
<link rel="canonical" href="https://yourname.com/">
<!-- ✅ viewportタグ -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
2.2 Search Consoleで確認すべきこと
- インデックス登録の確認： 「ページのインデックス登録」でページが正しくインデックスされているか確認します。
- サイトマップの送信：
sitemap.xmlを送信済みで「成功」になっているか確認します。 - Core Web Vitals： 「ウェブに関する主な指標」で不良・要改善のページがないか確認します。
- モバイルユーザビリティ： モバイル表示に問題がないか確認します。
2.3 画像のalt属性を全ページ確認する
# Chrome DevToolsのConsoleで全画像のalt属性を一括確認するコマンド
document.querySelectorAll('img').forEach(img => {
if (!img.alt && img.alt !== '') {
console.warn('altなし:', img.src);
}
});
3. パフォーマンスチェック
3.1 PageSpeed Insightsで計測する
- pagespeed.web.dev にアクセスします。
- サイトのURLを入力して「分析」をクリックします。
- モバイルとPCの両方を確認します。
目標スコアの目安：
| 指標 | 目標値 |
|---|---|
| パフォーマンス（モバイル） | 70点以上（90点以上が理想） |
| パフォーマンス（PC） | 90点以上 |
| LCP | 2.5秒以内 |
| CLS | 0.1以下 |
| INP | 200ms以内 |
3.2 画像の最適化確認
<!-- ✅ すべての画像に以下が設定されているか確認 -->
<img
src="images/profile.webp"
alt="山田太郎のプロフィール写真"
width="400"
height="400"
loading="lazy"
>
<!-- ✅ ヒーロー画像など最初に表示される画像はloading="eager"にする -->
<img
src="images/hero.webp"
alt="ヒーロー画像"
width="1200"
height="600"
loading="eager"
fetchpriority="high"
>
確認ポイント：
| 項目 | 確認内容 |
|---|---|
| ファイル形式 | WebPを使っているか |
| ファイルサイズ | 本文幅の画像は200KB以下が目安 |
width と height の指定 | CLS改善のために必須 |
| 遅延読み込み | loading="lazy" が設定されているか |
3.3 不要なリソースの削除
<!-- ❌ 使っていないライブラリを読み込んでいる -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<!-- jQueryを使っていないなら削除する -->
<!-- ✅ 本当に必要なライブラリのみ読み込む -->
<!-- JavaScriptでできることはVanilla JSで実装する -->
4. セキュリティチェック
4.1 HTTPSで配信されているか
✅ https://yourname.com （鍵アイコンが表示される）
❌ http://yourname.com （安全でない接続の警告が表示される）
GitHub PagesはデフォルトでHTTPSが有効ですが、「Enforce HTTPS」にチェックが入っているか再確認します。
4.2 外部リンクのセキュリティ
<!-- 外部リンクには rel="noopener noreferrer" を設定する -->
<a href="https://github.com/yourusername" target="_blank" rel="noopener noreferrer">
GitHub
</a>
💡 rel="noopener noreferrer" が必要な理由： target="_blank" で開いた新しいタブから元のページを操作できる脆弱性（タブナビゲーション攻撃）を防ぎます。外部リンクには必ず設定する習慣をつけましょう。
4.3 フォームの入力値の扱い
// ✅ ユーザーの入力値をそのままHTMLに挿入しない（XSS対策）
function sanitize( str ) {
const div = document.createElement( 'div' );
div.appendChild( document.createTextNode( str ) );
return div.innerHTML;
}
// ❌ innerHTML に直接ユーザー入力を渡すのは危険
element.innerHTML = userInput;
// ✅ テキストノードとして設定する
element.textContent = userInput;
4.4 プライバシーポリシーの確認
Googleアナリティクスを使用している場合はプライバシーポリシーページが設置されているか確認します。
5. アクセシビリティチェック
5.1 Lighthouseでアクセシビリティスコアを確認する
- F12で開発者ツールを開きます。
- 「Lighthouse」タブを選択します。
- 「アクセシビリティ」にチェックを入れて「ページの読み込みを分析する」をクリックします。
- 100点を目標にします。
5.2 キーボードのみでの操作確認
マウスを使わずに以下をキーボードのみで操作できるか確認します。
| 操作 | キー |
|---|---|
| フォーカスの移動 | Tab / Shift + Tab |
| リンク・ボタンの操作 | Enter |
| チェックボックスの操作 | Space |
| ハンバーガーメニューを閉じる | Escape |
| フォーカスが常に見えているか | 目視で確認 |
5.3 スクリーンリーダーでの確認（Mac）
- Command + F5 でVoiceOverを起動します。
- Tabキーでページ全体を操作します。
- 読み上げ内容が適切か確認します。
6. ブラウザ・デバイス互換性チェック
6.1 確認すべきブラウザ
| ブラウザ | デスクトップ | スマートフォン |
|---|---|---|
| Chrome（最新） | ✅ 必須 | ✅ 必須 |
| Safari | ✅ 必須 | ✅ 必須（iOSで独自の挙動が多い） |
| Firefox | ✅ 推奨 | — |
| Edge | ✅ 推奨 | — |
6.2 確認すべきデバイス・画面サイズ
Chrome DevToolsのデバイスツールバーで以下のサイズを確認します。
| デバイス | 幅 | 確認ポイント |
|---|---|---|
| iPhone SE | 375px | 最小クラスのスマートフォン |
| iPhone 14 Pro | 390px | 標準スマートフォン |
| iPad | 768px | ブレークポイント付近 |
| MacBook Air | 1280px | 一般的なラップトップ |
| フルHD | 1920px | 広い画面でレイアウトが崩れないか |
6.3 Safariで特に確認すべき項目
/* iOSのSafariはCSSの一部をサポートしていない場合がある */
/* ✅ ベンダープレフィックスが必要なプロパティを確認する */
.element {
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
}
/* ✅ iOSではinputのfont-sizeが16px未満だとフォームがズームされる */
input {
font-size: 16px; /* 16px以上を必ず守る */
}
7. コンテンツチェック
7.1 誤字脱字・表記ゆれの確認
| 確認項目 | 内容 |
|---|---|
| 誤字脱字 | 全ページのテキストを目視確認する |
| 表記ゆれ | 「Web」と「ウェブ」・「javascript」と「JavaScript」など統一する |
| 連絡先情報 | メールアドレス・SNSリンクが正しいか確認する |
| 著作権表示 | フッターの © 年号が正しいか確認する |
7.2 リンクが正しいか確認する
| 確認項目 | 内容 |
|---|---|
| GitHubのURL | 自分のリポジトリのURLになっているか |
| SNSのURL | 正しいアカウントにリンクされているか |
| お問い合わせフォーム | 実際に送信できるか・完了メッセージが表示されるか |
| 制作実績のリンク | 実際のサイトURLが正しいか |
7.3 OGP画像の表示確認
確認ツール：
✅ OGPチェッカー（ogp.buta3.net）
✅ Meta for Developers（developers.facebook.com/tools/debug）
SNSでURLをシェアしたときに画像・タイトル・説明文が正しく表示されるか確認します。
8. 最終公開前チェックリスト総まとめ
📋 コード品質
✓ W3C Validatorでエラーが0件か
✓ Chrome DevToolsのConsoleにエラーが出ていないか
✓ console.log がすべて削除されているか
✓ リンク切れがないか
✓ 未使用のCSSを削除しているか
📋 SEO
✓ すべてのページに固有のtitleタグ（32文字以内）が設定されているか
✓ すべてのページにmeta description（120文字前後）が設定されているか
✓ OGPタグが設定されていてツールで確認済みか
✓ sitemap.xmlをSearch Consoleに送信済みか
✓ robots.txtが正しく設定されているか
✓ canonicalタグが設定されているか
📋 パフォーマンス
✓ PageSpeed InsightsのモバイルスコアがGreen（90点以上）か
✓ すべての画像がWebP形式か
✓ 画像に width・height・loading="lazy" が設定されているか
✓ キャッシュ設定が有効になっているか
✓ 不要なJavaScriptライブラリを削除しているか
📋 セキュリティ
✓ HTTPS（鍵アイコン）で配信されているか
✓ 外部リンクに rel="noopener noreferrer" が設定されているか
✓ フォームのXSS対策が実装されているか
✓ プライバシーポリシーページが設置されているか
📋 アクセシビリティ
✓ Lighthouseのアクセシビリティスコアが100点か
✓ キーボードのみでサイト全体を操作できるか
✓ すべての画像にalt属性が設定されているか
✓ コントラスト比が4.5:1以上か
✓ フォーカスリングが常に見えているか
📋 ブラウザ・デバイス互換性
✓ Chrome・Safari・Firefox・Edgeで表示確認済みか
✓ iPhone・Androidのスマートフォンで実機確認済みか
✓ ブレークポイント（375px・768px・1280px）で崩れていないか
📋 コンテンツ
✓ 誤字脱字がないか全ページ確認済みか
✓ GitHubリポジトリのURLが正しいか
✓ お問い合わせフォームが実際に機能するか
✓ フッターの年号が正しいか
まとめ
今回はポートフォリオサイト公開前の最終チェックリストを5つの観点でまとめました。ポイントをまとめると：
- コード品質はW3C ValidatorとChrome DevToolsのConsoleでエラーゼロを目指す
- SEOはtitleタグ・meta description・OGP・sitemap.xml・canonical の5点セットを確認する
- パフォーマンスはPageSpeed InsightsのモバイルスコアとCore Web Vitalsを重点的に確認する
- セキュリティはHTTPS・外部リンクの
rel="noopener noreferrer"・XSS対策・プライバシーポリシーを確認する - アクセシビリティはLighthouseで100点を目指しキーボードのみでの操作も実際に確認する
- Chrome・Safari・スマートフォンの実機確認は省略せずに行う
このチェックリストをすべてクリアしたポートフォリオサイトは技術力の証明になります。公開前の丁寧な確認がそのままあなたの仕事の質を表します。自信を持って公開しましょう！
次の記事では、WordPressを使った本格的なブログの立ち上げ方を解説します。今まで学んできたHTML・CSS・JavaScriptの知識をWordPressに活かして、より実践的なWebサイト開発に挑戦していきましょう。お楽しみに！
コメント