遠景と近景の描き分け方
イラストやデザインで遠景と近景に差をつけるときは、空気遠近法やコントラストの調整を使い、遠くを薄く青く、近くを濃く鮮やかにするのが基本です。
近景（手前）の色の使い方 ▶ 濃くはっきりした色を使う。彩度（鮮やかさ）を高くして目を引くようにする。コントラスト（明暗の差）を強くして立体感を出す。赤やオレンジなどの暖色を使うと手前に飛び出して見える。
遠景（奥）の色の使い方 ▶ 空の色に近づけた青っぽい色（青み）を重ねる。彩度を低く（くすんだ色）して存在感を弱める。コントラストを弱くして、まわりの景色となじませる。遠くのものほど暗い部分が減り、全体が明るく霞んで見える。
空気遠近法とは、地球の大気で遠くのものがかすんで見える現象を表現する技法です。手前から奥に向かって、色は以下のように変化します。
1. 色相（色味）：距離が離れるほど、遠くにある山や建物は本来の色に関わらず青や紫がかった色に変化します。
2. 彩度（鮮やかさ）：遠くのものほどグレーっぽく、くすんだ色になります。
3. コントラスト（明暗差）：遠くのものは「一番明るい部分」と「一番暗い部分」の差が縮まり、全体的にのっぺりした印象になります。
4. 輪郭（解像度）：手前のものはシャープに見えて、遠くのものは輪郭がぼやけたりにじんで見えます。
上のシミュレーションは8枚(1枚は背景 base-img)の画像をレイヤーで重ねてCSSのフィルターで操作しています。画像の数字が大きい方が手前(近景)です。文章と合わせて、フィルターの掛け具合を数字から見れば遠近感の出し方のイメージが掴みやすいと思います。
/* 1. デフォルト（のま@管理人の好みの設定 ツールのベース） */
.preset-original .img2 { opacity: 0.9; filter: blur(1px) hue-rotate(0deg) saturate(1.5); z-index: 2; }
.preset-original .img3 { opacity: 0.5; filter: blur(1px) hue-rotate(90deg) saturate(0.4); z-index: 3; }
.preset-original .img4 { opacity: 0.6; filter: blur(1px) hue-rotate(75deg) saturate(0.6); z-index: 4; }
.preset-original .img5 { opacity: 0.9; filter: blur(1px) hue-rotate(40deg) saturate(1); z-index: 5; }
.preset-original .img6 { opacity: 0.9; filter: blur(1px) sepia(0.3) hue-rotate(30deg) saturate(1); z-index: 6; }
.preset-original .img7 { opacity: 1.0; filter: blur(0px) hue-rotate(15deg) saturate(1.1); z-index: 7; }
.preset-original .img8 { opacity: 1.0; filter: blur(0px) hue-rotate(-15deg) saturate(1.5); z-index: 8; }
/* 2. 空気遠近感（遠景ほど青みがかり＆ぼかしを強く、近景は高コントラスト） */
.preset-aerial .base-img { filter: brightness(1.05); }
.preset-aerial .img2 { opacity: 0.7; filter: blur(2px) saturate(0.6) hue-rotate(15deg); z-index: 2; }
.preset-aerial .img3 { opacity: 0.45; filter: blur(2.5px) saturate(0.3) hue-rotate(40deg) brightness(1.1); z-index: 3; }
.preset-aerial .img4 { opacity: 0.65; filter: blur(1.5px) saturate(0.6) hue-rotate(20deg); z-index: 4; }
.preset-aerial .img5 { opacity: 0.75; filter: blur(1px) saturate(0.75) hue-rotate(10deg); z-index: 5; }
.preset-aerial .img6 { opacity: 0.9; filter: blur(0.5px) saturate(0.9); z-index: 6; }
.preset-aerial .img7 { opacity: 1.0; filter: blur(0px) saturate(1.15) contrast(1.05); z-index: 7; }
.preset-aerial .img8 { opacity: 1.0; filter: blur(0px) saturate(1.25) contrast(1.1); z-index: 8; }
/* 3. 夕暮れ（階層ごとに暖色・明度を調整） */
.preset-sunset .base-img { filter: hue-rotate(-40deg) saturate(1.5) brightness(0.9); }
.preset-sunset .img2 { opacity: 0.8; filter: blur(1px) hue-rotate(-30deg) sepia(0.4) saturate(1.4); z-index: 2; }
.preset-sunset .img3 { opacity: 0.6; filter: blur(1.5px) hue-rotate(-20deg) sepia(0.6) brightness(0.9); z-index: 3; }
.preset-sunset .img4 { opacity: 0.75; filter: blur(1px) hue-rotate(-30deg) sepia(0.5) brightness(0.85); z-index: 4; }
.preset-sunset .img5 { opacity: 0.85; filter: blur(0.5px) hue-rotate(-35deg) sepia(0.4) brightness(0.8); z-index: 5; }
.preset-sunset .img6 { opacity: 0.95; filter: blur(0px) hue-rotate(-40deg) sepia(0.3) brightness(0.75); z-index: 6; }
.preset-sunset .img7 { opacity: 1.0; filter: blur(0px) hue-rotate(-40deg) sepia(0.2) brightness(0.7) contrast(1.1); z-index: 7; }
.preset-sunset .img8 { opacity: 1.0; filter: blur(0px) hue-rotate(-45deg) sepia(0.2) brightness(0.65) contrast(1.2); z-index: 8; }