デジタル人材の人的資本管理における課題を解消するスキルマネジメントサービス「SkillDB」を提供する株式会社テックピットのコーポレートサイト、スライドテンプレートを制作いたしました。

依頼内容

toB事業に合わせたビジュアルにしたい
サイト訪問から提案資料までのビジュアルを統一したい
お問い合わせ・採用強化に向けた動線を新設したい

提案内容

初回打ち合わせから携わりサイトデザインから実装、スライド作成まで一人で担当することで、意図のズレなくスピーディに制作を推進
将来的に必要になるコンテンツを洗い出した上で、限られた期間・体制を踏まえてスコープを調整し段階的なリリースを提案
スライドテンプレートをAIで生成できる仕組みを整備

経緯と問題意識

テックピットはtoCの学習プラットフォーム「Techpit」を展開してきたがサービスを売却し、人的資本管理サービス「SkillDB」を軸としたtoB事業へと転換しました。
toC時代はコーポレートサイトの優先度が低くかったが、 toB事業ではクライアント・投資家・採用候補者といったステークホルダーへの信頼形成としてサイトの重要性が上がっていました。
また、問い合わせフォームがないという課題も抱えていました。

Webサイト想定訪問者と情報設計

サイトを訪れる相手は「顧客」と「採用候補者」の2軸で整理しました。

・クライアント
会社の実態が見えないことへの不安を払拭し「信頼できる」と感じてもらうことが目的。
想定する規模は、顧問経由で接点を持つ従業員1,000名超のエンタープライズ層から、売上300億円規模の中堅・上場企業クラスまで幅広い。

・採用候補者
メインの採用ルートはリファラル。その際の候補者の意思決定を後押しできるよう「最新の技術に明るい」「先進的」という印象を与え、メンバーの人となりが伝わることを重視。

この2つの訪問者像をもとに、サイト構成はトップページ、会社概要、サービス、メンバー、ニュース、採用情報、お問い合わせの7ページでシンプルに構成。

ポジショニングマップ（ワークショップ）

デザインの方向性を固めるにあたり打ち合わせの中で出てきたキーワードを整理し、
「テック感があり先進的」、「プロフェッショナルな印象」、「情熱的で地道な働きが特徴」とまとめられたが、
まだ抽象度が高く、潜在的な好みといった細かいニュアンスをどう掴むかが課題になりました。

そこで、テクノロジー・スキル領域で近しいポジションにある他社サイトのスクショをマッピングするワークをメンバーで行いました。こちらで用意した他社サイトを見ながら「良い」「かっこいい」「合わない」といった直感的な反応をひとつずつ可視化し、マップに落としていくことで会社の立ち位置を以下のように掴んでいきました。

自分たちの現在地　ー　旧来の業界寄り・泥臭いと見られがちなポジション
これから行きたい位置　ー　先進さを持ちつつ、エンジニアへの思いや人間味を残したポジション

というギャップでした。目指す方向に近い他社のポジションを基準として置いた上で、そこに自分たちの独自性をどう残すかが、表現上で重要なポイントとなりました。

コンセプトビジュアル

コンセプトビジュアルをテックピットが実現したい世界になった時を表現した2つのイメージで作成しました。

・1つ目は「人と人・プロジェクトがつながる世界」
スキルが見える化されることで、人材が最適に配置されプロジェクトが円滑に進む世界を表現した案。
・2つ目は山の稜線をイメージした「多重下請け構造の透明化」
日本のSIer業界の多重下請け構造を、山の稜線に見立てて表現した案。

2つ目の案は、テックピットが解決したい課題を直感的に表現できる一方で、表現が直積的すぎる印象を与えることから1つ目の案で決定しました。
配色についても暗いトーンだとテック企業な印象が強くなりエンタープライズ顧客に硬い印象を与えてしまうため、信頼感とのバランスを意識した明るいトーンを検討しました。

最終Webデザイン

以上を踏まえて、最終的に以下のデザインで制作しました。
決まったコンセプトビジュアルを元に明るい印象に変更し、人やプロジェクトが多種多様なことを表現するために多彩な色を使用しました。

リリース後検証

Techpitのサイトをリリースした後、アナリティクスとサーチコンソールで効果を検証しました。

アクセス:アクティブユーザーは前の期間比で+680.1%、イベント数は+554.5%に増加。同業他社(インターネット・通信)と同水準になりました。
検索キーワード:上位はほぼ社名(「テックピット」「techpit」など)。社名で調べた人が公式情報にたどり着けるようになり、これまで取りこぼしていた層を取り込めていると言えます。
お問い合わせ:1日あたり約1件で、問い合わせ窓口として機能しています。

スライドテンプレート

サイトデザインと同じスタイルでスライドテンプレートを制作しました。
スライドテンプレートは、社内のメンバーがAIを活用して資料を作成することを想定し、
プロンプトを入力するとスライドが生成される仕組みを整備しました。

テンプレートの課題と改善

スライドは横長の画面なのに、ヘッダーとフッターが領域を占めてしまい、自由に表現できる面積が小さいことが課題でした。さらに、伝えたいメッセージの文字サイズが小さく、他の情報に埋もれていました。
そこで次の2点を改善しました。
サイドバーの設置:ヘッダーとフッターの役割をサイドバーに集約し、自由に記述できる面積を広く確保しました。
ジャンプ率の強化:最も伝えたいメッセージを他のテキストより大きく設定し、一目で要点が伝わるようにしました。

Claudeによるデザインシステム化

作成したテンプレートをもとにClaudeのデザインシステムを作成し、簡単なプロンプトを用意しました。これにより、スタイルの揃ったプレゼン資料を誰でも作成できる仕組みになっています。

今後の展望

フロントの方々に使ってもらい、そのフィードバックをもとに、デザインシステムとプロンプトの両面をブラッシュアップしていきます。将来的には、商談の議事録から次の提案資料を自動生成する仕組みの整備を目指します。