【Streamlit】自分専用の投資ダッシュボードを自作!スマホから成績を確認するUI構築

  • URLをコピーしました!

「複数の証券口座をいちいちログインして確認するのが面倒」「自分が必要な情報だけを1枚の画面にまとめたい」と感じたことはありませんか?

投資銘柄が増えてくると、資産の全体像を把握するだけでも一苦労です。

そんな悩みを解決するのが、Pythonのフレームワーク「Streamlit(ストリームリット)」を使ったダッシュボードの自作です。プログラミングの経験が少なくても、驚くほど簡単にプロのような投資管理画面を作ることができます。この記事では、データの取得からスマホでの閲覧方法まで、最短ルートで解説します。

目次

なぜ投資ダッシュボードを自作するのか?

世の中には便利な投資アプリがたくさんありますが、自作にはそれらを超える圧倒的なメリットがあります。自分が必要な指標だけを選び、使いやすいレイアウトで配置できる自由さは、投資のストレスを劇的に減らしてくれます。

この章では、自作ダッシュボードが投資管理をどう変えるのか、その全体像を整理します。

複数の口座管理の効率化や、Web開発の知識がなくてもアプリが作れる理由について詳しく見ていきましょう。

複数の証券口座を一箇所で管理する

多くの投資家は、日本株はSBI証券、米国株は楽天証券、さらに暗号資産は別の取引所といった具合に、複数の口座を使い分けています。

しかし、これでは資産の合計や構成比を把握するために、何度もログインを繰り返さなければなりません。

自作ダッシュボードなら、プログラムがそれぞれのデータを自動で集約し、一つの画面に表示してくれます。

「今、全体でいくら持っているのか」が秒単位で把握できるため、相場が急変したときでも冷静な判断が可能になります。

例えば、銀行預金も含めた「真の総資産」をリアルタイムで可視化できるのは、自作ならではの強みです。

一度仕組みを作ってしまえば、日々の管理コストは驚くほど小さくなります。

HTMLやCSSの知識がなくてもWebアプリを作れる

通常、Webアプリを作るにはHTMLやCSS、JavaScriptといった複数の言語を学ぶ必要があります。

しかし、Streamlitを使えばPythonのコードを書くだけで、自動的にモダンで美しいWeb画面が生成されます。

ボタンやグラフ、入力フォームといった部品(コンポーネント)が豊富に用意されており、それらを配置するだけで完成します。

デザインに凝る時間を削り、投資ロジックの作成に集中できるのが大きな魅力です。

投資家にとって大切なのは、見た目を飾ることよりも、正しいデータを素早く確認できることです。

Streamlitは、その「実用性」を最小限の努力で実現してくれます。

自分の好きな指標だけをトップ画面に配置する

証券アプリのトップ画面には、自分には関係のない広告やニュースが表示されることも少なくありません。

自作なら、配当利回りや前日比の騰落率、特定の銘柄のチャートなど、自分が最も重視する情報だけを並べられます。

情報の密度を自由に調整できるため、画面をひと目見るだけで状況が判断できるようになります。

「余計な情報を遮断し、必要な数字にだけ集中する」という環境が、投資の精度を高めてくれます。

まずは、既存のアプリと自作ダッシュボードの違いを表で比較してみましょう。

項目証券会社アプリ自作ダッシュボード
カスタマイズほぼ不可自由自在
口座の集約1社のみ複数社を統合可能
開発の難易度低(Pythonのみ)
閲覧場所スマホ/PCスマホ/PC(Web経由)

開発を始めるための環境を整える

アプリを作るための「土台」作りから始めましょう。

Streamlitは非常に軽量なツールなので、パソコンへの導入もスムーズに進みます。

この章では、ダッシュボード構築に欠かせない3つのライブラリの役割と、そのインストール手順を解説します。

これらが揃うことで、データの取得から美しいグラフの描画までがすべて可能になります。

StreamlitをPCにインストールする

まずは、Webアプリの本体となるStreamlitを導入します。

ターミナル(またはコマンドプロンプト)を開き、以下のコマンドを入力するだけで完了します。

