CMSサイポン認定講師
星野昌彦の公式ブログ

サイト別に押さえるポイント

2026/01/22

 ホームページを立てるときに、まず最初に意識してほしいのが「このサイトは何のために存在するのか」という目的を明確にすることです。目的が曖昧なまま制作を始めてしまうと、デザインや文章、構成の判断基準が定まらず、「きれいだけど何がしたいのかわからないサイト」になりがちです。

 たとえば、会社の信頼性を高めたいのか、商品を売りたいのか、問い合わせを増やしたいのか、人材を採用したいのかによって、トップページに書くべき内容や情報の順番は大きく変わります。目的が決まっていれば、「これは載せるべきか」「これは今は不要か」という判断がしやすくなり、結果として無駄のない、伝わるホームページになります。

 また、目的を明確にすることは、制作側だけでなく、閲覧するユーザーにとっても重要です。ユーザーはページを開いた瞬間に「ここで何が得られるのか」を無意識に判断しています。目的に沿ったメッセージが最初に示されていれば、ユーザーは安心して読み進め、行動(問い合わせ・購入・応募など)につながりやすくなります。

 ホームページは作ること自体がゴールではありません。目的を明らかにし、その目的を達成するためにどう使うかを考えてこそ、初めて「成果の出るホームページ」になります。制作に取りかかる前に、ぜひ一度「このサイトで何を実現したいのか」を言葉にしてみてください。それが、成功への第一歩です。

 「ホームページ冒頭(ファーストビュー〜スクロール直後)」に“必ず書くべきこと”を、目的 → ②最優先事項 → ③補足事項の順で整理します。※ここでは絶対的記載事項=冒頭必須相対的記載事項=次点として扱います。

 WEBプロデューサー視点での「実務でそのまま使えるワイヤーフレーム構成」を、①ファーストビュー → ②中段 → ③下段(クロージング)の流れで整理します。※図ではなく構成設計(要素配置)として記載します。
 

総括(WEBプロデューサー視点)
  • 冒頭=「誰に・何を・なぜ」
  • デザインより先に目的と優先順位を決める
  • ファーストビューで迷わせた時点で離脱

プロ視点の鉄則
  • ファーストビュー=結論
  • 中段=納得
  • 下段=行動
コーポレートサイト
目的:顧客・取引先・社会との円滑なコミュニケーション
冒頭に記載すべき事柄(優先順)
  1. 会社は何をしている会社か(事業内容の一言要約)
  2. 提供価値・強み(信頼・実績・専門性)
  3. 企業名・ロゴ・タグライン
  4. 主な事業・サービスへの導線
  5. 問い合わせ・資料請求への導線

コーポレートサイト|ワイヤーフレーム構成
目的:信頼形成・問い合わせ獲得
ファーストビュー
  • ロゴ/グローバルナビ
  • キャッチコピー(事業内容を一言で)
  • サブコピー(強み・提供価値)
  • メインビジュアル
  • CTA(お問い合わせ/資料請求)
中段
  • 事業紹介(3〜5ブロック)
  • 選ばれる理由・強み
  • 実績・導入事例
  • お知らせ・ニュース
下段
  • 会社概要(簡易)
  • アクセス・拠点
  • CTA再掲
  • フッター(法的表記・SNS)

■ ブランドサイト
目的:商品・サービスの認知度向上・世界観の訴求
冒頭に記載すべき事柄
  1. ブランドコンセプト・世界観(感情に訴えるメッセージ)
  2. ブランドが提供する体験・価値
  3. 象徴的ビジュアル(写真・動画・コピー)
  4. 主力商品・代表的サービス
  5. ブランドストーリーへの導線

ブランドサイト|ワイヤーフレーム構成
目的:世界観・記憶定着
ファーストビュー
  • フルビジュアル(写真/動画)
  • ブランドコピー(情緒)
  • ロゴ・最小限ナビ
中段
  • ブランドストーリー
  • 世界観・哲学
  • 代表商品・体験紹介
  • ビジュアルギャラリー
下段
  • SNS連携
  • 関連サイト導線
  • コピーライト

■ リクルートサイト
目的:優秀な人材の獲得・企業理解の促進
冒頭に記載すべき事柄
  1. 「どんな人に来てほしいか」の明確なメッセージ
  2. 会社の存在意義・ミッション
  3. 働く魅力(成長・やりがい・環境)
  4. 社員・仕事の雰囲気が伝わる要素
  5. 募集職種・エントリー導線

リクルートサイト|ワイヤーフレーム構成
目的:応募動機形成
ファーストビュー
  • キャッチコピー(誰向けか明確)
  • 社員写真・動画
  • エントリーボタン
