本文へ移動
DESIGN VOCABULARYデザインスタイル図鑑

STYLE PROFILE

シネマティック

Cinematic

映画の一場面のように、光と色で主役や空気感を際立たせる表現です。ここでは背景を抑え、主役へ視線を集める見た目を扱います。

シネマティックのスタイル見本
見本はこの図鑑のためにAIで生成した画像です。

シネマティックの代表配色例

色コードと役割をまとめてコピーできます。
背景(#1F303B)とのコントラスト比
色役割比文字に使う目安
#E2D7BD文字と構造9.51:1本文の文字にも使える
#4E7180主色2.58:1文字には向かない
#B99669強調色4.94:1本文の文字にも使える

比はWCAG 2.2の計算式で求めた値です。4.5:1以上は本文の文字、3:1以上は大きな文字や図形に使える目安です(達成基準1.4.3・1.4.11)。

シネマティックのプロンプト例

シネマティックでデザインしてください。主役を明るくする照明と暗めの周辺、背景のぼけによる奥行き、明暗と色味を調整した情景を取り入れてください。

シネマティックの主な視覚的特徴

  1. 主役を明るくする照明と暗めの周辺

    主役をいちばん明るい場所にし、画面の周辺を暗く落とします。照明が、見る人の視線の行き先を決めるためです。

  2. 背景のぼけによる奥行き

    主役にはピントを合わせたまま背景をぼかし、実際の被写界深度に似た奥行きを出します。主役が背景から前へ浮き出て見えます。

  3. 明暗と色味を調整した情景

    明部を持ち上げ、影を深め、色の傾きを変えて場面の空気を作ります。わずかな調整で、暖かく映画的にも、冷たく劇的にも見せられます。

シネマティックが向いている成果物

シネマティックとは

シネマティックは、写真や画像を映画の一場面のように見せる表現です。アドビの写真編集の解説は、周辺を暗くするビネット、背景のぼかし、トーンカーブを使い、写真の光を映画のように見せる方法を紹介しています。

この解説によると、照明は見る人の視線の行き先を決めます。全体が均一に明るいと何も目立たないため、周辺を暗くして主役をいちばん明るい場所にします。主役を鮮明に保ったまま背景をぼかすと、実際の被写界深度に似た奥行きが生まれます。明部と影の調整や色味のわずかな変化でも、場面の印象は変わります。

映画の場面を一枚の写真で伝える工夫は、映画の宣伝用スチル写真にも見られます。ニューヨーク近代美術館(MoMA)は1994年の展覧会「STILLS」を、スチル写真を写真の一つのジャンルとして紹介した初の展覧会としています。同館によれば、撮影者はしばしば自ら照明を組み、静止画で映画のドラマを伝える構図の型を作り上げました。

見分けるときは、次の点を確かめてみてください。

  • 主役が明るく照らされ、周辺が暗く落ちている
  • 背景がぼけて、主役が浮き出て見える
  • 明暗や色味が場面の空気に合わせて調整されている

これらが揃っていると、シネマティックの特徴を持っていると言えるでしょう。

実例を見る

Google画像検索で「シネマティック」を見る(新しいタブで開きます)検索結果の画像はこの図鑑には保存しません。

出典

名称・説明・主な視覚的特徴と「シネマティックとは」の事実は、上の出典に基づきます。特徴の説明と見分け方は、出典の内容をこの図鑑がまとめたものです。代表配色例・向いている成果物・プロンプト例は、この図鑑の編集上の提案です。制作・編集:小林 秀樹(セカヤサAIブログ)