Yokohama City Dashboard for Visualizing Finances

Web Design

横浜市を俯瞰したアイソメトリックイラストで「財政」をより身近に

トップページでは横浜市のカラーとアイソメトリックイラストを使用し、横浜市民の方に親しみと興味を持っていただけるデザインを目指しました。「財政」「予算」というと少し堅いイメージを持たれがちですが、見慣れた建物や街を立体的に表現することで自分の街のこととして捉えやすく、行政をより身近に感じてもらえるのではないかと考えました。事業ごとにどれだけ予算が使われているかもアイコンを使って一覧にし、気になる事業を直感的かつ楽しく選べるようにしました。
ダッシュボード画面は検索エリアとデータエリアを分けることで操作性を高め、知りたい情報を気軽に選択して参照できます。

Web Development

Next.jsと各種ライブラリを使用し、グラフィカルでリアクティブな操作を実現

フロントエンドの実装にはReactをベースにしたフレームワークであるNext.jsを採用しました。アニメーションライブラリのGSAPや、チャートライブラリのamChartsを使用し操作感の向上をめざしました。

Illustration

各財政の特徴をシンプルにわかりやすく

利用者が参照したい情報に直感的に辿り着きやすくするため、デフォルメしたアイソメトリックイラストを採用。多岐にわたる財政カテゴリーの特徴を強調しながら横浜市のカラーでまとめシンプルにシンボル化しました。ランドマークを冠した街のイラストを用いることで、難しい印象を持たれがちな財政情報と自分が住む街が紐づくことを目指しました。