coiai Logo

DESIGN × ENGINEERING / COIAI

現場の課題から、新しい体験まで。

デザインと技術で実現する、開発パートナー。業務を支える基幹システム、社内の知識を活かすAI、人に届くWeb・アプリ・XR。現場を理解するところから、使い続けられる形にするところまで支援します。

01 / SERVICES

つくりたいものより先に、実現したいことを。

業務を効率化したい、社内の知識を活かしたい、新しいサービスを届けたい。目的に応じて必要な専門領域を組み合わせ、構想から実装、導入後の改善までつなぎます。

01 / 現場調査 / 個別開発 / データ移行

基幹・業務システム

業務をつなぎ、変化に備える。

Excelや旧システムに分散した情報、現場ならではの業務ルールを整理。既存資産を読み解き、優先領域から段階的に設計・開発・移行します。

サービスを詳しく見る →

02 / 機器選定 / 社内RAG / 運用・教育

オンプレミスAI

社内の知識を、現場の力に。

機密文書を扱う社内AIを、権限付きRAGとともに構築。機器やモデルの選定から、文書の管理、性能検証、利用者教育まで支援します。

サービスを詳しく見る →

03 / UI/UX / Web開発 / アプリ開発

Web・アプリ

使いやすさを、事業の接点に。

サービスの構想、情報設計、UI/UXからWeb・モバイル・デスクトップアプリの実装へ。利用者の目的と運用のしやすさを両立するプロダクトをつくります。

Web・アプリの制作実績を見る →

04 / AR / VR / 3Dコンテンツ

XR・AR・空間体験

見せるだけでなく、体験できる。

家具を実物大で配置するAR、施設で楽しむVR、3Dコンテンツの制作。体験する場所と端末、利用者の動きから設計し、実装までつなげます。

サービスを詳しく見る →

家具AR / 施設向けVR

02 / OUR APPROACH

現場を理解し、使われ続ける形へ。

観察から智慧を、智慧から価値を。coiaiが大切にしているのは、課題の背景を理解し、判断の理由が見えるものづくりです。

利用者の視点と、開発・運用の視点をつなぎます。

現場から、つくる理由を見つける

ヒアリングだけでなく、使う人の行動や既存の運用を確認します。「必要と言われた機能」の背景を知ることで、解決すべき課題と優先順位を具体化します。

デザインと開発を、一つの流れで

見た目の設計と、データ・処理・運用の設計をつなげます。エンジニアが現場と直接対話し、使いやすさと実現性の両面から判断します。

動くものを見て、確かめながら進む

プロトタイプや小さな実装単位で確認し、認識のずれを早い段階で調整します。変更時は影響と優先度を整理し、次に進む範囲を合意します。

使い続けるための準備まで

公開・納品だけでなく、データ移行、操作説明、運用資料、保守や改善の分担まで確認します。担当者が次の判断をできる状態を大切にします。

03 / IN PRACTICE

実際の導入で、調査から運用まで。

基幹システムの刷新と社内AIの導入。現在地を明確にしたうえで、何を調べ、どの範囲を支援しているかをご紹介します。

実案件で導入進行中

業務を読み解く基幹システム

長年の業務知識が既存システムと運用に分散した環境を調査し、重要なルールを失わないよう段階的に再構築しています。

実環境へ導入済み

社内で完結するオンプレミスAI

社内文書を外部サービスへ送らず、利用者の権限に応じて必要な情報だけを検索・回答できるAI環境を構築しました。

企業名・案件固有の数値は非公開です。基幹は導入中、AIは導入済みであり、未測定の改善効果は掲載していません。

04 / SELECTED WORK

画面から、アプリ、空間の体験まで。

UIの設計、社内アプリ、ブランドの表現、VRコンテンツ。受託制作と自社プロダクトを区別し、実際に担当した内容を掲載しています。

moneychat UIデザイン

受託制作 / UI/UXデザイン

moneychat UIデザイン

株式会社シュタインズ様の提供する 金融学習サービス moneychat のコンセプトデザイン、情報アーキテクチャの設計を行いました。

関連サイト ↗

株式会社ビッグフィールド様の社内アプリ

受託制作 / 社内アプリ

株式会社ビッグフィールド様の社内アプリ

社内の製品企画の際に製品の色見本を簡単に作成することができるアプリケーションを開発しました。

