COOSY BLOG
  • HOMEホーム

  • SERVICEサービス

    • サービスTOP
    • Web制作
    • ブランディング
    • デジタルマーケティング
    • 戦略企画
    • DX推進・システム開発
    • グローバル展開
  • WORK制作実績

    • 制作実績TOP
    • コーポレートサイト
    • 採用サイト
    • ECサイト
    • プロモーション
    • サービスサイト・SaaS
    • システム開発
  • ABOUTクーシーについて

    • クーシーについて
    • 会社情報
    • 私たちが大切にしていくこと
    • お知らせ
    • クーシーラボ岩手
    • ロンドン支社
    • ミャンマー支店
  • BLOGブログ

  • RECRUITリクルート

  • Contactお問い合わせ

BLOG MENU

  • BLOGトップ
  • 目的別

    • 目的別TOP
    • コーポレートサイト
    • ECサイト
    • オウンドメディア
    • 採用サイト
    • プロモーション
    • Webサービス
    • LP
    • ブランディング・CI
  • Web制作ハウツー

    • Web制作ハウツーTOP
    • UIUX・サイト設計
    • WebデザインTips
    • PM/ディレクション
    • フロントエンド(HTML/CSS)
    • 撮影・動画編集
    • ライティング
    • CMS
    • Web制作ツール
    • イラスト
  • システム開発

    • システム開発TOP
    • プログラミング
    • EC構築
    • CMS開発・構築
    • サーバ構築
    • データベース構築
    • セキュリティー
  • Webサイト運用のコツ

    • Webサイト運用のコツTOP
    • サイト運用・管理・保守
    • コンテンツ運用
    • CRM(顧客管理)
  • Webマーケティング

    • WebマーケティングTOP
    • SEO対策・トレンド
    • コンテンツ制作・SEOライティング
    • アクセス解析
    • Web広告
    • Web集客ハウツー
  • 特集

    • 特集TOP
    • Web最新トレンド
    • カルチャー
    • ガジェット

Share on

  • Xでシェアする
  • Facebookでシェアする
  • このエントリーをはてなブックマークに追加

写真の正しい「色」とは?Webサイトを特徴づける「色」を作る現像術

  • Web制作ハウツー
  • 撮影・動画編集
写真の正しい「色」とは?Webサイトを特徴づける「色」を作る現像術

「色」という存在は一筋縄ではいきません。個人差がある、性差がある、年齢差がある、などさまざまな違いがあると言われています。正解があるかもわからない未知の「色」ですが、写真における「色」も近年あやふやになってきています。それはデジタルカメラが主流となり、現像・レタッチ・加工で色を自由自在に変えることができるようになったことが大きな要因だと思います。一般的な現実に近い色が写真における正解というわけではありません。Webサイトにおいては世界観に合った色であればいいわけですが、それでも「基準」「基礎」がなければ、奇をてらっただけになってしまいかねません。今回のコラムは写真の「色」を考えていきたいと思います。

フィルム時代の写真の色は正解があった!?

写真は少し前までフィルムで撮影することが主でした。フィルムには「カラーリバーサル」「カラーネガ」「白黒ネガ」が主なものとしてあります。

このうち、プロの現場で多く使われたカラーリバーサルは、陽画として記録されるため、現像済みフィルムに色情報が原版として記録されます。スライドなどで使われる、光にかざすと見ることができるフィルムのことです。
陰画で記録されネガを見ただけでは写真に見えないカラーネガと異なり、カラーリバーサルの場合、撮影した時点で決し、あとは印刷やプリントに回すことしかできませんでした。微調整は効きますが、原板が存在するというのは一種の物差しとなっていたのは間違いありません。

撮影時の工夫、プリントの工夫などはあったにしろ、まず「フィルム選び」という時点である程度の色は決まっていたのがフィルム時代でした。

リバーサルフィルムのイメージ
リバーサルフィルムは、陽画の透過原稿。原版が存在するため色の目安になる

デジタルカメラへの移行で「色」が取り残された理由

デジタルカメラが主流となると、これまでは色のことを全て取り仕切っていたフィルムメーカーに代わり、急にカメラメーカーがセンサーでどんな色を出すのか、という色の専門分野に進出せざるを得なくなってきました。デジカメ草創期(いや、意外とつい最近まで)、メーカーによっては色の作り方にうまい下手があると言われているくらい。

