[{"data":1,"prerenderedAt":493},["ShallowReactive",2],{"content-/camera-exposure-simulator":3,"related-/camera-exposure-simulator":445,"all-pages-for-dir":491,"og-image-/camera-exposure-simulator":492},{"id":4,"title":5,"body":6,"category":423,"description":424,"extension":425,"meta":426,"navigation":427,"path":428,"project_name":429,"published":430,"publishedAt":431,"seo":432,"stem":433,"tags":434,"todo":443,"unpublished":430,"updatedAt":443,"__hash__":444},"pages/2026-06/2026-06-14/camera-exposure-simulator.md","カメラの露出シミュレーターを Nuxt のページに移植して、SS/F値/ISO の三角関係を体感する",{"type":7,"value":8,"toc":404},"minimark",[9,14,52,55,59,67,70,73,75,79,86,121,128,135,138,140,144,147,153,160,165,168,178,201,208,212,219,226,229,231,235,238,242,263,266,270,285,292,294,297,300,305,320,322,325,344,347,349,353,360,375,382,384,387],[10,11,13],"h2",{"id":12},"tldr","TL;DR",[15,16,17,30,38,49],"ul",{},[18,19,20,29],"li",{},[21,22,28],"a",{"href":23,"target":24,"rel":25},"https://logcamera.com/roshutu_sim/","_blank",[26,27],"noopener","noreferrer","logcamera.com の露出シミュレーター"," を参考に、SS（シャッタースピード）・F値（絞り）・ISO の3パラメータをスライダーで動かす Vue ページを作った",[18,31,32,33,37],{},"最初は「シャッタースピードを変えるだけで明るさが変わってしまう」挙動でユーザーが違和感を覚えた → 実は物理的には正しい（Mモード相当）が、",[34,35,36],"strong",{},"初学者には何が原因で何が結果か分からなくなる","ことに気づいた",[18,39,40,41,44,45,48],{},"解決策として「",[34,42,43],{},"効果を学ぶ","」モードと「",[34,46,47],{},"露出を学ぶ","」モードの2モード切替を追加。前者は brightness を固定して各パラメータの効果（ボケ・ブレ・ノイズ）だけ観察できる",[18,50,51],{},"トップページのコンテンツ一覧の一番後ろに導線を追加した",[53,54],"hr",{},[10,56,58],{"id":57},"きっかけ-ロカメラのシミュレーターが面白かった","きっかけ: ロカメラのシミュレーターが面白かった",[60,61,62,63,66],"p",{},"朝、",[21,64,28],{"href":23,"target":24,"rel":65},[26,27]," を眺めていて、これは自分の Nuxt プロジェクトにも欲しいと思った。",[60,68,69],{},"3つのスライダー（F値・SS・ISO）を動かすと、プレビューがリアルタイムにボケたりブレたり、ノイズが乗ったりする。カメラを触ったことがない人でも「F値を開くと背景がボケる」「SS を遅くすると動く被写体がブレる」「ISO を上げるとザラつく」が一画面で体感できる。",[60,71,72],{},"似たものを自前で作って、トップページから辿れるようにしようと決めた。",[53,74],{},[10,76,78],{"id":77},"実装1-3スライダー-svg-プレビュー","実装1: 3スライダー + SVG プレビュー",[60,80,81,85],{},[82,83,84],"code",{},"apps/web/app/pages/exposure-simulator.vue"," を新規作成した。構成は次の通り。",[15,87,88,94,115],{},[18,89,90,93],{},[34,91,92],{},"3スライダー",": F値（1.4〜22）、SS（30秒〜1/4000秒）、ISO（100〜25600）",[18,95,96,99,100],{},[34,97,98],{},"SVG プレビュー",": 風景の上に「立っている人」と「走っている人」を並べる\n",[15,101,102,105,112],{},[18,103,104],{},"F値を絞ると背景がシャープに、開くと背景にぼかしフィルタがかかる",[18,106,107,108,111],{},"SS を遅くすると ",[34,109,110],{},"走っている人だけ"," モーションブラーが乗る（立っている人はシャープなまま）",[18,113,114],{},"ISO を上げるとプレビュー全体に SVG のノイズフィルタが乗る",[18,116,117,120],{},[34,118,119],{},"露出メーター",": 3つの値から EV を計算して「-2EV（アンダー）/ 適正 / +2EV（オーバー）」を表示",[60,122,123,124,127],{},"立っている人と走っている人を並べたのは、",[34,125,126],{},"SS の効果を分かりやすく見せたかった","から。ロカメラのシミュレーターも同じ構図で、動く被写体だけがブレることが伝わるようになっていた。",[60,129,130,131,134],{},"dev サーバーを起動して開くと、最初のプレビューは真っ白だった。初期値のままだと露出オーバーで白飛びしていた。",[34,132,133],{},"挙動としては物理的に正しい","ので、初期値を「晴天で適正露出になる組み合わせ」（F8、1/250秒、ISO100）に直した。",[60,136,137],{},"夜景・F1.4・1/15秒・ISO3200 に振ると、左の立っている人はシャープ、右の走者だけが大きくブレて流れる。参考にした logcamera.com と同じ「動く被写体だけブレる」表現になった。",[53,139],{},[10,141,143],{"id":142},"バグ発覚-ss-だけで明るさが変わるのは間違いか","バグ発覚: 「SS だけで明るさが変わる」のは間違いか?",[60,145,146],{},"完成したつもりで報告したら、ユーザーから指摘が入った。",[148,149,150],"blockquote",{},[60,151,152],{},"シャッタースピードを変えるだけで、なんか光の露出が変わってるんですけど、これは間違ってませんかね。",[60,154,155,156,159],{},"最初は「バグかも」と思って計算式を見直そうとした。が、ここで踏みとどまって",[34,157,158],{},"物理的な仕様を整理","した。",[161,162,164],"h3",{"id":163},"ev-の計算式","EV の計算式",[60,166,167],{},"露出値 EV は次の式で決まる。",[169,170,175],"pre",{"className":171,"code":173,"language":174},[172],"language-text","EV = log2(F² / SS) - log2(ISO / 100)\n","text",[82,176,173],{"__ignoreMap":177},"",[15,179,180,187,194],{},[18,181,182,183,186],{},"F値を",[34,184,185],{},"絞る","（数字を大きくする）→ EV が増える → 暗くなる",[18,188,189,190,193],{},"SS を",[34,191,192],{},"速くする","（1/4000秒など）→ EV が増える → 暗くなる",[18,195,196,197,200],{},"ISO を",[34,198,199],{},"下げる","（100など）→ EV が増える → 暗くなる",[60,202,203,204,207],{},"つまり SS だけを動かしても明るさは変わる。",[34,205,206],{},"これがカメラのMモード（マニュアル）の挙動そのもの","で、参考のロカメラも同じ作りだった。",[161,209,211],{"id":210},"でも初学者には何が原因か分からない","でも、初学者には何が原因か分からない",[60,213,214,215,218],{},"物理は正しい。ただ、シミュレーターの",[34,216,217],{},"学習目的","から考えると話が変わる。",[60,220,221,222,225],{},"「SS の効果を知りたい」だけの人がスライダーを動かすと、ブレ（SS 本来の効果）と明るさ（露出の合成結果）が",[34,223,224],{},"同時に","変わる。何が SS の効果で、何が露出の話なのか切り分けられない。",[60,227,228],{},"これは「3つを同時に動かして適正露出にバランスする」というカメラ学習者向けの設計が、「個別効果だけ観察したい」入門者向けの設計と衝突しているということだった。",[53,230],{},[10,232,234],{"id":233},"解決-2モード切替","解決: 2モード切替",[60,236,237],{},"両方のニーズに応えるため、画面上部にトグルを追加して2モードを切り替えられるようにした。",[161,239,241],{"id":240},"モード1-効果を学ぶbrightness-固定","モード1: 「効果を学ぶ」（brightness 固定）",[15,243,244,251,254,257,260],{},[18,245,246,247,250],{},"プレビューの ",[34,248,249],{},"brightness は常に固定","（自動で適正露出になる前提）",[18,252,253],{},"露出メーターは隠す",[18,255,256],{},"F値 = 背景ボケ「だけ」が変わる",[18,258,259],{},"SS = 走者のブレ「だけ」が変わる",[18,261,262],{},"ISO = ノイズ「だけ」が変わる",[60,264,265],{},"これで「SS を 1/15秒まで遅くしても背景の空と地面の明るさは変わらず、走者だけがブレて流れる」という観察ができる。立っている人は変わらずシャープなまま。",[161,267,269],{"id":268},"モード2-露出を学ぶmモード相当","モード2: 「露出を学ぶ」（Mモード相当）",[15,271,272,275,278],{},[18,273,274],{},"3つの値から EV を計算してプレビューの brightness に反映",[18,276,277],{},"露出メーターを表示し、適正/オーバー/アンダーを示す",[18,279,280,281,284],{},"「SS を速くしたら ISO を上げて補う」のような",[34,282,283],{},"三角関係","を体感できる",[60,286,287,288,291],{},"ユーザーの「明るさが変わるのはバグでは」という違和感は、設計レベルでは正しかった。物理を曲げるのではなく、",[34,289,290],{},"学習目的ごとにモードを分ける","のが正解だった。",[53,293],{},[10,295,296],{"id":296},"トップページへの導線追加",[60,298,299],{},"実装が落ち着いたところで、ユーザーから次の指示。",[148,301,302],{},[60,303,304],{},"トップページにもちゃんとあれですかね、物質シミュレーターみたいなやつでページ作ってくれてましたっけ?  まだ作ってないか。じゃあこれ、コンテンツのところに入れといてもらえますか? 順番は一番後ろでいいです。",[60,306,307,308,311,312,315,316,319],{},"トップページ（",[82,309,310],{},"apps/web/app/pages/index.vue","）の「学習・クイズ」セクションの",[34,313,314],{},"一番後ろ","にカードを追加した。タイトルは「カメラの露出シミュレーター」、リンク先は ",[82,317,318],{},"/exposure-simulator","。",[53,321],{},[10,323,324],{"id":324},"できたもの",[15,326,327,332,338],{},[18,328,329,330],{},"ページ: ",[21,331,318],{"href":318},[18,333,334,335,337],{},"ソース: ",[82,336,84],{},"（新規 / 719行）",[18,339,340,341],{},"コミット: ",[82,342,343],{},"ab4d8029 feat(exposure-simulator): F値/SS/ISOの3要素シミュレーターを追加",[60,345,346],{},"スライダーを動かすと、SVG の風景の上で走者だけがブレ、背景がボケ、全体にノイズが乗る。「効果を学ぶ」モードでは brightness が固定で各パラメータの効果が単独で見える。「露出を学ぶ」モードでは EV メーターが動いて、3つの値のバランスを意識する練習ができる。",[53,348],{},[10,350,352],{"id":351},"学び-物理的に正しい-学習者にとって分かりやすい","学び: 物理的に正しい != 学習者にとって分かりやすい",[60,354,355,356,359],{},"カメラのシミュレーターを作っていて、いちばん勉強になったのは、",[34,357,358],{},"「物理的に正しい挙動」と「学習者にとって理解しやすい挙動」が別物だった","ことだった。",[15,361,362,365,372],{},[18,363,364],{},"バグとして指摘されたが、計算式を直すべきだったわけではない",[18,366,367,368,371],{},"直すべきは",[34,369,370],{},"情報の見せ方","で、目的ごとに UI を分ければ両立する",[18,373,374],{},"「Mモードでカメラを操作する人」と「SS の効果だけ知りたい初心者」は、同じ画面では満足できない",[60,376,377,378,381],{},"このパターンは、シミュレーター以外でも応用が効きそう。複数の変数が絡む現象を可視化するとき、「全部同時に動かす」モードと「1つずつ動かす」モードの両方を用意すると、学習者が",[34,379,380],{},"因果を追える","画面になる。",[53,383],{},[10,385,386],{"id":386},"関連",[15,388,389,396],{},[18,390,391,392],{},"参考にしたサイト: ",[21,393,395],{"href":23,"target":24,"rel":394},[26,27],"ログカメラ 露出シミュレーター",[18,397,398,399],{},"露出（EV）の定義: ",[21,400,403],{"href":401,"target":24,"rel":402},"https://ja.wikipedia.org/wiki/%E9%9C%B2%E5%87%BA%E5%80%A4",[26,27],"Wikipedia: 露出値",{"title":177,"searchDepth":405,"depth":405,"links":406},2,[407,408,409,410,415,419,420,421,422],{"id":12,"depth":405,"text":13},{"id":57,"depth":405,"text":58},{"id":77,"depth":405,"text":78},{"id":142,"depth":405,"text":143,"children":411},[412,414],{"id":163,"depth":413,"text":164},3,{"id":210,"depth":413,"text":211},{"id":233,"depth":405,"text":234,"children":416},[417,418],{"id":240,"depth":413,"text":241},{"id":268,"depth":413,"text":269},{"id":296,"depth":405,"text":296},{"id":324,"depth":405,"text":324},{"id":351,"depth":405,"text":352},{"id":386,"depth":405,"text":386},"dev","logcamera.com の露出シミュレーターを参考に、シャッタースピード・絞り・ISO の3パラメータをスライダーで動かせるブラウザシミュレーターを Vue ページとして実装した。最初は『SS を変えると明るさだけが変わってブレが出ない』バグに気づき、効果学習モードと露出学習モードの2モードに分けて解決した記録。","md",{},true,"/camera-exposure-simulator","mdx-playground",false,"2026-06-14T00:00:00.000Z",{"title":5,"description":424},"2026-06/2026-06-14/camera-exposure-simulator",[435,436,437,438,439,440,441,442],"Vue","Nuxt","SVG","カメラ","露出","シミュレーター","EV","UI",null,"vhMXdbXQQPlbOqe18tOWnMdHVcW7FRln1x1qsaEccOs",[446,455,462,470,479],{"title":447,"description":448,"path":449,"tags":450,"publishedAt":431,"updatedAt":443},"宅建オリジナル教科書プロジェクト Phase 1.5 着手 — 金型 5_1『宅地建物取引業・免許』の本文 + SVG 17 枚をサブエージェント並列で生成した","宅建オリジナル教科書（6 分野 × 49 カテゴリ）の Phase 0（設計確定）から Phase 1.5（金型カテゴリ 5_1『宅地建物取引業・免許』の本文と SVG 17 枚生成）まで一気に着手した。Phase 0 でハブシェル・トップカード・進捗ダッシュボードを揃え、Phase 1 で 6 分野の章立てマスター（H2 227 個 / H3 310 個 / SVG 537 枚）をサブエージェント 6 並列で生成。Phase 1.5 で 5_1 の本文と SVG を並列起動した直後にユーザーから『本文まだできてないってこと？』と指摘されて進捗計画書をまとめ直した一日の記録。3 月 21 日に作った宅建 SVG の手順を思い出すくだりも含む。","/takken-textbook-phase-1-5-start",[451,452,437,453,454,436,435],"宅建","教科書","コンテンツ生成","サブエージェント",{"title":456,"description":457,"path":458,"tags":459,"publishedAt":431,"updatedAt":443},"ガイド /tokibo に第1〜8章を俯瞰する『イントロダクション』を入れて、各章へのSVG地図リンクを埋め込んだ","/tokibo の入口に独立した導入ページを置き、1枚のSVG地図と章別カードで全体構成を見せる。地図のカードをクリックすると章ページへ飛び、各SVGをクリックするとモーダルで拡大、ESCで閉じる挙動を他ページと揃えた。","/tokibo-introduction-chapter",[460,437,461,435,436],"tokibo","ナビゲーション",{"title":463,"description":464,"path":465,"tags":466,"publishedAt":469,"updatedAt":443},"アナレンマ・シミュレーターをダークテーマ＆ドラッグ操作に全面刷新し、視点切替シミュレーションを追加した","「もっとインタラクティブでかっこよく」の一言から始まったアナレンマ・シミュレーターの刷新記録。プラネタリウム風ダークテーマ、ドラッグ操作、北極/南極の視点切替ページ追加までの試行錯誤をまとめた。","/analemma-simulator-redesign",[467,440,468,435,437],"アナレンマ","インタラクティブ","2026-06-10T00:00:00.000Z",{"title":471,"description":472,"path":473,"tags":474,"publishedAt":478,"updatedAt":443},"Micron個別ページを作った（工場マップ＋月間キャパシティ詳細）","/memory-makers/micron を新規作成。USA / Japan / Taiwan の工場地図をSVGで描き、Fab別の月間キャパシティ推移を5マイルストーンで可視化した。3カラムから上下レイアウトへ作り直し、会計四半期に暦月併記を足すまでの過程をまとめる。","/micron-fab-page-with-capacity-map",[475,476,477,435,437,436],"Micron","DRAM","memory-makers","2026-06-07T00:00:00.000Z",{"title":480,"description":481,"path":482,"tags":483,"publishedAt":490,"updatedAt":443},"財務諸表クイズの実装 - SVGハイライト連動と左右2カラムレイアウト","BS/PL/CFのブラケット構造SVGをスキル化し、クイズ回答に応じてマゼンタで該当箇所を強調する財務諸表学習ページを実装。書籍2026年版の取り込みからPhase 3のサブエージェント並列展開まで。","/financial-statements-quiz",[484,485,486,487,488,489],"svg","vue","nuxt","quiz","financial-statements","accounting","2026-05-12T00:00:00.000Z",[],"https://log.eurekapu.com/og/blog/camera-exposure-simulator.png?v=2026-06-14T00%3A00%3A00.000Z&title=%E3%82%AB%E3%83%A1%E3%83%A9%E3%81%AE%E9%9C%B2%E5%87%BA%E3%82%B7%E3%83%9F%E3%83%A5%E3%83%AC%E3%83%BC%E3%82%BF%E3%83%BC%E3%82%92%20Nuxt%20%E3%81%AE%E3%83%9A%E3%83%BC%E3%82%B8%E3%81%AB%E7%A7%BB%E6%A4%8D%E3%81%97%E3%81%A6%E3%80%81SS%2FF%E5%80%A4%2FISO%20%E3%81%AE%E4%B8%89%E8%A7%92%E9%96%A2%E4%BF%82%E3%82%92%E4%BD%93%E6%84%9F%E3%81%99%E3%82%8B&author=Kei%20Komatsu&sig=ddb8d7801e08c776",1781483079154]