写真とアイコン

光・寄り・彩度・人の写し方を先に文章で決めて、全点に同じ条件を適用する。画像の方向づけ

光・寄り・彩度・人物の条件を文章化して全点に適用

画像の方向づけで手順を見る

1枚ずつの良し悪しで選ばない。決めた条件に合うものだけを選ぶ。画像の方向づけ

1枚ずつではなく、決めた条件に合うものだけ

画像の方向づけで手順を見る

同じ枠に収めても、円は大きく三角は小さく見える。枠を少し越えさせて目で合わせる。画像の方向づけ

.icon {
  inline-size: 1.5rem;
  block-size: 1.5rem;
  overflow: visible; /* 円は少しはみ出させる */
}

線の太さが違う。全点で同じ値にする。角の処理も揃える。画像の方向づけ

svg { stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }

細い線とグラデーションに頼っている。1色に落として形が保つか確かめ、最小サイズを決める。ロゴ

1色版で最小サイズを確かめる

ロゴで手順を見る

ロゴをそのまま縮めている。16px用の簡略形を別に作る。ロゴ

16px用の簡略形を別途作る

ロゴで手順を見る

クリアスペースを決める。ロゴの一部（文字の高さなど）を単位にし、その中には何も入れない。ロゴ

.logo { padding: 1em; } /* 文字の高さ1em分は空ける */

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">