# K2pbLab｜03 トップページ情報設計 - 作成：2026-11-04／フェイズ03 - 状態：**5セクション構成はユーザー暫定承認。全体成果物としては未最終承認**。 - 目的：企業の思想と専門性を簡潔に伝え、閲覧者を必要な詳細情報へ導く上質なポータル。 ## 1. 確定した設計方針 - 「顧客接点とサービス設計 × プロジェクト推進」を中心とする。 - 顧客ニーズ60％・弊社要望40％（定性的な優先順位基準）。 - 現行メインビジュアルを基本的に継承し、営業色の強いLPにしない。 - コンセプトの独立セクションは設けない。共通ナビ「コンセプト」で下層へ誘導。メインビジュアル内部には追加リンク不要。 - 事業案内と「できること」は、同じ情報設計ルール（見出し／簡潔な説明／自然な詳細リンク）で視覚的な比重を揃える。 - 問い合わせ・申込CTAはトップ**本文には置かない**。共通ナビの問い合わせ導線は維持。個別ページへの通常のテキストリンクは設ける。 - 実績の独立セクションは置かない。既存の事業案内・事例ページへ誘導する。 ## 2. ページ構成・掲載順【暫定承認】 | 順位 | セクション／主題 | 情報の役割 | 配置・遷移 | |---|---|---|---| | 1 | メインビジュアル | コンセプト・世界観・企業の専門性 | 現行ビジュアル・コピーを継承。追加CTAなし。 | | 2 | 事業案内 | 強みと顧客メリット、仕事の進め方 | 短文＋現行図版＋事業案内への詳細リンク。 | | 3 | できること | 顧客が依頼できる4領域を短時間で理解 | 4カテゴリを**同等の比重**で順に提示。各独立カテゴリページへリンク。 | | 4 | Web改善ラボ | 知見の蓄積と継続発信 | 見出し＋最新記事3件＋記事一覧リンク。説明本文なし。 | | 5 | お知らせ | 企業活動の新着情報 | 最新5件の日付＋タイトル＋一覧リンク。ページ下部。 | ## 3. セクション別ワイヤーフレーム用コンテンツ仕様 ### 3.1 メインビジュアル - 見出し階層：ページ全体で**h1を1つ**。現行の主メッセージを基に扱う。 - **継承候補コピー（フェイズ02確認済み）**：h1「進まないプロジェクトを、前へ進める。」／主題「顧客接点とサービス設計 × プロジェクト推進」。 - **現行画面の視覚表現**：大きなタイポグラフィ、広い余白、ボーダレスなつながりを示す造形。スクリーンショット提供を基に**維持方針が承認済み**。 - コンセプト専用セクション・メインビジュアル内の新たなテキストリンク・問い合わせCTAは設置しない。 - ※現行コピーを逐語的に新ワイヤーへ移植するかは、画像内で見える表現とフェイズ02のDOM記録に違いがあるため、**上記2文を暫定原稿として扱い、実装前に現行表示に照らし合わせる**。 ### 3.2 事業案内 - セクション見出し：**事業案内**（h2）。 - 主眼：弊社の強みを顧客の利点へ結びつける。「プロジェクトの空洞」「判断の層」「専門領域の連携」は現行の説明を活用する。 - **本文案（最終の逐語承認は未取得）**：「企画から設計・実装まで、専門領域をつないでプロジェクトを前へ進めます。判断の食い違いや手戻りを減らし、実行につながる計画と品質を支えます。」 - 図版：**現行図版をそのまま継承**（ユーザー承認）。判断の層／関与領域の連携を表す。図版の「決定者」は文脈上顧客側の意思決定者とも読めるため、新たな断定的説明を加えない。 - 詳細テキストリンク：**「事業案内」** → `/guide/`（既存URL）。 - 既存事例 `/guide/performance_concept.php` は裏付けとして活用。トップ上で独立した実績カード・セクションは作成せず、事業案内の情報への導線を優先する。**トップから事例への直リンク追加は未決定**。 ### 3.3 できること - セクション見出し：**できること**（h2）。4カテゴリは同じレイアウト・余白・文字量・見出し規則で示す。序列は設けないが順序は以下を採用。 - カテゴリ名：h3を想定。小見出しは言い切り型「〜します」。本文は**顧客の利益中心**で短くする。 - カテゴリ本体を詳細ページへのリンク対象とするか、独立のテキストリンクを設けるかは、リンクの明確さ・アクセシビリティを優先してフェイズ04で具体化する。**リンク先は各カテゴリ独立ページ。URL未決定**。 | 順 | カテゴリ名（h3） | 小見出し【承認済み】 | 本文案／承認状況 | |---|---|---|---| | 1 | **プロジェクト設計支援** | **関係者の合意形成を支援します。** | 「目的や方向性の食い違いによる手戻りを防ぎ、無駄な時間とコストを抑えて、プロジェクトを円滑に進めます。」【対話でユーザー肯定。表現の最終一括承認待ち】 | | 2 | **企業ブランディング** | **企業の強みと価値を明確にします。** | 「企業の個性や魅力を伝わる形にし、顧客からの信頼と共感を高め、選ばれる企業づくりを支援します。」【提案原稿】 | | 3 | **コミュニケーション設計** | **企業と顧客をつなぐ接点を設計します。** | 「必要な情報や価値を伝わりやすくし、顧客との信頼関係を深め、新たなビジネス機会の創出につなげます。」【提案原稿】 | | 4 | **サービス設計と品質改善** | **使いやすさとサービス品質を向上させます。** | 「利用者の不便や使いにくさを解消し、誰もが快適に利用できるサービスへと改善。顧客満足度の向上につなげます。」【提案原稿】 | - 注：「誰もが快適に利用できる」は成果保証に読まれ得るため、最終校正時に必要なら「多様な利用者が使いやすい」等へ修正候補とする。ユーザー承認なく本文を書き換えない。 - アイコン：**必須としない**。カテゴリ識別に実効性がある場合のみ採用。写真・図版を各カテゴリに追加しない。 - 観光関連サービス・Webスタートアップはこのトップの4カテゴリ枠には含めない。「できること」総合ページ・補助導線で扱う。 ### 3.4 Web改善ラボ - h2「Web改善ラボ」。**説明本文なし**。 - 最新記事：3件。表示項目は記事タイトルとリンク（公開日等の追加表示は未決定）。既存の動的取得方式はフェイズ02の静的HTMLでは検証できていない。 - 一覧テキストリンク：「記事一覧」→ `/hpplace/`。 - 「できること」等より視覚的な比重を下げる。 ### 3.5 お知らせ - h2「お知らせ」。 - 最新5件：**日付＋タイトル**の一覧。直近の5件の選定は更新データを基に行い、古い固定リストを無条件に転載しない。 - 一覧テキストリンク：「お知らせ一覧」→ `/news/`。 - 主要セクションの最後に配置、装飾は控えめ。 ## 4. 共通ナビ・情報の優先順位 - PCの主要ナビは「コンセプト／事業案内／できること／会社情報／Web改善ラボ（右端）」の順。 - モバイルでも**文書順序**を変更しない。折りたたみナビ内でも項目名と順序を保つ。 - 共通の問い合わせ導線は維持。ただし本文に営業色の強いCTA、モーダル、追従ボタンを追加しない。 - PCとモバイルで、メインメッセージ→事業案内→4カテゴリ→ラボ→お知らせの優先順位を一致させる。 - 狭い画面では4カテゴリを1列にし、説明とリンクを同じまとまりとして認識できるようにする。PCの列数・ブレイクポイントはフェイズ04でK2pb仕様に従い決める。 ## 5. 画像・図版・アイコンの要求 | 対象 | 役割／表現する情報 | 資料・入手 | 指示 | |---|---|---|---| | メインビジュアル | ボーダレスな思想・企業の世界観 | 現行トップの視覚表現、ユーザー提供スクリーンショット | 原則継承。新規の装飾写真は不要。 | | 事業案内図版 | 判断の層／専門領域連携・プロジェクト推進 | 現行トップに既存図版あり（フェイズ02：`common/images/guide/ill02.webp`） | 既存の図版を継承。代替テキストは図の実内容と照合して決める。 | | 4カテゴリ | カテゴリ識別 | 新規必須素材なし | テキスト中心。アイコンは必要性が確認された場合のみ。 | | ラボ／お知らせ | 記事・ニュースへの移動 | 既存コンテンツデータ | 新規のビジュアル制作は不要。 | ## 6. アクセシビリティと品質要件 - `
`／`