過去記事サムネがしっくりこないので作り直してみたら、ビフォーアフターサムネの「配置最適解」が見えました。
Before
After
こんにちは。noteサムネイル制作部の『はく』です。
今回はサムネの作り直し！！
作り直しは正直大変です。
ですが、悩みながら手を動かす過程の中にこそ成長ポイントがあると考えています。
この記事を読むことで
ビフォーアフターサムネの配置最低ポイントがわかります
ぜひ最後までご覧ください。
今回作り直すのはこちらのサムネ。単体だとまあ悪くない。
ただ、スマホのnoteアプリ内での表示だと小さい。
左側のビフォーサムネが小さいことは仕方ないです。
問題なのは文字が書いてあることがわかりづらいこと。だから「ビフォーアフターで文字が大きくなっている」という本題のところが伝わらない。
ではサムネを大きくするにはどうするか？
はじめに思いついたのはこんなイメージ。
上にビフォー。下にアフター。
さっそく形に。
縦で並べると狭いので、画像を大きくできませんでした。
と考えると、元サムネも横並びで狭いので、画像を大きくできていません。
縦はダメ…
横もダメ…
ということは.…
そうです！斜めです！
斜めに配置して、一部画像を被せてみました。被るのも端同士なので文字がほとんど隠れないです。
左上「サムネ制作部」の文字は隠れてしまったので移動。
次に気になるのは右上のスペース
文字を入れてみました。サムネの文字と同じ色だと目立たないので青で。ここのチョイスも難しいですよね。。何色か試したのですが、どれもしっくりきませんでした。
ただ文字色はともかく、全体的には良い感じにまとまったと思います！！
*この記事執筆中に微修正しました。こちらが完成版↓
さいごに
では比べてみましょう。
Before
After
こうして見比べると、Beforeのサムネは空白が多いような気がします。画像２枚が真ん中より上にあるので下が軽くてバランスが悪いのかもしれません…
今回の学び
・「縦で並べる」「横で並べる」とスペースが狭いから画像を大きくできない。また縦で並べた際は左右のスペースが、横で並べた際は上下のスペースが余る。
・ビフォーアフターサムネの配置最適解は「斜め」
・文字色の選び方について勉強が必要
とにかく勉強と実践ですね！
ちなみに次回は、この記事に関連してビフォーアフターサムネの配置パターンについて考察しようと思います。縦横斜めに加えて、「斜めでも斜線を入れればどう見えるのか？」という点も見ていこうと思います。
ぜひこちらもご覧ください！！
(リンク予定)
では、最後まで読んでいただき、ありがとうございました！！
