pure JSのマップとReactの繋ぎ込み

マップ部分はSVGで、SVG.jsなどを使って実装したい

https://scrapbox.io/files/6501c083868249001ba61f57.png

https://scrapbox.io/files/6501c0c6793ca9001c58b1c9.png

これは、文字から線を追う必要があって分かりにくいと思う

点から線を追う場合もある

https://scrapbox.io/files/6501c1bde092cd001c5eceb4.png

基本的には、直接対応する位置にテキストを書く方針で問題ない。

懸念点は、マップが斜めになっていることとの折り合い

https://scrapbox.io/files/6501c26df7cd2c001be8b1bf.png

縦

https://scrapbox.io/files/6501c2dc8a9b8c001c6be281.png

横

これは、地面に書かれた文字のようで、ユーザーがタップできるようには見えない

斜めマップにおける情報の優先度のメリハリの付け方として、縦と横の使い分けをするのはありだと思う

場所が縦と比較してより明確である

といえる？

インフォメーション・オーバーロードを起こさないために、重要な情報のみを立てたほうが良さそう。

テキストが斜めになることに注意したい

テキストボックスの長さ、幅も比較したい

Figmaでコンポーネントを作ってみると良さそう。

https://scrapbox.io/files/6501df33c1e62e001cfdcd4e.png

？

やっぱりテキストが斜めになるのは違う..

https://scrapbox.io/files/6501e42d1807ec001ce9bc8e.png

基本的にこの形で良さそうだと思う