<?xml version="1.0" encoding="utf-8"?>
<rss version="2.0" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:content="http://purl.org/rss/1.0/modules/content/">
    <channel>
        <title>KINTO Tech Blog | キントテックブログ</title>
        <link>https://blog.kinto-technologies.com/</link>
        <description>年齢・性別・国籍問わず多様なメンバーが、トヨタグループのモビリティサービスの世界展開を実現する技術集団として様々な情報を発信します !</description>
        <lastBuildDate>Tue, 08 Sep 2026 02:12:21 GMT</lastBuildDate>
        <docs>https://validator.w3.org/feed/docs/rss2.html</docs>
        <generator>https://github.com/jpmonette/feed</generator>
        <image>
            <title>KINTO Tech Blog | キントテックブログ</title>
            <url>https://blog.kinto-technologies.com/assets/common/thumbnail_default.png</url>
            <link>https://blog.kinto-technologies.com/</link>
        </image>
        <copyright>©KINTO Technologies Corporation. All rights reserved.</copyright>
        <item>
            <title><![CDATA[CMP で動画再生とカメラを実装する——3 プラットフォーム 3 通りの Interop と若いエコシステムの乗りこなし方]]></title>
            <link>https://blog.kinto-technologies.com/posts/2026-09-08-cmp-videoplayer-camera/</link>
            <guid>https://blog.kinto-technologies.com/posts/2026-09-08-cmp-videoplayer-camera/</guid>
            <pubDate>Tue, 08 Sep 2026 10:00:00 GMT</pubDate>
            <description><![CDATA[Compose Multiplatform の動画再生は Android が AndroidView + Media3、iOS が UIKitView + AVPlayerLayer、Web が canvas 背面の video 要素と、3 プラットフォームで Interop 機構がまったく異なる。若いエコシステムのライブラリ不足は expect/actual で各プラットフォームのネイティブ API に直接下りて補えるため、アーキテクチャ的に対処できる。]]></description>
            <content:encoded><![CDATA[<h2>この記事でわかること</h2>
<ul>
<li>Compose Multiplatform（CMP）の動画再生は、Android では <code>AndroidView</code> + Media3 <code>PlayerView</code>、iOS では <code>UIKitView</code> + <code>AVPlayerLayer</code>、Web では canvas の裏に置いた <code>&lt;video&gt;</code> 要素と、プラットフォームごとにまったく異なる Interop 機構で動いている</li>
<li>「どのフレームワークがネイティブか」は見せかけの問いで、デコードと撮像の層は Flutter も React Native も CMP もすべて OS の同じネイティブ API を使っている。本当の分岐点は「ネイティブが描いた 1 フレームを、フレームワーク自身の UI とどう合成するか」にある</li>
<li>Android の <code>SurfaceView</code> / <code>TextureView</code> を画面ごとに選べる自由は CMP（と React Native）にはあり、Flutter の <code>video_player</code> には長らくなかった。一方、実際のプロジェクトでは角丸プレビューのために、あえて Flutter と同じテクスチャコピー経路（<code>TextureView</code>）を選んだ</li>
<li>CameraK 0.4 やコミュニティ製の動画プレイヤーといった「若いエコシステム」の現実と、その不足を <code>expect/actual</code> で各プラットフォームのネイティブ API に直接下りて補うという対処法を、実プロジェクトのコードで示す</li>
</ul>
<h2>はじめに</h2>
<p>こんにちは、モバイルアプリ開発部の Yao です。</p>
<p>私は以前から Kotlin Multiplatform（KMP）/ Compose Multiplatform を継続的に研究していて、このテーマで何本か記事を書いてきました。興味のある方は<a href="https://blog.kinto-technologies.com/authors/a7e4b35f-7884-5df4-8110-d75ae43bff21/">過去の記事一覧</a>もご覧ください。本記事では、<strong>CMP の弱点として真っ先に名前が挙がる「動画再生」と「カメラ」を、Android・iOS・Web の 3 プラットフォームでどう実装したか</strong>を書きます。</p>
<p>題材は、社内で開発した<strong>動画アバター生成アプリ</strong>です。自分の顔を動画で録画してデジタル分身（アバター）を作り、テキストを入力するとその分身が自分の声で話す動画を生成する、というアプリです。録画・録音・再生というメディア機能がプロダクトの根幹にあり、「CMP でメディアをやるとどうなるか」を検証するには格好の題材でした。</p>
<p><img src="/assets/blog/authors/yao.xie/2026-09-20/cmp-videoplayer-camera-video-detail-playing.png" alt="動画詳細画面。生成された動画を再生し、承認・却下を選ぶ"></p>
<p><em>生成された動画を確認・承認する <code>VideoDetailScreen</code>（本記事のアプリ画面はいずれもデザインモックで、人物はすべてダミーです）</em></p>
<p>CMP のエコシステムはまだ若いです。この記事では、その若さがどこでどう痛むのか、そしてその痛みが <code>expect/actual</code> というアーキテクチャでどこまで緩和できるのかを、実際の行数・バージョン番号・コードで示します。形容詞ではなく数字で語ることを目標にします。</p>
<h2>このアプリのアーキテクチャはどうなっているか</h2>
<p>本アプリは 1 つの Kotlin コードベースから Android / iOS / Web（wasmJs）の 3 プラットフォームに配信しています。モジュール構成は次のとおりです。</p>
<pre><code>androidApp ┐
iosApp     ├─→ sharedUI ─→ sharedLogic ─→ apiClient
webApp     ┘
</code></pre>
<table>
<thead>
<tr>
<th>モジュール</th>
<th>Kotlin ファイル数</th>
<th>役割</th>
</tr>
</thead>
<tbody><tr>
<td><code>sharedLogic</code></td>
<td>113</td>
<td><strong>Compose 依存ゼロ</strong>の純 Kotlin。Ktor / Serialization / Coroutines / Koin-core</td>
</tr>
<tr>
<td><code>sharedUI</code></td>
<td>154</td>
<td>モバイル向け共有 CMP 画面 + 3 プラットフォームの actual 実装</td>
</tr>
<tr>
<td><code>webApp</code></td>
<td>35</td>
<td>モバイルのレイアウトは再利用せず、デスクトップ向けに再構築</td>
</tr>
<tr>
<td><code>apiClient</code></td>
<td>191</td>
<td>OpenAPI Generator 7.22.0 で生成しリポジトリにコミットした自社バックエンドのクライアント</td>
</tr>
<tr>
<td><code>androidApp</code> / <code>iosApp</code></td>
<td>6 / 4（Swift）</td>
<td>エントリポイントのみ</td>
</tr>
</tbody></table>
<p>設計は Clean Architecture + MVI です。UseCase が 32 個（1 クラス 1 操作）、Repository が 7 個、ViewModel が 12 個あり、各 ViewModel は <code>MutableStateFlow&lt;XxxUiState&gt;</code> と不変 data class による単一の状態ソース（Single Source of Truth）を持ちます。プラットフォーム能力は <strong>20 個の <code>expect</code> 宣言</strong>に集約しています。</p>
<p>技術スタックはかなり新しめです。Kotlin 2.3.10 / CMP 1.10.1 / AGP 9.0.1 / Ktor 3.4.0 / Koin 4.1.1 / Navigation 3 <code>1.0.0-alpha06</code> / Media3 1.9.0 / Coil3 3.3.0 / CameraK 0.4 / FileKit 0.13.0、そして wasmJs ターゲット。エコシステムの最前線に立つと何が起きるかは、後半で具体的に書きます。</p>
<p>プロジェクトの特徴を 1 つだけ挙げると、<strong>ロジックは 100% 共有、UI は形態ごとに分岐</strong>という方針です。Web はモバイルのレイアウトを再利用せず 33 個の独立した <code>Web*Screen</code> をデスクトップ向けに構築していますが、ViewModel の状態機械はモバイルとまったく同じものを使います。この「ロジックとプレゼンテーションの分離」が、後述するメディア実装の 3 プラットフォーム分岐を支える土台になっています。</p>
<h2>なぜ Compose Multiplatform を選んだのか</h2>
<p>Flutter や React Native ではなく CMP を選んだ理由は 3 つあります。</p>
<p><strong>1 つ目は、ロジックの複雑さが UI ではなく状態機械にあったこと。</strong> 本アプリのビジネスロジックには、本人確認（consent）のブラウザ連携の状態遷移、アバター生成状態の 3 値導出（<code>status × generationRetryable × retryCount</code> → <code>GENERATING</code> / <code>RETRYABLE</code> / <code>TERMINAL</code>）、動画生成とアバター訓練それぞれの 60 秒間隔ポーリングといった、型で守りたい遷移が多くあります。この種のロジックは、sealed interface と data class を持つ Kotlin で書くのが Dart や TypeScript より安全だと判断しました。</p>
<p><strong>2 つ目は、チームのスキルセット。</strong> メンバーは Kotlin / Android 出身で、UseCase 32 個 + StateFlow の MVI という構成は学習コストゼロで書き始められました。</p>
<p><strong>3 つ目が最も重要で、「漸進的にネイティブへ戻れる」こと。</strong> <code>sharedLogic</code> は Compose 依存ゼロの純 Kotlin なので、<strong>Swift から直接呼べます</strong>。実際 iOS はすでに SwiftUI のネイティブシェル + CMP コンテンツ画面というハイブリッド構成です。将来 UI をすべて SwiftUI / Jetpack Compose に置き換えることになっても、ロジック側は 1 行も変わりません。Flutter や React Native では、UI フレームワークを捨てる = ほぼ全部書き直しですが、KMP ではロジック資産がそのまま残ります。この退路の存在が、以前の記事<a href="https://blog.kinto-technologies.com/posts/2025-05-15-Kotlin_Multiplatform_Hybrid_Mode-ja">「Kotlin Multiplatform ハイブリッドモード」</a>で書いたハイブリッドモードの実利です。</p>
<h2>「動画再生」と「カメラ」——若いエコシステムで最初にぶつかる壁</h2>
<p>CMP でアプリを作ると宣言したとき、最初に聞かれるのが「動画とカメラはどうするの？」です。もっともな質問です。Flutter には flutter.dev 公式チームが保守する <code>video_player</code> と <code>camera</code> があり、React Native には無数のプロダクションで数年動いている <code>react-native-video</code> と <code>vision-camera</code> があります。CMP にはそれに相当する「公式の定番」がまだありません。</p>
<h3>エコシステムの現実を数字で見る</h3>
<p>本アプリの動画再生は <code>io.github.kdroidfilter.composemediaplayer</code>（ComposeMediaPlayer）というコミュニティ製ライブラリをベースにしています。Flutter の <code>video_player</code> のような公式チーム保守のプラグインではないので、挙動の細部を確かめたいときはライブラリの公開ソースを読み解くことになります。この記事の Interop 解説も、そのソースリーディングの成果です。</p>
<p>カメラは <a href="https://github.com/Kashif-E/CameraK">CameraK</a> を使いました。バージョンは <strong>0.4</strong> です。Flutter の <code>camera</code> が公式チームの保守下にあり、<code>vision-camera</code> が成熟していることと比べると、この数字がエコシステムの若さを端的に表しています。</p>
<p>それでもこの構成で 3 プラットフォームのアプリは出荷できました。なぜ成立したのかを説明するために、まず前提となる誤解を 1 つ解きます。</p>
<h2>そもそも「ネイティブかどうか」は論点ではない</h2>
<p>クロスプラットフォームの比較記事では「Flutter は独自レンダリングだから」「RN はネイティブだから」という議論をよく見ますが、動画とカメラに関しては、<strong>デコードと撮像の層は 3 者とも完全に同じ</strong>です。自前で H.264 デコーダやカメラドライバを書いているフレームワークは 1 つもありません。</p>
<table>
<thead>
<tr>
<th>フレームワーク / ライブラリ</th>
<th>再生のデコード</th>
<th>カメラの撮像</th>
</tr>
</thead>
<tbody><tr>
<td>Flutter：<code>video_player</code> / <code>camera</code>（いずれも flutter.dev 公式プラグイン）</td>
<td>ExoPlayer / AVPlayer</td>
<td>CameraX・Camera2 / AVCaptureSession</td>
</tr>
<tr>
<td>React Native：<code>react-native-video</code> / <code>vision-camera</code></td>
<td>ExoPlayer / AVPlayer</td>
<td>CameraX / AVCaptureSession</td>
</tr>
<tr>
<td>本アプリ（CMP）</td>
<td>Media3 ExoPlayer / AVPlayer / <code>&lt;video&gt;</code></td>
<td>CameraK 経由の CameraX / AVCaptureSession、Web は <code>getUserMedia</code> を直接</td>
</tr>
</tbody></table>
<p>どのフレームワークを選んでも、動画をデコードするのは ExoPlayer と AVPlayer で、カメラを制御するのは CameraX と AVCaptureSession です。つまり「画質」「デコード性能」「対応コーデック」でフレームワーク間に差は出ません。</p>
<p>では何が違うのか。<strong>ネイティブ API がデコードした 1 フレームを、フレームワーク自身が描いた UI（ボタン、テキスト、角丸カード）とどう合成するか</strong>。ここがすべての分岐点です。</p>
<h2>本当の分岐点：ネイティブのフレームをどう合成するか</h2>
<p>合成戦略は大きく 2 路線に分かれます。</p>
<ul>
<li><strong>路線 A：テクスチャ搬送。</strong> ネイティブプレイヤーの出力を GPU テクスチャとしてフレームワーク側にコピーし、フレームワークが自分のシーングラフの中で 1 枚の画像として描く。Flutter の <code>video_player</code> は従来この方式が既定でした。</li>
<li><strong>路線 B：ネイティブ view の埋め込み。</strong> ネイティブの view（<code>SurfaceView</code> / <code>UIView</code> / DOM 要素）をそのまま画面に重ね、フレームワークの描画面と OS のコンポジタで合成する。React Native と、CMP の Interop（<code>AndroidView</code> / <code>UIKitView</code>）はこちらです。</li>
</ul>
<p><img src="/assets/blog/authors/yao.xie/2026-09-20/cmp-videoplayer-camera-composition-routes.svg" alt="路線 A（テクスチャ搬送）と路線 B（ネイティブ view 埋め込み）の合成機構の対比図"></p>
<p><em>路線 A は毎フレームのコピーと引き換えに自由な変換を、路線 B はゼロコピー直結と引き換えに手動のレイヤー管理を受け入れる</em></p>
<p>両者の得失は明確に非対称です。</p>
<table>
<thead>
<tr>
<th>観点</th>
<th>路線 A：テクスチャ搬送（Flutter）</th>
<th>路線 B：ネイティブ view 埋め込み（RN / CMP）</th>
</tr>
</thead>
<tbody><tr>
<td>角丸・クリップ・回転・拡縮</td>
<td>✅ 動画はただの画像なので自由に変換できる</td>
<td>⚠️ ネイティブ層は親の clip を受けない（<code>SurfaceView</code> の場合。<code>TextureView</code> なら可）</td>
</tr>
<tr>
<td>他 UI との z 順の重なり</td>
<td>✅ 常に正しい</td>
<td>⚠️ 手動管理。Web ではほぼ不可能</td>
</tr>
<tr>
<td>リスト内スクロール</td>
<td>✅ フレーム同期が自然に取れる</td>
<td>⚠️ ネイティブ層がずれて「浮く」ことがある</td>
</tr>
<tr>
<td>GPU 負荷 / 遅延</td>
<td>⚠️ コピーと同期で約 1 フレーム分のコスト</td>
<td>✅ ゼロコピーでハードウェア合成に直結（<code>SurfaceView</code> の場合）</td>
</tr>
<tr>
<td>PiP（iOS）/ AirPlay / ロック画面操作 / ネイティブ字幕</td>
<td>⚠️ 失われる。追加プラグインが必要</td>
<td>✅ ネイティブプレイヤーの機能がそのまま使える</td>
</tr>
<tr>
<td>DRM のセキュアパス（Widevine L1）</td>
<td>❌ テクスチャ経路では取得できない</td>
<td>✅ 可能（<code>SurfaceView</code> が必要）</td>
</tr>
</tbody></table>
<p>この表を頭に入れたうえで、CMP が 3 プラットフォームでそれぞれどう実装しているかを見ていきます。本アプリでは ComposeMediaPlayer の上に 272 行のラッパー <code>VideoPlayer.kt</code> を被せ、成果物動画の再生（<code>VideoDetailScreen</code>）、アバターのプレビュー再生（<code>AvatarDetailScreen</code>）、録画素材の見直し（<code>AvatarCreateVideoReviewScreen</code>）とその Web 版、計 6 画面で使っています。</p>
<h2>3 つのプラットフォーム、3 つの Interop</h2>
<h3>Android：AndroidView と、SurfaceView / TextureView の選択権</h3>
<p>Android 実装は <code>AndroidView</code> で Media3 の <code>PlayerView</code> を Compose ツリーに埋め込みます。興味深いのは、このライブラリが<strong>動画を描く面（surface）を 2 種類用意していて、XML レイアウトで切り替えられる</strong>ことです。</p>
<pre><code class="language-xml:player_view_surface.xml">&lt;androidx.media3.ui.PlayerView
        android:layout_width=&quot;match_parent&quot;
        android:layout_height=&quot;match_parent&quot;
        app:surface_type=&quot;surface_view&quot;
        app:use_controller=&quot;false&quot; /&gt;
</code></pre>
<pre><code class="language-xml:player_view_texture.xml">&lt;androidx.media3.ui.PlayerView
        android:layout_width=&quot;match_parent&quot;
        android:layout_height=&quot;match_parent&quot;
        app:surface_type=&quot;texture_view&quot;
        app:use_controller=&quot;false&quot; /&gt;
</code></pre>
<p><code>SurfaceView</code> は OS のハードウェアコンポジタに直結した独立レイヤーで、ゼロコピーかつ低遅延、DRM のセキュアパスもここを通ります。ただし<strong>独立レイヤーであるがゆえに、親 View のクリップに参加しません</strong>。一方 <code>TextureView</code> は動画フレームを GPU テクスチャとして View ヒエラルキーの描画に合流させるため、1 コピー分のコストと引き換えに、普通の View と同じように角丸クリップや変換が効きます。</p>
<p>本アプリのデフォルトは <code>TextureView</code> です。</p>
<pre><code class="language-kotlin:VideoPlayerSurface.android.kt（抜粋）">@Composable
actual fun VideoPlayerSurface(
    playerState: VideoPlayerState,
    modifier: Modifier,
    contentScale: ContentScale,
    overlay: @Composable () -&gt; Unit
) {
    VideoPlayerSurfaceInternal(
        playerState = playerState,
        modifier = modifier,
        contentScale = contentScale,
        overlay = overlay,
        surfaceType = SurfaceType.TextureView
    )
}
</code></pre>
<p>理由は具体的です。アバター詳細画面（<code>AvatarDetailScreen</code>）のプレビューは 350×600 の角丸カードで、<code>SurfaceView</code> を使うと角丸の内側から四角い動画がはみ出して、カードの角を突き破ります。デザインを守るには <code>TextureView</code> しかありませんでした。</p>
<p><img src="/assets/blog/authors/yao.xie/2026-09-20/cmp-videoplayer-camera-avatar-detail-rounded-preview.png" alt="アバター詳細画面。動画プレビューが角丸カードの中に収まっている"></p>
<p><em>問題の角丸プレビューカード。この 4 つの角を守るために <code>TextureView</code> を選んだ</em></p>
<p>:::message
ここに直感に反する事実があります。前節の表のとおり、<code>TextureView</code> の「GPU テクスチャとしてコピーする」経路は、<strong>まさに Flutter の <code>video_player</code> が従来常に通ってきた路線 A そのもの</strong>です。つまり本アプリは Android では、角丸というデザイン要件のために、Flutter と同じ性能特性を自ら受け入れています。
:::</p>
<p>ただし Flutter との違いは「選べること」にあります。<code>video_player</code> も現在は <code>VideoViewType.platformView</code> で platform view を選べますが、この選択肢が入ったのは登場から長い年月が経ってからでした。CMP の路線 B では、<code>surfaceType</code> 引数 1 つで<strong>画面ごとに</strong> <code>SurfaceView</code>（性能・DRM 優先）と <code>TextureView</code>（クリップ・変換優先）を選び分けられます。角丸カードには <code>TextureView</code>、全画面再生には <code>SurfaceView</code>、という使い分けが同じアプリの中でできます。この選択権こそが路線 B の実利で、本アプリの角丸プレビューはそれを行使した実例です。</p>
<h3>iOS：UIKitView と layerClass = AVPlayerLayer</h3>
<p>iOS 実装は 3 プラットフォームの中で最も素直です。CMP の <code>UIKitView</code> でネイティブ <code>UIView</code> を埋め込みますが、その UIView の <strong>backing layer 自体を <code>AVPlayerLayer</code> に差し替える</strong>という UIKit の古典的なテクニックを使っています。</p>
<pre><code class="language-kotlin:VideoPlayerSurface.ios.kt（抜粋）">private class PlayerUIView : UIView {
    companion object : UIViewMeta() {
        override fun layerClass(): ObjCClass = AVPlayerLayer
    }

    @OverrideInit
    constructor(frame: CValue&lt;CGRect&gt;) : super(frame)

    var player: AVPlayer?
        get() = (layer as? AVPlayerLayer)?.player
        set(value) {
            (layer as? AVPlayerLayer)?.player = value
        }
}
</code></pre>
<p>Objective-C の <code>+layerClass</code> オーバーライドを Kotlin/Native の <code>UIViewMeta</code> でそのまま書けている点に注目してください。view の layer が最初から <code>AVPlayerLayer</code> なので、余計なサブレイヤー管理が不要で、AVPlayer のデコード結果は Core Animation のコンポジタにゼロコピーで渡ります。あとは <code>UIKitView(factory = { PlayerUIView(frame = cValue&lt;CGRect&gt;()) }, ...)</code> で Compose に埋め込むだけです。</p>
<p>きれいな構図ですが、路線 B の代償はここにもあります。CMP の <code>UIKitView</code> はネイティブ view を Compose のシーングラフの中に描くのではなく、<strong>Compose が描画している <code>MTKView</code> の兄弟としてその上に重ねます</strong>。つまり動画 view は Compose の描画世界の外にいて、タッチイベントの透過、レイヤーの前後関係、クリップはすべて Interop の境界で個別に面倒を見ることになります。ComposeMediaPlayer がこの境界を吸収するために、再生コントロールなどを載せるための <code>overlay</code> スロットを API として用意しているのは、その裏返しです。</p>
<h3>Web：canvas の裏の video 要素と、BlendMode.Clear で開ける穴</h3>
<p>Web（wasmJs）実装は、この記事でいちばん劇的な部分です。CMP の Web ターゲットは画面全体を 1 枚の canvas（Skia）に描画します。では <code>&lt;video&gt;</code> 要素はどこに置くのか。答えは「<strong>canvas の裏</strong>」です。</p>
<pre><code class="language-kotlin:VideoPlayerSurfaceImpl.kt（webMain・抜粋）">internal fun HTMLVideoElement.applyInteropBehindCanvas() {
    val wrapper = parentElement as? HTMLElement ?: return
    wrapper.style.apply {
        zIndex = &quot;-1&quot;                        // &lt;video&gt; を Compose の canvas の背後へ
        setProperty(&quot;pointer-events&quot;, &quot;none&quot;)
        backgroundColor = &quot;transparent&quot;
    }
}
</code></pre>
<p><code>z-index: -1</code> で動画をページの最背面に沈めます。当然このままでは canvas に隠れて見えません。そこでアプリ側のコードで、Compose の canvas に<strong>文字どおり穴を開けます</strong>。</p>
<pre><code class="language-kotlin:AvatarCreateVideoRecordingScreen.wasmJs.kt（抜粋）">// BlendMode.Clear zeroes every pixel (including alpha) in the Compose canvas
// over this area, punching a transparent hole so the video element behind
// the canvas shows through.
Box(modifier = Modifier.fillMaxSize().drawBehind {
    drawRect(color = Color.Transparent, size = size, blendMode = BlendMode.Clear)
})
</code></pre>
<p><code>BlendMode.Clear</code> はその領域のピクセルをアルファ値ごとゼロにするので、canvas のその部分が完全に透明になり、背後の <code>&lt;video&gt;</code> が透けて見える、という仕掛けです。カメラのライブプレビューも同じ機構で、<code>getUserMedia()</code> で取得した <code>MediaStream</code> を <code>WebElementView</code> 経由で <code>HTMLVideoElement</code> に接続し、canvas の穴から覗かせています。</p>
<p><img src="/assets/blog/authors/yao.xie/2026-09-20/cmp-videoplayer-camera-web-zorder.svg" alt="Web 実装の z 順断面図。canvas に BlendMode.Clear で穴を開け、背面の video 要素を見せる"></p>
<p><em>動画は常に最背面。見えるのは canvas に開けた穴の領域だけで、UI は必ず動画より上に載る</em></p>
<p>:::message
これは 2 つ目の、直感に反する事実につながります。この方式の帰結として、<strong>Web では動画は構造的に、すべての Compose コンテンツより下にしか存在できません</strong>。「動画の上に UI を重ねる」ことは（canvas 側に描く限り）可能ですが、「UI の下に動画、そのさらに下に別の UI」のような自由な z 順は原理的に組めません。録画中のタイマー表示や停止ボタンは、この制約を前提に「穴の上に Compose で描く」設計になっています。これはバグや実装の手抜きではなく、canvas レンダリング + DOM 動画という構成の構造的な限界です。
:::</p>
<p>公平を期すために書いておくと、<strong>Web の動画は 3 フレームワークとも体面を保てていません</strong>。Flutter Web の <code>video_player</code> も <code>HtmlElementView</code> で DOM の <code>&lt;video&gt;</code> を重ねる同類の方式で、canvas と DOM の合成に相応の制約とコストを抱えます。React Native には公式の動画プレイヤーがそもそもなく、<code>react-native-video</code> の Web 対応もまだ発展途上です。ブラウザでは動画デコードとページ合成の主導権がブラウザ自身にあるため、どのフレームワークも <code>&lt;video&gt;</code> 要素と「同居」する方法を探すしかないのです。</p>
<h2>カメラと録音：expect/actual が第一級市民である強み</h2>
<p>動画再生はコミュニティ製ライブラリで戦いましたが、カメラと録音はもっと直接的に、<code>expect/actual</code> で各プラットフォームのネイティブ API に下りて実装しました。まず実装量の実態を見てください。</p>
<table>
<thead>
<tr>
<th>能力</th>
<th>Android</th>
<th>iOS</th>
<th>Web</th>
</tr>
</thead>
<tbody><tr>
<td>動画録画画面</td>
<td><code>AvatarCreateVideoRecordingScreen.mobile.kt</code> <strong>467 行</strong>（Android / iOS 共有）</td>
<td>同左</td>
<td><code>AvatarCreateVideoRecordingScreen.wasmJs.kt</code> <strong>425 行</strong></td>
</tr>
<tr>
<td>カメラ実装</td>
<td>CameraK 0.4（CameraX ベース）</td>
<td>CameraK 0.4（AVCaptureSession ベース）</td>
<td><code>getUserMedia()</code> + <code>MediaRecorder</code> + <code>WebElementView</code></td>
</tr>
<tr>
<td><code>AudioRecorder</code></td>
<td>83 行（<code>MediaRecorder</code>）</td>
<td>108 行（<code>AVAudioRecorder</code>）</td>
<td><strong>11 行の stub</strong></td>
</tr>
<tr>
<td><code>MicrophoneDeviceProvider</code></td>
<td>70 行</td>
<td>17 行</td>
<td><strong>12 行の stub</strong></td>
</tr>
<tr>
<td><code>AudioPlayer</code></td>
<td>53 行</td>
<td>63 行</td>
<td>57 行（<code>HTMLAudioElement</code>）</td>
</tr>
</tbody></table>
<p>モバイル側の録画は CameraK に任せました。フロントカメラ固定・HD 画質・録画プラグインという構成が、Android / iOS 共通の 1 ファイルで書けます。</p>
<pre><code class="language-kotlin:AvatarCreateVideoRecordingScreen.mobile.kt（抜粋）">val cameraConfig = remember {
    CameraConfiguration(
        flashMode = FlashMode.OFF,
        cameraLens = CameraLens.FRONT,
    )
}
val cameraState = rememberCameraKState(
    config = cameraConfig,
    setupPlugins = { holder -&gt; holder.attachPlugin(plugin) },  // VideoRecorderPlugin
)
CameraKScreen(
    modifier = Modifier.fillMaxSize(),
    cameraState = cameraState.value,
    content = { _ -&gt; RecordingOverlay(/* 録画 UI */) },
)
</code></pre>
<p><img src="/assets/blog/authors/yao.xie/2026-09-20/cmp-videoplayer-camera-avatar-create-recording.png" alt="録画中の画面。カメラプレビューの上に録画タイマー・スクリプト・停止ボタンが重なる"></p>
<p><em>録画中の画面。カメラプレビュー（ネイティブ層）の上に、タイマー・スクリプト・停止ボタンを Compose の overlay として重ねている</em></p>
<p>Web はライブラリなしで、<code>getUserMedia()</code> と <code>MediaRecorder</code> を wasmJs から直接呼びます。mimeType のネゴシエーション（ブラウザごとに対応コーデックが違う）もブラウザ API の流儀のまま書きました。</p>
<p>表の中の「11 行の stub」は隠さず書いておきます。Web 版の <code>AudioRecorder</code> と <code>MicrophoneDeviceProvider</code> は中身のない空実装で、音声クローン用の録音フローはモバイル専用と割り切りました。3 プラットフォーム対応とは「全機能 × 全プラットフォーム」ではなく、プラットフォームごとに提供範囲を選ぶことでもあります。<code>expect/actual</code> はこの割り切りも型として明示できます。</p>
<h3>同じ状態機械、違うトリガー：ConsentReturnFromBrowserEffect</h3>
<p><code>expect/actual</code> の使いどころとして、私が最も気に入っている例を挙げます。アバター訓練には本人確認（consent）があり、外部ブラウザで確認を完了してからアプリに戻ると、アプリ側が「戻ってきた」ことを検知してステータスの確認を始めます。この「外部ブラウザから戻ってきた」というイベントは、プラットフォームによって観測手段がまったく違います。</p>
<pre><code class="language-kotlin:ConsentReturnFromBrowserEffect.kt（commonMain）">@Composable
expect fun ConsentReturnFromBrowserEffect(onReturned: () -&gt; Unit)
</code></pre>
<ul>
<li><strong>Android / iOS</strong>（mobileMain・36 行）：Compose の lifecycle を観測し、<code>ON_PAUSE</code> → <code>ON_RESUME</code> の順で来たときだけ発火。ブラウザを開けば必ずアプリが pause するので、初回 composition や無関係な resume を誤検知しません</li>
<li><strong>Web</strong>（wasmJs・36 行）：<code>window</code> の <code>blur</code> → <code>focus</code> を監視。wasmJs では lifecycle の <code>ON_RESUME</code> が確実には発火しないため、専用の経路を用意しました</li>
</ul>
<p>consent の状態機械そのもの（待機 → 確認中 → 完了）は ViewModel にあり、3 プラットフォームで完全に同一です。<strong>違うのはトリガーの観測方法だけで、そこだけが actual として差し替わる</strong>。状態機械のテスト・修正・拡張は 1 か所で済みます。</p>
<p>:::message
ここが 3 つ目の、そしてこの記事で最も伝えたい、直感に反する洞察です。「CMP はエコシステムが若く、公式プラグインがない」という弱点は事実ですが、そのダメージは KMP のアーキテクチャによって<strong>構造的にかなりの部分まで相殺されています</strong>。Flutter で MethodChannel や PlatformView を書くのは「プラグインがないときの例外的な脱出路」という位置づけですが、KMP の <code>actual</code> は日常の文法そのものです。同じ <code>AudioRecorder</code> クラスを Android 83 行 / iOS 108 行 / Web 11 行で書き分ける作業は、型安全で、IDE 補完が効き、ビジネスコードと同じモジュールの中で完結します。「ライブラリがなければネイティブ API を直接呼べばいい」が、儀式なしで成立するのです。
:::</p>
<h2>Flutter / React Native と比べたときの CMP の強みは何か</h2>
<p>先に明確にしておきます。<strong>「CMP の動画プレイヤーやカメラは Flutter より優れている」という主張は成立しません。</strong> 成熟度では公式保守の <code>video_player</code> / <code>camera</code> や実績豊富な <code>vision-camera</code> に及びません。そのうえで、このプロジェクトを通して実感した CMP 固有の強みは次の 3 点です。</p>
<p><strong>1. Interop 路線の選択権がある。</strong> CMP は路線 B（ネイティブ view 埋め込み）ですが、Android では <code>SurfaceView</code> / <code>TextureView</code> を画面単位で選べます。角丸が要る画面は <code>TextureView</code>、性能や DRM が要る画面は <code>SurfaceView</code>。Flutter の <code>video_player</code> には、このスイッチに相当する選択肢が長らく存在しませんでした。<code>AvatarDetailScreen</code> の角丸プレビューカードは、この選択権の行使例です。</p>
<p><strong>2. 「ネイティブに下りる」ことが第一級市民である。</strong> 前節のとおり、<code>expect/actual</code> は例外処理ではなく日常の文法です。エコシステムに欠けている部品は、待つのではなく 83 行書けば埋まります。</p>
<p><strong>3. ネイティブ API サーフェス全体に直接触れられる。</strong> 本アプリが使っているのは、Media3 <code>PlayerView</code> の <code>app:surface_type</code>、UIView の <code>layerClass</code> 差し替え、<code>MediaRecorder</code> の mimeType ネゴシエーションといった、各プラットフォームの<strong>素の API</strong>です。プラグイン作者が切り出した「最大公約数的な抽象」を経由しないので、プラグインが公開していない機能のために上流（upstream）のリリースを待ったり PR を出したりする必要がありません。</p>
<h2>引き換えに何を受け入れたか</h2>
<p>強みだけ書いて終わる記事は信用できないので、CMP を選んだ引き換えに受け入れたデメリットも正直に書きます。</p>
<ul>
<li><strong>動画再生をコミュニティ製ライブラリ 1 本に依存している。</strong> 公式チーム保守という後ろ盾がなく、挙動の細部を確かめたり問題を切り分けたりするたびに、ライブラリ内部の Interop 実装まで読み解く理解コストがかかる</li>
<li><strong>カメラライブラリのバージョンは 0.4。</strong> 公式チームが保守する Flutter <code>camera</code> や、長年プロダクションで検証されてきた <code>vision-camera</code> と比べ、実績の厚みが違う</li>
<li><strong>Web の録音まわりは stub。</strong> <code>AudioRecorder</code> 11 行、<code>MicrophoneDeviceProvider</code> 12 行の空実装で、録音フローはモバイル専用に割り切った</li>
<li><strong>Web の動画は構造的に最背面。</strong> <code>BlendMode.Clear</code> の穴あけ方式である限り、動画と Compose UI の z 順は「動画が常に下」で固定される</li>
</ul>
<p>これらを踏まえた私の判断はこうです。<strong>プロダクトの重心がメディア能力そのものにあるなら、<code>vision-camera</code> を持つ React Native がおそらく最も成熟した実用的な選択肢でしょう。</strong> 一方、重心が複雑なビジネス状態機械にあり、長期的にネイティブ UI へ回帰する可能性を残したいなら、CMP は正しい選択です。メディア層で余分に書いたコードは、「<code>sharedLogic</code> を Swift から直接呼べる」「いつでもネイティブ UI に戻れる」という自由への入場料だったと総括しています。</p>
<h2>まとめ</h2>
<ul>
<li>動画・カメラのデコードと撮像の層は、Flutter / React Native / CMP のどれを選んでも同じネイティブ API に行き着く。差が出るのは「ネイティブのフレームと自前 UI の合成方法」で、テクスチャ搬送（路線 A）とネイティブ view 埋め込み（路線 B）は得失が非対称</li>
<li>CMP は路線 B に立ちつつ、Android では <code>SurfaceView</code> / <code>TextureView</code> を画面ごとに選べる。本アプリは角丸プレビューのために、あえて Flutter と同じテクスチャ経路（<code>TextureView</code>）をデフォルトにした</li>
<li>iOS は <code>UIKitView</code> + <code>layerClass = AVPlayerLayer</code> でゼロコピー再生。Web は canvas 背面の <code>&lt;video&gt;</code> に <code>BlendMode.Clear</code> で穴を開けて見せる方式で、動画が常に UI の下という構造的制約を受け入れた</li>
<li>エコシステムの若さ（コミュニティ製の動画プレイヤー、CameraK 0.4、Web 録音の stub）は実在するコストである。同時に、<code>expect/actual</code> によって「ネイティブ API に直接下りる」ことが日常の文法になっているため、そのダメージはアーキテクチャで大きく緩和できる</li>
</ul>
<p>CMP のメディアエコシステムは、あと数年は「自分の手を動かして埋める」フェーズが続くと思います。それでも、埋めるための道具立て——<code>AndroidView</code> / <code>UIKitView</code> / <code>WebElementView</code>、そして <code>expect/actual</code>——は既に揃っていて、実プロダクトを 3 プラットフォームに出荷できる水準にあります。この記事の数字とコードが、同じ判断を迫られている方の材料になれば幸いです。</p>
<p>最後まで読んでいただき、ありがとうございました！</p>
]]></content:encoded>
            <enclosure url="https://blog.kinto-technologies.com/assets/blog/authors/yao.xie/2026-09-20/cmp-videoplayer-camera-cover-image.png" length="0" type="image/png"/>
        </item>
        <item>
            <title><![CDATA[「このまま進めていいのかな」を、チームで検討できる問いに変えるー『ユーザーに寄りそわNight!』Vol.03レポート]]></title>
            <link>https://blog.kinto-technologies.com/posts/2026-08-31-yorisowa-night-vol03/</link>
            <guid>https://blog.kinto-technologies.com/posts/2026-08-31-yorisowa-night-vol03/</guid>
            <pubDate>Mon, 31 Aug 2026 10:00:00 GMT</pubDate>
            <description><![CDATA[社内勉強会「ユーザーに寄りそわNight! Vol.03」テーマはクイックなリサーチ。ユーザーの声と行動をもとに要件への理解を深め、提案・開発の精度を高めることで狙った成果につなげる方法をお伝えします。]]></description>
            <content:encoded><![CDATA[<p>こんにちは。KINTOテクノロジーズ（KTC）で、ユーザーファースト推進活動の運営に関わっているる<a href="https://x.com/momentofudayo">かーびー</a>です。</p>
<p>KTCでは<a href="https://blog.kinto-technologies.com/posts/2025-12-11-userfirst2025/">「ユーザーファースト」</a>を会社の重点方針のひとつに掲げており、社内勉強会「ユーザーに寄りそわNight!」の開催もその取り組みのひとつです。<a href="https://blog.kinto-technologies.com/posts/2026-04-27-yorisowa-night-vol02/">Vol.02</a>のレポートに続き、今回はVol.03の内容をお伝えします。</p>
<p>テーマは「クイックなリサーチ」。サービスに感じた「このまま進めていいのかな」という違和感を、すぐに改善案にせず、手元にある情報から一度確かめてみる進め方です。</p>
<p>サービスの企画や改善に関わっていると、「この動線で、必要な情報までたどり着けるのだろうか」「説明の途中で迷う人がいるのではないか」と感じる場面があります。<br>こうした違和感は改善を考えるきっかけになりますが、その時点では本当に問題が起きているのか、ユーザーにどんな影響があるのかまではわかりません。</p>
<p>生煮えのままチームに改善案をあげたとして、関係者の立場によって持っている情報や前提が異なるため、提案に至った背景から理解を取り付ける必要があります。一定の共感は得られるとしても、関係者が多いほど時間がかかるものです。</p>
<p>Vol.03で取り上げたのは、この違和感と改善案のあいだに、「確かめる」を一段はさむ実践でした。</p>
<p><img src="/assets/blog/authors/ogane/260831/2.png" alt="これまでのテーマ"></p>
<p>第3回の寄りそわNightでは、デジタル戦略部の上田貴弘さんに登壇していただきました。オンライン相談やVoC（Voice of Customer：お客様の声）の分析、ユーザビリティテストなどを通じて、ユーザーの声や行動を捉える業務に取り組んでいます。当日は、オンライン相談やVoCから見えてきた仮説を、新入社員とのユーザビリティテストで確かめた事例が紹介されました。</p>
<h2>新入社員に実際のサービスを使ってもらう</h2>
<p>今回の事例の出発点は、オンライン相談やVoCを見る中で生まれた「サービスの利用途中に、いくつかのつまずきが起きているのではないか」という仮説でした。</p>
<p>ただ、相談や問い合わせからわかるのは、ユーザーが言葉にした困りごとが中心です。実際の画面上のどこで手が止まり、何が理解しにくかったのかまではつかめません。</p>
<p>そこで登壇者の上田さんが紹介したのが、新入社員に協力してもらうユーザビリティテストでした。</p>
<p>入社したばかりのメンバーは、業務やサービスに関する前提知識がまだ少なく、社内では当たり前になっている言葉や流れにも、初めてサービスに触れる人に近い反応を示します。社内メンバーなので確認したい内容を共有しやすく、短い準備で実施できる。実践のしやすさも、この方法が選ばれた理由の一つでした。</p>
<p>もちろん、新入社員がそのまま実際のお客様を代表するわけではありません。<br>今回は、サービスのどこにつまずきがありそうかをまず確かめるための検証です。</p>
<p>テストでは、実際に画面を操作してもらいながら、利用中の発話や迷い、説明を読んだあとの反応を観察していきます。説明を何度も読み返す、次に進まずに考え込む、前の画面に戻って情報を探す。<br>操作の様子を追うことで、どの場面で立ち止まったのか、どの説明が伝わりにくかったのか、判断するために何の情報が足りなかったのかが具体的になっていきます。</p>
<p>設計上は、説明を読めばそのまま次の画面へ進める想定でも、実際には同じ箇所を何度も読み返している。反対に、作る側が課題だと考えていた箇所では、ほとんど迷いが起きていない。登壇を通して繰り返し語られていたのは、この「想定」と「実際に起きていること」を分けて見ることの大切さでした。</p>
<p>紹介された例のひとつが、本人確認書類の画像アップロードです。最新のスマートフォンで撮ったきれいな写真が容量の上限を超え、エラーになる。設計した時点では問題のなかった仕様でも、ユーザーの利用環境が変わることで、思わぬところにつまずきが生まれます。実際の利用を見て初めてわかるつまずきは、こうした単純なところにも潜んでいます。</p>
<p>エラーに遭遇した人は、そのあと撮り直して先へ進めているのか。それとも、そこで利用をやめてしまっているのか。実際の行動が見えると、次に確かめたいことが具体的になります。こうして、ひとりの違和感が、チームで確かめられる問いに変わっていきます。</p>
<p>オンライン相談やVoCから感じていた違和感に実際の行動が重なったことで、「使いにくそう」という感覚だけでは見えていなかった部分が確認できた。そんな事例でした。</p>
<p><img src="/assets/blog/authors/ogane/260831/3.png" alt="ユーザーテストイメージ"></p>
<h2>提案の前に、同じ景色を見る</h2>
<p>確かめた結果を、チームでどう使うのか。この話題で登壇のキーワードになっていたのが「同じ景色を見る」という言葉です。</p>
<p>ここでいう「同じ景色」とは、全員が同じ意見になることではありません。改善案を挟んで向かい合うのではなく、ユーザーの行動や声を真ん中に置いて、隣に並んで見る。ユーザーに何が起きていたのか。どの情報から、課題かもしれないと考えたのか。何が変われば、困りごとが解消されたと言えそうなのか。立場や役割が違っていても、まずユーザーを共通の起点にして考える、という意味です。</p>
<p><img src="/assets/blog/authors/ogane/260831/4.png" alt="チームでユーザーの目線に立って会話しているイメージ"></p>
<p>改善案だけが先に出てくると、受け取る側は、何を解決しようとしているのか、なぜ今扱う必要があるのかを、まず確認しなければなりません。ユーザーの行動や発言、問い合わせ、ログが先に共有されていれば、改善案への賛否を決める前に、「何が起きていそうか」から話し始められます。</p>
<p>直したい箇所のリストは、開発の現場ではいつも長くなりがちです。<br>「一部の環境で画像のアップロードがエラーになることがある」という一行の報告と、目の前でユーザーが何度も写真を撮り直し、手を止めてしまう様子とでは、同じ事実でも受け取る重みが違います。<br>実際の行動を関係者が一緒に見ることで、ユーザーへの影響を起点に、何から手をつけるかを話せるようになります。</p>
<p>最初に置いた仮説が、正しいとは限りません。確かめてみると、想定とは別の場所で迷っていたり、課題だと思っていたことが実際にはそれほど影響していなかったりもします。<br>それでも、見ていた事実と仮説が共有されていれば、想定と違う結果が出たときに、次に何を確認するかを考えやすくなります。</p>
<p>事実は、提案を通すためだけの材料ではなく、チームで次の判断を下すための材料にもなります。<br>今回の事例を貫いていたのは、この考え方だったように思います。</p>
<p><img src="/assets/blog/authors/ogane/260831/5.png" alt="仮説検証サイクル"></p>
<h2>参加者から寄せられた質問</h2>
<p>イベント後のアンケートや質問フォームには、今回の内容を実践する際に迷いそうな点について、具体的な質問が寄せられました。たとえば、次のような内容です。</p>
<ul>
<li><p>「売上を伸ばす」のような大きな目的から、どの粒度まで課題を小さくして調査を設計するのか</p>
</li>
<li><p>アンケートで集めた声を、設問の意図や対象者を踏まえてどう読み取るのか</p>
</li>
<li><p>集めた事実を、聞き手が判断できる量にどう整理するのか</p>
</li>
</ul>
<p>また、「ユーザー中心の視点でサービス開発を進めるには、何から始めるとよいのか」「プロジェクト名など、普段使う言葉をユーザー起点に変えることにも意味があるのか」といった質問もありました。</p>
<p>内容を理解して終わるのではなく、自分の業務で試すとしたらどこで迷うのか。その段階まで踏み込んだ質問が多かったことが印象に残っています。ここで挙がった論点は、次回以降のテーマを考える際の材料にしていく予定です。</p>
<h2>まず、手元にあるものを見てみる</h2>
<p>ユーザーファーストの実践というと、大がかりな調査や専門的なリサーチから始めるもののように感じるかもしれません。</p>
<p>今回の事例の起点は、オンライン相談やVoCなど、すでに手元にあった情報でした。そこから気になったことを、新入社員とのユーザビリティテストで確かめる。日々の業務で生まれる「このままでいいのかな」という違和感も、事実とセットにすると、チームで検討できる問いになります。</p>
<p>私自身、気になることがあると、つい解決策まで一気に考えてしまいます。今回の話を聞きながら、答えを出す前に、まず何が起きているのかを一度見てみることを忘れないようにしたいと思いました。</p>
<p>次に何かが気になったとき、まずは手元のログや問い合わせをひとつ確認してみる。今回のレポートが、そんな一歩につながればうれしいです。</p>
<hr>
<h3>関連記事</h3>
<ul>
<li><p><a href="https://blog.kinto-technologies.com/posts/2026-04-27-yorisowa-night-vol02/">『ユーザーに寄りそわNight!』Vol.02レポート ── my route開発チームのフィールドワーク事例</a></p>
</li>
<li><p><a href="https://blog.kinto-technologies.com/posts/2025-12-11-userfirst2025/">KINTO Technologiesにおけるユーザーファースト推進の取り組み</a></p>
</li>
<li><p><a href="https://blog.kinto-technologies.com/posts/2026-01-14-user-interview-waiwai-session/">定量データと定性データを行き来する ── ユーザーインタビューわいわい会</a></p>
</li>
</ul>
]]></content:encoded>
            <enclosure url="https://blog.kinto-technologies.com/assets/blog/authors/ogane/260831/1.png" length="0" type="image/png"/>
        </item>
        <item>
            <title><![CDATA[スクリーンリーダーで読み上げに2分31秒かかっていたメッセージを、1分29秒で届けるまで]]></title>
            <link>https://blog.kinto-technologies.com/posts/2026-08-19-screen-reader-message-sweeper/</link>
            <guid>https://blog.kinto-technologies.com/posts/2026-08-19-screen-reader-message-sweeper/</guid>
            <pubDate>Wed, 19 Aug 2026 10:00:00 GMT</pubDate>
            <description><![CDATA[NVDAで読み上げに2分31秒かかっていたSlackメッセージを、NVDAアドオン「Message Sweeper」で1分29秒に短縮するまでの開発と、職場に生まれた小さな協力の循環について。]]></description>
            <content:encoded><![CDATA[<hr>
<p>こんにちは。Engineering Officeのアクセシビリティアドボケート、辻勝利です。</p>
<p>普段使っているSlackに、ある時こんな投稿が流れてきました。</p>
<p><img src="/assets/blog/authors/debugon/slack-study-session.png" alt="Slackの投稿のスクリーンショット。タイトル行と装飾行に絵文字がいくつも並んだ「【募集】社内勉強会の登壇者を募集します」というお知らせ"></p>
<p>この投稿は、実際に流れてきた社内のお知らせと同じ構造で作った架空のメッセージです。以降の読み上げの引用と秒数は、すべてこの投稿を実測した値です。</p>
<p>目で見ると、気合いの入ったお知らせです。</p>
<p>NVDAというスクリーンリーダーで聴くと、こうなります。</p>
<blockquote>
<p>クラッカー 絵文字ピカピカ 絵文字マイク 絵文字【募集】社内勉強会の登壇者を募集しますマイク 絵文字ピカピカ 絵文字クラッカー 絵文字　クラッカー 絵文字ピカピカ 絵文字マイク 絵文字クラッカー 絵文字ピカピカ 絵文字マイク 絵文字クラッカー 絵文字ピカピカ 絵文字マイク 絵文字クラッカー 絵文字ピカピカ 絵文字マイク 絵文字クラッカー 絵文字　ニテンリーダ なぜならば ニテンリーダ ニテンリーダ なぜならば ニテンリーダ ニテンリーダ なぜならば ニテンリーダ なぜならば ニテンリーダ なぜならば ニテンリーダ　来月の社内勉強会で話してくれる方を募集します。テーマは自由です。15 分の枠を 3 つ用意しています。（以下省略）</p>
</blockquote>
<p>意味として受け取れるものは何もないまま音が続き、本文の最後の一文「迷っている方も、まずは気軽に声をかけてください。」を読み終わる頃には、2分31秒が過ぎていました。</p>
<hr>
<h2>1. スクリーンリーダーで読む、ということ</h2>
<p>スクリーンリーダーは、私たち視覚障害者が音声と点字で画面の情報を受け取るソフトウェアです。</p>
<p>基本的には、画面に表示されている内容を記号や絵文字を含めて一字一句そのまま読み上げるように設計されている支援技術です。冒頭のメッセージをNVDAで聴くと、何が起きているか。もう少し丁寧に辿ってみます。</p>
<p>フォーカスが投稿に当たった瞬間、読み上げが始まります。最初に届くのは「クラッカー 絵文字ピカピカ 絵文字マイク 絵文字」——タイトルの前に置かれた3つの絵文字です。そこを抜けてようやくタイトルの「【募集】社内勉強会の登壇者を募集します」に辿り着き、その後ろにも「マイク 絵文字ピカピカ 絵文字クラッカー 絵文字」が続きます。次の行は絵文字だけの装飾行で、13個ぶんの「クラッカー 絵文字」「ピカピカ 絵文字」「マイク 絵文字」が一つずつ読まれます。厄介なのはその次です。<code>‥∵‥‥∵‥</code> のように記号が並んでいる箇所も一つひとつ読まれ、「ニテンリーダ なぜならば ニテンリーダ ニテンリーダ なぜならば ニテンリーダ ニテンリーダ なぜならば ニテンリーダ なぜならば ニテンリーダ なぜならば ニテンリーダ」と続きます。意味として受け取れるものは何もなく、思考を混乱させるような音だけが続きます。本文に入ってからも、小見出しのような行の前後に同じ3つの絵文字が挟まっているので、読み進めるあいだ何度も同じ音が割り込みます。ようやく最後の一文「迷っている方も、まずは気軽に声をかけてください。」に到達し、読み終える頃には、2分31秒が経っています。</p>
<p>目で見ると、装飾はメッセージの「気合い」や「テンション」として届きます。タイトルを目立たせ、絵文字で季節感を添える——投稿者の意図はきちんと伝わる、工夫された書き方です。一方、耳で聴く場面では同じ工夫が、本文の前に積み重なる、情報として届かない音として受け取られます。SlackでもMicrosoft Teamsでも、メッセージに絵文字や装飾が入っていれば、同じことが起きます。</p>
<p>情報の中身は変わらないのに、辿り着くまでの時間が変わる。</p>
<p>絵文字だけではありません。SlackやTeamsにXの投稿を含むなんらかのURLだけが投稿された場合、アプリがタイトル情報を取得できないと、NVDAは忠実にそのURLの文字列を読んでいました。画面にはリンク先の情報のプレビューが表示されているのにです。</p>
<p>「目で見る工夫」が「耳で聴く情報」になる場面では、届き方が変わる——それが、日常のチャットのなかで静かに起きていることです。</p>
<p>Slackは仕事のやり取りの大半が流れる場所です。そこで情報に辿り着くたびに時間がかかる——それが、日常の中で静かに積み重なっていました。</p>
<hr>
<h2>2. 1分29秒で届くようになった</h2>
<p>その違和感を解消するために作ったのが、NVDAアドオンの Message Sweeper です。</p>
<p>これまで私たちユーザーができることといえば、「スクリーンリーダーで読みづらいので、絵文字や記号の使用を控えてください」と投稿者にお願いすることでした。投稿者の表現の選択を制限する依頼です。Message Sweeper は、その構図を変えようとしています。投稿者が込めた「気づいてほしい」という意図はそのままに、スクリーンリーダーユーザーには読みやすい形で届ける——双方の意図が成立する場所を目指しました。</p>
<p>本音を言えば、読み上げのためにテキストを加工することは、あまり好きではありません。スクリーンリーダーは画面の情報をそのまま届けるために設計された技術であり、本来は発信側やアプリの側が変わることで解決されるべきものだと思っているからです。</p>
<p>それでも、仕事の現場には、その改善を待つ余裕がないほどの情報の波があります。できるだけ時間をかけずに処理しなければならない現実がある。Message Sweeper はその現実への応答です。だからこそ、発信する側と受け取る側、双方の歩み寄りがこれからも大切だと思っています。</p>
<p>同じメッセージを通すとこう届きます。</p>
<blockquote>
<p>【募集】社内勉強会の登壇者を募集します
来月の社内勉強会で話してくれる方を募集します。テーマは自由です。15 分の枠を 3 つ用意しています。
こんな発表をお待ちしています
（……中略……）
メッセージの絵文字: クラッカー16こ、ピカピカ14こ、マイク14こ</p>
</blockquote>
<p>情報を削るのではなく、再配置する。絵文字で気合いを入れてくれた投稿者のテンションは末尾のサマリーとしてちゃんと届き、本文は最初から順番に耳に入ってきます。2分31秒かかっていた読み上げが、1分29秒で届くようになりました。</p>
<p>読み上げが実際にどう変わるのかは、4分ほどの動画にもまとめています。読み上げの音そのものが本編なので、音を出して聴いてみてください。</p>
<p><a href="https://youtu.be/1oQD78-KO7Q">https://youtu.be/1oQD78-KO7Q</a></p>
<p>動画は、公開版のMessage Sweeper 1.0.0で、冒頭に挙げたのと同じ架空の投稿を題材に撮影したものです。前半が処理をオフにしたときの読み上げで2分31秒、後半がオンにしたときの読み上げで1分29秒です。読み上げの速度も設定も、前半と後半で変えていません。</p>
<p>URLも同じです。Message Sweeper はリンクのURLをページタイトルに差し替えます。「エイチ ティー ティー ピー エス コロン スラッシュ スラッシュ...」と読まれていたものが、リンク先の内容として届くようになりました。URLだけが読まれていた頃は、ページを開いてみるまで、その情報が自分に関係あるかどうかさえわかりませんでした。ページタイトルが届くようになってから、今読むべきか、あとでいいか、読み飛ばしてもいいか——リンクを開く前に自分で判断できるようになりました。</p>
<p>変化は Slack だけにとどまりません。Teams を使う場面は主に音声会議で、会議中に参加者がチャットへリンクを貼ることがあります。話を耳で追いながら、URL文字列の読み上げが割り込んでくる——その状況は、Slack 以上に切実でした。Teams でも同じように整えて読み上げるようになって、使う道具が増えるたびに我慢が増えるのではなく、どのチャットでも同じ手触りで情報を受け取れる——その感覚が、思いのほか仕事のテンポを変えました。メッセージを開くたびに「今日はどれだけ長い読み上げが来るだろう」と身構えることがなくなり、流れてくる情報にそのまま乗れるようになりました。</p>
<p>NVDA+V で読み上げ処理のON/OFFをサッと切り替えたり、加工済みのテキストを点字ディスプレイにも同じ形で表示したりといった細部も、日常の中で少しずつ積み上げてきたものです。この機能群は、AIコーディング支援ツール Claude Code との共同作業で組み上がってきました。</p>
<hr>
<h2>3. 一人で開発していたら、仲間ができた</h2>
<p>開発を進める中で、X（旧Twitter）のURLだけがどうしても取得できずにいました。Slack や Teams のメッセージやニュースサイトの情報は処理できるようになっていたのに、X のポストへのリンクが貼られると、中身が届かないまま読み上げられてしまう。そこで詰まっているとき、同僚の大園さんが「それなら手伝えるかもしれませんよ」と声をかけてくれました。</p>
<p>数日後、X のポスト取得を担当する PR が上がってきました。</p>
<p>竹中さんからはあるとき、冒頭に挙げたのと同じような装飾たっぷりのアドベントカレンダー募集の投稿について、こんなメッセージが届きました。</p>
<blockquote>
<p>「アドベントカレンダーの募集メッセージ、普通に読み上げられると思ったら最悪の投稿ですね、いつも気付きをありがとうございます」</p>
</blockquote>
<p>Message Sweeper がその投稿に対応できたとき、竹中さんはこう書き添えてくれました。</p>
<blockquote>
<p>「いろんな人が全方位的に対応できる術を身につけて、誰かに負担を押し付けないのが大事だと実感させられました」</p>
</blockquote>
<p>どちらも、こちらから求めたのではありませんでした。私が夢中で開発しているのを見て、興味を持ってくれたのです。</p>
<hr>
<h2>4. 職場で小さな循環が回り始めた</h2>
<p>視覚障害のある知人がMessage Sweeper を使ってみてくれたとき、こんな言葉をもらいました。</p>
<blockquote>
<p>「おかげで Slack を見てみる気になった。これまでは基本的に見ていなかった」</p>
</blockquote>
<p>それだけで、作った甲斐があったと思いました。</p>
<p>その一連の流れを振り返ると、何かひとつの動きが見えてきます。当事者が作り、仲間が育て、別の誰かが使い始める。</p>
<p>この経験を、「配慮を求めない配慮」と呼びたい気持ちがあります。制度や義務として外から持ち込んだのではなく、日常の仕事の中で自然に育っていった——そういう感覚が残っています。その感覚が、私がこの記事を書きたかった理由でもあります。</p>
<hr>
<p>その循環が、もっと広い場所でも起きてほしいと思っています。</p>
<p>Message Sweeper は、誰でもインストールして使えるかたちで公開しました。ソースコードも公開しているので、自分のメッセージに対して何をしているのかを確かめてから使えます。</p>
<ul>
<li>リポジトリ: <a href="https://github.com/kinto-technologies/message-sweeper">https://github.com/kinto-technologies/message-sweeper</a></li>
<li>アドオンのダウンロード: <a href="https://github.com/kinto-technologies/message-sweeper/releases/latest">https://github.com/kinto-technologies/message-sweeper/releases/latest</a></li>
</ul>
<p>インストールの手順、設定できる項目、動作を確認した環境は、リポジトリのREADMEにまとめています。不具合の報告や要望は、リポジトリのIssueで受け付けています。もしチャットツールの読み上げで「これは届きにくいな」と感じた体験があれば、ぜひ教えてください。</p>
]]></content:encoded>
            <enclosure url="https://blog.kinto-technologies.com/assets/common/thumbnail_default_×2.png" length="0" type="image/png"/>
        </item>
        <item>
            <title><![CDATA[AIに指示するだけで会社デザインのスライドが完成する。AI-Nativeな公式パワポテンプレを作った話]]></title>
            <link>https://blog.kinto-technologies.com/posts/2026-08-06-ai-native-powerpoint-template/</link>
            <guid>https://blog.kinto-technologies.com/posts/2026-08-06-ai-native-powerpoint-template/</guid>
            <pubDate>Thu, 06 Aug 2026 10:00:00 GMT</pubDate>
            <description><![CDATA[AIが利用しやすい構造の会社公式パワポテンプレを整備すると、Claudeに指示するだけでデザインの揃ったスライドが誰でも作れるようになる。KINTOテクノロジーズでの全社展開の取り組みを紹介します。]]></description>
            <content:encoded><![CDATA[<h2>はじめに</h2>
<p>こんにちは、サイバーセキュリティと生成AI活用推進を担当しているたなちゅーです。</p>
<p>KINTOテクノロジーズ（以下、KTC）では、<a href="https://blog.kinto-technologies.com/posts/2026-04-21-introducing-ai-native-dev/">以前の記事</a>で紹介した全社横断プロジェクト「AI-Native Dev」を中心に、AIネイティブな開発・業務プロセスへの変革を進めています。いまでは職種を問わず多くのメンバーが、日常業務のさまざまな場面でClaudeを利用しています。そうした環境の中で「パワーポイント作成もAI-Nativeにしたい」と考えるメンバーが現れ、それぞれがClaudeで利用しやすいパワポテンプレを自作するようになりました。こうした自作テンプレが社内で活発に使われている様子を目にしたことが、今回の取り組みを始める大きなきっかけです。</p>
<p>一方で、この動きには課題もありました。</p>
<ul>
<li>自作テンプレは<strong>個人ベース・非公式</strong>にとどまり、社内に複数の様式が並行して存在している</li>
<li>AI経由で生成したスライドの<strong>見た目がバラバラで、会社の資料としての統一感が出ない</strong></li>
</ul>
<p>そこで、これらの個人の創意工夫を束ねて、<strong>「AIが利用しやすい会社公式パワポテンプレ」として一本化・全社展開する</strong>プロジェクトを立ち上げました。この記事では、その取り組みを紹介します。</p>
<h2>取り組みの概要</h2>
<h3>目指した状態</h3>
<p>プロジェクトのゴールはシンプルで、<strong>「Claudeに指示するだけで、KTC公式デザインに揃ったスライドが出てくる」状態を全社員に提供する</strong>ことです。これにより、次の3つの価値を狙いました。</p>
<table>
<thead>
<tr>
<th>狙い</th>
<th>内容</th>
</tr>
</thead>
<tbody><tr>
<td>時間短縮</td>
<td>資料作成をそのままAIへ渡せるようになり、作成時間を短縮できる</td>
</tr>
<tr>
<td>デザインの統一</td>
<td>AI経由でも、見た目の揃ったKTCらしい資料になる</td>
</tr>
<tr>
<td>個人の取り組みの組織化</td>
<td>AI-Nativeな個人の創意工夫を、組織としての成果に引き上げる</td>
</tr>
</tbody></table>
<p>3つ目が本プロジェクトの特徴的なポイントです。単にテンプレを作るのではなく、<strong>すでに個人が生み出していたAI-Nativeな工夫を「会社公式」の標準にする</strong>ことを重視しました。AI-Native Devが文化醸成の軸として掲げてきた「個人の知見を組織全体で活かす」を、パワポテンプレという誰にとっても身近な題材で実践した形です。</p>
<h3>体制と進め方</h3>
<p>推進はAI-Native Devが担い、テンプレートのデザインはクリエイティブグループが担当する協業体制で進めました。今後は技術広報グループとも連携しながら、利用促進に取り組んでいく予定です。</p>
<p>全体像は次のとおりです。</p>
<p><img src="/assets/blog/authors/tanachu/2026-08-06-ai-native-powerpoint-template/image3.png" alt="体制と進め方の全体像。AI利用者がAIで再現しやすい構造を逆算してクリエイティブGへインプットし、テンプレート設計につなげる体制と、Phase 0の期待値整理からPhase 4のヒアリングと改善まで5段階で進めた流れ"></p>
<p>進め方として特に大事にしたのは、次の合意です。</p>
<blockquote>
<p>「AIで再現しやすいフォーマット / スタイルガイドはどうあるべきか」を<strong>AI利用者側から逆算してデザイナーへインプット</strong>し、デザイナーがそれを受けてフォーマットを設計する。</p>
</blockquote>
<p>デザインが完成してからAIに対応させるのではなく、設計の段階から「AIが出力しやすい構造」を要件に含めています。この取り組みを「AI-Native」と呼んでいるのは、こうした進め方によるものです。</p>
<p>フェーズは次のように区切りました。</p>
<table>
<thead>
<tr>
<th>フェーズ</th>
<th>内容</th>
</tr>
</thead>
<tbody><tr>
<td>Phase 0</td>
<td>パワポテンプレへの期待値整理</td>
</tr>
<tr>
<td>Phase 1</td>
<td>たたき台テンプレの社内展開 &amp; フィードバック収集</td>
</tr>
<tr>
<td>Phase 2</td>
<td>公式テンプレの作成と、AIが利用しやすい形（コンポーネント化・スキル化）への変換</td>
</tr>
<tr>
<td>Phase 3</td>
<td>全社アナウンス</td>
</tr>
<tr>
<td>Phase 4</td>
<td>利用者ヒアリングと継続的なメンテナンス</td>
</tr>
</tbody></table>
<p>いきなり完成品を作るのではなく、まず有志の自作テンプレをたたき台として展開してフィードバックを集め（公開後50名以上が閲覧・ダウンロード）、その声をもとに公式版を作る、という2段階を踏んでいます。</p>
<h2>AIが利用しやすいテンプレートの設計</h2>
<p>完成したテンプレートには、AIとの相性を高めるための工夫がいくつも入っています。</p>
<p><img src="/assets/blog/authors/tanachu/2026-08-06-ai-native-powerpoint-template/image1.png" alt="完成した公式パワポテンプレのレイアウト一覧。目次・グラフ・比較表・タイムライン・システム構成図などの多様なレイアウトがダークトーンのデザインで統一されている"></p>
<h3>ヘッダー＋ボディのコンポーネント構造</h3>
<p>スライドを「ヘッダー＋ボディ（シングル / スプリット / マルチカラム）」というコンポーネントの組み合わせとして構造化しました。AIは自由なレイアウトを毎回ゼロから作るよりも、<strong>決められた部品の組み合わせを選ぶ方が安定して高品質な出力を返せる</strong>ためです。</p>
<h3>レイアウト選択ルールのスキル化</h3>
<p>「どんな内容のときに、どのレイアウトを選ぶべきか」というルールをClaudeのSkill（スキル）として整備しました。これにより、毎回テンプレファイルを渡さなくても、Claudeが自律的に適切なレイアウトを選択してスライドを組み立てられます。</p>
<h2>使い方は3通り</h2>
<p>展開にあたっては、作業スタイルに合わせて3通りの使い方を用意しました。</p>
<table>
<thead>
<tr>
<th>利用方法</th>
<th>向いている人・場面</th>
</tr>
</thead>
<tbody><tr>
<td>方法1：テンプレPPTXをClaudeへ渡す</td>
<td>まず試したい人。PowerPointでの手動編集も併用したい人</td>
</tr>
<tr>
<td>方法2：Skillを使う</td>
<td>資料作成の頻度が高い人。毎回ファイルを用意する手間をなくしたい人</td>
</tr>
<tr>
<td>方法3：Claude Designを使う</td>
<td>見た目を対話しながら細かく詰めたい人。1枚ものやビジュアル重視の資料</td>
</tr>
</tbody></table>
<p>方法1は、Claude Coworkやチャットにテンプレファイルとアウトラインを渡して「このテンプレを踏襲して」と依頼する、いちばん手軽な入口です。</p>
<p>方法2のSkillにはテンプレのデザイン情報が組み込まれているため、社内のプラグインマーケットプレイスから一度インストールすれば、ファイルを用意しなくても依頼するだけで公式デザインの資料が生成されます。</p>
<p>方法3のClaude Design向けには、配色・フォント・レイアウトを定義したデザインシステム（ダーク・ライトの2トーン）を用意しました。pptxファイルとして配布・編集したい資料は方法1・2、見た目の作り込みを優先したい資料は方法3、という使い分けです。</p>
<p>「迷ったら方法1から」という導線にして、AIでの資料作成に馴染みのない社員でも一歩目を踏み出しやすくしています。</p>
<p><img src="/assets/blog/authors/tanachu/2026-08-06-ai-native-powerpoint-template/image2.png" alt="Skillを組み込んだClaudeのチャットで会社紹介資料を依頼し、公式デザインに揃った会社概要・事業内容などのスライドが生成されている様子"></p>
<h3>おすすめの進め方は「先にアウトラインを固める」</h3>
<p>どの方法でも共通して案内しているのが、<strong>いきなりpptxを作らせず、先にClaudeと壁打ちしてアウトラインをMarkdownで固める</strong>進め方です。生成されたpptxに「2枚目を直して」「構成を変えて」と修正を繰り返すと、そのたびにファイルの再生成が走り、時間もトークンも大きく消費します。内容の試行錯誤はMarkdown上で済ませ、pptxの生成は最後の1回だけにすることで、トークン消費を大きく抑えられます。</p>
<p>また、生成された資料の数値・固有名詞・事実関係は必ず人の目で確認する、という運用もあわせて案内しています。テンプレ自体も作って終わりではなく、利用者へのヒアリングやフィードバックフォームを通じて、レイアウトの追加なども含めて継続的にブラッシュアップしていく予定です。</p>
<h2>おわりに</h2>
<p>「AIに指示するだけで、会社公式デザインのスライドが出てくる」のは、使ってみるとシンプルに便利です。そして、それを実現する鍵は高度なAI技術ではなく、<strong>AIが扱いやすい形にテンプレートという「型」を設計し直すこと</strong>、そして<strong>その型をデザイナーとAI利用者が一緒に作ること</strong>でした。デザインルールをどこまで厳密に縛り、どこを緩めるかの塩梅も、この過程で見えてきた収穫です。</p>
<p>個人の創意工夫として始まったAI-Nativeな動きを、組織の公式な成果に引き上げる。このモデルはパワポテンプレに限らず、さまざまな社内資産に適用できるはずです。この記事が、同じような取り組みを検討している方の参考になれば嬉しいです。</p>
<p>AI-Native Devの活動やナレッジは、引き続きテックブログで発信していきます。最後まで読んでいただきありがとうございました！</p>
]]></content:encoded>
            <enclosure url="https://blog.kinto-technologies.com/assets/blog/authors/tanachu/2026-08-06-ai-native-powerpoint-template/thumbnail.png" length="0" type="image/png"/>
        </item>
        <item>
            <title><![CDATA[Claude Community Event「Claude Managed Agents Workshop」にOsaka Tech Labを会場提供しました]]></title>
            <link>https://blog.kinto-technologies.com/posts/2026-08-06-claude-managed-agents-workshop-osaka/</link>
            <guid>https://blog.kinto-technologies.com/posts/2026-08-06-claude-managed-agents-workshop-osaka/</guid>
            <pubDate>Tue, 04 Aug 2026 10:00:00 GMT</pubDate>
            <description><![CDATA[2026年7月31日、Anthropic公認のClaude Community EventをOsaka Tech Lab JCTで開催しました。会場提供と運営を担当しつつハンズオンにも参加した立場から、Claude Managed Agentsで実際に何が作れたのか、Jina AIのAPIキーでつまずいた点まで含めて報告します。]]></description>
            <content:encoded><![CDATA[<h2>この記事でわかること</h2>
<ul>
<li>2026年7月31日、KINTOテクノロジーズ（以下、KTC）のOsaka Tech Lab JCTを会場として、Anthropic公認のコミュニティイベント「Claude Managed Agents Workshop」が開催され、約30名が参加しました。主催はClaude Community Ambassadorであり、KTC社員でもある森田さんです。</li>
<li>Claude Managed Agentsは、エージェントを動かすための土台（実行制御・サンドボックス・履歴やファイルの保持）をAnthropic側が用意してくれるサービスです。利用者はエージェントの設定とメッセージの送信に集中できます。</li>
<li>ワークショップの教材は誰でも参照できる形で公開されています。イベントに参加していなくても、同じ手順でエージェントを作って動かせます。</li>
<li>ハンズオンで唯一つまずいたのはClaude側ではなく、外部サービスであるJina AIのAPIキーでした。キーに無料トークンが残っているとは限らないので、教材を試す前に残トークンを確認しておくと足を止めずに進められます。</li>
</ul>
<h2>はじめに</h2>
<p>こんにちは、KINTO開発部でフロントエンドエンジニアをしている<a href="https://x.com/_dowod">齋藤</a>です。普段はKINTOのシミュレーションや申し込み、マイページの開発を担当しています。</p>
<p>2026年7月31日（金）、KTCのOsaka Tech Labを会場として、<strong>Claude Community Event「Claude Managed Agents Workshop」</strong> が開催されました。私は会場提供・運営サポートを担当しつつ、参加者としてハンズオンにも取り組みました。</p>
<p>本記事は、その開催報告です。</p>
<p>![KINTOテクノロジーズOsaka Tech Labのエントランスと、Claude Managed Agents Workshop Osakaの案内ボード](/assets/blog/authors/dowod/2026-08-06/cover.jpg =600x)
<em>当日のエントランスの様子</em></p>
<h2>開催したイベントの概要</h2>
<table>
<thead>
<tr>
<th>項目</th>
<th>内容</th>
</tr>
</thead>
<tbody><tr>
<td>イベント名</td>
<td><a href="https://luma.com/claude-e5yf">Osaka | Claude Managed Agents Workshop</a>（Claude Community Event）</td>
</tr>
<tr>
<td>開催日</td>
<td>2026年7月31日（金）18:30〜21:05</td>
</tr>
<tr>
<td>会場</td>
<td>KINTOテクノロジーズ Osaka Tech Lab JCT（大阪市北区梅田3-1-3 ノースゲートビルディング20階）</td>
</tr>
<tr>
<td>主催</td>
<td>森田さん（Claude Community Ambassador）</td>
</tr>
<tr>
<td>会場提供</td>
<td>KINTOテクノロジーズ</td>
</tr>
<tr>
<td>参加者</td>
<td>約30名</td>
</tr>
</tbody></table>
<p>タイムテーブルは次のとおりです。</p>
<table>
<thead>
<tr>
<th>時間</th>
<th>内容</th>
</tr>
</thead>
<tbody><tr>
<td>18:30〜19:00</td>
<td>受付・交流</td>
</tr>
<tr>
<td>19:00〜19:10</td>
<td>オープニング・会場説明</td>
</tr>
<tr>
<td>19:10〜19:30</td>
<td>Claude Managed Agentsの解説</td>
</tr>
<tr>
<td>19:30〜20:45</td>
<td>ハンズオン（個人ペース）</td>
</tr>
<tr>
<td>20:45〜21:00</td>
<td>ネットワーキング</td>
</tr>
<tr>
<td>21:00〜21:05</td>
<td>クロージング</td>
</tr>
</tbody></table>
<h2>会場提供の経緯</h2>
<p>主催の<a href="https://x.com/moritalous">森田さん</a>は<strong>Anthropicから認定されたClaude Community Ambassador</strong>であり、同時にKTCのPrincipal Generative AI Engineerでもあります。社内向けのAIエージェント構築ワークショップを開催した話は、<a href="https://blog.kinto-technologies.com/posts/2026-07-07-agentcore-workshop/">こちらの記事</a>で紹介されています。</p>
<p>今回のイベントは、その森田さんが場所貸しイベントとして社内で起案し、運営協力者の募集がかかったところに私が手を挙げた、という流れで実現しました。</p>
<h2>会場：Osaka Tech Lab JCT</h2>
<p>Osaka Tech Labは、東京・名古屋に次ぐKTCの第3の拠点です。2022年に心斎橋で開設され、2025年夏にJR大阪駅直結のノースゲートビルディングへ移転しました。「集GO！発SHIN！CO-LAB」というコンセプトを掲げていて、会議室にGARAGEやPIT、モータープールといった車にちなんだ名前が付いていたり、執務室の床がレーシングラインを模した遊び心のあるデザインになっていたりします。</p>
<p>今回使用した<strong>Osaka Tech Lab JCT</strong>は、その20階にあるイベントスペースです。40名ほどを収容できる広さで、今回の参加者は約30名でした。JR大阪駅直結という立地なので、金曜夜のイベントでもアクセスしやすい会場です。</p>
<p>アクセス方法は<a href="https://blog.kinto-technologies.com/posts/2025-07-09-office-access-osaka/">KINTOテクノロジーズOsaka Tech Labにご来場のかたへ</a>で写真つきで案内しています。</p>
<h2>当日の様子</h2>
<p>当日は、Anthropicでコミュニティ活動を担当されている<a href="https://www.linkedin.com/in/jun-t-405aab/">辻さん</a>にもご来場いただき、会の冒頭にご挨拶をいただきました。大阪でのアンバサダー主催イベントは今回が初めてであること、今後も関西でコミュニティを盛り上げていきたいというお話をされていました。</p>
<p>続く30分は、森田さんによるClaude Managed Agentsの解説パートです。</p>
<p>![スクリーンにワークショップ教材を投影して解説する様子](/assets/blog/authors/dowod/2026-08-06/session.jpg =600x)
<em>解説パートの様子。スクリーンに投影されているのが当日使用した教材です</em></p>
<p>その後はハンズオンに移ります。各自のペースで進める形式だったので、全員が黙々とキーボードを叩いている時間と、手が止まった人が周りに聞いて質問が飛び交う時間が、交互に訪れていました。</p>
<p>各テーブルにはお菓子が用意されていて、つまみながらハンズオンを進められました。</p>
<p>![参加者がそれぞれのノートPCでハンズオンに取り組んでいる](/assets/blog/authors/dowod/2026-08-06/handson-overview.jpg =600x)
<em>ハンズオン中の会場。各自のペースで進めます</em></p>
<p>もくもくと作業が進むなか、森田さんが会場を回って、困っている人がいないか声をかけてサポートに入る場面もありました。<strong>手を挙げれば主催者が直接見に来てくれる</strong>という体制だったので、普段Claude Codeを使っていない人でも安心して参加できるイベントだったと思います。</p>
<p>![参加者のノートPCをのぞき込んでサポートしている様子](/assets/blog/authors/dowod/2026-08-06/support.jpg =600x)
<em>サポートに入る森田さん</em></p>
<p>参加者の年齢層は幅広く、学生の方も参加されていました。</p>
<p>![別アングルから見た会場の様子](/assets/blog/authors/dowod/2026-08-06/handson-wide.jpg =600x)
<em>Osaka Tech Lab JCTは40名ほどを収容できます</em></p>
<p>参加者には、Claude Managed Agentsを試すための$50相当のAPIクレジットが配布されました。</p>
<p>さらに辻さんからは、Anthropic公式のノベルティも提供していただきました。</p>
<p>![オレンジ色のぬいぐるみがテーブルに並べられている](/assets/blog/authors/dowod/2026-08-06/novelty-plush.jpg =600x)
<em>Claude Codeのマスコットキャラクター「Clawd」のぬいぐるみ。サングラス姿と、白衣にフラスコを持った科学者姿の2種類がありました</em></p>
<p>![箱に入ったM5Stack Cardputer ADV](/assets/blog/authors/dowod/2026-08-06/novelty-cardputer.jpg =600x)
<em>M5Stack Cardputer ADV</em></p>
<p>数に限りのあるノベルティは希望者が用意された数を上回ったため、<strong>じゃんけん大会</strong>でもらえる人を決めました。会場が一番盛り上がった瞬間だったかもしれません。</p>
<p>![参加者が一斉に手を挙げてじゃんけんをしている](/assets/blog/authors/dowod/2026-08-06/janken.jpg =600x)
<em>じゃんけん大会の様子</em></p>
<p>![参加者全員での集合写真](/assets/blog/authors/dowod/2026-08-06/group-photo.jpg =600x)
<em>最後に参加者の皆さんと。手にしているのがClawdのぬいぐるみです</em></p>
<h2>Claude Managed Agentsとは</h2>
<p>ここで、当日のテーマだったClaude Managed Agentsについて、私が理解した範囲で整理しておきます。</p>
<p>AIエージェントを自分でゼロから作ろうとすると、アプリケーション側で用意しなければならないものが意外と多くあります。モデルを呼んでツールを実行し、その結果をまたモデルに渡す、という繰り返しの制御。ツールを安全に動かすための実行環境。途中で生成されたファイルや会話履歴の保持。Claude Managed Agentsは、この土台をAnthropic側がまるごと用意してくれるサービスです。利用者が用意するのは「どんなエージェントにするか」という設定と、「何をしてほしいか」というメッセージだけになります。</p>
<p>Messages APIとの棲み分けは、公式ドキュメントでは<strong>きめ細かい制御が欲しいならMessages API、数分から数時間かかる長時間実行タスクや非同期処理ならClaude Managed Agents</strong>という整理になっています。</p>
<p>登場する概念は4つです。</p>
<table>
<thead>
<tr>
<th>概念</th>
<th>何を指すか</th>
</tr>
</thead>
<tbody><tr>
<td>エージェント</td>
<td>使うモデル、システムプロンプト、ツール、MCPサーバー、スキルをまとめた設定。一度作ればIDでセッションから参照できる</td>
</tr>
<tr>
<td>環境</td>
<td>エージェントを走らせる場所。Anthropic側のクラウドサンドボックスと、自分たちで管理するインフラ上で動かすセルフホスト型が選べる</td>
</tr>
<tr>
<td>セッション</td>
<td>環境の中で実際に動いているエージェントの実体。タスクを実行して成果物を残す</td>
</tr>
<tr>
<td>イベント</td>
<td>アプリケーションとエージェントのあいだで交換されるメッセージ。ユーザーの指示、ツールの実行結果、ステータス更新などが該当し、レスポンスはSSEでストリーミングされる</td>
</tr>
</tbody></table>
<p>ハンズオンも「エージェントを作る → 環境を作る → セッションを起動する → メッセージを送る」という順番をそのままたどる構成になっていたので、この4つの関係は手を動かしているうちに自然と頭に入りました。</p>
<p>サンドボックスの中では、bash、ファイルの読み書き・編集、glob・grep、Web検索・取得といったツールが最初から使えます。ここにMCPサーバーを繋げば外部サービスのツールも呼び出せる、という組み立てです。</p>
<p>料金は次の2軸です。</p>
<ul>
<li>セッションのなかでモデルが使ったトークンぶんの、通常のAPI料金（プロンプトキャッシングの乗数も同じように適用されます）</li>
<li><strong>セッションランタイム（セッション時間あたり$0.08）</strong></li>
</ul>
<p>セッションランタイムはミリ秒単位で計測され、セッションが<code>running</code>のあいだだけ加算されます。次のメッセージを待っている<code>idle</code>の時間は加算されません。裏を返せば、<strong>エージェントを長時間放置しても待機中のコストは増えない</strong>ということで、これは長時間タスク向けという位置づけと整合しています。なお、セッション内でWeb検索が走った場合は1,000検索あたり$10が別途かかります。</p>
<p>本記事執筆時点でClaude Managed Agentsはベータ版です。詳細は<a href="https://platform.claude.com/docs/ja/managed-agents/overview">公式ドキュメント</a>と<a href="https://platform.claude.com/docs/ja/about-claude/pricing">料金ページ</a>を参照してください。</p>
<h2>ハンズオンをやってみた</h2>
<p>私は受付を担当していたため、ハンズオンの開始が少し遅れました。さらにイベントの様子を撮影しながら進めていたので、上級には届かず<strong>中級まで</strong>の到達です。</p>
<p>教材は初級・中級・上級の3段階構成になっていて、内容は次のようなものでした。</p>
<ul>
<li><strong>初級</strong>：テンプレート「Deep researcher」からリサーチエージェントを作る、チャットで設定を自動生成してMicrosoft LearnのMCPサーバーを使うクイズエージェントを作る、自由演習</li>
<li><strong>中級</strong>：Jina AIのMCPサーバーにつながるWebリサーチエージェントを、<strong>コンソール・CLI（<code>ant</code>）・Python SDK の3通り</strong>で作る</li>
<li><strong>上級</strong>：分析レポート（スライド生成）、スケジュール実行でGitHub Pagesを毎朝更新、Gmail連携、記憶するエージェント、マルチエージェント</li>
</ul>
<p>同じエージェントをコンソール・CLI・SDKの3通りで作らせる中級の設計が特に良くできていて、画面操作で理解した概念がそのままAPIのリソース構造に対応していることが体感できました。</p>
<p>そして特筆すべきは<strong>教材の完成度</strong>です。説明が丁寧で画像も豊富に用意されていて、公式が提供した教材と言われても遜色ないなと感じる内容でした。おかげでClaude Managed Agentsの部分ではまったくつまずくことなく進められました。</p>
<h2>つまずいたのはJina AIのAPIキー</h2>
<p>強いて挙げるなら、中級で使う<strong>Jina AIのAPIキー</strong>が唯一の詰まりどころでした。私のAPIキーには無料トークンの残りがなく、Jina AIのツールを呼び出せませんでした。</p>
<p>中級で作るのはWeb検索するリサーチエージェントで、検索は<a href="https://jina.ai/">Jina AI</a>の<a href="https://github.com/jina-ai/MCP">MCPサーバー</a>経由で実行します。この検索系のツールはAPIキーが必須です。APIキー自体はアカウント作成もクレジットカード登録もなしにトップページから取得できるのですが、<strong>そのキーに無料トークンが残っているとは限りません</strong>。</p>
<p>:::message
これから教材を試す方は、先に<a href="https://jina.ai/">jina.ai</a>の「API KEY &amp; BILLING」タブでAPIキーの残トークンを確認しておくと、中級で足を止めずに進められます。
:::</p>
<h2>イベントに参加していなくても教材を試せます</h2>
<p>このワークショップの教材は、森田さんが作成したものが公開されています。</p>
<ul>
<li><a href="https://moritalous.github.io/claude-managed-agents-workshop-202607/">Claude Managed Agents Workshop（教材サイト）</a></li>
</ul>
<p>イベントに参加していなくても、事前準備から上級まで同じ手順をたどれます。Claude Managed Agentsを触ってみたい方には、公式ドキュメントを読み込むより先にこちらを一周するのがおすすめです。</p>
<p>:::message
この教材はAnthropicの公式コンテンツではなく、非公式の学習教材です。ライセンスがCC BY-NC-ND 4.0のため、本記事では中身の転載はせず、リンクの紹介にとどめています。
:::</p>
<h2>8月にも同じ内容のワークショップが開催されます</h2>
<p>今回のイベントは申込がキャンセル待ちまで伸び、参加できなかった方が多く出ました。そうした方に向けて、<strong>同じ内容のワークショップが8月にも開催されます</strong>。</p>
<table>
<thead>
<tr>
<th>項目</th>
<th>内容</th>
</tr>
</thead>
<tbody><tr>
<td>イベント名</td>
<td><a href="https://luma.com/claude-r5r0">Osaka | Claude Workshop</a></td>
</tr>
<tr>
<td>開催日</td>
<td>2026年8月18日（火）</td>
</tr>
<tr>
<td>会場</td>
<td>クラスメソッド株式会社 大阪オフィス（大阪市中央区伏見町3-6-3 三菱UFJ信託銀行大阪ビル8階）</td>
</tr>
<tr>
<td>主催</td>
<td>森田さん（Claude Community Events）</td>
</tr>
</tbody></table>
<p>解説のあとハンズオンという流れは7月31日と同じ構成です。申込には承認が必要なので、詳細は<a href="https://luma.com/claude-r5r0">イベントページ</a>を確認してください。</p>
<h2>おわりに</h2>
<p>Claude Managed Agentsは、エージェントの設定とメッセージの送信だけで自律エージェントを動かせるプラットフォームです。教材が公開されているので、興味を持たれた方はぜひ手を動かしてみてください。</p>
<p>Osaka Tech Labでは今後もイベント開催を予定しています。<a href="https://kinto-technologies.connpass.com/">KINTOテクノロジーズのconnpass</a>もあわせてチェックしていただけると嬉しいです。</p>
<h2>参考リンク</h2>
<ul>
<li><a href="https://moritalous.github.io/claude-managed-agents-workshop-202607/">Claude Managed Agents Workshop（当日使用した教材）</a></li>
<li><a href="https://platform.claude.com/docs/ja/managed-agents/overview">Claude Managed Agentsの概要（公式ドキュメント）</a></li>
<li><a href="https://github.com/jina-ai/MCP">Jina AI 公式MCPサーバー</a></li>
<li><a href="https://blog.kinto-technologies.com/posts/2026-07-07-agentcore-workshop/">社内でAIエージェント構築ワークショップを開催しました。（森田さんの記事）</a></li>
<li><a href="https://blog.kinto-technologies.com/posts/2025-07-09-office-access-osaka/">KINTOテクノロジーズOsaka Tech Labにご来場のかたへ</a></li>
</ul>
]]></content:encoded>
            <enclosure url="https://blog.kinto-technologies.com/assets/blog/authors/dowod/2026-08-06/cover.jpg" length="0" type="image/jpg"/>
        </item>
        <item>
            <title><![CDATA[2026年5月入社メンバー紹介]]></title>
            <link>https://blog.kinto-technologies.com/posts/2026-07-22-newcomer-202605/</link>
            <guid>https://blog.kinto-technologies.com/posts/2026-07-22-newcomer-202605/</guid>
            <pubDate>Wed, 22 Jul 2026 10:00:00 GMT</pubDate>
            <description><![CDATA[2026年5月にKINTOテクノロジーズへ入社したビジネスディベロップメントGとQAエンジニアの2名に、所属チームの体制、入社の動機と入社前後のギャップ、現場の雰囲気やオフィスの気に入っている点を聞きました。]]></description>
            <content:encoded><![CDATA[<h2>はじめに</h2>
<p>こんにちは、2026年5月入社のyaMayuです！</p>
<p>本記事では、2026年5月に入社したメンバー2名に入社直後の感想をお伺いし、まとめました。
KINTOテクノロジーズ（以下、KTC）に興味のある方、そして、今回参加してくださったメンバーへの振り返りとして有益なコンテンツになればいいなと思います！</p>
<h2>Y.Q</h2>
<p><img src="/assets/blog/authors/yaMayu/icon_yq.png" alt="Y.Qさんのアイコン"></p>
<ul>
<li><p>自己紹介</p>
<ul>
<li>グループコアシステム部　ビジネスディベロップメントGに配属されました。</li>
<li>自動車部品メーカー→ITコンサル→当社　といったキャリアを歩んでいます。</li>
</ul>
</li>
<li><p>所属チームの体制は？</p>
<ul>
<li>グループコアシステム部の人数が多いですが、ビジネスディベロップメントGは割と少数精鋭です。（現在6人）</li>
<li>同じグループのメンバーは出身地が多様で（欧州、北米、アジアetc.）グループ内の公用語は英語です。</li>
</ul>
</li>
<li><p>KTCの入社動機や入社前後のギャップは？</p>
<ul>
<li>トヨタグループとしての安定感と、若い会社らしいベンチャーカルチャーの両方に魅力を感じたこと、またモビリティサービス領域でのビジネスディベロップメントに携わりたいと考えたことが入社の動機です。</li>
<li>今のところ、大きなギャップは感じていません。</li>
</ul>
</li>
<li><p>現場の雰囲気はどんな感じ？</p>
<ul>
<li>真面目な雰囲気とフラットな雰囲気の、良いバランスが取れていると感じます。</li>
</ul>
</li>
<li><p>オフィスで気に入っているところ</p>
<ul>
<li>Water Serverがある。</li>
<li>周りにランチできるお店が多い。（立地）</li>
</ul>
</li>
<li><p>yaMayuさんからの 質問：旅行が趣味とのことなので、おすすめの場所やまた行きたい場所があればお伺いしたいです！（日本国内でも、海外でもどちらでもOKです！）</p>
<ul>
<li>小笠原諸島です！片道1日ほどかかる長い船旅を経て訪れる分、非日常な体験が待っていました（ウミガメの産卵ツアーもおすすめです！）。太平洋に浮かぶ夜の星空や朝日にも感動し、また訪れたいと思っています。</li>
</ul>
</li>
</ul>
<h2>yaMayu</h2>
<p><img src="/assets/blog/authors/yaMayu/icon_yaMayu.jpg" alt="yaMayuのアイコン"></p>
<ul>
<li><p>自己紹介</p>
<ul>
<li>プラットフォーム開発部 Quality Engineering GでQAエンジニアをやっています。</li>
<li>異業種からSESに転職し、第三者検証を経てKTCに入社しました。</li>
<li>京都市出身で今は都内在住、室町オフィス勤務です。</li>
<li>趣味と呼べるものはあまりないですが、移動中はよくオーディオブックを聴いています。読書も好きです。ミステリー多めです。たまに映画を観に行ったりします。</li>
</ul>
</li>
<li><p>所属チームの体制</p>
<ul>
<li>Web QA, アプリQA, SETチーム合わせて21名です。</li>
<li>6月にSETチームが新設され、大幅に人が増えました。</li>
<li>QA, SETチームとも室町オフィスとOsaka Tech Labにメンバーがいます。</li>
<li>私はWeb QAチームに所属しています。</li>
</ul>
</li>
<li><p>現場の雰囲気</p>
<ul>
<li>大阪のメンバーとは拠点が離れていますが、Slackやzoomで随時連絡や相談をしています。</li>
<li>オフィスに出社しているときは、一緒にランチ行くこともあり和やかな雰囲気だと思います。</li>
</ul>
</li>
<li><p>KTCへの入社動機や入社前後のギャップ</p>
<ul>
<li>前職、前々職ではお客様先のプロダクトに携わっていたので、自社プロダクトのQAに携わりたいと思い、転職しました。</li>
<li>プロダクトのジャンルはあまり絞っていなかったのですが、サブスクサービスはいろんなジャンルでどんどん広まっているので、今後も需要がありそう ＝ 多くの人に使ってもらえるプロダクトに携われそう、と思い入社しました。</li>
<li>カジュアル面談～面接～オファー面談でいろいろお話を聞くことができていたので、入社後の大きなギャップは今のところないです。</li>
</ul>
</li>
<li><p>オフィスで気に入っているところ</p>
<ul>
<li>地下鉄の駅から直結なので、雨でも濡れない＆日差しも怖くないところ。</li>
<li>周辺においしいお店が多いところ。（お値段は安くはないですが…。）</li>
<li>フリードリンクでコーヒーが飲めるところ。</li>
</ul>
</li>
<li><p>Y.Qさんからの質問：京都出身者として、観光客があまり知らないおススメの場所や楽しみ方をご教示ください！</p>
<ul>
<li>最近はネットやSNSですぐ広まってしまうので難しいですね…笑<ul>
<li>志津屋のカルネ：もうすっかり有名になってしまいましたが、昔から好きで、今も実家に帰ると必ず食べます！</li>
<li>法輪寺 電電宮：電気・電波の神様を祀る神社です。（日本唯一らしいです！）IT関連の人にも人気があります。嵐山にありますが、渡月橋から少し離れているので比較的空いていると思います。</li>
<li>明智越：明智光秀が愛宕神社に参詣する際に通った道で、本能寺を攻める際にも通ったと言われています。今はハイキングコースになっていて、歴史と自然を感じられます。（台風や豪雨の影響で道が荒れている場合もあるようなので、訪れる際はご注意を。）</li>
</ul>
</li>
</ul>
</li>
</ul>
<h2>さいごに</h2>
<p>みなさま、入社後の感想を教えてくださり、ありがとうございました！</p>
<p>KINTOテクノロジーズでは日々、新たなメンバーが増えています！
今後もいろんな部署のいろんな方々の入社エントリが増えていきますので、楽しみにしていただけましたら幸いです。</p>
<p>そして、KINTOテクノロジーズでは、まだまださまざまな部署・職種で一緒に働ける仲間を募集しています！
詳しくは<a href="https://www.kinto-technologies.com/recruit/">こちら</a>からご確認ください！</p>
]]></content:encoded>
            <enclosure url="https://blog.kinto-technologies.com/assets/common/thumbnail_default_×2.png" length="0" type="image/png"/>
        </item>
        <item>
            <title><![CDATA[2026年4月入社メンバー紹介]]></title>
            <link>https://blog.kinto-technologies.com/posts/2026-07-01-newcomer-202604/</link>
            <guid>https://blog.kinto-technologies.com/posts/2026-07-01-newcomer-202604/</guid>
            <pubDate>Wed, 08 Jul 2026 10:00:00 GMT</pubDate>
            <description><![CDATA[2026年4月にKINTOテクノロジーズへ入社した4名に、所属チームの体制、入社前後のギャップ、現場の雰囲気やオフィスの気に入っている点を、前の人が次の人に質問するリレー形式で聞きました。]]></description>
            <content:encoded><![CDATA[<h1>はじめに</h1>
<p>こんにちは、2026年4月入社の山本です！</p>
<p>本記事では、2026年4月入社メンバーに入社直後の感想をお伺いし、まとめてみました。
前の方からの質問に次の方が答えるリレー形式でお届けします。
KINTO テクノロジーズ（以下、KTC）に興味のある方、そして、今回参加下さったメンバーへの振り返りとして有益なコンテンツになればいいなと思います！</p>
<h1>もっさん</h1>
<p>![もっさんのプロフィール画像](/assets/blog/authors/yuta.yamamoto/mossan.png =300x)</p>
<ul>
<li><strong>自己紹介</strong><ul>
<li>KINTO開発部 開発推進Gに所属しています。</li>
<li>案件全体の管理や、AIを活用したサイト構築のプロジェクトを担当しています。</li>
<li>スポーツ観戦が趣味で、最近は地元のBリーグクラブを応援しています。せっかくなのでKINTOと縁のあるアルバルク東京もこれから推していきたいです！</li>
</ul>
</li>
<li><strong>所属チームの体制は？</strong><ul>
<li>開発推進Gは8名体制で、KINTOサービスに関わる開発案件のプロジェクトマネジメントを主に行っています。</li>
<li>職種はPMが中心で、事業部側のメンバーや開発メンバーと連携しながら、ものづくりを進めています。</li>
</ul>
</li>
<li><strong>KTCへ入社したときの第一印象は？ギャップはあった？</strong><ul>
<li>前職の同僚が在籍していたこともあり、入社前から気軽に質問でき、カジュアル面談でも疑問をその場で解消できたので、不安なく入社できました。</li>
<li>入社後はフットサルや筋トレなど、いろいろな活動を楽しんでいるアクティブな方が多く、いい意味でのギャップを感じました。</li>
<li>エンジニアの勉強会など学びや発信の場が多いのも印象的で、自分の経験がない分野でも興味があれば気軽に参加させてもらっています。</li>
</ul>
</li>
<li><strong>現場の雰囲気はどんな感じ？</strong><ul>
<li>休憩室では豆を挽いてコーヒーを淹れている方がいて、香りにつられてふらふらと混ざりに行きました。とてもウェルカムな雰囲気で、業務でまだ関わりのない方ともゆるく繋がれるのがありがたいです。</li>
<li>全員が中途採用ということもあり各分野のプロフェッショナルが揃っていて、日々の会話から多くの刺激をもらっています。</li>
</ul>
</li>
<li><strong>オフィスで気に入っているところ</strong><ul>
<li>室町オフィス勤務です。</li>
<li>オフィスから日本橋をわたって八重洲・銀座あたりを歩くのがお気に入りで、街のにぎわいを感じながらの散歩がいい気分転換になっています。</li>
</ul>
</li>
<li><strong>寿司と紅茶さん ⇒ もっさんへの質問</strong><blockquote>
<p>生まれ変わったらなりたい職業とその理由を教えてください</p>
</blockquote>
<ul>
<li>料理人やパティシエですね。今はチームでものづくりをしていますが、生まれ変わったら一人で黙々と何かを突き詰めてみたいです！</li>
</ul>
</li>
</ul>
<h1>つじたく</h1>
<p>![つじたくさんのプロフィール画像](/assets/blog/authors/yuta.yamamoto/tsujitaku.jpeg =300x)</p>
<ul>
<li><strong>自己紹介</strong><ul>
<li>新サービス開発部 FACTORY EC開発G所属です。</li>
<li>趣味は筋トレです。体を大きくしたいです。</li>
</ul>
</li>
<li><strong>所属チームの体制は？</strong><ul>
<li>新サービス開発部 FACTORY EC開発Gで、TOYOTA/LEXUS UPGRADE FACTORYのEC基盤を開発・運用しています。</li>
<li>フロントエンド、バックエンド、PdM、SRE、QA、ディレクター、マネージャーなど合わせて15名ほどの体制です。</li>
</ul>
</li>
<li><strong>KTCへ入社したときの第一印象は？ギャップはあった？</strong><ul>
<li>入社前の面接の時も色々話をしていたので大きなギャップはなかったです！</li>
</ul>
</li>
<li><strong>現場の雰囲気はどんな感じ？</strong><ul>
<li>フロントエンド、バックエンド、PdMなど各方面のメンバーが揃っているので提案→実行までが素早くできて働きやすいです。</li>
</ul>
</li>
<li><strong>オフィスで気に入っているところ</strong><ul>
<li>駅から近く、改札出てから5分もたたずに自席に座れるところ。</li>
<li>オフィスが綺麗なところ。</li>
</ul>
</li>
<li><strong>もっさん ⇒ つじたくさんへの質問</strong><blockquote>
<p><a href="https://factory.kinto-jp.com/">TOYOTA UPGRADE FACTORY</a>担当されていますが、こんなアップグレードあったらいいなと思うのはどんなものですか？</p>
</blockquote>
<ul>
<li>自分の運転スタイルを学習して、燃費・快適性のバランスを自動最適化するAIモードみたいなアップグレードがあったらいいなと思います。</li>
</ul>
</li>
</ul>
<h1>山本雄太</h1>
<p>![山本さんのプロフィール画像](/assets/blog/authors/yuta.yamamoto/yuta_yamamoto.png =300x)</p>
<ul>
<li><strong>自己紹介</strong><ul>
<li>新サービス開発部 プロジェクト推進グループ所属の山本雄太です。ロールはPjMです。</li>
<li>仕事は寄り添い伴走するようなスタイルが性に合っており、誰かの為にだとより力が出るタイプ。</li>
<li>趣味はゴルフ・釣り・サウナ・キャンプなどアクティブ系広め、お酒も大好きです。最近はゴルフにハマってます。やっと100を切りはじめました！</li>
</ul>
</li>
<li><strong>所属チームの体制は？</strong><ul>
<li>プロジェクト推進グループは10名にも満たない小規模体制ですが、トヨタグループ各社に対してKTCの技術力を活かして支援を主導するグループでもあり、やりがいは大きいです。</li>
<li>最先端な取り組みにも関与できるチャンスがあるので、KTCの中でも一番面白いグループなのではとも思っています。</li>
</ul>
</li>
<li><strong>KTCへ入社したときの第一印象は？ギャップはあった？</strong><ul>
<li>第一印象は…オフィスがどの拠点も立派！笑</li>
<li>ギャップは想像以上にスキルフルなメンバーが多い点です。</li>
</ul>
</li>
<li><strong>現場の雰囲気はどんな感じ？</strong><ul>
<li>少数チームという性質もあり、各自別のプロジェクトで作業しており実質的な関わりは少ないです。</li>
<li>ただ、定例MTGは情報交換が活発に行われており、相互に助言できる程よい雰囲気に感じます。</li>
</ul>
</li>
<li><strong>オフィスで気に入っているところ</strong><ul>
<li>私はFukuoka Tech Lab所属で、大名のリッツ・カールトンの真下にオフィスがあり景色が良い！博多湾を一望できて、天気が良い日には志賀島や能古島も綺麗に見える窓際がお気に入り、良いリフレッシュゾーンになっています。</li>
</ul>
</li>
<li><strong>つじたくさん ⇒ 山本さんへの質問</strong><blockquote>
<p>おすすめの日本酒教えてください！</p>
</blockquote>
<ul>
<li>福岡は酒蔵が意外と多くて迷いますが、寒北斗をおすすめします！</li>
<li>北斗七星をモチーフにしたパッケージやお猪口もあったり、見た目から愛せます。</li>
</ul>
</li>
</ul>
<h1>寿司と紅茶</h1>
<p>![寿司と紅茶さんのプロフィール画像](/assets/blog/authors/yuta.yamamoto/sushitokocha.jpeg =300x)</p>
<ul>
<li><strong>自己紹介</strong><ul>
<li>デジタル戦略部データグロースGでマネージャーをしています。</li>
<li>Webエンジニア → EM・PdM → 事業責任者 → VPoE といったキャリアを歩んでいます。</li>
</ul>
</li>
<li><strong>所属チームの体制は？</strong><ul>
<li>1チームに機能横断している方々が揃っているのが特徴です。</li>
<li>PdM、エンジニア、デザイナーといったプロダクトトリオが揃っているため、多角的な視点から機能改善や案件進行ができるのが強みです。</li>
</ul>
</li>
<li><strong>KTCへ入社したときの第一印象は？ギャップはあった？</strong><ul>
<li>リファラルなので事前に質問できていた点とカジュアル面談も複数回実施させていただいたため、ギャップはありませんでした。</li>
</ul>
</li>
<li><strong>現場の雰囲気はどんな感じ？</strong><ul>
<li>比較的スタートアップのようにワイワイやっている雰囲気が強いですね。</li>
<li>会社規模で考えると総合的に珍しいかもしれません。</li>
</ul>
</li>
<li><strong>オフィスで気に入っているところ</strong><ul>
<li>フリードリンクが用意されているところ、宅配弁当が頼めるところですね。</li>
</ul>
</li>
<li><strong>山本さん ⇒ 寿司と紅茶さんへの質問</strong><blockquote>
<p>これまでで一番歯ごたえのあった仕事はどんな仕事でしたか？</p>
</blockquote>
<ul>
<li>ゼロから開発組織を作ることになり、未経験から採用要件、スカウト業務、AG対応、カジュアル面談、面接、オファー対応などすべてやってました。</li>
</ul>
</li>
</ul>
<h1>さいごに</h1>
<p>みなさま、入社後の感想を教えてくださり、ありがとうございました！</p>
<p>KINTOテクノロジーズでは日々、新たなメンバーが増えています！
今後もいろんな部署のいろんな方々の入社エントリが増えていきますので、楽しみにしていただけましたら幸いです。</p>
<p>そして、KINTOテクノロジーズでは、まだまださまざまな部署・職種で一緒に働ける仲間を募集しています！
詳しくは<a href="https://www.kinto-technologies.com/recruit/">こちら</a>からご確認ください！</p>
]]></content:encoded>
            <enclosure url="https://blog.kinto-technologies.com/assets/common/thumbnail_default_×2.png" length="0" type="image/png"/>
        </item>
        <item>
            <title><![CDATA[社内でAIエージェント構築ワークショップを開催しました。]]></title>
            <link>https://blog.kinto-technologies.com/posts/2026-07-07-agentcore-workshop/</link>
            <guid>https://blog.kinto-technologies.com/posts/2026-07-07-agentcore-workshop/</guid>
            <pubDate>Tue, 07 Jul 2026 10:00:00 GMT</pubDate>
            <description><![CDATA[Amazon Bedrock AgentCoreとMCPをテーマに、書籍のハンズオンをベースとした社内AIエージェント構築ワークショップを開催しました。教材選定から環境差異への対応、参加者からの質問まで、実施の記録をまとめます。]]></description>
            <content:encoded><![CDATA[<p>こんにちは！
Principal Generative AI Engineerの森田です。私の所属するAIファーストGでは、社内の生成AI活用にとどまらず、販売店やトヨタグループにおけるAI活用支援を行っております。</p>
<p>社内でAIエージェントの活用が進む中、ある部署から「AIエージェント開発に取り組みたいが、どこから始めていいかわからない」と相談をもらいました。座学だけでは手触り感が得られないので、実際に手を動かすワークショップ形式で開催することにしました。</p>
<p>弊社はAWSを主なクラウド基盤としているため、AWSが提供するAIエージェントの構築・運用基盤である <strong>Amazon Bedrock AgentCore</strong> と、エージェントのツール連携プロトコルである <strong>MCP（Model Context Protocol）</strong> を中心テーマに据えました。</p>
<h2>教材として使用した書籍</h2>
<p>ゼロから資料を作るよりも、体系的にまとまった書籍のハンズオンをベースにした方が、参加者が後から復習しやすいと考えました。今回は以下の2冊を使用しています。</p>
<ul>
<li><strong>『<a href="https://www.sbcr.jp/product/4815641238/">Amazon Bedrock AgentCore 実践入門 ── Strands Agentsで構築するAIエージェント</a>』</strong>（SBクリエイティブ）　※以下、AgentCore本</li>
<li><strong>『<a href="https://gihyo.jp/book/2026/978-4-297-15458-5">AWSではじめるMCP実践ガイド ── 基礎からAIエージェント構築まで徹底解説</a>』</strong>（技術評論社）　※以下、MCP本</li>
</ul>
<p>AgentCore本でエージェントフレームワークであるStrands AgentsやAgentCoreの各機能を学び、MCP本でMCPサーバーの自作とAgentCore Gatewayによるツール統合を学ぶ、という組み合わせです。</p>
<p>実は、どちらも私が共著者として執筆に携わった書籍です。手前味噌で恐縮なのですが、中身を隅々まで把握できている分、参加者がハンズオンで詰まったときにも補足しやすく、教材として選びました。</p>
<h2>開発環境</h2>
<p>今回は環境を揃えるため、<strong>GitHub Codespaces</strong> 上に開発環境を用意しました。書籍の手順をベースに、以下の工夫で環境構築にかかる時間を短縮しています。</p>
<ul>
<li>ツール管理は <strong>mise</strong> に統一し、<code>mise use aws-cli node uv claude</code> でAWS CLI・Node.js・uv・Claude Codeを一括導入</li>
<li>AWSへは <code>aws configure sso</code> でSSOログイン</li>
<li>コーディングのお供として <strong>Claude Code</strong> をセットアップ</li>
</ul>
<p>サンプルコードは書籍著者が公開しているGitHubリポジトリを <code>git clone</code> して参照できるようにし、すべてのコードを手打ちしなくていいようにしました。</p>
<h2>ワークショップの構成</h2>
<p>1日のワークショップとして、午前・午後に分けて以下の流れで進めました。</p>
<h3>午前の部（1.5時間）・・・Strands Agentsに触れる</h3>
<table>
<thead>
<tr>
<th>#</th>
<th>タイトル</th>
<th>書籍・該当箇所</th>
<th>概要</th>
</tr>
</thead>
<tbody><tr>
<td>1</td>
<td>Strands Agents入門</td>
<td>AgentCore本 3.4節</td>
<td>ツール定義、エージェント作成、会話ループの実装など基本を体験</td>
</tr>
<tr>
<td>2</td>
<td>リサーチエージェントの構築</td>
<td>AgentCore本 4章</td>
<td>Webから情報収集・要約するエージェントを構築し、ツール連携の開発フローを掴む</td>
</tr>
<tr>
<td>任意</td>
<td>AgentCoreハーネス</td>
<td>AgentCore本 5.2節</td>
<td>時間に余裕がある人向けに、AgentCoreハーネスを体験</td>
</tr>
</tbody></table>
<h3>午後の部（3時間）・・・AgentCoreとMCPを実践する</h3>
<table>
<thead>
<tr>
<th>#</th>
<th>タイトル</th>
<th>書籍・該当箇所</th>
<th>概要</th>
</tr>
</thead>
<tbody><tr>
<td>3</td>
<td>AgentCoreランタイム入門</td>
<td>AgentCore本 5.3節</td>
<td><code>agentcore create</code> → <code>agentcore deploy</code> でエージェントをクラウドにデプロイ</td>
</tr>
<tr>
<td>4</td>
<td>アンビエントエージェントの構築</td>
<td>AgentCore本 15章</td>
<td>S3への領収書アップロードをトリガーに、解析→Confluence記録→メール通知するイベント駆動型エージェントをCDKで構築</td>
</tr>
<tr>
<td>5</td>
<td>MCPサーバーの構築</td>
<td>MCP本 4.2節</td>
<td>自前のMCPサーバーとホストを実装</td>
</tr>
<tr>
<td>6</td>
<td>AgentCore Gateway</td>
<td>MCP本 6.2節</td>
<td>MCPサーバーをAgentCore Gatewayに登録し、認証・認可を統合</td>
</tr>
</tbody></table>
<h2>社内実施にあたって変更が必要だったポイント</h2>
<p>書籍のハンズオンをそのまま社内で実施するにあたり、いくつか環境差異への対応が必要でした。</p>
<p>:::message
<strong>メールアドレスのエイリアス</strong>
15章のアンビエントエージェントでは、サンプルデータ内の複数ユーザーのメールアドレスにそれぞれ通知を送る設計になっています。しかし社内のメール環境ではエイリアスが使えなかったため、<code>data/users.json</code> のメールアドレスをすべて自分のアドレスに統一しました。その結果、同じアドレスでSNSサブスクリプションが重複してしまうため、<code>chapter15/cdk/lib/expense-agent-stack.ts</code> で重複を排除するよう修正しました。</p>
<pre><code class="language-diff:expense-agent-stack.ts">+ const uniqueEmails = [...new Set(emailAddresses)];
- emailAddresses.forEach((email, i) =&gt; {
+ uniqueEmails.forEach((email, i) =&gt; {
    // 各アドレスごとに SNS サブスクリプションを作成
  });
</code></pre>
<p>:::</p>
<p>:::message
<strong>Googleカレンダー連携が使えない環境</strong>
13章のフルスタックエージェント構築ハンズオンはGoogleカレンダー連携（Google認証）を前提としているため、社内環境では実施が難しく割愛しました。興味がある方には自宅での実施を案内しています。
:::</p>
<p>:::message
<strong>AWSアカウントの共有</strong>
複数人で1つのAWS環境を使ったため、リソース名が他の人と重複・混同しないよう、各自の名前を付与するルールにしました。特にS3バケット名はアカウント内で一意である必要があり、そのままだと衝突してしまいます。CDKスタックにハードコードされたバケット名（<code>expense-agent-${account}</code>）に自分の名前を付けて回避しました。AgentCoreランタイムも、<code>agentcore create</code> で付ける名前を <code>handsonmorita</code> のように各自で区別できるものにしています。
:::</p>
<p>:::message alert
<strong>リージョンの差異</strong>
AgentCore本とMCP本で、使用リージョンが異なっているため、単一リージョンで実施するには読み替えが必要でした。GitHubで公開されているサンプルソースを利用して進めていたのですが、どこを修正すればよいかが見落としやすいポイントでした。
:::</p>
<h2>参加者からもらった質問</h2>
<p>ワークショップ中、参加者からいくつか印象的な質問がありました。</p>
<p><strong>Q. ツールの定義はPythonでもできるのか？</strong></p>
<p>Strands Agentsのツール定義はPythonのデコレータ<code>@tool</code>で行えます。関数のdocstringがそのままツールの説明文（description）としてLLMに渡されるため、Pythonで完結します。MCPサーバーとして公開する場合もPython SDKが利用可能です。</p>
<p><strong>Q. Swarmエージェントはどうやってタスクを振り分けているのか？</strong></p>
<p>マルチエージェント構成（Swarm）では、オーケストレーターとなるエージェントがLLMの判断に基づいて、各サブエージェントにタスクをルーティングします。各エージェントのnameやdescriptionに基づき、他のエージェントの役割を把握したうえで、作業を委譲するエージェントを選択します。</p>
<p><strong>Q. マルチエージェントにするか、シングルエージェントにするか、どのように決めるのが良いか？</strong></p>
<p>個人的な感覚としては、最初から厳密に切り分けようとしない方がうまくいきます。シングルエージェントとして作り始めて、複雑なタスクをうまく処理できなくなったり、コンテキストを分けた方が動きが安定すると感じた時点で、サブエージェントへの分割を考える、というのが実際の進め方に近いです。</p>
<p><strong>Q. エージェントで使用するモデルはどのような基準で選んでいるのか？</strong></p>
<p>コストを最初から意識しすぎないことが大事だと思っています。Sonnetをベースにまず作ってみて、判断の精度が足りない部分はOpusに切り替え、単純作業の部分だけHaikuでコストを下げる、という順番です。先にHaikuでコストを抑えようとすると、実現できる機能のレベルが下がってしまうので、まずは「エージェントとして実現できるか」を確認してから、コスト最適化に移る方がスムーズに進みます。</p>
<h2>参加者の声</h2>
<p>ワークショップの締めに参加者で「振り返り会」を行い、そこで出た声の中から印象的だったものをいくつか紹介します。</p>
<p>ある参加者は、「エージェントの動きが、これまでふんわりとマジックのように感じていたのに、こういう仕組みで動いていたのかと腹落ちした」と話してくれました。難しさの本質はプロンプトの作り込みにある、という気づきを得られたようです。</p>
<p>別の参加者は、ハーネスの手軽さに驚いたそうです。テンプレートに「あなたはプロ野球に詳しい人です」のような一行を書くだけでエージェントが動いてしまうのを見て、拍子抜けするほど単純だったと話していました。</p>
<p>MCPサーバーの自作に取り組んだ参加者は、午後の中でも特に難しかったと振り返っていました。それでも自分の手で実装したことで、普段使っているMCPの裏側の動きまで想像できるようになった、という言葉が印象的でした。</p>
<p>これまで固定パイプライン的な実装（情報を取得し、LLMに渡し、整形して出力する）に慣れていたという参加者は、エージェントが入力に応じて処理のルートを動的に決めていく発想自体が新鮮だったと語っていました。同じ入力でも出力のパスが事前に決まっていない、というところに面白さを感じたそうです。</p>
<h2>ワークショップを終えて</h2>
<p>1日にかなりの内容を詰め込んだこともあり、進み具合には個人差が出ました。午前の任意項目だったAgentCoreハーネス（5.2節）まで到達できた方もいれば、そこまで手が回らなかった方もいます。午後はそれぞれの興味に合わせて、アンビエントエージェントに取り組むグループとMCPサーバー構築に取り組むグループに分かれて進めてもらいました。</p>
<p>今回のワークショップを通して、書籍のハンズオンをベースにしたことで準備の負担を抑えつつ、実践的な内容を届けられたのは良かったです。本記事が、これからAIエージェント開発に取り組む方や、同様のワークショップを企画する方の参考になれば幸いです。最後までお読みいただき、ありがとうございました。</p>
]]></content:encoded>
            <enclosure url="https://blog.kinto-technologies.com/assets/blog/authors/kazuaki.morita/2026-07-07/cover.jpg" length="0" type="image/jpg"/>
        </item>
        <item>
            <title><![CDATA[個人の発見を、組織の知恵に ― 生成AI活用を、"探索"から "組織の仕組み"へ]]></title>
            <link>https://blog.kinto-technologies.com/posts/2026-06-22-individual-to-org-knowledge/</link>
            <guid>https://blog.kinto-technologies.com/posts/2026-06-22-individual-to-org-knowledge/</guid>
            <pubDate>Fri, 03 Jul 2026 10:00:00 GMT</pubDate>
            <description><![CDATA[AIで個人の仕事は変わった。では、組織は?——個人の発見が組織の成果に化けない「溝」を、探索と実装の両輪で越える。KTCの実践知をまとめました]]></description>
            <content:encoded><![CDATA[<p>こんにちは!
KINTOテクノロジーズ(以下、KTC)のAIファーストグループで、生成AIの活用推進を担当している和田です。</p>
<p>先日、JDLA(日本ディープラーニング協会)の資格合格者コミュニティ「CDLE」の業種別勉強会にお招きいただき、「個人の発見を、組織の知恵に」というテーマで登壇してきました。本記事は、その内容を再構成したものです。</p>
<p><a href="https://jdla.connpass.com/event/393970/">https://jdla.connpass.com/event/393970/</a></p>
<h2>1. はじめに</h2>
<p>KTCはトヨタ自動車のグループ会社で、クルマのサブスク「KINTO」をテックの力で支える内製開発の会社です。
2023年の春、GPT-4とAPI版が出てきたタイミングで内製の生成AIチャットを立ち上げて以来、3年以上にわたって生成AIの活用推進を続けてきました。最近ではKTC/KINTOで培った技術力を、トヨタグループの各社へとアドバイジングや開発支援を通じた提供もしています。</p>
<p>その立場から国内の状況を眺めると、対照的な数字があります。生成AIを「導入済み」と回答した国内企業は57.7%^[<a href="https://www.nri.com/jp/news/newsrelease/20251125_1.html">NRI「IT活用実態調査(2025年)」</a>]。導入の壁は、もうほとんど越えられています。一方で、AIが利益(EBIT)に5%以上効いていて、かつ大きな価値を生んでいると答えられる企業は6%^[<a href="https://www.mckinsey.com/capabilities/quantumblack/our-insights/the-state-of-ai">McKinsey &quot;The State of AI in 2025&quot;</a>]。導入はしたが、成果を出していると言い切れる会社はまだ一握りです。</p>
<p>おそらくこの記事を読んでいるような、新しい技術への感度が高い方は、すでに仕事が大きく変わっているはずです。メールの下書き、議事録の要約、コーディング支援。少なくとも、これらを全てカタカタ手で打っている人は、かなり減っているのではないでしょうか。しかし問題はその先です。あなたの「周りの人」はどうでしょうか。個人としては価値が出ている。でも、組織としてはどうでしょう。今回のテーマは、個人の成果と組織の成果の間にある、この溝についてです。
<img src="/assets/blog/authors/s.wada/20260622/%E3%82%B9%E3%83%A9%E3%82%A4%E3%83%8917.webp" alt="個人の発見を、組織の知恵に"></p>
<h2>2. キャズムのどこに手を打つか ― 今日は「B」の話</h2>
<p>本題に入る前に、組織へ新しいものを広げるときのイメージを共有させてください。何度も見たであろう、キャズム理論^[ジェフリー・ムーアが提唱した、新技術の普及プロセスを説明する理論。利用者をイノベーター/アーリーアダプター/アーリーマジョリティなどの層に分け、層の間にある溝(キャズム)を越えることの難しさを論じたものです。]の図です。</p>
<p><img src="/assets/blog/authors/s.wada/20260622/%E3%82%B9%E3%83%A9%E3%82%A4%E3%83%8919.webp" alt="新技術の普及とキャズム。利用者をイノベーター/アーリーアダプター/アーリーマジョリティ/レイトマジョリティ/ラガードの5層に分け、A・B・Cの3つの施策を矢印で重ねた図">
<em>新しい技術や文化を組織へ広げるときの手法。A・B・Cのどこに手を打つか</em></p>
<p>これは生成AIの話だから持ち出した図ではありません。DXのときも、RPAのときも、新しい技術や文化を大きな組織に入れる場面では、いつもこの概念を使ってきました。</p>
<p>図にはA・B・Cという3つの矢印を描いています。それぞれが別の打ち手です。みなさんの組織は、いまどの矢印に手を打っているでしょうか。そしてご自身はどの層にいて、どの矢印ならコミットできそうでしょうか。そんなことを考えながら見てもらえればと思います。</p>
<ul>
<li>A:イノベーターに自由を渡す。 新しいものは、放っておいても勝手に調べ、勝手に始め、勝手に実験してしまう人たちがいます。彼らにできる限り自由な環境を渡す。ただ自由なだけでなく、ガードレールを敷いて「ここでなら安心して遊んでいい」という空間にするのがAです。</li>
<li>B:キャズムに橋をかける。 イノベーターやアーリーアダプターが見つけた価値に、アーリーマジョリティ以降の人たちが追従できるよう、崖になっているキャズムへ橋をかける取り組みです。</li>
<li>C:後ろ向きな層を動かす。 配ってもなかなか触ってくれない、興味を持ってもらいにくい層に、どう使ってもらうか。ここに悩んでいる会社さんは、きっと多いはずです。</li>
</ul>
<p>今日お話しするのは、このうちBが中心です。Bをやるには、その手前でAも回っている必要があるのですが、本記事では「見つかった価値を、キャズムの向こう側へどう渡すか」に軸足を置きます。</p>
<h2>3. 価値創出の両輪 ― 探索と実装</h2>
<p>組織で価値を出すには、2つの循環が要る、と私は考えています。</p>
<p>1つは探索。イノベーターやアーリーアダプターにあたる人たちが自由に価値を探せる環境を用意し、「この使い方は効く」という発見を生んでもらうフェーズです。もう1つは実装。見つかった0→1の発見を、組織に固定して10にも100にもするフェーズです。藪まみれの中をしらみつぶしに歩いてゴールを見つけるのが探索だとすれば、見つかった道を舗装して誰でも歩けるようにするのが実装です。</p>
<p>探索だけでは、個人の発見で止まります。IRレポートに載るようなインパクトは、個人技からは出ません。逆に、発見のない組織でいきなり実装(仕組み化)から入ると、舗装すべき道がどこにあるのか分からないまま工事が始まります。これらは両輪であってどちらが欠けても前進することはできません。
<img src="/assets/blog/authors/s.wada/20260622/%E3%82%B9%E3%83%A9%E3%82%A4%E3%83%8921.webp" alt="価値創出を支える両輪"></p>
<p>ここからは、KTCがこの両輪をどう回しているか、探索→実装の順でお話しします。</p>
<h2>4. 探索:トークンマキシング ― 自転車の乗り方は、本では学べない</h2>
<p>探索の打ち手の一つとして「トークンマキシング(Tokenmaxxing)」^[あるものを極限まで盛るというネットスラング &quot;-maxxing&quot; を、トークン消費にくっつけた言葉です。]を紹介します。社内のAIのトークン消費を、とにかく最大化する。価値創出はいったん脇に置いて、まず使う量を増やす施策群のことです。</p>
<p>なぜ価値創出にこだわると言っておきながら、消費量に注目するのでしょう。生成AIの正しい使い方は、机上で学べないからです。私はよく自転車の乗り方に例えるのですが、自転車の乗り方を本で学んだ人は、おそらくいません。補助輪をつけて、サポーターをつけて、河原で何度も転んで、身体で覚えたはずです。「AIにこう頼むとうまくいく」「これはAIには苦手だ」という感覚も同じで、試行錯誤からしか生まれません。だから、まずたくさん漕いで、たくさん転ぶことで、AIと効率よく協業する感覚が磨かれます。</p>
<p>トークンマキシングを構成する施策は、「消費を増やす施策」と「消費量を観測する施策」で構成されます。
<img src="/assets/blog/authors/s.wada/20260622/%E3%82%B9%E3%83%A9%E3%82%A4%E3%83%8925.webp" alt="トークンマキシングを説明する図"></p>
<p>消費を増やす施策の例としては「手作業コーディング禁止」があります。一定期間、人手でのコーディングを禁止して実装はAIエージェントに任せ、人間は指示と検証に集中する、というものです。コーディング界隈で広まった施策ですが、「手作業での資料作成禁止」のように事務系へのアレンジも利きます。
私自身は資料作成へのこだわりが強く、今でもつい手作業で熱中してしまう時があるのですが、最初の1割は人間が作り、そこから7〜8割まではAIに持っていかせて、最後にまた、人間のこだわりを入れるようにしています。何度も失敗しながら最近ようやくちょうど良いAIとの協業感覚を掴めてきています。</p>
<p>KINTOテクノロジーズで実施した手作業コーディングを禁止する施策「Vibe Coding Week」については、Findyさんによるインタビューブログでも取り上げていただきました。</p>
<p><a href="https://jp.findy-team.io/blog/ai-casestudy/kintotechnologies_vibecodingweek/">https://jp.findy-team.io/blog/ai-casestudy/kintotechnologies_vibecodingweek/</a></p>
<p>もう1つの要素が観測です。増やしっぱなしではコストが爆発するので、誰が・どれだけ使っているかを可視化する。この文脈で有名になったのがMetaの「Claudeonomics」で、8.5万人超の従業員がトークン消費量でランク付けされ、上位250名にはRPG風の称号が与えられていたそうです^[<a href="https://fortune.com/2026/04/09/meta-killed-employee-ai-token-dashboard/">Fortune「A Meta employee created a dashboard so coworkers can compete to be the company&#39;s No. 1 AI token user」(2026/04/09)</a>]。KTCでも、Claude Codeのメトリクスを各ユーザーから収集し、個人と組織それぞれの使い方を分析する仕組みを動かしています。ツールは配ったけれどその後を見ていない、という組織は、まずここから始めるのを勧めます。</p>
<p><img src="/assets/blog/authors/s.wada/20260622/%E3%82%B9%E3%83%A9%E3%82%A4%E3%83%8928.webp" alt="KTCのClaude Codeメトリクス・ダッシュボード。アクティブユーザー数や総トークン数、利用ランキングを可視化(ダミーデータ)">
<em>KTCで運用しているClaude Codeメトリクスのダッシュボード(数値はダミーデータ)</em></p>
<h2>5. ただし、トークン消費はハック可能</h2>
<p>・・・ただしトークン消費量は、あくまで間接指標です。</p>
<p>たくさん使った≠価値が出た。実際、Metaの番付では、順位のためにAIを空回しして消費量を水増しする従業員が現れたという情報もあります。そりゃそうですよね。指標は必ずハックされます。入力量で成果を測るのは、印刷したページ数で文章の質を測るようなものなので、報酬や人事評価に直接ひもづけるのは慎重であるべきです。トークンマキシングは、短期的に組織のモメンタムを作る旗印としては効きますが、ずっと続けるものではありません。習熟が進んで消費が落ち着いてくるところまでがセットです。</p>
<p><img src="/assets/blog/authors/s.wada/20260622/%E3%82%B9%E3%83%A9%E3%82%A4%E3%83%8929.webp" alt="トークン消費量はハック可能。間接指標にすぎないことを3つの観点で示す図">
<em>消費量はあくまで間接指標。指標は必ずハックされる</em></p>
<p>そしてもう1つ、この打ち手には賞味期限があります。これまでのコーディングエージェントの多くは月額定額、いわば携帯のパケ放題のような契約でした。「とにかく使え」が安心して言えたのは、この建て付けがあったからです。ところが課金体系は従量制へ動いています。<a href="https://github.blog/news-insights/company-news/github-copilot-is-moving-to-usage-based-billing/">GitHub Copilotは2026年6月1日から使用量ベースの課金へ移行します</a>し、他のエージェントも続々と後を追っています。<a href="https://techcrunch.com/2026/06/02/uber-caps-employee-ai-spending-after-blowing-through-budget-in-four-months/">Uberが2026年のAI予算をわずか4か月で使い果たし、コーディングエージェントの利用に従業員一人当たりの月額上限を設けた</a>という報道も出始めました。</p>
<p>従量課金の世界で大事になるのは、トークンマネジメントや最適化、つまり妥当なコストで成果を増やす考え方です。難しいのは、マキシングを経験しないまま従量課金に入ってしまった組織で、転んだことのないまま管理から始めることになります。もしいま手元に使い放題のプランがあるなら、それは最後のモラトリアムかもしれません。プランが生きているうちに、探索をやり切ることをお勧めします。</p>
<p><img src="/assets/blog/authors/s.wada/20260622/%E3%82%B9%E3%83%A9%E3%82%A4%E3%83%8930.webp" alt="課金体系の変化。定額制(パケ放題)から従量課金へ移行する流れを示すBefore/After図">
<em>定額制(パケ放題)から従量課金へ。「とにかく使え」が言えた時代は終わりつつある</em></p>
<p>ここまでが探索の話。次は、見つけた発見をどう組織に固定するかです。</p>
<h2>6. 実装:発見をAgent Skillに固める ― 発見した本人に、文書化まで背負わせない</h2>
<p>どの組織にも、キャズムでいうイノベーターやアーリーアダプターにあたる人たちがいます。新しいものを勝手に調べ、勝手に試し、「この頼み方ならうまくいく」という良い使い方を見つけてくる人たちです。問題は、その発見が本人の中にしかないことです。</p>
<p>そこでKTCで今増えているのが、<a href="https://platform.claude.com/docs/en/agents-and-tools/agent-skills/overview">Agent Skill</a>です。Agent Skillとは、AIエージェントに特定タスクの「やり方」を教える再利用可能な手順書のことで、いつ何をするかを書いた指示書(SKILL.md)、手順とOK/NGの線引き、テンプレートやスクリプトといった参照ファイルを1つのパッケージにまとめたものです。属人的だったカンコツを取り出して、誰でも再現できる形に固める。暗黙知やワザを、Skillという形で全員に配ることができます。</p>
<p><img src="/assets/blog/authors/s.wada/20260622/%E3%82%B9%E3%83%A9%E3%82%A4%E3%83%8935.webp" alt="Agent Skillの3要素。指示書(SKILL.md)、手順・判断基準、参照ファイルで構成されることを示す図">
<em>Agent Skillは指示書・手順/判断基準・参照ファイルの3点セット</em></p>
<p>KTCの例でいうと、トヨタグループには「物と情報の流れ図(物情)」という業務の可視化手法があるのですが、このドラフトをAIに作らせるSkillを固めて、社内に配布しています。先行する人たちの発見を、お湯を注げば誰でも食べられるインスタント食品に加工して配る、というイメージです。</p>
<p>一方でこうした探索の担い手は、新しい使い方を探すこと自体は好きでも、それを手順書に書き起こすことには関心が薄かったりします。であれば、横串の推進組織が本人のところへ出向いて、「文書化はうちらが代わりにやります」と引き受けてしまうのはどうでしょうか。発見した本人に、文書化の手間まで負わせる必要はないかもしれません。</p>
<h2>7. 運用と文化 ― 「手でプロンプトを打たない」という逆説</h2>
<p>Skillは作っておしまいではなく、運用が必要です。誰でもSkillを探して使える場所(Plugin Market)を作る。命名ルールを決める・・・検索できないSkillは、存在しないのと同じだからです。ブランチ名や関数名に払っている気遣いを思い出してください。あれと同じ気遣いがSkillにも必要です。ただ、Skillの命名規則のベストプラクティスはまだ世の中に整備されていないので、会社ごとに独自で決めてしまうのが有効だと思います。それから、定期的なメンテナンス。数か月で前提が変わる領域なので、古いSkillは放置すれば負債になります。</p>
<p><img src="/assets/blog/authors/s.wada/20260622/%E3%82%B9%E3%83%A9%E3%82%A4%E3%83%8938.webp" alt="持続可能なSkill運用の4つの仕組み。Plugin Market運営、命名ルール、定期メンテナンス、Skill化対象の発掘">
<em>Skill運用を支える4つの仕組み(Plugin Market・命名ルール・定期メンテ・対象発掘)</em></p>
<p>そして、そのメンテナンスをどう回すか。ここが地味に大変なところなのですが、KTCではSkillの保守そのものをSkillにしてしまうことを試しています。いわば、Skillを点検・整備するためのSkill群です^[公開されているmizchiさんの「<a href="https://github.com/mizchi/skills/tree/main/tools/waxa">waxa</a>」を参考にしています。]。役割を分けた、4つのモードがあります。</p>
<ul>
<li>検証する:書いたばかりのSkillを、まっさらな別セッションに白紙で読ませ、「ここが伝わらない」という曖昧さや暗黙知を炙り出す。</li>
<li>棚卸しする:Skill群ぜんぶを複数の観点で健康診断し、どれから手を入れるべきかのリストを作る。迷ったら、まずここから。</li>
<li>命名を整える:名前とdescriptionだけを命名規則に合わせて直す。何をするSkillか一目で理解でき、検索で見つかる状態を保つための整備になる。</li>
<li>本文を直す:古いSkill名やモデル名、URLといった陳腐化した参照を、機械的に一括置換する。</li>
</ul>
<p>コツは、各修正のポリシーきっちり分けて、1つのセッションに何もかもやらせないこと。さきほど「検索できないSkillは存在しないのと同じ」と書きましたが、その状態を保つ作業自体を、人間の根性ではなくSkillに肩代わりさせるわけです。運用とは、こういう地味な仕組みの積み重ねなのだと思います。</p>
<p><img src="/assets/blog/authors/s.wada/20260622/%E3%82%B9%E3%83%A9%E3%82%A4%E3%83%8939.webp" alt="Skillガバナンス。Skillの保守を担う4つのSkill(検証する/棚卸しする/命名を整える/本文を直す)とその入出力を示す図">
<em>Skillの保守そのものをSkillにする。役割を分けた4モードで運用を回す(参考: mizchiさんのwaxa)</em></p>
<p>文化の面では、事例共有会や勉強会といった地道な取り組みを続けてください。「こんな効くSkill作ったぜ」を見せ合う場は、評価制度ではなく、つい誰かに見せたくなる気持ちで回り始めます。地味ですが、文化醸成はこういう積み重ねでしか進まないと思っています。</p>
<p>最後に1つ、逆説的な話を。個人の仕事を組織の仕事にする上で、プロンプトエンジニアリングのスキルが邪魔をすることがあります。個人が勘とコツでプロンプトを丁寧に調整し、エージェントをいい感じに動かすのは、良いようでいて横展開が非常にしにくい。プロンプト頼みの業務は、それ自体が属人化です。なのでKTCでは最近、組織の仕事にする場合は手でプロンプトを打つのをできるだけやめて、スラッシュコマンドやSkillの呼び出しだけで完結させることを推奨しています。上手に打てる人ほど、打たない。妙な話ですが、組織化とはそういうことだと考えています。</p>
<p>なお、ここまでの打ち手は、KTCがクラウド・AI領域で新しいことに踏み込みやすい立場にある、という前提と切り離せません。新しいことを試し、うまくいったものを少しずつ周囲へ広げていく——そんな意識で取り組んでいるので、キャズムでいう上位層に意識的に時間を寄せています。どの層にどれだけ時間をかけるかのポートフォリオは、自社の立ち位置や方針に従って決め、経営層と握っておくのが筋だと思います。</p>
<h2>8. まとめ ― 個人の発見を、組織の知恵に</h2>
<p>「個人の発見を、組織の知恵に」今回お伝えしたかったのは、結局この一行です。探索のフェーズでは、トークンマキシングでたくさん試して、転ぶことを恐れない。正しい使い方は、試行錯誤からしか生まれないからです。実装のフェーズでは、発見をAgent Skillのような形に固め、誰でも再現できるようにして配る。そして、仕組みと文化で回し続ける。</p>
<p><img src="/assets/blog/authors/s.wada/20260622/%E3%82%B9%E3%83%A9%E3%82%A4%E3%83%8942.webp" alt="まとめスライド。探索・実装・仕組み/文化の3点で全体を振り返る図">
<em>探索→実装→仕組み・文化。個人の発見を、組織の知恵に</em></p>
<p>G検定やE資格を持っているような方は、すでに一本のスペシャリティがある状態です。AIは自力にレバレッジをかける道具なので、自力が10の人と100の人では、掛けた後の差がまるで違います。ご自身のドメイン知識と、資格を通じて学んだ知識と、生成AIやAIエージェントを掛け算して、まずはたくさん転ぶところから。そして、転んで見つけた発見を、ぜひ組織に配ってください。</p>
<p>ここまで読んでいただき、ありがとうございました!
あなたや周囲の人の発見が、組織の知恵になっていくことを願っています。</p>
]]></content:encoded>
            <enclosure url="https://blog.kinto-technologies.com/assets/blog/authors/s.wada/20260622/cover.webp" length="0" type="image/webp"/>
        </item>
        <item>
            <title><![CDATA[「音」だけで遊んだら、同僚と夢中になった ― オーディオゲームセンターで考えた、アクセシビリティの入り口]]></title>
            <link>https://blog.kinto-technologies.com/posts/2026-07-01-audio-game-center/</link>
            <guid>https://blog.kinto-technologies.com/posts/2026-07-01-audio-game-center/</guid>
            <pubDate>Wed, 01 Jul 2026 10:00:00 GMT</pubDate>
            <description><![CDATA[映像ではなく「音」だけで遊ぶ展示「オーディオゲームセンター」を名古屋で訪ね、同僚二人と夢中になった朝の話。アクセシビリティの入り口は、難しい理屈ではなく「面白い」から始まっていい——そんなことを考えました。]]></description>
            <content:encoded><![CDATA[<hr>
<p>こんにちは。Engineering Officeのアクセシビリティアドボケート、辻勝利です。</p>
<p>6月のある朝、私は名古屋のあるビルの一室で、植木鉢を両手で抱え、聞こえてくる水の音を頼りに歩いていました。隣では竹中さんが猫の鳴き声を追いかけ、浜谷さんは焼き網の上で肉が焼ける音に、息を詰めて耳をすませています。三人が手にしていたのは、どれも映像のない、「音」だけで遊ぶゲームでした。</p>
<p>傍から見たら、なかなか不思議な大人三人組だったと思います。でもその場にいた私たちは、ただただ夢中でした。目で何かを確かめるのではなく、耳をすませて、音だけを頼りに遊ぶ。その新鮮さに、すっかり夢中になっていたのです。</p>
<p>私たちが訪れていたのは、「オーディオゲームセンター」という展示でした。映像ではなく「音」からゲームをつくり、音だけで遊ぶ——そんなユニークな作品が集まった場所です。名古屋で開かれていることを知り、出張のついでに同僚を誘って足を運んでみました。</p>
<p><img src="/assets/blog/authors/debugon/audio-game-center-mizu-hanachan.jpg" alt="植木鉢のゲーム。「はなちゃんを救え」の文字と枯れた植木鉢がモニターに映し出されている。花のオブジェクトが入った植木鉢とイヤホンが机の上に置かれている。">
<em>制限時間内に、音だけを頼りに花へ水をあげる「はなちゃんを救え」。会場で最初に夢中になった作品です。</em></p>
<p>この記事では、その朝のことを書いてみたいと思います。</p>
<hr>
<h2>なぜ、この三人で行こうと思ったのか</h2>
<p>少しだけ、前日の話をさせてください。私と竹中さんは名古屋で仕事があり、前日から出張していました。</p>
<p>せっかく名古屋まで足を運ぶのだから、この出張をアクセシビリティの活動にもつなげられないか——そう考えていたときに、ちょうどオーディオゲームセンターの展示が名古屋で開かれていることを知りました。アクセシビリティのアドボケートとして、これはぜひこの耳で確かめておきたい展示です。そう考えた私は、竹中さんに加えて、名古屋オフィスで働く浜谷さんにも声をかけました。浜谷さんは、ドライバーに向けたサウンド設計を仕事にされている方です。「音」を扱うプロと一緒に、音のゲームを体験できる。これ以上ない組み合わせだと思いました。</p>
<p>正直に打ち明けると、この「お誘い」には、私なりの小さな狙いもありました。</p>
<p>アクセシビリティのアドボケートとして、私が会社のなかで担いたい役割は、製品やサービスを使いやすくすることだけではありません。その手前にある、「アクセシビリティの文化」そのものを社内に少しずつ根づかせていくことだと考えています。</p>
<p>そのためには、ガイドラインやチェックリストと向き合う時間だけでなく、まだ見たこと・触れたことのない領域のアクセシビリティに、同僚たちが自然と出会えるきっかけをつくりたい。そんな思いが、以前からずっとありました。今回の展示は、そのきっかけにぴったりだと感じたのです。</p>
<hr>
<h2>「音」を共通言語にして遊んだ、あの日の記憶</h2>
<p>この場所に同僚を連れて行きたかった理由は、もうひとつあります。それは、私自身の忘れられない原体験です。</p>
<p>ずいぶん前のことになりますが、私はかつて東京で、「オーディオゲームをつくるハッカソン」に参加したことがありました。視覚障害のある人も、目の見える人も、一緒になって音だけのゲームをつくり、その場で遊ぶ。そんなイベントでした。</p>
<p>そこで私が感じたのは、なんとも言えない心地よさでした。その場には、難しい「アクセシビリティ」の話は、ほとんど出てこなかったのです。「視覚障害者のために」とか「配慮しなければ」といった肩に力の入った言葉ではなく、ただ純粋に、「音を中心にしたゲームって面白いよね」という一点で人が集まっていました。</p>
<p>「音」という共通言語の前では、目が見えるかどうかは、その場の主役ではありませんでした。みんなが同じように耳をすませ、同じように戸惑い、同じように笑う。あの対等でフラットな空気が、私にはとても新鮮で、心地よかったのです。</p>
<p>この感覚を、ぜひ同僚にも味わってほしい。難しい理屈ではなく、まず「面白い」から入ってもらえる体験として——そう思ったことが、今回のお誘いの根っこにありました。</p>
<hr>
<h2>当日、私たちを夢中にさせた作品たち</h2>
<p>さて、当日の会場には、いくつもの作品が展示されていました。どれも、思わず「お、これは!」と声が出てしまうような、ユニークなものばかりです。</p>
<p>1つめは、<strong>植木鉢を抱えて、音を頼りに水を探すゲーム</strong>。鉢を持って歩き回り、聞こえてくる音を手がかりに、水のありかを探し当てます。制限時間内に花へ十分なお水をあげられるかは、私たちの耳と方向感覚にかかっています。冒頭で私が抱えていたのが、この鉢でした。</p>
<p>2つめは、<strong>音だけで進行する人狼ゲーム</strong>。誰が人狼なのか、表情ではなく声と音だけで推理していく緊張感がありました。それぞれのプレーヤーには、小さなスピーカーを通して別々の振動が伝えられ、どんな振動が届いたのかを話し合いながら、誰が人狼なのかを推理していきます。自分に届いた振動のリズムを、そのまま声に出してしまわないよう気をつけながら、慎重に人狼を探しました。</p>
<p><img src="/assets/blog/authors/debugon/audio-game-center-jinro-soundwolf.jpg" alt="動物鳴き声クイズとサウンドウルフのゲーム。壁にゲームの種類と遊び方が掲示され、机の上にスピーカーとボタンが置かれている。">
<em>声と音だけで人狼を推理する「サウンドウルフ」と、鳴き声から動物を当てるクイズ。プレーヤーには小さなスピーカーから別々の振動が届きます。</em></p>
<p>3つめは、<strong>猫の鳴き声を頼りに、迷路の中で猫を探して捕まえるゲーム</strong>。「ニャー」という声を追いかけて夢中になっている竹中さんの様子が、その声の弾み方から伝わってきて、なんとも微笑ましく感じました。見つけたと思った猫が、ふっと別の方向へ鳴きながら逃げていく。その手応えのなさに、私は昔飼っていたやんちゃな犬のことを思い出しました。</p>
<p><img src="/assets/blog/authors/debugon/audio-game-center-neko-maze-taiken.jpg" alt="猫探しゲームを体験する筆者の様子。アルミのフレームの中に入り、枠を握って、スマホがついたイヤホンの音に耳をすましている。">
<em>「Echolocation Maze ― 迷路でねこ探し」。アルミのフレームの中に入り、耳をすませて猫を探しているところ。目ではなく、音に集中する時間です。</em></p>
<p>4つめは、<strong>音を頼りに、ちょうどよい焼き加減を狙って焼肉を焼くゲーム</strong>。お肉が焼ける音の変化だけで、食べごろを見極める。サウンド設計を仕事にしている浜谷さんが、ここでいちばん真剣になっているのが、その張りつめた集中ぶりから伝わってきました。三人で同時にお肉を取り出すとボーナス点がもらえることもあって、それぞれが真剣にタイミングを見計らいながらゲームを進めました。</p>
<p><img src="/assets/blog/authors/debugon/audio-game-center-yakiniku.jpg" alt="焼肉のゲーム。焼肉屋の網の写真とゲームの説明、スピーカーとボタンが机の上に置かれている。">
<em>お肉が焼ける音の変化だけで、食べごろを見極める焼肉ゲーム。サウンド設計が本職の浜谷さんが、いちばん真剣に聞き入っていました。</em></p>
<p>そしてもうひとつ、ゲームというより、<strong>動かすと振動に合わせて笑い出す提灯のおもちゃ</strong>もありました。手のなかで震えながら笑う提灯に、思わずこちらまで笑ってしまいました。子どもの頃に遊んだ「笑い袋」を思い出すような、ちょっと懐かしい作品です。</p>
<p>どの作品も、目で見て楽しむものではありません。耳をすませ、手で感じ、音の変化に身をゆだねて遊ぶ。気がつけば三人とも、すっかり童心に返って盛り上がっていました。</p>
<hr>
<h2>「面白い」が、いちばん最初にあっていい</h2>
<p>会場を出たあと、私はふと、あの東京のハッカソンで感じた心地よさが、そのままここにもあったことに気づきました。</p>
<p>この朝、私たちは一度も、肩肘張った「アクセシビリティ」の話をしませんでした。ただ、音のゲームが面白くて、三人で笑い合っていただけです。目が見える二人と、見えない私とが、まったく同じスタートラインで戸惑い、同じように夢中になれる。そういう体験を、言葉ではなく、身体で分かち合えたことが、私にはとても嬉しかったのです。</p>
<p>アクセシビリティというテーマは、ともすると「正しさ」や「やらなければいけないこと」として語られがちです。それももちろん大切なことです。でも、その入り口に、こんなふうに「ただ純粋に面白い」という体験があってもいいはずだと、あらためて思いました。難しい話の前に、まず一緒に楽しんでしまう。そこから自然と、「音だけでこんなに遊べるんだ」「目に頼らない世界にも、こんな豊かさがあるんだ」という気づきが生まれていく。</p>
<p>これからも私は、社内のいろんな人と、こういう「触れるきっかけ」を少しずつ増やしていきたいと思っています。難しい顔で身構える前に、まず一緒に耳をすませて、笑ってしまう。アクセシビリティの文化は、案外そういう楽しい時間の積み重ねから根づいていくのかもしれない——名古屋出張の締めくくりに、そんなことを思ったのでした。</p>
<hr>
<h2>もうひとつの出会い ― 鼓動を伝えるモビリティ「QUENELLE」</h2>
<p>会場には、オーディオゲームとは別に、もうひとつ強く印象に残った展示がありました。「QUENELLE（くねる）」という、小型EVのコンセプト作品です。</p>
<p>これは、乗る人の鼓動を読み取り、それを音や光、振動として映し出す乗り物でした。乗り物を「操作する道具」としてではなく、感覚でつながる相手のように感じさせてくれる——そんな試みです。私も実際にまたがらせてもらいました。</p>
<p><img src="/assets/blog/authors/debugon/audio-game-center-quenelle-taiken.jpg" alt="鼓動を伝えるモビリティにまたがった筆者と説明員の様子。乗り物の車体の左右には、白い大きな湾曲した筒が設置されている。">
<em>「QUENELLE」にまたがらせてもらいました。なお、同席されたスタッフの方など、ご本人の同意を確認できていない方のお顔は画像処理をしています。</em></p>
<p><img src="/assets/blog/authors/debugon/audio-game-center-quenelle-panel.jpg" alt="鼓動を伝えるモビリティの説明パネル。「QUENELLE 感覚つながる小型EV」と書かれている。">
<em>鼓動を音・光・振動で映し出す、小型EVのコンセプト作品。乗り物を「操作する道具」から「ともにある存在」へと近づけようとする試みです。</em></p>
<p>ドライバーに向けたサウンド設計を仕事にする浜谷さんが、この作品の前で何を感じていたのか。それは、次の感想に譲りたいと思います。</p>
<hr>
<h2>一緒に行った二人から</h2>
<p>最後に、同行してくれた二人に、当日の感想を一言ずつ書いてもらいました。</p>
<blockquote>
<p>現地に行くまでは「音のゲーム」というものがまったく想像できず、どちらかといえば、見た目には地味で質素な作品をイメージしていました。でも、実際にプレーしてみると、自分自身が夢中になって遊んでしまうほど面白くて驚きました。子どもから大人まで、幅広い世代の人たちが一緒に楽しめる——オーディオゲームには、そんな可能性があると感じました。（竹中）</p>
</blockquote>
<blockquote>
<p>車を運転中のドライバーは、とても不自由です。ずっと前を見ていないといけないし、好きに動くこともできない。ほとんど唯一の愉しみは「音」ですが、音楽を流すか、ラジオを聴くか、同乗者とのお喋りか。それって数十年前からほとんど何も変わっていない。「音を愉しむ」って、もっと自由で、色んな可能性があるんじゃないか?と、ずっと考えていました。一緒に体験したオーディオゲームセンターの作品は、自分の中にあった漠然とした仮説を、確信へと一歩近づけてくれました。（浜谷）</p>
</blockquote>
<hr>
<p>目を使わずに「音」だけで遊ぶ時間は、私にとって、アクセシビリティの新しい入り口を確かめ直す時間でもありました。もし機会があれば、ぜひ一度、耳だけを頼りに遊んでみてください。きっと、思っているよりずっと豊かな世界が広がっています。</p>
<h2>参考リンク</h2>
<ul>
<li>オーディオゲームセンター: <a href="https://artscape.jp/exhibitions/64694/">https://artscape.jp/exhibitions/64694/</a></li>
<li>オーディオゲームをつくるハッカソン（CCBT）: <a href="https://ccbt.rekibun.or.jp/events/audiogamecenter_ccbt_hackathon">https://ccbt.rekibun.or.jp/events/audiogamecenter_ccbt_hackathon</a></li>
</ul>
]]></content:encoded>
            <enclosure url="https://blog.kinto-technologies.com/assets/common/thumbnail_default_×2.png" length="0" type="image/png"/>
        </item>
    </channel>
</rss>