また、フィルムのような化学反応ではなく電気の信号になったことで、ハイライトが白飛びを起こし、データが何もない部分を作らないよう、露出アンダーで撮影し、後に現像処理で完成させていくという作業も一般的となりました。
「撮影は素材収集」というような面が強まっていきました。いきなりプロのためのラボがおこなっていた作業を撮り手がやることになったのです。カメラの機能は進化をしてプロの間口が広くなったので、色作りは急激に自由で開放的な世界となっていったわけです。
同時にSNSカルチャーが押し寄せ、小さなスマートフォンのモニターで目立つような写真が目立ちはじめるようになったことも忘れてはいけません。

では、フィルム時代の色が正しいのかというと、先に触れた通り、色に正解はないので一概に言い切れなかったりします。そもそも、フィルムにも彩度高め、コントラスト高め、赤みが強い、などの特徴が種類によって存在しました。「よく目にした」から正解と捉えられているだけかもしれません。雑誌、ポスター、家族写真。そんなイメージ上で語られているだけでしょう。

ただ、人の眼が捉える色にさほどの差がないと仮定するなら、やはりそこから逸脱しすぎていると違和感は感じるだろうし、色を追求して作っているカメラのデータをいじりまくることは、リッチなデータを捨てていくということにも繋がりますから、画質の悪化などにも繋がっていくかもしれません。
ひとまず、そのくらい色というものは深淵なもの、デジタルではどのような色にも変えることができるということを基本として覚えておきたいところです。

余談になりますが、フィルムメーカーでもある富士フイルムのデジタルカメラは色に対する評価が高いです。それは長年の色に対する追求がデジタルカメラにも投入されており、「写真画質」(リアル画質でも正解画質でもないところがポイント)を面倒な設定なしに味わえ、ポストプロダクションに時間を割くよりも撮影を楽しもうというメッセージをカメラ設計に込めているからです。色に振り回されたくない場合はオススメしたいです。

Webサイト用の写真は「軸」と「違和感のある色」に注意

さて、前段が長くなりましたがWebサイトを作るにあたって、写真の色というのはどのくらい重要なものでしょう。Webサイト全体のイメージ直結するような重要なポイントであるのは間違いありません。

CMを思い起こすとわかりやすいかもしれません。青と赤を印象的にしていたり、明るめにしていたり、くすんだ色にしていたり、これといった特徴がなかったり、さまざまな色の傾向がCMそれぞれにあります。
好き嫌いもあると思いますし、それこそ非現実的な色すぎて薄気味悪く感じることもあるでしょうし、色だけでスタイリッシュなイメージを受けるかもしれません。
映像の世界には「カラリスト」という職種があり、カラーグレーディングをおこなうプロフェッショナルも存在するくらい重要視されています。作品の最初と最後で色が違う、などということがないのは、カラリストという存在がいるからだったりするのです。

ということは、「筋を通す」ことがまずひとつ大きなポイントだと思います。Webサイト全体で色のトーンが統一されているかどうか。その後の好き嫌いは別にして、軸を通すことは大切です。急に難易度が上がりましたよね…。軸の具体的な依頼方法は後回しとし、まず写真をセレクトする時点で、色にばらつきがないかを見る、ということを心掛けるだけでまとまりは出てくるはずです。

ビビッドの例レトロな雰囲気の例
上はビビッド、下はレトロな雰囲気。この2枚が並ぶと散漫になってしまう

軸を通しつつ、正しい色が求められる被写体の色だけは個別にチェックしていきたいです。Webサイトに商品が出てくる場合はであれば、実際の商品と写真の色と違いがないかを見比べましょう。商品パッケージ、野菜や果物、そして色が特に重要な洋服など。過度に美化するのも問題になりますので、商品に限っては忠実な色にしておきたいところです。

被写体の色調整前
トマトの彩度が低く色転びもしており新鮮に見えない
被写体の色調整後
目で見たままの赤に補正。グッと新鮮で美味しそうになりました

人物写真を使う場合も要注意。じっくりと肌色を見ていきたいです。
肌色がくすんでいたり、色転びを起こしていたりすると、顔色が悪く見えて印象が悪くなります。緑がうっすらと被るというようなことも起こりがちですし、スルーされやすいので注意しましょう。

色はずっと見ていると麻痺してくるので、正解だと思う写真などを用意して、見比べるのも手かもしれません。取材カットレベルでも違和感は出ますから、ファッションや美容が主役になるような場合は、さらに注意しないといけないでしょう。

緑かぶり調整前
一見破綻はないが、肌が緑被りを起こしている
緑かぶり調整後
色補正で緑かぶりを抜いた。健康的な肌色になった

