DOCUMENT · 10.3 KB
refs/pengin/wireframe-checklist.md
Workspace snapshot · 08/31 23:51
ワイヤーフレーム チェックリスト（100項目・PENGIN 準拠）
出典: PENGIN 社内マスタシート WF完成時の品質チェック。カテゴリ別に確認する。
全般（9項目）
- すべての順番・設計・コンテンツに意味がある状態になっている（「なぜ？」を問われたら明確に答えられる）
- 「資料として」わかりやすい、確認しやすい（余白感の統一・文字サイズの統一など）
- 各セクション・各ページに必要な導線がおかれている
- 意味が伝わらない言葉を使わない
- 文字サイズは、PCでは基本16px以上
- リンクやボタンはわかりやすい・ハードルの低い文言（○「無料相談する」 / ×「お問い合わせ」）
- 意味のある見出しより、意味のないアイコンや画像の方を目立たせない
- 「ソリューション」「価値提案」などの曖昧で抽象的な言葉を使わない
- ページ数が多いサイトではサイト内検索を設置する
CTA（7項目）
- 基本的にすべてのページで、コンテンツ読了後にCTAが設置してある
- TOP/サービス関連ページのファーストビューにCTAもしくはフォーム（全部/一部）が設置
- 各ページのCTAは、コンテンツ内容に合わせて内容やラベルを変えている
- コンテンツ後のCTAには、アクション誘導のリード文が用意されている
- CTAには電話番号など、オンラインに限らず重要なアクションが記載されている
- CTAには登録にかかる費用、時間、締切り、キャンペーン情報など、クリック率を高める情報を含む
- 重要度に合わせてCTAを追従させている（コンセプト次第）
ナビゲーション（9項目）
- グローバルナビのメニューは左から優先度の高い順、右にCV配置
- 日本語で、一目見て内容が想像できるラベリング
- グローバルナビにはホームを必ず含める
- グローバル/ローカルナビでは、現在地のカレント表示
- ドロップダウンメニューの中は大きく押しやすいリンクを配置
- グローバルナビはスクロールに追随、追随中は高さをできるだけ小さく
- 同一カテゴリ内で頻繁にコンテンツ間を横移動する場合は、ローカルナビを常設
- グローバル→ローカルナビは、情報構造を正確に再現
- パンくずリストを必ず設置
下部ナビゲーション（1項目）
- コンテンツ読了後、関連ページや同階層ページへナビゲート
ホーム（6項目）
- 企業やサービス、製品を端的に理解できるコピーが真っ先に目に入る
- 基本的にはファーストビューに商材（一覧）を設置。CV目的で訪問したユーザーを即座に誘導
- メインビジュアルは特徴的で記憶に残りやすい（ありがちなもの、競合と似たものにしない）
- 特徴ページがない場合、企業やサービス、製品の特徴をホームにも掲載
- ニュースや更新情報のような多くユーザーが必要としない情報を上部に設置しない
- ホームの文字量を3000文字以上にする
特徴ページ（サービス）（10項目）
- 企業やサービス、製品の特徴が1ページで分かる
- 問題提起→結果→実証→信頼→安心 の基本的な枠組みでコンテンツ構成
- 見出しは「なぜ得するのか」「どう得するのか」などユーザーメリット視点で端的に
- 見出しは本文の「すべり台」として、興味を持たせることを書く
- 見出しは20字程度、多くても40字未満
- 図などを適度に配置し、見出しと一緒に流し読みでも理解できる
- 意味を持たない飾りだけの写真やアイコンに面積を使わない
- 「ソリューション」「価値提案」などの中身がない抽象語は使わない
- CTAを押さなかったユーザー向けのコンテンツを提示し、サイト内の回遊を促す
- 営業現場で話されている企業、製品の特徴と整合性が取れているか確認
サービス（14項目）
- ページが長い場合、冒頭にアンカーリンクや目次を設置
- 冒頭でページの主題や言いたいことが概ね把握できる
- 見出しはユーザーメリット視点で端的に
- 見出しは本文の「すべり台」として興味を持たせる
- 見出しは20字程度、多くても40字未満
- 図などを適度に配置し、流し読みでも理解できる
- 意味を持たない飾りだけの写真やアイコンを極力使わない
- アニメーションなどの余計な演出で、コンテンツに没入する邪魔をしない
- ありきたりで中身がない抽象語は使わない
- 「なぜそれが大事なのか」「なぜそれが求められるのか」の前提を端折らず説明
- ページ下部にCTAを置き、すぐにアクションが取れる
- コンテンツ下部に資料ダウンロードの導線を置き、関連資料を入手できる
- CTAを押さなかったユーザー向けのコンテンツを提示し、回遊を促す
- 内容を想起できないサービス名や機能名を一覧表示する場合、短い説明文を併記
事例紹介（10項目）
- 信頼に繋がる著名企業の実績と、自分事化できる身近な実績の両方を掲載
- 事例一覧では、企業規模、業界、部署、役職、改善内容など、ユーザーが知りたい情報をサマリーで見せる
- 事例一覧では、事例が多い場合はソートできるようにする
- 事例詳細の冒頭では、事例の要点を箇条書きで端的に紹介
- 事例詳細では元々どういう悩みがあり、どういうプロセスで、どう解決したかを、可能であれば数字を添えて提示
- 事例と同一ページ内にお客様の声を載せる（事例とお客様の声を別ページにしない）
- 事例詳細は長々と文章を読ませず、さっと流し読みでも内容が理解できる
- コンテンツ下部にはCTAを設置し、すぐ問い合わせできる
- コンテンツ下部には事例集など関連資料のダウンロードボタンを置く
- 事例詳細のタイトルは、一見して改善内容がわかる
会社情報（5項目）
- 組織規模、上場の有無、売上規模、主要取引先、資本関係などを掲載し、信頼できる企業であることを証明
- 経営者や役員の経歴を掲載し、経営層に対し信頼感や共感を生む
- 顧客にも分かる文脈で企業理念やミッション・ビジョン・バリューを示し、ブランド価値を高める
- 組織体制やサポート体制、上級社員のプロフィールなどを掲載し、組織・人的な層の厚さをアピール
- コンサル系等、人が提供するサービスの場合、窓口に立つ社員の顔写真を載せて安心感を与える
ブログ/コラム（8項目）
- 文字サイズを大きくする
- カテゴリページはブログ記事数が50件を超えるまで設置しない（SEOの観点）
- CVを狙う場合、CVに直接繋がる可能性が高いコンテンツを作る
- H2のたびに、CTAを設置
- PCでは2カラム、サイドバーに関連記事や関連情報への導線
- サイドバーはスクロールに追随させて、関連情報が常時見えるようにする（必要であれば）
- Twitter/Facebookなどのソーシャルボタンを設置
- ブログの文章幅は800px等、読みやすい幅にする
資料ダウンロード（7項目）
- 「お役立ち資料」など、ユーザーがメリットを感じられるラベル
- 一覧では内容や有益な資料であることをできるだけ伝える情報を掲載
- 一覧や詳細では、どんな人に役立つのか、どんなことが分かるかを端的に説明
- 詳細画面では資料の内容の一部を掲載し、ダウンロード用フォームを設置
- ダウンロード用フォームには、リード化に必要な最低限の情報だけ入力させる
- ダウンロード完了画面で、他の資料やコンテンツをリコメンド
- 資料が5個以上ある場合は一括ダウンロードを設け、フォーム入力の手間を省く
フォーム（6項目）
- できるだけファーストビュー内に「送信する」まで入るようにする
- サービスや製品のイメージがある場合にはフォームに表示
- 完了画面では、コンテンツなどをリコメンドし、さらに回遊する導線を設ける
- ヘッダやフッタ、ナビなどの要素は消し、離脱させないようにする
- フォームから離れる、ブラウザを閉じるといった操作をした場合には離脱確認のアラートを表示（嫌がられない範囲で）
- 急いでいるユーザー向けにフォーム内に電話番号を表示
価格（8項目）
- 価格はシンプルに分かりやすく掲載
- プランによる違いやオプションなどは、表やグラフで分かりやすく表現
- 一番売りたいプランを一番目立たせる
- 価格の説明は、専門用語を使わず、できるだけ分かりやすく
- オーダーメイド型で価格体系が曖昧な場合でも、価格例などで金額の目安を伝える
- 価格を見てサービスを見るユーザーを想定した動線を置く（通常グロナビでもOK）
- 価格を見て意思決定したユーザーを想定し、ページ下部にCTA（料金表ダウンロード、見積もり依頼など）を設置
- 価格に関するよくある質問と回答を用意
確認フロー
- WF完成 → 自己チェック（このリスト）
- 品質管理担当者にフィードバック依頼
- 修正
- 先方確認