画像の方向づけ
「寄せ集めに見える」の正体は、1枚ずつの出来ではなく、条件が揃っていないことです。光、寄り、彩度、人の写し方を先に決めます。
図の中身を文字で読む
- 「寄せ集めに見える」の正体は、画像1枚ずつの質ではなく、条件が揃っていないこと。
- 方向づけなし 条件を揃えた
- 明るさも、寄りも、色も、被写体の扱いもばらばら。 光の向き・寄りの度合い・彩度・視線の高さ・
- 1枚ずつは悪くなくても、並べると素材集に見える。 人の写し方を、先に決めて全点に適用する。
- アイコングリッド＝大きさと太さを揃えるための下敷き
- 同じ枠に収めても、形によって面積が違うので大きさが揃って見えない。
- 円と三角は枠より少しはみ出させて、目で見た大きさを合わせる。
- 線の太さは全点で同じ値にする。ここが揃っていないと、揃えたつもりが崩れる。
- ピクトグラムは、意味が説明なしで通じる形だけを使う。通じないなら文字を添える。
- 外周に余白を残す 円は少し大きく見える 三角は小さく見える
ひと目で#
「寄せ集めに見える」の正体は、1枚ずつの質ではなく、条件が揃っていないこと。
- アートディレクション
- 何をどう見せるかの方向を決め、全点に通す
- フォトディレクション
- 写真の条件（光、寄り、彩度、人の写し方）を先に決める
- イラストレーションスタイル
- 線の太さ、塗り、人の描き方を揃える
- アイコノグラフィ
- アイコンの体系。線の太さと角の処理を全点で統一する
- アイコングリッド
- 大きさを揃えるための下敷き
- ムードボード / スタイルタイル
- 方向を絵で合意するための資料
先に決めておく条件#
| 項目 | 決める内容の例 |
|---|---|
| 光 | 自然光、斜光、拡散光 |
| 寄り | 手元まで寄る、中距離、引き |
| 彩度 | 低め、中、高め |
| 人 | 顔を写す、後ろ姿まで、手元だけ |
| 視線の高さ | 立った目線、座った目線、見下ろし |
| 背景 | 生活感を残す、整理する |
使い分け#
| こういうとき | やること |
|---|---|
| 写真を何点も揃える | 上の条件を先に文章にして、全点に当てる |
| 方向を関係者と合意したい | ムードボード。参考画像を並べる |
| 実際の配色や書体まで見せたい | スタイルタイル |
| アイコンを増やす | 線の太さと角の処理を規則にする |
| SNS での見え方を整えたい | OGP 画像の型を作る。文字は大きく、少なく |
図の中身を文字で読む
- ✕ 原寸で読める文字量を詰める ○ 大きな文字で、短く言う
- OGP 画像は、一覧では大きく縮んで表示される 縮んだ状態で読めるかで判定する
- 新豆、入荷。
- 一覧での表示 一覧での表示
- 縮むと、灰色のにじみになる 縮んでも、主張が残る
間違えやすいところ#
- 写真を1枚ずつ良し悪しで選ぶ並べたときの揃いが生まれない
- 素材サイトから、条件を決めずに集める光も色も人の扱いもばらばらになる
- アイコンを同じ枠に収めて満足する円は大きく、三角は小さく見える。目で揃える
- アイコンの線の太さが点ごとに違う揃えたつもりが崩れる、いちばんの原因
- 意味の通じない図形をピクトグラムとして使う文字を添える
- OGP に小さな文字を詰める一覧では縮んで読めない
- サムネイルを原寸のまま縮める主題が消える。トリミングを別に作る
直す例#
架空の案件を1つ例にとります。どこを見て、何をどう直すかを書きます。
例として、菓子工房のサイトに、店主から写真が12枚届きました。強い逆光の外観、高彩度の焼き菓子の寄り、素材サイトの外国のキッチン。1枚ずつは悪くないのに、並べると別々の店に見えます。撮り直す予算はありません。そこで先に条件を仕様書に書き、手持ちから条件に合う6枚だけを選び、足りない2場面だけ撮り足しを頼みました。冒頭の実写（上が条件なし、下が条件を揃えた6点）と同じ直し方です。選ぶ基準が「良い写真」から「条件に合う写真」に変わると、誰が選んでも同じ棚になります。
確認する#
- 写真を全点1画面に並べても、同じ人が撮ったように見える
- あとから足した1枚が、仕様書のどの条件も破っていない
- アイコンの線の太さが、全点で同じ値になっている
使えるパターン#
このページで扱う語#
このページで扱う語を並べる本文では太字5 語
語の名前から引くなら用語索引へ。
- ピクトグラム
- 言語に依存せず意味を伝えることを目的とした絵記号。
- OGP
- SNS などで共有されたときに、どの画像・題名・説明を表示するかを指定するメタデータの規格。
- サムネイル
- 内容を代表する小さな画像。一覧で内容を予測させる役割を持つ。
- ムードボード
- 方向性を共有するために、参考となる画像・色・素材を集めて並べた板。
- スタイルタイル
- 実際に使う色・書体・ボタン・見出しの見本を1枚にまとめ、方向を確認するための資料。
この話が要る場面#
このページが答えになる、現場の困り事です。困り事の側から探すと、同じ場所に着きます。
光・寄り・彩度・人の写し方を先に文章で決めて、全点に同じ条件を適用する。
光・寄り・彩度・人物の条件を文章化して全点に適用
1枚ずつの良し悪しで選ばない。決めた条件に合うものだけを選ぶ。
1枚ずつではなく、決めた条件に合うものだけ
同じ枠に収めても、円は大きく三角は小さく見える。枠を少し越えさせて目で合わせる。
このコードで動いている見本です
線の太さが違う。全点で同じ値にする。角の処理も揃える。
このコードで動いている見本です
OGP画像は1200×630。文字は大きく、少なく。一覧では縮むので、小さい文字は読めない。
<meta property="og:image" content="/ogp-1200x630.jpg">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">この場面のほかの困り事と、そのまま貼れる部品は写真とアイコンにまとめてある。逆引きには全188件。
仕様書を書く#
撮る前に条件を文章にして、全点に当てます。ここで選んだ条件がそのまま下の仕様書になり、撮影の依頼にも素材選びにも同じものを渡せます。見本は珈琲店の想定です。
# 写真のアートディレクション仕様書
被写体: 店主の手元と焙煎機。豆と道具
光: 拡散光
寄り: 中距離
彩度: 低め
人の写し方: 手元だけ
視線の高さ: 座った目線
背景: 生活感を残す
やらないこと: 強い逆光。高彩度。笑顔だけの素材写真
この条件を、撮り下ろしにも素材選びにも全点に当てる。
1枚ずつの良し悪しではなく、並べたときの揃いで選ぶ。この道具は JavaScript で動きます。無効の場合は、上の見本仕様書を書き写して使ってください。