pip install streamlit

インストールが終わったら、streamlit hello と入力して実行してみてください。

ブラウザが立ち上がり、デモ画面が表示されれば成功です。

このツールが、あなたの書いたPythonコードを瞬時にWeb画面へと変換してくれる魔法の杖になります。

準備ができたら、次はデータを取得するための道具を追加しましょう。

株価データを取得するyfinanceを準備する

投資ダッシュボードには「生きたデータ」が必要です。

そこで、Yahoo Financeから株価情報を無料で取得できる「yfinance」を利用します。

pip install yfinance

これを使えば、トヨタ自動車(7203.T)やアップル(AAPL)といった銘柄の価格を一瞬で呼び出せます。

最新の価格だけでなく、過去のチャートデータや配当情報も取得できるため、分析の幅がぐっと広がります。

自分でデータを手入力する手間をなくし、常に最新の市場環境を反映したダッシュボードを目指しましょう。

インタラクティブなグラフを描くPlotlyを追加する

数字の羅列だけでは資産の動きが分かりにくいため、グラフ化が必要です。

「Plotly(プロットリー)」を使えば、マウスを重ねると数値が出るような、動くグラフを簡単に作れます。

pip install plotly

スマホで閲覧する際も、指でグラフをなぞって細かい価格を確認できるため、非常に相性が良いライブラリです。

静止画のグラフとは一線を画す、アプリらしい操作感を実現できます。

主要なライブラリの役割を以下のテーブルにまとめました。

ライブラリ名主な役割
StreamlitWebアプリの画面作成・レイアウト
yfinance株価や財務データの自動取得
Plotly動的なグラフやチャートの描画
Pandasデータの整理・計算(標準で多用)

yfinanceを使って最新の株価データを取得する

道具が揃ったら、実際にデータを取得するプログラムを書いていきましょう。

ここでは、特定の銘柄の価格を読み込み、アプリで扱いやすい形に整える手順を解説します。

データの取得をスムーズにするために、銘柄コードの指定方法や、読み込みを速くするためのコツについて見ていきましょう。

コードを数行書くだけで、あなたのダッシュボードに命が吹き込まれます。

銘柄コードを指定してデータを読み込む

yfinanceで日本株を指定する際は、証券コードの後に「.T」をつけるのがルールです。

例えば、任天堂なら「7974.T」となります。

import yfinance as yf

# 銘柄と期間を指定して取得
df = yf.download("7974.T", period="1y")

このように書くだけで、過去1年間の株価推移が手に入ります。

米国株の場合は「AAPL」や「TSLA」といったティッカーシンボルをそのまま入力すればOKです。

まずは自分が保有している銘柄をリストにして、一括で取得できるように設定してみましょう。

これだけで、毎日証券サイトを巡回する手間がなくなります。

取得したデータをPandasで整理する

取得したデータは、そのままでは少し扱いづらいことがあります。

Pythonの「Pandas(パンダス)」というライブラリを使って、必要な列(例えば終値だけ)を抽出したり、日付を整えたりします。

データの加工ができるようになると、「平均取得単価と現在の株価を比べて、含み損益を計算する」といった処理も自由自在です。

自分のお金が今どのような状態にあるのかを、正確な数式で導き出しましょう。

最初は難しいことをせず、まずは「最新の価格」を正しく取り出すことに集中してください。

基本ができれば、配当金や手数料を差し引いた「純粋な利益」の計算もできるようになります。

キャッシュ機能を使って読み込み速度を上げる

Streamlitは、画面を操作するたびにコードを上から下まで再実行する仕組みを持っています。

そのため、毎回データをネットから取りに行くと、動作が重くなってしまいます。

そこで便利なのが、st.cache_data という機能です。

一度取得したデータを一時的に保存(キャッシュ)しておくことで、2回目以降の表示を劇的に速くできます。

import streamlit as st

@st.cache_data
def get_data(ticker):
    return yf.download(ticker, period="1y")

これを一行加えるだけで、アプリの使い心地がプロ仕様に近づきます。

