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
この課題を完了したら、講師に報告して次に進みましょう。
04Trattoria SOLE
本格イタリアンレストランのWebサイト制作