「横浜市財政見える化ダッシュボード」ウェブサイト・サービスUIデザイン

Credit

Client
横浜市
Type of Business
財政可視化サービス
Role
  • Brand Design
  • Illustration
  • Web Design
  • Web Development

Overview

横浜市の財政予算をイラストやグラフとともにオープンデータとして見える化

他都市に先駆けてオープンデータの推進に力をいれている横浜市。その横浜市の財政予算を、グラフや表とともにすぐに見れるウェブサービス「横浜市財政見える化ダッシュボード」を制作しました。neccoではクリエイティブディレクション、ウェブサイトデザイン、UIデザイン、イラスト制作、フロントエンド実装を担当しています。

Light blue#70ABFF112/171/255
White#F5F5F5245/245/245
Deep blue#1A176026/23/96

Client

Yokohama City

Team

Creative Direction

necco inc.

Web Design

necco inc.

Illustration

necco inc.

Development

necco inc.

Contact

お仕事のご依頼は、お問い合わせからご連絡ください。

Share

Web Design

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

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

Web Development

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

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

Illustration

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

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