制作背景

プロジェクトの背景

現役コンサルタントの知見を、課題解決に直結する研修サービスへ

株式会社MODE DIRECTIONS様（以下、MODE DIRECTIONS）は、クライアントに寄り添いながら、経営課題の解決を支援するコンサルティング会社です。今回制作したのは、大手コンサルティングファーム出身の現役コンサルタントが直接指導する、課題解決に特化した法人向け研修サービス「MODE CAMP」のサービスサイトです。

MODE CAMPは、研修を実施して終わりにするのではなく、企業ごとの課題に合わせた研修設計から、実施後の定着支援まで細かく対応することを特徴としています。今回のプロジェクトでは、その価値を企業の部門マネージャーや教育担当、人材開発部、研修企画担当へ分かりやすく届け、資料ダウンロードやお問い合わせにつながる状態を目指しました。

抱えていた課題とその背景

研修の価値は、プログラム名だけでは伝わらない

法人向け研修を検討する担当者は、単に研修テーマを探しているわけではありません。「自社の課題に合っているか」「実務で本当に活用できるのか」「研修後も学びが定着するのか」といった点を確認しながら、複数のサービスを比較しています。どれほど質の高い研修を提供していても、サービスの流れや支援範囲が十分に伝わらなければ、一般的な研修サービスとの違いを理解してもらうことはできません。特に、MODE CAMPの強みである研修設計や実施後の定着支援は、表面的なサービス紹介だけでは見落とされやすい価値です。

また、企業の研修を任せるサービスには、先進性だけでなく、会社としての信頼感や安定感も求められます。新しさを強調しすぎれば軽い印象になり、堅実さを優先しすぎれば、サービスの革新性が伝わりません。課題は、MODE CAMPの支援内容を並べることではなく、研修の前後まで伴走する価値を、信頼できるサービスとして伝えることでした。

提案内容

私たちが掲げた戦略

信頼感を土台に、先進性と革新性を感じさせる

サイト全体のコンセプトには、「信頼感を担保し、先進的かつ革新的なサービスとして見せる」ことを掲げました。法人向けサービスでは、デザインの新しさだけでは意思決定につながりません。自社の人材育成を任せられる会社なのか、サービスの仕組みは明確なのか、導入後まで責任を持って支援してくれるのか。こうした安心材料が必要です。

そのため、コンサルティング会社としての知性や誠実さを感じられるトーンを基盤にしながら、MODE CAMPならではの新しい研修体験が伝わるデザインを目指しました。情報を整理して見せること、サービスの流れを丁寧に説明すること、そして検討の段階に応じてすぐに行動できること。この三つを軸に、資料ダウンロードやお問い合わせへつながるサイトを設計しました。

具体的な解決策

信頼と先進性を両立し、検討から運用までを支える6つのアプローチ

• ネイビーを基調に、法人サービスとしての信頼を視覚化

サイトの配色は、ネイビーを基調に設計しました。ネイビーは、知性や誠実さ、安定感を感じさせる色です。人材育成や研修を任せる企業の担当者に対し、専門性のあるサービスであることを視覚的に伝える狙いがあります。

ただし、堅い印象だけに寄せてしまうと、MODE CAMPが持つ先進性や革新性が弱くなってしまいます。そこで、深みのある色を土台としながら、イラストや各要素の見せ方によって、現代的で柔軟なサービスであることも表現しました。信頼できる会社であることと、これまでにない研修を提供すること。その両方が同時に伝わるバランスを目指しています。

• 整然としたレイアウトで、複雑な情報を迷わず読める形へ

テキストやカード、写真などの位置を規則的に揃え、サイト全体を整然としたレイアウトで構成しました。法人向け研修サービスでは、支援内容や導入の流れ、研修テーマなど、伝えるべき情報が多くなります。それらを単に並べるだけでは、閲覧する担当者が必要な情報を探しにくくなってしまいます。

そこで、情報同士の位置や大きさに一定のルールを設け、内容のまとまりがひと目で分かるようにしました。見た目を整えるだけでなく、サービスの内容を順序立てて理解できることを重視しています。コンサルティング会社らしい論理性や情報整理力を、文章だけではなく、ページ全体の構造からも感じられるデザインです。

• 余白を活かし、落ち着いて検討できる情報量に

サイト内では、要素を詰め込みすぎず、適切な余白を設けました。企業の研修担当者がサービスを比較する際には、一つひとつの情報を確認しながら、自社に合うかどうかを慎重に判断します。情報が密集していると、重要な内容が埋もれ、ページを読む負担も大きくなります。

