Challenge 03★★★☆☆IT / SaaS

NextBridge

IT企業のコーポレートサイト制作

Client Brief

クライアントからの依頼

From:マーケティング部 部長 高橋 健一 / 株式会社NextBridge(ネクストブリッジ)
Subject:NextBridgeの制作依頼
Budget:15万〜20万円
Deadline:10〜14日

お世話になります。健一と申します。

BtoB向けのSaaSプロダクトを開発している会社です。採用強化とリード獲得を目的に、コーポレートサイトを全面リニューアルしたいです。技術力が伝わりつつも、堅すぎない・親しみやすいデザインを希望しています。競合と差別化できるような、モダンなサイトにしたいです。

ページ構成

  • トップページ
  • サービス紹介ページ
  • 会社概要ページ
  • 採用情報ページ
  • お問い合わせページ

必須要素

  • ヘッダー(ロゴ、グローバルナビ、お問い合わせボタン)
  • ヒーロー(キャッチコピー、CTA、背景アニメーション)
  • サービス紹介(3つのプロダクト概要)
  • 数字で見る実績(導入企業数、継続率など)
  • お客様の声(3社分)
  • ニュース・プレスリリース
  • 採用情報(募集職種一覧)
  • お問い合わせフォーム(名前、メール、会社名、内容)
  • フッター(サイトマップ、SNS、プライバシーポリシー)

デザインの希望

配色:ネイビー #1B2A4A、白 #FFFFFF、明るいブルー #3B82F6、薄グレー #F8FAFC

雰囲気:信頼感、先進性、クリーン、プロフェッショナル

フォント:モダンなゴシック体

避けてほしいもの:
  • 古臭い企業サイト感
  • 過度な装飾
  • 読みにくい小さな文字

素材について

ロゴデータ、社員写真はこちらで用意します。その他は仮素材でお願いします。

よろしくお願いいたします。

Recommended Prompt

この案件、こう書けば伝わる

クライアントブリーフを元に、AIに伝わるプロンプトを作成しました。 コピーしてそのまま使えます。

▶ prompt
以下の要件で、IT企業のコーポレートサイトを作成してください。5ページ構成です。

【会社情報】
- 社名:株式会社NextBridge(ネクストブリッジ)
- 業種:BtoB SaaS開発
- 所在地:東京都渋谷区
- 設立:2019年
- 社員数:45名
- ミッション:「テクノロジーで、ビジネスの架け橋をつくる」

【ページ構成(5ページ)】

■ トップページ
- ヘッダー(ロゴ左、ナビ中央、お問い合わせボタン右)
- ヒーロー(キャッチコピー「ビジネスの未来を、一緒に架ける。」、CTAボタン2つ:サービスを見る / お問い合わせ)
- サービス概要(3つのプロダクトをカード形式で)
  - BridgeCRM:顧客管理を自動化するCRM
  - BridgeFlow:業務フローを最適化するBPMツール
  - BridgeAnalytics:データ分析ダッシュボード
- 数字で見るNextBridge(導入企業 320社+、継続率 98.5%、平均コスト削減 35%、サポート満足度 4.8/5.0)
- お客様の声(3社分、会社名・担当者名・コメント)
- ニュース(3件のダミー記事タイトル・日付)
- CTA(資料請求・お問い合わせへの導線)
- フッター

■ サービス紹介ページ
- 3つのプロダクトの詳細(各プロダクトに機能一覧、料金プラン、スクリーンショット)
- 導入ステップ(4ステップ:ヒアリング→設計→導入→運用サポート)
- よくある質問(5つ)

■ 会社概要ページ
- 代表メッセージ
- 会社情報テーブル(社名、所在地、設立、資本金、代表者、事業内容)
- 沿革(5つのマイルストーン)
- アクセスマップ

■ 採用情報ページ
- メッセージ(「一緒に未来を架けませんか」)
- 募集職種(フロントエンドエンジニア、バックエンドエンジニア、カスタマーサクセス、デザイナー)
- 各職種に仕事内容・必須スキル・歓迎スキル・待遇
- 社員インタビュー(2名分、ダミー)

■ お問い合わせページ
- フォーム(会社名、氏名、メールアドレス、電話番号、お問い合わせ種別セレクト、内容テキストエリア)
- プライバシーポリシー同意チェックボックス
- 送信ボタン

【デザイン要件】
- 配色:ネイビー #1B2A4A、白 #FFFFFF、ブルー #3B82F6、薄グレー #F8FAFC
- 雰囲気:信頼感と先進性を両立、堅すぎない
- フォント:日本語は Noto Sans JP、英字はモダンなサンセリフ
- セクション間に十分な余白
- 数字は大きく目立たせる
- CTAボタンはブルーで目立たせる
- スクロールアニメーション(フェードイン程度)
- レスポンシブ対応必須

【避けてほしいもの】
- 古臭い「ザ・企業サイト」的なデザイン
- 過度なアニメーションや装飾
- 情報の詰め込みすぎ

HTML/CSS/JSで実装してください。
画像はUnsplashの無料画像を使用してください(オフィス、テクノロジー、チーム系)。
ページ間のナビゲーションを実装してください。

Tips

数字のデータ(導入企業数、継続率など)を具体的に書くと、リアリティが増します

5ページ構成では各ページの役割を明確に分けることが重要です

BtoB向けは「信頼感」が最重要。実績や数字を前面に出す指示が効果的です

Completed Sample

完成サンプル

このプロンプトで、こんなサイトができます。

/assets/samples/03-nextbridge/index.html
03

NextBridge

Coming Soon

サンプルファイルは後日配置されます

How to Win Clients

このスキルで取れる案件

身につくスキル
  • BtoB企業サイトの情報設計
  • フォーム実装
  • 複数ページのナビゲーション設計
  • 採用ページの構成
  • SEOを意識したマークアップ
単価アップのポイント
  • CMS連携(お知らせの更新機能)の提案で+5〜10万
  • アクセス解析(GA4)の設置をセットで提案
  • ブログ機能の追加でコンテンツマーケティング支援
競合との差別化
  • BtoBの導線設計(リード獲得→お問い合わせ)を理解している
  • 採用と営業、両方の目的を1サイトで達成する設計力
  • コーポレートサイトのSEO基礎知識がある
Next Challenge

この課題を完了したら、講師に報告して次に進みましょう。

04

Trattoria SOLE

本格イタリアンレストランのWebサイト制作