ズレる・揃わない問題｜基準線で解決する（整列・余白）

「なんかズレて見える」の原因はセンスではなく基準線がないことです。揃える場所を固定し、余白と整列で安定させる手順、よくあるズレのパターン（中央寄せ地獄・端の不揃い・ブロックの高さ違い）をまとめて解決します。

ズレる・揃わない問題｜基準線で解決する

画像が整わないとき、多くの場合センスの問題ではありません。揃える基準がなく、要素がそれぞれ好き勝手な位置に置かれているだけです。

結論：整列は“見た目の好み”ではなくルールです。基準線を1本決めるだけで、ズレはほとんど解決します。

揃え方の選択肢を増やすほど崩れます。基本は2つで十分です。

揃え方	向く場面	特徴
左揃え	情報を読ませる画像	読みやすく安定する
中央揃え	一言で見せたい画像	整うが、崩れると目立つ

迷ったら：基本は左揃えです。読む順番が自然で、少し崩れても違和感が出にくいです。

基準線は難しく考えなくて大丈夫です。「ここに揃える」という線を1本決めるだけです。

結論：揃える場所が増えるほど崩れます。基準線は1本に絞ると速くなります。

中央揃えは簡単そうに見えますが、実は崩れが目立ちます。

直し方：要素が増えたら左揃えに戻すと安定します。中央揃えは「一言」向きです。

端の余白がバラバラだと、画像が落ち着きません。

結論：余白も揃える対象です。端の余白を揃えるだけで、整って見える確率が上がります。

文字ブロックや要素の間隔がバラつくと、雑に見えます。

直し方：間隔は「同じ」にします。大きさより、間隔が揃う方が整って見えます。

結論：整列は「感覚」ではなく「順番」です。この順で揃えるだけで、ズレの悩みはほぼ消えます。

ズレが解決すると、次に見えてくるのが「情報量が多すぎて重い」問題です。削る順番が分かると、画像は一気に強くなります。