KAGAMIとは
KAGAMIは、ガイドライン株式会社さまが運営する教育DXサービスです。
担当者1人で100人を教育&フォローできる独自の設計に加え、「社会人基礎力」や「振り返り」を中心とした効果的・本質的な教育&フォローの体制を簡単に構築。忙しい教育担当者の負荷を減らし、手厚いフォローアップが可能となります。
neccoではそんなKAGAMIのサービスサイト制作をお手伝いしました。
この記事では、ガイドラインさんからのお問い合わせの内容から情報設計、デザイン、Studio実装まで、サービスサイト制作の詳細をお伝えします。
- 制作期間：2025年3月〜2025年7月末
- 制作内容：「KAGAMI」サービスサイト制作（情報設計、デザイン、Studio実装）
- サービスサイトURL：https://jp.is-kagami.com/
お問い合わせからヒアリングまで
2025年2月14日、ガイドライン代表の諫山さんからneccoのお問い合わせフォームにご連絡いただきました。メールで打ち合わせ日程の調整をおこない、同年3月3日に初回ヒアリングとなりました。
1. 制作の背景
KAGAMIは前身のサービスからリニューアルしたものであること、今回さらに発信を強化・拡大するためにウェブサイトの制作を進めたいというお話をいただきました。
サービスサイト制作の背景
- もともとKAGAMIは名称が異なるサービスだったが、試行錯誤の結果、ようやくPMF（Product Market Fit）が見え、そのタイミングでKAGAMIという名称に変更した
- KAGAMIのWHO、WHAT、HOWがかたまり、実績も少しずつ増えてきた
- ここからもっとギアを上げ、ウェブサイトからの発信を強めるべく、サービスサイトを制作したい
- 前身のサービスサイトやコーポレートサイトもStudioで制作したため、今回もStudioでの実装にしたい
2. neccoへお問い合わせいただいた経緯
Studioのパートナー企業を調べていて、neccoを知ったとのことです。通常、お問い合わせいただく企業さまは制作会社数社に問い合わせされていることが多いのですが、ガイドラインさんは、necco一本で連絡してくださったとのこと。「ぜひneccoさんに！」という諫山さんの言葉に、ありがたい気持ちでいっぱいになりました。
neccoに依頼した理由
- 制作実績を見て、独自性もありながら、デザインの質がとても高いと感じた
- neccoのBtoB企業の制作実績とクオリティも十分だと感じた
- neccoのコンセプト（企業の「根っこ」となるデザイン資産をつくる会社）に共感を持った
3. 伝えたいことの整理
打ち合わせに先駆け、諫山さんがサービスサイトの資料を分かりやすくまとめてくださいました。その資料を見ながらヒアリングを行い、ターゲットや目的のすり合わせを行いました。
サイトのターゲット・目的
- 誰に伝えたいか（WHO）：人の教育や成長に携わるすべての組織・人、人事担当者
- 何を伝えたいか（WHAT）：KAGAMIの提供でエンゲージメント強化を実現できること
- どのように（HOW）：サイトを通して、社会人基礎力、システム、サポート＆サクセス、営業の価値を伝える
4. 成果物
今回、ワイヤーフレームのたたき台は諫山さんが作成してくださることになりました。理由は、諫山さんご自身がこれまでも営業資料の作成に携わってこられたこと、また、ワイヤーフレームの作成経験があるためです。
neccoの担当範囲
- プロジェクトの進行調整
- ウェブサイトワイヤーフレーム調整（ベースの作成はガイドラインさん）
- ウェブサイトデザイン
- ウェブサイトのイラストや図版デザイン
- Studio実装
- サービス資料の表紙3種、章の表紙2種デザイン
情報設計
ヒアリングシート
初回お打ち合わせ後、改めて諫山さんにヒアリングシートにご記入いただき、目指す方向性やサービスサイト制作のゴールをより明確にしていきました。
- 会社の歴史、ストーリー
- KAGAMIの名称の由来
- KAGAMIの独自性
- KAGAMIの理想の顧客像
- 今後めざす姿 など
サイトマップ作成
諫山さんからサイトマップのたたき台をご共有いただき、neccoにて微調整を行いました。
制作を進める中で（KAGAMIの由来やサービスを開発した理由等を、独立したページでしっかりと伝えていきたい！）と考え、「KAGAMIに込めた思い」ページを新設することにしました。
ワイヤーフレーム作成・調整
ワイヤーフレーム作成は、諫山さん自らInDesignを使って進めてくださいました！各ページの構成はもちろん、見出しテキストや説明文も作成してくださり、その完成度の高さに驚きました。すごすぎます…！！
neccoでは普段、ウェブデザインツールの「Figma」を使ってワイヤー作成やデザインを進めているため、InDesignのデータをFigmaにインポート。より成果の出るサイトになるよう、neccoからの意見もお伝えしながら構成や文章の調整を進めていきました。
KAGAMIはガイドラインさまが独自に開発したサービスです。サイトを訪問するユーザーが実際のフローや内容をイメージしやすいよう、特に下記を重視しながら設計を進めました。
KAGAMIとは何かをわかりやすく伝えるために重視したこと
- 情報を省略せず、網羅的にすること
- システム画面の画像やイラストをできるだけ取り入れること
- 導入事例記事を目に留まる場所に配置し、事例の数・質をアピールすること
デザイン
トップページのメインビジュアルからデザインを進めていきました。
KAGAMIというサービス名は、「人材教育の本質であり、中心である“振り返り”を組織全体で徹底できるような仕組みをつくりたい」という思いが込められているそうです。
言葉だけでなく、デザインでも「振り返り」の大切さを伝えられるよう、2Dや3Dでガラスのような透き通るオブジェクトをつくり、鏡の反射やきらめきを表現しました。さらに、鏡に人物がうつり込んだイラストも作成し、さまざまなセクションで使用しています。
メインカラーは、KAGAMIのブランドカラーである青（天色）を使用。サービスの信頼感や力強さが伝わるよう青の濃度を上げ、背景色と組み合わせた際にクリアな表情が引き立つよう調整を行いました。
イラストやアイコンも、すべて一から作成しました。
「利用するメリット」のイラスト、「主要機能」や「お問い合わせ」のアイコンなど、どれもneccoのデザイナー・アシスタントデザイナーがひとつひとつ案出しを行い、協力して作成したものです。
デザインやイラスト、3DCGの作成は毎回とても時間がかかりますし、一筋縄ではいきません。しかし、諫山さんが的確に・明確にフィードバックをくださったおかげで、納得のいくデザインに仕上がったと感じています。
実装
実装はガイドラインさまからの当初のご希望で、ノーコードツールの「Studio」を使いました。
メインビジュアルは、実際のシステム画面をイメージした動きをアニメーションで再現。KAGAMIを使うことによる効果やメリットを表現しました。
全体のアニメーション・インタラクションについては、ユーザーに文章をしっかりと読んでもらえるよう、ダイナミックな演出をあえて避けて実装しています。キラッと光る鏡の反射のような演出や、ホバー時に出現するふんわりとしたグラデーションなど、さりげない表現を随所に取り入れました。
「導入事例」ページと「よくあるご質問」ページはCMS化を行い、ガイドラインさまが自由に追加・編集ができるような仕様としています。
導入事例のような記事原稿をお客さまにご用意いただくのは時間的にもリソース的にも難しいことが多いのですが、ガイドラインさんはサイトの公開日までに8記事も作成してくださいました！
共有いただいた原稿をneccoにて入れ込み、リリース当日から説得力のある充実した事例記事を発信することができました。
資料表紙制作
ガイドラインさんがお客さまへのご提案時に使用しているサービス資料のテンプレートデザインも、neccoにてお手伝いしました。制作したのは、表紙のデザイン2種と、扉（章の表紙）のデザイン3種です。
ウェブサイトのメインビジュアルや3DCG、イラストなどを活用し、KAGAMIブランドとして統一感が出るようなデザインを目指しました。
キャラクター制作
なんと！コーポレートサイト制作中に、ガイドラインさまからキャラクター制作をご依頼をいただきました！サイトリリース後にキャラクターの制作を進め、2025年9月末に納品となりました。
ここではチラッとだけお見せします。KAGAMIの公式キャラクター「かがみん」です！
かがみんについては、また別の機会に詳しくご紹介できればと思います！
お客さまの声
サイトリリースから約5ヶ月後、諫山さんより実績ページへ掲載するコメントをいただきました。こちらにも転載いたします。
企画、ディレクション、ライティング、構成、デザイン、実装、プロジェクト中のコミュニケーションなど、どれも質が高く、大変満足できるものでした。
皆さん共通されているのが、ものづくりへの情熱、プロ意識です。
弊社が「これでよし」と感じていても、その期待を毎回超えるご提案をいただき、日毎にサイトが洗練されていきました。全員がそのことを徹底されていて、neccoさんのカルチャーになっていることがわかりました。
また、neccoさんの「仕組み化されたプロジェクト運営」にも驚かされました。様々なツール・システムを運用するルールが洗練されており、必要に応じて私たち関係者にも適宜、的確に共有されるため、安心してプロジェクトに参加できました。こういった仕組みづくりにもneccoさんの強みがあり、プロジェクト運営からも学びをいただいています。結果として「売上に直結する」ウェブサイトに仕上げていただきました。サイトリリース後にインサイドセールスのアポイント率、エンタープライズ向けのCXOレターのアポイント数が大幅に増加し、見込みのお客さまが約6倍に増えた上、売上は約4倍を見込んでいます。
neccoさんのお仕事に、心より感謝しています。ガイドライン株式会社
代表取締役 諫山 聡史
見込み客が約6倍、売上が約4倍になりそうとのこと！こんなにうれしいことはありません！
KAGAMIが本格的に走り出したタイミングでサイトをリリースしたとはいえ、これほどまでに効果が上がるとは、わたしたちも予想していませんでした。
もちろんこの結果は、ガイドラインさんの営業努力が実を結んだものです。ですが、neccoとして少しでも売り上げに貢献することができ、「やってよかった」と心から思いました。
さいごに
KAGAMIのサービスサイトは、まさにneccoとガイドラインさんが一緒につくりあげたものだと実感しています。
デザインやイラスト、3DCG、実装のすべてにおいて、諫山さんが常に丁寧で明確なフィードバックをくださいました。ただ「良い」「悪い」と判断するのではなく、「この色はもっと濃くしたい」「このサイズはこのくらい大きくしたい」など、具体的に指摘してくださったおかげで、わたしたちも迷うことなく制作を進めることができました。
定例ミーティングやSlackのやりとりでは、いつも諫山さんが「素敵なデザインや実装をありがとうございます！」「サイトができたらバリバリ推進し、成果を出せるようにがんばります！」と、前向きな声をかけてくださいました。そのたびにneccoメンバーの熱量もさらに高まり、「絶対にいいサイトにしよう！」という気持ちがより一層大きくなりました。
諫山さん、ガイドラインのみなさま、本当にありがとうございました！これからも何かありましたら、お気軽にお声がけください！
KAGAMIの実績詳細は以下のページで紹介しています。ぜひご覧ください。