フォトグラファーと連携して色の方向性を決め、Webサイトの特徴とする

色に軸が通っていること、商品や人物をマイナスイメージにしない色になっていることに加えて、違和感がない程度に色が特徴づけされていると、それはWebサイトの個性に繋がります。

でも、色に対する感覚はまちまちですし、人によっては形容する言葉も異なります。
たとえば「レトロ」と聞いたとき、どのような色を思い浮かべますか?ある人は、色褪せたセピア色かもしれません。ある人は黄色みが強い写真を思い浮かべるかもしれません。
もっと難解なものになると、Webサイトのイメージが「力強さ」だから、写真もそれにマッチした色にしたい、というようなふんわりした依頼になることも。

写真が納品されてから意図と異なるということを防ぐため、「依頼→撮影→納品」の流れの中に、「依頼→色の意思統一→撮影→納品」というひと手間を入れていければいいですよね。

たとえば僕がざっくりと「レトロで」というような依頼を受けたとしたら、同じ写真の現像違いを事前に提出すると思います。撮影後でもいいですが、撮影前のほうがイメージする時間と準備期間が入るのでありがたい気がします。それでは、「レトロ」とだけ依頼されたときに、どんなものを提示するかの具体例を挙げてみたいと思います。

こちらが忠実な現像結果。カメラが捉えたオリジナルデータから大きく変更はしていません。

オリジナルデータのイメージ

レトロの代名詞であるフィルム調です。色のバランスは大きくいじっておらず、粒状感の追加やコントラスト調整など、デジタルデータ特有の先鋭さを薄めています。

フィルム調の調整のイメージ

シャドウ部に青みをのせています。このような「濁り」はレトロに見せるために有効な調整です。ただし、人物などが写真に入ってくる場合の陰影の表現は注意が必要になります。

濁り調整のイメージ

温かい雰囲気にするために暖色傾向にしています。思い出の中の風景、夕焼けっぽい世界観などを作るのに向いています。

暖色調整のイメージ

彩度をグッと落としています。彩度を落とすと食べ物などにリアリティーはなくなってしまいます。雰囲気は作れますが、正しい色情報とはかけ離れるので、風景や街並みなどが中心のWebサイトには使えるかもしれません。

彩度を下げたイメージ

ドリーミーな雰囲気になるように、ミスティーに仕上げています。現実離れしていますが、ガーリーな世界観などを作るのには効果的です。

ミスティーに調整したイメージ

このように、レトロだけを切り取っても解釈がさまざま。
フィルム調を望んでいたにも関わらず、低彩度を納品されたとしたら、イメージと違う…となってしまいますよね。Webサイト制作者とフォトグラファーの意思統一を取ることで、きっと写真のクオリティーは上がってくると思います。
ひょっとしたら、レトロを追求するために撮影時間も日中は避けたり、敢えて晴天は避けたりなど、自然とこだわりが強いロケになってくるかもしれません。ここまでくれば、きっとWebサイトのブランディングの助けになっているのではないでしょうか。

現像時における考え方の実例

僕自身はここまで提案したような細やかな意思疎通ができているかというと、そうでもない案件は多いです。でも、納品前には雰囲気重視に振っていいのか、まっとうがいいのか、ということくらいは確認します。そして、それぞれにLightroomという現像ソフトのプリセットを作って保存しているので、それを適用し、露出調整、ハイライト・シャドウ調整などを行っていきます。
提出前に時間がかかっても手を入れてから納品し、後日さらに追い込んだレタッチが必要な場合は戻してもらっています。

写真全体がフラットに見せるレタッチ例
まっとうモード。
ハイライトのレベルを下げ、白飛びを回避しつつ、写真全体がフラットに見えるように配慮。
色と彩度もニュートラルを心掛けている。
雰囲気重視のレタッチ例
雰囲気重視でオーケーが出た場合のプリセット。
周辺光量は補正せず暗いまま、ハイライトレベルは気持ち持ち上げメリハリは作りつつ、
全体的にはマットな質感。色はグリーンの彩度を抑え気味にしているほかはニュートラル。

正直、あまり違いはないかもしれません。雰囲気重視と言ってもコーポレートサイトなどの案件であることは多く、写真の色の本流からは逸脱しない程度ということは心掛けています。

レタッチではなく、色のベースを作り込む「HSL」の調整

