個人用に作っている 日本株スクリーニング（yfinance × わが投資術） の、ここ数か月の変更と検証の試行錯誤をメモしておきます。
詳しい作り方やデータ取得の手順は、すでに次の記事に書いておりますので、みてみたい方は以下を参照ください。
本記事では近況のアップデートや、Claude などで DESIGN.md を試してみた話です。
過去の記事
- Zenn — 日本株3700社以上を分析。yfinance x「わが投資術」株式スクリーニングアプリを作った話（バイブコーディング）
- note — 【わが投資術】ほぼ全上場銘柄＋米国株を網羅。1.3万銘柄から割安株を探す分析アプリ
今回のアップデート
そのあと、次のような変更を入れました。
- CSV をブラウザに記憶: 一度読み込んだ CSV をブラウザ側に保持し、後から同じデータでそのままスクリーニングできるようにしました。地味に毎回アクセスするたびに消えてしまうのは微妙かなと思って記憶するようにしました。
- 検索プリセット: よく使う条件を プリセットとして保存と適用できるようにしました。
- スクリーニング結果の UX/UI: 見やすさ・操作しやすさを中心に、細かい画面まわりを調整しました。
見た目の変化は、だいたい次のキャプチャのとおりです（上が変更前、下が変更後。Dataset の表示やお気に入りタブ・列の表示切り替えなど、今回の機能に合わせてレイアウトと配色を組み直しています）。
Claude で「もっと現代的でスクリーニングしやすい UI に」と投げてみた
アプリの見た目をもう一段モダンにしたい気持ちがあり、Claude 上で次のようなプロンプトを試しました。
このデザインをもっと現代的でスクリーニングしやすいインターフェイスにしたい
（対象 URL:https://yfinance-jp-screener-search.vercel.app/）
返ってきたのは、なんかスッキリしてそうな感じのUI。
まぁいいかなぁ〜とか思いつつも。。
とりあえずは参考程度にと止めることにしました。
個人的にはリデザインなら Google Stitch がいいかなと思います。
design-md で Wise 風を当ててみた
次に試したのが DESIGN.md です。Google Labs の Stitch が案内しているものです。
getdesign.md ではさまざまなwebサービス風のサンプルが配布されています。
ちなみに、日本語版にも対応したこんなものも用意してくれた方がおりました。（ありがたい）
とりあえず、好みのトーンだった Wise の design-md（Wise / design-md）を取り、自分のアプリに当てはめてみました。
どうやって当てはめたかは、ローカルに DESIGN.md としておいておいて、Claude か Cursor に読み込ませて現在のデザインをそのまま変更してとプロンプトしただけです。
ボタンや色味などもwiseっぽくなって、自分好みになったんですが。。
まぁ、そこまでパッとした感じではなかったので、これもとりあえず置いておきます。
おわりに
webなどはDESIGN.mdなどで簡単に宣言ファイルをおいておいて、リミックスしてデザインも作るという感じになっていきそうですね。
ゲーム業界にもこういう感じでさまざまな分野でテキストベースで宣言して、開発していくっていう感じになっていきそうかなと思ってます。
ますます、０から１を作るひとが強くなっていきそうかなぁと感じております。
- バイブコーディング全体の文脈: バイブコーディングで3つ作った体験談
- Actions のストレージで詰まったときのメモ: GitHub Actions の無料プランでストレージ上限に達したときの対策