そのため、セクションや情報のまとまりごとに余白を確保し、視線を落ち着いて動かせる設計にしました。余白は、単にすっきり見せるためのものではありません。伝えたい情報に集中してもらい、サービスへの理解を一段ずつ深めてもらうための設計要素です。

• 研修前から実施後まで、支援の流れを縦にたどれる設計

デザインの中で特に重視したのが、研修の設計から実施、その後の定着支援までを紹介するセクションです。MODE CAMPの価値は、研修当日の指導だけではありません。企業の課題に合わせて内容を設計し、研修後の定着まで支援する点にあります。この流れを横並びで簡潔に見せるだけでは、一つひとつの支援内容を十分に理解してもらえない可能性があります。

そこで、各ステップを縦に配置し、上から順番にじっくり読み進められる構成にしました。閲覧者が支援の流れを追いながら、「どの段階で、どのようなサポートを受けられるのか」を確認できる設計です。サービスの工程を説明するのではなく、導入後の体験を具体的に想像できる流れとして見せました。

• 検討のタイミングを逃さない、複数の行動導線

今回のサイトでは、資料ダウンロードとお問い合わせの獲得が重要な目的となっています。

しかし、サイトを訪れた全員が、同じタイミングで問い合わせを決断するわけではありません。サービスの概要を確認した段階で資料を見たい方もいれば、研修内容や導入の流れを理解してから相談したい方もいます。こうした検討段階の違いに対応するため、トップページの複数箇所に資料ダウンロードとお問い合わせのボタンを配置しました。

ページを最後まで読まなければ行動できない設計ではなく、閲覧者の関心が高まったタイミングですぐ次のステップへ進める構成です。ボタンの数を増やすこと自体を目的とするのではなく、検討の深さに応じて行動を選べるようにしています。

• 研修テーマと導入実績を、自社で更新できるCMS設計

サイトはStudioで制作し、研修テーマと導入実績にはCMSを採用しました。CMSとは、決められた入力欄へ情報を登録することで、専門的な操作をしなくてもページを追加・更新できる仕組みです。研修サービスでは、新しい研修テーマや導入実績が増えるたびに、サイトの情報も更新していく必要があります。更新のたびに制作会社へ依頼する仕組みでは、情報公開までに時間がかかり、運用の負担も大きくなります。

そこで、MODE DIRECTIONS側で継続的に情報を追加しやすい構造を整えました。公開時点の完成度だけでなく、サービスの成長に合わせてサイトを育てられることも、今回の設計で重視したポイントです。

こだわりポイント

一つのイラストにも妥協せず、理想の世界観をともにつくる

MODE CAMPらしい世界観は、あらかじめ用意されたデザインの型を当てはめるだけでは表現できませんでした。「信頼感」「先進性」「革新性」といった言葉は、人によって思い描くビジュアルが異なります。見た目が整っていても、クライアントが目指すブランドの印象とずれていれば、サービスの価値を正しく伝えることはできません。MODE DIRECTIONSが理想とする雰囲気を丁寧にひも解くため、ヒアリングと確認を重ねながら、色使いやレイアウト、イラストの表現を細かくすり合わせていきました。

特にサイト内で使用するイラストは、一度にすべてを仕上げるのではなく、セクションごとに作成し、確認と調整を繰り返しています。細かなオーダーにも一つひとつ向き合い、サイト全体の印象を保ちながら、理想の表現へと近づけました。完成形を一方的に提示するのではなく、対話を重ねながら、MODE CAMPならではの世界観をともにつくり上げました。

成果と展望

公開後の反響とこれから

公開をゴールにせず、運用まで見据えたサイトづくり

MODE CAMPの魅力を継続して届けるためには、公開時の完成度だけでなく、その後も情報を更新し続けられることが重要です。そこで今回のプロジェクトでは、サイトを「納品して終わり」にせず、MODE DIRECTIONSが自社で育てていける状態までを一つのゴールとしました。研修テーマや導入実績を継続的に発信し、サービスの変化に合わせて情報を更新することで、サイトは見込み顧客との接点として成長していきます。

そのため、Studioで更新しやすい仕組みを整えるとともに、公開後の運用を支えるマニュアルも用意しました。クライアント様からは、最終的な仕上がりに加え、制作中の細かなオーダーへの対応や、納品後を見据えたサポートについても評価をいただきました。今後、このサービスサイトがMODE CAMPの特徴や支援範囲を分かりやすく伝え、研修を検討する企業の担当者にとって、資料ダウンロードやお問い合わせへ進むための判断材料となることを目指しています。