久能弘嗣

Designer / メディアでビジュアルコンテンツを作っています / Web, UI…

久能弘嗣

Designer / メディアでビジュアルコンテンツを作っています / Web, UI, Data Visualization, Information graphics, Diagram / デザインとエンジニアリングを行き来したい / Switch, PS5, 革細工

  • 世界各国のインバウンドを可視化する

    世界各国のインバウンド（自国への旅行）をビジュアライズする取り組みを書き残していきます。

  • 固定された記事

インバウンドを可視化する #009 UIデザインを始める

アクセスありがとうございます！ 前回の記事はこちらです。 前回まででフロントエンドの環境が準備できました。次はツール全体のUIを考えていきます。 仕事だとFigmaなどでデザインイメージを作ってから実装を始めますが、個人だと順番はどうでもいいのでコーディングしながら進められるところはやってしまいます。 Reactでコンポーネントを作りつつ、ベースのscssを書きながら進めていきます。 一方でチャートのデザインや配色は、デザインツールで検証しながら見当をつけていった方が

久能弘嗣

    • インバウンドを可視化する #008 フロントエンドの準備

      アクセスありがとうございます。 前回の記事はこちらです。 前回はgeocodingをしてデータに登場する国・地域についての位置情報を取得してデータセットに追加しました。 データの整形も進んできたので、そろそろフロントエンドで実装を始める準備をして行きます。最近は "yarn create vite" でプロジェクトを始めています。 Reactを利用するのと、Typescriptを勉強したかったためtsxファイルを書いて開発することにしました。 ビジュアライゼーション描

      久能弘嗣

      • インバウンドを可視化する #007 Pythonでgeocodingする

        アクセスありがとうございます。 前回の記事はこちらです。 データ整形と同時にやっていたので記事の時系列がごちゃごちゃですが、データに登場する国はgeocodingをして緯度経度の情報を持たせることにしました。 ビジュアライズするときに必要になりそうだったので、整形の段階でデータセットに追加しておきます。 Googlemap APIを使って取得しています。GCPでアクセストークンを発行してPythonのコードからリクエストを投げ、値を取得します。 位置情報を整形していた

        久能弘嗣

        • インバウンドを可視化する #006 ヒートマップにしてみる

          アクセスありがとうございます。 前回の記事はこちらです。 前回まででビジュアライゼーションに使うための、世界各国の旅客数のデータを整備できました。試しにコロプレスを描いてみて、適切にプロットが出来ていそうというところまで確認しました。 次はヒートマップにしてみました。コロナウイルスが世界的に猛威を振い始めたと同時に、全体が著しく低下している様子が表現できそう、という発想からです。 旅客数が著しく多い上位の国の値に引っ張られ、下位の国の変化が分かりづらくなっています。まぁ

          久能弘嗣
        • 固定された記事

        インバウンドを可視化する #009 UIデザインを始める

        久能弘嗣

        マガジン

        • 世界各国のインバウンドを可視化する
          9本

        記事

          インバウンドを可視化する #005 コロプレスマップを作ってみる その2

          アクセスありがとうございます。 前回の記事はこちらです。 前回では使用している統計データ自体の性質によって、見え方が実情と異なるという問題が出てきました。その解決策として、下記のようなロジックを組み立てました。（良いか悪いかは一旦置いておくことにします） 「原則として合計の旅客数を表示するが、合計値が存在しない場合は一泊以上滞在した人の数を表示する」 もう一度データを整形し直し、QGISの色分けの式も調整します。 余談ですが、QGISの式なんて書いたことありませんでし

          久能弘嗣

          インバウンドを可視化する #005 コロプレスマップを作ってみる その2

          久能弘嗣

          インバウンドを可視化する #004 コロプレスマップを作ってみる その1

          アクセスありがとうございます。 前回の記事はこちらになります。 しばしの間、統計データをgeojsonにマージさせるということをPythonでしていました。データの構造をどうしようか考えたり、それに伴って整形のコードを書き換えたりとなかなか時間がかかってしまいました。 今回は、出来上がったgeojsonを使ってコロプレスマップを作るスタディのプロセスです。QGISをちゃんと使ったことなかったのですが、結構簡単にgeojsonのpropertiesの値を利用して国ごとに色分

          久能弘嗣

          インバウンドを可視化する #004 コロプレスマップを作ってみる その1

          久能弘嗣

          インバウンドを可視化する #003 地図のデータを用意する

          世界地図にインバウンドのデータをプロットしたいので、ベースとなる地図のデータを用意します。 フロントエンドで地図にプロットするため、世界地図のgeojsonを作ります。今回はNatural Earthから国境でポリゴンが分かれたデータを取得しました。QGISでgeojsonファイルとして保存して使います。 次に、geojsonファイルから国名を抽出し、プロットしたいデータが持つ国名の表記と並べていきます。表記が違うとプログラム上でマッチングできないため、一つ一つ同じ国のペ

          久能弘嗣

          インバウンドを可視化する #003 地図のデータを用意する

          久能弘嗣

          インバウンドを可視化する #002 データを整形する

          データの前処理をPythonでやっています。 次の画像のようなexcelファイルから、国名とTotal arrivalsの行だけ取り出すという処理をしました。 ChatGPTにあれこれ聞きつつ、pandasの処理の書き方を勉強しながらなので、どうしても時間がかかってしまいます。ただ、手作業でやるのは流石にしんどい（もしくはプログラムで処理したほうが安全）な場合もあるので、ある程度は出来るようになっておきたいです。 割と綺麗（だと思う）なデータセットなので、トレーニングに

          久能弘嗣

          インバウンドを可視化する #002 データを整形する

          久能弘嗣

          インバウンドを可視化する #001 はじめに

          デザイナーをしております、久能弘嗣と申します。 あるメディアにて、ビジュアルコンテンツのクリエイティブに関するディレクションやデザインをしています。社の事情で、明確にどこかとは言えないのですが。 ビジュアルコンテンツ、と書きましたが、主にデータビジュアライゼーションを用いたコンテンツを手掛けています。土台はWebブラウザとすることが多いので、Webデザイン・UIデザインとフロントエンドの技術などを守備範囲とすることが多いです。 今回は仕事としてではなく、プライベートの制

          久能弘嗣

          インバウンドを可視化する #001 はじめに

          久能弘嗣