このサイトのモード切替アイコン（太陽・夕日・三日月）は、一度作り直しています。最初のバージョンは別で用意したイラスト画像で、1枚1枚はきれいだったのに、並べるとサイトから浮いて見えました。

「浮く」の正体は密度と筆致の不一致

原因を分解すると、こうなりました。

  • 描き込みの密度が違う。サイトの装飾は数ピクセルの簡素なドット絵なのに、アイコンだけグラデーション付きの精細なイラスト
  • グリッドが違う。サイト内のドット絵は同じ升目で描かれているが、外部素材は升目の概念がない
  • パレットが違う。サイトは温かいクリーム色を基調にしているのに、アイコンは独自の配色

つまり素材の出来不出来ではなく、制約を共有していないことが浮く原因でした。

同じエンジンで描き直す

このサイトのドット絵は、文字列グリッドから canvas に描く自前のミニエンジンで生成しています。そこでアイコンも既製画像をやめて、同じエンジン・同じ11×11グリッド・同じ単色パレットで描き起こしました。

....AAA....      ...AAAA....
..AAAAAAA..      ..AAAAAA...
.AAAAAAAAA.      .AAAAA.....
AAAAAAAAAAA      AAAA.......
  （夕日）        （三日月）

ロゴや装飾と同じ筆致になった瞬間、3つのアイコンは何の調整もなしに馴染みました。

形の調整は「文字を書き換えるだけ」

描き直した後も、「月が満月に見えるのでCの形をはっきりと」「太陽が沈むような形に」といった細かい修正が続きました。文字列グリッドで持っているおかげで、この種の依頼にはテキストの書き換えだけで応えられます。形のレビューと修正のループが速いことは、統一感を「維持し続ける」うえでも効きました。

まとめ

統一感とは、個々の要素の完成度ではなく、同じ制約から生まれたかどうかだと思います。グリッド・パレット・密度という制約を1か所（この場合は描画エンジン）に集約しておくと、要素が増えても世界観が崩れません。

良い素材を探すより、貧弱でもいいから「自分の筆」を1本持つこと。小さなサイトほど、それが効くようです。