はじめに弊社で開発している DX 推進プラットフォーム「キカガク for Business」ではサービスに関する公式ヘルプを Notion で公開しています。今回はその Notion のヘルプドキュメントを知識ベースとして活用し、自然言語で質問できる FAQ チャットボットを構築しました。本記事では、チャットボットそのものではなく、RAG（Retrieval-Augmented Generation）基盤をどのような技術構成で、何を意識して設計したかに焦点を当ててお伝えします。 全体アーキテクチャまず、システム全体の構成を俯瞰します。大きく分けて データパイプライン（N...

はじめに株式会社キカガクでエンジニアをしている立野です。キカガクでは2025年9月より、開発生産性可視化ツールである Findy Team+ を導入しました。導入から約3ヶ月が経過し、チーム内に改善のサイクルが定着、明確な数値改善が見られるようになりました。その導入の経緯や具体的な取り組み、そして得られた効果について書こうと思います。 導入の経緯導入前のエンジニア組織には、組織としてのアウトプットやアウトカムが定量的に可視化できていないという課題感がありました。「なんとなく開発が詰まっている気がする」「もっと効率化できるはずだ」という感覚的な議論はありましたが、具体的...

作ったもの今回紹介するのは、社内アイデアソンを行った際にそのときのチームで作成した実験的な学習の仕組みです。教材のテキストを元に、AI が対話形式で理解度を確認してくれる仕組みとして、「白紙勉強法」と呼ばれる学習手法を参考に実装してみました。!白紙勉強法とは覚えたい内容を何も見ずに思い出して書き出すトレーニング手法。アクティブ・リコール（能動的想起）とも呼ばれ、記憶の定着に効果的だと言われている。 動作の流れコマンドを実行すると、「学んだ内容を説明してください」と言われるので、頑張って思い出して説明する：覚えている内容を説明すると、AI がその内容を評価し、チェ...

サンプルAI コーディングエージェントである Claude Code や Cursor のエージェントモードを使用して、スライド動画を生成するシステムを構築しました。この記事で紹介するために、サンプルとして Zenn について解説する動画を生成しました。最初に最低限の情報を与えて、以降は AI (Cursor で Claude Opus 4.5 を使用) にすべて任せて作成しました。!あくまでスライドおよび動画生成のサンプルであり、内容の正誤については一切保証しません 🙏このくらい正確（逆に言えばこのくらい間違う）ということも含めて参考にしてください。https://...

はじめにClaude Code や Codex CLI、Cursor のエージェントモードなどのコーディングエージェントはコーディングタスクに特化したものですが、それ以外の用途にも使うのも便利です。テキストを処理する、という意味ではコーディングもその他の作業もあまり変わらないですから。以下のような性質のタスクが使いどころです。テキストファイルの読み書き作業を行う（決まった処理ではなく）LLM を使った判断が必要対話的な操作や、自然言語による曖昧な指示がしたいSpec Kit のような仕様設計や、コードレビューのような開発に関連したタスクももちろん便利ですが、もっとコ...

!この記事は、2024 年に社内勉強会で発表した資料をベースに、公開用として手直しを加えたものです。修正はしているものの、社内メンバーの知識を前提としていて補足が不十分であったり、記事公開時点では古くなっている情報が含まれることがあります。なお、弊社では React + Next.js + Chakra UI を使用しているプロジェクトが多いため、それらを前提とした記述になっています。以前「正しい HTML を書くことの大切さ」をお話ししました。https://zenn.dev/kikagaku/articles/html-semantic-markup今日はその重要性を補...

!この記事は、2024 年に社内勉強会で発表した資料をベースに、公開用として手直しを加えたものです。修正はしているものの、社内メンバーの知識を前提としていて補足が不十分であったり、記事公開時点では古くなっている情報が含まれることがあります。なお、弊社では React + Next.js + Chakra UI を使用しているプロジェクトが多いため、それらを前提とした記述になっています。 今日の目標STOP！「なんとなくモーダル」✋ STOP！「なんとなくトースト」✋Web アプリケーションの UI を検討する際に、他の手段を検討せずにモーダルやトーストを使ってしまっている...

