はじめに

こんにちは、はじめまして。
TechJapan合同会社の興野（きょうの）です。

この度、「学習型ラジアルメニュー検索支援システム」 の特許を出願しました。
(2024年11月10日出願　特願2025-189784)

本記事では、開発の背景から技術的なチャレンジ、そして特許戦略まで、エンジニア視点で詳しく解説します。

目次

解決したい課題
Dango searchとは何か
技術的なアプローチ
実装のポイント
先行技術との差別化
特許戦略
今後の展開

1. 解決したい課題

1.1 既存の検索UIが抱える問題

私たちは賃貸物件検索サイト、RooMii（ https://www.roomii.jp/ )
の運営もしているので、不動産検索の具体的な課題について考えていました。

従来のフォームUI:

┌─────────────────┐
│ エリア: [選択▼]  │
│ 価格帯: [選択▼]  │
│ 間取り: [選択▼]  │
│ 築年数: [選択▼]  │
│ 駅距離: [選択▼]  │
│     ⋮            │
│ (さらに10項目)    │
│ [検索]           │
└─────────────────┘

問題点:

スクロールが多い(平均20回以上)
全体像が把握できない
よく使う条件も毎回同じ位置
検索結果が出るまで件数不明

1.2 デジタル・インクルージョンの課題

高齢者:

文字が小さくて見えない
スクロールで迷子になる
チェックボックスが押しにくい

視覚障害者:

コントラストが低い
ボタンのサイズが不十分

上肢障害者:

画面端まで指が届かない
細かいタップ操作が困難

→ 70歳以上の70%がスマホ検索で挫折
（ぶっちゃけ、70歳以上でWebをりようして賃貸探す人は少ないです笑）

2. Dango searchとは何か

2.1 コンセプト

「誰もが迷わず使える検索UI」

文字入力を排除し、タップだけで複雑な検索を実現。

2.2 UIの特徴

        [条件A]
           ↑
[条件D] ← [検索] → [条件B]
           ↓
        [条件C]

ラジアルメニュー形式:

画面中心に検索ボタン
周囲に条件が放射状に配置
タップで階層を深掘り

学習機能:

ユーザーの選択履歴を分析
よく使う条件を上部に優先配置
使うほど速くなる

リアルタイムフィードバック:

条件選択のたびに件数表示
絞り込み過多/過少を即座に判断

Demo動画（ショート）

3. 技術的なアプローチ

3.1 アーキテクチャ概要

┌─────────────────┐
│  Frontend (Web)  │
│  - React/HTML5   │
│  - タッチイベント │
└─────────────────┘
         ↓
┌─────────────────┐
│  Backend (GCP)   │
│  - Firebase      │
│  - BigQuery      │
│  - Cloud Func    │
└─────────────────┘
         ↓
┌─────────────────┐
│  Database        │
│  - 物件DB        │
│  - 学習モデル    │
└─────────────────┘

3.2 ラジアルメニューの数学的基礎

配置角度の計算:

// N個のボタンを円周上に等間隔配置
const calculateAngle = (index, total) => {
  return (360 / total) * index - 90; // -90°で12時方向スタート
};

// 座標の算出
const calculatePosition = (angle, radius, centerX, centerY) => {
  const rad = angle * (Math.PI / 180);
  return {
    x: centerX + radius * Math.cos(rad),
    y: centerY + radius * Math.sin(rad)
  };
};

最適な配置半径:

スマホ: 130-160px (親指の可動範囲)
タブレット: 200-250px
デスクトップ: 300px以上

3.3 学習アルゴリズムの概要

優先度スコアの計算:

優先度スコア = 
  選択回数 × 0.5 +
  直近30日の選択回数 × 0.3 +
  検索成功回数 × 0.2

コンテキスト認識:

時間帯 (平日夜 vs 週末昼)
デバイス種別
ユーザー属性

配置最適化:

上位3-4項目を0°〜90°に配置
到達しやすい位置に頻出条件

4. 実装のポイント

4.1 モバイルUXの最適化

タッチ操作の制御:

.menu-item {
  touch-action: manipulation; /* ダブルタップズーム無効化 */
  user-select: none;          /* テキスト選択防止 */
}

セーフエリア対応:

body {
  padding-top: env(safe-area-inset-top);
  padding-bottom: env(safe-area-inset-bottom);
}

アクセシビリティ:

最小タップ領域: 72×72px (WCAG準拠)
中心ボタン: 112×112px (親指操作に最適)

4.2 データ構造の設計

階層構造:

const searchTree = {
  id: 'root',
  label: '検索',
  children: [
    {
      id: 'kanto',
      label: '関東',
      children: [
        { id: 'tokyo', label: '東京', children: [...] },
        { id: 'kanagawa', label: '神奈川', children: [...] }
      ]
    }
  ]
};

選択状態の管理:

// Mapで複数条件を管理
const selectedConditions = new Map();
selectedConditions.set('price_5to6', '5〜6万円');
selectedConditions.set('layout_1k', '1K');
selectedConditions.set('station_shibuya', '渋谷駅');

