離職防止と人材強化を同時に実現する教育DX「KAGAMI」サービスサイト

Creative Direction

KAGAMIの全てが詰まった、網羅的でわかりやすいサイトを目指して

ガイドライン株式会社さまが運営する教育DXサービス「KAGAMI（カガミ）」のウェブサイト制作をお手伝いしました。

KAGAMIは担当者1人で100人を教育&フォローできる独自の設計に加え、「社会人基礎力」や「振り返り」を中心とした効果的・本質的な教育&フォローの体制を簡単に構築。忙しい教育担当者の負荷を減らし、手厚いフォローアップができるサービスです。

人の成長には「振り返り」が不可欠。というサービスへの思いにある言葉が自身にも強く胸にひびきました。

社会環境がかわり離職の原因や若手社員の離職理由の変化があり、「キャリア成長が望めないこと」が離職の一番の理由になっていると知りました。

自社neccoでも新しいメンバーの教育や離職防止は非常に大きな問題、できる限り離職を回避して自社に貢献できる状態を、社員自身も会社にも作らないとと日々感じています。

KAGAMIというサービスを多くの企業に利用してもらうことで、キャリア安全性を高め、若手社員の離職を防止し企業の損失を減らしていくことができる。数百ページある資料を拝見して強く感じました。

離職防止のために教育を強化したり、1on1やメンター制度導入をするフォローアップの強化などを行っても、どうしても形骸化してしまったり、マンネリ化、やりっぱなしになってしまう。こうした対策後のマンネリ化とやりっぱなしの問題解決を目指すのが、KAGAMIです。

キャリア安全性を高めることの対策としては、多くの企業がすでにやっていることだと思います。KAGAMIはその先の課題も解決するためのサービスで、そのための多くの機能はもちろん、マンネリ化を解消するための社会人基礎力の向上を目指した資料も提供しています。

今回のプロジェクトでは、いままでガイドラインさまが積み上げてきた知見やサービスの体験や機能などを多くの人にさらに広げていくタイミングでの基盤となるサイトを目指して制作を進めました。

このサイトを見ればKAGAMIのことがわかる。KAGAMIがなぜ必要なのかがわかる。
料金やサポート体制、よくあるご質問への回答など、利用を検討する企業のご担当者さんにとって網羅的でわかりやすいサイトになるようにしています。

KAGAMIが多くの企業に届き、キャリア安全性が高まり安心して多くの人が働けることを願っています。

Direction / Contents Design

KAGAMIの魅力やメリットを深く掘り下げたサイト設計

「neccoさん以外にお声がけすることは考えていませんでした」
代表の諫山さんからうれしい言葉を頂戴し、サービスサイト制作プロジェクトがスタートしました。

今回、ワイヤーフレームはガイドラインさんがベースを作成してくださいました。いただいた構成や言葉ひとつひとつについてneccoからの意見もお伝えしながら、より成果の出るサイトにすべく調整を進めていきました。

特に留意したのは、「文章を省略せずしっかりと伝えること」「画像や図版を使って利用イメージを視覚的に伝えること」「事例の数と質をアピールすること」の3点です。初めて訪問する人にもKAGAMIのメリットや機能を深く知ってもらえるような設計を目指しました。

構成やデザインの提案後にガイドラインさんからいただくフィードバックは毎回的確・丁寧で、方向性に迷うことなくプロジェクトを進行することができました。サービスサイトをきっかけにKAGAMIがより飛躍していけるよう、これからも引き続き応援しています。

Web Design

サービスの主軸機能の
振り返りを鏡で表現

KAGAMIというサービスは、振り返りを中心とした継続学習の仕組みをつくることで離職防止と人材強化を進める教育DXサービスです。

サービスの主軸となる、「振り返り」機能を、鏡をモチーフにしてサイト全体で取り入れました。鏡で自分の姿をみるように、日々の取り組みを振り返ることで、成長に繋がるというサービスの思想を淡らしています。

鏡のグラフィックでは反射や写り込みも表現することで、日々の自分の行動を振り返り、学習を継続できるサービスの内容を表しています。

機能や特徴に関する説明が多くても、飽きずに読み進め荒れるよう使いやイラストをふんだんに入れたデザインにしています。

3DCG Design

鏡をモチーフにした透明感のある3DCG

サービスやコンテンツの内容を補足する、抽象的な3DCGを制作しました。

「振り返り」というテーマを重なりや透明感で表現しつつ、鏡のような反射になるようライティングや屈折率にこだわっています。

また、オブジェクトの形状でも「振り返り」を表現するためBlenderの「配列」や「Geometry Nodes」の機能を使用しています。

illustration

利用イメージが視覚的に
伝わるイラストを

教育に関するサービスの内容が具体で伝わるようイラストを心がけました。
利用イメージが視覚的に伝わるよう、配色は同系統でまとめがらも細部はつくりこんだイラストを意識しています。
サービスの機能や特徴など、文章と合わせてみることでより理解が深まることを意識しています。

Web Development

Studioの機能を活かし、きらめきと浮遊感のあるインタラクションを実現

本サイトは、ノーコードツールのStudioを使用して実装を行いました。

文章コンテンツへの没入感を大切にするため、アニメーションは意図的に控えめに設計。その中で、ユーザーの操作に応じて現れる繊細なインタラクションにはこだわりました。要素の出現時、ガラスの反射のように現れる動きや、ホバー時の要素がふわりと浮かび上がるような動きから、KAGAMI（鏡）のイメージや、ひらめきを体現しています。

デザインの一貫性と更新効率を両立させるため、Studioのコンポーネント機能を積極的に活用。共通パーツの管理を効率化することで、サイト全体の統一感を保ちながら、メンテナンス性の高い構造を実現しました。

また、デザインカンプに忠実なダイナミックなレイアウトを再現するため、必要最小限のカスタムコードを戦略的に組み込みました。Studioのノーコード機能を最大限に活かしつつ、細部の表現にはコードで対応することで、デザイン性と実装効率のバランスを追求しています。

Client Voice

「売上に直結する」ウェブサイトに仕上げていただきました

企画、ディレクション、ライティング、構成、デザイン、実装、プロジェクト中のコミュニケーションなど、どれも質が高く、大変満足できるものでした。

皆さん共通されているのが、ものづくりへの情熱、プロ意識です。弊社が「これでよし」と感じていても、その期待を毎回超えるご提案をいただき、日毎にサイトが洗練されていきました。全員がそのことを徹底されていて、neccoさんのカルチャーになっていることがわかりました。

また、neccoさんの「仕組み化されたプロジェクト運営」にも驚かされました。様々なツール・システムを運用するルールが洗練されており、必要に応じて私たち関係者にも適宜、的確に共有されるため、安心してプロジェクトに参加できました。こういった仕組みづくりにもneccoさんの強みがあり、プロジェクト運営からも学びをいただいています。

結果として「売上に直結する」ウェブサイトに仕上げていただきました。サイトリリース後にインサイドセールスのアポイント率、エンタープライズ向けのCXOレターのアポイント数が大幅に増加し、見込みのお客様が約6倍に増えた上、売上は約4倍を見込んでいます。
neccoさんのお仕事に、心より感謝しています。

ガイドライン株式会社
代表取締役　諫山 聡史