掲載媒体に合わせてサイズを展開する

横長で完成した画像を正方形へ引き伸ばすと、文字や図版が歪みます。そのまま切り抜くと、日時や対象者が欠けることもあります。このレッスンでは、同じ開催情報を保ったまま、正方形と縦長の配置を作ります。サイズ展開を単純な拡大縮小ではなく、読み順を組み直す作業として扱い、各画像を別々に検査します。

学習目標

同じ開催情報を三つの比率へ再配置する。
素材を歪めず各サイズの表示を照合する。
用途と版が分かるPNGと設定を保存する。

縦横比が変わると空間も変わる

横長では文字と素材を左右に置けても、正方形では同じ幅を確保しにくくなります。縦長では上から下へ読む距離が増えるため、日時が離れすぎないように注意が必要です。形が変わると使える場所も変わるので、内容の順番とまとまりを考え直します。

元画像を縦横別々の倍率で伸ばすと、文字や人物が太ったり細くなったりします。これは文字のサイズ調整とは異なり、形自体を歪める処理です。写真の人物や正式ロゴがある場合は特に問題になるため、画像全体を無理に新しい枠へ押し込まないでください。

切り抜きだけで対応できる場合もありますが、すべての必須情報が残るかを確認する必要があります。今回の横長画像では、見出しと条件が別の領域にあるため、単純に中央を切ると端の情報が失われます。だから編集ツールの配置を切り替え、同じ入力内容を再び描画します。

制作メモに、変えないのは内容、変えるのは配置と書いておくと判断しやすくなります。正方形へ変えるために日付や費用を省略したら、それは単なるサイズ展開ではなく、伝える条件も変更したことになります。変更権限があるかを別に確認してください。

正方形で情報のまとまりを作る

ツールで1080×1080pxを選ぶと、タイトルと対象を上、素材を中、開催条件を下へまとめる構図になります。横長の左右分割から、上下のまとまりへ変わる点を観察してください。文字の内容は入力欄のまま保たれますが、見え方は変わるため再確認が必要です。

まず主見出しを読めるかを見て、その後に日時と形式・費用を探します。正方形の中央を素材が大きく占め、条件が狭い欄へ押し込まれていないか確認します。図版を見せることが目的ではなく、参加者が内容と条件を判断できることが目的です。

小さい表示では、条件の一行が長いと文字が細かく見えます。元情報の意味を保ちながら、日付と時間を別の行へ分ける方法があります。ただし、年や終了時刻が別の場所に飛んで関連が分からなくならないよう、同じ情報欄の中で整理してください。

講師情報や特典が多い実案件では、今回のテンプレートへ無理に詰め込む必要はありません。各サイズで必要な領域を見積もり、別の構成が必要と判断することもできます。完成見本を唯一の正解として扱わず、元情報と読みやすさの関係を確認する例として使います。

縦長で読む順番をつなぐ

1080×1350pxの縦長では、上から対象、タイトル、素材、日時と条件へ進む構図にします。縦方向の余裕があるからといって、補足コピーを大量に増やす必要はありません。三サイズの違いを比べるため、基本課題では同じ情報を使います。

縦長で注意したいのは、上部だけを見た人が日時や参加条件に気付かないことです。条件を下端ぎりぎりへ追いやらず、視線が自然に進むまとまりを作ります。画像の周囲に表示される操作ボタンや説明欄がある実媒体では、その影響も公式の表示条件と実画面で確かめます。

今回のツールは、縦長へ切り替えても元の素材を縦に引き伸ばしません。比率を保って枠へ収めます。空きが気になる場合でも、絵を歪めて埋めないでください。余白として残す、素材の配置を変える、用途に合う別素材を用意するなどの選択肢があります。

縦長の全体を大きな画面で見た後は、横320pxへ縮小して読む順番を確認します。下まで見渡せることと、必要な文字が読めることを分けて見ます。画像が長くなった分だけ文字も縮小されていないか、日時の判読を必ず確かめてください。

全サイズの文言を再び照合する

同じ入力内容から描画していても、各サイズで表示される文字が欠けていないかを確認します。入力欄に正しい情報があっても、画像の外へはみ出していれば掲載できません。元情報の表を使い、タイトルから練習表示まで、三サイズを順に照合してください。

比較表には横長、正方形、縦長の列を用意します。行はタイトル、対象、日付、時間、日本時間、形式、費用、講師、練習表示です。各欄を正しい、誤り、未確認に分け、さらに縮小時に読めたかを別に記録します。正確さと判読を一つの丸印でまとめないようにします。

修正で見出しを短くした場合は、ほかのサイズも同じ内容へ更新します。一サイズだけ旧タイトルが残ると、別のイベントのように見える可能性があります。変更した入力からすべてを書き出し直し、ファイル名の版番号もそろえてください。

もし掲載先ごとに意図的に別の見出しを使うなら、その理由と対応する内容を記録します。今回の基本課題は同じ訴求での展開なので、無意識に言葉を変えないことを優先します。構図の比較とコピーの比較を同時に混ぜないためです。

ファイル名で用途と版を区別する

ツールの保存名には版が入りません。ダウンロード後、PCのファイル一覧でPNGとJSONの末尾へ同じ「_v2」を加えます。保存名には、イベント、サイズ、版を含めます。例えば「練習告知_1200x630_v2.png」「練習告知_1080x1080_v2.png」「練習告知_1080x1350_v2.png」です。画像を開かなくても用途と新旧が分かる名前にすると、掲載担当者が取り違えにくくなります。

設定JSONも各サイズで保存します。同じ内容を使っていても、開き直したときにどのサイズと設定だったかを戻せるようにするためです。PNGだけを残し、日時の修正時に最初から作り直す状態を避けます。素材と開催情報も同じ作業フォルダへ入れてください。

「最終」「最終2」「本当の最終」のような名前が増えると、どれを使うか分からなくなります。採用する版を確認記録へ明記し、過去の版は比較用に分けます。送付するときはファイル名と用途をセットで伝え、受け取った人の推測に任せないようにします。

三サイズを並べた一覧画像も、確認の補助として役立ちます。ただし、それは各サイズの正式な書き出しファイルの代わりにはなりません。一覧だけを納品せず、掲載に使う個別のPNGと設定をそろえてください。保存するときは、三つの設定を順に開き、表示された寸法も見てください。ファイル名だけ正方形でも、内容が横長のままなら掲載時に取り違えます。名前、画像の実寸、選択した設定の三つを対応させます。納品用フォルダの一覧で名前を確認し、その後に画像の情報を確認すると、違う種類の間違いを分けて探せます。

実践課題：主画像を二つの比率へ展開する

修正した横長の設定を使い、正方形と縦長へ切り替えます。各画像を原寸と横320pxで読み、元情報が欠けずに残るか確認してください。三サイズのPNGと設定JSONを用途・寸法・版が分かる名前で保存します。文字を変更した場合は、全サイズを書き出し直して版をそろえます。

完成例は「横長・正方形・縦長のv2がそろい、同じ日時と条件を表示。素材の縦横比も維持」です。自己確認は、画像を歪めていないか、各サイズに必要条件が残るか、個別PNGと設定を保存したかの三点です。次は保存した実物を開き直し、最終照合を行います。

まとめ：形が変われば配置を組み直す

サイズ展開では、文字や素材を引き伸ばさず、同じ開催情報を別の配置へ組み直します。各サイズの正確さと判読を確認し、ファイル名で用途と版を区別します。次の最終レッスンで、再編集と公開前の確認範囲を整理します。

自社の制作へ取り入れる

自社の制作物と判断に迷う工程を整理し、法人研修・AI導入支援の内容をご覧ください。