もっと大胆に、色のベースを好みで作り上げていく作業を採り入れているフォトグラファーは多いですし、雑誌で特集が組まれるなどニーズもあります。1枚1枚で異なる被写体や露出によっての調整は「レタッチ」ですが、もっと世界観の統一ということになるとHSLの調整/カラーグレーディングという作業はとても有効で、まさに写真に軸を通すにはうってつけなのです。

僕自身、現像プリセットを作るときや、新たなソフトウェアやアプリケーションでレタッチをする際には、最初に調整する部分があります。それは「ブルー」の色相をグリーンに寄せること、「グリーン」の彩度を下げること、このふたつです。やり過ぎると違和感が出てしまうので、微妙にしか設定していませんが、今回は少し目立つように調整してみました。

グリーンに寄せる

グリーン調整前
ほぼ撮って出し状態のデータ
Lightroomの「HSL」調整イメージ
Lightroomの「HSL」でブルーの色相をグリーン寄りにシフトさせる
グリーン調整後
青空の表現が変わり、どこか映画の中の世界のようになった。
周辺光量補正オフ、粒状感追加なども手を入れている。
多かれ少なかれ、自分自身のプリセットはこの青の設定を採り入れている。

グリーンの彩度を落とす

グリーン調整(彩度を落とす)前
デジタルカメラとなり最も気にしたのがグリーンの表現。妙に鮮やかなグリーンが好きではない
Lightroomの「HSL」調整イメージ
Lightroomの「HSL」でグリーンの彩度をマイナス方向に。
色相もブルー方向に振れば効果はより実感できる
グリーン調整(彩度を落とす)後
グリーンが落ち着いた。海や空の表現を変えることなく整った印象

他にも、シャドウに色をのせて濁らせる、赤を朱色っぽくする、など特徴が出やすいHSLの調整は存在します。レトロなどの言葉で説明はできなくても、「派手すぎない緑」とか「青が特徴的な世界」とか、そんな言葉でフォトグラファーに伝えてみるのもわかりやすいかもしれません。

今回は色について考えてみました。Webサイト制作に携わっている方であれば、映像作品、雑誌、写真集などを見て、好みの色を模索しておくと依頼時に役立つはずです。専門的な指示じゃなくてもオーケー。とにかく意見を伝え、軸を通し、現実から逸脱しすぎない点を考慮して、写真が生きるWebサイトを作ってみてください。

鈴木文彦

この記事を書いた人

鈴木文彦

2007年にフィルムカメラ専門誌「snap!」を創刊。以降、趣味の写真に関する仕事に従事する。刊行物に「中判カメラの教科書」「フィルムカメラの撮り方BOOK」(玄光社)など。現在は「FILM CAMERA LIFE」「レンズの時間」編集長。

お問い合わせはこちらから

Web制作デザイン、丸ごとお任せ

お問い合わせする

2021/03/29

Share on

  • Xでシェアする
  • Facebookでシェアする
  • このエントリーをはてなブックマークに追加
お問い合わせはこちら

撮影・動画編集の関連記事はこちら

  • ドローンのふかん撮影とスチール撮影の関係性。撮る「高さ」を考える

    近年、Webサイトに欠くことができない「動画」。1枚の画像で情報を伝えるスチールと異なり、情報量を多角的に盛り込むことができるのは動画の強みで、中でもドローンを使った空撮映像は、ハッと人の眼を惹き付けることができるため引き合いも多いです。

    • 撮影・動画編集
  • 物撮りのプロに依頼!ECサイトの商品撮影依頼時の8つのポイント

    ECサイトを筆頭に、「商品」を手掛けている会社であれば欠かせない商品カット。今回は、物撮りをメインに手掛けるプロフォトグラファーへ取材を敢行してみました。

    • ECサイト
    • 撮影・動画編集
  • ポートレート写真撮影に最適なレンズの焦点距離を考察する

    人物写真はどんなWebサイトにも欠かせない定番の画像素材です。今回は、人物写真における焦点距離の違いによる表現の差、個人的に多用する35mmと135mmの魅力などをお伝えしてきます。

    • 撮影・動画編集
  • 大ヒットフィルター「ブラックミスト」の効果と活用方法

    カメラのレンズに装着するフィルターは、撮影で適宜必要になる定番のカメラアクセサリーですが、普段はさほど話題となることはありません。しかし、近年ひとつのフィルターが大注目されています。

    • 撮影・動画編集
  • 大口径レンズならではのボケ味が魅力的な写真と、ボケの活かし方

    ひと目を引くドラマチックな写真、心に響くエモーショナルな写真。そんな写真を撮りたい、そんな写真をWebサイトで使いたい、と多くの人は思っているはずです。ひと目見ていいな、と思える写真には効果的に「ボケ」が使われていることが多いです。

    • 撮影・動画編集
  • 【エモい写真の秘密】撮り方のコツやWebでの活かし方を解説

    この記事ではそもそもエモい写真とは何なのかから撮るためのコツや機材についてわかりやすく解説しています。

    • 撮影・動画編集
  • Webサイト写真は「雰囲気」「伝える」4つの軸で撮影・撮り方を決める

    Webサイトで使用する写真は、写真の質・セレクト・使用方法にこだわることで、Webサイトそのもののクオリティーが高まり、効果的な訴求や売り上げアップなどへと繋がっていきます。

    • 撮影・動画編集
  • 【5分で知る現像】色の土台となるホワイトバランス

    カメラの設定では必要不可欠な「ホワイトバランス」は、色温度に応じて白を白く見せるための補正のこと。ホワイトバランスをおろそかにすると、写真の色に違和感が出たり、複数枚の写真の色にばらつきが出たりしてしまいます。

    • 撮影・動画編集