関連サイト ↗

macOS アプリケーションの開発

自社プロダクト / デスクトップアプリ

macOS アプリケーションの開発

mac OS 向けの App, Folder Icon Customizer をリリースしました。

製品ページ ↗

株式会社chance 企業ロゴデザイン

受託制作 / ブランディング

株式会社chance 企業ロゴデザイン

ヘルスケアを多角的に提供する株式会社chance様のコーポレートアイデンティファイの設計を行いました。

関連サイト ↗

森のガラス館 VR体験

受託制作 / VR / 3D

森のガラス館 VR体験

首里城の建築モデリング、マジムンのキャラクター製作およびモデリングを行いました。

05 / PROCESS

何をつくるかも、どう進めるかも、一緒に。

プロジェクトの規模や開始時点に合わせて、必要な工程を組み立てます。各段階で成果物を確認し、次の判断に使える情報を共有します。

01

相談・現状整理

課題、利用者、既存の仕組み、希望時期を確認。調査すべき点を整理します。

課題一覧・調査範囲

02

調査・設計・提案

業務・技術の条件を確認し、画面や構成、優先順位、費用を具体化します。

設計案・プロトタイプ・見積もり

03

開発・検証

重要な部分から実装。レビューとテストを重ね、業務に沿って確かめます。

動作する機能・検証結果

04

導入・運用改善

移行、操作説明、運用への引き継ぎを実施。保守や改善の範囲を合意します。

操作・運用資料・改善計画

06 / PEOPLE & COMPANY

つくる人と、直接話せる。

開発責任者 服部陽良

PEOPLE / DEVELOPMENT

服部 陽良 / 開発責任者

UI/UXデザインとWeb・アプリ・XR開発を横断。利用者に伝わる体験と、それを支えるシステムを一緒に考えます。

会社・メンバーの紹介 →

COIAI INC. / TOKYO

観察から智慧を、智慧から価値を。

東京都練馬区を拠点とする株式会社coiai。美しく、実直に動作するものをつくること、現場の業界や業務を理解することを大切にしています。相談から設計・実装・運用まで、一貫した考え方で支援します。

東京都オープンデータハッカソンの受賞記念写真

AWARD / 2024

東京都オープンデータハッカソン

副知事賞受賞

およそ1,000名が参加した2024年東京都オープンデータハッカソンに、友人と組んだチーム「Hacking the Debt」で参加しました。上位30組のファイナリストに選出され、副知事賞を受賞しました。

取引先

Align株式会社株式会社chance.株式会社シュタインズCANTOP東京合同会社

07 / INSIGHTS

判断に役立つ知見を、日々の開発から。

開発・AIのブログ

技術の検証や開発の過程を、取り組みの背景とともに紹介します。

一覧を見る →

「最新版を使えばいい」は本当に正しい?Dependabotを使って“pin + 自動更新”にする理由

依存ライブラリやGitHub Actions、Terraform Providerのバージョン管理をしていると、よく出てくるのが次の考え方です。 新しいバージョンが出たら、常に最新版へ上げればいいのでは? 一見すると合理的です。 実際、古いバージョンを長期間使い続けるより、継続的にアップデートした方が、脆弱性や非互換の問題を後回しにしにくくなります。 ただし、実際の開発運用では、 「バージョンを固定しない」ことと「常に新しい状態を保つ」ことは別です。 むしろ、 バージョンは固定し、Dependabotで自動的に更新PRを作る という運用の方が、安全性と更新頻度を両立しやすくなります。 今回は、実際の開発チームで出た「pinするべきか、しないべきか」という議論をベースに、Dependabotをどう使うべきか整理します。 きっかけは「そもそもpinしなくていいのでは?」という疑問 あるプロジェクトで、GitHub ActionsやTerraform Providerのバージョンを更新する話が出ました。 その中で、 理想的には何もpinしない方がいい。新しいバージョンが出たら常にアップグレードすればいいのでは? という意見が出ました。 この考え方自体は間違っていません。 目標としては、 依存関係を古いまま放置しない というのが正しいです。 ただし、その目標を実現する方法として「pinしない」を選ぶと、別の問題が出てきます。 そこで出てきたのが、 「pinしない」のではなく、「pin + automated bumps」にしよう という考え方です。 つまり、 バージョンは固定する。しかし、更新作業は自動化する。 これがDependabotを使う理由です。 GitHub Actionsでは、floating tagがリスクになる たとえばGitHub Actionsでは、次のような指定をすることがあります。 これは分かりやすく、一般的な書き方です。 ただし、v4 のようなタグは、厳密には「特定のコードそのもの」を表しているわけではありません。 タグが別のコミットを指すように変更されれば、同じ @v4 という記述でも、実際に実行されるコードが変わる可能性があります。 CI/CDで実行されるActionは、ビルド環境やデプロイ権限にアクセスすることがあります。 そのため、これはサプライチェーンセキュリティの観点でも重要です。 より厳密に管理するなら、特定のコミットSHAに固定します。 こうすると、同じ設定から実行されるコードが勝手に変わることはありません。 ただし問題があります。 固定しただけでは、そのバージョンは永遠に古くなっていきます。 そこでDependabotを使います。 新しいバージョンが出たら、 という流れにします。 つまり、 固定することで再現性を確保し、Dependabotで鮮度を維持する […]