中段
  • ミッション・ビジョン
  • 仕事紹介
  • 社員インタビュー
  • 働く環境・制度
下段
  • 募集要項
  • 選考フロー
  • FAQ
  • エントリー再掲

■ プロモーションサイト
目的:商品・サービスの販促・話題化
冒頭に記載すべき事柄
  1. キャンペーン・企画の主旨・結論
  2. ユーザーにとってのメリット
  3. 期間・限定性・緊急性
  4. 商品・サービスの魅力
  5. 行動喚起(参加・購入・申込)

プロモーションサイト|ワイヤーフレーム構成
目的:話題化・参加促進
ファーストビュー
  • キービジュアル
  • キャンペーン訴求コピー
  • 期間・限定表記
  • CTA
中段
  • 商品・企画説明
  • メリット・特典
  • 利用シーン
  • SNS拡散要素
下段
  • 注意事項
  • 問い合わせ
  • CTA再掲

■ セールスサイト
目的:365日働くWEB上の営業マン
冒頭に記載すべき事柄
  1. 誰のどんな悩みを解決する商品か
  2. ベネフィット(得られる結果)
  3. 他社との違い・優位性
  4. 実績・証拠(数字・事例)
  5. 購入・申込への導線

セールスサイト|ワイヤーフレーム構成
目的:成約獲得
ファーストビュー
  • 悩み訴求コピー
  • 解決策の提示
  • CTA(購入・申込)
中段
  • ベネフィット説明
  • 商品詳細
  • 実績・証拠
  • 他社比較
下段
  • 価格・プラン
  • 保証・FAQ
  • CTA強調

■ ランディングページ(LP)
目的:一点集中で成果を出すWEB営業マン
冒頭に記載すべき事柄
  1. ターゲットの悩みを突くキャッチコピー
  2. 結論(この商品で解決できる)
  3. 具体的なベネフィット
  4. 安心材料(実績・保証・口コミ)
  5. CTA(申込・購入ボタン)
※セールスサイトよりも即決重視

ランディングページ(LP)|ワイヤーフレーム構成
目的:一点突破・即決
ファーストビュー
  • 強烈なキャッチコピー
  • ベネフィット
  • CTA(即行動)
中段
  • 問題提起 → 解決
  • 商品説明
  • お客様の声
  • 実績・信頼材料
下段
  • オファー再提示
  • 保証・不安解消
  • CTA連打

■ 店舗サイト
目的:WEB上の名刺として集客力アップ
冒頭に記載すべき事柄
  1. 何の店か・何ができる店か
  2. 店舗の強み・選ばれる理由
  3. 所在地・営業時間・アクセス
  4. 雰囲気が分かる写真
  5. 予約・問い合わせ導線

店舗サイト|ワイヤーフレーム構成
目的:来店促進
ファーストビュー
  • 店舗写真
  • 店名・業種
  • キャッチコピー
  • 予約・電話ボタン
中段
  • メニュー・サービス
  • 強み・特徴
  • 店内・スタッフ写真
  • 口コミ
下段
  • アクセス・地図
  • 営業時間
  • SNS
  • 予約CTA

■ サポートサイト
目的:顧客満足度向上・問い合わせ削減
冒頭に記載すべき事柄
  1. 「困ったらここ」という明確な案内
  2. よくある質問(FAQ)への導線
  3. サポート対象の商品・サービス
  4. 検索窓・カテゴリ導線
  5. 問い合わせ方法

サポートサイト|ワイヤーフレーム構成
目的:自己解決率向上
ファーストビュー
  • 検索窓(最重要)
  • よくある質問リンク
中段
  • カテゴリ別サポート
  • 人気記事
  • トラブル別導線
下段
  • 問い合わせ方法
  • 対応時間
  • 注意事項

■ ポートフォリオサイト
目的:自分の才能・実績を伝え、仕事につなげる
冒頭に記載すべき事柄
  1. 自分は何者か(肩書・専門)
  2. 得意分野・提供できる価値
  3. 代表作品・実績への導線
  4. 実績の信頼性(実務・受賞など)
  5. 連絡先・依頼導線

ポートフォリオサイト|ワイヤーフレーム構成
目的:仕事獲得
ファーストビュー
  • 名前・肩書
  • 専門分野コピー
  • 代表作品サムネイル
中段
  • 実績一覧
  • 制作プロセス
  • スキル・ツール
下段
  • プロフィール詳細
  • 問い合わせ
  • SNS・外部リンク

実はこのブログ、
サイトCMSで作ってます
サイポンで、サイト制作してみませんか?
\今なら、5ページまで無料!/