特にスマホで閲覧する場合、読み込みの速さは「毎日使うかどうか」を分ける重要なポイントです。

投資成績を「カード形式」で見やすく表示する

ダッシュボードを開いた瞬間に、最も知りたい数字が目に飛び込んでくる。

そんな理想的なUIを作るために、Streamlitの「メトリック(指標)」という部品を使います。

この章では、現在値や前日比を美しく並べるレイアウト術を解説します。

PCだけでなく、スマホで見たときにも崩れない配置のコツをマスターしましょう。

st.metricで現在値と騰落率を表示する

st.metric を使うと、ラベル、数値、そして前日比(デルタ)をセットで表示できます。

前日比がプラスなら緑、マイナスなら赤という色付けも自動で行ってくれます。

st.metric(label="日経平均", value="39,000円", delta="150円")

これだけで、投資アプリのトップ画面のような本格的な見た目になります。

現在値だけでなく、保有株の含み損益を表示させるのも良いでしょう。

一番大切な数字が大きく表示されることで、脳が瞬時に状況を理解できるようになります。

「今日は調子が良いな」という感覚が、数字の裏付けとともに伝わってきます。

st.columnsを使ってレイアウトを横に並べる

数字を縦に並べるだけでは、画面が長くなって使いにくいものです。

st.columns を使うことで、画面を横に分割して情報を整理できます。

col1, col2, col3 = st.columns(3)
col1.metric("銘柄A", "1,200円", "10円")
col2.metric("銘柄B", "5,500円", "-30円")
col3.metric("銘柄C", "2,800円", "5円")

PCでは3列に、画面の狭いスマホでは自動的に縦に並んでくれるため、特別な設定は不要です。

「主要指数」「保有銘柄」「為替」といった具合に、グループごとに列を分けるとさらに見やすくなります。

情報の優先順位をつけて、視線の動きをスムーズに誘導するレイアウトを心がけましょう。

日本株と米国株で表示単位を切り替える

自作ダッシュボードなら、円とドルの混在もスマートに処理できます。

プログラム側で、銘柄に応じて「¥」や「$」を付け替える処理を加えましょう。

さらに、その時の為替レートを取得して「すべての資産を円換算するといくらか」を合算して表示するのもおすすめです。

複数の口座を持っていると曖昧になりがちな「トータル資産」が、これではっきりと分かります。

投資の判断を狂わせるのは、常に「現状が分からないこと」です。

通貨の壁を取り払い、フラットな視点で資産を眺められる環境を作りましょう。

ポートフォリオの推移をグラフで可視化する

数字は「点」の情報ですが、グラフは「線」の情報です。

資産がどのような軌跡を辿って増えてきたのかを可視化することで、投資へのモチベーションが大きく変わります。

この章では、Plotlyを使ってスマホでも操作しやすい動的なグラフを実装する方法を解説します。

推移グラフや円グラフを使い分け、多角的に自分の資産を分析しましょう。

資産残高の推移を折れ線グラフにする

最も基本となるのが、総資産の推移を示す折れ線グラフです。

毎日の終値を積み上げ、資産が右肩上がりになっているかを確認します。

import plotly.express as px

fig = px.line(df, x=df.index, y="Close", title="資産推移")
st.plotly_chart(fig, use_container_width=True)

Plotlyを使えば、特定の期間をズームしたり、線の上にカーソルを置いて詳細な価格を見たりできます。

単なる画像ではなく「触れるグラフ」にすることで、分析が楽しくなります。

一時的な下落に一喜一憂せず、長期的な成長を視覚的に捉えるために、このグラフは必須のパーツです。

円グラフでアセットアロケーションを把握する

「株に偏りすぎていないか」「現金比率は適切か」を確認するには、円グラフが最適です。

自分のポートフォリオの構成比(アセットアロケーション)を可視化しましょう。

投資信託、個別株、現金、暗号資産といったカテゴリーごとに色分けして表示します。

自分が理想とする比率からズレていないか、ひと目でチェックできる仕組みを作ります。

偏りに気づくことができれば、次に何を買うべきか、あるいは何を売るべきかの判断がスムーズになります。

