KATAOKA KIKAKU INC. FUKUOKA

—選ぶ人の“迷い”を、“納得”に変える—

それを支えるのが、インタラクティブな図解の役割です。

ChatGPT、Chart.js、microCMS、API連携などを組み合わせて構築しており、
運用開始後も、社内でスムーズにデータ更新が行えるよう設計されています。

データは、ただ見せるだけでは選択を生みづらいものです。だからこそ私たちは、「どの視点から、何を比較し、どう選べるか」を丁寧に設計することを心がけています。インタラクティブな図解も、ただのビジュアルではなく、見る人自身が手を動かしながら理解し、自分なりの最適解にたどり着ける構造を目指して設計しています。「意思決定を支えるインターフェース」としての図解。その役割を果たせるよう、複数の選択基準を動かせる仕組みや、可視化に込めた意図が伝わるUIを構築し続けています。

図解、インタラクティブ、ユーザー自身で選択基準(条件因子)を変更、リアルタイムデータと連携、管理画面で運用、ノーコード

特徴量マッチング 抽出ロジック

#図解UI #インタラクティブ #microCMS #API #JSON #比較 #Chartjs

サムネイル

数値で計算し、感覚で納得できる。

― 個々の希望をベクトル化し、コサイン類似度で比較することで、候補の近さが明確になる。結果の理由が同時に見えるから、複雑な選択でも安心して最適な答えを選び取れます。

特徴量マッチング CMS

#図解UI #インタラクティブ #microCMS #API #JSON #比較 #Chartjs

サムネイル

選択の奥にある「気持ち」まで拾い上げる。

― 数字では表しきれない好みや感覚を、ベクトル空間で整理し、似た傾向を持つ選択肢を導き出す。まるで人に相談したかのように、自分らしい提案が自然と浮かび上がります。

プラン構成 × 費用比較グラフ

#図解UI #インタラクティブ #microCMS #API #JSON #比較 #Chartjs

サムネイル

「安いから」じゃない。「ちょうどよかったから」。

― 人数も、好みも、譲れないことも、ひとつひとつ違うから。それぞれの希望を反映させた構成を比較し、納得できる選択肢を見つけていく。

比較マトリクス(比較表)

#図解UI #インタラクティブ #microCMS #API #JSON #比較 #Chartjs

サムネイル

比較が“見える化”され、選択肢に意味が宿る。

― 選べなかった理由が、選ばせてくれる。項目の羅列はもう要らない。違いが浮き出たとき、“選びたくなる構造”が動き出す。

週間稼働時間のカテゴリ別集計

#図解UI #インタラクティブ #microCMS #API #JSON #比較 #Chartjs

サムネイル

つけるのが面倒だった“記録”が、気づけば習慣に。

― 忙しい人にこそ、必要なのは「記録のしやすさ」。予定に沿って入力するだけで、自動でカテゴリ別に集計。自分の時間の使い方を、いつの間にか知ることができます。

選択内容と集計結果のリアルタイム可視化

#図解UI #インタラクティブ #microCMS #API #JSON #比較 #Chartjs

サムネイル

選ぶたび、全体が見えてくる。

― 操作と結果の因果が“今この場で”確認できる構造だから、迷いなく最適な選択へ導きます。複雑な構成やパターンにも応用可能。

目標値境界線つき折れ線グラフ

#図解UI #インタラクティブ #microCMS #API #JSON #比較 #Chartjs

サムネイル

選ぶべきは、“みんなに良いもの”より、“自分に合うもの”。

― 目標を基準に、選択基準を切り替えながら比較。“どれが自分に合うか”が一目でわかり、納得の決断につながります。

組み合わせ別プラン比較

#図解UI #インタラクティブ #microCMS #API #JSON #比較 #Chartjs

サムネイル

選び方の“組み合わせ”が、答えを変える。

― 条件が変われば、最適解も変わる。単体では見えなかった違いが、組み合わせで浮き上がる。“自分に合った構成”が比較から導き出せる。

傾向比較ヒートマップ

#図解UI #インタラクティブ #microCMS #API #JSON #比較 #Chartjs

サムネイル

“同じ選択”が、安心を生む。

― 自分と似た傾向の人は、どんな選び方をしているか?その“重なり”を視覚化することで、自分の判断にも確信が生まれる。ヒートマップが、見えない共通点を浮かび上がらせる。

複合チャート(棒グラフ+折れ線)

#図解UI #インタラクティブ #microCMS #API #JSON #比較 #Chartjs

サムネイル

実績(棒)と流れ(線)の同時表示で、因果と傾向を把握。

― 2つの視点が揃ったとき、行動が決まる。実績と流れ、量と変化。ひとつじゃ決められない意思決定に、構造で応える。

スタイル付き線分グラフ

#図解UI #インタラクティブ #microCMS #API #JSON #比較 #Chartjs

サムネイル

線の色や太さが変化を語り、数字に感情を宿す。

― 変化の「質」が、動きの意味を語る。同じ数値でも、感じ方が違う。線の表情が“なぜ今それを選ぶべきか”を語り始める。

散布図(座標上の分布図)

#図解UI #インタラクティブ #microCMS #API #JSON #比較 #Chartjs

サムネイル

ズレの質が、状況の違いを語り出す。

― 心理の違いが、微細な“ズレ”として現れる。点ではなく、状況ごとの重なりと広がりから、見るべき“本質”が立ち上がってくる。

因果関係を示す複数線グラフ

#図解UI #インタラクティブ #microCMS #API #JSON #比較 #Chartjs

サムネイル

因果の繋がりが可視化され、変化の結果が見える。

― 価格を動かすと、何かが離れて、何かが残る。その「残るもの」は、あなたのビジネスの“核”かもしれない。利益と継続性を見つめる。

バブルマップ(バブルチャート)

#図解UI #インタラクティブ #microCMS #API #JSON #比較 #Chartjs

サムネイル

全体分布を見て、自分の位置を把握する可視化。

― 群れの中から、自分の居場所を見つける。平均を追うだけじゃ見つからない。“その中でどこにいるか”が、次の一手を導く。

レーダーチャート

#図解UI #インタラクティブ #microCMS #API #JSON #比較 #Chartjs

サムネイル

強みと足りなさを見つけ、自分に合う全体像を探す。

― バランスの輪郭を描け。何かが突出すれば、何かが見えなくなる。自分にとっての“ちょうどいい”を探すために。

積算比較グラフ

#図解UI #インタラクティブ #microCMS #API #JSON #比較 #Chartjs

サムネイル

そのままを続けた先と、選びなおした先。

― “いつのまにか”が、未来をつくっていく。気づいたときに変えられるよう、差をグラフで見えるようにする。