読み込み中
ヒアリングから公開後運用まで、73 項目のチェックリスト。契約前の判断材料として、ご自由にご活用ください。
30 分の初回相談でも、事前にどれだけ準備されていたかで最終的な制作物の質は変わります。完璧でなくて構いません。手元にあるもの、わかる範囲だけでも共有いただけると、当日の議論が一段深くなります。
どんな価値を提供しているか。1〜2文で整理してください。
年代・職業・状況など。粗くても構いません。複数の場合は優先順位をつけてください。
全部伝えようとすると弱くなります。絞り込めたものをお聞きします。
3〜5 社、思いつく競合や比較対象のサイトを共有いただくと、ポジショニングが決まりやすいです。
好きな例と避けたい例、両方あると設計の軸が決まります。
完成度は問いません。手元にあるものをお預けいただければ、初回の設計時間を短縮できます。
あるかないか、あればそのファイルをお聞きします。
「◯ 月までに」という期限と、その理由（大会・試合・募集時期）を教えてください。
自分たちで更新するのか、お任せするのか。CMS が必要かどうかの判断材料になります。
フォーム・Map・予約・CMS・多言語・EC など。「あったらいいな」と「なくてはダメ」を分けてください。
Instagram / X / Google ビジネスプロフィールとの連携が必要かどうか。
幅で構いません。相談の中で、予算に見合った規模を一緒に選びます。
ワイヤフレームとデザインカンプを出す前に全項目を見てから提出します。判断軸は「綺麗に見えるか」ではなく「読み終えられるか」「次の行動まで進むか」です。
サイトマップ・ページ階層・各ページ目的を言語化してからデザインに入ります。
3 シナリオ以上を図で示し、ユーザーの行動を予測します。
PC ありきではなく、スマートフォンで読みやすい配置から始めます。
16px 以上・行間 1.7 以上・行長 30〜45 文字を満たしています。
WCAG AA 基準。装飾要素は 3:1 以上を満たしています。
隣接距離 8px 以上を保ち、モバイルでの誤タップを防ぎます。
1 フォーム 5 項目以内、必須項目は 3 項目以内に絞ります。
入力エラー時のメッセージと復帰方法が明確に設計されています。
データがない状態・ローディング中・エラー時のビジュアルを設計します。
ページ更新・新規記事投稿時の「ひな形」が用意されています。
Google だけでなく Slack や X でシェアされた時のプレビュー、各種ツール、クローラーまで含め正しく読み取れる状態で公開します。公開当日に土台を揃えます。
各ページ個別に主題 + サイト名、32 文字目安で最適化しています。
各ページに 120 文字前後の説明を用意しています。
ページの主題を 1 つの h1 で示し、複数の h1 は避けています。
h1→h2→h3 を飛ばさず、論理的に階層化しています。
Organization / WebSite / FAQPage / BreadcrumbList を @graph で実装しています。
全ページに canonical タグを指定し、重複インデックスを防いでいます。
sitemap.xml を生成し Search Console に送信しています。
robots.txt を設置し、クローラーの巡回を適切に制御しています。
SNS シェア時のプレビュー画像を 1200×630px で用意しています。
summary_large_image カードで、SNS での見栄えを最適化しています。
ブラウザのタブとホーム画面アイコンが対応しています。
PWA 対応、またはサイト情報の構造化を含めています。
ナビゲーション・フッター・本文内リンクが整理されています。
装飾でない画像には説明的な alt テキストを付与しています。
モダンブラウザには圧縮フォーマットを配信しています。
使用する文字種のみを含め、ダウンロード量を削減しています。
Google Lighthouse で スマートフォン版が 80 以上のスコアを達成しています。
LCP < 2.5s / INP < 200ms / CLS < 0.1 を満たしています。
Google Analytics / PostHog 等で流入元・ページビュー・ユーザー行動を計測しています。
CTA クリック・フォーム送信完了などの custom event を計測しています。
Search Console に登録し、sitemap を送信しています。
地域ビジネスの場合、Google ビジネスプロフィールと連携しています。
HTML + JSON-LD パンくずリストを実装しています。
カスタム 404 ページを用意し、noindex を付与しています。
HTTPS に統一し、HSTS ヘッダを設定しています。
WCAG 2.1 AA 相当はオプションではなく全案件で最初から組み込みます。後付けはほぼできないので設計段階から織り込みます。
<header> <nav> <main> <footer> などのセマンティック要素を使用しています。
スクリーンリーダーで正しく読み上げられるよう、h1〜h6 の階層を保っています。
:focus-visible で 2px 以上のコントラスト 3:1 以上の枠が表示されます。
マウスなしでもタブキーで全機能を操作できます。
キーボードユーザーがナビゲーションをスキップして本文に進めます。
<label> で <input> に対して明示的に関連付けしています。
フォームエラーの状態と説明が支援技術に伝わります。
アップデートされたコンテンツをスクリーンリーダーが知らせます。
ローディング中の状態が支援技術に伝わります。
重要な画像に説明的な alt を、装飾画像に空の alt を付与しています。
「詳しくはこちら」ではなく「〇〇について詳しく」など、文脈がなくても意味が通じます。
エラーの赤、成功の緑などに加えて、テキストやアイコンでも区別できます。
動画がある場合、クローズドキャプションを用意しています。
OSのモーション設定に応じて、アニメーションを調整しています。
テキストを 200% に拡大しても、レイアウトが破綻しません。
iOS の自動ズームを防ぎ、モバイルでの使いやすさを確保しています。
<html lang="ja"> で言語を明示しています。
axe-core / Lighthouse / WAVE で複数チェック、エラーゼロで公開しています。
公開はスタート地点。最初の 30 日で公開前の仮説が当たっているかを観測し、ズレていれば早めに直します。
Google Analytics で流入経路が想定通りか、どのページに人が集まるか確認しています。
全ページが Search Console にインデックスされているか確認しています。
お問い合わせ・申し込みフォームが正常に受け取れているか確認しています。
Lighthouse / PageSpeed Insights で、公開後の実測速度を確認しています。
Microsoft Clarity 等でユーザーの行動を可視化し、改善点を探っています。
最初の 1 か月で来た問い合わせの数と質から、ページの伝わり方を評価しています。
実際のユーザー 3〜5 名に使ってもらい、感想を聞いています。
A4 1 枚の簡潔なレポートで、メトリクスと改善案をまとめています。
上記の全項目を満たした状態で公開します。「松竹梅を一緒に選びましょう」ではなく、この基準での制作を約束します。
他社見積もりとの比較表としてもご活用ください。わかりにくい項目や、ご質問があればお気軽にお問い合わせください。