バランスの取れた運用を続けるための、羅針盤として活用してください。

ホバー操作で日付ごとの詳細を確認できるようにする

Plotlyのグラフは、スマホで画面を長押ししながら指を動かすと、その日付の正確な数値を表示してくれます。

画面が小さいスマホでも、指先の操作だけで過去のデータを細かく追えるのが強みです。

「あの時の暴落でどれくらい減ったのか」を振り返るのも、タップ一つで完了します。

過去の経験をデータとして振り返ることで、将来の変動に対する心の準備が整います。

見やすさと操作性を両立させたチャートこそ、自作ダッシュボードの醍醐味です。

自分にとって最適な色の組み合わせや、線の太さを探求してみてください。

サイドバーに操作パネルを設置する

メイン画面は情報を「見る」ための場所ですが、サイドバーは「操作する」ための場所です。

画面の左側にメニューを隠しておくことで、すっきりとしたデザインを維持したまま、高機能なアプリに仕上げられます。

この章では、銘柄の切り替えや期間の変更といった、インタラクティブな機能の追加方法を解説します。

必要なときだけ引き出せる操作パネルは、スマホでの使い勝手を格段に良くしてくれます。

st.sidebarに入力フォームを配置する

st.sidebar を使うと、サイドバーの中に好きな部品を配置できます。

例えば、気になる銘柄をその場で入力してチャートを切り替える検索窓を作ってみましょう。

ticker = st.sidebar.text_input("銘柄コードを入力", value="7203.T")

これだけで、コードを書き換えなくてもアプリ上で表示内容を変更できるようになります。

保有銘柄だけでなく、その場で気になった銘柄の分析も行える「万能ツール」へと進化します。

メイン画面の情報を邪魔せず、必要なときだけ設定を変えられる使い心地は、一度覚えると手放せません。

年初来や過去1年など期間を瞬時に切り替える

グラフの表示期間をボタン一つで切り替えられるようにします。

「短期的な値動き」と「長期的なトレンド」を素早く見比べるためです。

サイドバーにラジオボタンやセレクトボックスを置き、それに応じてデータの取得期間を変えるようにプログラムを組みます。

  • 年初来(YTD)
  • 直近1ヶ月
  • 過去1年
  • 全期間

このように期間を切り替えることで、多角的な視点から相場を分析できるようになります。

操作の手数を減らし、考えたいことに集中できる導線を作りましょう。

比較したいインデックス(S&P500等)を選択する

自分の成績が良いのか悪いのかを判断するには、市場平均(インデックス)との比較が欠かせません。

サイドバーで選んだインデックスと、自分の持ち株のパフォーマンスを重ねて表示する機能をつけましょう。

「日経平均には勝っているけれど、S&P500には負けている」といった事実が可視化されることで、投資戦略の改善点が見えてきます。

指標としての「モノサシ」をいつでも呼び出せるようにしておくことが、慢心や過度な悲観を防ぐコツです。

自分を客観的に評価する仕組みを持つことが、自律した投資家への第一歩となります。

自作したアプリを自分専用に公開する

パソコンの中で動くだけでは「ダッシュボード」としては不十分です。

外出先やベッドの上でもスマホで確認できるよう、アプリをインターネット上に公開しましょう。

この章では、Streamlit Cloudを使って無料でアプリをデプロイ(公開)する手順を解説します。

世界中に公開するのではなく、自分だけが見られるように設定するセキュリティのポイントも押さえましょう。

コードをGitHubへアップロードする

アプリの公開には、ソースコードを「GitHub(ギットハブ)」というサイトに預ける必要があります。

難しく聞こえるかもしれませんが、ファイルをアップロードするだけの作業です。

GitHubにリポジトリ(保管場所)を作り、作成したPythonファイルをアップしましょう。

これが、クラウド上でアプリを動かすための「設計図」になります。

コードを外部に置くことになるため、この後のセキュリティ設定が非常に重要になります。

まずは「箱」を用意するつもりで進めてください。

Streamlit Cloudと連携してURLを発行する

GitHubにコードを置いたら、Streamlit Cloudというサービスと連携させます。