!この記事は、2023年に社内勉強会で発表した資料をベースに、公開用として手直しを加えたものです。修正はしているものの、社内メンバーの知識を前提としていて補足が不十分であったり、記事公開時点では古くなっている情報が含まれることがあります。なお、弊社では React + Next.js + Chakra UI を使用しているプロジェクトが多いため、それらを前提とした記述になっていますが、HTML要素の使い分けの考え方は他のフレームワークでも共通して役立ちます。!この勉強会の後半では演習を行いました。もし参考にしたい方がいましたら、ぜひ真似してあなたの職場でも開催してみてくださ...

どう変わったかJest で 7 分 48 秒かかっていたテストが…Vitest で 4 分 12 秒になりました！ 👏👏👏👏（厳密には 46%削減ですが、パッケージインストールなどのオーバーヘッドも含まれるので半減と言っていいでしょう）そして、ローカルのウォッチモードでも実行時間が大幅減少。Jest で 8.214 秒かかっていたテストが、Vitest で 4.39 秒になりました！ 🥳🥳🥳🥳（テスト数が違っているので単純比較になりませんが、テスト数多いのに早いんだからすごい）というわけで、弊社のとあるリポジトリにて、Jest から Vitest に移行するこ...

複数枚のイラストを、同じテイストで生成させたい資料やスライドなどに複数のイラストを使う場合、同じテイストのイラストを入れたいものです（全部のイラストをいらすとやで揃えるように）。しかし、生成AIで画像生成をすると、同じモチーフでも線の太さ、配色といったイラストのテイストが毎回バラつくことがあります。そもそもテキストだけでイラストのテイストを伝えるのは難しいです。「フラット」「パステル」「手描き風」などの指示でも曖昧で、どの程度フラットかどの色域でパステルかどんな線の揺らぎが“手描き”なのかといったニュアンスを十分に伝えきれません。結果として、テイストが安定しません。...

こんにちは。株式会社キカガクの @tetsuro_b です。弊社ではパッケージの脆弱性管理ツールとして Renovate を採用しています。が、更新の内容によっては build や lint で CI が落ちてしまうケースもしばしばです。その場合、これまでは以下のような対応をとっており地味に大変な日常業務のひとつでした。PR の CI でエラー内容確認PR からどのパッケージがどんな内容で変更されたのか読み解き対応方針検討対応実施本記事では この部分を Devin に丸投げして対応してもらう ための GitHub Actions を作った（Devin が）ので紹介し...

こんにちは。株式会社キカガクの @tetsuro_b です。PR のレビューに対する修正が自動化された未来...最高じゃないですか？レビュー修正は Devin にやってもらってコーヒーでも飲みましょう ☕️今回はそんな GitHub Actions を作ってみたので紹介します。 レビュー修正のここがつらい...本題に入る前に個人的にレビュー修正のここがつらい...をいくつかあげておきます。レビュー修正時次の実装をしていたりするのでブランチを切り替えたくないSuggestion で提案された内容だけでは不十分なときも多い修正内容によってはレビュワーがやったほうが早いが...

こんにちは。株式会社キカガクの @tetsuro_b です。弊社はエンジニアチーム以外にも、デザイナーチームも AI 活用に力を入れています。https://zenn.dev/kikagaku/articles/79368e7981a00f例えば上記記事から抜粋すると...デザインの微修正は Devin で依頼してエンジニアにレビューを出すローカル (Cursor) でデザインを実装し、Figma に MCP(html.to.design) で反映ただ、デザイナーの AI 活用を推進するうえで「ローカルの環境構築及びアプリの立ち上げ」が、かなりハードル高いです。実行す...

