サムネイルが切れるときの構図と出力の確認

一覧に並べたら、主役が欠けていた

投稿した作品を一覧で見たら、見せたかった顔が枠の外へ出ていることがあります。

開いてみれば元の絵はそのままです。欠けているのは一覧の表示だけです。

これは絵の出来ではなく、置いた場所の話です。

実際に描画した一覧の画面で測る

これは作図ではなく、実際にブラウザで描画した画面を撮ったものです。 並べた表紙も一覧のます目も、この記事のために自分で作りました。

撮ったときの条件は、横 860 ・ 縦 560 の画面で、表示倍率は 2 です。 表紙の原寸は横 1200 ・ 縦 640、ます目は 186 角でした。

表紙は 0.284375 倍で描かれ、ます目に見えていたのは原寸の横 272.97 から 927.03 までです。 破線は、その範囲に主役がどう掛かったかを示しています。

構図	主役の残り
中央に置く	100.0%
左に寄せる	58.6%
端に寄せる	0.0%

この三つの割合は、描画された要素の座標から出しました。 見た目で決めた値ではありません。

同じ関係を図に置き直す

上の画面で起きていたことを、図にして並べ直したものです。 こちらも実在の投稿先の画面ではありません。

ます目は元画像より狭く取ってあります。 はみ出した分が、一覧で見えなくなる部分です。

主役の四角がます目に入るかどうかを、座標で見ています。 目分量ではありません。

何を主役と決めるか

主役が決まっていないと、残ったかどうかを測れません。

一覧で最初に目に入ってほしいものを一つ選びます。 顔でも、題名でも構いません。

一つに絞ります。 二つ置くと、どちらかは必ず端へ寄ります。

主役の範囲を四角で囲みます。 座標で測るには、範囲が決まっている必要があります。

範囲は絵の上に書き込まず、別に控えます。 出すのは絵だけです。

構図を変えると残り方が変わる

構図	主役
中央に置く	まるごと残る
左に寄せる	はみ出す
端に寄せる	はみ出す

中央に置いた主役は、ます目の中に収まりました。

左でも端でも、寄せた側からはみ出します。 寄せる向きが違っても結果は同じでした。

残るかどうかは、寄せ幅よりも中心からどれだけ離したかで決まっています。

中心からどれだけ離せるか

中心に置けば残る、というのは分かりました。 では、どこまで離せるかです。

ます目の形が分からないうちは、決められません。 縦長か横長かで、離せる向きが変わります。

だから、自分の一覧で測った範囲を目安にします。 別の場所では変わる前提で使います。

離すなら、縦と横のどちらか一方にします。 両方へ離すと、どちらのます目でも外れます。

離した分は控えに書きます。 次の表紙で、同じ分だけ離せるかを試せます。

一覧と詳細と、もう一か所

一覧ではます目の形で切れ、詳細では元の形で出ます。

同じ作品でも、この二か所で見え方が違います。 片方だけ直すと、もう片方が崩れます。

別の画面でも同じとは限りません。 画面の形が変われば、ます目の形も変わります。

ます目の形は出す場所で決まる

この記事にある数字は、上の自作の一覧を測った値だけです。 出す場所のます目が何対何かは確かめていないので書きません。

出す場所ごとに違いますし、同じ場所でも変わることがあります。

測れるのは、自分が出したものが実際にどう並んだか、だけです。

そこから、主役を中心へ寄せるという置き方が決まります。

絵の描き起こしは扱わない

ここで扱っているのは、出したあとに切られる範囲の点検です。

一覧用の絵をどう描き起こすかは、別の話です。 色の作り方や文字の載せ方は含みません。

混ぜると直す手が二種類になって、どちらが効いたのか分からなくなります。

先に切れ方を測り、それでも足りないときに絵の側を考えます。

三か所を並べて自分で見る

出したあとに、一覧の画面を自分で開きます。

次に作品を開いた画面も見ます。 二か所の差がそこで分かります。

手元とは別の形の画面でも見ます。 横長と縦長で崩れ方が変わります。

三か所を見てから、置き直すかどうかを決めます。

置き直したあとの確かめ方

置き直したら、出す前にもう一度同じ測り方をします。

同じ一覧で描画し直します。 前の測定と同じ条件でないと比べられません。

主役の残った割合を数で出します。 見た目では、少し残っただけでも残ったように見えます。

前の値と並べて残します。 どれだけ動かして何%になったかが分かります。

出したあとにも一覧を開きます。 自作の一覧で残っても、出した先で同じとは限りません。

次の一枚は主役を中心へ

いま主役を端へ寄せているなら、中心へ動かすだけで一覧の欠けは減ります。

動かす幅は少しずつで構いません。 出して並べて、まだ欠けるなら足します。

一度決まれば、次の表紙は最初からその置き方で描けます。