Quality

このサイト自身が、
0→1の教材です。

0→1で教えていることは、このサイトでも実践しています。公開サイトの計測結果と、品質を支える取り組みを掲載しています。

実装していること

  • 実装済み
    セマンティックなHTML見出しの階層、ランドマーク、パンくずリストを、意味に沿って書いています。
  • 実装済み
    キーボードだけで操作できる「本文へスキップ」リンクと、見やすいフォーカス表示を用意しています。
  • 実装済み
    伝わるフォーム入力の誤りを、色だけでなく文章で伝え、最初の誤りへフォーカスを移します(aria-invalid・aria-describedby)。
  • 実装済み
    動きを減らす設定への対応端末で「視差効果を減らす」を選んでいる人には、アニメーションを止めて表示します。
  • 実装済み
    新しいCSSと、そのフォールバックスクロール連動のアニメーションは、対応していないブラウザでは完成した状態で表示します。
  • 実装済み
    軽い画面づくりビジュアルを写真ではなくHTMLとCSSで描き、読み込むファイルを減らして、表示を速くしています。
  • 実装済み
    構造化データパンくずリスト、よくある質問、コース、講師の情報を、検索エンジンに伝わる形で記述しています。
  • 実装済み
    法令にもとづく表示特定商取引法に基づく表記、プライバシーポリシー、フォーム送信前の入力内容の確認と、決済前の契約内容の最終確認を用意しています。

公開サイトの計測結果

公開中のURLをLighthouse 13.5.0・Headless Chrome 156で測定しました。以下は初回読み込みを想定したラボ計測です。PageSpeed Insightsが提供する実ユーザーの統計ではなく、回線・端末・実行時点によって結果は変わります。

フォントの配信を見直し、モバイルの日本語には端末標準の書体を使用しています。faviconの404も修正しました。自動チェックの100点は、すべての利用者にとって問題がないことを保証するものではありません。

2026年10月22日:フォーム・レッスンのローカル検証

公開前のローカル環境で、Chromiumによるブラウザー操作7件と、予約・受付処理の単体テスト10件が成功しました。無料個別相談と直接申込の切り替え、送信失敗後の入力保持、送信中の連打防止、予約枠の競合、HTML・CSS・JavaScriptの練習機能を確認しています。

予約登録後に運営者向け通知だけが失敗した場合も、登録済みの予約を失敗扱いにしないことを確認しました。テストではGoogle側の応答を模擬しており、本番への予約登録・招待メール到着・確認メール到着は確認していません。以下のLighthouseスコアを今回再測定したものではありません。

アクセシビリティ・HTML・配信設定の検査

2026年10月8日、公開中の全26ページを対象に検査しました。自動検査の結果と、人による確認が必要な範囲を以下に記載しています。

  • 自動検査済み
    axeによるアクセシビリティ検査axe-core 4.13.0・Headless Chrome 156で全26ページの初期表示を検査し、自動検出の違反は0件でした。総合制作サンプルの文字コントラスト14箇所・空の表見出し1箇所、TOPの区画名の重複1箇所を修正して再検査しています。

    一部の要素のコントラストは自動判定が完了せず、手動確認の対象です。対象箇所は検査データに記録しています。フォーム操作後の状態、キーボード操作、スクリーンリーダーの確認は今回の自動検査に含みません。

    対象ページ・検査日時・要確認箇所を見る(JSON)
  • 検証済み
    HTMLの文法チェック公開URLから取得した全26ページのHTMLをNu HTML Checker 26.10.7で検証し、エラー0件・警告0件を確認しました。日時の属性、SVGの属性、記事要素の見出し構造などを修正しています。

    HTMLの文法検証は、すべての機能やアクセシビリティへの適合を保証するものではありません。

    対象URLと検証結果を見る(JSON)
  • 配信確認済み
    セキュリティヘッダー全26ページのHTTPS応答で、以下のヘッダーを確認しました。
    • HSTS:max-age=63072000
    • X-Content-Type-Options:nosniff
    • X-Frame-Options:DENY
    • Referrer-Policy:strict-origin-when-cross-origin
    • CSP:埋め込みオブジェクトの禁止、外部サイトからのフレーム埋め込み禁止、ベースURLの制限、HTTPSへの昇格

    今回のCSPはスクリプトの実行元を制限する設定ではありません。脆弱性診断や第三者によるセキュリティ監査を実施したという意味ではありません。

    実際のレスポンスヘッダーを見る(JSON)
  • 確認範囲を明記
    ブラウザ・実機での確認状況Headless Chrome 156で自動検査を実施しました。Lighthouseの画面サイズはモバイル412 × 823、PC1350 × 940、axeの検査画面は756 × 413です。

    Chromeのエミュレーションを実機確認とは扱っていません。Safari・Firefox・iPhone/Android実機、キーボード・スクリーンリーダーによる手動操作は未確認です。

    Chromeの測定結果と詳細レポートを見る
Next

まずは面談だけでも、お気軽にどうぞ。

毎月2名限定。卒業・受講期限はありません。制作後も学び続け、いつでも質問できます。

毎月2名まで受講できます