ボタンを数回クリックするだけで、自動的にあなたのアプリがWeb上で立ち上がります。

完了すると、自分専用のURLが発行されます。

これをスマホのブラウザで開けば、いつでもどこでもあなたの投資成績が表示されます。

自分でサーバーを契約して設定する必要がないため、驚くほど短時間で公開までこぎつけることができます。

APIキーや機密情報をSecret設定で守る

もしAPIキーや特定の銘柄情報など、他人に知られたくないデータがある場合は、GitHubのコードの中に直接書いてはいけません。

Streamlit Cloudの設定画面にある「Secrets」という場所に保存しましょう。

ここに書き込んだ情報は、プログラムからは呼び出せますが、外部からは絶対に見えません。

大切な情報を「見えない金庫」に預けることで、安全に運用を続けることができます。

セキュリティを怠ると、最悪の場合、資産を危険にさらすことにもなりかねません。

「秘密の情報はSecretsへ」というルールを徹底しましょう。

スマホから快適に閲覧するための最適化

アプリが公開できたら、最後はスマホでの使い心地を極めましょう。

Streamlitは標準でスマホ表示に対応していますが、もう一工夫加えるだけで「毎日開きたくなるアプリ」に変わります。

この章では、スマホ特化の設定や、画面をスッキリさせるためのテクニックを紹介します。

投資のチェックが、通知を確認するのと同じくらい手軽になる環境を目指しましょう。

スマホのホーム画面にアイコンを追加する

ブラウザのメニューから「ホーム画面に追加」を選びましょう。

これにより、あなたの自作ダッシュボードが、普通のアプリと同じようにホーム画面に並びます。

アイコンをタップするだけで、一瞬で資産状況が表示されるようになります。

この「手軽さ」が、家計管理や投資管理を継続するための最大のスパイスになります。

自分専用のアイコンがスマホに並ぶのは、投資家として少し誇らしい気持ちになれる瞬間です。

タブ機能(st.tabs)を使って画面の密度を下げる

スマホの小さな画面に情報を詰め込みすぎると、何を見ればいいか分からなくなります。

st.tabs を使って、情報をカテゴリーごとに分けましょう。

  • タブ1:今日の要約(メトリック中心)
  • タブ2:チャート分析(大きなグラフ)
  • タブ3:保有銘柄一覧(詳細な表)

このようにタブで切り替えることで、画面をスッキリさせつつ、必要な情報へすぐにアクセスできるようになります。

情報の「引き算」を意識して、ストレスのない画面設計を心がけましょう。

ダークモードとライトモードを使い分ける

Streamlitの設定画面で、見た目の色味(テーマ)を変更できます。

目に優しいダークモードに設定しておけば、夜の市場確認も快適です。

また、チャートの色味もテーマに合わせて自動で調整されるため、プロが作ったような洗練されたデザインが保たれます。

自分が一番「読みやすい」と感じる設定にカスタマイズしましょう。

視覚的な快適さは、冷静な判断を下すための意外な重要ポイントです。

まとめ:自作ダッシュボードで投資をもっとスマートに

この記事では、PythonとStreamlitを使って、自分専用の投資ダッシュボードを自作する方法を解説しました。

要点を振り返ってみましょう。

  1. Streamlit なら、Pythonの知識だけでモダンなWebアプリを構築できる。
  2. yfinance を活用して、日本株・米国株のデータを自動で取得する仕組みを作る。
  3. カード形式(metric)やグラフ(Plotly) を使い分け、直感的に状況を把握する。
  4. Streamlit Cloud で公開すれば、外出先でもスマホから成績をチェックできる。
  5. Secrets設定やIP制限 など、セキュリティにも配慮して安全に運用する。

既存のツールに自分を合わせるのではなく、自分の投資スタイルにツールを合わせる。この一歩が、投資の解像度を劇的に高めてくれます。まずは「現在の総資産」を表示するだけのシンプルな画面から、最初の一歩を踏み出してみませんか。

よかったらシェアしてね!
  • URLをコピーしました!

この記事を書いた人

目次