4.3 リアルタイム検索の実装

クエリの動的生成:

const buildQuery = (conditions) => {
  const filters = [];
  conditions.forEach((label, id) => {
    if (id.startsWith('price_')) {
      filters.push({ field: 'price', operator: 'range', value: ... });
    } else if (id.startsWith('layout_')) {
      filters.push({ field: 'layout', operator: 'eq', value: ... });
    }
  });
  return { filters, logic: 'AND' };
};

件数の高速取得:

全件スキャンではなくインデックスを活用
目標レスポンス: 100ms以内

5. 先行技術との差別化

5.1 既存の円形UIとの比較

項目	Apple Radial Menu	MS Dial	Dango search
配置	固定	固定	学習で動的
選択	単一	単一	複数(AND)
用途	一般メニュー	ツール選択	検索特化
フィードバック	なし	なし	リアルタイム件数

5.2 FTO(Freedom to Operate)調査の結果

主要な先行特許:

US8245156B2 (Apple): ラジアルメニューの基本構造
US10831337B2 (Apple): 予測ベースのUI最適化
US10198148B2 (Microsoft): コンテキスト認識型メニュー

差別化ポイント:

検索プロセスへの特化
- 複数条件の同時選択
- AND検索の実現
Map構造による状態管理
- 先行技術にはない実装方法
リアルタイム件数表示
- 検索の都度フィードバック
デジタル包摂を主目的とした設計
- 文字入力の排除
- アクセシビリティ最優先

6. 特許戦略

6.1 出願のタイミング

なぜ今出願したのか:

プロトタイプで実装可能性を実証
先行技術調査で差別化を確認
ビジネス展開の前に権利確保

6.2 請求項の構成

基本構成(請求項1):

ラジアルメニュー表示
学習による配置最適化
リアルタイム件数表示
Map構造による状態管理

応用展開(請求項2-14):

不動産、求人、EC等への応用
階層構造の実装
方法、プログラムのクレーム

6.3 進歩性の立証戦略

従来技術との本質的な違い:

効率化 ≠ インクルージョン

既存技術:

「健常な若者がさらに速く使える」

本発明:

「これまで使えなかった人が使えるようになる」

非自明性の根拠:

課題設定が先行技術の範囲外
組み合わせの動機づけが不明
顕著な効果(排除されていた層へのアクセス)

7. 今後の展開

7.1 技術ロードマップ

2025年Q1:

学習機能の実装完了
RooMiiでの正式リリース

2025年Q2:

A/Bテストによる効果検証
ユーザーフィードバックの収集

2025年Q3:

BtoB展開開始
製造業・医療分野への応用

7.2 改善の計画

コンテキスト認識の強化
音声UIとの統合
エラーチェック機構

目標: 5-10件の特許ポートフォリオ

7.3 ビジネス展開

BtoC (RooMii):

不動産検索プラットフォーム
月額課金モデル

BtoB (ライセンス):

製造業: 部品検索システム
医療: 機器・薬品検索
人材: 求人マッチング

まとめ

Dango searchは、単なる「便利なUI」ではありません。

「デジタル技術から排除されていた人々に、アクセスを提供する」

というミッションを持った技術です。

特許出願はゴールではなくスタートライン。

これから、実装→検証→展開のサイクルを回していきます。

付録: プロトタイプのデモコード(抜粋)

ラジアルメニューの描画

function renderMenu(node, radius = 160) {
  const items = node.children || [];
  const container = document.getElementById('menu-items');
  
  items.forEach((item, index) => {
    const angle = calculateAngle(index, items.length);
    const pos = calculatePosition(angle, radius, 180, 180);
    
    const button = createButton(item, pos);
    container.appendChild(button);
    
    // アニメーション
    setTimeout(() => {
      button.classList.add('visible');
    }, index * 50);
  });
}

function createButton(item, position) {
  const button = document.createElement('button');
  button.className = 'menu-item';
  button.style.transform = `translate(${position.x}px, ${position.y}px)`;
  button.textContent = item.label;
  
  button.addEventListener('click', () => {
    handleItemClick(item);
  });
  
  return button;
}

学習機能のスケルトン

class SearchOptimizer {
  constructor() {
    this.history = [];
    this.priorityScores = new Map();
  }
  
  recordSelection(conditionId) {
    this.history.push({
      id: conditionId,
      timestamp: Date.now()
    });
  }
  
  calculatePriority(conditionId) {
    const total = this.history.filter(h => h.id === conditionId).length;
    const recent = this.history
      .filter(h => h.id === conditionId && 
                   Date.now() - h.timestamp < 30 * 24 * 60 * 60 * 1000)
      .length;
    
    return total * 0.5 + recent * 0.3;
  }
  
  getOptimizedOrder(items) {
    const scored = items.map(item => ({
      ...item,
      priority: this.calculatePriority(item.id)
    }));
    
    return scored.sort((a, b) => b.priority - a.priority);
  }
}

最後まで読んでいただき、ありがとうございました!

この技術に興味を持っていただけた方、ぜひLGTMやストック、コメントをお願いします 🙏