真剣にドラゴンレーダをリ・デザインする
誰もが知っている国民的漫画「ドラゴンボール」その初期において重要な役割をになったドラゴンレーダー。とても高性能で未来的なイメージのあったドラゴンレーダーでしたが、今回改めて見直すと・・・超能力でも無い限りドラゴンボールにたどり着かねぇ!と思いましたのでリ・デザインしました。
ドラゴンレーダーって何? → Google画像検索
ドラゴンレーダにできること
問題点と解決方法
といっても相当前に読んだ記憶だけなので、当時の漫画やWikiなどからドラゴンレーダーを調査し、改めて問題点とその解決方法を考えてみた。
漫画を見る限り、自分とドラゴンボールしか表示していない
問:自分とドラゴンボールしか表示していない
解:まずびっくり。もうちょっと情報欲しいよ、わかんないよ。
とりあえず地形や方角などの情報が全くないので、探索・冒険しやすい情報を追加しなければ
問:方角・距離・場所などわからない
解:距離はある程度わかるが数値での表示がないので加える。また方角や国・都市とその気候情報を追加
問:表示がモノクロなので、表現力がなくわかりにくい
解:自分と目的の2点だけの表示なのでモノクロなのだろうが、今回はカラーに
問:操作方法が少ない。懐中時計に似たデザインで竜頭(スイッチ)でしかコントロールできない。上部のスイッチでON-OFF、ダイヤルを回すことで地図の拡大縮小を行う
解:なんといってもタッチパネルに。ただし細かな操作はせずに、アクションで操作できるようにする
問:生物の体内等、波長がキャッチ出来ない環境にボールがある場合は索敵出来ない・ボールが移動しても気づかない
解:これについては波長をキャッチした時点での再表示+移動履歴を表示する
本当に「レーダー」って感じ。でもこれくらいは機能としてほしい
といった具合に問題点とどう対応しようかーと考えきましたが、そもそも機能として欲しいものもいくつか出てきました。
ボールのピン表示と個別管理
波長を受けても、ドラゴンボールが何星球(シンチュウ)かわからないので、ニックネームをつけ移動履歴を管理する
手元にあるドラゴンボールの非表示機能
現在地からの経路表示
全体マップの拡大縮小
特にボールごとの管理機能は劇的に便利になりそう。オラわくわくしてきたぞ!・・・ました。
UI制作
ではこのように考えた内容を踏まえ、実際のUIを制作しました。
深ぼればいくらでも考えられますが、今回は基本形態の懐中時計型としてドラゴンレーダー自体のサイズもそのままの想定で制作しました。
全体像
1st viewでは自分とボールの位置・方角を表示。100kmを一つの目安としていて、それより遠いものは太い白線で表示している「100kmライン」上に表示。それぞれボールの色と大きさにより大雑把に距離感が掴めます。
ボールの色と大きさによる距離の表示設定
冒険の舞台を地球サイズで考え、最も遠い表示を地球の裏側の距離約20,000kmに設定しました。
使用フロー
現在地から、ボールまでの距離を表示するフロー。タブをぐいっと回すことによって拡大します。↓に回すと拡大、↑に回すと縮小。
ドラゴンボール管理
勝手に動くことも考えられるので、どのボールを追っていたのか、迷わない様にドラゴンボールそれぞれにニックネームをつけ管理しよう!と考えました。
移動履歴がリストと地図で表示されるので、どのようにどこに向かっているのかが予想でき、先回りできます。
真剣にドラゴンレーダをリ・デザインする、は以上になります。
今回は、考えれば考えるほどGoogleMap化してしまったので、基本であるボールを探す事のみに集中できるように考えました。お店情報とか知らん!
自分としては100kmラインを思いついて、これはいける!とワクワクして製作しましたが、客観的にみてどうなんだろうか・・・noteにまとめながら不安が押し寄せてきています。
是非ご意見くださいませー。
この記事は視覚伝達情報設計研究室(通称:視伝研)の研究発表テーマ02「架空の世界のUIをデザインする」の研究発表の1つになります。
その他の研究はこちらから