初めに
思考整理や仕様検討をする際、これまではノートに手書きで
フローチャートを書いていました。
しかし、
- 書くのが純粋に面倒
- 過去のフローを確認するためにノートをパラパラめくるのが面倒
- 修正が入るたびに書き直しになる
という問題がありました。
「これ、アプリにしたら全部楽になるのでは？」
と思ったのが、本アプリ作成のきっかけです。
アプリ概要
本アプリは、
思考整理や仕様作成前のラフ設計に特化した
軽量フローチャート作成ツールです。
• ノードの作成・移動
• ノード間の接続
• 線のリアルタイム追従
• JSON による保存／読み込み
• 企画（規格）単位での管理
といった基本機能を備えています。
（※ 実際の操作感はスクリーンショットをご覧ください）
一番こだわった点：
「黒ポチ」からしか線を引けない設計
このアプリで最もこだわったのが、
「ノードの接続点を明示し、そこからしか線を引けない」仕様です。
多くのツールではノード全体や近傍から自由に線を引けますが、
今回はあえて制限を設けました。
なぜ制限したのか？
理由は単純で、
• 意図しない線の発生を防ぎたい
• 「どこからどこへ接続されているか」を一目で分かるようにしたい
と考えたからです。
自由度が高い＝使いやすい、とは限らず、
制限を設けることで視覚的な情報処理が楽になる
という考えで設計しました。
情報理解を壊さないための工夫
ノード移動時のリアルタイム追従
ノードをドラッグして移動すると、
接続されている線もリアルタイムで追従します。
これは単なる「気持ちよさ」ではなく、
• 移動後に線が意図しない位置から伸びてしまう
• 接続関係が一瞬分からなくなる
といった 情報理解の破綻を防ぐため の仕様です。
接続時の仮ライン表示
黒ポチから線を引く際、
確定前の 仮ライン（点線） を表示しています。
これにより、
• 線がどのような軌跡でつながるのか
• どこに接続されようとしているのか
を事前に視覚的に把握できます。
進行度によるノードの色分け
各ノードは進行度に応じて色を変更できます。
例として、
• 進行中：黄色
• 中止：灰色
• 完了：緑
といった形で、
状態を色で即座に判断できる ようにしました。
フローチャートを「構造」だけでなく
「現在の状態管理」にも使えるよう意識しています。
データ管理の考え方
フローチャートの内容は JSON で管理しています。
• ノードID
• 位置（X / Y）
• 接続情報
• 規格（企画単位）
などを保存し、
アプリを閉じてもレイアウトを再現できます。
また、
コンボボックスで企画（規格）を切り替えることで、
別のフローチャートを管理・閲覧できる設計にしています。
開発を通して学んだこと
今回の開発で特に感じたのは、
- UIの自由度を上げすぎると、かえって情報理解を妨げる
- 「何でもできる」よりも「誤操作しない」設計の方が重要な場面がある
- シンプルに見えるUIほど、内部では座標管理・描画・データ構造が密接に絡む
- UXは見た目ではなく、操作中の迷いを減らす設計で決まる
という点でした。
おわりに
本アプリは、「高機能なフローチャートツール」を目指したものではありません。
作成目的は、
- 使用感の良いアプリを作ること
- ユーザーの思考を邪魔しないこと
この2点に集約されています。
思考整理のためのツールは、使い方を考えさせてしまった時点で
本来の役割を果たせなくなると考えました。
そのため本アプリでは、
- 操作を限定する
- 接続点を明示する
- 状態を色で即座に判断できる
といった設計を意識しています。
もし同じように、「考えることに集中できるツールが欲しい」と感じている方の参考になれば嬉しいです。
興味を持っていただけた方がいれば、
GitHub にソースコードを公開しています。
GitHub: https://github.com/neo557/FlowChartApp
バグ報告や改善案などがあれば、
お気軽にコメントいただけると嬉しいです。