COOSYの
制作実績

UIUXと美しさを両立させた、クーシーが誇る成功事例一覧。
課題解決のアイデア満載です。

制作実績を見る

Web制作の課題はクーシーが解決します

  • 写真撮影

    採用ブランディングを強化する戦略的な写真撮影。企業カルチャーや人の魅力を引き出し、ブランド価値を視覚化します。

  • Webデザイン

    UIUXと美しさを両立し、ブランドを「カタチ」に。SEO・AIOも考慮した戦略的ビジュアルで目標達成を支援します。

  • ブランディング

    競合と差別化し顧客に選ばれる価値を創造。WebサイトのSEO・AIOからCIまで、一貫したデザイン戦略を行います。

CATEGORY LIST

  • すべての記事一覧

  • 目的別

    • 目的別TOP
    • コーポレートサイト
    • ECサイト
    • オウンドメディア
    • 採用サイト
    • プロモーション
    • Webサービス
    • LP
    • ブランディング・CI
  • Web制作ハウツー

    • Web制作ハウツーTOP
    • UIUX・サイト設計
    • WebデザインTips
    • PM/ディレクション
    • フロントエンド(HTML/CSS)
    • 撮影・動画編集
    • ライティング
    • CMS
    • Web制作ツール
    • イラスト
  • システム開発

    • システム開発TOP
    • プログラミング
    • EC構築
    • CMS開発・構築
    • サーバ構築
    • データベース構築
    • セキュリティー
  • Webサイト運用のコツ

    • Webサイト運用のコツTOP
    • サイト運用・管理・保守
    • コンテンツ運用
    • CRM(顧客管理)
  • Webマーケティング

    • WebマーケティングTOP
    • SEO対策・トレンド
    • コンテンツ制作・SEOライティング
    • アクセス解析
    • Web広告
    • Web集客ハウツー
  • 特集

    • 特集TOP
    • Web最新トレンド
    • カルチャー
    • ガジェット
  • WORKS

    Webサイト・アプリなどの
    様々な実例・制作実績のご紹介

    WORKS
  • CONTACT CONTACT

    Webサイトのご相談、お見積もりはこちらから

    Webサイトのご相談、お見積もりなど
    お気軽にお問い合わせください

ホーム

  • TOP
  • COOSY BLOG
  • 写真の正しい「色」とは?Webサイトを特徴づける「色」を作る現像術
ページトップへ
  • TOP
  • SERVICE

    • ブランディング
    • デジタルマーケティング
    • 戦略企画
    • DX推進・システム開発
    • グローバル展開
    • Web制作
  • WORKS

    • コーポレートサイト
    • 採用サイト
    • ECサイト
    • プロモーションサイト
    • サービスサイト
    • システム開発
  • ABOUT

    • 会社情報
    • 私たちが大切にしていくこと
    • お知らせ
    • クーシーラボ 岩手
    • ロンドン支社
    • ミャンマー支店
  • RECRUIT

    • ディレクション部
    • デザイン部
    • システム開発部
    • アカウント・プランニング部
    • Webマーケティング事業部
    • 人事・総務部
    • オフショア
    • グローバル事業部
  • BLOG

    • 目的別
    • Web制作ハウツー
    • システム開発
    • Webサイト運用のコツ
    • Webマーケティング
    • 特集

COOSY SNS

  • facebook
  • X
  • お問い合わせ
  • Privacy policy
  • Site Policy
  • Security Policy
© COOSY All Rights Reserved.