記事を読む →

GMKtec EVO-X2にUbuntuを入れたら有線LANが認識されなかった話

オンプレミスAIサーバー(ローカルLLM + 社内文書RAG)の構築を始めました。機材はGMKtec EVO-X2、AMD Ryzen AI Max+ 395搭載のミニPCです。128GBのユニファイドメモリをGPUに大きく割り当てられるので、ローカルLLM用途では今いちばん面白いマシンだと思っています。 この記事は初日の作業ログです。結論から言うと「インストールUSBが起動しない」「有線LANが認識されない」という2つの罠を踏んだので、同じ構成を組む方のために記録しておきます。 OSはLinuxかWindowsか 最初に迷うのがここですが、サーバー用途ならUbuntu Server一択でした。 日常操作はすべてブラウザ(Open WebUI)経由なので、サーバーOSにGUIは不要です。管理画面が欲しければCockpitを入れれば、Webブラウザからメトリクス確認・サービス再起動・ターミナルまで使えます。「CUIのサーバー + Web管理画面」が現代の標準形だと思います。 BIOS設定 ― EVO-X2で一番大事なのはVRAM割り当て 電源ON直後にDel連打でBIOS(AMI)へ入ります。設定したのは3つです。 罠その1: インストールUSBが起動しない Ubuntu Server 24.04のISOをMacから dd でUSBメモリに書き込み、いざブート……しません。Boot Overrideに出てくる「UEFI OS」を選んでもWindowsが立ち上がってしまいます。 切り分けの過程が学びでした。 原因はおそらく、dd の書き込みが完全に終わる前に抜いてしまったことです。dd は進捗表示が止まってからもバッファの書き出しが続くので、完了統計が表示されるまで待たなければいけません。パーティションテーブルはディスク先頭に書かれるため、途中で切れていても一見正常に見えるのが厄介なところです。 教訓: インストールUSB作成はbalenaEtcherを使いましょう。 書き込み後に自動でベリファイ(照合)まで走るので、「書けたつもり」が原理的に起きません。Etcherで書き直したら一発で起動しました。 インストール時の選択 罠その2: 有線LANが認識されない インストール完了、ログイン成功。しかし ip a を見ると有線LANにIPがありません。それどころか、よく見ると有線のインターフェース自体が存在しません。 カーネルログを見て原因が確定しました。 EVO-X2の2.5GbEチップ(Realtek RTL8125D)が新しすぎて、Ubuntu 24.04の標準カーネル6.8のドライバが知らないチップだったのです。インストール中にネットに繋がらなかったのもこれが原因でした。ケーブルを何度挿し直しても無駄だったわけです。 教訓: 「繋がらない」時はケーブルを疑う前に dmesg を読みましょう。 カーネルログには大抵、答えがそのまま書いてあります。 解決: HWEカーネル 新しいチップに対応するには、新しいカーネルを入れれば解決します。Ubuntuには**HWE(Hardware […]

記事を読む →

FSD v2.1 Feature-Sliced Design を導入する

この記事は何? 公式のドキュメントやチュートリアル、exsample を読んで理解するのが一番いいですが、備忘録として残しておきます。特に後述の Skills, Steiger については開発する際にあった方が便利なので、それについても記事にします。 FSDとは? FSD (Feature-Sliced Design) はフロントエンドのアーキテクチャの一つです。 FSDとは責務で分けていくアーキテクチャと違い、ページやエンティティで分けていくアーキテクチャというとわかりやすいと思います。 コードの分離の仕方について話す前に、FSDで前提となる この3つについて理解する必要があります。 レイヤー より細かく分けていく方法がありますが、この記事では導入だけ触れたいので、3つのレイヤーのみ説明します。 です。この流れは上(app)に向かえば向かうほどアプリケーション固有、下(shared)に向かうほど汎用的になります。 原則として上位レイヤーは下位レイヤーを利用できるが、下位レイヤーから上位レイヤーへ依存できません。 始め方としては小さく初めて、必要になったらレイヤーを増やしてくようです。 スライス ブログアプリであればレイヤーの pages には といったページに分けられるため、このような構成になります。このblog-list, blog-detail, user がスライスです。これらはページやエンティティによって分けられます。 セグメント これらのmodel, ui といった部分がエンティティです。これらは責務にあたります。sharedに関しては直下にスライスではなくセグメントが入ります。 FSD 2.1 で重要なのは Pages First です。とにかくPagesから作って、細分化の必要ができたら、下位レイヤーに抽出します。 Steiger Steiger とはアーキテクチャリンターです。以下でインストールできます。 AIコーディングのために Claude Skills https://github.com/feature-sliced/skills?utm_source=chatgpt.com このリポジトリが公式に公開されています。 これで Skills を追加できるので、claude にFSDの設計知識を共有できます。

記事を読む →

業務システムのコラム

基幹刷新や業務改善を検討するときの考え方をまとめています。

一覧を見る →

記事を表示できませんでした。一覧から再度お試しください。

ポッドキャスト

ものづくりや事業に関する話を、音声でもお届けします。

一覧を見る →

見積もりを数理モデルで自動化した話 & WordPressを卒業してLaravelで自社CMSを作った話

株式会社coiaiの代表・服部陽良がお届けするポッドキャスト第25回。今回はテック寄りの2本立てです。前半は、個人事業主時代から使い続けてきたWordPressをついに卒業し、Laravel+Filamentで自社CMSを作った話。REST API構成で溜まっていたビルド過負荷やSEOの問題、そして自社CMSにしたことでClaudeによる翻訳で140記事以上が一気に英語化された多言語対応の話。後半は、見積もりのために数理モデルを構築した話。三点見積もり・beta-PERT・三角分布・モンテカルロシミュレーションを組み合わせ、自社の価格設定だけでなく「お客さんのSaaSが何社で黒字になるか」まで計算する仕組みの中身です。

記事を読む →

東京・岡山・香川の三拠点生活、VC面談の結果、そして東京ゲームショーに出展します

株式会社coiaiの代表・服部陽良がお届けするポッドキャスト第24回。今回は1ヶ月ぶりの近況報告回です。東京・岡山・香川を行き来する三拠点生活と各地のクライアントワーク、大手ベンチャーキャピタルとの面談で見えた自社の現在地、銀行借入にチャレンジする理由、社員が増えた話、なぜか英語を話す場面が増えて困っている話。そして来週の東京ゲームショーに、開発に携わったARアプリ「ポケットリアル」のブースで参加します。最後にオープンソースのロボットアームSO-101を動かし始めた話も。

記事を読む →

相談前によくあるご質問

要件が決まっていなくても相談できますか?

ご相談いただけます。現状の課題と実現したいことを伺い、必要な調査や優先順位から整理します。費用が発生する調査・開発は、内容と金額をご案内したうえで進めます。

デザインだけ、開発だけの相談もできますか?

可能です。現在の体制、引き継げる資料、依頼したい工程を確認し、担当範囲と成果物を明確にしてご提案します。

予算やスケジュールはどう決まりますか?

対象機能だけでなく、既存資料、外部連携、移行データ、検証や導入後支援の範囲で変わります。最初に優先順位を確認し、段階的に進める案も含めてご相談します。

LET’S TALK

まだ要件が決まっていなくても。

「今の業務をどう改善できるか」「このアイデアは実現できるか」。今困っていることと、実現したいことをお聞かせください。対象範囲や進め方を一緒に整理します。

受付 → 内容の確認・ご連絡 → 現状のヒアリング → 調査・提案の進め方をご案内。調査や開発の費用は、対象範囲を確認してご提示します。