シネマティック写真ジェネレーター: 写真1枚を映画のワンシーンのように色補正し、画面比の帯と字幕を加えて元の解像度で保存します
写真が映画の一場面のように見える要素は、大きく3つあります。1つ目は色補正です。映画は撮影した映像をそのまま使わず、シャドウとハイライトの色、コントラスト、彩度をシーンの雰囲気に合わせて決め直します。こうして決めた色のまとまりを、一般にルック(look)と呼びます。2つ目は画面比です。劇場用映画ではテレビやスマートフォンの写真より横に長い1.85:1や2.39:1の画面がよく使われ、それを別の比率の画面に収めると、上下に黒い帯(レターボックス)ができます。3つ目は、字幕やフィルムの粒子といった仕上げです。
上のツールは、この3つを写真1枚にまとめて適用します。写真を選ぶと、モニターに2.39:1の帯と字幕を入れた仕上がりがすぐ表示され、下のジャンルリールには同じ写真で描いたルック20種が並びます。ルックをタップすると、右側のベクトルスコープの点が元の色から新しい色へ移動し、色がどちらへ動いたかが分かります。最初の画面は、CC0で公開されている公園の写真にティール & オレンジを適用した状態です。写真はサーバーに送信されず、このブラウザー内だけで処理されます。
写真を映画のワンシーンのように仕上げる理由
シネマティックな補正は、写真をより正確にする作業ではありません。見る人に、その写真の前後に物語があると感じさせるための作業です。次のような場面で特に役立ちます。
- 1枚の写真に場面の空気を与えたいとき: 横に長い画面、上下の帯、下に置いた字幕1行があるだけで、何気ない散歩の写真も映画の一場面のように読めます。字幕の文言が、写真にはなかったセリフや心の声を補ってくれるためです。
- 旅行や日常の写真をひとつの作品のようにそろえたいとき: 別の日、別の光で撮った写真も、同じルックと同じ画面比にそろえると、1本の映画から切り出した場面のようにつながって見えます。このツールは、新しい写真を開いても、選んだルック・調整値・画面比をそのまま保ちます。
- 動画を撮る前に色の方向を決めたいとき: ショートムービーやミュージックビデオの準備で、撮影場所の写真にルックを適用してみると、一緒に作る相手と、目指す色を言葉ではなく画像で共有できます。ベクトルスコープは、色が実際にどちらへ傾いたかを数値とともに示します。
- サムネイル・ポスター・招待状の案を作るとき: 帯と字幕を入れた場面写真は、そのままタイトルカードのように使えます。帯の中に字幕を入れれば、絵柄を隠さずに文言を載せられます。
使い方
- 写真を選ぶを押すか、写真を作業エリアにドラッグ&ドロップします。コピーした写真は、貼り付け(Ctrl+V、⌘+V)でも開けます。
- モニターの下で画面比(元の比率・16:9・1.85:1・2.39:1)を選び、帯を入れる(写真のサイズはそのままで、黒い帯で隠す)か切り抜く(その比率で切り抜いて保存する)のどちらかを選びます。
- 写真に余る部分があると、モニターの右下にドラッグで位置を調整するハンドルが表示されます。モニターをドラッグするか(スマートフォンではハンドルをドラッグして)、ハンドルを押してから矢印キーで、画面に収める範囲を動かします。
- ジャンルリールの20マスから、気に入ったルックを押します。各マスには、いま開いている写真にそのルックを適用した姿が表示され、ベクトルスコープの点と矢印も新しい色へ移動します。
- 元の色を見るを押すと、帯と字幕はそのままで色だけが元に戻り、見比べられます。もう一度押すと、ルックが戻ります。
- 強度でルック全体を弱め、露出・色温度・コントラスト・彩度・粒子・周辺減光を写真に合わせて足したり引いたりします。リセットで戻るのは、強度と調整値だけです。
- 字幕欄に2行までの文言を入力し、色(白・黄)と位置(画面内・下の帯)を選びます。空欄のままなら、字幕は入りません。
- 保存形式(JPG・PNG・WebP)を選んで保存を押します。スマートフォンでは共有から、ほかのアプリへ直接送れます。
ルック20種と補正値
下の表は、強度100%のときにルックごとに適用される値です。露出・色温度・色かぶり・コントラスト・彩度は−100〜+100、フェード・周辺減光・粒子は0〜100です。シャドウの色とハイライトの色は、色相環の角度(0°が赤、120°が緑、240°が青)と染める量で表しています。強度を下げると、すべての値が同じ割合で小さくなります。たとえば強度50%のティール & オレンジでは、シャドウの色の量が85から42.5に、コントラストが+22から+11になります。
| ジャンル | ルック | 露出 | 色温度 | 色かぶり | コントラスト | 彩度 | フェード | シャドウの色 | ハイライトの色 | 周辺減光 | 粒子 |
|---|---|---|---|---|---|---|---|---|---|---|---|
| ブロックバスター | ティール & オレンジ | 0 | +8 | 0 | +22 | +12 | 0 | 190° · 85 | 32° · 60 | 18 | 8 |
| ブロックバスター | 0 | +6 | 0 | +38 | +20 | 0 | 200° · 35 | 35° · 25 | 22 | 6 | |
| アクション | −6 | −14 | 0 | +32 | −28 | 0 | 205° · 45 | 40° · 15 | 25 | 12 | |
| ブリーチバイパス | −4 | −4 | 0 | +48 | −58 | 0 | – | – | 20 | 24 | |
| ノワール・スリラー | フィルムノワール | −10 | 0 | 0 | +58 | −100 | 0 | – | – | 45 | 30 |
| ネオノワール | −18 | −6 | +16 | +30 | +18 | 0 | 285° · 60 | 185° · 38 | 32 | 12 | |
| スリラー | −8 | −18 | −10 | +26 | −32 | 0 | 180° · 40 | 60° · 10 | 30 | 10 | |
| デイ・フォー・ナイト | −100 | −75 | +4 | +20 | −55 | 0 | 225° · 60 | 215° · 30 | 35 | 8 | |
| 監督風 | ウェス・アンダーソン風 | +8 | +12 | +12 | −18 | +8 | 22 | 340° · 25 | 45° · 30 | 0 | 4 |
| ウォン・カーウァイ風 | −6 | +16 | −14 | +26 | +30 | 0 | 150° · 45 | 5° · 60 | 35 | 18 | |
| デヴィッド・フィンチャー風 | −10 | +6 | −18 | +30 | −42 | 0 | 170° · 25 | 55° · 32 | 28 | 8 | |
| クリストファー・ノーラン風 | 0 | −4 | 0 | +24 | −12 | 0 | 205° · 25 | 35° · 12 | 16 | 10 | |
| SF | サイバーパンクネオン | −12 | −8 | +24 | +30 | +25 | 0 | 190° · 60 | 320° · 45 | 35 | 12 |
| デジタルグリーン | −8 | −6 | −45 | +30 | −30 | 0 | 130° · 45 | 100° · 25 | 25 | 8 | |
| SFブルー | +6 | −36 | 0 | +15 | −25 | 6 | 215° · 40 | 200° · 15 | 15 | 4 | |
| オレンジの靄 | +4 | +48 | +8 | −6 | −10 | 18 | 20° · 40 | 32° · 52 | 20 | 10 | |
| ドラマ・ロマンス | ゴールデンアワー | +5 | +35 | +4 | +12 | +12 | 0 | 25° · 20 | 40° · 45 | 15 | 6 |
| ロマンス | +10 | +15 | +15 | −12 | 0 | 14 | 330° · 25 | 30° · 30 | 10 | 4 | |
| インディー映画 | 0 | +5 | 0 | −10 | −22 | 25 | 180° · 15 | 45° · 15 | 15 | 16 | |
| ヨーロッパ映画 | 0 | −10 | 0 | +8 | −30 | 10 | 200° · 25 | 50° · 12 | 18 | 12 |
ジャンルは、映画でよく見る色の方向で分けたものです。ブロックバスターはコントラストと色を強め、ノワール・スリラーは画面を暗く冷たく沈めます。監督風はその監督の映画を思わせる色の方向、SFは1色に大きく傾いた画面、ドラマ・ロマンスは暖かく柔らかい画面をそれぞれ収めています。監督の名前が付いたルックは、このツールが独自に解釈して決めたもので、実際の映画の色補正値を写したものではありません。
画面比とレターボックス: 2.39:1と1.85:1の由来
劇場用映画の画面比は、デジタルシネマの規格で画像サイズとして定められています。Digital Cinema Initiatives(DCI)の仕様書は、2K上映用の画像サイズの例として、1.85の画面で1998 × 1080 px、2.39の画面で2048 × 858 pxを挙げ、4Kでは3996 × 2160 pxと4096 × 1716 pxを挙げています。1.85の画面は「フラット」、2.39の画面は「スコープ」と呼ばれるのが一般的です。16:9はHDテレビの画面(1920 × 1080 px)の比率で、YouTubeの動画やノートパソコンの画面と同じです。
このツールの帯を入れるは、写真のサイズをそのままに、その中で選んだ画面比の映像部分を決め、余った上下(または左右)を黒く塗ります。映像部分は常に中央に置かれるため、上下の帯の厚さは等しくなります。ハンドルで動かすのは、写真のどの部分を映像部分に収めるかです。切り抜くは映像部分だけを残して残りを切り落として保存するので、帯はありません。下の表は、横位置の写真(4:3)とスマートフォンの縦位置の写真(9:16)で、画面比ごとの映像部分と帯の厚さがどうなるかを示しています。
| 画面比 | 4:3写真の映像部分 | 帯の厚さ | 9:16写真の映像部分 | 帯の厚さ |
|---|---|---|---|---|
| 16:9 | 4000 × 2250 | 375 | 1080 × 608 | 656 |
| 1.85:1 | 4000 × 2162 | 419 | 1080 × 584 | 668 |
| 2.39:1 | 4000 × 1674 | 663 | 1080 × 452 | 734 |
縦位置の写真に2.39:1の帯を入れると、映像部分は1080 × 452 pxに狭まり、上下に734 pxずつの帯ができます。縦長の画面に横長の映画の一場面を収めたような効果が出ますし、帯が広いので、下の帯に字幕を入れるのにも向いています。映画でも、画面比は演出の手段として使われます。American Cinematographerは、『グランド・ブダペスト・ホテル』が1985年・1968年・1932年を行き来しながら、時代ごとに画面比を切り替えていると紹介しています。
ベクトルスコープの読み方
ベクトルスコープは、映像の色補正で使う測定画面で、写真の画素1つ1つの色を、円形の盤面上の点として描きます。このツールは、ITU-R BT.709の式で輝度 Y′ = 0.2126R′ + 0.7152G′ + 0.0722B′ を求めたうえで、青側の色差 Cb = (B′ − Y′) ÷ 1.8556 を横軸に、赤側の色差 Cr = (R′ − Y′) ÷ 1.5748 を縦軸に置きます。そのため、グレー・白・黒のように色のない画素は中心に集まり、色が濃いほど外側へ出ます。明るさは、点の位置には現れません。
- 縁のR・Yl・G・Cy・B・Mgは、赤・黄・緑・シアン・青・マゼンタの方向です。点の集まりがどの方向へ広がっているかを見れば、写真がどの色に傾いているかが分かります。
- 目盛り: 写真の中の色はたいてい薄めなので、このツールは映像機器の2倍拡大のように、外側の円を色の濃さ50、内側の円を25として描きます。色の濃さは、Cb・Cr平面で中心までの距離を200倍した値で、グレーは0、75%の強さの赤は約77です。外側の円より濃い色は、縁に張り付けて描きます。
- 点線は肌色ラインです。Tektronixは、人の肌の色が、赤と黄のターゲットの間にあるこの線のすぐ近く、離れても10度か20度以内に写ると説明しています。人物写真で肌の点がこの線から大きく外れていたら、肌が緑やマゼンタに染まっています。
- グレーの点は元の色、色付きの点はルックを適用した色で、白い矢印はすべての点の平均がどこからどこへ動いたかを示します。下の数字は、元の写真とルックの平均の色の濃さです。
ティール & オレンジが人物写真でよく使われる理由も、ベクトルスコープで見えてきます。肌の色は肌色ライン付近(オレンジ側)に集まり、その反対側がシアン寄りです。シャドウと背景をシアン寄りのティールに、ハイライトと肌をオレンジに寄せると、点の集まりが互いに反対側の2方向へ開き、人物と背景の色の差が大きくなって、人物が背景から浮かび上がって見えます。たとえば肌色の画素 (224, 172, 140) は、もとは肌色ラインから6°離れた129°の位置にありますが、ティール & オレンジ(強度100%)を適用すると (244, 177, 122) になり、134°の位置へ移って外側へ出ます。青みがかったグレー (120, 150, 170) は (116, 156, 172) になり、シアン側へ動きます。
計算の順序
プレビューと保存は、同じ順序で計算します。保存時は元の解像度で計算し直すため、プレビューより粒子が細かい点を除けば、色も配置も同じ結果になります。
- 映像部分の切り出し: 選んだ画面比に合わせて、写真から収める範囲を決めます。写真がその比率より横長なら左右を、縦長なら上下を削り、ハンドルの位置(0〜100%)に応じて削る量を両側に配分します。
- 色: チャンネルごとにsRGB値をリニアな光に変換して、露出(±100 = ±1 EV)と色温度・色かぶりを掛け、再びsRGBに戻してからコントラストカーブとフェードを適用します。続いて、BT.709の輝度を基準に彩度を変え、シャドウ(暗いほど強く)とハイライト(明るいほど強く)にそれぞれの色を混ぜます。この計算は、同じサイトのムード写真ジェネレーターと同じコードです。
- 周辺減光: 映像部分の中心からの距離に応じて、縁を暗くします。基準は帯の内側の映像部分なので、帯を入れても周辺減光が帯に隠れることはありません。
- 粒子: 同じシード値から作ったノイズの模様を重ねます。模様1マスの大きさは映像部分の短辺の0.12%で、写真のサイズが違っても、粒子の粗さは同じ割合に見えます。
- 帯と字幕: 映像部分の外側を黒く塗り、字幕を描きます。文字サイズは映像部分の幅の2.6%(映像部分の高さの9%以下)で、最も長い行が映像部分の幅の92%を超えたら、その分だけ縮めます。画面内の字幕には黒い縁取りを付け、明るい背景でも読めるようにします。
グレーの階調で見ると、ルックの働きがよく分かります。ティール & オレンジ(強度100%)は、暗いグレー64を (33, 63, 68) のシアン寄りの色に、中間のグレー128を (124, 130, 124) に、明るいグレー192を (211, 198, 181) のオレンジがかった色に変えます。強度を50%に下げると、同じ3つの値が (49, 64, 66)、(126, 129, 126)、(201, 195, 187) になり、色の濃さはおよそ半分になります。デイ・フォー・ナイトは、白255を (171, 188, 207) に下げ、最も明るい部分も青い月明かり程度に抑えます。1440 × 960 pxの写真に2.39:1の帯を入れると、映像部分は1440 × 603 px、字幕の文字サイズは約37 pxです。
映画から来た色
ルックのいくつかは、実際のフィルム現像や撮影技法から名前を借りています。このツールはその結果を写真の補正値で真似たもので、以下は元の技法についての説明です。
- ブリーチバイパス: カラーフィルムの現像で、銀を取り除く漂白工程を省く処理です。Kodakは、残った銀がコントラストを高め、色の上にグレーや黒を重ねて彩度を下げると説明しています。そのためこのルックは、彩度を大きく落とし、コントラストと粒子を上げました。
- 銀残しと『セブン』: デヴィッド・フィンチャー監督の『セブン』(1995)を撮影したダリウス・コンジを取り上げたAmerican Cinematographerの記事は、現像所のDeluxeが新たに開発した銀残し工程CCE(Color Contrast Enhancement)を、この映画で長編映画として初めて使ったと書いています。デヴィッド・フィンチャー風のルックが暗く彩度が低いのは、こうした画面を思い起こさせるためです。
- デジタルグリーン: American Cinematographerの『マトリックス』の回顧記事で、撮影監督のビル・ポープは、「最も魅力のない色は何か」と考えたとき全員が緑で一致したと振り返り、マトリックスの中の場面は、ときには緑のフィルターを付けて撮り、カラーコレクションの段階でも緑を少し足したと語っています。
- オレンジの靄: 同誌は、『ブレードランナー 2049』のラスベガスの場面で、Lee 790 Moroccan Pinkと105 Orangeのフィルターを重ねて使い、画面全体を赤く染めたと紹介しています。
- デイ・フォー・ナイト: 昼間に撮影しながら、フィルター・露出不足・焼き付けによって夜のように見せる技法です。フランソワ・トリュフォーは、映画の撮影現場を描いた作品に『La Nuit américaine』(1973、英題Day for Night)という題を付けました。このルックは、露出を1 EV下げて青く寄せ、白まで抑えることで、昼の写真を夜のように見せます。
よくある失敗
- 人物写真で強度を100%にしてしまう: ティール & オレンジやオレンジの靄を強くかけると、肌がオレンジに染まりすぎます。ベクトルスコープで肌の点が肌色ラインから遠く外れたら、強度を60〜80%に下げてください。
- 2.39:1で顔や頭が切れてしまう: 横に長い画面では、上下が大きく削られます。ハンドルで映像部分を動かし、目の高さが映像部分の上から3分の1あたりに来るように合わせてください。
- 字幕を長く書いてしまう: 行が映像部分の幅の92%を超えると、文字が小さくなります。映画の字幕のように1行を短く区切り、2行以内に収めると、文字サイズが保たれます。
- 「切り抜く」で下の帯の字幕を探してしまう: 切り抜くには帯がないので、字幕は画面内にしか入りません。帯の中に字幕を入れたいときは、「帯を入れる」を選んでください。
- 保存したJPGを開き直して重ねて補正してしまう: JPGは保存のたびに少しずつ劣化が蓄積し、粒子や周辺減光も重なって濃くなります。やり直すときは、最初の元の写真を開いてください。
限界と注意点
- ルックは、このツールの計算式で決めた補正値です。映画の実際の色補正値や映画用のLUT、フィルム現像を再現したものではなく、監督の名前が付いたルックは、その監督や映画会社とは関係がありません。
- 写真はsRGBに変換し、チャンネルごとに0〜255の8ビットで計算します。空のようになだらかにつながる部分に強いルックを適用すると、帯状の段差(バンディング)が見えることがあります。また、広色域(Display P3)で撮った写真の非常に濃い色は、やや薄くなる場合があります。
- 面積が16,777,216 px(約1,678万画素)を超える結果は、比率を保ったままその面積に合わせて縮小して保存します。MDNは、iOS端末がキャンバスのサイズを4096 × 4096 pxに制限していると案内しており、このツールはその面積を、すべての端末に共通する保存の上限として使っています。
- 保存ファイルには、元の写真の撮影情報(EXIF)を引き継ぎません。60MBを超えるファイルは開けず、HEIC写真は、HEICを開けるブラウザーでのみ開けます。
- ベクトルスコープは、プレビューから均等に抜き出した約4,000画素で描きます。ごく小さな部分の色は、点として現れないことがあります。
出典
基準日 2026-10-20。色差の式、デジタルシネマの画像サイズ、肌色ライン、フィルム処理と映画の事例は、下の原典でこの日に確認しました。ルックの補正値と、字幕・粒子のサイズの規則は、このツールが独自に定めたものです。サンプル写真は、Wikimedia Commonsの「Riding a bike in the park (Unsplash)」(Fritz Bielmeier、CC0 1.0)を1440 × 960 pxに縮小したものです。
- 01ITU-R BT.709-6 (06/2015) Parameter values for the HDTV standards3.2 輝度の式 E′Y = 0.2126 E′R + 0.7152 E′G + 0.0722 E′B、3.3 色差の式 E′CB = (E′B − E′Y)/1.8556、E′CR = (E′R − E′Y)/1.5748
- 02DCI Digital Cinema System Specification v1.2表3の画像サイズの例 1998 × 1080(1.85)・2048 × 858(2.39)・3996 × 2160・4096 × 1716
- 03Tektronix, Waveform and vectorscope monitoring (2PW-28619-0)肌の色の点は、赤と黄のターゲットの間の線(flesh tone line)から10度か20度以内に写る
- 04Kodak, Processing Techniquesブリーチバイパス: 残った銀がコントラストを高め、彩度を下げる
- 05American Cinematographer, Darius Khondji: Cinematic Rhythms『セブン』でDeluxeの銀残し工程CCE(Color Contrast Enhancement)を使用
- 06American Cinematographer, Flashback: The Matrix撮影監督ビル・ポープ: マトリックス内の場面に、緑のフィルターとカラーコレクションで緑を加えた
- 07American Cinematographer, Uncanny Valley: Blade Runner 2049Lee 790 Moroccan Pinkと105 Orangeで画面全体を赤く染めた
- 08American Cinematographer, Robert Yeoman, ASC Awards honoree『グランド・ブダペスト・ホテル』が1985・1968・1932年を行き来しながら画面比を切り替えた
- 09Columbia University, Film Language Glossary: Day for Night昼間の撮影で、フィルター・露出不足・焼き付けにより夜の効果を作る技法
- 10Britannica, Day for Night (film by Truffaut)トリュフォーの『La Nuit américaine』(1973; Day for Night)
- 11W3C CSS Color Module Level 4, 19 Sample code for Color ConversionssRGBとリニアな光の間の変換式。露出と色温度の計算に使用
- 12MDN Web Docs, <canvas> Maximum canvas sizeiOS端末のキャンバスサイズの上限 4096 × 4096 px。保存サイズの上限の根拠
よくある質問
シネマティック写真は、ふつうの写真と何が違うのですか?
映画の場面のように見せる要素が3つ入ります。シャドウとハイライトの色を決め直した色補正(ルック)、1.85:1や2.39:1のような横に長い画面比と上下の黒い帯、そして字幕やフィルムの粒子といった仕上げです。このツールは、この3つを写真1枚にまとめて適用します。
「帯を入れる」と「切り抜く」は何が違いますか?
「帯を入れる」は写真のサイズをそのままに、選んだ画面比の映像部分の外側を黒く塗ります。「切り抜く」は映像部分だけを残して残りを切り落として保存するので、帯はありません。たとえば4000 × 3000 pxの写真で2.39:1を選ぶと、帯を入れる場合は4000 × 3000 pxの上下に663 pxの帯が付き、切り抜く場合は4000 × 1674 pxのファイルになります。
2.39:1と1.85:1は、どこから来た数字ですか?
劇場用映画の画面比です。DCIのデジタルシネマ仕様書は、2K上映用の画像サイズの例として、1.85の画面で1998 × 1080 px、2.39の画面で2048 × 858 pxを挙げています。16:9はHDテレビ(1920 × 1080 px)の比率です。
ティール & オレンジが人物写真に合うのはなぜですか?
肌の色は、ベクトルスコープで赤と黄の間にある肌色ライン付近、つまりオレンジ側に集まり、その反対側がシアン寄りです。シャドウと背景をティールに、肌とハイライトをオレンジに寄せると、2つの色が反対方向へ開き、人物が背景から浮かび上がって見えます。肌がオレンジになりすぎたら、強度を60〜80%に下げてください。
ベクトルスコープの点と矢印は、何を表していますか?
点1つが、写真の画素1つの色です。中心はグレーのように色のない画素で、外側へ行くほど色が濃くなります。グレーの点は元の色、色付きの点はルックを適用した色で、白い矢印はすべての点の平均が動いた方向を示します。色の濃さは中心までの距離を200倍した値で、グレーは0、75%の赤は約77、画面の外側の円が50です。
字幕の文字サイズと位置は、どのように決まりますか?
文字サイズは映像部分の幅の2.6%で、映像部分の高さの9%を超えません。最も長い行が映像部分の幅の92%を超えたら、その分だけ縮めます。画面内の字幕は、映像部分の下側に黒い縁取りを付けて入り、下の帯の字幕は、「帯を入れる」で下の帯が字幕より広いときに、帯の中央に入ります。字幕は2行まで入力できます。
監督の名前が付いたルックは、実際の映画の色と同じですか?
同じではありません。ウェス・アンダーソン風・ウォン・カーウァイ風・デヴィッド・フィンチャー風・クリストファー・ノーラン風は、その監督の映画を思わせる色の方向を、このツールが補正値として決めたものです。実際の映画の色補正値やLUTを写したものではなく、監督や映画会社とも関係がありません。
写真はサーバーに送信されますか? 保存サイズはどうなりますか?
送信されません。写真はこのブラウザー内だけで処理されます。保存ファイルは元の解像度で計算し直し、面積が16,777,216 px(約1,678万画素)を超える場合は、比率を保ったままその面積に合わせて縮小します。元の写真の撮影情報(EXIF)は、保存ファイルに引き継ぎません。