こんにちは。株式会社キカガクの @tetsuro_b です。AI 関連のコーディングツールが増えに増えてきたので、情報のキャッチアップがてら スピード に焦点をあてて比較してみました。 対象ツールツールは全て 2025/09/05 時点での最新バージョンを利用しています。Claude Code（Claude Opus 4）Codex CLI（GPT5）Cursor（GUI）（GPT5, Claude 4 sonnet, Grok-code-fast-1）※ Cursor CLI で本当は比較したかったですが自分の環境ではうまく動かず（参考） GUI の Cur...

はじめにプロダクト UI / UX 開発における品質向上において、様々な組織が検討を重ねていると思います。デザインレビューをどのように実施するのかWCAG 2.2 に準拠したアクセシビリティ改善上記の課題を解決すべく、アクセシビリティ改善をふまえたデザインレビュー自動化プロセスを検証してみました。 直面した課題 課題① : コンパクトになっていったデザインレビューの文化これまでのデザインレビューは、まとまった機能を開発する際に、PdM とエンジニア、そしてデザイナーが同期的に Figma を確認をするプロセスをとっていました。また、開発プロセスに AI ツール...

1. はじめにこんにちは。株式会社キカガクでデータエンジニアをしている @1616_imuimu です。キカガクではデータドリブンな意思決定を推し進めるため、「データの民主化」をスローガンに BigQuery を中心としたデータ基盤の構築を 2025 年 1 月より進めています。データの民主化を実現するには、非エンジニアの方たちにSQLやデータ分析の知識を身につけて実践してもらう必要がありますが、お互いに時間も労力もかかる大変な作業です。この課題を解決するため、更には「データの民主化」をより高いレベルで実現するために「ADK + MCP Toolbox」を使った AI エージ...

はじめにこれまで、デザイナーが UI 改善を提案する際には Figma でデザインを作成し、エンジニアに実装を依頼するのが一般的でした。しかし、Cursor と Devin の導入によって、デザイナーの役割や視点が大きく変わりつつあります。本記事では、Figma とコードを Cursor によって繋げる取り組みと、そして AI エージェント Devin を活用したことで、どのように UI 改善のプロセスが変化したのかを紹介します。キカガクの開発組織に Cursor と Devin を導入した際のブログもぜひご覧ください！https://zenn.dev/kikagaku/ar...

コンポーネントの挙動をテストしたいときに使える手段が増えてきており、新たに導入する際にはどの方法を選べばいいか迷います。ここでは、コンポーネントテストの方法を 4 つ紹介し、それぞれのメリット・デメリットを比較します。 この記事で比較するコンポーネントテストの方法jsdom (or happy-dom) + Vitest (or Jest) + Testing LibraryStorybook play functionPlaywright Component TestVitest Browser Mode除外したもの：Cypress component testi...

サービスアカウントキーの危険性弊社では Google Cloud のサービスを利用して開発を行っています。各サービスへの操作権限が必要な際、これまで社内ではサービスアカウントキーを発行し、それを個人のローカル環境や GitHub のリポジトリシークレットに保存して使用していました。しかしサービスアカウントキーを用いた認証方法は、セキュリティ上の問題があります。期限を定めないキーを発行するということは、一度流用すると一生使い続けられてしまいます。しかも使用ログから利用者を特定することもできません。かといって一定期間で無効にしてキーを作り直すのは面倒ですし、必要なときに期限が切...

こんにちは。株式会社キカガクの @tetsuro_b です。弊社では 2025/5 から Devin を導入し運用をしています。https://zenn.dev/kikagaku/articles/be2eef760ddf02そんな弊社ですが...。Devin 使い放題です。（ドン!!）!【注意】Devin 自体に『Devin 使い放題』のプランがあるわけではありません。弊社では Team プラン（$500）を契約しており $500 のクレジットを使い果たしたら Auto Reload で一定のクレジットを追加するという運用をしています。とはいえ、上手く組織で運用して...