みんなのITサポーターどば先生｜やさしいITサポートLP
概要
東京都北区周辺の小学生・保護者・高齢者に向けた、やさしく読みやすいITサポートのランディングページ（LP）。相談のハードルを下げ、「まずは無料で相談する」と「電話で聞いてみる」の二大導線に迷わず到達できる構成にしました。
役割と期間
担当
企画 / 情報設計 / コピーライティング / デザイン / フロント実装 / ドメイン・DNS設定 / OGP作成
期間
2025/08（約1週間）
依頼背景・課題
機器が苦手な方でも読める大きめ文字とやさしい言い回しが必要
団地内の高齢者や親子が対象のため、安心感（身分証提示・個人情報配慮）を前面に
相談フォームまでの道のりを最短化したい
解決アプローチ
見出し→要点→CTAの三段リズムで各セクションを設計
導線は上・中・下の3か所に固定配置（無料相談／電話）
フォームはGoogleフォームを2種類（無料相談／料金相談）。わずか数分で送れる分量に整理
よくある質問は開閉式で読みやすく、ページの圧を軽減
デザインの工夫（配色・タイポ・余白・アクセシビリティ）
配色
#2B6CB0（やさしい青）× #FFD966（あたたかい黄）× 白。差し色に#2F855A
文字
本文16–18px、見出しは1.5–2倍。行間広め、段落は短く
コントラスト
4.5:1以上を担保。ボタンは色と余白で明確に
読み上げ配慮
画像に代替テキスト、リンクは下線、FAQボタンはキーボード操作可
余白
セクション間は大きめの余白で区切り、視認性を高める
実装の工夫（HTML/CSS/JS）
HTML
セマンティックなマークアップ（<header>, <main>, <footer>）
CSS
最小限のスタイルシートで、読み込み速度とアクセシビリティを両立
JavaScript
FAQの開閉のみ。軽量化とパフォーマンス重視
安心情報
身分証の提示・女性スタッフ1名対応・個人情報は紙に書かず端末にも保存しない旨を明記
技術スタック
HTML / CSS / 最小限のJavaScript（FAQの開閉のみ）
GitHub Pages + 独自ドメイン
お名前.com DNS：www＝CNAMEでGitHub、apex＝A/AAAAでGitHub（＝「wwwの向き先をGitHubに、ルートドメインもGitHubに結ぶ」）
OGP画像は1200×630px、Twitterカードはsummary_large_image
成果物
公開サイト：https://www.anraku-dobasensei.net/
実装ハイライト
Heroで価値を即伝達
対象・できること・CTAを1画面に集約
カードUIで「できること」を6項目に整理（初期設定／LINE設定／写真整理／見守り設定／宿題サポート／プリンター・Wi-Fi）
料金表示をカード化
初回・通常・出張費を並列で比較しやすく
対応エリアの地図埋め込み
で地域性と安心感を補強
トラブルと克服（Before → After）
1.カスタムドメイン警告（NotServedByPages / InvalidDNSError）
Before：GitHub側で「ドメインがPagesに向いていない」警告
Action：wwwをCNAMEでGitHub、apexをA/AAAAでGitHub、HTTPS強制ON
After：SSL有効・wwwで安定配信
2.Twitterカードが小さい
Before：テキストのみの小カード
Action：twitter:card=summary_large_image と og:image を統一、Card Validatorで再取得、画像URLに?v=付与
After：大きい画像カードでシェアできる状態に
学びと改善点
1. 高齢者向けの配慮が、実際に読みやすさを向上させることを実感
2. 相談フォームの心理的ハードルを下げるために、分割と簡素化が有効であることを確認
3. DNS設定の正しい理解が、安定したサイト運用につながることを学ぶ
スクリーンショット
